Area + Bar send their tooltip data to redux store (#4521)

recharts · May 12, 2024 · 139a587 · 139a587
1 parent 2d8c0f0
commit 139a587
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 10 deletions.
diff --git a/src/cartesian/Area.tsx b/src/cartesian/Area.tsx
@@ -1,7 +1,7 @@
 /**
  * @fileOverview Area
  */
-import React, { PureComponent, SVGProps } from 'react';
+import React, { PureComponent, SVGProps, useEffect } from 'react';
 import clsx from 'clsx';
 import Animate from 'react-smooth';
 import isFunction from 'lodash/isFunction';
@@ -15,7 +15,7 @@ import { Layer } from '../container/Layer';
 import { LabelList } from '../component/LabelList';
 import { Global } from '../util/Global';
 import { isNumber, uniqueId, interpolateNumber } from '../util/DataUtils';
-import { getCateCoordinateOfLine, getValueByDataKey } from '../util/ChartUtils';
+import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
 import { Props as XAxisProps } from './XAxis';
 import { Props as YAxisProps } from './YAxis';
 import {
@@ -35,6 +35,12 @@ import { filterProps, isDotProps } from '../util/ReactUtils';
 import type { Payload as LegendPayload } from '../component/DefaultLegendContent';
 import { useLegendPayloadDispatch } from '../context/legendPayloadContext';
 import { ActivePoints } from '../component/ActivePoints';
+import {
+  addTooltipEntrySettings,
+  removeTooltipEntrySettings,
+  TooltipPayloadConfiguration,
+} from '../state/tooltipSlice';
+import { useAppDispatch } from '../state/hooks';
 
 interface AreaPointItem extends CurvePoint {
   value?: number | number[];
@@ -130,6 +136,36 @@ function SetAreaLegend(props: Props): null {
   return null;
 }
 
+function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
+  const { dataKey, data, stroke, strokeWidth, fill, name, hide, unit } = props;
+  return {
+    dataDefinedOnItem: data,
+    settings: {
+      stroke,
+      strokeWidth,
+      fill,
+      dataKey,
+      name: getTooltipNameProp(name, dataKey),
+      hide,
+      type: props.tooltipType,
+      color: getLegendItemColor(stroke, fill),
+      unit,
+    },
+  };
+}
+
+function SetTooltipEntrySettings(props: Props): null {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const tooltipEntrySettings: TooltipPayloadConfiguration = getTooltipEntrySettings(props);
+    dispatch(addTooltipEntrySettings(tooltipEntrySettings));
+    return () => {
+      dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
+    };
+  }, [props, dispatch]);
+  return null;
+}
+
 export class Area extends PureComponent<Props, State> {
   static displayName = 'Area';
 
@@ -581,7 +617,12 @@ export class Area extends PureComponent<Props, State> {
       this.props;
 
     if (hide || !points || !points.length) {
-      return <SetAreaLegend {...this.props} />;
+      return (
+        <>
+          <SetAreaLegend {...this.props} />
+          <SetTooltipEntrySettings {...this.props} />
+        </>
+      );
     }
 
     const { isAnimationFinished } = this.state;
@@ -599,6 +640,7 @@ export class Area extends PureComponent<Props, State> {
       <>
         <Layer className={layerClass}>
           <SetAreaLegend {...this.props} />
+          <SetTooltipEntrySettings {...this.props} />
           {needClipX || needClipY ? (
             <defs>
               <clipPath id={`clipPath-${clipPathId}`}>

diff --git a/src/cartesian/Bar.tsx b/src/cartesian/Bar.tsx
@@ -1,7 +1,7 @@
 /**
  * @fileOverview Render a group of bar
  */
-import React, { Key, PureComponent, ReactElement } from 'react';
+import React, { Key, PureComponent, ReactElement, useEffect } from 'react';
 import clsx from 'clsx';
 import Animate from 'react-smooth';
 import isEqual from 'lodash/isEqual';
@@ -19,6 +19,7 @@ import {
   getBaseValueOfBar,
   getCateCoordinateOfBar,
   getTooltipItem,
+  getTooltipNameProp,
   getValueByDataKey,
   truncateByDomain,
 } from '../util/ChartUtils';
@@ -48,6 +49,12 @@ import {
   useMouseLeaveItemDispatch,
   useTooltipContext,
 } from '../context/tooltipContext';
+import { useAppDispatch } from '../state/hooks';
+import {
+  addTooltipEntrySettings,
+  removeTooltipEntrySettings,
+  TooltipPayloadConfiguration,
+} from '../state/tooltipSlice';
 
 export interface BarRectangleItem extends RectangleProps {
   value?: number | [number, number];
@@ -137,6 +144,36 @@ function SetBarLegend(props: Props): null {
   return null;
 }
 
+function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
+  const { dataKey, data, stroke, strokeWidth, fill, name, hide, unit } = props;
+  return {
+    dataDefinedOnItem: data,
+    settings: {
+      stroke,
+      strokeWidth,
+      fill,
+      dataKey,
+      name: getTooltipNameProp(name, dataKey),
+      hide,
+      type: props.tooltipType,
+      color: props.fill,
+      unit,
+    },
+  };
+}
+
+function SetTooltipEntrySettings(props: Props): null {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const tooltipEntrySettings: TooltipPayloadConfiguration = getTooltipEntrySettings(props);
+    dispatch(addTooltipEntrySettings(tooltipEntrySettings));
+    return () => {
+      dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
+    };
+  }, [props, dispatch]);
+  return null;
+}
+
 type BarBackgroundProps = {
   background?: ActiveShape<BarProps, SVGPathElement>;
   data: BarRectangleItem[];
@@ -613,7 +650,12 @@ export class Bar extends PureComponent<Props, State> {
       id,
     } = this.props;
     if (hide || !data || !data.length) {
-      return <SetBarLegend {...this.props} />;
+      return (
+        <>
+          <SetBarLegend {...this.props} />
+          <SetTooltipEntrySettings {...this.props} />
+        </>
+      );
     }
 
     const { isAnimationFinished } = this.state;
@@ -626,6 +668,7 @@ export class Bar extends PureComponent<Props, State> {
     return (
       <Layer className={layerClass}>
         <SetBarLegend {...this.props} />
+        <SetTooltipEntrySettings {...this.props} />
         {needClipX || needClipY ? (
           <defs>
             <clipPath id={`clipPath-${clipPathId}`}>

diff --git a/src/cartesian/Line.tsx b/src/cartesian/Line.tsx
@@ -123,7 +123,7 @@ function SetLineLegend(props: Props): null {
 }
 
 function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
-  const { dataKey, data, stroke, strokeWidth, fill, name, hide } = props;
+  const { dataKey, data, stroke, strokeWidth, fill, name, hide, unit } = props;
   return {
     dataDefinedOnItem: data,
     settings: {
@@ -135,6 +135,7 @@ function getTooltipEntrySettings(props: Props): TooltipPayloadConfiguration {
       hide,
       type: props.tooltipType,
       color: props.stroke,
+      unit,
     },
   };
 }

diff --git a/src/component/Tooltip.tsx b/src/component/Tooltip.tsx
@@ -115,7 +115,7 @@ function TooltipInternal<TValue extends ValueType, TName extends NameType>(props
   const viewBox = useViewBox();
   const accessibilityLayer = useAccessibilityLayer();
   const { active: activeFromContext, payload: payloadFromProps, coordinate, label } = useTooltipContext();
-  // TODO this will fail tests until Area, Bar, and Line all push their own payloads
+  // TODO this will fail tests until Tooltip props and tooltipAxis are in Redux
   // const payloadFromContext = useAppSelector(selectTooltipPayload);
   // const payload = payloadFromContext?.length > 0 ? payloadFromContext : payloadFromProps;
   const payload = payloadFromProps;

diff --git a/src/state/selectors.ts b/src/state/selectors.ts
@@ -41,7 +41,7 @@ export function selectTooltipPayload(state: RechartsRootState): TooltipPayload |
 
     const sliced = getSliced(finalData, dataStartIndex, dataEndIndex);
 
-    // TODO settings coming from Tooltip props
+    // TODO settings coming from Tooltip props, and tooltipAxis
     const tooltipPayload = sliced?.[activeIndex];
     const tooltipEntry = getTooltipEntry({
       tooltipEntrySettings: settings,

diff --git a/src/util/ChartUtils.ts b/src/util/ChartUtils.ts
@@ -1357,9 +1357,12 @@ export function getTooltipEntry({
   };
 }
 
-export function getTooltipNameProp(nameFromItem: string | undefined, dataKey: DataKey<any>): string | undefined {
+export function getTooltipNameProp(
+  nameFromItem: string | number | undefined,
+  dataKey: DataKey<any>,
+): string | undefined {
   if (nameFromItem) {
-    return nameFromItem;
+    return String(nameFromItem);
   }
   if (typeof dataKey === 'string') {
     return dataKey;

diff --git a/test/state/selectors.spec.tsx b/test/state/selectors.spec.tsx
@@ -125,6 +125,7 @@ describe('selectTooltipPayload', () => {
         fill: 'green',
         dataKey: 'x',
         name: 'foo',
+        unit: 'bar',
       },
       dataDefinedOnItem: [
         { x: 8, y: 9 },
@@ -138,6 +139,7 @@ describe('selectTooltipPayload', () => {
       fill: 'green',
       payload: { x: 10, y: 11 },
       value: 10,
+      unit: 'bar',
     };
     store.dispatch(addTooltipEntrySettings(tooltipSettings1));
     store.dispatch(addTooltipEntrySettings(tooltipSettings2));
@@ -154,6 +156,7 @@ describe('selectTooltipPayload', () => {
         fill: 'green',
         dataKey: 'y',
         name: 'foo',
+        unit: 'bar',
       },
       dataDefinedOnItem: undefined,
     };
@@ -173,6 +176,7 @@ describe('selectTooltipPayload', () => {
       fill: 'green',
       payload: { x: 1, y: 2 },
       value: 2,
+      unit: 'bar',
     };
 
     expect(selectTooltipPayload(store.getState())).toEqual([expectedEntry]);