Merge pull request #227 from bento-platform/chart-pointer

Added onclick pointer to bar chart/histogram
bento-platform · Nov 25, 2024 · 68bb886 · 68bb886
2 parents ec482e9 + 9d99ac8
commit 68bb886
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git 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,12 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           units={units}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onChartClick: barChartOnChartClickHandler } : {})}
+          {...(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:
@@ -59,7 +65,12 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           data={data}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onChartClick: barChartOnChartClickHandler } : {})}
+          {...(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:

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