Feat/ Add auto-contrast toggle to Data labels#244
Conversation
…bility on gradient cells
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds an auto-contrast option for heatmap data labels so label colors remain legible against varying cell background colors, while preserving the user-selected hue/saturation.
Changes:
- Introduces
getAdaptiveLabelColor()(d3-color based) and applies it to data label fill styling when auto-contrast is enabled. - Adds a new formatting capability/setting (
labels.autoContrast) with an en-US resource label. - Adds visual tests validating utility behavior and end-to-end label rendering with auto-contrast toggling.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| test/visualTest.ts | Adds unit/E2E-style tests for adaptive label color and the auto-contrast toggle behavior. |
| stringResources/en-US/resources.resjson | Adds a localized label for the new Auto-contrast toggle in the Format pane. |
| src/visual.ts | Applies adaptive label fill color at render time based on cell background and toggle state. |
| src/settings.ts | Introduces DataLabelsCardSettings with an autoContrast toggle; wires it into SettingsModel.labels. |
| src/heatmapUtils.ts | Adds getAdaptiveLabelColor() to clamp label lightness using d3-color parsing and Lab lightness. |
| package.json | Adds d3-color and its typings dependency. |
| capabilities.json | Adds the labels.autoContrast property to the visual capabilities schema. |
| CHANGELOG.md | Documents the new Auto-contrast feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ansaganie
changed the title
…lpha and cache results for performance
Demonkratiy
left a comment
Demonkratiy
left a comment
There was a problem hiding this comment.
Thanks for the feature! A few changes requested before merge — see inline comments (default value, lockfile churn, and shipping this as a proper accessibility option).
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
| const adaptiveLabelColorCache = new Map<string, string>(); | ||
| // .value → ILocalizedItemMember (selected option); .value.value → the raw EnumMemberValue string. | ||
| // Fall back to Soft (the configured default) if the value is absent. | ||
| const autoContrastMode = (labelSettings.autoContrast.value?.value as AutoContrastMode | undefined) ?? AUTO_CONTRAST_MODE_SOFT; |
There was a problem hiding this comment.
Confirmed and valid. In high-contrast mode parseSettings forces labels.fill to the theme foreground, but renderLabels still applies auto-contrast (default Soft) and mutates that color — which breaks the strict high-contrast color contract and can reduce contrast. We should force auto-contrast Off when this.colorHelper.isHighContrast. Keeping this thread open until that's addressed.
… for WCAG AA compliance
…github.com/ansaganie/powerbi-visuals-heatmap into features/add-auto-contrast-for-data-labels
Adds an Auto-contrast toggle to the Format pane → Data labels group. When enabled (default: on), each label's lightness is automatically clamped so the text remains legible against its cell background colour, while preserving the hue and saturation the user chose.