legends, blues colors scheme, remove color setting

This commit is contained in:
Vyacheslav Matyukhin 2022-08-19 21:14:08 +04:00
parent fc29a7211e
commit bf02f69aca
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
7 changed files with 65 additions and 40 deletions

View File

@ -17,7 +17,7 @@ import {
} from "../lib/distributionSpecBuilder";
import { NumberShower } from "./NumberShower";
import { Plot, parsePlot } from "../lib/plotParser";
import { flattenResult, all } from "../lib/utility";
import { flattenResult } from "../lib/utility";
import { hasMassBelowZero } from "../lib/distributionUtils";
export type DistributionPlottingSettings = {
@ -52,6 +52,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
plot.distributions.map((x) =>
resultMap(x.distribution.pointSet(), (shape) => ({
name: x.name,
// color: x.color, // not supported yet
continuous: shape.continuous,
discrete: shape.discrete,
}))
@ -94,7 +95,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
/>
)}
<div className="flex justify-center">
{showSummary && plot.distributions.length == 1 && (
{showSummary && plot.distributions.length === 1 && (
<SummaryTable distribution={plot.distributions[0].distribution} />
)}
</div>

View File

@ -37,10 +37,7 @@ import { InputItem } from "./ui/InputItem";
import { Text } from "./ui/Text";
import { ViewSettings, viewSettingsSchema } from "./ViewSettings";
import { HeadedSection } from "./ui/HeadedSection";
import {
defaultColor,
defaultTickFormat,
} from "../lib/distributionSpecBuilder";
import { defaultTickFormat } from "../lib/distributionSpecBuilder";
import { Button } from "./ui/Button";
type PlaygroundProps = SquiggleChartProps & {
@ -240,7 +237,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
title,
minX,
maxX,
color = defaultColor,
tickFormat = defaultTickFormat,
distributionChartActions,
code: controlledCode,
@ -268,7 +264,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
title,
minX,
maxX,
color,
tickFormat,
distributionChartActions,
showSummary,

View File

@ -6,10 +6,7 @@ import { Modal } from "../ui/Modal";
import { ViewSettings, viewSettingsSchema } from "../ViewSettings";
import { Path, pathAsString } from "./utils";
import { ViewerContext } from "./ViewerContext";
import {
defaultColor,
defaultTickFormat,
} from "../../lib/distributionSpecBuilder";
import { defaultTickFormat } from "../../lib/distributionSpecBuilder";
import { PlaygroundContext } from "../SquigglePlayground";
type Props = {
@ -46,7 +43,6 @@ const ItemSettingsModal: React.FC<
tickFormat:
mergedSettings.distributionPlotSettings.format || defaultTickFormat,
title: mergedSettings.distributionPlotSettings.title,
color: mergedSettings.distributionPlotSettings.color || defaultColor,
minX: mergedSettings.distributionPlotSettings.minX,
maxX: mergedSettings.distributionPlotSettings.maxX,
distributionChartActions: mergedSettings.distributionPlotSettings.actions,
@ -66,7 +62,6 @@ const ItemSettingsModal: React.FC<
expY: vars.expY,
format: vars.tickFormat,
title: vars.title,
color: vars.color,
minX: vars.minX,
maxX: vars.maxX,
actions: vars.distributionChartActions,

View File

@ -5,10 +5,7 @@ import { InputItem } from "./ui/InputItem";
import { Checkbox } from "./ui/Checkbox";
import { HeadedSection } from "./ui/HeadedSection";
import { Text } from "./ui/Text";
import {
defaultColor,
defaultTickFormat,
} from "../lib/distributionSpecBuilder";
import { defaultTickFormat } from "../lib/distributionSpecBuilder";
export const viewSettingsSchema = yup.object({}).shape({
chartHeight: yup.number().required().positive().integer().default(350),
@ -18,7 +15,6 @@ export const viewSettingsSchema = yup.object({}).shape({
expY: yup.boolean().required(),
tickFormat: yup.string().default(defaultTickFormat),
title: yup.string(),
color: yup.string().default(defaultColor).required(),
minX: yup.number(),
maxX: yup.number(),
distributionChartActions: yup.boolean(),
@ -114,12 +110,6 @@ export const ViewSettings: React.FC<{
register={register}
label="Tick Format"
/>
<InputItem
name="color"
type="color"
register={register}
label="Color"
/>
</div>
</HeadedSection>
</div>

View File

@ -10,8 +10,6 @@ export type DistributionChartSpecOptions = {
minX?: number;
/** The maximum x coordinate shown on the chart */
maxX?: number;
/** The color of the chart */
color?: string;
/** The title of the chart */
title?: string;
/** The formatting of the ticks */
@ -57,14 +55,12 @@ export let expYScale: PowScale = {
};
export const defaultTickFormat = ".9~s";
export const defaultColor = "#739ECC";
export function buildVegaSpec(
specOptions: DistributionChartSpecOptions
): VisualizationSpec {
const {
format = defaultTickFormat,
color = defaultColor,
title,
minX,
maxX,
@ -106,7 +102,7 @@ export function buildVegaSpec(
data: "data",
field: "name",
},
range: { scheme: "category10" },
range: { scheme: "blues" },
},
],
axes: [
@ -120,6 +116,7 @@ export function buildVegaSpec(
domainOpacity: 0.0,
format: format,
tickCount: 10,
labelOverlap: "greedy",
},
],
marks: [
@ -259,15 +256,38 @@ export function buildVegaSpec(
],
},
],
};
if (title) {
spec = {
...spec,
legends: [
{
fill: "color",
orient: "top",
labelFontSize: 12,
encode: {
symbols: {
update: {
fill: [
{ test: "length(domain('color')) == 1", value: "transparent" },
{ scale: "color", field: "value" },
],
},
},
labels: {
interactive: true,
update: {
fill: [
{ test: "length(domain('color')) == 1", value: "transparent" },
{ value: "black" },
],
},
},
},
},
],
...(title && {
title: {
text: title,
},
};
}
}),
};
return spec;
}

View File

@ -1,7 +1,11 @@
import * as yup from "yup";
import { Distribution, result, squiggleExpression } from "@quri/squiggle-lang";
export type LabeledDistribution = { name: string; distribution: Distribution };
export type LabeledDistribution = {
name: string;
distribution: Distribution;
color?: string;
};
export type Plot = {
distributions: LabeledDistribution[];
@ -27,12 +31,18 @@ const schema = yup
.of(
yup.object().shape({
tag: yup.mixed().oneOf(["record"]),
value: yup.object().shape({
value: yup.object({
name: yup.object().shape({
tag: yup.mixed().oneOf(["string"]),
value: yup.string().required(),
}),
distribution: yup.object().shape({
// color: yup
// .object({
// tag: yup.mixed().oneOf(["string"]),
// value: yup.string().required(),
// })
// .default(undefined),
distribution: yup.object({
tag: yup.mixed().oneOf(["distribution"]),
value: yup.mixed(),
}),
@ -51,6 +61,7 @@ export function parsePlot(record: {
return ok({
distributions: plotRecord.distributions.value.map((x) => ({
name: x.value.name.value,
// color: x.value.color?.value, // not supported yet
distribution: x.value.distribution.value,
})),
});

View File

@ -99,7 +99,20 @@ could be continuous, discrete or mixed.
<Story
name="Multiple plots"
args={{
code: '{distributions: [{name: "one", distribution: mx(0.5, normal(0,1))}, {name: "two", distribution: mx(2, normal(5, 2))}]}',
code: `
{
distributions: [
{
name: "one",
distribution: mx(0.5, normal(0,1))
},
{
name: "two",
distribution: mx(2, normal(5, 2)),
}
]
}
`,
width,
}}
>