62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T1cc6,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; interface GaugeProps extends React.HTMLAttributes { label?: string; max?: number; min?: number; size?: "sm" | "md" | "lg"; unit?: string; value: number; variant?: "default" | "success" | "warning" | "danger"; } const sizeConfig = { lg: { dim: 200, fontSize: 30, labelSize: "text-xs", needle: 65, stroke: 10 }, md: { dim: 150, fontSize: 22, labelSize: "text-[10px]", needle: 48, stroke: 8, }, sm: { dim: 100, fontSize: 14, labelSize: "text-[8px]", needle: 30, stroke: 6, }, }; const variantColor: Record = { danger: "rgb(239,68,68)", default: "var(--primary)", success: "rgb(34,197,94)", warning: "rgb(245,158,11)", }; const variantText: Record = { danger: "text-red-500", default: "text-primary", success: "text-green-500", warning: "text-amber-500", }; function autoVariant( pct: number ): "default" | "success" | "warning" | "danger" { if (pct >= 85) { return "danger"; } if (pct >= 60) { return "warning"; } return "default"; } export function Gauge({ value, min = 0, max = 100, label, unit, size = "md", variant, className, ...props }: GaugeProps) { const filterId = React.useId(); const config = sizeConfig[size]; const padding = config.stroke + 8; const svgDim = config.dim + padding * 2; const center = svgDim / 2; const radius = config.dim / 2 - config.stroke; const pct = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100)); const resolvedVariant = variant ?? autoVariant(pct); const color = variantColor[resolvedVariant]; // 270-degree arc: starts at 135° (bottom-left), ends at 45° (bottom-right) const startAngleDeg = 135; const sweepAngleDeg = 270; const arcLength = (sweepAngleDeg / 360) * 2 * Math.PI * radius; const fullCirc = 2 * Math.PI * radius; const gapLength = fullCirc - arcLength; // Arc start offset: rotate so the dasharray starts at 135° // strokeDashoffset shifts the dash start backwards along the path // Default circle path starts at 3 o'clock (0°). We want it to start at 135°. // Rotation of the circle element handles this instead. const filledLength = (pct / 100) * arcLength; // Animated value + needle const [displayValue, setDisplayValue] = React.useState(0); const [animatedPct, setAnimatedPct] = React.useState(0); React.useEffect(() => { const duration = 800; const start = performance.now(); function tick(now: number) { const progress = Math.min((now - start) / duration, 1); const eased = 1 - (1 - progress) ** 3; setDisplayValue(Math.round(min + (value - min) * eased)); setAnimatedPct(pct * eased); if (progress < 1) { requestAnimationFrame(tick); } } requestAnimationFrame(tick); }, [value, min, pct]); const needleAngleDeg = startAngleDeg + (animatedPct / 100) * sweepAngleDeg; const needleRad = (needleAngleDeg * Math.PI) / 180; // Tick marks const tickCount = 9; const ticks = Array.from({ length: tickCount }, (_, i) => { const angle = startAngleDeg + (i / (tickCount - 1)) * sweepAngleDeg; const rad = (angle * Math.PI) / 180; const inner = radius - config.stroke - 2; const outer = radius - 1; return { inner, major: i % 2 === 0, outer, rad }; }); // viewBox crops to just show the gauge (top portion + value text area) // The 270° arc goes from bottom-left through top to bottom-right // Bottom gap is 90° centered at 270° (bottom), so bottom of arc is at ~radius*sin(45°) below center const bottomCrop = radius * Math.sin(Math.PI / 4) * 0.35; const vbX = 0; const vbY = 0; const vbW = svgDim; const vbH = svgDim - bottomCrop; return (

{label ? ( {label} ) : null}

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L62",null,{"files":[{"path":"src/components/thegridcn/gauge.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]