Skip to content

fix(chart-echarts): drop white textBorder from Funnel segment labels#40468

Merged
rusackas merged 1 commit into
apache:masterfrom
jesperct:fix/funnel-chart-label-contrast
May 28, 2026
Merged

fix(chart-echarts): drop white textBorder from Funnel segment labels#40468
rusackas merged 1 commit into
apache:masterfrom
jesperct:fix/funnel-chart-label-contrast

Conversation

@jesperct
Copy link
Copy Markdown
Contributor

SUMMARY

Funnel Chart segment labels currently apply a 1px white textBorder, added by #31590 (Ant Design v5 overhaul) when the label color moved from theme.colors.grayscale.dark2 to theme.colorText. On lighter segments the white outline overwhelms the thin dark text and labels are nearly illegible. This PR drops the textBorder so 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_data with product_line + SUM(sales), row limit 10.

Before After
before after

TESTING INSTRUCTIONS

  1. Open a Funnel Chart in Explore with a string dimension and a numeric metric (e.g. product_line + SUM(sales) on cleaned_sales_data).
  2. Configure categories that produce a mix of light- and dark-colored segments.
  3. Verify each segment label is readable against its background, including yellow / light-colored segments.

Unit coverage: plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts adds a test asserting defaultLabel does not set textBorderColor / textBorderWidth.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
  • Introduces new feature or API
  • Removes existing feature or API

@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented May 27, 2026

Code Review Agent Run #973929

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: 5dfba83..5dfba83
    • superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@netlify
Copy link
Copy Markdown

netlify Bot commented May 27, 2026

Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit 4938174
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/6a16fc54063c7d00083bfded
😎 Deploy Preview https://deploy-preview-40468--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@dosubot dosubot Bot added the viz:charts:funnel Related to the Funnel chart label May 27, 2026
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.
@jesperct jesperct force-pushed the fix/funnel-chart-label-contrast branch from 5dfba83 to 4938174 Compare May 27, 2026 14:14
@codecov
Copy link
Copy Markdown

codecov Bot commented May 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.17%. Comparing base (207a7bf) to head (4938174).

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              
Flag Coverage Δ
javascript 67.33% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented May 27, 2026

Code Review Agent Run #9220f5

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: 4938174..4938174
    • superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@rusackas rusackas merged commit c73106b into apache:master May 28, 2026
65 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

plugins size/S viz:charts:funnel Related to the Funnel chart

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants