From 07038c4c6997cbc6d22ad5c2a5f3f8915f439cdc Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 21 Aug 2024 11:12:00 +0200
Subject: [PATCH] [charts] Improve bar chart performances

---
 packages/x-charts/src/BarChart/BarPlot.tsx | 32 ++++++++++++----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx
index 875644e4bcaf..10fdd7dcc1a6 100644
--- a/packages/x-charts/src/BarChart/BarPlot.tsx
+++ b/packages/x-charts/src/BarChart/BarPlot.tsx
@@ -224,6 +224,9 @@ const enterStyle = ({ x, width, y, height }: AnimationData) => ({
 function BarPlot(props: BarPlotProps) {
   const { completedData, masksData } = useAggregatedData();
   const { skipAnimation, onItemClick, borderRadius, barLabel, ...other } = props;
+
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+
   const transition = useTransition(completedData, {
     keys: (bar) => `${bar.seriesId}-${bar.dataIndex}`,
     from: leaveStyle,
@@ -233,7 +236,7 @@ function BarPlot(props: BarPlotProps) {
     immediate: skipAnimation,
   });
 
-  const maskTransition = useTransition(masksData, {
+  const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: (v) => v.id,
     from: leaveStyle,
     leave: leaveStyle,
@@ -244,18 +247,19 @@ function BarPlot(props: BarPlotProps) {
 
   return (
     <React.Fragment>
-      {maskTransition((style, { id, hasPositive, hasNegative, layout }) => {
-        return (
-          <BarClipPath
-            maskId={id}
-            borderRadius={borderRadius}
-            hasNegative={hasNegative}
-            hasPositive={hasPositive}
-            layout={layout}
-            style={style}
-          />
-        );
-      })}
+      {!withoutBorderRadius &&
+        maskTransition((style, { id, hasPositive, hasNegative, layout }) => {
+          return (
+            <BarClipPath
+              maskId={id}
+              borderRadius={borderRadius}
+              hasNegative={hasNegative}
+              hasPositive={hasPositive}
+              layout={layout}
+              style={style}
+            />
+          );
+        })}
       {transition((style, { seriesId, dataIndex, color, maskId }) => {
         const barElement = (
           <BarElement
@@ -273,7 +277,7 @@ function BarPlot(props: BarPlotProps) {
           />
         );
 
-        if (!borderRadius || borderRadius <= 0) {
+        if (withoutBorderRadius) {
           return barElement;
         }