Skip to content

Add ComboChart component with Storybook documentation#2146

Draft
rSnapkoOpenOps wants to merge 1 commit intochore/refactor-bar-chartsfrom
feat/add-combo-chart
Draft

Add ComboChart component with Storybook documentation#2146
rSnapkoOpenOps wants to merge 1 commit intochore/refactor-bar-chartsfrom
feat/add-combo-chart

Conversation

@rSnapkoOpenOps
Copy link
Collaborator

Part of OPS-3910

@linear
Copy link

linear bot commented Mar 17, 2026

@sonarqubecloud
Copy link

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new ComboChart UI component (bar + line on dual Y-axes) and provides Storybook documentation for it, extending the existing chart component set in packages/ui-components.

Changes:

  • Export ComboChart from the chart module barrel (@/ui/chart).
  • Add ComboChart component built on Recharts ComposedChart, reusing existing ChartContainer / tooltip / legend primitives.
  • Add Storybook stories demonstrating default usage and feature combinations.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
packages/ui-components/src/ui/chart/index.ts Exposes the new ComboChart via the chart module exports.
packages/ui-components/src/ui/chart/combo-chart.tsx Implements the ComboChart component using Recharts primitives and shared chart helpers.
packages/ui-components/src/stories/charts/combo-chart.stories.tsx Adds Storybook documentation and example configurations for ComboChart.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment on lines +128 to +129
className={legendClassName}
content={<ChartLegendContent />}
Comment on lines +94 to +121
{showLeftYAxis && (
<YAxis
yAxisId="left"
orientation="left"
tickFormatter={leftYAxisTickFormatter}
tickLine={false}
axisLine={false}
ticks={leftYAxisTicks}
domain={leftYAxisDomain}
tick={{
fill: 'hsl(var(--foreground))',
}}
/>
)}
{showRightYAxis && (
<YAxis
yAxisId="right"
orientation="right"
tickFormatter={rightYAxisTickFormatter}
tickLine={false}
axisLine={false}
ticks={rightYAxisTicks}
domain={rightYAxisDomain}
tick={{
fill: 'hsl(var(--foreground))',
}}
/>
)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants