feat: Add a way to enable confidence intervals

Author: bprusinowski

app/charts/chart-config-ui-options.ts

@@ -111,6 +111,9 @@ type EncodingOption<T extends ChartConfig = ChartConfig> =
   | {
       field: "showStandardError";
     }
+  | {
+      field: "showConfidenceInterval";
+    }
   | {
       field: "sorting";
     }
@@ -643,6 +646,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         },
         options: {
           showStandardError: {},
+          showConfidenceInterval: {},
         },
       },
       {
@@ -776,6 +780,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         filters: false,
         options: {
           showStandardError: {},
+          showConfidenceInterval: {},
         },
       },
       {

app/config-types.ts

@@ -287,6 +287,7 @@ export type ColumnSegmentField = t.TypeOf<typeof ColumnSegmentField>;
 
 const UncertaintyFieldExtension = t.partial({
   showStandardError: t.boolean,
+  showConfidenceInterval: t.boolean,
 });
 export type UncertaintyFieldExtension = t.TypeOf<
   typeof UncertaintyFieldExtension

app/configurator/components/chart-options-selector.tsx

@@ -389,13 +389,28 @@ const EncodingOptionsPanel = ({
   }, [components, fields, encoding.field]);
 
   const hasStandardError = useMemo(() => {
-    return components.find((d) =>
+    return !!components.find((d) =>
       d.related?.some(
         (r) => r.type === "StandardError" && r.id === component?.id
       )
     );
   }, [components, component]);
 
+  const hasConfidenceInterval = useMemo(() => {
+    const upperBoundComponent = components.find((d) =>
+      d.related?.some(
+        (r) => r.type === "ConfidenceUpperBound" && r.id === component?.id
+      )
+    );
+    const lowerBoundComponent = components.find((d) =>
+      d.related?.some(
+        (r) => r.type === "ConfidenceLowerBound" && r.id === component?.id
+      )
+    );
+
+    return !!upperBoundComponent && !!lowerBoundComponent;
+  }, [components, component]);
+
   const hasColorPalette = !!encoding.options?.colorPalette;
 
   const hasSubOptions =
@@ -436,7 +451,7 @@ const EncodingOptionsPanel = ({
                 <ChartOptionSwitchField
                   path="showStandardError"
                   field={encoding.field}
-                  defaultValue={true}
+                  defaultValue
                   label={t({ id: "controls.section.show-standard-error" })}
                   sx={{ marginRight: 0 }}
                 />
@@ -456,6 +471,41 @@ const EncodingOptionsPanel = ({
                 />
               </Box>
             )}
+            {encoding.options?.showConfidenceInterval &&
+              hasConfidenceInterval && (
+                <Box
+                  sx={{
+                    display: "flex",
+                    gap: 1,
+                    alignItems: "center",
+                    mt: 3,
+                  }}
+                >
+                  <ChartOptionSwitchField
+                    path="showConfidenceInterval"
+                    field={encoding.field}
+                    defaultValue
+                    label={t({
+                      id: "controls.section.show-confidence-interval",
+                    })}
+                    sx={{ marginRight: 0 }}
+                  />
+                  <InfoIconTooltip
+                    enterDelay={600}
+                    PopperProps={{ sx: { maxWidth: 160 } }}
+                    title={
+                      <TooltipTitle
+                        text={
+                          <Trans id="controls.section.show-confidence-interval.explanation">
+                            Show uncertainties extending from data points to
+                            represent confidence intervals
+                          </Trans>
+                        }
+                      />
+                    }
+                  />
+                </Box>
+              )}
             {encoding.options?.useAbbreviations && (
               <ControlSectionContent
                 component="fieldset"

app/locales/de/messages.po

@@ -411,6 +411,7 @@ msgstr "Es ist mindestens eine numerische Massnahme erforderlich."
 msgid "controls.chart.disabled.same-unit"
 msgstr "Es sind mindestens zwei Zahlenwerte mit gleicher Einheit erforderlich."
 
+#: app/charts/index.ts
 #: app/charts/index.ts
 msgid "controls.chart.disabled.temporal"
 msgstr "Es ist mindestens eine zeitliche Dimension erforderlich."
@@ -888,6 +889,14 @@ msgstr "Geteilte Filter"
 msgid "controls.section.shared-filters.date"
 msgstr "Datum"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval"
+msgstr "Konfidenzintervall anzeigen"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval.explanation"
+msgstr "Zeigen Sie Unsicherheiten an, die sich aus Datenpunkten ergeben, um Konfidenzintervalle darzustellen"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.section.show-standard-error"
 msgstr "Standardfehler anzeigen"

app/locales/en/messages.po

@@ -411,6 +411,7 @@ msgstr "At least one numerical measure is required."
 msgid "controls.chart.disabled.same-unit"
 msgstr "At least two numerical measures with the same unit are required."
 
+#: app/charts/index.ts
 #: app/charts/index.ts
 msgid "controls.chart.disabled.temporal"
 msgstr "At least one temporal dimension is required."
@@ -888,6 +889,14 @@ msgstr "Shared filters"
 msgid "controls.section.shared-filters.date"
 msgstr "Date"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval"
+msgstr "Show confidence interval"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval.explanation"
+msgstr "Show uncertainties extending from data points to represent confidence intervals"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.section.show-standard-error"
 msgstr "Show standard error"

app/locales/fr/messages.po

@@ -889,6 +889,14 @@ msgstr "Filtres partagés"
 msgid "controls.section.shared-filters.date"
 msgstr "Date"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval"
+msgstr "Afficher l'intervalle de confiance"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval.explanation"
+msgstr "Afficher les incertitudes s'étendant des points de données pour représenter les intervalles de confiance"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.section.show-standard-error"
 msgstr "Afficher l'erreur type"

app/locales/it/messages.po

@@ -411,6 +411,7 @@ msgstr "È richiesta almeno una misura numerica."
 msgid "controls.chart.disabled.same-unit"
 msgstr "Sono necessarie almeno due misure numeriche con la stessa unità."
 
+#: app/charts/index.ts
 #: app/charts/index.ts
 msgid "controls.chart.disabled.temporal"
 msgstr "È richiesta almeno una dimensione temporale."
@@ -888,6 +889,14 @@ msgstr "Filtri condivisi"
 msgid "controls.section.shared-filters.date"
 msgstr "Data"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval"
+msgstr "Mostra intervallo di confidenza"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.show-confidence-interval.explanation"
+msgstr "Mostra le incertezze che si estendono dai punti dati per rappresentare gli intervalli di confidenza"
+
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.section.show-standard-error"
 msgstr "Mostra l'errore standard"