fix(chart-echarts): drop white textBorder from Funnel segment labels#40468
Conversation
Code Review Agent Run #973929Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help |
✅ Deploy Preview for superset-docs-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Funnel segment labels currently apply a 1px white textBorder (introduced in apache#31590 when label.color moved from theme.colors.grayscale.dark2 to theme.colorText). On light-colored segments the white outline overwhelms the thin dark text, leaving labels nearly illegible. Drop the textBorder so the theme-provided text color stands on its own against the segment fill.
5dfba83 to
4938174
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #40468 +/- ##
==========================================
- Coverage 64.18% 64.17% -0.01%
==========================================
Files 2592 2592
Lines 139272 139272
Branches 32338 32338
==========================================
- Hits 89385 89384 -1
- Misses 48352 48353 +1
Partials 1535 1535
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Code Review Agent Run #9220f5Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help |
SUMMARY
Funnel Chart segment labels currently apply a 1px white
textBorder, added by #31590 (Ant Design v5 overhaul) when the label color moved fromtheme.colors.grayscale.dark2totheme.colorText. On lighter segments the white outline overwhelms the thin dark text and labels are nearly illegible. This PR drops thetextBorderso the theme-provided text color stands on its own against the segment fill.const defaultLabel = { formatter, show: showLabels, color: theme.colorText, - textBorderColor: theme.colorBgBase, - textBorderWidth: 1, };Pixel-sampled the rendered canvas to confirm the perceived "white" labels are actually dark text (
rgba(0,0,0,0.88)) surrounded by a white 1px outline that wins the local contrast on yellow / light segments.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Funnel Chart on
cleaned_sales_datawithproduct_line+SUM(sales), row limit 10.TESTING INSTRUCTIONS
product_line+SUM(sales)oncleaned_sales_data).Unit coverage:
plugins/plugin-chart-echarts/test/Funnel/transformProps.test.tsadds a test assertingdefaultLabeldoes not settextBorderColor/textBorderWidth.ADDITIONAL INFORMATION