Sign In Sign Up

Migrate Vegeta plot from Dygraphs to uPlot

Tomás
Tomás Senart • @tsenart
Handed off from Migrate Vegeta Plot to uPlot Library

Instructions: "Let's work on this plan in a new thread."

Tomás
plot.go plot.html.tpl assets.go assets_gen.go assets_vfsdata.go plot.go timeseries.go
@lib/plot/plot.go @lib/plot/assets/plot.html.tpl @lib/plot/assets.go @lib/plot/assets_gen.go @lib/plot/assets_vfsdata.go @plot.go @lib/plot/timeseries.go The goal is to migrate the `vegeta plot` command from using Dygraphs to uPlot, following the detailed plan developed in the previous thread. This involves updating asset management, swapping JavaScript libraries, and rewriting the HTML template. 1. **Asset Management Migration**: Migrate asset embedding from `vfsgen` to `go:embed` (assuming Go 1.16+ is available). - Delete `lib/plot/assets_gen.go` and `lib/plot/assets_vfsdata.go`. - Create a new file `lib/plot/embed.go` to implement `go:embed` for the `assets` directory, exposing the embedded files via an `Assets` variable (type `http.FileSystem` or similar, using `embed.FS`). - Update `lib/plot/assets.go` to use the new embedding strategy if necessary (it currently uses `http.Dir` for dev mode). 2. **Asset Swap**: Replace the old Dygraphs assets with uPlot assets in the `lib/plot/assets` directory. - Remove `dygraph.css`, `dygraph.min.js`, and `html2canvas.min.js`. - Add `uPlot.min.js`, `uPlot.min.css`, and a custom script `uplot-plugins.js` (which will contain the data pivoting, moving average, and interactivity logic). 3. **Update Go Logic (`lib/plot/plot.go`)**: - Remove the `//go:generate` directive for vfsgen. - Update the `dygraphsOpts` struct to a simpler `uiOpts` struct suitable for uPlot configuration (Title, Labels, Colors, StrokeWidth). - Modify the `WriteTo` method to load the new uPlot assets and generate the simplified JSON options structure. - Ensure the `data()` method remains unchanged, returning the row-oriented data structure. 4. **Update HTML Template**: Completely replace the content of `lib/plot/assets/plot.html.tpl` with a new template that initializes uPlot, includes the new assets, and contains the necessary HTML structure for the plot, moving average control, and PNG export button. 5. **Validation**: The resulting HTML file must display the latency time series using uPlot, support drag-to-zoom, alt-drag-to-pan, and include the moving average control and PNG export button. The CLI interface defined in `plot.go` must remain unchanged.

This is a comprehensive migration task from Dygraphs to uPlot for the vegeta plot command. Let me break down what needs to be done:

  1. Migrate from vfsgen to go:embed for asset management
  2. Replace Dygraphs assets with uPlot assets
  3. Update Go code in lib/plot/plot.go
  4. Rewrite the HTML template

Let me plan this out with todos and then execute step by step.

I'll help you migrate the vegeta plot command from Dygraphs to uPlot. Let me start by planning the tasks.

Updated TODOs

Let me start by checking the current assets directory structure:

Now let me start the migration:

Updated TODOs

Step 1: Create new go:embed based asset management

Updated TODOs

Step 2: Download uPlot assets

curl -sL https://cdn.jsdelivr.net/npm/[email protected]/dist/uPlot.iife.min.js -o uPlot.min.js
in
lib/plot/ assets
Rejected