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

Lint components

Browse Source
This commit is contained in:
Sam Nolan 2022-05-02 17:01:09 +00:00
parent 213808d3aa
commit 8452995c31
2 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { distributionErrorToString } from "@quri/squiggle-lang";
import { createClassFromSpec } from "react-vega"; import { createClassFromSpec } from "react-vega";
import * as chartSpecification from "../vega-specs/spec-distributions.json"; import * as chartSpecification from "../vega-specs/spec-distributions.json";
import { ErrorBox } from "./ErrorBox"; import { ErrorBox } from "./ErrorBox";
import { useSize } from 'react-use'; import { useSize } from "react-use";
let SquiggleVegaChart = createClassFromSpec({ let SquiggleVegaChart = createClassFromSpec({
spec: chartSpecification as Spec, spec: chartSpecification as Spec,
@ -23,28 +23,29 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
height, height,
width, width,
}: DistributionChartProps) => { }: DistributionChartProps) => {
const [sized, _] = useSize((size) => { const [sized, _] = useSize((size) => {
let shape = distribution.pointSet(); let shape = distribution.pointSet();
let widthProp = width !== undefined ? width - 20 : size.width - 10; let widthProp = width !== undefined ? width - 20 : size.width - 10;
if (shape.tag === "Ok") { if (shape.tag === "Ok") {
return ( <div> return (
<SquiggleVegaChart <div>
data={{ con: shape.value.continuous, dis: shape.value.discrete }} <SquiggleVegaChart
width={widthProp} data={{ con: shape.value.continuous, dis: shape.value.discrete }}
height={height} width={widthProp}
actions={false} height={height}
/> actions={false}
</div> />
</div>
); );
} else { } else {
return (<div> return (
<ErrorBox heading="Distribution Error"> <div>
{distributionErrorToString(shape.value)} <ErrorBox heading="Distribution Error">
</ErrorBox> {distributionErrorToString(shape.value)}
</div> </ErrorBox>
) </div>
} );
}) }
return sized; });
return sized;
}; };

2
packages/components/src/components/SquiggleChart.tsx
View File

@ -121,7 +121,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
<RecordKeyHeader>{key}</RecordKeyHeader> <RecordKeyHeader>{key}</RecordKeyHeader>
<SquiggleItem <SquiggleItem
expression={r} expression={r}
width={width !== undefined? width - 20 : width} width={width !== undefined ? width - 20 : width}
height={50} height={50}
/> />
</> </>