mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 12:55:42 +01:00
Kaj Kowalski
5bfd762e55
- Update tsconfig to ES2024 target and bundler moduleResolution - Add dynamic imports for chart.js and recharts (bundle optimization) - Consolidate 17 useState into useReducer in sessions page - Fix 18 .js extension imports across lib files - Add type declarations for @rapideditor/country-coder - Fix platform user types (PlatformUserRole enum) - Fix Calendar component prop types - Centralize next-auth type augmentation - Add force-dynamic to all API routes (prevent build-time prerender) - Fix Prisma JSON null handling with Prisma.DbNull - Fix various type mismatches (SessionMessage, ImportRecord, etc.) - Export ButtonProps from button component - Update next-themes import path - Replace JSX.Element with React.ReactElement - Remove obsolete debug scripts and pnpm lockfile - Downgrade eslint to v8 for next compatibility
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
interface ResponseTimeDistributionProps {
|
|
data: number[];
|
|
average: number;
|
|
targetResponseTime?: number;
|
|
}
|
|
|
|
const ChartSkeleton = () => (
|
|
<div className="h-64 flex items-center justify-center">
|
|
<div className="animate-pulse flex flex-col items-center gap-2">
|
|
<div className="h-48 w-full bg-muted rounded-md flex items-end justify-around px-4 pb-4">
|
|
{[...Array(8)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-muted-foreground/20 rounded-t"
|
|
style={{ width: "8%", height: `${20 + Math.random() * 60}%` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="h-4 w-32 bg-muted rounded" />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const ResponseTimeDistributionChart = dynamic(
|
|
() => import("./ResponseTimeDistributionChart"),
|
|
{
|
|
ssr: false,
|
|
loading: () => <ChartSkeleton />,
|
|
}
|
|
);
|
|
|
|
export default function ResponseTimeDistribution(
|
|
props: ResponseTimeDistributionProps
|
|
) {
|
|
if (!props.data || !props.data.length) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
|
No response time data available
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <ResponseTimeDistributionChart {...props} />;
|
|
}
|