4d: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"] 4e: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"] 4f:T1bf8,"use client" import * as React from "react" import { CartesianGrid, Scatter, ScatterChart as RechartsScatterChart, XAxis, YAxis, ZAxis, } from "recharts" import { cn } from "@/lib/utils" import { formatNumber } from "@/registry/dashboardcn/lib/format" import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart" export interface ScatterSeries { /** Stable identifier. Defaults to a slug of the label. */ key?: string label: string /** Rows for this series. Each needs the x and y keys, plus the size and name keys when set. */ data: Record[] /** Any CSS color. Defaults to chart-1 through chart-5 in order. */ color?: string } export interface ScatterChartProps extends Omit, "config" | "children"> { series: ScatterSeries[] /** Key of the x value in each row. */ xKey: string /** Key of the y value in each row. */ yKey: string /** Key of a value that scales each point into a bubble. */ sizeKey?: string /** Key of a per-point label shown as the tooltip title. */ nameKey?: string /** Names for the tooltip rows. Default to the keys. */ xLabel?: string yLabel?: string sizeLabel?: string showGrid?: boolean showXAxis?: boolean showYAxis?: boolean showLegend?: boolean showTooltip?: boolean xFormatter?: (value: number) => string yFormatter?: (value: number) => string sizeFormatter?: (value: number) => string /** Radius of each point in px when sizeKey is not set. */ dotRadius?: number /** Bubble area range in px² when sizeKey is set, smallest to largest. */ sizeRange?: [number, number] /** Recharts domain for the x-axis, e.g. ["auto", "auto"]. Defaults to [0, "auto"]. */ xDomain?: React.ComponentProps["domain"] /** Recharts domain for the y-axis, e.g. ["auto", "auto"]. Defaults to [0, "auto"]. */ yDomain?: React.ComponentProps["domain"] } /** Hidden key stamped onto each row so the tooltip can find the point's series. */ const SERIES_KEY = "__scatterSeries" function slug(label: string) { return label.toLowerCase().replace(/[^a-z0-9]+/g, "-") } interface ScatterTooltipContentProps extends Pick, "active" | "payload"> { config: ChartConfig rows: { key: string; label: string; format: (value: number) => string }[] nameKey?: string } function ScatterTooltipContent({ active, payload, config, rows, nameKey, }: ScatterTooltipContentProps) { const point = payload?.[0]?.payload as Record | undefined if (!active || !point) return null const seriesKey = String(point[SERIES_KEY] ?? "") const seriesLabel = config[seriesKey]?.label ?? seriesKey const name = nameKey ? point[nameKey] : undefined const title = name != null ? String(name) : seriesLabel return (

{title} {name != null ? ( {seriesLabel} ) : null}

{rows.map((row) => (

{row.label} {row.format(Number(point[row.key]))}

))}

) } /** A scatter chart on shadcn's chart primitives: correlation dots per series, or bubbles when a size key is set. */ function ScatterChart({ series, xKey, yKey, sizeKey, nameKey, xLabel, yLabel, sizeLabel, showGrid = true, showXAxis = true, showYAxis = true, showLegend = false, showTooltip = true, xFormatter = (value) => formatNumber(value, { format: "compact" }), yFormatter = (value) => formatNumber(value, { format: "compact" }), sizeFormatter = (value) => formatNumber(value, { format: "compact" }), dotRadius = 4, sizeRange = [40, 400], xDomain, yDomain, className, ...props }: ScatterChartProps) { const resolved = React.useMemo( () => series.map((s, index) => { const key = s.key ?? slug(s.label) return { key, label: s.label, color: s.color ?? `var(--chart-${(index % 5) + 1})`, data: s.data.map((row) => ({ ...row, [SERIES_KEY]: key })), } }), [series] ) const config = Object.fromEntries( resolved.map((s) => [s.key, { label: s.label, color: s.color }]) ) satisfies ChartConfig const rows = [ { key: xKey, label: xLabel ?? xKey, format: xFormatter }, { key: yKey, label: yLabel ?? yKey, format: yFormatter }, ...(sizeKey ? [{ key: sizeKey, label: sizeLabel ?? sizeKey, format: sizeFormatter }] : []), ] // Recharts sizes symbols by area, so a fixed radius becomes a fixed area. const dotArea = Math.round(Math.PI * dotRadius * dotRadius) return ( {showGrid ? : null} {sizeKey ? ( ) : ( )} {showTooltip ? ( } /> ) : null} {showLegend ? } /> : null} {resolved.map((s) => { const color = `var(--color-${s.key})` return ( ) })} ) } export { ScatterChart } 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) } 4c:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L4d",null,{"namespace":"@dashboardcn","registryDependencies":["chart"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/dashboardcn/ui/scatter-chart.tsx","content":"$4f","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$50","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]