fix: Line never checks for new totalLength on component update (#3946)

recharts · Nov 9, 2023 · de36475 · de36475
1 parent 27a47c1
commit de36475
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/cartesian/Line.tsx b/src/cartesian/Line.tsx
@@ -184,6 +184,17 @@ export class Line extends PureComponent<Props, State> {
     this.setState({ totalLength });
   }
 
+  componentDidUpdate(): void {
+    if (!this.props.isAnimationActive) {
+      return;
+    }
+
+    const totalLength = this.getTotalLength();
+    if (totalLength !== this.state.totalLength) {
+      this.setState({ totalLength });
+    }
+  }
+
   static getDerivedStateFromProps(nextProps: Props, prevState: State): State {
     if (nextProps.animationId !== prevState.prevAnimationId) {
       return {

diff --git a/storybook/stories/Examples/LineChart.stories.tsx b/storybook/stories/Examples/LineChart.stories.tsx
@@ -959,3 +959,32 @@ export const WithBrush: StoryObj = {
     );
   },
 };
+
+export const HideOnLegendClick: StoryObj = {
+  render: () => {
+    const [activeSeries, setActiveSeries] = React.useState<Array<string>>([]);
+
+    const handleLegendClick = (dataKey: string) => {
+      if (activeSeries.includes(dataKey)) {
+        setActiveSeries(activeSeries.filter(el => el !== dataKey));
+      } else {
+        setActiveSeries(prev => [...prev, dataKey]);
+      }
+    };
+
+    return (
+      <ResponsiveContainer height={400}>
+        <LineChart data={pageData}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <CartesianGrid strokeDasharray="3 3" />
+          <Tooltip />
+          <Legend height={36} iconType="circle" onClick={props => handleLegendClick(props.dataKey)} />
+
+          <Line hide={activeSeries.includes('uv')} type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
+          <Line hide={activeSeries.includes('pv')} type="monotone" dataKey="pv" stroke="#987" fill="#8884d8" />
+        </LineChart>
+      </ResponsiveContainer>
+    );
+  },
+};