fix 🐛: bad merge conflict resolution

app/charts/bar/bars-grouped-state-props.ts

@@ -62,7 +62,7 @@ export const useBarsGroupedStateVariables = (
     observations,
   });
   const numericalXErrorVariables = useNumericalXErrorVariables(x, {
-    numericalXVariables,
+    getValue: numericalXVariables.getX,
     dimensions,
     measures,
   });

app/charts/bar/bars-grouped-state.tsx

@@ -83,10 +83,8 @@ const useBarsGroupedState = (
     xMeasure,
     getY,
     getMinX,
-    showXStandardError,
-    xErrorMeasure,
-    getXError,
     getXErrorRange,
+    getFormattedXUncertainty,
     segmentDimension,
     segmentsByAbbreviationOrLabel,
     getSegment,
@@ -391,14 +389,6 @@ const useBarsGroupedState = (
           topAnchor: !fields.segment,
         });
 
-    const getError = (d: Observation) => {
-      if (!showXStandardError || !getXError || getXError(d) == null) {
-        return;
-      }
-
-      return `${getXError(d)}${xErrorMeasure?.unit ?? ""}`;
-    };
-
     return {
       yAnchor: yAnchorRaw + (placement.y === "bottom" ? 0.5 : -0.5) * bw,
       xAnchor,
@@ -407,15 +397,15 @@ const useBarsGroupedState = (
       datum: {
         label: fields.segment && getSegmentAbbreviationOrLabel(datum),
         value: xValueFormatter(getX(datum)),
-        error: getError(datum),
+        error: getFormattedXUncertainty(datum),
         color: colors(getSegment(datum)) as string,
       },
       values: sortedTooltipValues.map((td) => ({
         label: getSegmentAbbreviationOrLabel(td),
         value: xMeasure.unit
           ? `${formatNumber(getX(td))} ${xMeasure.unit}`
           : formatNumber(getX(td)),
-        error: getError(td),
+        error: getFormattedXUncertainty(td),
         color: colors(getSegment(td)) as string,
       })),
     };

app/charts/bar/bars-grouped.tsx

@@ -4,9 +4,8 @@ import { GroupedBarsState } from "@/charts/bar/bars-grouped-state";
 import { RenderBarDatum, renderBars } from "@/charts/bar/rendering-utils";
 import { useChartState } from "@/charts/shared/chart-state";
 import {
-  filterWithoutErrors,
-  renderHorizontalWhisker,
   renderContainer,
+  renderHorizontalWhisker,
   RenderHorizontalWhiskerDatum,
 } from "@/charts/shared/rendering-utils";
 import { useTransitionStore } from "@/stores/transition";
@@ -17,24 +16,24 @@ export const ErrorWhiskers = () => {
     xScale,
     yScaleIn,
     getXErrorRange,
-    getXError,
+    getXErrorPresent,
     yScale,
     getSegment,
     grouped,
-    showXStandardError,
+    showXUncertainty,
   } = useChartState() as GroupedBarsState;
   const { margins, width, height } = bounds;
   const ref = useRef<SVGGElement>(null);
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
   const renderData: RenderHorizontalWhiskerDatum[] = useMemo(() => {
-    if (!getXErrorRange || !showXStandardError) {
+    if (!getXErrorRange || !showXUncertainty) {
       return [];
     }
 
     const bandwidth = yScaleIn.bandwidth();
     return grouped
-      .filter((d) => d[1].some(filterWithoutErrors(getXError)))
+      .filter((d) => d[1].some(getXErrorPresent))
       .flatMap(([segment, observations]) =>
         observations.map((d) => {
           const y0 = yScaleIn(getSegment(d)) as number;
@@ -53,9 +52,9 @@ export const ErrorWhiskers = () => {
   }, [
     getSegment,
     getXErrorRange,
-    getXError,
+    getXErrorPresent,
     grouped,
-    showXStandardError,
+    showXUncertainty,
     xScale,
     yScaleIn,
     yScale,

app/charts/bar/bars-state-props.ts

@@ -57,7 +57,7 @@ export const useBarsStateVariables = (
     observations,
   });
   const numericalXErrorVariables = useNumericalXErrorVariables(x, {
-    numericalXVariables,
+    getValue: numericalXVariables.getX,
     dimensions,
     measures,
   });

app/charts/bar/bars-state.tsx

@@ -75,10 +75,8 @@ const useBarsState = (
     xMeasure,
     getY,
     getMinX,
-    showXStandardError,
-    xErrorMeasure,
-    getXError,
     getXErrorRange,
+    getFormattedXUncertainty,
   } = variables;
   const { chartData, scalesData, timeRangeData, paddingData, allData } = data;
   const { fields, interactiveFiltersConfig } = chartConfig;
@@ -244,14 +242,6 @@ const useBarsState = (
         xMeasure.unit
       );
 
-    const getError = (d: Observation) => {
-      if (!showXStandardError || !getXError || getXError(d) === null) {
-        return;
-      }
-
-      return `${getXError(d)}${xErrorMeasure?.unit ?? ""}`;
-    };
-
     const x = getX(d);
 
     return {
@@ -262,7 +252,7 @@ const useBarsState = (
       datum: {
         label: undefined,
         value: x !== null && isNaN(x) ? "-" : `${xValueFormatter(getX(d))}`,
-        error: getError(d),
+        error: getFormattedXUncertainty(d),
         color: "",
       },
       values: undefined,

app/charts/bar/bars.tsx

@@ -6,7 +6,6 @@ import { RenderBarDatum, renderBars } from "@/charts/bar/rendering-utils";
 import { useChartState } from "@/charts/shared/chart-state";
 import {
   RenderHorizontalWhiskerDatum,
-  filterWithoutErrors,
   renderContainer,
   renderHorizontalWhisker,
 } from "@/charts/shared/rendering-utils";
@@ -16,25 +15,25 @@ import { useTheme } from "@/themes";
 export const ErrorWhiskers = () => {
   const {
     getY,
-    getXError,
+    getXErrorPresent,
     getXErrorRange,
     chartData,
     yScale,
     xScale,
-    showXStandardError,
+    showXUncertainty,
     bounds,
   } = useChartState() as BarsState;
   const { margins, width, height } = bounds;
   const ref = useRef<SVGGElement>(null);
   const enableTransition = useTransitionStore((state) => state.enable);
   const transitionDuration = useTransitionStore((state) => state.duration);
   const renderData: RenderHorizontalWhiskerDatum[] = useMemo(() => {
-    if (!getXErrorRange || !showXStandardError) {
+    if (!getXErrorRange || !showXUncertainty) {
       return [];
     }
 
     const bandwidth = yScale.bandwidth();
-    return chartData.filter(filterWithoutErrors(getXError)).map((d, i) => {
+    return chartData.filter(getXErrorPresent).map((d, i) => {
       const y0 = yScale(getY(d)) as number;
       const barWidth = Math.min(bandwidth, 15);
       const [x1, x2] = getXErrorRange(d);
@@ -50,9 +49,9 @@ export const ErrorWhiskers = () => {
   }, [
     chartData,
     getY,
-    getXError,
+    getXErrorPresent,
     getXErrorRange,
-    showXStandardError,
+    showXUncertainty,
     xScale,
     yScale,
     width,

app/charts/shared/chart-state.ts

@@ -410,10 +410,10 @@ export type NumericalYErrorVariables = {
 };
 
 export type NumericalXErrorVariables = {
-  showXStandardError: boolean;
-  xErrorMeasure: Component | undefined;
-  getXError: ((d: Observation) => ObservationValue) | null;
+  showXUncertainty: boolean;
+  getXErrorPresent: (d: Observation) => boolean;
   getXErrorRange: null | ((d: Observation) => [number, number]);
+  getFormattedXUncertainty: (d: Observation) => string | undefined;
 };
 
 export const useNumericalYErrorVariables = (
@@ -531,28 +531,112 @@ export const useNumericalYErrorVariables = (
 export const useNumericalXErrorVariables = (
   x: GenericField,
   {
-    numericalXVariables,
+    getValue,
     dimensions,
     measures,
   }: {
-    numericalXVariables: NumericalXVariables;
+    getValue: NumericalXVariables["getX"];
     dimensions: Dimension[];
     measures: Measure[];
   }
 ): NumericalXErrorVariables => {
   const showXStandardError = get(x, ["showStandardError"], true);
-  const xErrorMeasure = useErrorMeasure(x.componentId, {
+  const xStandardErrorMeasure = useErrorMeasure(x.componentId, {
+    dimensions,
+    measures,
+    type: RelatedDimensionType.StandardError,
+  });
+  const getXStandardError = useErrorVariable(xStandardErrorMeasure);
+
+  const showXConfidenceInterval = get(x, ["showConfidenceInterval"], true);
+  const xConfidenceIntervalUpperMeasure = useErrorMeasure(x.componentId, {
     dimensions,
     measures,
+    type: RelatedDimensionType.ConfidenceUpperBound,
   });
-  const getXErrorRange = useErrorRange(xErrorMeasure, numericalXVariables.getX);
-  const getXError = useErrorVariable(xErrorMeasure);
+  const getXConfidenceIntervalUpper = useErrorVariable(
+    xConfidenceIntervalUpperMeasure
+  );
+  const xConfidenceIntervalLowerMeasure = useErrorMeasure(x.componentId, {
+    dimensions,
+    measures,
+    type: RelatedDimensionType.ConfidenceLowerBound,
+  });
+  const getXConfidenceIntervalLower = useErrorVariable(
+    xConfidenceIntervalLowerMeasure
+  );
+
+  const getXErrorPresent = useCallback(
+    (d: Observation) => {
+      return (
+        (showXStandardError && getXStandardError?.(d) !== null) ||
+        (showXConfidenceInterval &&
+          getXConfidenceIntervalUpper?.(d) !== null &&
+          getXConfidenceIntervalLower?.(d) !== null)
+      );
+    },
+    [
+      showXStandardError,
+      getXStandardError,
+      showXConfidenceInterval,
+      getXConfidenceIntervalUpper,
+      getXConfidenceIntervalLower,
+    ]
+  );
+  const getXErrorRange = useErrorRange(
+    showXStandardError && xStandardErrorMeasure
+      ? xStandardErrorMeasure
+      : xConfidenceIntervalUpperMeasure,
+    showXStandardError && xStandardErrorMeasure
+      ? xStandardErrorMeasure
+      : xConfidenceIntervalLowerMeasure,
+    getValue
+  );
+  const getFormattedXUncertainty = useCallback(
+    (d: Observation) => {
+      if (
+        showXStandardError &&
+        getXStandardError &&
+        getXStandardError(d) !== null
+      ) {
+        const sd = getXStandardError(d);
+        const unit = xStandardErrorMeasure?.unit ?? "";
+        return ` ± ${sd}${unit}`;
+      }
+
+      if (
+        showXConfidenceInterval &&
+        getXConfidenceIntervalUpper &&
+        getXConfidenceIntervalLower &&
+        getXConfidenceIntervalUpper(d) !== null &&
+        getXConfidenceIntervalLower(d) !== null
+      ) {
+        const cil = getXConfidenceIntervalLower(d);
+        const ciu = getXConfidenceIntervalUpper(d);
+        const unit = xConfidenceIntervalUpperMeasure?.unit ?? "";
+        return `, [-${cil}${unit}, +${ciu}${unit}]`;
+      }
+    },
+    [
+      showXStandardError,
+      getXStandardError,
+      showXConfidenceInterval,
+      getXConfidenceIntervalUpper,
+      getXConfidenceIntervalLower,
+      xStandardErrorMeasure?.unit,
+      xConfidenceIntervalUpperMeasure?.unit,
+    ]
+  );
 
   return {
-    showXStandardError,
-    xErrorMeasure,
-    getXError,
+    showXUncertainty:
+      (showXStandardError && !!xStandardErrorMeasure) ||
+      (showXConfidenceInterval &&
+        !!xConfidenceIntervalUpperMeasure &&
+        !!xConfidenceIntervalLowerMeasure),
+    getXErrorPresent,
     getXErrorRange,
+    getFormattedXUncertainty,
   };
 };