overview: one endpoint, live projections and a response cache (m36)

admin/src/features/overview/ClientChart.tsx

@@ -13,7 +13,7 @@ import * as stylex from "@stylexjs/stylex";
 import { Group } from "@visx/group";
 import { BarStack } from "@visx/shape";
 import { formatTime } from "@/lib/format";
-import type { StatsClients } from "@/lib/types";
+import type { OverviewClientSeries } from "@/lib/types";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
 import { clientLabel, useClientNames, type ClientNames } from "@/features/clients/clientNames";
@@ -82,7 +82,7 @@ interface Series {
  * and a table column all saying zero. The named clients stay at zero, because a
  * client that went quiet is something the reader wants to see.
  */
-function seriesOf(data: StatsClients, names: ClientNames): Series[] {
+function seriesOf(data: ClientChartData, names: ClientNames): Series[] {
 	const named = data.clients.map((client) => ({
 		key: clientKey(client.client),
 		// The name if the client is registered under one, the address otherwise —
@@ -100,10 +100,21 @@ function seriesOf(data: StatsClients, names: ClientNames): Series[] {
 	];
 }
 
+/**
+ * The slice of the Overview body this chart draws. Declared here rather than
+ * taken whole, so what the chart reads is stated where it is read.
+ */
+export interface ClientChartData {
+	since: number;
+	bucket_seconds: number;
+	clients: OverviewClientSeries[];
+	other: number[];
+}
+
 /** One column: the timestamp plus one entry per series, keyed by the series key. */
 type Column = { ts: number } & Record<string, number>;
 
-export default function ClientChart({ data }: { data: StatsClients }) {
+export default function ClientChart({ data }: { data: ClientChartData }) {
 	const [containerRef, width] = useMeasuredWidth();
 	// A hover survives a re-render only while it still names the same bucket at
 	// the same place: a poll that rolls the window, or a resize, retires it.