Merge pull request #735 from shlinkio/dependabot/npm_and_yarn/recharts-3.0.2

Bump recharts from 2.15.4 to 3.x

Author: acelaya

package-lock.json

@@ -73,7 +73,7 @@
     "react-external-link": "^2.5.0",
     "react-leaflet": "^5.0",
     "react-swipeable": "^7.0.2",
-    "recharts": "^2.15.4"
+    "recharts": "^3.1.0"
   },
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",

package.json

@@ -29,7 +29,7 @@ type HorizontalBarChartEntry = {
   prevAmount: number | null;
 };
 
-const isHiddenLabel = (label: string) => label.startsWith('hidden_');
+const isHiddenLabel = (label: any) => typeof label !== 'string' || label.startsWith('hidden_');
 
 export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
   { stats, prevStats, highlightedStats, highlightedLabel, max, onClick },
@@ -101,7 +101,7 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
           stackId="main"
           cursor="pointer"
           fill={brandColor() /* This needs to be set as it is the color used in the tooltip */}
-          onClick={({ name }: HorizontalBarChartEntry) => onClick?.(name)}
+          onClick={({ name }) => name && onClick?.(name)}
         >
           {chartData.map((entry) => (
             // Using a Cell, to define a different fill color, without affecting the one used for the tooltip
@@ -114,7 +114,7 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
             stackId="main"
             cursor="pointer"
             fill={HIGHLIGHTED_COLOR /* This needs to be set as it is the color used in the tooltip */}
-            onClick={({ name }: HorizontalBarChartEntry) => onClick?.(name)}
+            onClick={({ name }) => name && onClick?.(name)}
           >
             {chartData.map((entry) => (
               <Cell key={entry.name} fill={HIGHLIGHTED_COLOR_ALPHA} stroke={HIGHLIGHTED_COLOR} strokeWidth={2} />

src/visits/charts/HorizontalBarChart.tsx

@@ -32,7 +32,7 @@ import {
 import type { FC } from 'react';
 import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { CartesianGrid, Line, LineChart, ReferenceArea, Tooltip, XAxis, YAxis } from 'recharts';
-import type { CategoricalChartState } from 'recharts/types/chart/types';
+import type { CategoricalChartFunc } from 'recharts/types/chart/types';
 import { formatInternational } from '../../utils/dates/helpers/date';
 import type { StrictDateRange } from '../../utils/dates/helpers/dateIntervals';
 import { rangeOf } from '../../utils/helpers';
@@ -203,9 +203,6 @@ const useActiveDot = (
   };
 };
 
-const payloadFromChartEvent = (e: CategoricalChartState) =>
-  e.activePayload?.[0]?.payload as ChartPayloadEntry | undefined;
-
 export type LineChartCardProps = {
   visitsGroups: Record<string, VisitsList>;
   setSelectedVisits?: (visits: NormalizedVisit[]) => void;
@@ -274,18 +271,18 @@ export const LineChartCard: FC<LineChartCardProps> = (
     setSelectionStart(undefined);
     setSelectionEnd(undefined);
   }, []);
-  const resolveSelectionStart = useCallback((e: CategoricalChartState, mouseEvent: MouseEvent) => {
-    const payload = payloadFromChartEvent(e);
-    if (mouseEvent.button === 0 && payload) {
+  const resolveSelectionStart: CategoricalChartFunc = useCallback((e, mouseEvent) => {
+    const payload = e.activeIndex && chartData[e.activeIndex as number];
+    if ((mouseEvent as unknown as MouseEvent).button === 0 && payload) {
       setSelectionStart(payload);
     }
-  }, []);
-  const resolveSelectionEnd = useCallback((e: CategoricalChartState) => {
-    const payload = payloadFromChartEvent(e);
+  }, [chartData]);
+  const resolveSelectionEnd: CategoricalChartFunc = useCallback((e) => {
+    const payload = e.activeIndex && chartData[e.activeIndex as number];
     if (selectionStart && payload) {
       setSelectionEnd(payload);
     }
-  }, [selectionStart]);
+  }, [chartData, selectionStart]);
   const updateDateRange = useCallback(() => {
     if (!selectionStart || !selectionEnd) {
       return;