dotnet / aspire

An opinionated, cloud ready stack for building observable, production ready, distributed applications in .NET
https://learn.microsoft.com/dotnet/aspire
MIT License
3.78k stars 440 forks source link

Improve performance of metric chart updates #5288

Open drewnoakes opened 2 months ago

drewnoakes commented 2 months ago

We have a timer that fires every 200ms. On each tick it gathers the full series of data for the chart, creates buffers for it, marshals it across to JS, then calls Plotly.update.

This causes high CPU, and causes chart updates to be a little jerky.

For dashpages, where we will show many charts on screen at once, this overhead becomes multiplied.

Instead, we should use Plotly.extend to append new data items, only when they exist, and in only on the JS side should we have an animation loop that calls Plotly.relayout with updated y-axis coordinates.

With this we avoid many invocations from Blazor to JS, cutting CPU. We can then likely increase the rate of updates for the chart from 5fps to 30fps or even 60fps, making the animation very smooth.

drewnoakes commented 1 month ago

Will wait for dashpages work to merge before tackling this, as dashpages make a lot of changes around charting.