Control graph with metric list

scripts/graph.ts

@@ -1,43 +1,102 @@
 import uPlot from "./uPlot.js";
 
+// https://sashamaps.net/docs/resources/20-colors/
+// Related: https://en.wikipedia.org/wiki/Help:Distinguishable_colors
+const COLORS = [
+    "#e6194B", // Red
+    "#3cb44b", // Green
+    "#ffe119", // Yellow
+    "#4363d8", // Blue
+    "#f58231", // Orange
+    // "#911eb4", // Purple
+    "#42d4f4", // Cyan
+    "#f032e6", // Magenta
+    // "#bfef45", // Lime
+    "#fabed4", // Pink
+    "#469990", // Teal
+    "#dcbeff", // Lavender
+    "#9A6324", // Brown
+    "#fffac8", // Beige
+    "#800000", // Maroon
+    "#aaffc3", // Mint
+    // "#808000", // Olive
+    "#ffd8b1", // Apricot
+    "#000075", // Navy
+    "#a9a9a9", // Grey
+    // "#ffffff", // White
+    "#000000", // Black
+];
+
 interface GraphData {
     hashes: string[];
     times: number[];
     measurements: { [key: string]: (number | null)[]; };
 }
 
-let opts = {
+function update_plot_with_data(data: GraphData) {
-    title: "HEHE",
+    let series: uPlot.Series[] = [{}];
+    let values: uPlot.AlignedData = [data.times];
+
+    for (const [i, metric] of Object.keys(data.measurements).sort().entries()) {
+        series.push({
+            label: metric,
+            spanGaps: true,
+            stroke: COLORS[i % COLORS.length],
+        });
+        values.push(data.measurements[metric]!);
+    }
+
+    const opts: uPlot.Options = {
+        title: "Measurements",
         width: 600,
         height: 400,
-    series: [
+        series,
-        {},
+    };
-        {
+
-            label: "wall-clock/build",
+    plot?.destroy();
-            spanGaps: true,
+    plot = new uPlot(opts, values, plot_div);
-            stroke: "blue",
+}
-            width: 1,
+
+async function update_plot_with_metrics(metrics: string[]) {
+    const url = "data?" + new URLSearchParams(metrics.map(m => ["metric", m]));
+    const response = await fetch(url);
+    const data: GraphData = await response.json();
+    update_plot_with_data(data);
+}
+
+function find_selected_metrics(): string[] {
+    const inputs = metrics_div.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
+
+    let metrics: string[] = [];
+    for (const input of inputs) {
+        if (input.checked) {
+            metrics.push(input.name);
         }
-    ],
+    }
+    return metrics;
 };
 
-let plot = new uPlot(opts, [], document.body);
+async function update_plot() {
-
+    const metrics = find_selected_metrics();
-fetch("data?metric=wall-clock/build")
+    if (metrics.length > 0) {
-    .then(r => r.json() as Promise<GraphData>)
+        await update_plot_with_metrics(metrics);
-    .then(data => {
+    } else {
-        console.log(data);
+        update_plot_with_data({
-        plot.setData([
+            hashes: [],
-            data.times,
+            times: [],
-            data.measurements["wall-clock/build"]!,
+            measurements: {},
-        ]);
         });
+    }
+}
 
-// function display(metrics: string[]) {
+// Initialization
-//     let url = "data" + new URLSearchParams(metrics.map(m => ["metric", m]));
-//     fetch(url)
-//         .then(r => r.json() as Promise<GraphData>)
-//         .then(data => {
 
-//         })
+const plot_div = document.getElementById("plot")!;
-// }
+const metrics_div = document.getElementById("metrics")!;
+let plot: uPlot | null = null;
+
+for (const input of metrics_div.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')) {
+    input.addEventListener("change", update_plot);
+}
+
+update_plot();

templates/pages/graph.html

@@ -33,6 +33,8 @@
 
 <div id="plot"></div>
 
-{{ metrics|safe }}
+<div id="metrics">
+    {{ metrics|safe }}
+</div>
 
 {% endblock %}