fix: The tooltip does not include data from all charts when a separat…

…e dataset is passed to chart prop data and specified on Line/Area/etc prop data (recharts#3733)

<!--- Provide a general summary of your changes in the Title above -->
## Description
Set a default argument for the data source of `getTooltipContent` in
`generateCategoricalChart.ts` that points to `chartData`. In this case
`child.props.data` is looking at the individual graph
element(Line/Area/etc.). Logic is essentially "if there's no data there,
check chart data."

<!--- Describe your changes in detail -->

## Related Issue
recharts#3669 
<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

The tooltip does not include data from all charts when a separate
dataset is passed to chart prop data and specified on Line/Area/etc prop
data
<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?

Unit tests and storybook.
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.

src/chart/generateCategoricalChart.tsx

@@ -233,7 +233,12 @@ const getTooltipContent = (
       return result;
     }
 
-    const { data } = child.props;
+    /**
+     * Fixes: https://github.com/recharts/recharts/issues/3669
+     * Defaulting to chartData below to fix an edge case where the tooltip does not include data from all charts
+     * when a separate dataset is passed to chart prop data and specified on Line/Area/etc prop data
+     */
+    const { data = chartData } = child.props;
     let payload;
 
     if (tooltipAxis.dataKey && !tooltipAxis.allowDuplicatedCategory) {

storybook/stories/Examples/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-shadow */
 import React from 'react';
 import { pageData } from '../data';
-import { Bar, ComposedChart, Line, ResponsiveContainer, Tooltip } from '../../../src';
+import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from '../../../src';
 import { DefaultTooltipContent } from '../../../src/component/DefaultTooltipContent';
 
 export default {
@@ -57,3 +57,38 @@ export const LockedByClick = {
   description:
     'This example shows how to lock the tooltip to a specific position. Click on the chart to show fix the Tooltip.',
 };
+
+const areaData = [
+  { category: 'A', value: 0.2 },
+  { category: 'B', value: 0.3 },
+  { category: 'B', value: 0.5 },
+  { category: 'C', value: 0.6 },
+  { category: 'C', value: 0.7 },
+  { category: 'D', value: 0.4 },
+];
+
+const lineData = [
+  { category: 'A', value: null },
+  { category: 'B', value: null },
+  { category: 'B', value: null },
+  { category: 'C', value: 0.2 },
+  { category: 'C', value: 0.4 },
+  { category: 'D', value: 0.6 },
+];
+
+export const SeparateDataSetsForChart = {
+  render: () => {
+    return (
+      <ResponsiveContainer width="100%" height={500}>
+        <ComposedChart data={areaData}>
+          <XAxis dataKey="category" type="category" />
+          <YAxis dataKey="value" />
+          <Tooltip />
+
+          <Area dataKey="value" />
+          <Line dataKey="value" data={lineData} />
+        </ComposedChart>
+      </ResponsiveContainer>
+    );
+  },
+};

test/component/Tooltip.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Area, AreaChart, Tooltip } from '../../src';
+import { Area, AreaChart, ComposedChart, Line, Tooltip, XAxis, YAxis } from '../../src';
 import { mockMouseEvent } from '../helper/mockMouseEvent';
 
 describe('<Tooltip />', () => {
@@ -54,8 +54,52 @@ describe('<Tooltip />', () => {
       </div>,
     );
 
-    const chart = container.querySelector('.recharts-wrapper');
-    const mouseOverEvent = mockMouseEvent('mouseover', chart!, { pageX: 200, pageY: 200 });
+    const chart = (container.querySelector('.recharts-wrapper') ?? {}) as Element;
+    const mouseOverEvent = mockMouseEvent('mouseover', chart, { pageX: 200, pageY: 200 });
+    mouseOverEvent.fire();
+
+    // After the mouse over event over the chart, the tooltip wrapper still is not set to visible,
+    // but the content is already created based on the nearest data point.
+    const tooltipContentName = container.querySelector('.recharts-tooltip-item-name');
+    const tooltipContentValue = container.querySelector('.recharts-tooltip-item-value');
+    expect(tooltipContentName).toBeInTheDocument();
+    expect(tooltipContentValue).toBeInTheDocument();
+  });
+
+  test('Mouse over renders content with multiple data sets', () => {
+    const areaData = [
+      { category: 'A', value: 0.2 },
+      { category: 'B', value: 0.3 },
+      { category: 'B', value: 0.5 },
+      { category: 'C', value: 0.6 },
+      { category: 'C', value: 0.7 },
+      { category: 'D', value: 0.4 },
+    ];
+
+    const lineData = [
+      { category: 'A', value: null },
+      { category: 'B', value: null },
+      { category: 'B', value: null },
+      { category: 'C', value: 0.2 },
+      { category: 'C', value: 0.4 },
+      { category: 'D', value: 0.6 },
+    ];
+
+    const { container } = render(
+      <div role="main" style={{ width: '400px', height: '400px' }}>
+        <ComposedChart width={400} height={400} data={areaData}>
+          <XAxis dataKey="category" type="category" />
+          <YAxis dataKey="value" />
+          <Tooltip />
+
+          <Area dataKey="value" />
+          <Line dataKey="value" data={lineData} />
+        </ComposedChart>
+      </div>,
+    );
+
+    const chart = (container.querySelector('.recharts-wrapper') ?? {}) as Element;
+    const mouseOverEvent = mockMouseEvent('mouseover', chart, { pageX: 200, pageY: 200 });
     mouseOverEvent.fire();
 
     // After the mouse over event over the chart, the tooltip wrapper still is not set to visible,