Skip to content

fix: added support for percentFormat in Segment Label#744

Merged
c-lamoureux merged 2 commits intoadobe:mainfrom
Natansh271828:hotfix/percentFomrat
Apr 7, 2026
Merged

fix: added support for percentFormat in Segment Label#744
c-lamoureux merged 2 commits intoadobe:mainfrom
Natansh271828:hotfix/percentFomrat

Conversation

@Natansh271828
Copy link
Copy Markdown

@Natansh271828 Natansh271828 commented Mar 27, 2026

Description

Added a new percentFormat prop to the SegmentLabel component that allows customizing the d3 format specifier used for percentage labels on donut chart segments. Previously, the percentage format was hardcoded to '.0%' (whole percentages like "45%"), making it impossible to display decimal percentages (e.g., "45.3%"). This also caused precision loss through rounding — for example, values like 0.4% and 1.2% would both round to "0%" and "1%" respectively, making it difficult to distinguish between small but meaningfully different segments.
The change spans both the main (vega-spec-builder) and S2 (vega-spec-builder-s2) packages, keeping them in sync.

Related Issue

N/A — discovered while consuming the library in a downstream project where valueFormat was being passed with percent: true, but had no effect on the percentage display.

Motivation and Context

When using , there was no way to control the precision of the percentage label. The format was hardcoded to '.0%' in getSegmentLabelValueText(). The existing valueFormat prop only applies to the metric value (when value: true), not to the percentage — which was not obvious from the API surface. Adding percentFormat gives consumers explicit control over percentage formatting while maintaining backward compatibility with the '.0%' default.

How Has This Been Tested?

Screenshots (if appropriate):

Added 4 new unit tests (2 per spec-builder package) covering:
Custom percentFormat with percent: true only
Custom percentFormat in combined percent + value mode
All 39 existing tests continue to pass (yarn test -- --testPathPattern="segmentLabelUtils")
Locally tested with a downstream consumer app via pnpm link to verify the percentage labels render with the custom format

Screenshots (if appropriate):
Pasted image 20260327123211-1

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@c-lamoureux
Copy link
Copy Markdown
Contributor

Changes look great. Can we add the prop and description to the Docs package?

@c-lamoureux c-lamoureux merged commit 4141411 into adobe:main Apr 7, 2026
6 checks passed
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