feat(charts): percentage stacked bar chart mode - #724
Merged
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
WalkthroughAdds a ChangesPercent-Stacked Bar Chart Mode
Sequence DiagramsequenceDiagram
participant Settings
participant BarPluginComponent
participant BarChart
participant ECharts
Settings->>BarPluginComponent: settings.stackMode
BarPluginComponent->>BarChart: stackMode prop (or legacy stacked)
BarChart->>BarChart: compute per-row totals (percent mode)
BarChart->>BarChart: normalize values to 0-100
BarChart->>ECharts: pass series data, axis config, tooltip formatter
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
alfredo1996
force-pushed
the
feat/issue-167-percent-stacked-bar
branch
from
May 12, 2026 16:10
d60695b to
c6da501
Compare
Replace boolean "Stacked" toggle with a 3-option "Stack Mode" dropdown: - Normal (grouped) — bars side by side - Stacked — absolute values stacked - 100% Stacked — values normalized to percentages (0%-100%) In percent mode: - Each bar's values are normalized to their row total percentage - Y-axis displays 0%-100% with percent formatter - Tooltip shows both percentage and absolute value - Zero-total rows display as 0% (no NaN) Backward compatible — existing dashboards with stacked:true still work via the legacy boolean prop fallback. Closes #167 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
alfredo1996
force-pushed
the
feat/issue-167-percent-stacked-bar
branch
from
May 13, 2026 13:30
82d82d5 to
1c3f18f
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/src/plugins/bar/component.tsx`:
- Around line 36-37: The component is always passing the schema-defaulted
settings.stackMode which masks “unset”; change the JSX to only supply the
stackMode prop when the raw/unprocessed setting was explicitly provided (e.g.,
check rawSettings.stackMode !== undefined) and otherwise omit the prop, while
keeping stacked={settings.stacked} unchanged; in short, replace the
unconditional stackMode={settings.stackMode} with a conditional spread/prop that
only sets stackMode when the original raw setting exists.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 70cfdf01-3f54-487a-93b5-12965a0f46a7
📒 Files selected for processing (8)
app/src/plugins/bar/component.tsxapp/src/plugins/bar/settings.tscomponent/src/charts/__tests__/bar-chart.test.tsxcomponent/src/charts/bar-chart.tsxcomponent/src/charts/index.tscomponent/src/components/composed/__tests__/chart-options-panel.test.tsxcomponent/src/components/composed/__tests__/chart-options-schema.test.tscomponent/src/components/composed/chart-options/bar.ts
🚧 Files skipped from review as they are similar to previous changes (7)
- component/src/components/composed/chart-options/bar.ts
- component/src/charts/index.ts
- app/src/plugins/bar/settings.ts
- component/src/components/composed/tests/chart-options-schema.test.ts
- component/src/components/composed/tests/chart-options-panel.test.tsx
- component/src/charts/bar-chart.tsx
- component/src/charts/tests/bar-chart.test.tsx
Comment on lines
+36
to
37
| stackMode={settings.stackMode} | ||
| stacked={settings.stacked} |
There was a problem hiding this comment.
Preserve legacy fallback by not always forcing stackMode.
Line 36 currently passes a schema-defaulted value, which can mask “unset” and break legacy stacked: true behavior. Pass stackMode only when it was explicitly provided in raw settings.
Suggested fix
function BarPluginComponent({
data,
settings: raw,
@@
}: PluginProps) {
const onClick = useEChartsClick(onChartClick, data);
const settings = barSettingsSchema.parse(raw);
+ const hasExplicitStackMode =
+ raw != null &&
+ typeof raw === "object" &&
+ "stackMode" in (raw as Record<string, unknown>);
return (
<BarChart
data={(data as BarChartDataPoint[]) ?? []}
orientation={settings.orientation}
- stackMode={settings.stackMode}
+ stackMode={hasExplicitStackMode ? settings.stackMode : undefined}
stacked={settings.stacked}
showValues={settings.showValues}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/src/plugins/bar/component.tsx` around lines 36 - 37, The component is
always passing the schema-defaulted settings.stackMode which masks “unset”;
change the JSX to only supply the stackMode prop when the raw/unprocessed
setting was explicitly provided (e.g., check rawSettings.stackMode !==
undefined) and otherwise omit the prop, while keeping stacked={settings.stacked}
unchanged; in short, replace the unconditional stackMode={settings.stackMode}
with a conditional spread/prop that only sets stackMode when the original raw
setting exists.
Extract inline percent tooltip formatter from bar-chart.tsx into buildPercentTooltipFormatter in chart-utils.ts, reusing the existing TooltipParam type. Add renderBarOptions test helper to eliminate repeated render + extract-options boilerplate across 20+ test cases. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add 100% stacked bar chart option. Replaces the boolean "Stacked" toggle with a 3-option dropdown: Normal / Stacked / 100% Stacked.
Normal (grouped)
Bars side by side — existing default behavior.
Stacked
Bars stacked on absolute values — existing behavior.
100% Stacked (new)
Each category's values normalized to percentages. Y-axis shows 0%-100%. Tooltip shows both percentage and absolute value.
Backward compatibility
Existing dashboards with
stacked: truestill work — the legacy boolean prop falls back to "stacked" mode whenstackModeis not set.Test plan
Closes #167
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes
Tests