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] 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 = () => {};