From 4f7d4c2995dc4360e8bad9b70888ba50ff0ca136 Mon Sep 17 00:00:00 2001
From: lloydrichards <lloyd.d.richards@gmail.com>
Date: Mon, 6 Nov 2023 14:49:29 +0100
Subject: [PATCH] refactor(column): :recycle: remove ErrorWhisker and Tooltip
 when error is null

#589
---
 .vscode/launch.json                 | 15 +++++++++++
 app/charts/column/columns-state.tsx |  2 +-
 app/charts/column/columns.tsx       | 41 ++++++++++++++++++-----------
 3 files changed, 42 insertions(+), 16 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000000..0a5829fc91
--- /dev/null
+++ b/.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"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
index 8e62f67cd6..7183b4c261 100644
--- a/app/charts/column/columns-state.tsx
+++ b/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;
       }
 
diff --git a/app/charts/column/columns.tsx b/app/charts/column/columns.tsx
index 47ba54b09f..766f6ca606 100644
--- a/app/charts/column/columns.tsx
+++ b/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",