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

admin/src/features/overview/ClientChart.test.tsx

@@ -2,23 +2,14 @@ import { fireEvent, render as renderBare, screen, within } from "@testing-librar
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createQueryClient } from "@/lib/queryClient";
 import { formatTime } from "@/lib/format";
-import type { StatsClients } from "@/lib/types";
-import ClientChart from "./ClientChart";
+import ClientChart, { type ClientChartData } from "./ClientChart";
 import { OTHER_KEY, clientKey, seriesColor } from "./seriesColors";
 
 const SINCE = 1_700_000_000;
 const BUCKET = 1800;
 
-function clients(named: { client: string; buckets: number[] }[], other: number[]): StatsClients {
-	return {
-		period: "24h",
-		since: SINCE,
-		until: SINCE + other.length * BUCKET,
-		bucket_seconds: BUCKET,
-		coverage: { complete: true, available_since: SINCE },
-		clients: named,
-		other,
-	};
+function clients(named: { client: string; buckets: number[] }[], other: number[]): ClientChartData {
+	return { since: SINCE, bucket_seconds: BUCKET, clients: named, other };
 }
 
 const TWO_BUCKETS = clients(
@@ -34,15 +25,15 @@ const TWO_BUCKETS = clients(
  * client is registered in these fixtures, which is what leaves the addresses on
  * screen as the labels.
  */
-function render(data: StatsClients) {
+function render(data: ClientChartData) {
 	const client = createQueryClient();
-	const tree = (next: StatsClients) => (
+	const tree = (next: ClientChartData) => (
 		<QueryClientProvider client={client}>
 			<ClientChart data={next} />
 		</QueryClientProvider>
 	);
 	const result = renderBare(tree(data));
-	return { ...result, rerender: (next: StatsClients) => result.rerender(tree(next)) };
+	return { ...result, rerender: (next: ClientChartData) => result.rerender(tree(next)) };
 }
 
 beforeEach(() => {