Skip to content

feat: PercentageBarChart#550

Merged
sverg-cb merged 21 commits intomasterfrom
sverg/percentage-bar-chart
Apr 14, 2026
Merged

feat: PercentageBarChart#550
sverg-cb merged 21 commits intomasterfrom
sverg/percentage-bar-chart

Conversation

@sverg-cb
Copy link
Copy Markdown
Contributor

@sverg-cb sverg-cb commented Mar 26, 2026

What changed? Why?

PercentageBarChart is a new specialized chart component that renders stacked bar charts where every bar always fills 100% of the value axis. Rather than requiring callers to pre-normalize their data, consumers pass raw non-negative values per segment and the component handles the proportional math internally — each segment's value is divided by the group total and scaled to 100%.

This makes it straightforward to visualize part-to-whole breakdowns (e.g. category share, allocation splits) without any data preprocessing. The value axis is automatically locked to a strict 0–100% scale.

It supports both horizontal (default) and vertical bar orientations, and is built as a thin, focused wrapper around the existing BarChart component — inheriting its rendering, theming, and accessibility foundations while exposing a simpler, opinionated API scoped to the percentage-bar use case.

UI changes

Storybook

Storybook Light Dark
Mobile
pbc-mobile-storybk-light.mov
pbc-mobile-storybook-dark.mov
Web
pbc-web-storybk-light.mov
pbc-web-storybook-dark.mov

Docs

Mobile Web
pbc-docs-mobile.mov
pbc-docs-web.mov

Testing

How has it been tested?

  • Unit tests
  • Interaction tests
  • Pseudo State tests
  • Manual - Web
  • Manual - Android (Emulator / Device)
  • Manual - iOS (Emulator / Device)

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

  • verified visreg changes with Terran (include link to visreg run/approval)
  • all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

@cb-heimdall
Copy link
Copy Markdown
Collaborator

cb-heimdall commented Mar 26, 2026

✅ Heimdall Review Status

Requirement Status More Info
Reviews 1/1
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 1
Global minimum 0
Max 1
1
1 if commit is unverified 0
Sum 1
CODEOWNERS ✅ See below

CODEOWNERS

Code Owner Status Calculation
ui-systems-eng-team 1/1
Denominator calculation
Additional CODEOWNERS Requirement
Show calculation
Sum 0
0
From CODEOWNERS 1
Sum 1

Comment thread apps/docs/docs/components/charts/PercentageBarChart/_mobileExamples.mdx Outdated
Comment thread apps/docs/docs/components/charts/PercentageBarChart/_webExamples.mdx Outdated
Comment thread packages/mobile-visualization/src/chart/utils/chart.ts Outdated
Comment thread packages/web-visualization/src/chart/legend/Legend.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/web-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/web-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/web-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/web-visualization/src/chart/bar/PercentageBarChart.tsx
Comment thread apps/docs/docs/components/charts/PercentageBarChart/_webExamples.mdx Outdated
Comment thread apps/docs/docs/components/charts/PercentageBarChart/_webExamples.mdx Outdated
Comment thread apps/docs/docs/components/charts/PercentageBarChart/_webExamples.mdx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx Outdated
Comment thread packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx
Comment thread apps/docs/docs/components/charts/PercentageBarChart/_mobileExamples.mdx Outdated
@sverg-cb sverg-cb requested a review from hcopp April 13, 2026 22:24
hcopp
hcopp previously approved these changes Apr 13, 2026
Copy link
Copy Markdown
Contributor

@hcopp hcopp left a comment

Choose a reason for hiding this comment

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

Looks great! Can stamp again when you bump, feel free to get others to review as well

@sverg-cb sverg-cb merged commit 8d5db5a into master Apr 14, 2026
32 of 34 checks passed
@sverg-cb sverg-cb deleted the sverg/percentage-bar-chart branch April 14, 2026 02:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants