Merge pull request #1910 from visualize-admin/feat/non-symmetrical-error-bar

feat: Add support for showing confidence intervals

Author: bprusinowski

CHANGELOG.md

@@ -22,6 +22,7 @@ You can also check the
     application will try to use dual-line chart with measures from different
     cubes)
   - Added tooltip that explains why a given chart type can't be selected
+  - Added support for confidence intervals
 - Fixes
   - Introduced a `componentId` concept which makes the dimensions and measures
     unique by adding an unversioned cube iri to the unversioned component iri on
@@ -30,6 +31,7 @@ You can also check the
   - Map legend is now correctly updated (in some cases it was rendered
     incorrectly on the initial render)
   - Vertical Axis measure names are now correctly displayed in the left panel
+  - Uncertainties are now correctly displayed in map symbol layer tooltip
 - Performance
   - We no longer load non-key dimensions when initializing a chart
 - Maintenance

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/charts/column/columns-grouped-state-props.ts

@@ -62,7 +62,7 @@ export const useColumnsGroupedStateVariables = (
     measuresById,
   });
   const numericalYErrorVariables = useNumericalYErrorVariables(y, {
-    numericalYVariables,
+    getValue: numericalYVariables.getY,
     dimensions,
     measures,
   });

app/charts/column/columns-grouped-state.tsx

@@ -84,10 +84,8 @@ const useColumnsGroupedState = (
     yMeasure,
     getY,
     getMinY,
-    showYStandardError,
-    yErrorMeasure,
-    getYError,
     getYErrorRange,
+    getFormattedYUncertainty,
     segmentDimension,
     segmentsByAbbreviationOrLabel,
     getSegment,
@@ -398,14 +396,6 @@ const useColumnsGroupedState = (
           topAnchor: !fields.segment,
         });
 
-    const getError = (d: Observation) => {
-      if (!showYStandardError || !getYError || getYError(d) == null) {
-        return;
-      }
-
-      return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
-    };
-
     return {
       xAnchor: xAnchorRaw + (placement.x === "right" ? 0.5 : -0.5) * bw,
       yAnchor,
@@ -414,15 +404,15 @@ const useColumnsGroupedState = (
       datum: {
         label: fields.segment && getSegmentAbbreviationOrLabel(datum),
         value: yValueFormatter(getY(datum)),
-        error: getError(datum),
+        error: getFormattedYUncertainty(datum),
         color: colors(getSegment(datum)) as string,
       },
       values: sortedTooltipValues.map((td) => ({
         label: getSegmentAbbreviationOrLabel(td),
         value: yMeasure.unit
           ? `${formatNumber(getY(td))} ${yMeasure.unit}`
           : formatNumber(getY(td)),
-        error: getError(td),
+        error: getFormattedYUncertainty(td),
         color: colors(getSegment(td)) as string,
       })),
     };

app/charts/column/columns-grouped.tsx

@@ -8,7 +8,6 @@ import {
 import { useChartState } from "@/charts/shared/chart-state";
 import {
   RenderWhiskerDatum,
-  filterWithoutErrors,
   renderContainer,
   renderWhiskers,
 } from "@/charts/shared/rendering-utils";
@@ -20,24 +19,24 @@ export const ErrorWhiskers = () => {
     xScale,
     xScaleIn,
     getYErrorRange,
-    getYError,
+    getYErrorPresent,
     yScale,
     getSegment,
     grouped,
-    showYStandardError,
+    showYUncertainty,
   } = useChartState() as GroupedColumnsState;
   const { margins, width, height } = bounds;
   const ref = useRef<SVGGElement>(null);
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
   const renderData: RenderWhiskerDatum[] = useMemo(() => {
-    if (!getYErrorRange || !showYStandardError) {
+    if (!getYErrorRange || !showYUncertainty) {
       return [];
     }
 
     const bandwidth = xScaleIn.bandwidth();
     return grouped
-      .filter((d) => d[1].some(filterWithoutErrors(getYError)))
+      .filter((d) => d[1].some(getYErrorPresent))
       .flatMap(([segment, observations]) =>
         observations.map((d) => {
           const x0 = xScaleIn(getSegment(d)) as number;
@@ -56,9 +55,9 @@ export const ErrorWhiskers = () => {
   }, [
     getSegment,
     getYErrorRange,
-    getYError,
+    getYErrorPresent,
     grouped,
-    showYStandardError,
+    showYUncertainty,
     xScale,
     xScaleIn,
     yScale,

app/charts/column/columns-state-props.ts

@@ -57,7 +57,7 @@ export const useColumnsStateVariables = (
     measuresById,
   });
   const numericalYErrorVariables = useNumericalYErrorVariables(y, {
-    numericalYVariables,
+    getValue: numericalYVariables.getY,
     dimensions,
     measures,
   });

app/charts/column/columns-state.tsx

@@ -75,10 +75,8 @@ const useColumnsState = (
     yMeasure,
     getY,
     getMinY,
-    showYStandardError,
-    yErrorMeasure,
-    getYError,
     getYErrorRange,
+    getFormattedYUncertainty,
   } = variables;
   const { chartData, scalesData, timeRangeData, paddingData, allData } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
@@ -245,15 +243,6 @@ const useColumnsState = (
         formatters[yMeasure.id] ?? formatNumber,
         yMeasure.unit
       );
-
-    const getError = (d: Observation) => {
-      if (!showYStandardError || !getYError || getYError(d) === null) {
-        return;
-      }
-
-      return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
-    };
-
     const y = getY(d);
 
     return {
@@ -264,7 +253,7 @@ const useColumnsState = (
       datum: {
         label: undefined,
         value: y !== null && isNaN(y) ? "-" : `${yValueFormatter(getY(d))}`,
-        error: getError(d),
+        error: getFormattedYUncertainty(d),
         color: "",
       },
       values: undefined,

app/charts/column/columns.tsx

@@ -9,7 +9,6 @@ import {
 import { useChartState } from "@/charts/shared/chart-state";
 import {
   RenderWhiskerDatum,
-  filterWithoutErrors,
   renderContainer,
   renderWhiskers,
 } from "@/charts/shared/rendering-utils";
@@ -19,25 +18,25 @@ import { useTheme } from "@/themes";
 export const ErrorWhiskers = () => {
   const {
     getX,
-    getYError,
+    getYErrorPresent,
     getYErrorRange,
     chartData,
     yScale,
     xScale,
-    showYStandardError,
+    showYUncertainty,
     bounds,
   } = useChartState() as ColumnsState;
   const { margins, width, height } = bounds;
   const ref = useRef<SVGGElement>(null);
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
   const renderData: RenderWhiskerDatum[] = useMemo(() => {
-    if (!getYErrorRange || !showYStandardError) {
+    if (!getYErrorRange || !showYUncertainty) {
       return [];
     }
 
     const bandwidth = xScale.bandwidth();
-    return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => {
+    return chartData.filter(getYErrorPresent).map((d, i) => {
       const x0 = xScale(getX(d)) as number;
       const barWidth = Math.min(bandwidth, 15);
       const [y1, y2] = getYErrorRange(d);
@@ -53,9 +52,9 @@ export const ErrorWhiskers = () => {
   }, [
     chartData,
     getX,
-    getYError,
+    getYErrorPresent,
     getYErrorRange,
-    showYStandardError,
+    showYUncertainty,
     xScale,
     yScale,
     width,

app/charts/line/lines-state-props.ts

@@ -53,7 +53,7 @@ export const useLinesStateVariables = (
     measuresById,
   });
   const numericalYErrorVariables = useNumericalYErrorVariables(y, {
-    numericalYVariables,
+    getValue: numericalYVariables.getY,
     dimensions,
     measures,
   });

app/charts/line/lines-state.tsx

@@ -80,10 +80,8 @@ const useLinesState = (
     getXAsString,
     yMeasure,
     getY,
-    showYStandardError,
-    getYError,
     getYErrorRange,
-    yErrorMeasure,
+    getFormattedYUncertainty,
     getMinY,
     segmentDimension,
     segmentsByAbbreviationOrLabel,
@@ -279,14 +277,6 @@ const useLinesState = (
         yMeasure.unit
       );
 
-    const getError = (d: Observation) => {
-      if (!showYStandardError || !getYError || getYError(d) === null) {
-        return;
-      }
-
-      return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
-    };
-
     return {
       xAnchor,
       yAnchor,
@@ -295,7 +285,7 @@ const useLinesState = (
       datum: {
         label: fields.segment && getSegmentAbbreviationOrLabel(datum),
         value: yValueFormatter(getY(datum)),
-        error: getError(datum),
+        error: getFormattedYUncertainty(datum),
         color: colors(getSegment(datum)) as string,
       },
       values: sortedTooltipValues.map((td) => ({

app/charts/line/lines.tsx

@@ -5,7 +5,6 @@ import { LinesState } from "@/charts/line/lines-state";
 import { useChartState } from "@/charts/shared/chart-state";
 import {
   RenderWhiskerDatum,
-  filterWithoutErrors,
   renderContainer,
   renderWhiskers,
 } from "@/charts/shared/rendering-utils";
@@ -15,12 +14,13 @@ import { useTransitionStore } from "@/stores/transition";
 export const ErrorWhiskers = () => {
   const {
     getX,
-    getYError,
+    getY,
+    getYErrorPresent,
     getYErrorRange,
     chartData,
     yScale,
     xScale,
-    showYStandardError,
+    showYUncertainty,
     colors,
     getSegment,
     bounds,
@@ -30,18 +30,20 @@ export const ErrorWhiskers = () => {
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
   const renderData: RenderWhiskerDatum[] = useMemo(() => {
-    if (!getYErrorRange || !showYStandardError) {
+    if (!getYErrorRange || !showYUncertainty) {
       return [];
     }
 
-    return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => {
+    return chartData.filter(getYErrorPresent).map((d, i) => {
       const x0 = xScale(getX(d)) as number;
       const segment = getSegment(d);
       const barWidth = 15;
+      const y = getY(d) as number;
       const [y1, y2] = getYErrorRange(d);
       return {
         key: `${i}`,
         x: x0 - barWidth / 2,
+        y: yScale(y),
         y1: yScale(y1),
         y2: yScale(y2),
         width: barWidth,
@@ -54,9 +56,10 @@ export const ErrorWhiskers = () => {
     colors,
     getSegment,
     getX,
-    getYError,
+    getY,
+    getYErrorPresent,
     getYErrorRange,
-    showYStandardError,
+    showYUncertainty,
     xScale,
     yScale,
   ]);