mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 18:55:43 +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
71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
interface DonutChartProps {
|
|
data: Array<{ name: string; value: number; color?: string }>;
|
|
title?: string;
|
|
centerText?: {
|
|
title: string;
|
|
value: string | number;
|
|
};
|
|
colors?: string[];
|
|
height?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const ChartSkeleton = ({ height = 300 }: { height?: number }) => (
|
|
<div className="animate-pulse relative" style={{ height }}>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div
|
|
className="rounded-full bg-muted-foreground/20"
|
|
style={{ width: "200px", height: "200px" }}
|
|
/>
|
|
<div
|
|
className="absolute rounded-full bg-background"
|
|
style={{ width: "120px", height: "120px" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const DonutChartInner = dynamic(() => import("./donut-chart-inner"), {
|
|
ssr: false,
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
export default function ModernDonutChart({
|
|
data,
|
|
title,
|
|
centerText,
|
|
colors = [
|
|
"hsl(var(--chart-1))",
|
|
"hsl(var(--chart-2))",
|
|
"hsl(var(--chart-3))",
|
|
"hsl(var(--chart-4))",
|
|
"hsl(var(--chart-5))",
|
|
],
|
|
height = 300,
|
|
className,
|
|
}: DonutChartProps) {
|
|
return (
|
|
<Card className={className}>
|
|
{title && (
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold">{title}</CardTitle>
|
|
</CardHeader>
|
|
)}
|
|
<CardContent>
|
|
<DonutChartInner
|
|
data={data}
|
|
title={title}
|
|
centerText={centerText}
|
|
colors={colors}
|
|
height={height}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|