quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simplify code by not mapping x property to dateTime property

Browse Source
This commit is contained in:
Conor Barnes 2022-09-06 14:27:01 -03:00
parent 2087a30b6b
commit 3ea747fae4
2 changed files with 13 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/components/src/components/DistributionChart.tsx
View File

@ -85,7 +85,8 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
);
if (sampleSets.length) {
for (const set of sampleSets) {
if (set.distribution.t.tag === "SampleSet") { // this must be duplicated to please typescript, more elegant solution probably exists
if (set.distribution.t.tag === "SampleSet") {
// this must be duplicated to please typescript, more elegant solution probably exists
shapes.value[0].samples.push(
...set.distribution.t.value.map((v) => ({ x: v, y: 0 }))
);
@ -102,33 +103,10 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
);
widthProp = 20;
}
const predomain = shapes.value.flatMap((shape) =>
const domain = shapes.value.flatMap((shape) =>
shape.discrete.concat(shape.continuous)
);
const domain =
xAxis === "dateTime"
? predomain.map((p) => ({ dateTime: p.x, y: p.y }))
: predomain;
const data =
xAxis === "dateTime"
? shapes.value.map((val) => {
return {
...val,
continuous: val.continuous.map((p) => {
return { dateTime: p.x, y: p.y };
}),
discrete: val.discrete.map((p) => {
return { dateTime: p.x, y: p.y };
}),
samples: val.samples.map((p) => {
return { dateTime: p, y: 0 };
}),
};
})
: shapes.value;
return (
<div style={{ width: widthProp }}>
{logX && shapes.value.some(hasMassBelowZero) ? (
@ -138,7 +116,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
) : (
<Vega
spec={spec}
data={{ data, domain }}
data={{ data: shapes.value, domain }}
width={widthProp - 10}
height={height}
actions={actions}

15
packages/components/src/lib/distributionSpecBuilder.ts
View File

@ -20,6 +20,7 @@ export type DistributionChartSpecOptions = {
xAxis?: "number" | "dateTime";
};
/** X Scales */
export const linearXScale: LinearScale = {
name: "xscale",
clamp: true,
@ -47,9 +48,10 @@ export const timeXScale: TimeScale = {
type: "time",
range: "width",
nice: false,
domain: { data: "domain", field: "dateTime" },
domain: { data: "domain", field: "x" },
};
/** Y Scales */
export const linearYScale: LinearScale = {
name: "yscale",
type: "linear",
@ -190,7 +192,7 @@ export function buildVegaSpec(
interpolate: { value: "linear" },
x: {
scale: "xscale",
field: dateTime ? "dateTime" : "x",
field: "x",
},
y: {
scale: "yscale",
@ -237,7 +239,7 @@ export function buildVegaSpec(
update: {
x: {
scale: "xscale",
field: dateTime ? "dateTime" : "x",
field: "x",
},
y: {
scale: "yscale",
@ -267,14 +269,14 @@ export function buildVegaSpec(
size: [{ value: 100 }],
tooltip: {
signal: dateTime
? "{ probability: datum.y, value: datetime(datum.dateTime) }"
? "{ probability: datum.y, value: datetime(datum.x) }"
: "{ probability: datum.y, value: datum.x }",
},
},
update: {
x: {
scale: "xscale",
field: dateTime ? "dateTime" : "x",
field: "x",
offset: 0.5, // if this is not included, the circles are slightly left of center.
},
y: {
@ -307,7 +309,7 @@ export function buildVegaSpec(
from: { data: "sample_facet" },
encode: {
enter: {
x: { scale: "xscale", field: dateTime ? "dateTime" : "x" },
x: { scale: "xscale", field: "x" },
width: { value: 0.1 },
y: { value: 25, offset: { signal: "height" } },
@ -369,7 +371,6 @@ export function buildVegaSpec(
signal:
"position ? position[0] < 0 ? 0 : position[0] > width ? 0 : 1 : 0",
},
// opacity: { signal: "position ? 1 : 0" },
},
},
},