Add setting to editor and playground

This commit is contained in:
Sam Nolan 2022-10-12 14:57:35 +11:00
parent 387f28c1c9
commit 5c23aa12ec
4 changed files with 22 additions and 0 deletions

View File

@ -53,6 +53,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
executionId = 0, executionId = 0,
width, width,
height = 200, height = 200,
numberPrecision,
enableLocalSettings = false, enableLocalSettings = false,
} = props; } = props;
@ -86,6 +87,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
result={valueToRender} result={valueToRender}
width={width} width={width}
height={height} height={height}
numberPrecision={numberPrecision}
distributionPlotSettings={distributionPlotSettings} distributionPlotSettings={distributionPlotSettings}
chartSettings={chartSettings} chartSettings={chartSettings}
environment={environment ?? defaultEnvironment} environment={environment ?? defaultEnvironment}

View File

@ -278,6 +278,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
diagramStart: 0, diagramStart: 0,
diagramStop: 10, diagramStop: 10,
diagramCount: 20, diagramCount: 20,
numberPrecision: 3,
}, },
}); });
const vars = useWatch({ const vars = useWatch({
@ -332,6 +333,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
result={valueToRender} result={valueToRender}
environment={environment} environment={environment}
height={vars.chartHeight || 150} height={vars.chartHeight || 150}
numberPrecision={vars.numberPrecision}
distributionPlotSettings={{ distributionPlotSettings={{
showSummary: vars.showSummary ?? false, showSummary: vars.showSummary ?? false,
logX: vars.logX ?? false, logX: vars.logX ?? false,

View File

@ -38,6 +38,7 @@ const ItemSettingsModal: React.FC<
// this is a mess and should be fixed // this is a mess and should be fixed
showEditor: true, // doesn't matter showEditor: true, // doesn't matter
chartHeight: mergedSettings.height, chartHeight: mergedSettings.height,
numberPrecision: mergedSettings.numberPrecision,
showSummary: mergedSettings.distributionPlotSettings.showSummary, showSummary: mergedSettings.distributionPlotSettings.showSummary,
logX: mergedSettings.distributionPlotSettings.logX, logX: mergedSettings.distributionPlotSettings.logX,
expY: mergedSettings.distributionPlotSettings.expY, expY: mergedSettings.distributionPlotSettings.expY,

View File

@ -21,6 +21,13 @@ export const viewSettingsSchema = yup.object({}).shape({
diagramStart: yup.number().required().positive().integer().default(0).min(0), diagramStart: yup.number().required().positive().integer().default(0).min(0),
diagramStop: yup.number().required().positive().integer().default(10).min(0), diagramStop: yup.number().required().positive().integer().default(10).min(0),
diagramCount: yup.number().required().positive().integer().default(20).min(2), diagramCount: yup.number().required().positive().integer().default(20).min(2),
numberPrecision: yup
.number()
.required()
.integer()
.positive()
.default(3)
.min(0),
}); });
type FormFields = yup.InferType<typeof viewSettingsSchema>; type FormFields = yup.InferType<typeof viewSettingsSchema>;
@ -57,6 +64,16 @@ export const ViewSettings: React.FC<{
</div> </div>
</HeadedSection> </HeadedSection>
<div className="pt-8">
<HeadedSection title="Number Display Settings">
<InputItem
name="numberPrecision"
type="number"
register={register}
label="Chart Height (in pixels)"
/>
</HeadedSection>
</div>
<div className="pt-8"> <div className="pt-8">
<HeadedSection title="Distribution Display Settings"> <HeadedSection title="Distribution Display Settings">
<div className="space-y-2"> <div className="space-y-2">