openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { cn } from "@/lib/utils";
4import type { ChartConfig } from "@openstatus/ui";
5import {
6 ChartContainer,
7 ChartTooltip,
8 ChartTooltipContent,
9} from "@openstatus/ui";
10import { Line, LineChart, XAxis } from "recharts";
11
12const chartConfig = {
13 latency: {
14 label: "Latency",
15 color: "var(--color-success)",
16 },
17} as ChartConfig;
18
19export interface SimpleChartProps {
20 data: { timestamp: string; latency: number | undefined }[];
21 className?: string;
22}
23
24export function SimpleChart({ data, className }: SimpleChartProps) {
25 return (
26 <ChartContainer
27 config={chartConfig}
28 className={cn("h-12 w-full", className)}
29 >
30 <LineChart
31 accessibilityLayer
32 data={data}
33 margin={{
34 left: 12,
35 right: 12,
36 }}
37 >
38 <XAxis dataKey="timestamp" hide />
39 <ChartTooltip
40 cursor={false}
41 content={
42 <ChartTooltipContent
43 indicator="dot"
44 labelFormatter={(value) => {
45 return new Date(value).toLocaleDateString("en-US", {
46 day: "numeric",
47 month: "short",
48 hour: "numeric",
49 minute: "numeric",
50 });
51 }}
52 formatter={(value, name) => (
53 <>
54 <div
55 className="h-full w-1 shrink-0 self-center rounded-[2px] bg-(--color-bg)"
56 style={
57 {
58 "--color-bg": `var(--color-${name})`,
59 } as React.CSSProperties
60 }
61 />
62 {chartConfig[name as keyof typeof chartConfig]?.label || name}
63 <div className="ml-auto flex items-baseline gap-0.5 font-medium font-mono text-foreground tabular-nums">
64 {value}
65 <span className="font-normal text-muted-foreground">
66 ms
67 </span>
68 </div>
69 </>
70 )}
71 />
72 }
73 />
74 <Line
75 dataKey="latency"
76 type="monotone"
77 stroke="var(--color-latency)"
78 strokeWidth={2}
79 dot={false}
80 />
81 </LineChart>
82 </ChartContainer>
83 );
84}