From 3ae584d1a6919750b0cab35cc2b0b05cb977b3d4 Mon Sep 17 00:00:00 2001
From: SanjeevLakhwani <lakhwani.sanjeev691@gmail.com>
Date: Thu, 21 Nov 2024 14:25:22 -0500
Subject: [PATCH 1/2] Added onclick pointer to bar chart/histogram

---
 src/js/components/Overview/Chart.tsx | 5 +++--
 src/js/utils/chart.ts                | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx
index 102842d8..c1113257 100644
--- a/src/js/components/Overview/Chart.tsx
+++ b/src/js/components/Overview/Chart.tsx
@@ -9,6 +9,7 @@ import { useTranslationFn } from '@/hooks';
 import type { ChartData } from '@/types/data';
 import type { ChartConfig } from '@/types/chartConfig';
 import { CHART_TYPE_BAR, CHART_TYPE_CHOROPLETH, CHART_TYPE_HISTOGRAM, CHART_TYPE_PIE } from '@/types/chartConfig';
+import { noop } from '@/utils/chart';
 
 interface BarChartEvent {
   activePayload: Array<{ payload: { x: string; id?: string } }>;
@@ -48,7 +49,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           units={units}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onChartClick: barChartOnChartClickHandler } : {})}
+          {...(isClickable ? { onChartClick: barChartOnChartClickHandler, onClick: noop } : {})}
         />
       );
     case CHART_TYPE_HISTOGRAM:
@@ -59,7 +60,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           data={data}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onChartClick: barChartOnChartClickHandler } : {})}
+          {...(isClickable ? { onChartClick: barChartOnChartClickHandler, onClick: noop } : {})}
         />
       );
     case CHART_TYPE_PIE:
diff --git a/src/js/utils/chart.ts b/src/js/utils/chart.ts
index 0b9d580b..d288d0b8 100644
--- a/src/js/utils/chart.ts
+++ b/src/js/utils/chart.ts
@@ -4,3 +4,5 @@ import type { ChartData } from '@/types/data';
 export const serializeChartData = (chartData: Datum[]): ChartData[] => {
   return chartData.map(({ label, value }) => ({ x: label, y: value }));
 };
+
+export const noop = () => {};

From ca816995c355a5087356b6d02833e6c4bdd59a67 Mon Sep 17 00:00:00 2001
From: SanjeevLakhwani <lakhwani.sanjeev691@gmail.com>
Date: Mon, 25 Nov 2024 10:38:55 -0500
Subject: [PATCH 2/2] Added comments for noop

---
 src/js/components/Overview/Chart.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx
index c1113257..91b471a9 100644
--- a/src/js/components/Overview/Chart.tsx
+++ b/src/js/components/Overview/Chart.tsx
@@ -49,7 +49,12 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           units={units}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onChartClick: barChartOnChartClickHandler, onClick: noop } : {})}
+          {...(isClickable
+            ? {
+                onChartClick: barChartOnChartClickHandler,
+                onClick: noop,
+              }
+            : {})} // The noop is to provide the cursor: pointer style as onChartClick doesn't provide the behavior
         />
       );
     case CHART_TYPE_HISTOGRAM:
@@ -60,7 +65,12 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           data={data}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onChartClick: barChartOnChartClickHandler, onClick: noop } : {})}
+          {...(isClickable
+            ? {
+                onChartClick: barChartOnChartClickHandler,
+                onClick: noop,
+              }
+            : {})} // The noop is to provide the cursor: pointer style as onChartClick doesn't provide the behavior
         />
       );
     case CHART_TYPE_PIE: