Gauge

import { Gauge } from "@/components/ui/gauge";

export default function Example() {
  return <Gauge />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Gauge = forwardRef(({ className, value = 0, max = 100, size = 160, label, ...props }, ref) => {
  const pct = Math.min(100, Math.max(0, (value / max) * 100));
  const r = (size - 20) / 2;
  const circumference = Math.PI * r; // half circle
  const offset = circumference - (pct / 100) * circumference;

  const getColor = () => {
    if (pct >= 80) return "#ef4444";
    if (pct >= 60) return "#f59e0b";
    return "#10b981";
  };

  return (
    <div ref={ref} className={cn("inline-flex flex-col items-center", className)} {...props}>
      <svg width={size} height={size / 2 + 20} viewBox={`0 0 ${size} ${size / 2 + 20}`}>
        <path d={`M 10,${size / 2 + 10} A ${r},${r} 0 0 1 ${size - 10},${size / 2 + 10}`}
          fill="none" strokeWidth="10" strokeLinecap="round" className="stroke-muted"
        />
        <path d={`M 10,${size / 2 + 10} A ${r},${r} 0 0 1 ${size - 10},${size / 2 + 10}`}
          fill="none" strokeWidth="10" strokeLinecap="round"
          stroke={getColor()} strokeDasharray={circumference} strokeDashoffset={offset}
          className="transition-all duration-700"
        />
        <text x={size / 2} y={size / 2} textAnchor="middle" className="fill-foreground text-2xl font-bold">{value}</text>
      </svg>
      {label && <span className="text-sm text-muted-foreground">{label}</span>}
    </div>
  );
});
Gauge.displayName = "Gauge";

export { Gauge };