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');
+  },
 };