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:T1570,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { type NumberFormat } from "@/registry/dashboardcn/lib/format" import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DotPlot } from "@/registry/dashboardcn/ui/dot-plot" import { MetricValue } from "@/registry/dashboardcn/ui/metric-value" export interface DotPlotCardProps extends Omit, "children"> { title: string /** Headline value. Numbers are formatted with `format`; strings render as-is. */ value: number | string format?: NumberFormat /** ISO 4217 code, used when `format` is "currency". */ currency?: string /** One value per column of the dot plot. */ data: number[] /** Label per column. The peak's label is shown in the pill, e.g. "Wed". */ labels?: string[] /** Text before the peak's label in the pill, e.g. "Peak" for "Peak: Wed". */ peakLabel?: string /** Absolute change vs the previous period, in the same unit as `value`, e.g. 34002 for +34,002. */ delta?: number /** Context for the delta, e.g. "vs last period". */ deltaLabel?: string /** Format for the delta. Defaults to `format`, except a compact value gets a full number so "+34,002" is not lost to "+34K". */ deltaFormat?: NumberFormat /** Any CSS color for the dots. Defaults to chart-1. */ color?: string /** Number of dots in the tallest column. */ rows?: number /** Formats a column's value in the pill while it is hovered. Defaults to a plain grouped number. */ valueFormatter?: (value: number) => string /** Slot in the top-right corner, e.g. a menu button. */ action?: React.ReactNode } const signedFormatters = new Map() /** "+34,002", "-1.2K", or "+$390" depending on the format. */ function formatSigned(value: number, format: NumberFormat, currency: string) { const key = `${format}:${currency}` let formatter = signedFormatters.get(key) if (!formatter) { formatter = new Intl.NumberFormat("en-US", { ...(format === "currency" ? { style: "currency", currency } : {}), ...(format === "percent" ? { style: "percent" } : {}), ...(format === "compact" ? { notation: "compact" } : {}), signDisplay: "exceptZero", maximumFractionDigits: format === "number" ? 0 : 1, }) signedFormatters.set(key, formatter) } return formatter.format(value) } /** A metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period. */ function DotPlotCard({ title, value, format = "number", currency = "USD", data, labels, peakLabel = "Peak", delta, deltaLabel = "vs last period", deltaFormat = format === "compact" ? "number" : format, color = "var(--chart-1)", rows = 6, valueFormatter = (columnValue) => columnValue.toLocaleString("en-US"), action, className, ...props }: DotPlotCardProps) { const [active, setActive] = React.useState(null) const peak = labels?.[data.indexOf(Math.max(...data))] // The pill doubles as the hover readout: it shows the peak by default and the hovered column's value while hovering. const pill = active !== null ? ( <> {labels?.[active] !== undefined ? `${labels[active]}: ` : null} {valueFormatter(data[active] ?? 0)} ) : peak !== undefined ? ( <> {peakLabel}: {peak} ) : null return ( {title} {action ? {action} : null} {/* Narrow: pill, then value and delta side by side, then the plot on its own row. From 24rem: value | plot | delta on one row with the pill centered above the plot. */}

{pill !== null ? ( {pill} ) : null} {delta !== undefined ? (

{deltaLabel} {formatSigned(delta, deltaFormat, currency)}

) : null}

) } export { DotPlotCard } 4e:T1335,"use client" import * as React from "react" import { cn } from "@/lib/utils" export interface DotPlotProps extends React.ComponentProps<"div"> { /** One value per column, in order. */ data: number[] /** Optional label per column, shown in the tooltip and used for the accessible name. */ labels?: string[] /** The value that fills a column. Defaults to the largest value in `data`. */ max?: number /** Number of dots in a full column. */ rows?: number /** Any CSS color. Defaults to chart-1. */ color?: string /** * Columns at or above this fraction of `max` are drawn at full strength and the * rest are faded, so the peak stands out. Set to 0 to draw every column at full strength. */ emphasis?: number /** Opacity of the faded columns. */ fadedOpacity?: number /** Show a tooltip with the column's label and value while it is hovered. */ showTooltip?: boolean /** Formats the value in the tooltip. Defaults to a plain grouped number. */ valueFormatter?: (value: number) => string /** Index of the hovered column, to control it from outside. */ activeIndex?: number | null /** Called when the hovered column changes, with null when the pointer leaves. */ onActiveIndexChange?: (index: number | null) => void } const defaultFormatter = (value: number) => value.toLocaleString("en-US") /** * A distribution drawn as columns of stacked dots, with the peak columns at full strength. * Hovering a column lights it up, fades the others, and shows its value. */ function DotPlot({ data, labels, max, rows = 6, color = "var(--chart-1)", emphasis = 0.5, fadedOpacity = 0.35, showTooltip = true, valueFormatter = defaultFormatter, activeIndex, onActiveIndexChange, className, ...props }: DotPlotProps) { const [internal, setInternal] = React.useState(null) const active = activeIndex === undefined ? internal : activeIndex const setActive = (index: number | null) => { setInternal(index) onActiveIndexChange?.(index) } const top = max ?? Math.max(0, ...data) const peak = data.indexOf(Math.max(...data)) const peakLabel = labels?.[peak] return (

setActive(null)} className={cn( // Dot size and gap are variables so they can be tuned from className, e.g. "[--dot-size:0.75rem]". "flex w-full justify-center [--dot-gap:0.25rem] [--dot-size:0.625rem]", className )} {...props} > {data.map((value, index) => { const fraction = Math.min(1, Math.max(0, value / (top || 1))) // Any non-zero value shows at least one dot so small values still register. const count = fraction === 0 ? 0 : Math.max(1, Math.round(fraction * rows)) const strong = emphasis <= 0 || fraction >= emphasis // While a column is hovered it alone is lit; otherwise the emphasized columns are. const lit = active === null ? strong : active === index const label = labels?.[index] return (

setActive(index)} // Columns stretch to the full height and carry the gap as padding, so the hover target has no dead zones. // They share the width equally and cap at the dot size, so dots shrink in narrow cards instead of overflowing. className="relative flex min-w-0 flex-1 cursor-default flex-col-reverse justify-start gap-(--dot-gap) px-[calc(var(--dot-gap)/2)] max-w-[calc(var(--dot-size)+var(--dot-gap))]" > {Array.from({ length: count }, (_, dot) => ( ))} {showTooltip && active === index ? ( ) : null}

) })}

) } export { DotPlot } 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","tooltip"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/blocks/dot-plot-card.tsx","content":"$4d","type":"registry:component"},{"path":"registry/dashboardcn/ui/dot-plot.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"}]]}]