feat(apollo-vertex): update chart for Recharts 3

package.json

@@ -14,7 +14,7 @@
     "build:packages": "turbo run build --filter='./packages/*'",
     "build:apps": "turbo run build --filter='./apps/*'",
     "build:analyze": "turbo run build:analyze",
-    "check:dependencies": "check-dependency-version-consistency .",
+    "check:dependencies": "check-dependency-version-consistency . --ignore-dep recharts",
     "commit": "git-cz",
     "dev": "turbo run dev",
     "dev:chat": "turbo run dev --filter=@uipath/ap-chat",

packages/apollo-vertex/package.json

@@ -112,7 +112,7 @@
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^16.5.4 || ^17.0.0",
     "react-markdown": "^10.1.0",
-    "recharts": "^2.15.4",
+    "recharts": "^3.8.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.0.0"
@@ -160,7 +160,7 @@
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^17.0.15",
     "react-markdown": "^10.1.0",
-    "recharts": "2.15.4",
+    "recharts": "3.8.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.1.17",

packages/apollo-vertex/registry.json

@@ -884,7 +884,7 @@
       "type": "registry:ui",
       "title": "Line Chart",
       "description": "A time-series line chart over a datetime dimension.",
-      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@2.15.4"],
+      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@3.8.0"],
       "registryDependencies": [
         "@uipath/card",
         "@uipath/charts-core",
@@ -914,7 +914,7 @@
       "type": "registry:ui",
       "title": "Multi-Line Chart",
       "description": "Two metrics on a shared datetime axis with independent Y axes.",
-      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@2.15.4"],
+      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@3.8.0"],
       "registryDependencies": [
         "@uipath/card",
         "@uipath/chart",
@@ -944,7 +944,7 @@
       "type": "registry:ui",
       "title": "Bar Chart",
       "description": "A metric broken down by a categorical dimension.",
-      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@2.15.4"],
+      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@3.8.0"],
       "registryDependencies": [
         "@uipath/card",
         "@uipath/charts-core",
@@ -999,7 +999,7 @@
       "type": "registry:ui",
       "title": "Distribution Chart",
       "description": "A histogram over a numeric or datetime dimension.",
-      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@2.15.4"],
+      "dependencies": ["@tanstack/react-query@^5.90.0", "recharts@3.8.0"],
       "registryDependencies": [
         "@uipath/card",
         "@uipath/charts-core",
@@ -1723,7 +1723,7 @@
       "type": "registry:ui",
       "title": "Chart",
       "description": "Beautiful charts using Recharts with consistent theming.",
-      "dependencies": ["recharts@2.15.4", "lucide-react"],
+      "dependencies": ["recharts@3.8.0", "lucide-react"],
       "files": [{ "path": "registry/chart/chart.tsx", "type": "registry:ui" }]
     },
     {
@@ -3098,7 +3098,7 @@
         "@uipath/vs-core@^4.4.0",
         "@uipath/uipath-typescript@^1.7.1",
         "react-i18next",
-        "recharts@2.15.4",
+        "recharts@3.8.0",
         "sonner",
         "lucide-react",
         "zod"

packages/apollo-vertex/registry/bar-chart/bar-chart-view.tsx

@@ -1,6 +1,7 @@
 import {
-  Cell,
+  type BarShapeProps,
   LabelList,
+  Rectangle,
   Bar as RechartsBar,
   BarChart as RechartsBarChart,
   XAxis,
@@ -45,6 +46,10 @@ const BAR_SIZE = 20;
 const BAR_GAP = 4;
 const CATEGORY_GAP = 8;
 
+function PaletteBar(props: BarShapeProps) {
+  return <Rectangle {...props} fill={PALETTE[props.index % PALETTE.length]} />;
+}
+
 export function BarChart({ rows, series }: BarChartProps) {
   const dimensionKeys = rows[0]?.dimensions.map((d) => d.key) ?? [];
   const dimensionCount = dimensionKeys.length;
@@ -211,7 +216,11 @@ export function BarChart({ rows, series }: BarChartProps) {
               cursor={false}
             />
             {seriesCount === 1 ? (
-              <RechartsBar dataKey={series[0]?.label ?? ""} barSize={BAR_SIZE}>
+              <RechartsBar
+                dataKey={series[0]?.label ?? ""}
+                barSize={BAR_SIZE}
+                shape={PaletteBar}
+              >
                 <LabelList
                   content={(props: LabelListContentProps) => {
                     const payload = isRechartsBarData(props.payload)
@@ -224,9 +233,6 @@ export function BarChart({ rows, series }: BarChartProps) {
                     return <BarLabel {...props} formatted={formatted} />;
                   }}
                 />
-                {rechartsData.map((row, index) => (
-                  <Cell key={row.__id} fill={PALETTE[index % PALETTE.length]} />
-                ))}
               </RechartsBar>
             ) : (
               series.map((s, idx) => (

packages/apollo-vertex/registry/bar-chart/util/get-bar-color.ts

@@ -24,12 +24,10 @@ export function getBarColor({
     const rowIndex = rechartsData.findIndex(
       (row) => row.__id === payload?.__id,
     );
-    const fallbackColor =
-      PALETTE[rowIndex >= 0 ? rowIndex % PALETTE.length : 0];
-    return assertDefined(
-      itemColor ?? payloadFill ?? fallbackColor,
-      "Bar color",
-    );
+    if (rowIndex >= 0) {
+      return assertDefined(PALETTE[rowIndex % PALETTE.length], "Bar color");
+    }
+    return assertDefined(itemColor ?? payloadFill ?? PALETTE[0], "Bar color");
   }
 
   const fallbackColor = COLORS[seriesIndex % COLORS.length];