Compare commits
2 Commits
develop
...
number-pre
Author | SHA1 | Date | |
---|---|---|---|
|
5c23aa12ec | ||
|
387f28c1c9 |
|
@ -46,6 +46,8 @@ export type SquiggleChartProps = {
|
|||
/** Whether to show vega actions to the user, so they can copy the chart spec */
|
||||
distributionChartActions?: boolean;
|
||||
enableLocalSettings?: boolean;
|
||||
/** Precision to show numbers */
|
||||
numberPrecision?: number;
|
||||
} & (StandaloneExecutionProps | ProjectExecutionProps);
|
||||
|
||||
// Props needed for a standalone execution
|
||||
|
@ -121,6 +123,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
|||
height = 200,
|
||||
enableLocalSettings = false,
|
||||
continues = defaultContinues,
|
||||
numberPrecision,
|
||||
} = props;
|
||||
|
||||
const p = React.useMemo(() => {
|
||||
|
@ -151,6 +154,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
|||
result={valueToRender}
|
||||
width={width}
|
||||
height={height}
|
||||
numberPrecision={numberPrecision}
|
||||
distributionPlotSettings={distributionPlotSettings}
|
||||
chartSettings={chartSettings}
|
||||
environment={p.getEnvironment()}
|
||||
|
|
|
@ -53,6 +53,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
|||
executionId = 0,
|
||||
width,
|
||||
height = 200,
|
||||
numberPrecision,
|
||||
enableLocalSettings = false,
|
||||
} = props;
|
||||
|
||||
|
@ -86,6 +87,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
|||
result={valueToRender}
|
||||
width={width}
|
||||
height={height}
|
||||
numberPrecision={numberPrecision}
|
||||
distributionPlotSettings={distributionPlotSettings}
|
||||
chartSettings={chartSettings}
|
||||
environment={environment ?? defaultEnvironment}
|
||||
|
|
|
@ -278,6 +278,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
diagramStart: 0,
|
||||
diagramStop: 10,
|
||||
diagramCount: 20,
|
||||
numberPrecision: 3,
|
||||
},
|
||||
});
|
||||
const vars = useWatch({
|
||||
|
@ -332,6 +333,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
result={valueToRender}
|
||||
environment={environment}
|
||||
height={vars.chartHeight || 150}
|
||||
numberPrecision={vars.numberPrecision}
|
||||
distributionPlotSettings={{
|
||||
showSummary: vars.showSummary ?? false,
|
||||
logX: vars.logX ?? false,
|
||||
|
|
|
@ -68,9 +68,12 @@ export const ExpressionViewer: React.FC<Props> = ({ value, width }) => {
|
|||
case SqValueTag.Number:
|
||||
return (
|
||||
<VariableBox value={value} heading="Number">
|
||||
{() => (
|
||||
{(settings) => (
|
||||
<div className="font-semibold text-slate-600">
|
||||
<NumberShower precision={3} number={value.value} />
|
||||
<NumberShower
|
||||
precision={settings.numberPrecision}
|
||||
number={value.value}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</VariableBox>
|
||||
|
|
|
@ -38,6 +38,7 @@ const ItemSettingsModal: React.FC<
|
|||
// this is a mess and should be fixed
|
||||
showEditor: true, // doesn't matter
|
||||
chartHeight: mergedSettings.height,
|
||||
numberPrecision: mergedSettings.numberPrecision,
|
||||
showSummary: mergedSettings.distributionPlotSettings.showSummary,
|
||||
logX: mergedSettings.distributionPlotSettings.logX,
|
||||
expY: mergedSettings.distributionPlotSettings.expY,
|
||||
|
|
|
@ -29,6 +29,7 @@ export const ViewerContext = React.createContext<ViewerContextShape>({
|
|||
},
|
||||
environment: defaultEnvironment,
|
||||
height: 150,
|
||||
numberPrecision: 3,
|
||||
}),
|
||||
setSettings() {},
|
||||
enableLocalSettings: false,
|
||||
|
|
|
@ -23,6 +23,7 @@ type Props = {
|
|||
/** Environment for further function executions */
|
||||
environment: environment;
|
||||
enableLocalSettings?: boolean;
|
||||
numberPrecision?: number;
|
||||
};
|
||||
|
||||
type Settings = {
|
||||
|
@ -38,6 +39,7 @@ export const SquiggleViewer: React.FC<Props> = ({
|
|||
distributionPlotSettings,
|
||||
chartSettings,
|
||||
environment,
|
||||
numberPrecision = 3,
|
||||
enableLocalSettings = false,
|
||||
}) => {
|
||||
// can't store settings in the state because we don't want to rerender the entire tree on every change
|
||||
|
@ -74,10 +76,18 @@ export const SquiggleViewer: React.FC<Props> = ({
|
|||
...(localSettings.environment || {}),
|
||||
},
|
||||
height: localSettings.height || height,
|
||||
numberPrecision: localSettings.numberPrecision || numberPrecision,
|
||||
};
|
||||
return result;
|
||||
},
|
||||
[distributionPlotSettings, chartSettings, environment, height, getSettings]
|
||||
[
|
||||
distributionPlotSettings,
|
||||
chartSettings,
|
||||
environment,
|
||||
height,
|
||||
getSettings,
|
||||
numberPrecision,
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
@ -8,6 +8,7 @@ export type LocalItemSettings = {
|
|||
chartSettings?: Partial<FunctionChartSettings>;
|
||||
height?: number;
|
||||
environment?: Partial<environment>;
|
||||
numberPrecision?: number;
|
||||
};
|
||||
|
||||
export type MergedItemSettings = {
|
||||
|
@ -15,6 +16,7 @@ export type MergedItemSettings = {
|
|||
chartSettings: FunctionChartSettings;
|
||||
height: number;
|
||||
environment: environment;
|
||||
numberPrecision: number;
|
||||
};
|
||||
|
||||
export const locationAsString = (location: SqValueLocation) =>
|
||||
|
|
|
@ -21,6 +21,13 @@ export const viewSettingsSchema = yup.object({}).shape({
|
|||
diagramStart: yup.number().required().positive().integer().default(0).min(0),
|
||||
diagramStop: yup.number().required().positive().integer().default(10).min(0),
|
||||
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>;
|
||||
|
@ -57,6 +64,16 @@ export const ViewSettings: React.FC<{
|
|||
</div>
|
||||
</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">
|
||||
<HeadedSection title="Distribution Display Settings">
|
||||
<div className="space-y-2">
|
||||
|
|
16
packages/components/test/number.test.tsx
Normal file
16
packages/components/test/number.test.tsx
Normal file
|
@ -0,0 +1,16 @@
|
|||
import { render } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { SquiggleChart } from "../src/index";
|
||||
|
||||
test("Precision", async () => {
|
||||
const { container: highPrecision } = render(
|
||||
<SquiggleChart code={"1.25476"} numberPrecision={5} />
|
||||
);
|
||||
expect(highPrecision).toHaveTextContent("1.2548");
|
||||
|
||||
const { container: lowPrecision } = render(
|
||||
<SquiggleChart code={"1.25476"} numberPrecision={2} />
|
||||
);
|
||||
expect(lowPrecision).toHaveTextContent("1.3");
|
||||
});
|
Loading…
Reference in New Issue
Block a user