fix(column): 🐛 remove ErrorWhisker and Tooltip when error is null (#1252

)

* refactor(column): ♻️ remove ErrorWhisker and Tooltip when error is null
* refactor(column): ♻️ apply same logic ad column to columns-grouped
* docs: 📝 update CHANGELOG

CHANGELOG.md

@@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Fixes
+  - remove ErrorWhisker and Tooltip when error is null in Column charts
 
 # [3.24.0] - 2023-11-08
 

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

@@ -388,7 +388,7 @@ const useColumnsGroupedState = (
     });
 
     const getError = (d: Observation) => {
-      if (!showYStandardError || !getYError) {
+      if (!showYStandardError || !getYError || getYError(d) == null) {
         return;
       }
 

app/charts/column/columns-grouped.tsx

@@ -4,6 +4,7 @@ import { GroupedColumnsState } from "@/charts/column/columns-grouped-state";
 import {
   RenderColumnDatum,
   RenderWhiskerDatum,
+  filterWithoutErrors,
   renderColumns,
   renderWhiskers,
 } from "@/charts/column/rendering-utils";
@@ -17,6 +18,7 @@ export const ErrorWhiskers = () => {
     xScale,
     xScaleIn,
     getYErrorRange,
+    getYError,
     yScale,
     getSegment,
     grouped,
@@ -31,25 +33,28 @@ export const ErrorWhiskers = () => {
       return [];
     }
 
-    return grouped.flatMap(([segment, observations]) =>
-      observations.map((d) => {
-        const x0 = xScaleIn(getSegment(d)) as number;
-        const bandwidth = xScaleIn.bandwidth();
-        const barwidth = Math.min(bandwidth, 15);
-        const [y1, y2] = getYErrorRange(d);
+    return grouped
+      .filter((d) => d[1].some(filterWithoutErrors(getYError)))
+      .flatMap(([segment, observations]) =>
+        observations.map((d) => {
+          const x0 = xScaleIn(getSegment(d)) as number;
+          const bandwidth = xScaleIn.bandwidth();
+          const barwidth = Math.min(bandwidth, 15);
+          const [y1, y2] = getYErrorRange(d);
 
-        return {
-          key: `${segment}-${getSegment(d)}`,
-          x: (xScale(segment) as number) + x0 + bandwidth / 2 - barwidth / 2,
-          y1: yScale(y1),
-          y2: yScale(y2),
-          width: barwidth,
-        };
-      })
-    );
+          return {
+            key: `${segment}-${getSegment(d)}`,
+            x: (xScale(segment) as number) + x0 + bandwidth / 2 - barwidth / 2,
+            y1: yScale(y1),
+            y2: yScale(y2),
+            width: barwidth,
+          };
+        })
+      );
   }, [
     getSegment,
     getYErrorRange,
+    getYError,
     grouped,
     showYStandardError,
     xScale,

app/charts/column/columns-state.tsx

@@ -226,7 +226,7 @@ const useColumnsState = (
       );
 
     const getError = (d: Observation) => {
-      if (!showYStandardError || !getYError) {
+      if (!showYStandardError || !getYError || getYError(d) === null) {
         return;
       }
 

app/charts/column/columns.tsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import { ColumnsState } from "@/charts/column/columns-state";
 import {
+  filterWithoutErrors,
   RenderColumnDatum,
   renderColumns,
   RenderWhiskerDatum,
@@ -16,6 +17,7 @@ import { useTheme } from "@/themes";
 export const ErrorWhiskers = () => {
   const {
     getX,
+    getYError,
     getYErrorRange,
     chartData,
     yScale,
@@ -32,7 +34,7 @@ export const ErrorWhiskers = () => {
       return [];
     }
 
-    return chartData.map((d, i) => {
+    return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => {
       const x0 = xScale(getX(d)) as number;
       const bandwidth = xScale.bandwidth();
       const barwidth = Math.min(bandwidth, 15);
@@ -46,7 +48,15 @@ export const ErrorWhiskers = () => {
         width: barwidth,
       };
     });
-  }, [chartData, getX, getYErrorRange, showYStandardError, xScale, yScale]);
+  }, [
+    chartData,
+    getX,
+    getYError,
+    getYErrorRange,
+    showYStandardError,
+    xScale,
+    yScale,
+  ]);
 
   React.useEffect(() => {
     if (ref.current) {

app/charts/column/rendering-utils.ts

@@ -4,6 +4,7 @@ import {
   RenderOptions,
   maybeTransition,
 } from "@/charts/shared/rendering-utils";
+import { Observation, ObservationValue } from "@/domain/data";
 
 export type RenderColumnDatum = {
   key: string;
@@ -158,3 +159,8 @@ export const renderWhiskers = (
         })
     );
 };
+
+export const filterWithoutErrors =
+  (getError: ((d: Observation) => ObservationValue) | null) =>
+  (d: Observation): boolean =>
+    !!getError?.(d);