use bar charts for each rule

lambrospetrou · Oct 12, 2024 · 5f6a692 · 5f6a692
1 parent 24542a0
commit 5f6a692
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 36 deletions.
diff --git a/src/client/dash-stats.js b/src/client/dash-stats.js
@@ -1,37 +1,44 @@
 /** @jsx h */
 /** @jsxFrag Fragment */
-import {h, Fragment} from 'preact';
-import {useEffect, useRef, useState} from 'preact/hooks';
+import { h, Fragment } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import register from "preact-custom-element";
 
 import * as Plot from "@observablehq/plot";
-// import * as d3 from "d3";
 
-function RfPlotBar({dataSelector = ""}) {
+function RfPlotBar({ dataJsonSelector = "", dataJsonField = "" }) {
     const containerRef = useRef();
-  const [data, setData] = useState();
+    const [data, setData] = useState();
 
-  useEffect(() => {
-    // d3.csv("/-_-/ui/static/Get-Fit-History-Daily-overview.csv", d3.autoType).then(setData);
-    const jsonStr = document.querySelector(dataSelector).text;
-    const dataJson = JSON.parse(jsonStr);
-    setData(dataJson);
-  }, []);
+    useEffect(() => {
+        if (!dataJsonSelector || !dataJsonField) {
+            return;
+        }
+        const jsonStr = document.querySelector(dataJsonSelector).text;
+        const dataJson = JSON.parse(jsonStr);
+        setData(dataJson[dataJsonField]);
+    }, []);
 
-  useEffect(() => {
-    if (data === undefined) return;
-    const plot = Plot.plot({
-      y: {grid: true},
-      color: {scheme: "burd"},
-      marks: [
-        Plot.ruleY([0]),
-        Plot.dot(data, {x: "tsHourMs", y: "totalVisits", stroke: "ruleUrl"})
-      ]
-    });
-    containerRef.current.append(plot);
-    return () => plot.remove();
-  }, [data]);
+    useEffect(() => {
+        if (data === undefined) return;
 
-  return <div ref={containerRef} />;
+        const plot = Plot.plot({
+            height: 200,
+            y: { label: "Total Visits", grid: true },
+            x: { label: "Date UTC (1h)", type: "utc" },
+            marks: [
+                // Make the zero-line bold.
+                Plot.ruleY([0]),
+                Plot.rectY(data, { x: "tsHourMs", y: "totalVisits", r: 2, fill: "var(--pico-primary)", interval: "hour" }),
+                Plot.tip(data, Plot.pointerX({x: "tsHourMs", y: "totalVisits" })),
+                Plot.crosshair(data, {x: "tsHourMs", y: "totalVisits"}),
+            ]
+        });
+
+        containerRef.current.append(plot);
+        return () => plot.remove();
+    }, [data]);
+
+    return <div ref={containerRef} />;
 }
-register(RfPlotBar, "rf-plot-bar", ["data-selector"], { shadow: false });
+register(RfPlotBar, "rf-plot-bar", ["data-json-selector", "data-json-field"], { shadow: false });
diff --git a/src/ui.ts b/src/ui.ts
@@ -269,6 +269,15 @@ function RulesAndStats(props: { data: ApiListRedirectRulesResponse['data']; swap
 	data.stats.forEach((s) => totalAggs.set(s.ruleUrl, (totalAggs.get(s.ruleUrl) ?? 0) + s.totalVisits));
 	const totalCountsSorted = [...totalAggs.entries()].sort((a, b) => (b[1] - a[1]) || a[0].localeCompare(b[0]));
 
+	const statsByRuleUrl = new Map<string, Array<object>>();
+	data.stats.forEach((s) => {
+		if (!statsByRuleUrl.has(s.ruleUrl)) {
+			statsByRuleUrl.set(s.ruleUrl, []);
+		}
+		statsByRuleUrl.get(s.ruleUrl)!.push(s);
+	});
+	const statsByRuleUrlObj = Object.fromEntries(statsByRuleUrl.entries());
+
 	// console.log("BOOM :: rules and stats", {data});
 
 	return html`
@@ -316,20 +325,18 @@ function RulesAndStats(props: { data: ApiListRedirectRulesResponse['data']; swap
 						${totalCountsSorted.map(([ruleUrl, cnt]) => html`<tr><th scope="row">${ruleUrl}</th><td>${cnt}</td></tr>`)}
 					</tbody>
 				</table>
-				<hr />
 
-				<script id="plot-data" type="application/json">${raw(JSON.stringify(data.stats))}</script>
-				<rf-plot-bar data-selector="#plot-data"></rf-plot-bar>
+				<script id="plot-data" type="application/json">${raw(JSON.stringify(statsByRuleUrlObj))}</script>
 
-				<hr />
 				${
-					// TODO Improve :)
-					data.stats.map(
-						(stat) => html`
+					Object.keys(statsByRuleUrlObj).map(
+						(ruleUrl) => html`
 							<article>
-								<header><h4>Hour bucket: ${new Date(stat.tsHourMs).toISOString()}</h4></header>
-								<pre><code>${raw(JSON.stringify(stat, null, 2))}</code></pre>
-								<footer></footer>
+								<header><h4>${ruleUrl}</h4></header>
+								<section>
+									<rf-plot-bar data-json-selector="#plot-data" data-json-field="${ruleUrl}"></rf-plot-bar>
+								</section>
+								<!-- <footer></footer> -->
 							</article>
 						`
 					)