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:Tdc1,import * as React from "react" import { cn } from "@/lib/utils" import { formatNumber } from "@/registry/dashboardcn/lib/format" export interface BarListItem { name: string value: number /** Renders the label as a link. */ href?: string icon?: React.ReactNode /** Stable key when names can repeat. */ key?: string } export interface BarListProps extends React.ComponentProps<"div"> { data: BarListItem[] valueFormatter?: (value: number) => string sortOrder?: "descending" | "ascending" | "none" /** Any CSS color. Defaults to chart-1. */ color?: string /** Show each row's share of the total next to its value. */ showPercentage?: boolean onItemClick?: (item: BarListItem) => void } function BarList({ data, valueFormatter = (value) => formatNumber(value, { format: "compact" }), sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, onItemClick, className, ...props }: BarListProps) { const items = React.useMemo(() => { if (sortOrder === "none") return data const sorted = [...data].sort((a, b) => a.value - b.value) return sortOrder === "descending" ? sorted.reverse() : sorted }, [data, sortOrder]) const max = Math.max(...items.map((item) => item.value), 0) const total = items.reduce((sum, item) => sum + item.value, 0) return (

{items.map((item) => { const width = max > 0 ? (item.value / max) * 100 : 0 const share = total > 0 ? item.value / total : 0 const interactive = Boolean(item.href || onItemClick) const Label = item.href ? "a" : onItemClick ? "button" : "div" return (

onItemClick(item) } : {})} className={cn( "relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline" )} > {item.icon ? ( {item.icon} ) : null} {item.name}

{valueFormatter(item.value)} {showPercentage ? ( {formatNumber(share, { format: "percent" })} ) : null}

) })}

) } export { BarList } 4e: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) } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/ui/bar-list.tsx","content":"$4d","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$4e","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]