Migrate core reports (Timeseries & Histogram) to Apache ECharts by max-ostapenko · Pull Request #1339 · HTTPArchive/httparchive.org

max-ostapenko · 2026-09-20T17:57:23Z

Summary

Migrates core HTTP Archive reports (timeseries and histogram) from Highcharts to Apache ECharts (~62k GitHub stars), a modern high-performance charting library with GPU-accelerated rendering, native mobile touch gestures, and rich interactivity out of the box.

An alternative library to #963

Key Features

Timeseries Reports (`src/js/timeseries.js`)

Native Zoom & Pan:
- dataZoom: 'slider' mini-map with data preview, draggable dual-handles, and custom year labels (2014, 2018, 2022) injected over the slider track.
- dataZoom: 'inside' — mouse wheel zoom + drag selection zoom with visual overlay, while the slider mini-map handles panning on desktop; pinch-to-zoom on mobile.
Range Presets Toolbar: Inline buttons (1m, 3m, 6m, YTD, 1y, 3y, All) with active state tracking and a live date range indicator.
IQR Confidence Bands: Stacked area series for Desktop/Mobile interquartile ranges alongside smooth p50 median curves.
Changelog Milestones (Option A Pin Design):
- Interactive flag pins docked to the X-axis for all releases (A–T) with intelligent stem staggering to prevent overlap.
- On-demand vertical crosshair + milestone details embedded in the tooltip.
Synchronized Legend: Toggling Desktop/Mobile also hides/shows the corresponding confidence band.

Dual-Axis Histogram (`src/js/histogram.js`)

Dual Y-Axis: Left = PDF Density (%), Right = CDF Cumulative Density (%) with correct per-axis title orientation matching production.
Drag-to-Zoom with Selection Overlay: Semi-transparent selection preview box while dragging; table below auto-filters to zoomed bin range; Reset zoom button appears when zoomed. Mobile pinch-to-zoom also supported.
Tooltip Parity: Centered metric title, bold PDF percentages in series colors, distinct uppercase CDF subheader.

Styling (`src/styles/report.css`, `src/styles/styles.css`)

Scoped .echarts-tooltip-card styles preventing global table striping from bleeding into tooltips.
Button scoping ensures zoom range buttons stay compact on mobile.

- Migrate Timeseries and Histogram reports from Highcharts to Apache ECharts - Implement native dataZoom slider (mini-map with data preview, handles, ticks) and inside zoom/pan - Support IQR confidence bands via stacked area series and median line series - Add inline range presets (1m, 3m, 6m, YTD, 1y, 3y, All) with active button styling and live date range indicators - Implement dual Y-axis histogram with PDF density bars on left and CDF cumulative curve on right - Add interactive crosshair tooltips with formatted date, Desktop/Mobile comparative metrics, and Changelog badges - Add custom card header with source link and export context menu (PNG, SVG, SQL query) - Scope section buttons in styles.css to ensure responsive mobile layout - Pass all 30 automated integration and runtime error tests

… slider year labels

…log badge layout

…ert custom xAxis formatting

…ine rendering, and enable zoom

… refined interactions Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

…eration

github-actions · 2026-09-20T19:41:26Z

Visit the preview URL for this PR (updated for commit 85f584a):

https://httparchive--pr1339-echarts-core-e889rv1t.web.app

_{(expires Sun, 27 Sep 2026 21:29:45 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1069cba7974889c25bacf4f0a19ddb6735592729}

Copilot

Copilot review overview

🟡 Changes recommended

Table rendering, benchmark integration, query links, and zoom synchronization contain functional regressions.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 2 · 7

Open (9)

Histogram table IDs do not match rendered markup · New
Default table keys do not match timeseries row fields · New
Histogram BigQuery links use a nonexistent path · New
Pinch zoom does not synchronize table filtering · New
Benchmark chart controller is discarded · New
Timeseries BigQuery links point to nonexistent legacy path · New
Timeseries tooltips omit metric units · New
Chart controller is not registered globally · New
Date grouping breaks table filtering and ordering · New

What changed in this PR

Migrates core timeseries and histogram reports from Highcharts to Apache ECharts.

Changes:

Adds ECharts charts with zooming, tooltips, exports, legends, and milestones.
Introduces responsive chart styling and report-page integration.
Adds ECharts dependencies and adjusts Lighthouse URL handling.

File	Description
`src/js/timeseries.js`	Implements ECharts timeseries reports.
`src/js/histogram.js`	Implements ECharts histogram reports.
`src/styles/report.css`	Adds chart component styling.
`src/styles/styles.css`	Excludes chart buttons from global mobile styling.
`src/pages/reports/[report_id].astro`	Integrates visualization rendering.
`tools/scripts/set_lighthouse_urls.sh`	Excludes dynamic route filenames.
`package.json`	Adds ECharts dependency.
`package-lock.json`	Locks ECharts dependencies.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

…p units, and query URLs

…ore standard table row layout

Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Copilot

Copilot review overview

🟡 Changes recommended

Zoom synchronization, CDF rendering, interaction parity, and chart accessibility have unresolved regressions.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 5

Open (5)

Avoid zero-filling missing desktop CDF bins · New
Restore accessibility and keyboard interaction for histogram chart · New
Restore accessibility and keyboard interaction for timeseries chart · New
Enable desktop drag-to-pan without consuming selection drags · New
Listen for lowercase ECharts datazoom events · New

Resolved since last review (9)

Default table keys do not match timeseries row fields
Histogram table IDs do not match rendered markup
Date grouping breaks table filtering and ordering
Chart controller is not registered globally
Timeseries tooltips omit metric units
Timeseries BigQuery links point to nonexistent legacy path
Benchmark chart controller is discarded
Pinch zoom does not synchronize table filtering
Histogram BigQuery links use a nonexistent path

… enable chart ARIA Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Copilot

Copilot review overview

🟡 Changes recommended

Keyboard accessibility regressions, continuous table rebuilding during zoom, and incorrect YTD state tracking remain unresolved.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 2

Open (2)

Debounce histogram table rebuilds during continuous datazoom events · New
Preserve YTD active state during datazoom synchronization · New

Resolved since last review (5)

Listen for lowercase ECharts datazoom events
Enable desktop drag-to-pan without consuming selection drags
Restore accessibility and keyboard interaction for timeseries chart
Restore accessibility and keyboard interaction for histogram chart
Avoid zero-filling missing desktop CDF bins

+          minVal = xMin + (span * dz.start) / 100;
+          maxVal = xMin + (span * dz.end) / 100;
+        }
+        drawHistogramTable(rawData, `${options.metric}-table`, options.type, [minVal, maxVal]);


+    const tolerance = 0.15;
+    if (span >= totalSpan * (1 - tolerance)) {
+      navBar.querySelector('[data-range="All"]')?.classList.add('active');
+    } else if (Math.abs(span - 3 * yearMs) / (3 * yearMs) < tolerance) {
+      navBar.querySelector('[data-range="3y"]')?.classList.add('active');
+    } else if (Math.abs(span - yearMs) / yearMs < tolerance) {
+      navBar.querySelector('[data-range="1y"]')?.classList.add('active');
+    } else if (Math.abs(span - 6 * monthMs) / (6 * monthMs) < tolerance) {
+      navBar.querySelector('[data-range="6m"]')?.classList.add('active');
+    } else if (Math.abs(span - 3 * monthMs) / (3 * monthMs) < tolerance) {
+      navBar.querySelector('[data-range="3m"]')?.classList.add('active');
+    } else if (Math.abs(span - monthMs) / monthMs < tolerance) {
+      navBar.querySelector('[data-range="1m"]')?.classList.add('active');
+    }


max-ostapenko changed the title ~~Echarts core~~ Migrate core reports (Timeseries & Histogram) to Apache ECharts Sep 20, 2026

max-ostapenko added 8 commits September 20, 2026 21:38

fix(timeseries): resolve changelog tooltip lookup, y-axis titles, and…

6e2b9a8

… slider year labels

fix(timeseries): fix tooltip background, x-axis min label, and change…

93198ff

…log badge layout

feat(timeseries): implement Option A on-demand milestone pins and rev…

9ba6408

…ert custom xAxis formatting

fix(histogram): match tooltip styles, y-axis title direction, solid l…

e24f4a5

…ine rendering, and enable zoom

feat: improve histogram chart zoom selection with visual feedback and…

5b81416

… refined interactions Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

fix(lint): remove unused vars and fix CSS stylelint errors

8f0b916

fix(ci): filter out dynamic [report_id].astro from Lighthouse URL gen…

8e477f8

…eration

max-ostapenko force-pushed the echarts-core branch from 36a8033 to 8e477f8 Compare September 20, 2026 19:40

fix(timeseries): position chart menu in top-right corner of card header

8c295d3

max-ostapenko requested a balanced review from Copilot September 20, 2026 19:56

Copilot started reviewing on behalf of max-ostapenko September 20, 2026 19:56 View session

max-ostapenko requested a review from tunetheweb September 20, 2026 19:58

Copilot AI reviewed Sep 20, 2026

View reviewed changes

max-ostapenko added 4 commits September 20, 2026 22:37

fix: address PR review feedback on table rendering, zoom sync, toolti…

ed141de

…p units, and query URLs

fix(timeseries): prevent date string corruption in toNumeric and rest…

f2ae8ac

…ore standard table row layout

feat: add drag selection zoom to timeseries and update query search url

a865dc7

Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Merge branch 'main' into echarts-core

2a0133b

max-ostapenko requested a balanced review from Copilot September 20, 2026 21:08

Copilot started reviewing on behalf of max-ostapenko September 20, 2026 21:09 View session

Copilot AI reviewed Sep 20, 2026

View reviewed changes

Comment thread src/js/histogram.js Outdated

Comment thread src/js/histogram.js

Comment thread src/js/timeseries.js

Comment thread src/js/timeseries.js

Comment thread src/js/timeseries.js Outdated

max-ostapenko added 2 commits September 20, 2026 23:24

fix: preserve non-decreasing CDF lines, lowercase datazoom event, and…

968c5d2

… enable chart ARIA Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Merge branch 'main' into echarts-core

85f584a

max-ostapenko requested a balanced review from Copilot September 20, 2026 21:26

Copilot started reviewing on behalf of max-ostapenko September 20, 2026 21:27 View session

Copilot AI reviewed Sep 20, 2026

View reviewed changes

Navigation Menu

Uh oh!

Migrate core reports (Timeseries & Histogram) to Apache ECharts - #1339

Migrate core reports (Timeseries & Histogram) to Apache ECharts#1339
max-ostapenko wants to merge 15 commits into
mainfrom
echarts-core

max-ostapenko commented Sep 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

max-ostapenko commented Sep 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Features

Timeseries Reports (src/js/timeseries.js)

Dual-Axis Histogram (src/js/histogram.js)

Styling (src/styles/report.css, src/styles/styles.css)

Uh oh!

github-actions Bot commented Sep 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

max-ostapenko commented Sep 20, 2026 •

edited

Loading

Timeseries Reports (`src/js/timeseries.js`)

Dual-Axis Histogram (`src/js/histogram.js`)

Styling (`src/styles/report.css`, `src/styles/styles.css`)

github-actions Bot commented Sep 20, 2026 •

edited

Loading