Skip to content

feat: Canvas pie chart — add "Other" grouping + hover percentages#9136

Draft
ericokuma wants to merge 3 commits intomainfrom
cursor/APP-818-pie-chart-grouping-and-hover-cad0
Draft

feat: Canvas pie chart — add "Other" grouping + hover percentages#9136
ericokuma wants to merge 3 commits intomainfrom
cursor/APP-818-pie-chart-grouping-and-hover-cad0

Conversation

@ericokuma
Copy link
Copy Markdown
Contributor

Summary

Pie/donut charts with many slices are now readable via smart "Other" grouping, and hovering any slice shows percentage of total.

What changed

Smart "Other" Grouping (other-grouping.ts)

  • Dynamic algorithm: walks largest slices first, stops when remaining ≤20% of total (hard cap of 10 visible slices)
  • When only 0–1 items would be grouped, "Other" is skipped entirely
  • showOther YAML config (default true) controls grouping
  • Existing limit on the color field bypasses dynamic algorithm for a fixed cutoff

"Other" Slice Appearance

  • Muted color: light #d1d5db / dark #4b5563
  • Applied in both Vega-Lite spec color scale and canvas color mapping
  • "Other" appears last in legend with the muted color

Hover Tooltips with Percentages (pie-tooltip.ts)

  • Named slices: shows name, formatted value, and percentage (1 decimal)
  • "Other" slice: mini-leaderboard tooltip with top 5 grouped items (value + %), plus "and N more" footer
  • Percentages calculated against true grand total (fetched via separate aggregation query)

Data Pipeline

  • Added optional dataTransformer to ChartDataDependencies for pre-chart data transformation
  • CircularChartProvider.transformData() applies "Other" grouping before data reaches Vega-Lite
  • Total query now fires whenever showOther is enabled (not just showTotal)
  • API query limit is at least DEFAULT_COLOR_LIMIT even when user sets a low explicit limit

Files changed

File Change
circular/other-grouping.ts New — grouping algorithm + tooltip data helpers
circular/other-grouping.spec.ts New — 13 unit tests covering all acceptance criteria
circular/pie-tooltip.ts New — custom Vega tooltip formatter for pie/donut
circular/pie.ts Percentage transform, "Other" color in Vega spec
circular/CircularChartProvider.ts showOther on spec, data transform, total query logic
Chart.svelte "Other" color mapping, pie tooltip formatter wiring
data-provider.ts Optional dataTransformer in data pipeline
BaseChart.ts getDataTransformer() / getOtherGroupResult() methods
CircularChart.ts Override transformer + other-group-result methods
CanvasChart.svelte Pass otherGroupResult to Chart
selector.ts Wire dataTransformer into getChartDataForCanvas

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Linear Issue: APP-818

Open in Web Open in Cursor 

cursoragent and others added 3 commits March 27, 2026 22:14
- Add smart 'Other' grouping algorithm (target ≤20% of total, max 10 slices)
- Support explicit limit via YAML config and showOther toggle
- Add percentage display in tooltips (1 decimal place)
- Add mini-leaderboard tooltip for 'Other' slice (top 5 + N more)
- Muted color for 'Other' slice (light/dark mode aware)
- Add data transformer pipeline for circular chart data
- Custom tooltip formatter for pie/donut charts

Closes APP-818

Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
- Use grandTotal from total query for Other value calculation
- Fetch more data from API when showOther is enabled with low limit
- Distinguish between query limit and user's explicit limit
- Add 13 unit tests for other-grouping algorithm
- All 2419 existing tests continue to pass

Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
…Total

Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
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