feat: Add StackedBarChart component #105
Conversation
Implements stacked bar chart with the following features: - Vertical and horizontal alignment support - Customizable colors for multiple categories - Optional legend display - Tooltip with stacked values - Value formatting support Added preview examples: - stacked-bar-chart-style-default - stacked-bar-chart-style-horizontal - stacked-bar-chart-style-no-legend - stacked-bar-chart-style-formatted Fixes Logging-Studio#100
|
@KavanBhavsar35 is attempting to deploy a commit to the Retro UI Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughIntroduces a new StackedBarChart React component (Recharts) with vertical/horizontal layouts, configurable categories, colors, tooltip/legend/grid toggles, and value formatting. Adds registry, config/navigation entries, documentation, and four preview example pages demonstrating usage. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
components/retroui/charts/StackedBarChart.tsx (1)
16-31: Minor:classNameis redundant in the interface.
classNameis already included inReact.HTMLAttributes<HTMLDivElement>, so the explicit declaration on line 30 is unnecessary.interface StackedBarChartProps extends React.HTMLAttributes<HTMLDivElement> { data: Record<string, any>[] index: string categories: string[] strokeColors?: string[] fillColors?: string[] tooltipBgColor?: string tooltipBorderColor?: string gridColor?: string valueFormatter?: (value: number) => string showGrid?: boolean showTooltip?: boolean showLegend?: boolean alignment?: "vertical" | "horizontal" - className?: string }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
components/retroui/charts/StackedBarChart.tsx(1 hunks)config/components.ts(3 hunks)config/navigation.ts(1 hunks)content/docs/charts/stacked-bar-chart.mdx(1 hunks)preview/charts/stacked-bar-chart-style-default.tsx(1 hunks)preview/charts/stacked-bar-chart-style-formatted.tsx(1 hunks)preview/charts/stacked-bar-chart-style-horizontal.tsx(1 hunks)preview/charts/stacked-bar-chart-style-no-legend.tsx(1 hunks)public/r/stacked-bar-chart.json(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
config/navigation.ts (2)
components/SideNav.tsx (1)
SideNav(12-53)components/TopNav.tsx (1)
TopNav(11-93)
components/retroui/charts/StackedBarChart.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/charts/stacked-bar-chart-style-default.tsx (1)
components/retroui/charts/StackedBarChart.tsx (1)
StackedBarChart(182-182)
preview/charts/stacked-bar-chart-style-horizontal.tsx (1)
components/retroui/charts/StackedBarChart.tsx (1)
StackedBarChart(182-182)
preview/charts/stacked-bar-chart-style-no-legend.tsx (1)
components/retroui/charts/StackedBarChart.tsx (1)
StackedBarChart(182-182)
🔇 Additional comments (9)
config/navigation.ts (1)
100-100: LGTM!The navigation entry follows the established pattern and is appropriately placed after "Bar Chart" in the Chart section.
components/retroui/charts/StackedBarChart.tsx (1)
33-55: LGTM!Good use of
React.forwardRefwith sensible defaults for all optional props. The CSS variable defaults for colors ensure theme consistency.public/r/stacked-bar-chart.json (1)
1-18: LGTM!The registry entry correctly declares the
rechartsdependency and follows the shadcn registry schema. The component content and target path are properly configured.config/components.ts (2)
64-67: LGTM!The core entry follows the established pattern for chart components in this configuration.
268-287: LGTM!The preview entries are well-structured and follow the established pattern. All four preview variants (default, horizontal, no-legend, formatted) are properly registered.
preview/charts/stacked-bar-chart-style-default.tsx (1)
1-21: LGTM!Clean preview implementation with sample data that demonstrates the component's default configuration. The use of CSS variables for colors ensures theme consistency.
preview/charts/stacked-bar-chart-style-no-legend.tsx (1)
1-22: Preview wiring for no‑legend variant looks goodProps line up with the documented API;
index,categories,fillColors, andshowLegend={false}are consistent with the “no legend” example intent. Nothing blocking here.preview/charts/stacked-bar-chart-style-horizontal.tsx (1)
1-21: Horizontal stacked bar preview is correctly configured
alignment="horizontal"withindex="category"and matchingcategories/fillColorslooks consistent and should showcase the horizontal layout as intended.preview/charts/stacked-bar-chart-style-formatted.tsx (1)
1-23: Formatted-values stacked bar preview is well set upData,
index,categories, andfillColorsare coherent, andvalueFormattercleanly demonstrates custom numeric formatting in thousands. No issues from a preview wiring standpoint.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Instead of making a separate component, what if we update the |
2 participants
Implements stacked bar chart with the following features:
Added preview examples:
Fixes #100
Summary by CodeRabbit
New Features
Documentation
Examples
Navigation
✏️ Tip: You can customize this high-level summary in your review settings.