Radial Gauge

import * as React from "react";

export interface RadialGaugeProps {
  /** 0..1 fill fraction. */
  value: number;
  color: string;
  size?: number;
  thickness?: number;
  trackColor?: string;
  className?: string;
}

/** Generic single-arc radial gauge (0..1), rounded cap, sweeping from top. */
export function RadialGauge({
  value,
  color,
  size = 98,
  thickness = 9,
  trackColor = "rgba(255,255,255,0.06)",
  className,
}: RadialGaugeProps) {
  const r = 50 - thickness / 2 - 1;
  const C = 2 * Math.PI * r;
  const L = Math.max(0, Math.min(1, value)) * C;
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r={r} fill="none" stroke={trackColor} strokeWidth={thickness} />
      <circle
        cx="50"
        cy="50"
        r={r}
        fill="none"
        stroke={color}
        strokeWidth={thickness}
        strokeLinecap="round"
        strokeDasharray={`${L} ${C - L}`}
        transform="rotate(-90 50 50)"
      />
    </svg>
  );
}