Skip to content

Add interactive BasinPie charts - #316

Merged
krowvin merged 8 commits into
mainfrom
feature/radial-fill-chart
Aug 12, 2026
Merged

Add interactive BasinPie charts#316
krowvin merged 8 commits into
mainfrom
feature/radial-fill-chart

Conversation

@krowvin

@krowvin krowvin commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

Summary

  • add a reusable, accessible RadialFillChart SVG component
  • add the CWMS-aware BasinPie adapter for preloaded level/time-series data or optional CDA loading by levelIds and tsids
  • document both data modes with working examples
  • fit and position chart labels, titles, percentage guides, and captions to avoid clipping and collisions

Why

The SWT sites maintained separate D3 BasinPie renderers, including expression-based label positioning. Moving the interactive renderer into Groundwork Water provides one declarative React/SVG implementation while keeping application navigation and project configuration in the consumers.

Impact

Consumers can provide loaded CWMS data or identifiers plus an office. The chart handles loading, error, empty, missing-data, mouse, and keyboard states and remains compatible with static SVG markup.

Validation

  • npm test - 44 tests passed
  • npm run build-lib
  • npm run build-docs
  • public SWT production build against the linked package
  • internal SWT cwbi-local build against the linked package

@krowvin
krowvin marked this pull request as ready for review August 11, 2026 20:40
@krowvin
krowvin requested a review from msweier August 11, 2026 20:40
@krowvin

krowvin commented Aug 11, 2026

Copy link
Copy Markdown
Contributor Author

Documentation screenshot

BasinPie with application-provided data — This is the deterministic levelData/tsData example from the Groundwork Water docs. It shows weighted storage segments, 25/50/75/100% guide rings, the aggregate 53% title, CHAR's missing-storage warning, project percentages, and the image-date caption.

BasinPie documentation example using preloaded CWMS data

@msweier msweier left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This looks good! I tested in docs. I didn't think I would need it but I thought of a couple places with reservoirs in series where I could.

@krowvin
krowvin merged commit cc9e1c2 into main Aug 12, 2026
5 checks passed
@krowvin
krowvin deleted the feature/radial-fill-chart branch August 12, 2026 12:02
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