376 lines
12 KiB
TypeScript
376 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
BarChart,
|
|
Bar,
|
|
Line,
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
type TrendData = Array<{ date: string; count: number }>;
|
|
type TypeData = Array<{ type: string; count: number }>;
|
|
type StatusData = Array<{ name: string; count: number }>;
|
|
|
|
const PIE_COLORS: Record<string, string> = {
|
|
Uploaded: "hsl(38 92% 50%)",
|
|
Processing: "hsl(217 91% 60%)",
|
|
Analyzed: "hsl(160 84% 39%)",
|
|
Failed: "hsl(0 84% 60%)",
|
|
};
|
|
|
|
const FALLBACK_COLORS = [
|
|
"hsl(217 91% 60%)",
|
|
"hsl(260 89% 65%)",
|
|
"hsl(190 85% 50%)",
|
|
"hsl(340 82% 52%)",
|
|
];
|
|
|
|
const tooltipStyle = {
|
|
backgroundColor: "hsl(var(--background) / 0.95)",
|
|
border: "1px solid hsl(var(--border) / 0.6)",
|
|
borderRadius: "16px",
|
|
color: "hsl(var(--foreground))",
|
|
backdropFilter: "blur(12px)",
|
|
boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
|
|
padding: "12px 16px",
|
|
fontSize: "13px",
|
|
};
|
|
|
|
const CustomTooltip = ({ active, payload, label }: any) => {
|
|
if (!active || !payload?.length) return null;
|
|
|
|
return (
|
|
<div style={tooltipStyle} className="space-y-1.5 min-w-[140px]">
|
|
{label && (
|
|
<p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground border-b border-border/40 pb-1.5 mb-1.5">
|
|
{label}
|
|
</p>
|
|
)}
|
|
{payload.map((entry: any, index: number) => (
|
|
<div key={index} className="flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="h-2 w-2 rounded-full shrink-0"
|
|
style={{ backgroundColor: entry.color }}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">{entry.name}</span>
|
|
</div>
|
|
<span className="text-xs font-bold text-foreground tabular-nums">
|
|
{typeof entry.value === "number"
|
|
? entry.value.toLocaleString()
|
|
: entry.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export function TrendChart({ data }: { data: TrendData }) {
|
|
const trendData = useMemo(
|
|
() =>
|
|
data.map((point, index) => {
|
|
const start = Math.max(0, index - 6);
|
|
const window = data.slice(start, index + 1);
|
|
const average =
|
|
window.reduce((sum, item) => sum + item.count, 0) / window.length;
|
|
|
|
return {
|
|
...point,
|
|
movingAverage: Number(average.toFixed(2)),
|
|
};
|
|
}),
|
|
[data],
|
|
);
|
|
|
|
const xAxisInterval =
|
|
trendData.length > 12 ? Math.floor(trendData.length / 8) : 0;
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart
|
|
data={trendData}
|
|
margin={{ top: 10, right: 10, left: -24, bottom: 0 }}
|
|
>
|
|
<defs>
|
|
<linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="0%"
|
|
stopColor="hsl(217 91% 60%)"
|
|
stopOpacity={0.5}
|
|
/>
|
|
<stop
|
|
offset="60%"
|
|
stopColor="hsl(217 91% 60%)"
|
|
stopOpacity={0.15}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
stopColor="hsl(217 91% 60%)"
|
|
stopOpacity={0.02}
|
|
/>
|
|
</linearGradient>
|
|
<linearGradient id="trendStroke" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="hsl(217 91% 60%)" />
|
|
<stop offset="100%" stopColor="hsl(260 89% 65%)" />
|
|
</linearGradient>
|
|
<linearGradient id="avgStroke" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="hsl(260 89% 65%)" />
|
|
<stop offset="100%" stopColor="hsl(190 85% 50%)" />
|
|
</linearGradient>
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<CartesianGrid
|
|
strokeDasharray="3 6"
|
|
stroke="hsl(var(--border) / 0.4)"
|
|
vertical={false}
|
|
/>
|
|
<XAxis
|
|
dataKey="date"
|
|
stroke="hsl(var(--muted-foreground) / 0.5)"
|
|
interval={xAxisInterval}
|
|
tick={{ fontSize: 11, fontWeight: 500 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<YAxis
|
|
stroke="hsl(var(--muted-foreground) / 0.5)"
|
|
allowDecimals={false}
|
|
tick={{ fontSize: 11, fontWeight: 500 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Area
|
|
type="monotone"
|
|
dataKey="count"
|
|
stroke="url(#trendStroke)"
|
|
strokeWidth={2.5}
|
|
fillOpacity={1}
|
|
fill="url(#trendFill)"
|
|
activeDot={{
|
|
r: 6,
|
|
stroke: "hsl(var(--background))",
|
|
strokeWidth: 3,
|
|
fill: "hsl(217 91% 60%)",
|
|
filter: "url(#glow)",
|
|
}}
|
|
dot={false}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="movingAverage"
|
|
stroke="url(#avgStroke)"
|
|
strokeWidth={2}
|
|
strokeDasharray="6 4"
|
|
dot={false}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ContractTypeChart({ data }: { data: TypeData }) {
|
|
const sortedData = useMemo(
|
|
() => [...data].sort((a, b) => b.count - a.count),
|
|
[data],
|
|
);
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={sortedData}
|
|
layout="vertical"
|
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
|
>
|
|
<defs>
|
|
<linearGradient id="barGradient" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="hsl(217 91% 60%)" />
|
|
<stop offset="100%" stopColor="hsl(260 89% 65%)" />
|
|
</linearGradient>
|
|
<linearGradient id="barGradient2" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="hsl(260 89% 65%)" />
|
|
<stop offset="100%" stopColor="hsl(190 85% 50%)" />
|
|
</linearGradient>
|
|
<linearGradient id="barGradient3" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="hsl(190 85% 50%)" />
|
|
<stop offset="100%" stopColor="hsl(340 82% 52%)" />
|
|
</linearGradient>
|
|
<linearGradient id="barGradient4" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="hsl(340 82% 52%)" />
|
|
<stop offset="100%" stopColor="hsl(38 92% 50%)" />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid
|
|
strokeDasharray="3 6"
|
|
stroke="hsl(var(--border) / 0.4)"
|
|
horizontal={false}
|
|
/>
|
|
<XAxis
|
|
type="number"
|
|
stroke="hsl(var(--muted-foreground) / 0.5)"
|
|
allowDecimals={false}
|
|
tick={{ fontSize: 11, fontWeight: 500 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<YAxis
|
|
type="category"
|
|
dataKey="type"
|
|
width={128}
|
|
stroke="hsl(var(--muted-foreground) / 0.5)"
|
|
tick={{ fontSize: 11, fontWeight: 600 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<Tooltip
|
|
content={<CustomTooltip />}
|
|
cursor={{ fill: "hsl(var(--muted) / 0.15)", radius: 8 }}
|
|
/>
|
|
<Bar dataKey="count" radius={[0, 10, 10, 0]} maxBarSize={32}>
|
|
{sortedData.map((item, index) => {
|
|
const gradients = [
|
|
"url(#barGradient)",
|
|
"url(#barGradient2)",
|
|
"url(#barGradient3)",
|
|
"url(#barGradient4)",
|
|
];
|
|
return (
|
|
<Cell
|
|
key={`${item.type}-${index}`}
|
|
fill={gradients[index % gradients.length]}
|
|
className="transition-all duration-300 hover:opacity-80"
|
|
/>
|
|
);
|
|
})}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ContractStatusChart({ data }: { data: StatusData }) {
|
|
const total = useMemo(
|
|
() => data.reduce((sum, item) => sum + item.count, 0),
|
|
[data],
|
|
);
|
|
|
|
return (
|
|
<div className="w-full h-full flex flex-col">
|
|
<div className="h-[76%] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<defs>
|
|
<filter id="pieGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={58}
|
|
outerRadius={88}
|
|
paddingAngle={4}
|
|
dataKey="count"
|
|
stroke="hsl(var(--background))"
|
|
strokeWidth={3}
|
|
cornerRadius={6}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell
|
|
key={`${entry.name}-${index}`}
|
|
fill={
|
|
PIE_COLORS[entry.name] ??
|
|
FALLBACK_COLORS[index % FALLBACK_COLORS.length]
|
|
}
|
|
className="transition-all duration-300 hover:opacity-90"
|
|
style={{ filter: "drop-shadow(0 2px 8px rgba(0,0,0,0.1))" }}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
{total > 0 && (
|
|
<text
|
|
x="50%"
|
|
y="48%"
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
>
|
|
<tspan
|
|
x="50%"
|
|
y="48%"
|
|
className="fill-foreground text-xl font-bold tracking-tight"
|
|
>
|
|
{total.toLocaleString()}
|
|
</tspan>
|
|
<tspan
|
|
x="50%"
|
|
dy="18"
|
|
className="fill-muted-foreground text-[11px] font-medium uppercase tracking-wider"
|
|
>
|
|
Files
|
|
</tspan>
|
|
</text>
|
|
)}
|
|
<Tooltip content={<CustomTooltip />} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2.5 pt-2">
|
|
{data.map((item, index) => {
|
|
const color =
|
|
PIE_COLORS[item.name] ??
|
|
FALLBACK_COLORS[index % FALLBACK_COLORS.length];
|
|
|
|
return (
|
|
<div
|
|
key={`${item.name}-legend`}
|
|
className="group flex items-center gap-2.5 rounded-xl border border-border/40 bg-background/40 backdrop-blur-md px-3 py-2 hover:bg-background/60 hover:border-border/60 transition-all cursor-default"
|
|
>
|
|
<span
|
|
className="h-2.5 w-2.5 rounded-full ring-2 ring-offset-1 ring-offset-background"
|
|
style={{ backgroundColor: color, "--tw-ring-color": color } as React.CSSProperties}
|
|
/>
|
|
<span className="text-[11px] text-muted-foreground truncate font-medium">
|
|
{item.name}
|
|
</span>
|
|
<span className="ml-auto text-[11px] font-bold text-foreground tabular-nums">
|
|
{item.count}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|