4b:I[707087,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T16cc,"use client" import * as React from "react" import { ArrowUpRight } from "lucide-react" import { cn } from "@/lib/utils" import { type NumberFormat } from "@/registry/dashboardcn/lib/format" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { RadialGauge } from "@/registry/dashboardcn/ui/radial-gauge" import { MetricValue } from "@/registry/dashboardcn/ui/metric-value" export interface StatusGaugePerson { name: string /** Avatar image. Falls back to the first letter of the name. */ src?: string } export interface StatusGaugeCardProps extends React.ComponentProps { title: string /** Short status word, e.g. "Stable" or "In review". */ status: string /** Metric name shown before the value, e.g. "Server uptime". */ metricLabel: string value: number | string format?: NumberFormat currency?: string /** Gauge fill from 0 to 100. Defaults to value when value is a number. */ progress?: number /** Any CSS color for the gauge. */ color?: string /** Number of ticks in the gauge. 0 draws a continuous arc. */ segments?: number /** Space between ticks in degrees. Larger gaps make thinner ticks. */ segmentGap?: number /** Length of each tick in pixels. */ thickness?: number /** Gauge diameter in pixels. */ gaugeSize?: number /** Avatars shown under the metric. */ people?: StatusGaugePerson[] /** Text next to the avatars, e.g. "6 reviewers". */ peopleLabel?: string /** Header button. On narrow cards only the icon shows. */ action?: { label: string href?: string onClick?: () => void icon?: React.ReactNode } } /** A status card with a headline word, a metric, an avatar stack, and a segmented gauge. */ function StatusGaugeCard({ title, status, metricLabel, value, format = "percent", currency, progress, color = "var(--color-emerald-500)", segments = 40, segmentGap = 2.5, thickness = 14, gaugeSize = 200, people = [], peopleLabel, action, className, ...props }: StatusGaugeCardProps) { const numeric = typeof value === "number" const gauge = progress ?? (numeric ? (format === "percent" ? value * 100 : value) : 0) return ( {title} {action ? ( ) : null}

{status} {metricLabel}:{" "} {people.length || peopleLabel ? (

{people.length ? (

p.name).join(", ")} > {people.map((person) => ( {person.src ? ( // eslint-disable-next-line @next/next/no-img-element {person.name}

) : ( person.name.charAt(0).toUpperCase() )} ))}

) : null} {peopleLabel ? ( {peopleLabel} ) : null}

) : null}

) } export { StatusGaugeCard } 4e:T1152,import * as React from "react" import { cn } from "@/lib/utils" export interface RadialGaugeProps extends React.ComponentProps<"div"> { value: number min?: number max?: number /** Diameter in pixels. */ size?: number /** Stroke width in pixels. */ thickness?: number /** Number of arc segments. 0 draws a continuous arc. */ segments?: number /** Gap between segments in degrees. */ gap?: number /** Angle where the arc starts, in degrees clockwise from 12 o'clock. */ startAngle?: number /** Total sweep of the arc in degrees. 180 is a semicircle, 360 a ring. */ sweep?: number /** Any CSS color. Defaults to chart-1. */ color?: string trackColor?: string /** Content rendered in the middle of the gauge. */ children?: React.ReactNode } // Round so server and client render identical path strings. const round = (n: number) => Math.round(n * 1000) / 1000 function polar(cx: number, cy: number, r: number, angleDeg: number) { const rad = ((angleDeg - 90) * Math.PI) / 180 return { x: round(cx + r * Math.cos(rad)), y: round(cy + r * Math.sin(rad)) } } function arcPath(cx: number, cy: number, r: number, from: number, to: number) { const start = polar(cx, cy, r, from) const end = polar(cx, cy, r, to) const largeArc = to - from > 180 ? 1 : 0 return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 1 ${end.x} ${end.y}` } function RadialGauge({ value, min = 0, max = 100, size = 160, thickness = 10, segments = 0, gap = 2, startAngle, sweep = 180, color = "var(--chart-1)", trackColor = "var(--muted)", className, children, ...props }: RadialGaugeProps) { const fraction = Math.min(1, Math.max(0, (value - min) / (max - min || 1))) const start = startAngle ?? (sweep >= 360 ? 0 : -sweep / 2) const r = size / 2 - thickness / 2 const cx = size / 2 const cy = size / 2 // Trim the box to the arc's vertical extent so a semicircle does not // reserve a full circle of space. const angles = Array.from({ length: 64 }, (_, i) => start + (sweep * i) / 63) const ys = angles.map((a) => polar(cx, cy, r, a).y) const top = Math.max(0, Math.min(...ys) - thickness / 2) const bottom = Math.min(size, Math.max(...ys) + thickness / 2) const height = bottom - top const arcs: { from: number; to: number; filled: boolean }[] = [] if (segments > 0) { const step = sweep / segments for (let i = 0; i < segments; i++) { const from = start + i * step + gap / 2 const to = start + (i + 1) * step - gap / 2 const mid = (i + 0.5) / segments arcs.push({ from, to, filled: mid <= fraction }) } } return (

{children ? (

200 ? "inset-y-0" : "bottom-0" )} > {children}

) : null}

) } export { RadialGauge } 4f:T8a9,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { formatNumber, type NumberFormat } from "@/registry/dashboardcn/lib/format" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" /** Values at or above this are abbreviated by default. */ export const DEFAULT_COMPACT_FROM = 100_000 export interface MetricValueProps extends Omit, "children"> { /** Strings render as-is. */ value: number | string format?: NumberFormat currency?: string maximumFractionDigits?: number /** Values at or above this are abbreviated (e.g. $158K) with the full value in a tooltip. Set to Infinity to always show the full value. */ compactFrom?: number /** Text after the number, e.g. a unit. */ suffix?: React.ReactNode } /** A formatted number. Large values are abbreviated and reveal the full value on hover. */ function MetricValue({ value, format, currency, maximumFractionDigits, compactFrom = DEFAULT_COMPACT_FROM, suffix, className, ...props }: MetricValueProps) { const classes = cn("tabular-nums", className) if (typeof value !== "number") { return ( {value} {suffix} ) } const full = formatNumber(value, { format, currency, maximumFractionDigits }) const abbreviate = format !== "percent" && Math.abs(value) >= compactFrom if (!abbreviate) { return ( {full} {suffix} ) } return ( {formatNumber(value, { format, currency, compact: true })} {suffix} {full} {suffix} ) } export { MetricValue } 50:Tc05,export type NumberFormat = "number" | "compact" | "currency" | "percent" export interface FormatNumberOptions { format?: NumberFormat /** ISO 4217 code, used when format is "currency". Defaults to USD. */ currency?: string locale?: string maximumFractionDigits?: number /** Abbreviate large values, e.g. "$158K" instead of "$158,143". */ compact?: boolean } const formatterCache = new Map() function getFormatter(locale: string, options: Intl.NumberFormatOptions) { const key = locale + JSON.stringify(options) let formatter = formatterCache.get(key) if (!formatter) { formatter = new Intl.NumberFormat(locale, options) formatterCache.set(key, formatter) } return formatter } /** * Format a metric value for display. * * formatNumber(1234567) -> "1,234,567" * formatNumber(1234567, { format: "compact" }) -> "1.2M" * formatNumber(48.2, { format: "currency" }) -> "$48.20" * formatNumber(158143, { format: "currency", compact: true }) -> "$158K" * formatNumber(0.124, { format: "percent" }) -> "12.4%" */ export function formatNumber( value: number, { format = "number", currency = "USD", locale = "en-US", maximumFractionDigits, compact = false, }: FormatNumberOptions = {} ): string { if (!Number.isFinite(value)) return "—" // Compact values keep three significant digits: $158K, $1.23M, 41.2K. const compactOptions: Intl.NumberFormatOptions = compact ? maximumFractionDigits === undefined ? { notation: "compact", maximumSignificantDigits: 3 } : { notation: "compact", maximumFractionDigits } : {} switch (format) { case "compact": return getFormatter(locale, { notation: "compact", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) case "currency": return getFormatter(locale, { style: "currency", currency, maximumFractionDigits: maximumFractionDigits ?? 2, ...compactOptions, }).format(value) case "percent": return getFormatter(locale, { style: "percent", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) default: return getFormatter(locale, { maximumFractionDigits: maximumFractionDigits ?? 0, ...compactOptions, }).format(value) } } /** * Format a fractional change as a signed percentage. * * formatDelta(0.124) -> "+12.4%" * formatDelta(-0.03) -> "-3.0%" * formatDelta(0) -> "0.0%" */ export function formatDelta(delta: number, locale = "en-US"): string { if (!Number.isFinite(delta)) return "—" return getFormatter(locale, { style: "percent", signDisplay: "exceptZero", maximumFractionDigits: 1, minimumFractionDigits: 1, }).format(delta) } /** * Fractional change between two values. Returns 0 when there is no baseline. */ export function computeDelta(current: number, previous: number): number { if (!previous) return 0 return (current - previous) / Math.abs(previous) } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4b",null,{"namespace":"@dashboardcn","registryDependencies":["card","button","tooltip"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/blocks/status-gauge-card.tsx","content":"$4d","type":"registry:component"},{"path":"registry/dashboardcn/ui/radial-gauge.tsx","content":"$4e","type":"registry:ui"},{"path":"registry/dashboardcn/ui/metric-value.tsx","content":"$4f","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$50","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]