Format and fix build error
This commit is contained in:
parent
de1c1d4e7e
commit
097baadb04
|
@ -8,7 +8,7 @@
|
||||||
"packages/*"
|
"packages/*"
|
||||||
],
|
],
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"@types/react": "17.0.39"
|
"@types/react": "^17.0.43"
|
||||||
},
|
},
|
||||||
"packageManager": "yarn@1.22.17"
|
"packageManager": "yarn@1.22.17"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,25 +1,29 @@
|
||||||
# Squiggle Components
|
# Squiggle Components
|
||||||
|
|
||||||
This package contains all the components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
|
This package contains all the components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
|
||||||
|
|
||||||
# Build for development
|
# Build for development
|
||||||
We assume that you had run `yarn` at monorepo level, installing dependencies.
|
|
||||||
|
|
||||||
You need to _prepare_ by building and bundling `squiggle-lang`
|
We assume that you had run `yarn` at monorepo level, installing dependencies.
|
||||||
``` sh
|
|
||||||
|
You need to _prepare_ by building and bundling `squiggle-lang`
|
||||||
|
|
||||||
|
```sh
|
||||||
cd ../squiggle-lang
|
cd ../squiggle-lang
|
||||||
yarn build
|
yarn build
|
||||||
```
|
```
|
||||||
|
|
||||||
If you've otherwise done this recently you can skip those.
|
If you've otherwise done this recently you can skip those.
|
||||||
|
|
||||||
Run a development server
|
Run a development server
|
||||||
|
|
||||||
``` sh
|
```sh
|
||||||
yarn start
|
yarn start
|
||||||
```
|
```
|
||||||
|
|
||||||
And build artefacts for production,
|
And build artefacts for production,
|
||||||
|
|
||||||
``` sh
|
```sh
|
||||||
yarn bundle # builds components library
|
yarn bundle # builds components library
|
||||||
yarn build # builds storybook app
|
yarn build # builds storybook app
|
||||||
```
|
```
|
||||||
|
|
|
@ -9,7 +9,6 @@
|
||||||
"@types/jest": "^27.4.0",
|
"@types/jest": "^27.4.0",
|
||||||
"@types/lodash": "^4.14.178",
|
"@types/lodash": "^4.14.178",
|
||||||
"@types/node": "^17.0.16",
|
"@types/node": "^17.0.16",
|
||||||
"@types/react": "^17.0.43",
|
|
||||||
"@types/react-dom": "^17.0.14",
|
"@types/react-dom": "^17.0.14",
|
||||||
"antd": "^4.19.3",
|
"antd": "^4.19.3",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
|
@ -29,7 +28,7 @@
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
|
"start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
|
||||||
"build": "build-storybook -s public",
|
"build": "tsc -b && build-storybook -s public",
|
||||||
"bundle": "webpack",
|
"bundle": "webpack",
|
||||||
"all": "yarn bundle && yarn build"
|
"all": "yarn bundle && yarn build"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, {FC} from "react";
|
import React, { FC } from "react";
|
||||||
import AceEditor from "react-ace";
|
import AceEditor from "react-ace";
|
||||||
|
|
||||||
import "ace-builds/src-noconflict/mode-golang";
|
import "ace-builds/src-noconflict/mode-golang";
|
||||||
|
@ -7,31 +7,32 @@ import "ace-builds/src-noconflict/ext-language_tools";
|
||||||
import "ace-builds/src-noconflict/keybinding-vim";
|
import "ace-builds/src-noconflict/keybinding-vim";
|
||||||
|
|
||||||
interface CodeEditorProps {
|
interface CodeEditorProps {
|
||||||
value : string,
|
value: string;
|
||||||
onChange : (value: string) => void,
|
onChange: (value: string) => void;
|
||||||
oneLine : boolean,
|
oneLine: boolean;
|
||||||
width?: number
|
width?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export let CodeEditor : FC<CodeEditorProps> = (props) =>
|
export let CodeEditor: FC<CodeEditorProps> = (props) => (
|
||||||
<AceEditor
|
<AceEditor
|
||||||
value={props.value}
|
value={props.value}
|
||||||
mode="golang"
|
mode="golang"
|
||||||
theme="github"
|
theme="github"
|
||||||
width={props.width ? props.width + 'px' : '500px'}
|
width={props.width ? props.width + "px" : "500px"}
|
||||||
height={props.oneLine ? "1.2em" : "500px"}
|
height={props.oneLine ? "1.2em" : "500px"}
|
||||||
showGutter={false}
|
showGutter={false}
|
||||||
highlightActiveLine={false}
|
highlightActiveLine={false}
|
||||||
showPrintMargin={false}
|
showPrintMargin={false}
|
||||||
onChange={props.onChange}
|
onChange={props.onChange}
|
||||||
name="UNIQUE_ID_OF_DIV"
|
name="UNIQUE_ID_OF_DIV"
|
||||||
editorProps={{
|
editorProps={{
|
||||||
$blockScrolling: true,
|
$blockScrolling: true,
|
||||||
}}
|
}}
|
||||||
setOptions={{
|
setOptions={{
|
||||||
enableBasicAutocompletion: false,
|
enableBasicAutocompletion: false,
|
||||||
enableLiveAutocompletion: true,
|
enableLiveAutocompletion: true,
|
||||||
enableSnippets: true,
|
enableSnippets: true,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
export default CodeEditor
|
);
|
||||||
|
export default CodeEditor;
|
||||||
|
|
|
@ -13,11 +13,11 @@ import * as chartSpecification from "./spec-distributions.json";
|
||||||
import * as percentilesSpec from "./spec-percentiles.json";
|
import * as percentilesSpec from "./spec-percentiles.json";
|
||||||
|
|
||||||
let SquiggleVegaChart = createClassFromSpec({
|
let SquiggleVegaChart = createClassFromSpec({
|
||||||
spec: chartSpecification as Spec
|
spec: chartSpecification as Spec,
|
||||||
});
|
});
|
||||||
|
|
||||||
let SquigglePercentilesChart = createClassFromSpec({
|
let SquigglePercentilesChart = createClassFromSpec({
|
||||||
spec: percentilesSpec as Spec
|
spec: percentilesSpec as Spec,
|
||||||
});
|
});
|
||||||
|
|
||||||
export interface SquiggleChartProps {
|
export interface SquiggleChartProps {
|
||||||
|
@ -76,8 +76,13 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
y: y,
|
y: y,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
console.log(values.length)
|
return (
|
||||||
return <SquiggleVegaChart width={props.width ? props.width : 500} data={{ con: values }} actions={false}/>;
|
<SquiggleVegaChart
|
||||||
|
width={props.width ? props.width : 500}
|
||||||
|
data={{ con: values }}
|
||||||
|
actions={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
} else if (shape.tag === "Discrete") {
|
} else if (shape.tag === "Discrete") {
|
||||||
let xyShape = shape.value.xyShape;
|
let xyShape = shape.value.xyShape;
|
||||||
let totalY = xyShape.ys.reduce((a, b) => a + b);
|
let totalY = xyShape.ys.reduce((a, b) => a + b);
|
||||||
|
@ -92,7 +97,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
y: y,
|
y: y,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return <SquiggleVegaChart data={{ dis: values }} actions={false}/>;
|
return <SquiggleVegaChart data={{ dis: values }} actions={false} />;
|
||||||
} else if (shape.tag === "Mixed") {
|
} else if (shape.tag === "Mixed") {
|
||||||
let discreteShape = shape.value.discrete.xyShape;
|
let discreteShape = shape.value.discrete.xyShape;
|
||||||
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
|
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
|
||||||
|
@ -126,10 +131,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
|
|
||||||
let total = 0;
|
let total = 0;
|
||||||
let cdf = sortedPoints.map((point: labeledPoint) => {
|
let cdf = sortedPoints.map((point: labeledPoint) => {
|
||||||
if (point.type == "discrete") {
|
if (point.type === "discrete") {
|
||||||
total += point.y;
|
total += point.y;
|
||||||
return total;
|
return total;
|
||||||
} else if (point.type == "continuous") {
|
} else if (point.type === "continuous") {
|
||||||
total += (point.y / totalY) * totalContinuous;
|
total += (point.y / totalY) * totalContinuous;
|
||||||
return total;
|
return total;
|
||||||
}
|
}
|
||||||
|
@ -150,10 +155,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
let continuousValues = cdfLabeledPoint.filter(
|
let continuousValues = cdfLabeledPoint.filter(
|
||||||
(x) => x.type == "continuous"
|
(x) => x.type === "continuous"
|
||||||
);
|
);
|
||||||
let discreteValues = cdfLabeledPoint.filter(
|
let discreteValues = cdfLabeledPoint.filter(
|
||||||
(x) => x.type == "discrete"
|
(x) => x.type === "discrete"
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -170,9 +175,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
let count = props.diagramCount ? props.diagramCount : 20;
|
let count = props.diagramCount ? props.diagramCount : 20;
|
||||||
let step = (stop - start) / count;
|
let step = (stop - start) / count;
|
||||||
let data = _.range(start, stop, step).map((x) => {
|
let data = _.range(start, stop, step).map((x) => {
|
||||||
if (chartResult.NAME == "Function") {
|
if (chartResult.NAME === "Function") {
|
||||||
let result = chartResult.VAL(x);
|
let result = chartResult.VAL(x);
|
||||||
if (result.tag == "Ok") {
|
if (result.tag === "Ok") {
|
||||||
let percentileArray = [
|
let percentileArray = [
|
||||||
0.01, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95,
|
0.01, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95,
|
||||||
0.99,
|
0.99,
|
||||||
|
@ -199,14 +204,16 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return <SquigglePercentilesChart
|
return (
|
||||||
data={{ facet: data.filter(x => x !== null) }}
|
<SquigglePercentilesChart
|
||||||
|
data={{ facet: data.filter((x) => x !== null) }}
|
||||||
actions={false}
|
actions={false}
|
||||||
/>;
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return <>{chartResults}</>;
|
return <>{chartResults}</>;
|
||||||
} else if (result.tag == "Error") {
|
} else if (result.tag === "Error") {
|
||||||
// At this point, we came across an error. What was our error?
|
// At this point, we came across an error. What was our error?
|
||||||
return <p>{"Error parsing Squiggle: " + result.value}</p>;
|
return <p>{"Error parsing Squiggle: " + result.value}</p>;
|
||||||
}
|
}
|
||||||
|
@ -214,7 +221,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
function getPercentiles(percentiles: number[], t: DistPlus) {
|
function getPercentiles(percentiles: number[], t: DistPlus) {
|
||||||
if (t.pointSetDist.tag == "Discrete") {
|
if (t.pointSetDist.tag === "Discrete") {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
|
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
|
||||||
let bounds = percentiles.map((_) => maxX);
|
let bounds = percentiles.map((_) => maxX);
|
||||||
|
@ -224,14 +231,14 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
|
||||||
(x, y) => {
|
(x, y) => {
|
||||||
total += y;
|
total += y;
|
||||||
percentiles.forEach((v, i) => {
|
percentiles.forEach((v, i) => {
|
||||||
if (total > v && bounds[i] == maxX) {
|
if (total > v && bounds[i] === maxX) {
|
||||||
bounds[i] = x;
|
bounds[i] = x;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
return bounds;
|
return bounds;
|
||||||
} else if (t.pointSetDist.tag == "Continuous") {
|
} else if (t.pointSetDist.tag === "Continuous") {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
|
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
|
||||||
let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
|
let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
|
||||||
|
@ -242,14 +249,14 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
|
||||||
(x, y) => {
|
(x, y) => {
|
||||||
total += y / totalY;
|
total += y / totalY;
|
||||||
percentiles.forEach((v, i) => {
|
percentiles.forEach((v, i) => {
|
||||||
if (total > v && bounds[i] == maxX) {
|
if (total > v && bounds[i] === maxX) {
|
||||||
bounds[i] = x;
|
bounds[i] = x;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
return bounds;
|
return bounds;
|
||||||
} else if (t.pointSetDist.tag == "Mixed") {
|
} else if (t.pointSetDist.tag === "Mixed") {
|
||||||
let discreteShape = t.pointSetDist.value.discrete.xyShape;
|
let discreteShape = t.pointSetDist.value.discrete.xyShape;
|
||||||
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
|
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
|
||||||
|
|
||||||
|
@ -283,13 +290,13 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
|
||||||
let maxX = _.max(sortedPoints.map((x) => x.x));
|
let maxX = _.max(sortedPoints.map((x) => x.x));
|
||||||
let bounds = percentiles.map((_) => maxX);
|
let bounds = percentiles.map((_) => maxX);
|
||||||
sortedPoints.map((point: labeledPoint) => {
|
sortedPoints.map((point: labeledPoint) => {
|
||||||
if (point.type == "discrete") {
|
if (point.type === "discrete") {
|
||||||
total += point.y;
|
total += point.y;
|
||||||
} else if (point.type == "continuous") {
|
} else if (point.type === "continuous") {
|
||||||
total += (point.y / totalY) * totalContinuous;
|
total += (point.y / totalY) * totalContinuous;
|
||||||
}
|
}
|
||||||
percentiles.forEach((v, i) => {
|
percentiles.forEach((v, i) => {
|
||||||
if (total > v && bounds[i] == maxX) {
|
if (total > v && bounds[i] === maxX) {
|
||||||
bounds[i] = total;
|
bounds[i] = total;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,47 +1,51 @@
|
||||||
import React, { FC, useState } from "react"
|
import React, { FC, useState } from "react";
|
||||||
import ReactDOM from "react-dom"
|
import ReactDOM from "react-dom";
|
||||||
import { SquiggleChart } from "./SquiggleChart"
|
import { SquiggleChart } from "./SquiggleChart";
|
||||||
import CodeEditor from "./CodeEditor"
|
import CodeEditor from "./CodeEditor";
|
||||||
import { Form, Input, Card, Row, Col } from "antd"
|
import { Form, Input, Card, Row, Col } from "antd";
|
||||||
import 'antd/dist/antd.css';
|
import "antd/dist/antd.css";
|
||||||
|
|
||||||
interface FieldFloatProps {
|
interface FieldFloatProps {
|
||||||
label : string,
|
label: string;
|
||||||
className? : string,
|
className?: string;
|
||||||
value : number,
|
value: number;
|
||||||
onChange : (value: number) => void,
|
onChange: (value: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
function FieldFloat(Props: FieldFloatProps) {
|
function FieldFloat(Props: FieldFloatProps) {
|
||||||
let [contents, setContents] = useState(Props.value + "");
|
let [contents, setContents] = useState(Props.value + "");
|
||||||
return <Form.Item label={Props.label}>
|
return (
|
||||||
<Input
|
<Form.Item label={Props.label}>
|
||||||
value={contents}
|
<Input
|
||||||
className={Props.className ? Props.className : ""}
|
value={contents}
|
||||||
onChange={(e) => setContents(e.target.value)}
|
className={Props.className ? Props.className : ""}
|
||||||
onBlur={(_) => {
|
onChange={(e) => setContents(e.target.value)}
|
||||||
let result = parseFloat(contents);
|
onBlur={(_) => {
|
||||||
if(result != NaN) {
|
let result = parseFloat(contents);
|
||||||
Props.onChange(result)
|
if (result != NaN) {
|
||||||
}
|
Props.onChange(result);
|
||||||
}}
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
initialSquiggleString : string
|
initialSquiggleString: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let SquigglePlayground : FC<Props> = (props) => {
|
let SquigglePlayground: FC<Props> = (props) => {
|
||||||
let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString)
|
let [squiggleString, setSquiggleString] = useState(
|
||||||
let [sampleCount, setSampleCount] = useState(1000)
|
props.initialSquiggleString
|
||||||
let [outputXYPoints, setOutputXYPoints] = useState(1000)
|
);
|
||||||
let [pointDistLength, setPointDistLength] = useState(1000)
|
let [sampleCount, setSampleCount] = useState(1000);
|
||||||
let [diagramStart, setDiagramStart] = useState(0)
|
let [outputXYPoints, setOutputXYPoints] = useState(1000);
|
||||||
let [diagramStop, setDiagramStop] = useState(10)
|
let [pointDistLength, setPointDistLength] = useState(1000);
|
||||||
let [diagramCount, setDiagramCount] = useState(20)
|
let [diagramStart, setDiagramStart] = useState(0);
|
||||||
var demoDist =
|
let [diagramStop, setDiagramStop] = useState(10);
|
||||||
|
let [diagramCount, setDiagramCount] = useState(20);
|
||||||
|
var demoDist = (
|
||||||
<SquiggleChart
|
<SquiggleChart
|
||||||
squiggleString={squiggleString}
|
squiggleString={squiggleString}
|
||||||
sampleCount={sampleCount}
|
sampleCount={sampleCount}
|
||||||
|
@ -50,75 +54,76 @@ let SquigglePlayground : FC<Props> = (props) => {
|
||||||
diagramStop={diagramStop}
|
diagramStop={diagramStop}
|
||||||
diagramCount={diagramCount}
|
diagramCount={diagramCount}
|
||||||
pointDistLength={pointDistLength}
|
pointDistLength={pointDistLength}
|
||||||
/>
|
/>
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Card
|
<Card title="Distribution Form">
|
||||||
title="Distribution Form">
|
|
||||||
<Form>
|
<Form>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
|
<CodeEditor
|
||||||
|
value={squiggleString}
|
||||||
|
onChange={setSquiggleString}
|
||||||
|
oneLine={false}
|
||||||
|
/>{" "}
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<FieldFloat
|
<FieldFloat
|
||||||
value={sampleCount}
|
value={sampleCount}
|
||||||
label="Sample Count"
|
label="Sample Count"
|
||||||
onChange={setSampleCount}
|
onChange={setSampleCount}
|
||||||
/> </Col>
|
/>{" "}
|
||||||
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<FieldFloat
|
<FieldFloat
|
||||||
value={outputXYPoints}
|
value={outputXYPoints}
|
||||||
onChange={setOutputXYPoints}
|
onChange={setOutputXYPoints}
|
||||||
label="Output XY-points" />
|
label="Output XY-points"
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<FieldFloat
|
<FieldFloat
|
||||||
value={pointDistLength}
|
value={pointDistLength}
|
||||||
onChange={setPointDistLength}
|
onChange={setPointDistLength}
|
||||||
label="Downsample To"
|
label="Downsample To"
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<FieldFloat
|
<FieldFloat
|
||||||
value={diagramStart}
|
value={diagramStart}
|
||||||
onChange={setDiagramStart}
|
onChange={setDiagramStart}
|
||||||
label="Diagram Start"
|
label="Diagram Start"
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<FieldFloat
|
<FieldFloat
|
||||||
value={diagramStop}
|
value={diagramStop}
|
||||||
onChange={setDiagramStop}
|
onChange={setDiagramStop}
|
||||||
label="Diagram Stop"
|
label="Diagram Stop"
|
||||||
/> </Col>
|
/>{" "}
|
||||||
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<FieldFloat
|
<FieldFloat
|
||||||
value={diagramCount}
|
value={diagramCount}
|
||||||
onChange={setDiagramCount}
|
onChange={setDiagramCount}
|
||||||
label="Diagram Count"
|
label="Diagram Count"
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12} >
|
<Col span={12}>{demoDist}</Col>
|
||||||
{demoDist}
|
|
||||||
</Col>
|
|
||||||
</Row>
|
</Row>
|
||||||
)
|
|
||||||
}
|
|
||||||
export default SquigglePlayground;
|
|
||||||
export function renderSquigglePlayground(props : Props){
|
|
||||||
let parent = document.createElement("div");
|
|
||||||
ReactDOM.render(
|
|
||||||
<SquigglePlayground
|
|
||||||
{...props}
|
|
||||||
/>,
|
|
||||||
parent
|
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
export default SquigglePlayground;
|
||||||
|
export function renderSquigglePlayground(props: Props) {
|
||||||
|
let parent = document.createElement("div");
|
||||||
|
ReactDOM.render(<SquigglePlayground {...props} />, parent);
|
||||||
return parent;
|
return parent;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
export { SquiggleChart } from "./SquiggleChart";
|
export { SquiggleChart } from "./SquiggleChart";
|
||||||
export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
|
export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
|
||||||
import SquigglePlayground, { renderSquigglePlayground } from './SquigglePlayground';
|
import SquigglePlayground, {
|
||||||
|
renderSquigglePlayground,
|
||||||
|
} from "./SquigglePlayground";
|
||||||
export { SquigglePlayground, renderSquigglePlayground };
|
export { SquigglePlayground, renderSquigglePlayground };
|
||||||
|
|
|
@ -66,9 +66,7 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
"axes": [
|
"axes": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }],
|
||||||
{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }
|
|
||||||
],
|
|
||||||
|
|
||||||
"marks": [
|
"marks": [
|
||||||
{
|
{
|
||||||
|
|
|
@ -16,10 +16,10 @@
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
"sourceMap": true
|
"sourceMap": true
|
||||||
},
|
},
|
||||||
"files": ["src/spec-distributions.json","src/spec-percentiles.json"],
|
"files": ["src/spec-distributions.json", "src/spec-percentiles.json"],
|
||||||
"target": "ES6",
|
"target": "ES6",
|
||||||
"include": ["src/**/*", "src/*"],
|
"include": ["src/**/*", "src/*"],
|
||||||
"exclude": ["node_modules", "**/*.spec.ts"],
|
"exclude": ["node_modules", "**/*.spec.ts", "webpack.config.js"],
|
||||||
"references": [
|
"references": [
|
||||||
{
|
{
|
||||||
"path": "../squiggle-lang"
|
"path": "../squiggle-lang"
|
||||||
|
|
|
@ -21,7 +21,7 @@ module.exports = {
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [".js", ".tsx", ".ts"],
|
extensions: [".js", ".tsx", ".ts"],
|
||||||
alias: {
|
alias: {
|
||||||
"@quri/squiggle-lang": path.resolve(__dirname, '../squiggle-lang/src/js')
|
"@quri/squiggle-lang": path.resolve(__dirname, "../squiggle-lang/src/js"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
|
|
|
@ -29,7 +29,6 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@glennsl/rescript-jest": "^0.9.0",
|
"@glennsl/rescript-jest": "^0.9.0",
|
||||||
"@types/jest": "^27.4.0",
|
"@types/jest": "^27.4.0",
|
||||||
"@types/webpack": "^5.28.0",
|
|
||||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
||||||
"docsify": "^4.12.2",
|
"docsify": "^4.12.2",
|
||||||
"gentype": "^4.3.0",
|
"gentype": "^4.3.0",
|
||||||
|
|
Loading…
Reference in New Issue
Block a user