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