"use client" import * as React from "react" import { useLocale } from "./lib/locale" import { cn } from "./lib/utils" type GaugeProps = Omit, "children"> & { value: number min?: number max?: number /** Under the number, e.g. "Uptime". Also the meter's accessible name unless aria-label is set. */ label?: string /** How the number is written, e.g. `{ style: "percent" }` (then pass 0.82 for 82%) or `{ maximumFractionDigits: 0 }`. */ formatOptions?: Intl.NumberFormatOptions locale?: string /** Width in pixels; the height is about half of it. */ size?: number thickness?: number /** * Colors by level, lowest first: the last one the value reaches wins, e.g. * `[{ from: 0, className: "text-destructive" }, { from: 60, className: "text-warning" }, { from: 85, className: "text-success" }]`. * Without it, the arc takes the text color (text-primary by default). */ levels?: { from: number; className: string }[] } /** * A single value within a known range, as a half ring — a score, a quota, a target. It's a `meter` for assistive * technology, with the formatted value as its text. The arc fills from empty when it first shows. */ function Gauge({ value, min = 0, max = 100, label, formatOptions, locale: localeProp, size = 180, thickness = 14, levels, className, "aria-label": ariaLabel, ...props }: GaugeProps) { const { locale: contextLocale } = useLocale() const locale = localeProp ?? contextLocale const [drawn, setDrawn] = React.useState(false) React.useEffect(() => setDrawn(true), []) const share = Math.min(1, Math.max(0, (value - min) / (max - min || 1))) const text = new Intl.NumberFormat(locale, formatOptions).format(value) const level = levels?.filter((l) => value >= l.from).at(-1) const r = (size - thickness) / 2 const cy = size / 2 const arc = `M ${thickness / 2} ${cy} A ${r} ${r} 0 0 1 ${size - thickness / 2} ${cy}` return (

{text} {label && {label}}

{new Intl.NumberFormat(locale, formatOptions).format(min)} {new Intl.NumberFormat(locale, formatOptions).format(max)}

) } export { Gauge }