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

View File

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

View File

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

View File

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

View File

@ -10,8 +10,6 @@ export type DistributionChartSpecOptions = {
minX?: number; minX?: number;
/** The maximum x coordinate shown on the chart */ /** The maximum x coordinate shown on the chart */
maxX?: number; maxX?: number;
/** The color of the chart */
color?: string;
/** The title of the chart */ /** The title of the chart */
title?: string; title?: string;
/** The formatting of the ticks */ /** The formatting of the ticks */
@ -57,14 +55,12 @@ export let expYScale: PowScale = {
}; };
export const defaultTickFormat = ".9~s"; export const defaultTickFormat = ".9~s";
export const defaultColor = "#739ECC";
export function buildVegaSpec( export function buildVegaSpec(
specOptions: DistributionChartSpecOptions specOptions: DistributionChartSpecOptions
): VisualizationSpec { ): VisualizationSpec {
const { const {
format = defaultTickFormat, format = defaultTickFormat,
color = defaultColor,
title, title,
minX, minX,
maxX, maxX,
@ -106,7 +102,7 @@ export function buildVegaSpec(
data: "data", data: "data",
field: "name", field: "name",
}, },
range: { scheme: "category10" }, range: { scheme: "blues" },
}, },
], ],
axes: [ axes: [
@ -120,6 +116,7 @@ export function buildVegaSpec(
domainOpacity: 0.0, domainOpacity: 0.0,
format: format, format: format,
tickCount: 10, tickCount: 10,
labelOverlap: "greedy",
}, },
], ],
marks: [ marks: [
@ -259,15 +256,38 @@ export function buildVegaSpec(
], ],
}, },
], ],
}; legends: [
if (title) { {
spec = { fill: "color",
...spec, 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: { title: {
text: title, text: title,
}, },
}; }),
} };
return spec; return spec;
} }

View File

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

View File

@ -99,7 +99,20 @@ could be continuous, discrete or mixed.
<Story <Story
name="Multiple plots" name="Multiple plots"
args={{ 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, width,
}} }}
> >