forked from pinks/eris
1
0
Fork 0
nyx/ui/StatsPage.tsx

95 lines
3.1 KiB
TypeScript
Raw Normal View History

2023-10-13 11:47:57 +00:00
import React from "react";
2023-10-23 00:39:01 +00:00
import { fetchApi, handleResponse } from "./apiClient.ts";
2023-10-13 11:47:57 +00:00
import useSWR from "swr";
import { Counter } from "./Counter.tsx";
export function StatsPage() {
2023-10-23 00:39:01 +00:00
const getGlobalStats = useSWR(
["/stats", {}] as const,
2023-10-13 11:47:57 +00:00
(args) => fetchApi(...args).then(handleResponse),
{ refreshInterval: 2_000 },
);
return (
<div className="my-16 flex flex-col gap-16 text-zinc-600 dark:text-zinc-400">
<p className="flex flex-col items-center gap-2 text-2xl sm:text-3xl">
<span>Pixelsteps diffused</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
2023-10-23 00:39:01 +00:00
value={getGlobalStats.data?.pixelStepCount ?? 0}
2023-10-13 11:47:57 +00:00
digits={15}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
2023-10-23 00:39:01 +00:00
value={(getGlobalStats.data?.pixelStepsPerMinute ?? 0) / 60}
2023-10-13 11:47:57 +00:00
digits={9}
transitionDurationMs={2_000}
postfix="/s"
/>
</p>
<p className="flex flex-col items-center gap-2 text-2xl sm:text-3xl">
<span>Pixels painted</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
2023-10-23 00:39:01 +00:00
value={getGlobalStats.data?.pixelCount ?? 0}
2023-10-13 11:47:57 +00:00
digits={15}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
2023-10-23 00:39:01 +00:00
value={(getGlobalStats.data?.pixelsPerMinute ?? 0) / 60}
2023-10-13 11:47:57 +00:00
digits={9}
transitionDurationMs={2_000}
postfix="/s"
/>
</p>
<div className="flex flex-col md:flex-row gap-16 md:gap-8">
<p className="flex-grow flex flex-col items-center gap-2 text-2xl">
<span>Steps processed</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
2023-10-23 00:39:01 +00:00
value={getGlobalStats.data?.stepCount ?? 0}
2023-10-13 11:47:57 +00:00
digits={9}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
2023-10-23 00:39:01 +00:00
value={(getGlobalStats.data?.stepsPerMinute ?? 0) / 60}
2023-10-13 11:47:57 +00:00
digits={3}
fractionDigits={3}
transitionDurationMs={2_000}
postfix="/s"
/>
</p>
<p className="flex-grow flex flex-col items-center gap-2 text-2xl">
<span>Images generated</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
2023-10-23 00:39:01 +00:00
value={getGlobalStats.data?.imageCount ?? 0}
2023-10-13 11:47:57 +00:00
digits={9}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
2023-10-23 00:39:01 +00:00
value={(getGlobalStats.data?.imagesPerMinute ?? 0) / 60}
2023-10-13 11:47:57 +00:00
digits={3}
fractionDigits={3}
transitionDurationMs={2_000}
postfix="/s"
/>
</p>
</div>
<p className="flex-grow flex flex-col items-center gap-2 text-2xl">
<span>Unique users</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
2023-10-23 00:39:01 +00:00
value={getGlobalStats.data?.userCount ?? 0}
2023-10-13 11:47:57 +00:00
digits={6}
transitionDurationMs={1_500}
/>
</p>
</div>
);
}