refactor(column): ♻️ remove ErrorWhisker and Tooltip when error is null

#589

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/app"
+        }
+    ]
+}

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

@@ -16,6 +16,7 @@ import { useTheme } from "@/themes";
 export const ErrorWhiskers = () => {
   const {
     getX,
+    getYError,
     getYErrorRange,
     chartData,
     yScale,
@@ -32,23 +33,33 @@ export const ErrorWhiskers = () => {
       return [];
     }
 
-    return chartData.map((d, i) => {
-      const x0 = xScale(getX(d)) as number;
-      const bandwidth = xScale.bandwidth();
-      const barwidth = Math.min(bandwidth, 15);
-      const [y1, y2] = getYErrorRange(d);
+    return chartData
+      .filter((d) => !!getYError?.(d))
+      .map((d, i) => {
+        const x0 = xScale(getX(d)) as number;
+        const bandwidth = xScale.bandwidth();
+        const barwidth = Math.min(bandwidth, 15);
+        const [y1, y2] = getYErrorRange(d);
 
-      return {
-        key: `${i}`,
-        x: x0 + bandwidth / 2 - barwidth / 2,
-        y1: yScale(y1),
-        y2: yScale(y2),
-        width: barwidth,
-      };
-    });
-  }, [chartData, getX, getYErrorRange, showYStandardError, xScale, yScale]);
+        return {
+          key: `${i}`,
+          x: x0 + bandwidth / 2 - barwidth / 2,
+          y1: yScale(y1),
+          y2: yScale(y2),
+          width: barwidth,
+        };
+      });
+  }, [
+    chartData,
+    getX,
+    getYError,
+    getYErrorRange,
+    showYStandardError,
+    xScale,
+    yScale,
+  ]);
 
-  React.useEffect(() => {
+    React.useEffect(() => {
     if (ref.current) {
       renderContainer(ref.current, {
         id: "columns-error-whiskers",