diff --git a/package.json b/package.json index ef16ab9d22..99644ac7ee 100644 --- a/package.json +++ b/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", diff --git a/packages/apollo-vertex/package.json b/packages/apollo-vertex/package.json index 52def91279..d8c1dc879d 100644 --- a/packages/apollo-vertex/package.json +++ b/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", diff --git a/packages/apollo-vertex/registry.json b/packages/apollo-vertex/registry.json index f211814906..4e31dac60c 100644 --- a/packages/apollo-vertex/registry.json +++ b/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" diff --git a/packages/apollo-vertex/registry/bar-chart/bar-chart-view.tsx b/packages/apollo-vertex/registry/bar-chart/bar-chart-view.tsx index ec303ad804..f0c405befa 100644 --- a/packages/apollo-vertex/registry/bar-chart/bar-chart-view.tsx +++ b/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 ; +} + 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 ? ( - + { const payload = isRechartsBarData(props.payload) @@ -224,9 +233,6 @@ export function BarChart({ rows, series }: BarChartProps) { return ; }} /> - {rechartsData.map((row, index) => ( - - ))} ) : ( series.map((s, idx) => ( diff --git a/packages/apollo-vertex/registry/bar-chart/util/get-bar-color.ts b/packages/apollo-vertex/registry/bar-chart/util/get-bar-color.ts index 0f3c432e75..b88ebd5dcb 100644 --- a/packages/apollo-vertex/registry/bar-chart/util/get-bar-color.ts +++ b/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]; diff --git a/packages/apollo-vertex/registry/chart/chart.tsx b/packages/apollo-vertex/registry/chart/chart.tsx index 044390d0e1..934025d6f8 100644 --- a/packages/apollo-vertex/registry/chart/chart.tsx +++ b/packages/apollo-vertex/registry/chart/chart.tsx @@ -7,16 +7,23 @@ import { cn } from "@/lib/utils"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; +const THEME_SELECTORS: Array<[keyof typeof THEMES, string]> = [ + ["light", THEMES.light], + ["dark", THEMES.dark], +]; -export type ChartConfig = { - [k in string]: { +const INITIAL_DIMENSION = { width: 320, height: 200 } as const; + +export type ChartConfig = Record< + string, + { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } - ); -}; + ) +>; type ChartContextProps = { config: ChartConfig; @@ -39,12 +46,17 @@ function ChartContainer({ className, children, config, + initialDimension = INITIAL_DIMENSION, ...props }: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"]; + initialDimension?: { + width: number; + height: number; + }; }) { const uniqueId = React.useId(); const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`; @@ -55,13 +67,15 @@ function ChartContainer({ data-slot="chart" data-chart={chartId} className={cn( - "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className, )} {...props} > - + {children} @@ -82,10 +96,8 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {