Import source: src/components/features/charts
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,227 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import {
|
||||||
|
Area,
|
||||||
|
AreaChart,
|
||||||
|
Bar,
|
||||||
|
BarChart,
|
||||||
|
CartesianGrid,
|
||||||
|
Legend,
|
||||||
|
Tooltip,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
} from "recharts";
|
||||||
|
import type { MetricPoint } from "@/api/contracts/models";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { useUiStore } from "@/stores/ui-store";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recharts needs concrete color strings, so resolve the active CSS variables
|
||||||
|
* whenever the accent or theme preference changes.
|
||||||
|
*/
|
||||||
|
function useChartTheme() {
|
||||||
|
const accent = useUiStore((state) => state.accent);
|
||||||
|
const theme = useUiStore((state) => state.theme);
|
||||||
|
const [colors, setColors] = useState({
|
||||||
|
primary: "hsl(224 88% 53%)",
|
||||||
|
accent: "hsl(30 100% 48%)",
|
||||||
|
muted: "hsl(226 14% 44%)",
|
||||||
|
grid: "hsl(222 24% 86% / 0.5)",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Defer one frame so the Providers effect has applied the new
|
||||||
|
// data-accent / dark-class attributes before the variables are read.
|
||||||
|
const frame = requestAnimationFrame(() => {
|
||||||
|
const styles = getComputedStyle(document.documentElement);
|
||||||
|
const read = (name: string) => `hsl(${styles.getPropertyValue(name).trim()})`;
|
||||||
|
setColors({
|
||||||
|
primary: read("--primary"),
|
||||||
|
accent: read("--accent"),
|
||||||
|
muted: read("--muted-foreground"),
|
||||||
|
grid: `hsl(${styles.getPropertyValue("--border").trim()} / 0.5)`,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return () => cancelAnimationFrame(frame);
|
||||||
|
}, [accent, theme]);
|
||||||
|
|
||||||
|
return colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
function GlassTooltip({
|
||||||
|
active,
|
||||||
|
payload,
|
||||||
|
label,
|
||||||
|
}: {
|
||||||
|
active?: boolean;
|
||||||
|
payload?: Array<{ name: string; value: number; color: string }>;
|
||||||
|
label?: string;
|
||||||
|
}) {
|
||||||
|
if (!active || !payload?.length) return null;
|
||||||
|
return (
|
||||||
|
<div className="glass-modal rounded-lg px-3 py-2 text-xs">
|
||||||
|
<div className="mb-1 font-mono text-muted-foreground">{label?.slice(11, 16)}</div>
|
||||||
|
{payload.map((entry) => (
|
||||||
|
<div key={entry.name} className="flex items-center gap-2">
|
||||||
|
<span className="h-2 w-2 rounded-full" style={{ background: entry.color }} />
|
||||||
|
<span className="text-muted-foreground">{entry.name}</span>
|
||||||
|
<span className="ml-auto pl-3 font-mono font-medium text-foreground">
|
||||||
|
{Math.round(entry.value).toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartFrame({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: (size: { width: number; height: number }) => ReactNode;
|
||||||
|
}) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const [size, setSize] = useState({ width: 0, height: 0 });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const element = ref.current;
|
||||||
|
if (!element) return;
|
||||||
|
const target = element;
|
||||||
|
|
||||||
|
function readSize() {
|
||||||
|
const rect = target.getBoundingClientRect();
|
||||||
|
setSize({
|
||||||
|
width: Math.max(1, Math.floor(rect.width)),
|
||||||
|
height: Math.max(1, Math.floor(rect.height)),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
readSize();
|
||||||
|
const observer = new ResizeObserver(readSize);
|
||||||
|
observer.observe(element);
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CardContent className="h-56 min-w-0 sm:h-64 lg:h-72">
|
||||||
|
<div ref={ref} className="h-full min-w-0">
|
||||||
|
{size.width > 1 && size.height > 1 ? (
|
||||||
|
children(size)
|
||||||
|
) : (
|
||||||
|
<div className="skeleton h-full" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UsageChart({
|
||||||
|
data,
|
||||||
|
title = "Resource history",
|
||||||
|
}: {
|
||||||
|
data: MetricPoint[];
|
||||||
|
title?: string;
|
||||||
|
}) {
|
||||||
|
const colors = useChartTheme();
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{title}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<ChartFrame>
|
||||||
|
{({ width, height }) => (
|
||||||
|
<AreaChart data={data} width={width} height={height}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="usage-cpu" x1="0" x2="0" y1="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor={colors.primary} stopOpacity={0.35} />
|
||||||
|
<stop offset="95%" stopColor={colors.primary} stopOpacity={0.02} />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="usage-memory" x1="0" x2="0" y1="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor={colors.accent} stopOpacity={0.25} />
|
||||||
|
<stop offset="95%" stopColor={colors.accent} stopOpacity={0.02} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid stroke={colors.grid} strokeDasharray="3 3" vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timestamp"
|
||||||
|
tickFormatter={(value: string) => value.slice(11, 16)}
|
||||||
|
tick={{ fontSize: 11, fill: colors.muted }}
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tick={{ fontSize: 11, fill: colors.muted }}
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
width={36}
|
||||||
|
/>
|
||||||
|
<Tooltip content={<GlassTooltip />} />
|
||||||
|
<Legend iconType="circle" iconSize={8} />
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="cpu"
|
||||||
|
stroke={colors.primary}
|
||||||
|
strokeWidth={2}
|
||||||
|
fill="url(#usage-cpu)"
|
||||||
|
name="CPU"
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="memory"
|
||||||
|
stroke={colors.accent}
|
||||||
|
strokeWidth={2}
|
||||||
|
fill="url(#usage-memory)"
|
||||||
|
name="Memory"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
)}
|
||||||
|
</ChartFrame>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TrafficChart({ data }: { data: MetricPoint[] }) {
|
||||||
|
const colors = useChartTheme();
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Traffic and requests</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<ChartFrame>
|
||||||
|
{({ width, height }) => (
|
||||||
|
<BarChart data={data.slice(-12)} width={width} height={height}>
|
||||||
|
<CartesianGrid stroke={colors.grid} strokeDasharray="3 3" vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timestamp"
|
||||||
|
tickFormatter={(value: string) => value.slice(11, 16)}
|
||||||
|
tick={{ fontSize: 11, fill: colors.muted }}
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tick={{ fontSize: 11, fill: colors.muted }}
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
width={36}
|
||||||
|
/>
|
||||||
|
<Tooltip content={<GlassTooltip />} cursor={{ fill: colors.grid }} />
|
||||||
|
<Legend iconType="circle" iconSize={8} />
|
||||||
|
<Bar
|
||||||
|
dataKey="bandwidth"
|
||||||
|
fill={colors.primary}
|
||||||
|
name="Bandwidth MB"
|
||||||
|
radius={[4, 4, 0, 0]}
|
||||||
|
/>
|
||||||
|
<Bar
|
||||||
|
dataKey="requests"
|
||||||
|
fill={colors.accent}
|
||||||
|
name="Requests"
|
||||||
|
radius={[4, 4, 0, 0]}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
)}
|
||||||
|
</ChartFrame>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user