110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { TrendingUp } from "lucide-react"
|
|
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts"
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart"
|
|
|
|
const chartConfig = {
|
|
cpu: {
|
|
label: "CPU",
|
|
color: "var(--chart-2)",
|
|
},
|
|
ram: {
|
|
label: "RAM",
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
export function ChartAreaGradient({chartData}: {chartData: {hour: number, cpu: number, ram: number}[]}) {
|
|
return (
|
|
<Card className="w-full h-96 sm:h-full">
|
|
<CardHeader>
|
|
<CardTitle>CPU & RAM Usage</CardTitle>
|
|
<CardDescription>
|
|
Showing the average CPU and RAM usage over the last 24 hours.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-6 flex-1 overflow-hidden">
|
|
<ChartContainer config={chartConfig} className="w-full h-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="hour"
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
tickFormatter={(value) => value+"h"}
|
|
height={34}
|
|
/>
|
|
|
|
<YAxis domain={[0, 200]} tickLine={false} axisLine={false} tickMargin={8} width={34} />
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
<defs>
|
|
<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="5%"
|
|
stopColor="var(--color-cpu)"
|
|
stopOpacity={0.5}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="var(--color-cpu)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</linearGradient>
|
|
<linearGradient id="fillRAM" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="5%"
|
|
stopColor="var(--color-ram)"
|
|
stopOpacity={0.5}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="var(--color-ram)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<Area
|
|
dataKey="ram"
|
|
type="natural"
|
|
fill="url(#fillRAM)"
|
|
fillOpacity={0.4}
|
|
stroke="var(--color-ram)"
|
|
stackId="a"
|
|
/>
|
|
<Area
|
|
dataKey="cpu"
|
|
type="natural"
|
|
fill="url(#fillCPU)"
|
|
fillOpacity={0.4}
|
|
stroke="var(--color-cpu)"
|
|
stackId="a"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|