feat: Ask for % confidence interval, not for toggle.

This commit is contained in:
NunoSempere 2022-06-24 12:38:47 -04:00
parent be8edcba13
commit ab3cb82f98
4 changed files with 40 additions and 31 deletions

View File

@ -28,7 +28,7 @@ export type DistributionPlottingSettings = {
logX: boolean;
/** Set the y scale to be exponential by deault */
expY: boolean;
truncateTo95ci: boolean;
truncateToNthci: number;
};
export type DistributionChartProps = {
@ -45,7 +45,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
showControls,
logX,
expY,
truncateTo95ci,
truncateToNthci,
}) => {
const [isLogX, setLogX] = React.useState(logX);
const [isExpY, setExpY] = React.useState(expY);
@ -54,25 +54,33 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
React.useEffect(() => setExpY(expY), [expY]);
const [sized] = useSize((size) => {
const p3wrapped = distribution.inv(0.025);
const p97wrapped = distribution.inv(0.975);
if (p3wrapped.tag == "Error") {
const delta = truncateToNthci / 100 / 2;
if (truncateToNthci <= 0 || truncateToNthci > 100) {
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 heading="Confidence interval error">
{"Confidence interval must be between 0 and 100"}
</ErrorAlert>
);
}
const p3 = p3wrapped.value;
const p97 = p97wrapped.value;
const pMinwrapped = distribution.inv(0.5 - delta);
const pMaxwrapped = distribution.inv(0.5 + delta);
if (pMinwrapped.tag == "Error") {
return (
<ErrorAlert heading="Distribution Calculation Error">
{distributionErrorToString(pMinwrapped.value)}
</ErrorAlert>
);
} else if (pMaxwrapped.tag == "Error") {
return (
<ErrorAlert heading="Distribution Calculation Error">
{distributionErrorToString(pMaxwrapped.value)}
</ErrorAlert>
);
}
const pMin = pMinwrapped.value;
const pMax = pMaxwrapped.value;
const truncatedDistributionWrapper = distribution.truncate(p3, p97);
const truncatedDistributionWrapper = distribution.truncate(pMin, pMax);
if (truncatedDistributionWrapper.tag == "Error") {
return (
<ErrorAlert heading="Distribution Truncation For Display Error">
@ -120,7 +128,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
<Vega
spec={spec}
data={
truncateTo95ci
truncateToNthci != 100
? {
con: shapeTruncated.value.continuous,
dis: shapeTruncated.value.discrete,

View File

@ -42,7 +42,7 @@ export interface SquiggleChartProps {
/** Set the y scale to be exponential by deault */
expY?: boolean;
/** Display 94% interval; useful for thin lognormals */
truncateTo95ci?: boolean;
truncateToNthci?: number;
}
const defaultOnChange = () => {};
@ -61,7 +61,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
showControls = false,
logX = false,
expY = false,
truncateTo95ci = false,
truncateToNthci = 100,
chartSettings = defaultChartSettings,
}) => {
const { result } = useSquiggle({
@ -81,7 +81,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
showSummary,
logX,
expY,
truncateTo95ci,
truncateToNthci,
};
return (

View File

@ -59,7 +59,7 @@ export interface SquiggleEditorProps {
/** Whether to exp the y coordinate on distribution charts */
expY?: boolean;
/** Display 94% interval; useful for thin lognormals */
truncateTo95ci?: boolean;
truncateToNthci?: number;
}
export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
@ -77,7 +77,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
showSummary = false,
logX = false,
expY = false,
truncateTo95ci = false,
truncateToNthci = 100,
}: SquiggleEditorProps) => {
const [code, setCode] = useState(initialSquiggleString);
React.useEffect(
@ -104,7 +104,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
showSummary,
logX,
expY,
truncateTo95ci,
truncateToNthci,
};
return (

View File

@ -37,7 +37,7 @@ interface PlaygroundProps {
/** Whether to exp the y coordinate on distribution charts */
expY?: boolean;
/** Display 94% interval; useful for thin lognormals */
truncateTo95ci?: boolean;
truncateToNthci?: number;
/** If code is set, component becomes controlled */
code?: string;
onCodeChange?(expr: string): void;
@ -80,7 +80,7 @@ const schema = yup
showEditor: yup.boolean(),
logX: yup.boolean(),
expY: yup.boolean(),
truncateTo95ci: yup.boolean(),
truncateToNthci: yup.number().required().min(0).max(100).default(100),
showSettingsPage: yup.boolean().default(false),
diagramStart: yup
.number()
@ -215,7 +215,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
showSummary = false,
logX = false,
expY = false,
truncateTo95ci = false,
truncateToNthci = 100,
code: controlledCode,
onCodeChange,
onSettingsChange,
@ -237,7 +237,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
showControls,
logX,
expY,
truncateTo95ci,
truncateToNthci,
showSummary,
showEditor,
leftSizePercent: 50,
@ -345,10 +345,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
name="expY"
label="Show y scale exponentially"
/>
<Checkbox
<InputItem
name="truncateToNthci"
type="number"
register={register}
name="truncateTo95ci"
label="Show 95th percentile confidence interval (useful for thin lognormals)"
label="Show nth percentile confidence interval (useful for thin lognormals)"
/>
<Checkbox
register={register}
@ -442,7 +443,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
showSummary={vars.showSummary}
logX={vars.logX}
expY={vars.expY}
truncateTo95ci={vars.truncateTo95ci}
truncateToNthci={vars.truncateToNthci}
bindings={defaultBindings}
jsImports={imports}
/>