Fix: allow Brush to be controlled with start and end index

src/chart/generateCategoricalChart.tsx

@@ -1199,10 +1199,10 @@ export const generateCategoricalChart = ({
       prevState: CategoricalChartState,
     ): CategoricalChartState => {
       const { dataKey, data, children, width, height, layout, stackOffset, margin } = nextProps;
+      const { dataStartIndex, dataEndIndex } = prevState;
 
       if (prevState.updateId === undefined) {
         const defaultState = createDefaultState(nextProps);
-
         return {
           ...defaultState,
           updateId: 0,
@@ -1280,9 +1280,16 @@ export const generateCategoricalChart = ({
         };
       }
       if (!isChildrenEqual(children, prevState.prevChildren)) {
+        // specifically check for Brush - if it exists and the start and end indexes are different, re-render with the new ones
+        const brush = findChildByType(children, Brush);
+
+        const startIndex = brush ? brush.props?.startIndex ?? dataStartIndex : dataStartIndex;
+        const endIndex = brush ? brush.props?.endIndex ?? dataEndIndex : dataEndIndex;
+        const hasDifferentStartOrEndIndex = startIndex !== dataStartIndex || endIndex !== dataEndIndex;
+
         // update configuration in children
         const hasGlobalData = !isNil(data);
-        const newUpdateId = hasGlobalData ? prevState.updateId : prevState.updateId + 1;
+        const newUpdateId = hasGlobalData && !hasDifferentStartOrEndIndex ? prevState.updateId : prevState.updateId + 1;
 
         return {
           updateId: newUpdateId,
@@ -1291,10 +1298,14 @@ export const generateCategoricalChart = ({
               props: nextProps,
               ...prevState,
               updateId: newUpdateId,
+              dataStartIndex: startIndex,
+              dataEndIndex: endIndex,
             },
             prevState,
           ),
           prevChildren: children,
+          dataStartIndex: startIndex,
+          dataEndIndex: endIndex,
         };
       }
 

storybook/stories/Examples/cartesian/Brush/Brush.stories.tsx

@@ -1,4 +1,6 @@
+import { expect } from '@storybook/jest';
 import React, { useState } from 'react';
+import { within, userEvent } from '@storybook/testing-library';
 import { ComposedChart, ResponsiveContainer, Line, Brush } from '../../../../../src';
 import { pageData } from '../../../data';
 
@@ -15,7 +17,7 @@ export const ControlledBrush = {
       <>
         <ResponsiveContainer width="100%" height={400}>
           <ComposedChart data={pageData}>
-            <Line dataKey="uv" />
+            <Line dataKey="uv" isAnimationActive={false} />
 
             <Brush
               startIndex={startIndex}
@@ -24,22 +26,46 @@ export const ControlledBrush = {
                 setEndIndex(e.endIndex);
                 setStartIndex(e.startIndex);
               }}
+              alwaysShowText
             />
           </ComposedChart>
         </ResponsiveContainer>
         <input
           type="number"
           aria-label="startIndex"
           value={startIndex}
-          onChange={evt => setStartIndex(Number(evt.target.value))}
+          onChange={evt => {
+            const num = Number(evt.target.value);
+            if (Number.isInteger(num)) setStartIndex(num);
+          }}
         />
         <input
-          type="number"
           aria-label="endIndex"
           value={endIndex}
-          onChange={evt => setEndIndex(Number(evt.target.value))}
+          onChange={evt => {
+            const num = Number(evt.target.value);
+            if (Number.isInteger(num)) setEndIndex(num);
+          }}
         />
       </>
     );
   },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const user = userEvent.setup();
+    const { getByLabelText } = within(canvasElement);
+
+    const startIndexInput = getByLabelText<HTMLInputElement>('startIndex');
+    const endIndexInput = getByLabelText<HTMLInputElement>('endIndex');
+
+    await user.clear(startIndexInput);
+    await user.type(startIndexInput, '2');
+    await user.clear(endIndexInput);
+    await user.type(endIndexInput, '5');
+
+    const brushTexts = document.getElementsByClassName('recharts-brush-texts').item(0).children;
+    expect(brushTexts.item(0)).toBeInTheDocument();
+
+    expect(brushTexts.item(0).textContent).toContain('2');
+    expect(brushTexts.item(1).textContent).toContain('5');
+  },
 };

test/cartesian/Brush.spec.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React, { useState } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { Brush, LineChart, Line, BarChart } from '../../src';
+import userEvent from '@testing-library/user-event';
+import { Brush, LineChart, Line, BarChart, ComposedChart } from '../../src';
 import { assertNotNull } from '../helper/assertNotNull';
 
 describe('<Brush />', () => {
@@ -182,5 +184,67 @@ describe('<Brush />', () => {
         expect(text.textContent).toBe('10');
       });
     });
+
+    const ControlledBrush = () => {
+      const [startIndex, setStartIndex] = useState<number | undefined>(3);
+      const [endIndex, setEndIndex] = useState<number | undefined>(data.length - 1);
+
+      return (
+        <>
+          <ComposedChart data={data} height={400} width={400}>
+            <Line dataKey="uv" isAnimationActive={false} />
+
+            <Brush
+              startIndex={startIndex}
+              endIndex={endIndex}
+              onChange={e => {
+                setEndIndex(e.endIndex);
+                setStartIndex(e.startIndex);
+              }}
+              alwaysShowText
+            />
+          </ComposedChart>
+          <input
+            type="number"
+            aria-label="startIndex"
+            value={startIndex}
+            onChange={evt => {
+              const num = Number(evt.target.value);
+              if (Number.isInteger(num)) setStartIndex(num);
+            }}
+          />
+          <input
+            aria-label="endIndex"
+            value={endIndex}
+            onChange={evt => {
+              const num = Number(evt.target.value);
+              if (Number.isInteger(num)) setEndIndex(num);
+            }}
+          />
+        </>
+      );
+    };
+
+    test('Travellers should move and chart should update when brush start and end indexes are controlled', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<ControlledBrush />);
+
+      const traveller = container.querySelector('.recharts-brush-traveller') as SVGGElement;
+      fireEvent.focus(traveller);
+
+      const startIndexInput = screen.getByLabelText<HTMLInputElement>('startIndex');
+      const endIndexInput = screen.getByLabelText<HTMLInputElement>('endIndex');
+
+      await user.clear(startIndexInput);
+      await user.type(startIndexInput, '2');
+      await user.clear(endIndexInput);
+      await user.type(endIndexInput, '5');
+
+      const brushTexts = container.getElementsByClassName('recharts-brush-texts').item(0)!.children;
+      expect(brushTexts.item(0)).toBeInTheDocument();
+
+      expect(brushTexts.item(0)?.textContent).toContain('2');
+      expect(brushTexts.item(1)?.textContent).toContain('5');
+    });
   });
 });