Gauge Chart

1"use client";
2 
3import {
4	Label,
5	PolarGrid,
6	PolarRadiusAxis,
7	RadialBar,
8	RadialBarChart,
9} from "recharts";
10import {
11	type ChartConfig,
12	ChartContainer,
13} from "@/components/ui/chart";
14 
15const CHART_COLORS = ["#00bbff", "#34d399", "#60a5fa", "#f472b6", "#fb923c"];
16 
17export type GaugeChartProps = {
18	value: number;
19	title?: string;
20	min?: number;
21	max?: number;
22	unit?: string;
23	thresholds?: { warning: number; danger: number };
24	variant?: "gauge" | "text" | "stacked";
25	secondValue?: number;
26	secondLabel?: string;
27};
28 
29export function GaugeChart(props: GaugeChartProps) {
30	const min = props.min ?? 0;
31	const max = props.max ?? 100;
32	const pct = Math.min(
33		100,
34		Math.max(0, ((props.value - min) / (max - min)) * 100),
35	);
36	const warning = props.thresholds?.warning ?? 60;
37	const danger = props.thresholds?.danger ?? 80;
38	const color =
39		pct >= danger ? "#f87171" : pct >= warning ? "#fbbf24" : "#34d399";
40 
41	const variant = props.variant ?? "gauge";
42 
43	if (variant === "text") {
44		const textChartConfig: ChartConfig = {
45			value: { label: props.title ?? "Value", color },
46		};
47		const textData = [{ name: "value", value: pct, fill: color }];
48		return (
49			<div className="rounded-2xl bg-card text-card-foreground border p-4 text-center">
50				<ChartContainer config={textChartConfig} className="mx-auto">
51					<RadialBarChart
52						data={textData}
53						startAngle={0}
54						endAngle={250}
55						outerRadius={90}
56						innerRadius={70}
57						className="mx-auto h-[160px] w-[160px]"
58					>
59						<PolarGrid
60							gridType="circle"
61							radialLines={false}
62							stroke="none"
63							className="first:fill-muted last:fill-background"
64							polarRadius={[90, 70]}
65						/>
66						<RadialBar dataKey="value" background cornerRadius={10} />
67						<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
68							<Label
69								content={({ viewBox }) => {
70									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
71										return (
72											<text
73												x={viewBox.cx}
74												y={viewBox.cy}
75												textAnchor="middle"
76												dominantBaseline="middle"
77											>
78												<tspan
79													x={viewBox.cx}
80													y={viewBox.cy}
81													fontSize={28}
82													fontWeight="bold"
83													fill={color}
84												>
85													{props.value}
86													{props.unit ?? ""}
87												</tspan>
88												{props.title && (
89													<tspan
90														x={viewBox.cx}
91														y={(viewBox.cy ?? 0) + 22}
92														fontSize={12}
93// … truncated