Migrate core reports (Timeseries & Histogram) to Apache ECharts - #1338
Closed
max-ostapenko wants to merge 6 commits into
Closed
max-ostapenko wants to merge 6 commits into
max-ostapenko wants to merge 6 commits into
Conversation
- 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
…ert custom xAxis formatting
…ine rendering, and enable zoom
… refined interactions Signed-off-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| import { el, prettyDate, drawMetricSummary, callOnceWhenVisible } from './utils'; | ||
| import { Constants } from './techreport/utils/constants.js'; | ||
|
|
||
| const [COLOR_DESKTOP, COLOR_MOBILE, COLOR_DESKTOP_ALT, COLOR_MOBILE_ALT] = Colors.getAll({ rgba: true }); |
| import { el, prettyDate, drawMetricSummary, callOnceWhenVisible } from './utils'; | ||
| import { Constants } from './techreport/utils/constants.js'; | ||
|
|
||
| const [COLOR_DESKTOP, COLOR_MOBILE, COLOR_DESKTOP_ALT, COLOR_MOBILE_ALT] = Colors.getAll({ rgba: true }); |
| const zoomBtns = navBar.querySelectorAll('.zoom-btn'); | ||
|
|
||
| function updateRangeDisplay(minT, maxT) { | ||
| const d1 = new Date(minT); |
|
|
||
| function updateRangeDisplay(minT, maxT) { | ||
| const d1 = new Date(minT); | ||
| const d2 = new Date(maxT); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrates core HTTP Archive reports (
timeseriesandhistogram) 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.Key Features
Timeseries Reports (
src/js/timeseries.js)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 pan on desktop, pinch-to-zoom on mobile.1m,3m,6m,YTD,1y,3y,All) with active state tracking and a live date range indicator.p50median curves.Dual-Axis Histogram (
src/js/histogram.js)%), Right = CDF Cumulative Density (%) with correct per-axis title orientation matching production.Reset zoombutton appears when zoomed. Mobile pinch-to-zoom also supported.Styling (
src/styles/report.css,src/styles/styles.css).echarts-tooltip-cardstyles preventing global table striping from bleeding into tooltips.Verification
npm run build(21 pages)npm test— 30/30 tests pass