openstatus.dev
Openstatus
www.openstatus.dev
1import type { ChartConfig } from "@/components/ui/chart";
2import { cn } from "@/lib/utils";
3import type {
4 NameType,
5 ValueType,
6} from "recharts/types/component/DefaultTooltipContent";
7
8interface ChartTooltipNumberProps {
9 chartConfig: ChartConfig;
10 value: ValueType;
11 name: NameType;
12}
13
14export function ChartTooltipNumber({
15 value,
16 name,
17 chartConfig,
18}: ChartTooltipNumberProps) {
19 return (
20 <ChartTooltipNumberRaw
21 value={value}
22 label={chartConfig[name as keyof typeof chartConfig]?.label || name}
23 style={
24 {
25 "--color-bg": `var(--color-${name})`,
26 } as React.CSSProperties
27 }
28 />
29 );
30}
31
32export function ChartTooltipNumberRaw({
33 value,
34 label,
35 style,
36 className,
37}: {
38 value: ValueType;
39 label: React.ReactNode;
40 style?: React.CSSProperties;
41 className?: string;
42}) {
43 return (
44 <>
45 <div
46 className={cn(
47 "h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)",
48 className,
49 )}
50 style={style}
51 />
52 <span>{label}</span>
53 <div className="ml-auto flex items-baseline gap-0.5 font-medium font-mono text-foreground tabular-nums">
54 {value}
55 <span className="font-normal text-muted-foreground">ms</span>
56 </div>
57 </>
58 );
59}