feat: Add toggle to display 95th % confidece interval
Toggle propagated to all elements, and as such this commit might serve as a template for how to do a similar thing in the future
This commit is contained in:
parent
4ca6c99205
commit
872204d38e
|
@ -28,6 +28,7 @@ export type DistributionPlottingSettings = {
|
|||
logX: boolean;
|
||||
/** Set the y scale to be exponential by deault */
|
||||
expY: boolean;
|
||||
truncateTo95ci: boolean;
|
||||
};
|
||||
|
||||
export type DistributionChartProps = {
|
||||
|
@ -44,6 +45,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
showControls,
|
||||
logX,
|
||||
expY,
|
||||
truncateTo95ci,
|
||||
}) => {
|
||||
const [isLogX, setLogX] = React.useState(logX);
|
||||
const [isExpY, setExpY] = React.useState(expY);
|
||||
|
@ -51,8 +53,41 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
React.useEffect(() => setLogX(logX), [logX]);
|
||||
React.useEffect(() => setExpY(expY), [expY]);
|
||||
|
||||
const shape = distribution.pointSet();
|
||||
const [sized] = useSize((size) => {
|
||||
|
||||
const p3wrapped = distribution.inv(0.025);
|
||||
const p97wrapped = distribution.inv(0.975);
|
||||
if (p3wrapped.tag == "Error") {
|
||||
return <ErrorAlert heading="Distribution Calculation Error">
|
||||
{distributionErrorToString(p3wrapped.value)}
|
||||
</ErrorAlert>
|
||||
} else if (p97wrapped.tag == "Error") {
|
||||
return <ErrorAlert heading="Distribution Calculation Error">
|
||||
{distributionErrorToString(p97wrapped.value)}
|
||||
</ErrorAlert>
|
||||
}
|
||||
const p3 = p3wrapped.value
|
||||
const p97 = p97wrapped.value
|
||||
|
||||
const truncatedDistributionWrapper = distribution.truncate(p3, p97)
|
||||
if (truncatedDistributionWrapper.tag == "Error") {
|
||||
return <ErrorAlert heading="Distribution Truncation For Display Error">
|
||||
{distributionErrorToString(truncatedDistributionWrapper.value)}
|
||||
</ErrorAlert>
|
||||
}
|
||||
const truncatedDistribution = truncatedDistributionWrapper.value
|
||||
|
||||
const shape = distribution.pointSet();
|
||||
const shapeTruncated = truncatedDistribution.pointSet();// distribution.pointSet();
|
||||
|
||||
if (shapeTruncated.tag === "Error") {
|
||||
return (
|
||||
<ErrorAlert heading="Distribution Error">
|
||||
{distributionErrorToString(shapeTruncated.value)}
|
||||
</ErrorAlert>
|
||||
);
|
||||
}
|
||||
|
||||
if (shape.tag === "Error") {
|
||||
return (
|
||||
<ErrorAlert heading="Distribution Error">
|
||||
|
@ -79,7 +114,11 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
{!(isLogX && massBelow0) ? (
|
||||
<Vega
|
||||
spec={spec}
|
||||
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
|
||||
data={
|
||||
truncateTo95ci ?
|
||||
{ con: shapeTruncated.value.continuous, dis: shapeTruncated.value.discrete }
|
||||
: { con: shape.value.continuous, dis: shape.value.discrete }
|
||||
}
|
||||
width={widthProp - 10}
|
||||
height={height}
|
||||
actions={false}
|
||||
|
@ -101,10 +140,10 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
// Check whether we should disable the checkbox
|
||||
{...(massBelow0
|
||||
? {
|
||||
disabled: true,
|
||||
tooltip:
|
||||
"Your distribution has mass lower than or equal to 0. Log only works on strictly positive values.",
|
||||
}
|
||||
disabled: true,
|
||||
tooltip:
|
||||
"Your distribution has mass lower than or equal to 0. Log only works on strictly positive values.",
|
||||
}
|
||||
: {})}
|
||||
/>
|
||||
<CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
|
||||
|
|
|
@ -41,9 +41,11 @@ export interface SquiggleChartProps {
|
|||
logX?: boolean;
|
||||
/** Set the y scale to be exponential by deault */
|
||||
expY?: boolean;
|
||||
/** Display 94% interval; useful for thin lognormals */
|
||||
truncateTo95ci?: boolean;
|
||||
}
|
||||
|
||||
const defaultOnChange = () => {};
|
||||
const defaultOnChange = () => { };
|
||||
const defaultChartSettings = { start: 0, stop: 10, count: 20 };
|
||||
|
||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||
|
@ -59,6 +61,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
showControls = false,
|
||||
logX = false,
|
||||
expY = false,
|
||||
truncateTo95ci = false,
|
||||
chartSettings = defaultChartSettings,
|
||||
}) => {
|
||||
const { result } = useSquiggle({
|
||||
|
@ -78,6 +81,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
showSummary,
|
||||
logX,
|
||||
expY,
|
||||
truncateTo95ci,
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -58,6 +58,8 @@ export interface SquiggleEditorProps {
|
|||
logX?: boolean;
|
||||
/** Whether to exp the y coordinate on distribution charts */
|
||||
expY?: boolean;
|
||||
/** Display 94% interval; useful for thin lognormals */
|
||||
truncateTo95ci?: boolean;
|
||||
}
|
||||
|
||||
export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||
|
@ -75,6 +77,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
|||
showSummary = false,
|
||||
logX = false,
|
||||
expY = false,
|
||||
truncateTo95ci = false,
|
||||
}: SquiggleEditorProps) => {
|
||||
const [code, setCode] = useState(initialSquiggleString);
|
||||
React.useEffect(
|
||||
|
@ -101,6 +104,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
|||
showSummary,
|
||||
logX,
|
||||
expY,
|
||||
truncateTo95ci
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -36,6 +36,8 @@ interface PlaygroundProps {
|
|||
logX?: boolean;
|
||||
/** Whether to exp the y coordinate on distribution charts */
|
||||
expY?: boolean;
|
||||
/** Display 94% interval; useful for thin lognormals */
|
||||
truncateTo95ci?: boolean;
|
||||
/** If code is set, component becomes controlled */
|
||||
code?: string;
|
||||
onCodeChange?(expr: string): void;
|
||||
|
@ -78,6 +80,7 @@ const schema = yup
|
|||
showEditor: yup.boolean(),
|
||||
logX: yup.boolean(),
|
||||
expY: yup.boolean(),
|
||||
truncateTo95ci: yup.boolean(),
|
||||
showSettingsPage: yup.boolean().default(false),
|
||||
diagramStart: yup
|
||||
.number()
|
||||
|
@ -212,6 +215,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showSummary = false,
|
||||
logX = false,
|
||||
expY = false,
|
||||
truncateTo95ci = false,
|
||||
code: controlledCode,
|
||||
onCodeChange,
|
||||
onSettingsChange,
|
||||
|
@ -233,6 +237,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showControls,
|
||||
logX,
|
||||
expY,
|
||||
truncateTo95ci,
|
||||
showSummary,
|
||||
showEditor,
|
||||
leftSizePercent: 50,
|
||||
|
@ -340,6 +345,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
name="expY"
|
||||
label="Show y scale exponentially"
|
||||
/>
|
||||
<Checkbox
|
||||
register={register}
|
||||
name="truncateTo95ci"
|
||||
label="Show 95th percentile confidence interval (useful for thin lognormals)"
|
||||
/>
|
||||
<Checkbox
|
||||
register={register}
|
||||
name="showControls"
|
||||
|
@ -432,6 +442,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showSummary={vars.showSummary}
|
||||
logX={vars.logX}
|
||||
expY={vars.expY}
|
||||
truncateTo95ci={vars.truncateTo95ci}
|
||||
bindings={defaultBindings}
|
||||
jsImports={imports}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue
Block a user