"use client"; import { useEffect, useId, useMemo, useState } from "react"; import { motion, useMotionValue, useTransform, animate } from "framer-motion"; import { Activity } from "lucide-react"; import { cn } from "@/lib/utils"; /* ---------------------------------------------------------------------------- * Geometry. A 270 degree speedometer sweep with a 90 degree gap at the bottom. * Angles use a convention where 0 points up and increases clockwise. * -------------------------------------------------------------------------- */ const CX = 100; const CY = 100; const R_ARC = 82; const START = 225; // bottom-left const SWEEP = 270; // clockwise, over the top, to bottom-right const NEEDLE_LEN = 60; const NEEDLE_TAIL = 15; const VIEW_H = 176; const round2 = (n: number) => Math.round(n * 100) / 100; const round4 = (n: number) => Math.round(n * 10000) / 10000; function polar(cx: number, cy: number, r: number, angleDeg: number) { const a = (angleDeg - 90) * (Math.PI / 180); return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) }; } type Rating = { text: string; color: string }; function ratingFor(value: number): Rating { if (value >= 85) return { text: "Excellent", color: "#7c6cff" }; if (value >= 70) return { text: "Strong", color: "#5b8cff" }; if (value >= 50) return { text: "Steady", color: "#a99dff" }; return { text: "Needs work", color: "#8a8aa0" }; } export type GaugeProps = { value: number; max?: number; label?: string; size?: number; className?: string; }; export function Gauge({ value, max = 100, label = "Performance score", size = 300, className, }: GaugeProps) { const rawId = useId(); const uid = rawId.replace(/:/g, ""); const gradId = `gauge-grad-${uid}`; const glowId = `gauge-glow-${uid}`; const fraction = Math.max(0, Math.min(1, value / max)); const progress = useMotionValue(0); const [display, setDisplay] = useState(0); // Ease the progress motion value toward the target on every value change. useEffect(() => { const controls = animate(progress, fraction, { duration: 1.4, ease: [0.16, 1, 0.3, 1], }); return () => controls.stop(); }, [fraction, progress]); // Mirror the eased fraction into a rounded readout without re-rendering the arc. useEffect(() => { const unsubscribe = progress.on("change", (v) => setDisplay(Math.round(v * max)) ); return unsubscribe; }, [progress, max]); // Smoothly animated attributes derived from the single progress value. const dashOffset = useTransform(progress, (f) => round4(1 - f)); const needleTipX = useTransform(progress, (f) => round2(polar(CX, CY, NEEDLE_LEN, START + f * SWEEP).x) ); const needleTipY = useTransform(progress, (f) => round2(polar(CX, CY, NEEDLE_LEN, START + f * SWEEP).y) ); const tailX = useTransform(progress, (f) => round2(polar(CX, CY, NEEDLE_TAIL, START + f * SWEEP + 180).x) ); const tailY = useTransform(progress, (f) => round2(polar(CX, CY, NEEDLE_TAIL, START + f * SWEEP + 180).y) ); const dotX = useTransform(progress, (f) => round2(polar(CX, CY, R_ARC, START + f * SWEEP).x) ); const dotY = useTransform(progress, (f) => round2(polar(CX, CY, R_ARC, START + f * SWEEP).y) ); const arcPath = useMemo(() => { const s = polar(CX, CY, R_ARC, START); const e = polar(CX, CY, R_ARC, START + SWEEP); const largeArc = SWEEP > 180 ? 1 : 0; return `M ${round2(s.x)} ${round2(s.y)} A ${R_ARC} ${R_ARC} 0 ${largeArc} 1 ${round2( e.x )} ${round2(e.y)}`; }, []); const ticks = useMemo(() => { const count = 20; const out: { x1: number; y1: number; x2: number; y2: number; major: boolean }[] = []; for (let i = 0; i <= count; i++) { const f = i / count; const major = i % 5 === 0; const a = START + f * SWEEP; const inner = polar(CX, CY, major ? 62 : 67, a); const outer = polar(CX, CY, 73, a); out.push({ x1: round2(inner.x), y1: round2(inner.y), x2: round2(outer.x), y2: round2(outer.y), major, }); } return out; }, []); const tickLabels = useMemo(() => { return [0, 0.25, 0.5, 0.75, 1].map((f) => { const p = polar(CX, CY, 50, START + f * SWEEP); return { x: round2(p.x), y: round2(p.y), value: Math.round(f * max) }; }); }, [max]); const rating = ratingFor(display); const height = round2((size * VIEW_H) / 200); const numberSize = round2(size * 0.185); return (

{/* Readout overlay */}

{rating.text}

{display}

{label}

); } const SEQUENCE = [92, 64, 78, 41, 88, 73]; export default function Demo() { const [index, setIndex] = useState(0); useEffect(() => { const id = setInterval( () => setIndex((prev) => (prev + 1) % SEQUENCE.length), 2600 ); return () => clearInterval(id); }, []); return (

{/* Ambient glow behind the gauge */}

{/* Header */}

System performance

Live

{/* Gauge */}

{/* Footer stats */}

Baseline

Target

); }