mirror of https://github.com/jetkvm/kvm.git
101 lines
2.6 KiB
TypeScript
101 lines
2.6 KiB
TypeScript
import {
|
|
Brush,
|
|
CartesianGrid,
|
|
Line,
|
|
LineChart,
|
|
ReferenceLine,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
|
|
import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
|
|
|
|
export default function StatChart({
|
|
data,
|
|
domain,
|
|
unit,
|
|
referenceValue,
|
|
}: {
|
|
data: { date: number; stat: number | null | undefined }[];
|
|
domain?: [string | number, string | number];
|
|
unit?: string;
|
|
referenceValue?: number;
|
|
}) {
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data} margin={{ top: 24, right: 8, left: 0, bottom: 0 }}>
|
|
<Brush startIndex={data.length - 60 * 2} height={1} className="hidden" />
|
|
<CartesianGrid
|
|
strokeDasharray={0}
|
|
vertical={false}
|
|
strokeLinecap="butt"
|
|
stroke="rgba(30, 41, 59, 0.1)"
|
|
/>
|
|
{referenceValue && (
|
|
<ReferenceLine
|
|
y={referenceValue}
|
|
strokeDasharray="3 3"
|
|
strokeWidth={1}
|
|
stroke="rgba(30, 41, 59, 0.3)"
|
|
/>
|
|
)}
|
|
<XAxis
|
|
dataKey="date"
|
|
tick={{
|
|
fontFamily: "Circular",
|
|
fontSize: "12px",
|
|
fill: "rgba(107, 114, 128, 1)",
|
|
}}
|
|
axisLine={{ stroke: "rgba(30, 41, 59, 0.3)" }}
|
|
tickLine={{ stroke: "rgba(30, 41, 59, 0.3)" }}
|
|
tickFormatter={date => {
|
|
return new Date(date * 1000).toLocaleString("en-US", {
|
|
hourCycle: "h23",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
});
|
|
}}
|
|
ticks={data
|
|
.filter(d => {
|
|
return d.date % 60 === 0;
|
|
})
|
|
.map(x => x.date)}
|
|
/>
|
|
<YAxis
|
|
dataKey="stat"
|
|
axisLine={false}
|
|
orientation="right"
|
|
tick={{
|
|
fontFamily: "Circular",
|
|
fontSize: "12px",
|
|
fill: "rgba(107, 114, 128, 1)",
|
|
}}
|
|
padding={{ top: 0, bottom: 0 }}
|
|
tickLine={false}
|
|
unit={unit}
|
|
domain={domain || ["auto", "auto"]}
|
|
/>
|
|
|
|
<Tooltip
|
|
cursor={false}
|
|
content={({ payload }) => {
|
|
return <CustomTooltip payload={payload as CustomTooltipProps["payload"]} />;
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
isAnimationActive={false}
|
|
dataKey="stat"
|
|
stroke="rgb(29 78 216)"
|
|
strokeLinecap="round"
|
|
strokeWidth={2}
|
|
unit={unit}
|
|
dot={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|