Skip to content

fix(echarts): Apply D3 locale formatting to adaptive datetime x-axis#34661

Open
rusackas wants to merge 6 commits intomasterfrom
d3-localization
Open

fix(echarts): Apply D3 locale formatting to adaptive datetime x-axis#34661
rusackas wants to merge 6 commits intomasterfrom
d3-localization

Conversation

@rusackas
Copy link
Member

Summary

  • Fixes custom D3 locale formatting not being applied when using "Adaptive" datetime format option in ECharts visualizations
  • Ensures localized month/day names work correctly with adaptive formatting

Fixes

Fixes #31790

Problem

When users configured custom D3 time formats with localized month and day names (e.g., Russian), these localizations were ignored when the "Adaptive" datetime format option was selected for the x-axis in line charts and other ECharts visualizations. The formatting would revert to English month names instead of using the configured locale.

Solution

Modified getXAxisFormatter() in superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts to return the smart date formatter (which respects D3 locale settings) when SMART_DATE_ID is specified, instead of returning undefined.

Testing Instructions

  1. Configure custom D3 time format in superset_config.py with localized month/day names
  2. Create a line chart with a date-based x-axis
  3. Set the x-axis datetime format to "Adaptive"
  4. Verify that month names display in the configured locale (not English)

Test Coverage

Added comprehensive unit tests for getXAxisFormatter() to ensure:

  • Smart date formatter is returned for SMART_DATE_ID
  • Appropriate formatters are returned for other format strings
  • Undefined is returned when no format is specified

🤖 Generated with Claude Code

Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've completed my review and didn't find any issues.

Files scanned
File Path Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

@rusackas
Copy link
Member Author

rusackas commented Feb 6, 2026

PR Updated - Rebased and Review Feedback Addressed

Changes Made

  1. Rebased on master - Resolved merge conflict in package-lock.json

  2. Addressed @michael-s-molina's feedback - You're correct! The StringConstructor return type is no longer valid since no code path returns String anymore. I've:

    • Removed StringConstructor from the return type (now TimeFormatter | undefined)
    • Updated the misleading test description that mentioned "String constructor"

Current Behavior

Input Output
SMART_DATE_ID ("smart_date") Returns getSmartDateFormatter() - respects D3 locale
Other format string (e.g., "%Y-%m-%d") Returns getTimeFormatter(format) - respects D3 locale
No format / empty string Returns undefined - ECharts uses its default

This ensures that when users select "Adaptive" datetime format, the D3 locale settings (like Russian month names) are properly applied.

Summary of the Fix

The root issue was that getXAxisFormatter() was returning undefined for SMART_DATE_ID, causing ECharts to use its default (English) formatter instead of the D3 locale-aware smart date formatter. Now it correctly returns the locale-respecting formatter.

@bito-code-review
Copy link
Contributor

bito-code-review bot commented Feb 6, 2026

Code Review Agent Run #157a43

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: f0b8690..15352d3
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/utils/formatters.test.ts
  • Files skipped - 1
    • superset-frontend/package-lock.json - Reason: Filter setting
  • Tools
    • Eslint (Linter) - ✔︎ Successful
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ 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
Copy link
Member Author

rusackas commented Feb 6, 2026

Retrying CI - previous failures were in unrelated cypress tests

rusackas and others added 3 commits February 5, 2026 21:55
Fixes #31790

When the "Adaptive" datetime format option was selected for x-axis in ECharts
visualizations, the custom D3 locale settings (like localized month names) were
being ignored. This was because getXAxisFormatter() was returning undefined for
SMART_DATE_ID, causing ECharts to use its default formatter instead of the
configured D3 locale formatter.

The fix ensures that when SMART_DATE_ID is selected, the smart date formatter
with proper locale support is returned, allowing custom D3 time formats with
localized month and day names to work correctly with the adaptive option.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Address review feedback from @michael-s-molina: Since the function
no longer returns String, remove StringConstructor from the return
type and update the misleading test description.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@codeant-ai-for-open-source
Copy link
Contributor

Sequence Diagram

The PR ensures the x-axis formatter returns the smart date (D3-aware) formatter when the "Adaptive" (SMART_DATE_ID) option is selected so localized month/day names are used. The diagram shows the main success path and the alternative paths for custom or absent formats.

sequenceDiagram
    participant Viz as Visualization
    participant Util as XAxis Formatter Util
    participant TimeFmt as TimeFormatter (D3 locale-aware)
    participant ECharts

    Viz->>Util: request x-axis formatter (format = SMART_DATE_ID)
    Util->>TimeFmt: getSmartDateFormatter() (D3 locale)
    TimeFmt-->>Util: TimeFormatter (locale-aware)
    Util-->>ECharts: return TimeFormatter
    ECharts-->>Viz: render x-axis labels (localized month/day names)

    alt format is custom string
        Viz->>Util: request x-axis formatter (format = "%Y-%m-%d")
        Util->>TimeFmt: getTimeFormatter(format)
        Util-->>ECharts: return TimeFormatter
    else no format specified
        Viz->>Util: request x-axis formatter (no format)
        Util-->>ECharts: return undefined (ECharts default)
    end
Loading

Generated by CodeAnt AI

@bito-code-review
Copy link
Contributor

bito-code-review bot commented Feb 6, 2026

Code Review Agent Run #b835e5

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: 6cb9819..9d55bed
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/utils/formatters.test.ts
  • Files skipped - 0
  • Tools
    • Eslint (Linter) - ✔︎ Successful
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ 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 and others added 2 commits February 6, 2026 00:36
Update tests to reflect the intentional behavior change where smart_date
now returns a formatter function instead of undefined. The first test
now explicitly sets xAxisTimeFormat to undefined to test the no-format
case, and the test.each loop now expects all formats including smart_date
to return a formatter function.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@netlify
Copy link

netlify bot commented Feb 6, 2026

Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit 7d85b21
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/6985a8131c09cb0008a6119c
😎 Deploy Preview https://deploy-preview-34661--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@bito-code-review
Copy link
Contributor

bito-code-review bot commented Feb 6, 2026

Code Review Agent Run #b339f3

Actionable Suggestions - 0
Review Details
  • Files reviewed - 3 · Commit Range: 9d55bed..ad2a1fe
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/Scatter/transformProps.test.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/utils/formatters.test.ts
  • Files skipped - 0
  • Tools
    • Eslint (Linter) - ✔︎ Successful
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom D3 datetime formatting not showing with adaptive datetime option

2 participants