RechartsWrapper event tests, and role=application (#4555)

recharts · May 20, 2024 · d63c6a8 · d63c6a8
1 parent 47d5749
commit d63c6a8
Show file tree

Hide file tree

Showing 14 changed files with 372 additions and 106 deletions.
diff --git a/src/chart/RechartsWrapper.tsx b/src/chart/RechartsWrapper.tsx
@@ -12,10 +12,14 @@ export type RechartsWrapperProps = {
 };
 
 export const RechartsWrapper = forwardRef(
-  ({ children, width, height, className, style, wrapperEvents }: RechartsWrapperProps, ref: Ref<HTMLDivElement>) => (
+  (
+    { children, width, height, className, style = {}, wrapperEvents = {} }: RechartsWrapperProps,
+    ref: Ref<HTMLDivElement>,
+  ) => (
     <div
       className={clsx('recharts-wrapper', className)}
       style={{ position: 'relative', cursor: 'default', width, height, ...style }}
+      role="application"
       {...wrapperEvents}
       ref={ref}
     >

diff --git a/src/chart/Sankey.tsx b/src/chart/Sankey.tsx
@@ -5,7 +5,6 @@ import get from 'lodash/get';
 import sumBy from 'lodash/sumBy';
 import isFunction from 'lodash/isFunction';
 
-import clsx from 'clsx';
 import { Surface } from '../container/Surface';
 import { Layer } from '../container/Layer';
 import { Tooltip } from '../component/Tooltip';
@@ -17,6 +16,7 @@ import { Margin, DataKey, SankeyLink, SankeyNode } from '../util/types';
 import { ViewBoxContext } from '../context/chartLayoutContext';
 import { TooltipContextProvider, TooltipContextValue } from '../context/tooltipContext';
 import { CursorPortalContext, TooltipPortalContext } from '../context/tooltipPortalContext';
+import { RechartsWrapper } from './RechartsWrapper';
 
 const defaultCoordinateOfTooltip = { x: 0, y: 0 };
 
@@ -339,7 +339,7 @@ interface LinkDataItem {
   [key: string]: any;
 }
 
-interface SankeyData {
+export interface SankeyData {
   nodes: any[];
   links: LinkDataItem[];
 }
@@ -711,10 +711,11 @@ export class Sankey extends PureComponent<Props, State> {
         <TooltipPortalContext.Provider value={this.state.tooltipPortal}>
           <ViewBoxContext.Provider value={viewBox}>
             <TooltipContextProvider value={this.getTooltipContext()}>
-              <div
-                className={clsx('recharts-wrapper', className)}
-                style={{ ...style, position: 'relative', cursor: 'default', width, height }}
-                role="region"
+              <RechartsWrapper
+                className={className}
+                style={style}
+                width={width}
+                height={height}
                 ref={(node: HTMLDivElement) => {
                   if (this.state.tooltipPortal == null) {
                     this.setState({ tooltipPortal: node });
@@ -734,7 +735,7 @@ export class Sankey extends PureComponent<Props, State> {
                   {this.renderLinks(links, nodes)}
                   {this.renderNodes(nodes)}
                 </Surface>
-              </div>
+              </RechartsWrapper>
             </TooltipContextProvider>
           </ViewBoxContext.Provider>
         </TooltipPortalContext.Provider>

diff --git a/src/chart/SunburstChart.tsx b/src/chart/SunburstChart.tsx
@@ -9,6 +9,7 @@ import { polarToCartesian } from '../util/PolarUtils';
 import { ViewBoxContext } from '../context/chartLayoutContext';
 import { doNotDisplayTooltip, TooltipContextProvider, TooltipContextValue } from '../context/tooltipContext';
 import { CursorPortalContext, TooltipPortalContext } from '../context/tooltipPortalContext';
+import { RechartsWrapper } from './RechartsWrapper';
 
 export interface SunburstData {
   [key: string]: any;
@@ -211,10 +212,11 @@ export const SunburstChart = ({
       <TooltipPortalContext.Provider value={tooltipPortal}>
         <ViewBoxContext.Provider value={viewBox}>
           <TooltipContextProvider value={getTooltipContext()}>
-            <div
-              className={clsx('recharts-wrapper', className)}
-              style={{ position: 'relative', width, height }}
-              role="region"
+            <RechartsWrapper
+              className={className}
+              width={width}
+              // Sunburst doesn't support `style` property, why?
+              height={height}
               ref={(node: HTMLDivElement) => {
                 if (tooltipPortal == null && node != null) {
                   setTooltipPortal(node);
@@ -233,7 +235,7 @@ export const SunburstChart = ({
                 <Layer className={layerClass}>{sectors}</Layer>
                 {children}
               </Surface>
-            </div>
+            </RechartsWrapper>
           </TooltipContextProvider>
         </ViewBoxContext.Provider>
       </TooltipPortalContext.Provider>

diff --git a/src/chart/Treemap.tsx b/src/chart/Treemap.tsx
@@ -3,7 +3,6 @@ import isNan from 'lodash/isNaN';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
 import get from 'lodash/get';
-import clsx from 'clsx';
 import Smooth from 'react-smooth';
 
 import { Tooltip } from '../component/Tooltip';
@@ -21,6 +20,7 @@ import { AnimationDuration, AnimationTiming, DataKey, TreemapNode } from '../uti
 import { ViewBoxContext } from '../context/chartLayoutContext';
 import { TooltipContextProvider, TooltipContextValue } from '../context/tooltipContext';
 import { CursorPortalContext, TooltipPortalContext } from '../context/tooltipPortalContext';
+import { RechartsWrapper } from './RechartsWrapper';
 
 const NODE_VALUE_KEY = 'value';
 
@@ -737,10 +737,11 @@ export class Treemap extends PureComponent<Props, State> {
         <TooltipPortalContext.Provider value={this.state.tooltipPortal}>
           <ViewBoxContext.Provider value={viewBox}>
             <TooltipContextProvider value={this.getTooltipContext()}>
-              <div
-                className={clsx('recharts-wrapper', className)}
-                style={{ ...style, position: 'relative', cursor: 'default', width, height }}
-                role="region"
+              <RechartsWrapper
+                className={className}
+                style={style}
+                width={width}
+                height={height}
                 ref={(node: HTMLDivElement) => {
                   if (this.state.tooltipPortal == null) {
                     this.setState({ tooltipPortal: node });
@@ -760,7 +761,7 @@ export class Treemap extends PureComponent<Props, State> {
                   {children}
                 </Surface>
                 {type === 'nest' && this.renderNestIndex()}
-              </div>
+              </RechartsWrapper>
             </TooltipContextProvider>
           </ViewBoxContext.Provider>
         </TooltipPortalContext.Provider>

diff --git a/src/util/ChartUtils.ts b/src/util/ChartUtils.ts
@@ -98,6 +98,13 @@ export function getDomainOfDataByKey<T>(
 }
 
 export const calculateActiveTickIndex = (
+  /**
+   * For different layouts, `coordinate` is different:
+   * In horizontal layout, this is expected to be the `x` coordinate
+   * vertical -> y
+   * centric -> angle
+   * radial -> radius
+   */
   coordinate: number,
   ticks: Array<TickItem> = [],
   unsortedTicks?: Array<TickItem>,

diff --git a/test/_data.ts b/test/_data.ts
@@ -9,7 +9,7 @@ export const PageData = [
   { name: 'Page F', uv: 189, pv: 4800, amt: 2400 },
 ];
 
-export const SankeyData = {
+export const exampleSankeyData = {
   nodes: [
     { name: 'Agricultural waste' },
     { name: 'Bio-conversion' },

diff --git a/test/cartesian/Area.spec.tsx b/test/cartesian/Area.spec.tsx
@@ -58,7 +58,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
       };
 
       render(
-        <ChartElement width={500} height={500} data={data}>
+        <ChartElement data={data}>
           <Area dataKey="value" isAnimationActive={false} baseLine={200} label={renderLabel} />
         </ChartElement>,
       );
@@ -78,7 +78,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
       };
 
       render(
-        <ChartElement width={500} height={500} data={data}>
+        <ChartElement data={data}>
           <Area
             dataKey="value"
             isAnimationActive={false}
@@ -103,7 +103,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
       };
 
       render(
-        <ChartElement width={500} height={500} data={data}>
+        <ChartElement data={data}>
           <Area dataKey="value" isAnimationActive={false} baseLine={200} dot={renderDot} />
         </ChartElement>,
       );
@@ -118,7 +118,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
       );
 
       render(
-        <ChartElement width={500} height={500} data={data}>
+        <ChartElement data={data}>
           <Area
             dataKey="value"
             isAnimationActive={false}
@@ -133,7 +133,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
     test('Does not throw when dot is null', () => {
       const { container } = render(
-        <ChartElement width={500} height={500} data={data}>
+        <ChartElement data={data}>
           {/* Test that the error Cannot read properties of null (reading 'clipDot') does not appear in JS projects */}
           {/* TypeScript should flag this as an error, but we have strict null checks disabled in config */}
           <Area dataKey="value" dot={null} />
@@ -151,7 +151,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
       const layout = 'horizontal';
       it('should default baseValue to zero if no domain is defined in the axis', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" />
             <YAxis />
           </ChartElement>,
@@ -166,7 +166,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should default baseValue to the first number in domain', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" />
             <YAxis domain={[20, 300]} />
           </ChartElement>,
@@ -184,7 +184,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to dataMin', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" baseValue="dataMin" />
             <YAxis domain={[20, 300]} />
           </ChartElement>,
@@ -202,7 +202,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to dataMax', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" baseValue="dataMax" />
             <YAxis domain={[20, 300]} />
           </ChartElement>,
@@ -220,7 +220,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
       const layout = 'vertical';
       it('should default baseValue to zero if no domain is defined in the axis', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" />
             <XAxis type="number" />
             <YAxis dataKey="y" />
@@ -243,7 +243,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
          * But at this point I am only writing tests, not fixing bugs.
          */
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" />
             <XAxis type="number" />
           </ChartElement>,
@@ -260,7 +260,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
          * But at this point I am only writing tests, not fixing bugs.
          */
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" />
             <XAxis type="number" />
             <YAxis />
@@ -274,7 +274,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should default baseValue to the first number in domain', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" />
             <XAxis type="number" />
             <YAxis dataKey="y" domain={[20, 300]} />
@@ -293,7 +293,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to dataMin', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" baseValue="dataMin" />
             <XAxis type="number" />
             <YAxis dataKey="y" domain={[20, 300]} />
@@ -312,7 +312,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to dataMax', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data} layout={layout}>
+          <ChartElement data={data} layout={layout}>
             <Area dataKey="value" baseValue="dataMax" />
             <XAxis type="number" />
             <YAxis dataKey="y" domain={[20, 300]} />
@@ -336,7 +336,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
     describe('with no axes', () => {
       it('should default baseValue to 0', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data}>
+          <ChartElement data={data}>
             <Area dataKey="value" />
           </ChartElement>,
         );
@@ -350,7 +350,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to a number', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data}>
+          <ChartElement data={data}>
             <Area dataKey="value" baseValue={9} />
           </ChartElement>,
         );
@@ -367,7 +367,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to 0 when dataMin', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data}>
+          <ChartElement data={data}>
             <Area dataKey="value" baseValue="dataMin" />
           </ChartElement>,
         );
@@ -381,7 +381,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
       it('should set baseValue to dataMax', () => {
         const { container } = render(
-          <ChartElement width={500} height={500} data={data}>
+          <ChartElement data={data}>
             <Area dataKey="value" baseValue="dataMax" />
           </ChartElement>,
         );
@@ -397,7 +397,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
   test.each([{ myData: undefined }, { myData: [] }])("Don't render any path when data is $myData", ({ myData }) => {
     const { container } = render(
-      <ChartElement width={500} height={500} data={myData}>
+      <ChartElement data={myData}>
         <Area dataKey="value" />
       </ChartElement>,
     );
@@ -409,7 +409,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 
   test('renders the curve with the stroke on top (2nd) of the curve with the fill (1st)', () => {
     const { container } = render(
-      <ChartElement width={500} height={500} data={data}>
+      <ChartElement data={data}>
         <Area dataKey="value" baseLine={200} stroke="teal" fill="teal" />
       </ChartElement>,
     );
@@ -427,7 +427,7 @@ describe.each(chartsThatSupportArea)('<Area /> as a child of $testName', ({ Char
 describe.each(chartsThatDoNotSupportArea)('<Area /> as a child of $testName', ({ ChartElement }) => {
   it('should not render any curves', () => {
     const { container } = render(
-      <ChartElement width={500} height={500} data={data}>
+      <ChartElement data={data}>
         <Area dataKey="value" baseLine={200} stroke="teal" fill="teal" />
       </ChartElement>,
     );