feat: use ECharts to have faster charts#2234
Open
Ahmad-Wahid wants to merge 31 commits into
Open
Conversation
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
…ing charts Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Flix6x
reviewed
Jun 12, 2026
Member
There was a problem hiding this comment.
No code review, just observations from testing. Improvements I observe are:
- Speed
- Panning
- Zooming
- Hover effect to focus on a single trace (line)
- Heat map interactivity (select a value range to see)
Missing:
- Asset page shows misaligned x-axis on vertically concatenated subcharts (tip: try the replay on asset 77) (✅ )
- Bar chart of a year of 15-minute prices has missing data
- SVG export on large heatmaps has missing data
- No annotations visible on sensor bar chart (tip: select a time period on sensor 14 covering some Dutch public holidays) (✅ )
- SVG export should exclude buttons (✅ )
- Double click to reset
- Font size too small (✅ )
- Tooltip hover on nearest data point (this can be discussed)
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…mps, fonts) - show hover annotations on the sensor page, matching the Vega-Lite SHADE_LAYER/TEXT_LAYER (gray bands, highlight + label on hover) - use tableau10 colors and zero-based y-axis like Vega-Lite - use linear interpolation for instantaneous sensors so ramps are visible - match Poppins font and Vega-Lite font sizes - always show the legend below on the sensor page - mixed date/time x-axis labels and extra inter-subplot spacing
Contributor
Author
Let's discuss the rest of the items in a call. |
- dataZoom realtime:false + throttle:80 so a slider drag coalesces into a single redraw on release instead of one per tick (removes mid-drag jank) - large mode on line series for batched canvas drawing - measured on asset 77 (7,728 rows): initial render 134ms -> 71ms, slider drag 25 re-renders -> 1
Member
Updated list of observationsSensor page:
Asset page:
|
Export read the canvas/SVG synchronously right after setOption, but heatmaps render cells progressively across animation frames, so a year-long heatmap (>5000 cells) lost every cell past the first chunk. buildExportOption now forces progressive:0 on every series so the full chart renders in one pass. CSV is unaffected (it serializes the raw rows). Also place the SVG export icon between Reset Zoom and PNG on the sensor page only, leaving the asset-page toolbox order unchanged.
…asset-charts # Conflicts: # documentation/changelog.rst
- Native ECharts Charge Point sessions chart with companion subplots and working per-session tooltips; charge-points type switchable in fast mode - Do not render the Charge Point sessions panel in the default view - Align companion subplots on a shared time domain - Remove the always-visible range-slider zoom bar (keep wheel/drag zoom) - Move the Source line-style key to the bottom, matching Vega-Lite: a vertical column at the bottom-left with side legends, or a second column beside the Sensor legend in the legends-below layout
Drop the Arrival/Plug-in/Charging key from the sessions chart along with the now-unused buildChargePointKey helper and CHARGEPOINT_KEY_ROWS constant.
Vega uses linear interpolation for a subplot row when any of its sensors is instantaneous (event_resolution 0), and step-after otherwise. The fast chart had to guess resolution from event spacing because the chart data never carried the real event_resolution, which mislabeled instantaneous sensors as interval data (stepped lines where Vega draws smooth ones). Serialize event_resolution (seconds) through every chart-data path the UI uses: Sensor.as_dict, Sensor.search_beliefs, GenericAsset.search_beliefs, and the fixed-value flex-sensor metadata in GenericAsset.chart_data_json. Carry it through decompressChartData, then decide interpolation per subplot in fast-chart.js exactly as chart_for_multiple_sensors does, with a spacing-based fallback for legacy data.
Use axis-trigger tooltips on the line/bar charts so hovering anywhere over a subplot reveals the nearest data point (the ruler), as in the Vega-Lite charts, instead of requiring a direct hit on the thin line. The formatter picks the single point nearest to the ruler and shows its details, scoped to the hovered subplot.
Each subplot's time axis auto-scaled to its own data extent, so subplots whose data spans a wider range (e.g. Site capacity's capacity sensors) rendered at a different horizontal scale than the rest, most visibly misaligning the replay ruler. Compute one shared time domain from the union of all subplots' data and apply it to every time axis, mirroring Vega-Lite's resolve.scale.x = shared.
Documentation build overview
|
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
This reverts commit 130ba83.
Contributor
Author
@Flix6x I have already worked on this point but I'm not sure if it works as you expect. Could you please look into it? |
Signed-off-by: Ahmad-Wahid <ahmedwahid16101@gmail.com>
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
3 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.
Description
Adds an optional Fast chart mode (Apache ECharts, canvas-based) alongside the existing Vega-Lite charts. A toggle in the chart header switches between them, and the choice is remembered per browser. The fast chart renders and interacts far faster on dense time series while staying visually and functionally equivalent to the Vega-Lite charts.
What's included
Canvas rendering with mouse-wheel zoom, drag-to-pan, and a shared ruler + nearest-point tooltip synced across subplots
Parity with Vega-Lite: subplot layout, colors, legends (including the Source line-style key), titles/axes/fonts, annotations, replay, and step-vs-linear interpolation based on each sensor's resolution
All chart types: line, bar, histogram, heatmap, and charge-point sessions
PNG / SVG / CSV export
Added changelog item in
documentation/changelog.rstLook & Feel
Vega-Lite:
ECharts:
EChart will show the legends of those sensors that has data. Although, they are not dropped from the
sensors_to_showlist.How to test
Switch between Vega-Lite and ECharts using this toogle button.
Further Improvements
Related Items