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:Ted3,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { formatNumber, type NumberFormat } from "@/registry/dashboardcn/lib/format" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ComposedChart, type ReferenceLineSpec } from "@/registry/dashboardcn/ui/composed-chart" import { DeltaBadge } from "@/registry/dashboardcn/ui/delta-badge" import { MetricValue } from "@/registry/dashboardcn/ui/metric-value" export interface BalanceStat { label: string value: number | string delta?: number format?: NumberFormat /** Any CSS color for the value, e.g. emerald for a high. */ color?: string } export interface BalanceChartCardProps extends React.ComponentProps { title: string value: number delta?: number deltaLabel?: string format?: NumberFormat currency?: string stats?: BalanceStat[] data: Record[] xKey: string yKey: string seriesLabel?: string /** Horizontal reference, e.g. previous close. */ referenceValue?: number referenceLabel?: string /** Mark the highest point. */ highlightMax?: boolean chartClassName?: string } /** A balance or price card with a big value, stat row, and line chart. */ function BalanceChartCard({ title, value, delta, deltaLabel, format = "currency", currency, stats = [], data, xKey, yKey, seriesLabel = "Balance", referenceValue, referenceLabel, highlightMax = true, chartClassName, className, ...props }: BalanceChartCardProps) { const yFormatter = React.useCallback( (v: number) => formatNumber(v, { format, currency, maximumFractionDigits: 0 }), [format, currency] ) const referenceLines: ReferenceLineSpec[] = referenceValue !== undefined ? [{ y: referenceValue, label: referenceLabel, dashed: true }] : [] return ( {title} {delta !== undefined ? ( {deltaLabel ? ( {deltaLabel} ) : null} ) : null} {stats.length ? ( {stats.map((stat) => (

{stat.label} {stat.delta !== undefined ? ( ) : null}

))} ) : null} ) } export { BalanceChartCard } 4e:T24fa,"use client" import * as React from "react" import { Area, Bar, CartesianGrid, ComposedChart as RechartsComposedChart, Line, ReferenceDot, ReferenceLine, XAxis, YAxis, } from "recharts" import { cn } from "@/lib/utils" import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart" export interface ComposedSeries { /** Key in each data row. */ key: string label: string type?: "area" | "line" | "bar" /** Any CSS color. Defaults to chart-1 through chart-5 in order. */ color?: string /** Plot against the right axis. */ axis?: "left" | "right" /** Series with the same stackId stack on top of each other. */ stackId?: string /** Bars only: fill with a diagonal hatch instead of a solid color. */ pattern?: "solid" | "hatched" /** Lines and areas only. */ dashed?: boolean curve?: "monotone" | "linear" | "step" /** Lines only: draw a dot on every point. */ dots?: boolean /** Mark the highest point of this series with a dot. */ highlightMax?: boolean } export interface ReferenceLineSpec { /** Horizontal line at this y value. */ y?: number /** Vertical line at this x value. */ x?: string | number label?: string /** Any CSS color. Defaults to the muted foreground. */ color?: string dashed?: boolean axis?: "left" | "right" } export interface ComposedChartProps extends Omit, "config" | "children"> { data: Record[] /** Key of the x-axis value in each row. */ xKey: string series: ComposedSeries[] referenceLines?: ReferenceLineSpec[] showGrid?: boolean showYAxis?: boolean showLegend?: boolean showTooltip?: boolean xFormatter?: (value: unknown) => string yFormatter?: (value: number) => string rightYFormatter?: (value: number) => string barRadius?: number /** "zero" starts the y-axis at 0; "auto" fits it to the data. */ yDomain?: "zero" | "auto" | [number, number] } function defaultXFormatter(value: unknown) { if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value)) { const [y, m, d] = value.split("-").map(Number) return new Date(y!, m! - 1, d).toLocaleDateString("en-US", { month: "short", day: "numeric", }) } return String(value) } function ComposedChart({ data, xKey, series, referenceLines = [], showGrid = true, showYAxis = false, showLegend = false, showTooltip = true, xFormatter = defaultXFormatter, yFormatter, rightYFormatter, barRadius = 4, yDomain = "zero", className, ...props }: ComposedChartProps) { const id = React.useId() const config = Object.fromEntries( series.map((s, index) => [ s.key, { label: s.label, color: s.color ?? `var(--chart-${(index % 5) + 1})` }, ]) ) satisfies ChartConfig const hasRightAxis = series.some((s) => s.axis === "right") const domain = yDomain === "auto" ? (["auto", "auto"] as const) : yDomain === "zero" ? undefined : yDomain const maxPoints = series .filter((s) => s.highlightMax) .map((s) => { let best: { x: unknown; y: number } | null = null for (const row of data) { const y = Number(row[s.key]) if (Number.isFinite(y) && (!best || y > best.y)) best = { x: row[xKey], y } } return best ? { ...best, key: s.key, axis: s.axis ?? "left" } : null }) .filter((p): p is NonNullable => p !== null) return ( {series.map((s) => ( ))} {showGrid ? : null} {hasRightAxis ? ( ) : null} {showTooltip ? ( xFormatter(value)} formatter={(value, name, item) => { const s = series.find((entry) => entry.key === name) const fmt = s?.axis === "right" ? (rightYFormatter ?? yFormatter) : yFormatter return (

{config[name as string]?.label ?? name} {fmt ? fmt(Number(value)) : String(value)}

) }} /> } /> ) : null} {showLegend ? } /> : null} {series.map((s) => { const color = `var(--color-${s.key})` const common = { dataKey: s.key, yAxisId: s.axis ?? "left", stackId: s.stackId, isAnimationActive: false, } if (s.type === "bar") { return ( ) } if (s.type === "line") { return ( ) } return ( ) })} {referenceLines.map((line, index) => ( ))} {maxPoints.map((point) => ( ))} ) } export { ComposedChart } 4f:T84d,import * as React from "react" import { Minus, TrendingDown, TrendingUp } from "lucide-react" import { cn } from "@/lib/utils" import { formatDelta } from "@/registry/dashboardcn/lib/format" export type DeltaDirection = "up" | "down" | "flat" export function getDeltaDirection(delta: number | undefined): DeltaDirection { if (delta === undefined || delta === 0 || !Number.isFinite(delta)) return "flat" return delta > 0 ? "up" : "down" } const directionIcon: Record = { up: TrendingUp, down: TrendingDown, flat: Minus, } export interface DeltaBadgeProps extends React.ComponentProps<"span"> { /** Fractional change, e.g. 0.124 for +12.4%. */ delta: number /** Treat a decrease as good and an increase as bad (churn, latency, errors). */ invert?: boolean variant?: "outline" | "soft" | "text" showIcon?: boolean } function DeltaBadge({ delta, invert = false, variant = "outline", showIcon = true, className, children, ...props }: DeltaBadgeProps) { const direction = getDeltaDirection(delta) const positive = direction === "flat" ? null : (direction === "up") !== invert const Icon = directionIcon[direction] return ( {showIcon ? ) } export { DeltaBadge } 50: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 } 51: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":[["$","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4b",null,{"namespace":"@dashboardcn","registryDependencies":["card","chart","tooltip"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/blocks/balance-chart-card.tsx","content":"$4d","type":"registry:component"},{"path":"registry/dashboardcn/ui/composed-chart.tsx","content":"$4e","type":"registry:ui"},{"path":"registry/dashboardcn/ui/delta-badge.tsx","content":"$4f","type":"registry:ui"},{"path":"registry/dashboardcn/ui/metric-value.tsx","content":"$50","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$51","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]