PreRelease v2
This commit is contained in:
295
features/analytics/components/charts.tsx
Normal file
295
features/analytics/components/charts.tsx
Normal file
@@ -0,0 +1,295 @@
|
||||
"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(var(--primary))",
|
||||
Analyzed: "hsl(160 84% 39%)",
|
||||
Failed: "hsl(var(--destructive))",
|
||||
};
|
||||
|
||||
const FALLBACK_COLORS = [
|
||||
"hsl(var(--primary))",
|
||||
"hsl(var(--secondary))",
|
||||
"hsl(var(--accent))",
|
||||
"hsl(var(--destructive))",
|
||||
];
|
||||
|
||||
const tooltipStyle = {
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "12px",
|
||||
color: "hsl(var(--foreground))",
|
||||
};
|
||||
|
||||
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="5%"
|
||||
stopColor="hsl(var(--primary))"
|
||||
stopOpacity={0.65}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="hsl(var(--primary))"
|
||||
stopOpacity={0.05}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
interval={xAxisInterval}
|
||||
tick={{ fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
allowDecimals={false}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(
|
||||
value: number | string | undefined,
|
||||
name: string | number | undefined,
|
||||
) => {
|
||||
const numericValue = Number(value ?? 0);
|
||||
if (name === "movingAverage") {
|
||||
return [numericValue.toFixed(1), "7-day avg"];
|
||||
}
|
||||
|
||||
return [numericValue, "Uploads"];
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2.25}
|
||||
fillOpacity={1}
|
||||
fill="url(#trendFill)"
|
||||
activeDot={{ r: 5 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="movingAverage"
|
||||
stroke="hsl(var(--secondary))"
|
||||
strokeWidth={2}
|
||||
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 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
horizontal={false}
|
||||
/>
|
||||
<XAxis
|
||||
type="number"
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
allowDecimals={false}
|
||||
tick={{ fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="type"
|
||||
width={128}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
cursor={false}
|
||||
formatter={(value: number | string | undefined) => [
|
||||
Number(value ?? 0),
|
||||
"Files",
|
||||
]}
|
||||
/>
|
||||
<Bar dataKey="count" radius={[0, 8, 8, 0]}>
|
||||
{sortedData.map((item, index) => {
|
||||
const opacity = Math.max(0.35, 0.95 - index * 0.12);
|
||||
return (
|
||||
<Cell
|
||||
key={`${item.type}-${index}`}
|
||||
fill={`hsl(var(--primary) / ${opacity})`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
<Pie
|
||||
data={data}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={62}
|
||||
outerRadius={94}
|
||||
paddingAngle={3}
|
||||
dataKey="count"
|
||||
stroke="hsl(var(--background))"
|
||||
strokeWidth={2}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`${entry.name}-${index}`}
|
||||
fill={
|
||||
PIE_COLORS[entry.name] ??
|
||||
FALLBACK_COLORS[index % FALLBACK_COLORS.length]
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
{total > 0 && (
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
<tspan
|
||||
x="50%"
|
||||
y="50%"
|
||||
className="fill-foreground text-base font-semibold"
|
||||
>
|
||||
{total}
|
||||
</tspan>
|
||||
<tspan
|
||||
x="50%"
|
||||
dy="16"
|
||||
className="fill-muted-foreground text-[11px]"
|
||||
>
|
||||
Files
|
||||
</tspan>
|
||||
</text>
|
||||
)}
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(value: number | string | undefined) => [
|
||||
Number(value ?? 0),
|
||||
"Files",
|
||||
]}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 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="flex items-center gap-2 rounded-lg border border-border/50 bg-muted/25 px-2.5 py-1.5"
|
||||
>
|
||||
<span
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-[11px] text-muted-foreground truncate">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="ml-auto text-[11px] font-medium text-foreground">
|
||||
{item.count}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user