Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
2.4 kB · 85 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586"use client";
import type { ChartConfig } from "@openstatus/ui/components/ui/chart";import { ChartContainer, ChartTooltip, ChartTooltipContent,} from "@openstatus/ui/components/ui/chart";import { Line, LineChart, XAxis } from "recharts";
import { cn } from "../lib/utils";
const chartConfig = { latency: { label: "Latency", color: "var(--color-success)", },} as ChartConfig;
export interface SimpleChartProps { data: { timestamp: string; latency: number | undefined }[]; className?: string;}
export function SimpleChart({ data, className }: SimpleChartProps) { return ( <ChartContainer config={chartConfig} className={cn("h-12 w-full", className)} > <LineChart accessibilityLayer data={data} margin={{ left: 12, right: 12, }} > <XAxis dataKey="timestamp" hide /> <ChartTooltip cursor={false} content={ <ChartTooltipContent indicator="dot" labelFormatter={(value) => { return new Date(value).toLocaleDateString("en-US", { day: "numeric", month: "short", hour: "numeric", minute: "numeric", }); }} formatter={(value, name) => ( <> <div className="h-full w-1 shrink-0 self-center rounded-xs bg-(--color-bg)" style={ { "--color-bg": `var(--color-${name})`, } as React.CSSProperties } /> {chartConfig[name as keyof typeof chartConfig]?.label || name} <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums"> {value} <span className="text-muted-foreground font-normal"> ms </span> </div> </> )} /> } /> <Line dataKey="latency" type="monotone" stroke="var(--color-latency)" strokeWidth={2} dot={false} /> </LineChart> </ChartContainer> );}