Skip to content

fix(echarts): place weekly time-axis ticks on the data buckets - #43339

Open
EnxDev wants to merge 6 commits into
masterfrom
enxdev/fix/echarts
Open

fix(echarts): place weekly time-axis ticks on the data buckets#43339
EnxDev wants to merge 6 commits into
masterfrom
enxdev/fix/echarts

Conversation

@EnxDev

@EnxDev EnxDev commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

SUMMARY

ECharts' time axis builds its ticks from a built-in calendar ladder (year → month → day → hour …). That ladder has no week unit, so for weekly data it falls back to stepping N days from the 1st of each month and re-anchoring at every month boundary.
The plotted points stay on the real week starts while the labels drift across weekdays and snap to month starts — with Monday buckets at 04-06 04-13 04-20 … the axis renders 04-08 04-15 04-22 … 05-01 06-01. The query result and the Results pane are correct; only the axis is wrong.

Two things worth calling out, both measured rather than assumed:

  • minInterval/maxInterval cannot fix this. TIMEGRAIN_TO_TIMESTAMP has no weekly entry, and adding one changes nothing — those options bound how far apart ticks sit, not which instants they land on. Tick positions come out byte-identical with and without a one-week minInterval.
  • It is specific to weekly grains. Day, month and quarter grains already land on their data points (zero drifting ticks). Weekly grains drift on nearly every tick: 7 of 12 labels for Monday-aligned data, and 11 of 11 when the week starts on a Thursday.

The fix is therefore scoped to the five weekly grains. getTemporalTickValues() returns the sorted, de-duplicated bucket timestamps, and the axis pins axisLabel, axisTick and splitLine to them via ECharts' customValues (available since 5.5; we are on 6.1). Grains ECharts already places correctly keep their calendar-nice labels, so this is not a blanket change to every temporal axis.

hideOverlap still thins labels on wide ranges — 2000 candidate ticks render as 19 labels — so dense weekly charts stay readable and every label that survives is a real bucket.

This also removes the reason to reach for the string/categorical-axis workaround, which silently disables Time Comparison: the axis stays a time axis, so time-shift keeps working.

Applies to Line, Bar, Area, Step, Smooth Line and Scatter (shared Timeseries/transformProps) and to Mixed Timeseries, where both queries contribute buckets. Gantt's time axis is deliberately left alone — it plots durations, not buckets.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

comparison.mp4

TESTING INSTRUCTIONS

  1. Explore → a dataset with a temporal column and daily-or-finer rows (e.g.
    cleaned_sales_data).
  2. Line Chart; X-axis = the temporal column; Time Grain = Week; any metric.
  3. Set a time range covering roughly 13 weeks.
  4. Customize → X Axis → Time format %m-%d.
  5. Compare the x-axis labels against the dates in the Results pane — every label should
    be one of them. On master, several are not, and some snap to month starts.
  6. Switch Time Grain to Day / Month / Quarter and confirm the labels are unchanged from
    master.
  7. Add a Time Comparison (e.g. 1 year ago) and confirm it still renders — previously
    the only way to get correct weekly labels was a categorical axis, which disables it.
  8. Repeat on a Bar Chart and on Mixed Timeseries.

Unit tests: npm run test -- plugins/plugin-chart-echarts (923 tests, 13 new).

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@dosubot dosubot Bot added explore:time Related to the time filters in Explore viz:charts:echarts Related to Echarts labels Aug 19, 2026
Comment thread superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts Outdated

@bito-code-review bito-code-review Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review Agent Run #0a3425

Actionable Suggestions - 1
  • superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts - 1
Additional Suggestions - 1
  • superset-frontend/plugins/plugin-chart-echarts/src/constants.ts - 1
    • Missing test coverage for new constant · Line 94-100
      The new constant has no test coverage. Other code paths that reference the same five weekly granularities (e.g., `formatters.ts:80-84`) could drift from this definition over time. Add a unit test for `WEEKLY_TIME_GRAINS` to lock in the expected values and catch future divergences.
Review Details
  • Files reviewed - 6 · Commit Range: 296ab06..296ab06
    • superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/constants.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/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

Comment thread superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
@codecov

codecov Bot commented Aug 19, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 98.11321% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 57.40%. Comparing base (d480152) to head (e61295d).

Files with missing lines Patch % Lines
...hart-echarts/src/MixedTimeseries/transformProps.ts 92.30% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master   #43339      +/-   ##
==========================================
+ Coverage   57.39%   57.40%   +0.01%     
==========================================
  Files        2877     2877              
  Lines      165232   165279      +47     
  Branches    38184    38213      +29     
==========================================
+ Hits        94836    94884      +48     
+ Misses      69501    69500       -1     
  Partials      895      895              
Flag Coverage Δ
javascript 74.34% <98.11%> (+0.01%) ⬆️

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

☔ View full report in Codecov by Harness.
📢 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

bito-code-review Bot commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

Code Review Agent Run #9d5b33

Actionable Suggestions - 0
Additional Suggestions - 1
  • superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts - 1
    • hideOverlap behavior change on rotated time axis · Line 791-793
      The `hideOverlap` expression now evaluates to `true` for pinned ticks on rotated time axes instead of `false` as before. This aligns with the comment (pinned ticks crowd labels, so thinning stays on), but differs from the prior logic. Verify this is the intended rendering change, or whether the expression should be `!!temporalTickValues && !(xAxisType === AxisType.Time && xAxisLabelRotation !== 0)` to preserve the old rotation-suppression behavior for pinned ticks.
Review Details
  • Files reviewed - 4 · Commit Range: 296ab06..4d30f6f
    • superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✖︎ Failed

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

EnxDev and others added 2 commits August 24, 2026 17:00
# Conflicts:
#	superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
#	superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
#	superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

@msyavuz msyavuz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Checked DST, the non-weekly grains, forceMaxInterval, time-shift and the bar variants — those all hold up. Three questions on the edges.

// A timeseries annotation contributes its own timestamps and widens the axis
// past the buckets, and ECharts clips pinned ticks to the extent, so that
// span would render bare — leave those charts on ECharts' own ticks.
const hasTimeseriesAnnotation = annotationLayers.some(

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Any shown timeseries annotation disables pinning, even one whose records sit entirely inside the bucket range and widen nothing — worth comparing its extent to the buckets instead of gating on layer type?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

reasonable idea but nontrivial scope; current behavior is safely conservative

// by ECharts' overlap detection (#39899). Pinned ticks label
// every bucket, which does crowd, so thinning always wins there.
hideOverlap:
!!temporalTickValues ||

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

hideOverlap is forced on for weekly here but showMaxLabel: true is still emitted below — does that reopen #39899 for weekly grains, given hideOverlap only drops the max label's immediate neighbour?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Real risk, confirmed via ECharts' AxisBuilder internals (only the immediate neighbor is shielded). Fixed by skipping the showMaxLabel override when ticks are pinned

value instanceof Date
? value.getTime()
: typeof value === 'string'
? new Date(value).getTime()

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

new Date(value) parses a zone-less bucket string as UTC while echarts' parseDate treats it as local, so at UTC+2 the point sits at 04-05T22:00Z and the pinned tick at 04-06T00:00Z — does that offset the tick and clip the boundary one? The new test uses .toISOString(), so it wouldn't catch this.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Real bug, confirmed against ECharts source. Fixed with parseTemporalString()

@EnxDev
EnxDev requested a review from msyavuz August 25, 2026 09:54
@bito-code-review

bito-code-review Bot commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

Code Review Agent Run #5ce1a8

Actionable Suggestions - 0
Review Details
  • Files reviewed - 6 · Commit Range: 4d30f6f..e61295d
    • superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/utils/series.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 an incremental AI Review.

  • /review full - 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

Labels

explore:time Related to the time filters in Explore plugins size/XL viz:charts:echarts Related to Echarts

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants