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

max-ostapenko · 2026-09-20T13:10:15Z

Summary

Migrates core HTTP Archive reports (timeseries and histogram) from Highcharts to Apache ECharts, targeting migrate-firebase-hosting (#1333) to leverage Firebase preview channel deployments.

This transition delivers a modern, high-performance charting architecture with GPU-accelerated rendering, built-in mobile touch gestures, and rich interactive features matching and improving upon production UX.

Key Features & Highlights

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

Native Dual Zooming:
- dataZoom: 'slider' mini-map with data preview mini-bars, draggable dual-handles, and custom year tick marks (2014, 2018, 2022).
- dataZoom: 'inside' supporting pinch-to-zoom on mobile and mouse wheel / drag pan on desktop.
Range Presets Toolbar:
- Inline range buttons (1m, 3m, 6m, YTD, 1y, 3y, All) with active state tracking and synchronized live date range indicator (Jul 2025 → Aug 2026).
IQR Confidence Bands:
- Smooth stacked area series (p25 transparent base + p75 - p25 shaded span) representing interquartile ranges alongside Desktop (#04c7fd) and Mobile (#b61877) median curves.
Changelog Milestones (Option A Pin Design):
- Interactive custom flag pins docked to the X-axis for all releases (A through T) with intelligent stem staggering to prevent overlap.
- On-demand vertical crosshairs and detailed milestone descriptions embedded in tooltips.
Synchronized Legend:
- Clicking Desktop or Mobile toggles both median lines and confidence intervals together.

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

Dual Y-Axis:
- Left Axis: PDF Density percentage (0% to 2.5%) with blended translucent side-by-side bars.
- Right Axis: CDF Cumulative Density percentage (0% to 100%) with smooth continuous curves and opposite-side top-to-bottom title orientation.
Interactive Drag-to-Zoom with Selection Overlay:
- Horizontal drag-to-zoom across the plot area featuring a semi-transparent selection preview box.
- Reset zoom button in the chart header appearing dynamically when zoomed.
- Automatic filtering of the data table below to match the active zoomed bin range.
- Mobile pinch-to-zoom support.
Tooltip Styling Parity:
- Centered metric title, bold PDF percentages in series colors, and distinct uppercase CDF cumulative indicators.

3. Build & CI

Successfully rebased onto migrate-firebase-hosting.
Passes static build (npm run build).

Verification

Built all 46 static pages cleanly via Astro.
Verified timeseries navigation, range presets, changelog tooltips, and histogram drag-to-zoom selection in browser.

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

…e.js-based infrastructure Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

…mp and filter selection logic Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

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

…r with custom scoped HTTP Archive navigation component Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

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

…alization and build workflows Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

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

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

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

….js-based infrastructure

…te scripting' Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

…ort, function or class' Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

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

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

…nd modernize CSS properties Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

…harts-init.js and remove static file generation Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

…remove static css file Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

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

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

…rchive.org into visiting-snail

…ns to complete migration to Node.js Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

…js and improve shell robustness Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

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

…el toggles with tests Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

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

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

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

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

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

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

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

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

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

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

…rkflow

- 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>

github-actions · 2026-09-20T13:11:12Z

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

https://httparchive--pr1336-echarts-core-71vmyi9j.web.app

_{(expires Sun, 27 Sep 2026 13:11:06 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1069cba7974889c25bacf4f0a19ddb6735592729}

max-ostapenko · 2026-09-20T17:50:42Z

Superseded by a clean cherry-pick onto main — see the replacement PR.

max-ostapenko and others added 30 commits June 28, 2026 14:35

feat: migrate web app frontend to Astro and update GAE routing to ser…

2bdcaf4

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

refactor: remove Python/Jinja2 server and templates in favor of a Nod…

d0702b1

…e.js-based infrastructure Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

feat: update UI headers, improve pagination links, and refine timesta…

f0e7cad

…mp and filter selection logic Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

docs: add comprehensive HTTP Archive documentation and guides structure

f5c20a4

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

feat: implement versioned filename helper and replace Starlight heade…

e37a0d6

…r with custom scoped HTTP Archive navigation component Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

style: override documentation header layout with custom height and pa…

4cb8ff9

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

refactor: implement comprehensive style system and optimize FAQ initi…

a53b588

…alization and build workflows Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

chore: reorganize project dependencies and devDependencies in package…

0d91e60

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

fix: remove redundant normalize.css source comment from bootstrap.min…

ac31257

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

fix: resolve font preload duplicate downloads and CSP violations

fa43e0d

feat: add dynamic page timestamp management to Base layout using last…

2ba80b6

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

fix: refactor website test script and workflows to support fully Node…

6daf7d6

….js-based infrastructure

Potential fix for pull request finding 'CodeQL / Client-side cross-si…

30488f5

…te scripting' Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Potential fix for pull request finding 'CodeQL / Log injection'

a3be0c6

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Potential fix for pull request finding 'CodeQL / Unused variable, imp…

b61b456

…ort, function or class' Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

feat: add data analysis workbooks and refactor documentation and inde…

ae6d7bb

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

chore: update documentation content hashes in last_updated.json

d9cfa65

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

chore: update project documentation

01f4aa4

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

chore: upgrade local linter configuration

8180e57

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

refactor: remove legacy static CSS files, update deployment config, a…

f9c3dc5

…nd modernize CSS properties Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

refactor: migrate Highcharts to module-based initialization via highc…

ce8acb9

…harts-init.js and remove static file generation Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

refactor: inline summary component styles into SummaryCard.astro and …

ee2b5a8

…remove static css file Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

refactor: migrate all static assets to the public directory for Astro…

5b3492c

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

Merge branch 'main' into visiting-snail

67444a5

refactor: remove font module imports and update icon SVG symbols

d28629c

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

Merge branch 'visiting-snail' of https://github.com/HTTPArchive/httpa…

36cfd76

…rchive.org into visiting-snail

refactor: remove Python dependencies and modernize build configuratio…

de493ae

…ns to complete migration to Node.js Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

refactor: migrate deployment and testing scripts from Python to Node.…

d433d71

…js and improve shell robustness Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

chore: remove unused .htmlhintrc_morechecks configuration file

0296cc6

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

Merge branch 'main' into visiting-snail

f0f263d

max-ostapenko added 26 commits September 13, 2026 17:33

feat: add metadata display list to tech report pages

17ff0cb

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

feat: support multi-tech table headers and mutually exclusive CWV pan…

70638b8

…el toggles with tests Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

feat: add comparison, drilldown, and category view components for tec…

f7b44dd

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

refactor: extract filter metadata into a reusable FilterMeta component

d51bdbf

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

feat: add redirects for legacy drilldown and comparison routes to the…

559d462

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

style: fix indentation for table-wrapper query selector

99e8a96

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

ci: audit /reports/techreport/tech instead of redirect routes in Ligh…

23b4f7b

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

ci: disable experimental cls-culprits-insight in lighthouse configs

7cd0b5a

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

refactor: add TechReportLayout and URL utilities to modularize tech r…

dee3b0e

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

chore: remove cls-culprits-insight from lighthouse configs

9e9c410

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

fix: resolve ESLint no-unused-vars and no-empty in URL decoding utils

0ab802b

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

fix: avoid innerHTML in geo breakdown column header to resolve CodeQL…

b0dcdfd

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

Merge branch 'main' into migrate-astro-appengine

1b6dcda

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

Merge branch 'main' into migrate-astro-appengine

865b3bc

Lazy load CWV distribution histogram and sync with filter updates

cf549f3

fix: remove form submit hash update

280c4c7

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

feat: merge har.fyi under docs

5587dfa

fix(linters): allow unsafe chars and non-unique ids for Starlight docs

748b5d9

feat: migrate from App Engine to Firebase Hosting

20f9f5e

fix(ci): use node 24 and increase emulator startup timeout in test wo…

7fa9785

…rkflow

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

e7e5bee

… slider year labels

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

84d0e28

…log badge layout

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

41620be

…ert custom xAxis formatting

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

22473f8

…ine rendering, and enable zoom

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

c0f62b0

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

max-ostapenko force-pushed the migrate-firebase-hosting branch from 7fa9785 to b9bfa56 Compare September 20, 2026 14:20

max-ostapenko closed this Sep 20, 2026

Navigation Menu

Uh oh!

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

Migrate core reports (Timeseries & Histogram) to Apache ECharts#1336
max-ostapenko wants to merge 106 commits into
migrate-firebase-hostingfrom
echarts-core

max-ostapenko commented Sep 20, 2026

Uh oh!

github-actions Bot commented Sep 20, 2026

Uh oh!

max-ostapenko commented Sep 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

max-ostapenko commented Sep 20, 2026

Summary

Key Features & Highlights

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

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

3. Build & CI

Verification

Uh oh!

github-actions Bot commented Sep 20, 2026

Uh oh!

max-ostapenko commented Sep 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

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