⬆️ recharts (3.4.0 → 3.7.1) (#7022)

* recharts (3.4.1 -> 3.7.0)

* Cell & activeShape deprecation

* note

* fix textAnchor

* remove Cell in BarGraph

packages/desktop-client/package.json

@@ -85,7 +85,7 @@
     "react-spring": "10.0.0",
     "react-swipeable": "^7.0.2",
     "react-virtualized-auto-sizer": "^2.0.2",
-    "recharts": "^3.4.1",
+    "recharts": "^3.7.0",
     "rehype-external-links": "^3.0.0",
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^6.0.5",

packages/desktop-client/src/components/reports/graphs/BarGraph.tsx

@@ -10,13 +10,14 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  Cell,
   LabelList,
+  Rectangle,
   ReferenceLine,
   Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
+import type { BarShapeProps } from 'recharts';
 
 import type {
   balanceTypeOpType,
@@ -268,9 +269,8 @@ export function BarGraph({
                 <XAxis
                   dataKey={yAxis}
                   angle={-35}
-                  textAnchor="end"
                   height={Math.sqrt(longestLabelLength) * 25}
-                  tick={{ fill: theme.pageText }}
+                  tick={{ fill: theme.pageText, textAnchor: 'end' }}
                   tickLine={{ stroke: theme.pageText }}
                 />
               )}
@@ -315,6 +315,14 @@ export function BarGraph({
                     id: item.id,
                   })
                 }
+                shape={(props: BarShapeProps) => (
+                  <Rectangle
+                    {...props}
+                    fill={
+                      data.legend[props.index]?.color ?? props.fill ?? undefined
+                    }
+                  />
+                )}
               >
                 {viewLabels && !compact && (
                   <LabelList
@@ -322,13 +330,6 @@ export function BarGraph({
                     content={e => customLabel(e, balanceTypeOp, format)}
                   />
                 )}
-                {data.legend.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={entry.color}
-                    name={entry.name}
-                  />
-                ))}
               </Bar>
             </BarChart>
           </div>

packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx

@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import type { CSSProperties } from 'react';
 
 import { theme } from '@actual-app/components/theme';
-import { Cell, Pie, PieChart, Sector, Tooltip } from 'recharts';
+import { Pie, PieChart, Sector, Tooltip } from 'recharts';
+import type { PieSectorShapeProps } from 'recharts';
 
 import type {
   balanceTypeOpType,
@@ -281,20 +282,6 @@ export function DonutGraph({
                 style={{ cursor: pointer }}
               >
                 <Pie
-                  activeShape={
-                    width < 220 || height < 130
-                      ? undefined
-                      : compact
-                        ? props => (
-                            <ActiveShapeMobileWithFormat
-                              {...props}
-                              format={format}
-                            />
-                          )
-                        : props => (
-                            <ActiveShapeWithFormat {...props} format={format} />
-                          )
-                  }
                   dataKey={val => getVal(val)}
                   nameKey={yAxis}
                   {...animationProps}
@@ -311,6 +298,20 @@ export function DonutGraph({
                   }
                   startAngle={90}
                   endAngle={-270}
+                  shape={(props: PieSectorShapeProps, index: number) => {
+                    const fill = data.legend[index]?.color ?? props.fill;
+                    const showActiveShape = width >= 220 && height >= 130;
+                    const isActive = props.isActive || index === activeIndex;
+                    if (isActive && showActiveShape) {
+                      const shapeProps = { ...props, fill, format };
+                      return compact ? (
+                        <ActiveShapeMobileWithFormat {...shapeProps} />
+                      ) : (
+                        <ActiveShapeWithFormat {...shapeProps} />
+                      );
+                    }
+                    return <Sector {...props} fill={fill} />;
+                  }}
                   onMouseLeave={() => setPointer('')}
                   onMouseEnter={(_, index) => {
                     if (canDeviceHover()) {
@@ -346,11 +347,7 @@ export function DonutGraph({
                       });
                     }
                   }}
-                >
-                  {data.legend.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
+                />
                 <Tooltip
                   content={() => null}
                   defaultIndex={activeIndex}