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

Add cdf tooltip and squiggle code control

Browse Source
This commit is contained in:
Sam Nolan 2022-02-13 16:31:37 +11:00
parent 3780a219f0
commit 974ca2335e
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/components/src/stories/SquiggleChart.stories.tsx
View File

@ -7,4 +7,9 @@ export default {
component: SquiggleChart
}
export const Default = () => <SquiggleChart squiggleString="normal(5, 2)" />
const Template = ({squiggleString}) => <SquiggleChart squiggleString={squiggleString} />
export const Default = Template.bind({})
Default.args = {
squiggleString: "normal(5, 2)"
};

33
packages/components/src/stories/SquiggleChart.tsx
View File

@ -62,7 +62,7 @@ let specification : Spec = {
},
"update": {
"fill": {
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: mousex, color: 'steelblue'}, {offset: mousex, color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
},
"interpolate": {"value": "monotone"},
"fillOpacity": {"value": 1}
@ -79,11 +79,17 @@ function zip<T>(a: Array<T>, b: Array<T>): Array<Array<T>>{
return [e, b[i]];
})
}
function zip3<T>(a: Array<T>, b: Array<T>, c: Array<T>): Array<Array<T>>{
return a.map(function(e, i) {
return [e, b[i], c[i]];
})
}
/**
* Primary UI component for user interaction
*/
export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) => {
let result = run(squiggleString);
console.log(result);
if (result.tag === "Ok") {
let chartResult = result.value[0];
if(chartResult["NAME"] === "Float"){
@ -93,8 +99,14 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
let shape = chartResult.VAL.shape;
if(shape.tag === "Continuous"){
let xyShape = shape.value.xyShape;
let values = zip(xyShape.xs, xyShape.ys).map(([x,y]) => ({x: x, y: y}));
console.log(values)
let totalY = xyShape.ys.reduce((a, b) => a + b);
let total = 0;
let cdf = xyShape.ys.map(y => {
total += y;
return total / totalY;
})
console.log(cdf)
let values = zip3(cdf, xyShape.xs, xyShape.ys).map(([c, x, y ]) => ({cdf: (c * 100).toFixed(2) + "%", x: x, y: y}));
return (
<SquiggleVegaChart
@ -104,7 +116,13 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
}
else if(shape.tag === "Discrete"){
let xyShape = shape.value.xyShape;
let values = zip(xyShape.xs, xyShape.ys).map(([x,y]) => ({x: x, y: y}));
let totalY = xyShape.ys.reduce((a, b) => a + b);
let total = 0;
let cdf = xyShape.ys.map(y => {
total += y;
return total / totalY;
})
let values = zip3(cdf, xyShape.xs, xyShape.ys).map(([c, x,y]) => ({cdf: (c * 100).toFixed(2) + "%", x: x, y: y}));
return (
<SquiggleVegaChart
@ -113,6 +131,8 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
);
}
else if(shape.tag === "Mixed"){
console.log(shape.value.integralSumCache)
console.log(shape.value.integralCache)
let xyShape = shape.value.continuous.xyShape;
let values = zip(xyShape.xs, xyShape.ys).map(([x,y]) => ({x: x, y: y}));
@ -127,6 +147,11 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
}
}
else if(result.tag == "Error") {
// At this point, we came across an error. What was our error?
return (<p>{"Error parsing Squiggle: " + result.value}</p>)
}
return (<p>{"Invalid Response"}</p>)
};