Merge pull request #221 from bento-platform/fix/chart-click

fix: chart clicking in French

package.json

@@ -22,7 +22,7 @@
     "antd": "^5.21.5",
     "axios": "^1.7.7",
     "bento-auth-js": "^6.0.2",
-    "bento-charts": "^2.9.2",
+    "bento-charts": "^2.12.0",
     "dotenv": "^16.3.1",
     "i18next": "^23.16.2",
     "i18next-browser-languagedetector": "^8.0.0",

src/js/components/Overview/Chart.tsx

@@ -8,28 +8,33 @@ import { CHART_HEIGHT, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useTranslationFn } from '@/hooks';
 import type { ChartData } from '@/types/data';
 import type { ChartConfig } from '@/types/chartConfig';
-import { CHART_TYPE_BAR, CHART_TYPE_HISTOGRAM, CHART_TYPE_CHOROPLETH, CHART_TYPE_PIE } from '@/types/chartConfig';
+import { CHART_TYPE_BAR, CHART_TYPE_CHOROPLETH, CHART_TYPE_HISTOGRAM, CHART_TYPE_PIE } from '@/types/chartConfig';
 
-interface ChartEvent {
-  activePayload: Array<{ payload: { x: string } }>;
+interface BarChartEvent {
+  activePayload: Array<{ payload: { x: string; id?: string } }>;
+}
+
+interface PieChartEvent {
+  payload: { name: string; id?: string };
 }
 
 const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) => {
   const t = useTranslationFn();
   const navigate = useNavigate();
-  const translateMap = ({ x, y }: { x: string; y: number }) => ({ x: t(x), y });
+  const translateMap = ({ x, y }: { x: string; y: number }) => ({ x: t(x), y, id: x });
   const removeMissing = ({ x }: { x: string }) => x !== 'missing';
 
   const goToSearch = (id: string, val: string | undefined) => {
     if (val === undefined) return;
     navigate(`../search?${id}=${val}`);
   };
 
-  const barChartOnChartClickHandler: BarChartProps['onChartClick'] = (e: ChartEvent) => {
-    goToSearch(id, e.activePayload[0]?.payload.x); // activePayload is [] if no current active bar
+  const barChartOnChartClickHandler: BarChartProps['onChartClick'] = (e: BarChartEvent) => {
+    const payload = e.activePayload[0]?.payload;
+    goToSearch(id, payload?.id ?? payload.x); // activePayload is [] if no current active bar
   };
-  const pieChartOnClickHandler = (d: { name: string }) => {
-    goToSearch(id, d.name);
+  const pieChartOnClickHandler = ({ payload }: PieChartEvent) => {
+    goToSearch(id, payload?.id ?? payload.name);
   };
 
   const { chart_type: type } = chartConfig;