legends, blues colors scheme, remove color setting
This commit is contained in:
parent
fc29a7211e
commit
bf02f69aca
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
})),
|
})),
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user