fixed width stuff, playground, and fonts after antd factor-out
Value: [1e-3 to 2e-2]
This commit is contained in:
parent
fde75d4bc3
commit
3e124cd91c
|
@ -6,6 +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 styled from "styled-components";
|
||||||
|
|
||||||
let SquiggleVegaChart = createClassFromSpec({
|
let SquiggleVegaChart = createClassFromSpec({
|
||||||
spec: chartSpecification as Spec,
|
spec: chartSpecification as Spec,
|
||||||
|
@ -24,19 +25,21 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
||||||
}: DistributionChartProps) => {
|
}: DistributionChartProps) => {
|
||||||
let shape = distribution.pointSet();
|
let shape = distribution.pointSet();
|
||||||
if (shape.tag === "Ok") {
|
if (shape.tag === "Ok") {
|
||||||
return (
|
let widthProp = width ? width - 20 : undefined;
|
||||||
|
var result = (
|
||||||
<SquiggleVegaChart
|
<SquiggleVegaChart
|
||||||
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
|
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
|
||||||
width={width - 20}
|
width={widthProp}
|
||||||
height={height}
|
height={height}
|
||||||
actions={false}
|
actions={false}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
var result = (
|
||||||
<ErrorBox heading="Distribution Error">
|
<ErrorBox heading="Distribution Error">
|
||||||
{distributionErrorToString(shape.value)}
|
{distributionErrorToString(shape.value)}
|
||||||
</ErrorBox>
|
</ErrorBox>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
return result;
|
||||||
};
|
};
|
||||||
|
|
|
@ -150,6 +150,12 @@ export interface SquiggleChartProps {
|
||||||
height?: number;
|
height?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ChartWrapper = styled.div`
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
|
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
|
||||||
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
`;
|
||||||
|
|
||||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||||
squiggleString = "",
|
squiggleString = "",
|
||||||
sampleCount = 1000,
|
sampleCount = 1000,
|
||||||
|
@ -158,11 +164,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||||
height = 60,
|
height = 60,
|
||||||
width = NaN,
|
width = NaN,
|
||||||
}: SquiggleChartProps) => {
|
}: SquiggleChartProps) => {
|
||||||
const target = React.useRef(null);
|
|
||||||
const [componentWidth] = useSize(target);
|
|
||||||
// I would have wanted to just use componentWidth, but this created infinite loops with SquiggleChart.stories.
|
|
||||||
//So you can manually add a width, as an escape hatch.
|
|
||||||
let _width = width || componentWidth;
|
|
||||||
let samplingInputs: samplingParams = {
|
let samplingInputs: samplingParams = {
|
||||||
sampleCount: sampleCount,
|
sampleCount: sampleCount,
|
||||||
xyPointLength: outputXYPoints,
|
xyPointLength: outputXYPoints,
|
||||||
|
@ -173,15 +174,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||||
let expression = expressionResult.value;
|
let expression = expressionResult.value;
|
||||||
onChange(expression);
|
onChange(expression);
|
||||||
internal = (
|
internal = (
|
||||||
<SquiggleItem expression={expression} width={_width} height={height} />
|
<SquiggleItem expression={expression} width={width} height={height} />
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
// At this point, we came across an error. What was our error?
|
|
||||||
internal = (
|
internal = (
|
||||||
<ErrorBox heading={"Parse Error"}>
|
<ErrorBox heading={"Parse Error"}>
|
||||||
{errorValueToString(expressionResult.value)}
|
{errorValueToString(expressionResult.value)}
|
||||||
</ErrorBox>
|
</ErrorBox>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return <div ref={target}>{internal}</div>;
|
return <ChartWrapper>{internal}</ChartWrapper>;
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,9 +3,7 @@ import React, { FC, ReactElement, 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, Row, Col } from "antd";
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
// import "antd/dist/antd.css";
|
|
||||||
|
|
||||||
interface FieldFloatProps {
|
interface FieldFloatProps {
|
||||||
label: string;
|
label: string;
|
||||||
|
@ -14,14 +12,14 @@ interface FieldFloatProps {
|
||||||
onChange: (value: number) => void;
|
onChange: (value: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Input = styled.input``
|
const Input = styled.input``;
|
||||||
|
|
||||||
const FormItem = (props: {label:string, children:ReactElement}) => (
|
const FormItem = (props: { label: string; children: ReactElement }) => (
|
||||||
<div>
|
<div>
|
||||||
<label>{props.label}</label>
|
<label>{props.label}</label>
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
|
|
||||||
function FieldFloat(Props: FieldFloatProps) {
|
function FieldFloat(Props: FieldFloatProps) {
|
||||||
let [contents, setContents] = useState(Props.value + "");
|
let [contents, setContents] = useState(Props.value + "");
|
||||||
|
@ -74,8 +72,11 @@ const Display = styled.div<TitleProps>`
|
||||||
max-height: ${(props) => props.maxHeight}px;
|
max-height: ${(props) => props.maxHeight}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Row = styled.div``
|
const Row = styled.div`
|
||||||
const Col = styled.div``
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
`;
|
||||||
|
const Col = styled.div``;
|
||||||
|
|
||||||
let SquigglePlayground: FC<Props> = ({
|
let SquigglePlayground: FC<Props> = ({
|
||||||
initialSquiggleString = "",
|
initialSquiggleString = "",
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
"description": "A basic area chart example",
|
"description": "A basic area chart example",
|
||||||
"width": 500,
|
"width": 500,
|
||||||
"height": 100,
|
"height": 100,
|
||||||
|
"autosize": "fit",
|
||||||
"padding": 5,
|
"padding": 5,
|
||||||
"data": [
|
"data": [
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue
Block a user