4c: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"] 4d: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"] 4e:T1498,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { computeDelta, formatNumber, type NumberFormat, } from "@/registry/dashboardcn/lib/format" import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { BarChart, type BarChartProps, type BarRow } from "@/registry/dashboardcn/ui/bar-chart" import { DeltaBadge } from "@/registry/dashboardcn/ui/delta-badge" import { PeriodTabs } from "@/registry/dashboardcn/ui/period-tabs" export interface RangeOption { value: string label: string /** How many trailing rows of data this range shows. */ points: number } export interface PeriodBarChartCardProps extends React.ComponentProps { title: string data: BarRow[] xKey: string yKey: string /** Key that groups bars into selectable periods, e.g. "month" for weekly rows. Defaults to xKey. */ groupKey?: string /** Range options for the switcher. Omit to show every row and hide the switcher. */ ranges?: RangeOption[] defaultRange?: string /** Group value drawn in color. Defaults to the last group in view. */ selected?: string defaultSelected?: string onSelectedChange?: (group: string) => void /** Words after the period in the subtitle, e.g. "spending" renders "March spending". */ valueLabel?: string format?: NumberFormat currency?: string variant?: BarChartProps["variant"] color?: string mutedColor?: string grid?: BarChartProps["grid"] xFormatter?: BarChartProps["xFormatter"] tooltipLabel?: BarChartProps["tooltipLabel"] chartClassName?: string } function sum(rows: BarRow[], key: string) { return rows.reduce((total, row) => total + (Number(row[key]) || 0), 0) } /** A card with a total for the selected period, a range switcher, and a bar chart. Click a bar to select its period. */ function PeriodBarChartCard({ title, data, xKey, yKey, groupKey = xKey, ranges, defaultRange, selected: selectedProp, defaultSelected, onSelectedChange, valueLabel, format = "currency", currency, variant, color, mutedColor, grid, xFormatter, tooltipLabel, chartClassName, className, ...props }: PeriodBarChartCardProps) { const [range, setRange] = React.useState(defaultRange ?? ranges?.[0]?.value) const points = ranges?.find((option) => option.value === range)?.points const rows = React.useMemo( () => (points ? data.slice(Math.max(0, data.length - points)) : data), [data, points] ) const groups = React.useMemo(() => { const order: string[] = [] for (const row of rows) { const group = String(row[groupKey]) if (order[order.length - 1] !== group) order.push(group) } return order }, [rows, groupKey]) const [selectedState, setSelectedState] = React.useState(defaultSelected) const selected = selectedProp ?? (selectedState && groups.includes(selectedState) ? selectedState : groups.at(-1)) const setSelected = (group: string) => { setSelectedState(group) onSelectedChange?.(group) } const selectedRows = rows.filter((row) => String(row[groupKey]) === selected) const previousGroup = groups[groups.indexOf(selected ?? "") - 1] const previousRows = previousGroup ? rows.filter((row) => String(row[groupKey]) === previousGroup) : [] const total = sum(selectedRows, yKey) const delta = previousRows.length ? computeDelta(total, sum(previousRows, yKey)) : undefined const yFormatter = React.useCallback( (value: number) => formatNumber(value, { format, currency }), [format, currency] ) return ( {title} {yFormatter(total)}

{delta !== undefined ? : null} {selected} {valueLabel ? ` ${valueLabel}` : null} {previousGroup ? ` vs ${previousGroup}` : null}

{ranges?.length ? ( ) : null} String(row[groupKey]) === selected} yFormatter={yFormatter} xFormatter={xFormatter} tooltipLabel={tooltipLabel} onBarClick={(row) => setSelected(String(row[groupKey]))} className={cn("h-56", chartClassName)} /> ) } export { PeriodBarChartCard } 4f:T24d3,"use client" import * as React from "react" import { Bar, BarChart as RechartsBarChart, CartesianGrid, Cell, Rectangle, ReferenceLine, XAxis, YAxis, } from "recharts" import { cn } from "@/lib/utils" import { ChartContainer, ChartTooltip } from "@/components/ui/chart" export type BarRow = Record export interface BarReferenceLine { /** Horizontal line at this y value. */ y: number label?: string /** Any CSS color. Defaults to the muted foreground. */ color?: string /** Defaults to dashed. */ dashed?: boolean } export interface BarChartProps extends Omit, "config" | "children"> { data: BarRow[] /** Key of the x-axis value in each row. */ xKey: string /** Key of the bar value in each row. */ yKey: string /** * Key of a coarser label, e.g. "month" for weekly rows. When set, the x-axis * shows one tick per group centered under its bars instead of a tick per bar. */ groupKey?: string /** "gradient" fades each bar toward the bottom; "striped" fills it with diagonal bands. */ variant?: "gradient" | "striped" | "solid" /** Any CSS color for highlighted bars. Defaults to chart-1. */ color?: string /** Any CSS color for bars that are not highlighted. Defaults to the muted foreground. */ mutedColor?: string /** Return true for bars drawn in color. Every bar is highlighted when omitted. */ highlight?: (row: BarRow, index: number) => boolean grid?: "dashed" | "solid" | "none" showYAxis?: boolean showTooltip?: boolean /** Draw a hollow ring on top of the hovered bar. */ showActiveMarker?: boolean barRadius?: number /** Horizontal lines, e.g. a goal or an average. The y-axis extends to fit them. */ referenceLines?: BarReferenceLine[] xFormatter?: (value: unknown) => string yFormatter?: (value: number) => string /** Secondary line of the tooltip. Defaults to the formatted x value. */ tooltipLabel?: (row: BarRow, index: number) => React.ReactNode onBarClick?: (row: BarRow, index: number) => void } 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) } /** One tick per group, placed under the middle bar of the group. */ function groupTicks(data: BarRow[], groupKey: string) { const labels: string[] = Array.from({ length: data.length }, () => "") let start = 0 for (let i = 1; i <= data.length; i++) { if (i === data.length || data[i]![groupKey] !== data[start]![groupKey]) { labels[Math.floor((start + i - 1) / 2)] = String(data[start]![groupKey] ?? "") start = i } } return labels } interface ShapeProps { x?: number y?: number width?: number height?: number index?: number } /** A single-series bar chart with gradient or striped fills, highlighted bars, and a hover marker. */ function BarChart({ data, xKey, yKey, groupKey, variant = "gradient", color = "var(--chart-1)", mutedColor = "var(--muted-foreground)", highlight, grid = "dashed", showYAxis = false, showTooltip = true, showActiveMarker = true, barRadius = 6, referenceLines = [], xFormatter = defaultXFormatter, yFormatter, tooltipLabel, onBarClick, className, ...props }: BarChartProps) { const id = React.useId() const isHighlighted = React.useCallback( (index: number) => (highlight ? highlight(data[index]!, index) : true), [data, highlight] ) const tickLabels = React.useMemo( () => (groupKey ? groupTicks(data, groupKey) : null), [data, groupKey] ) const fillFor = (index: number) => `url(#${id}-${isHighlighted(index) ? "on" : "off"})` const activeBar = (shape: ShapeProps) => { const { x = 0, y = 0, width = 0, height = 0, index = 0 } = shape const on = isHighlighted(index) return ( {showActiveMarker && height > 0 ? ( ) : null} ) } return ( {variant === "gradient" ? ( <> ) : variant === "striped" ? ( <> {(["on", "off"] as const).map((state) => { const fill = state === "on" ? color : mutedColor const opacity = state === "on" ? 1 : 0.3 return ( ) })} ) : ( <> )} {grid !== "none" ? ( ) : null} tickLabels[index] ?? "" : (v) => xFormatter(v) } /> {showTooltip ? ( { const entry = payload?.[0] if (!active || !entry) return null const row = entry.payload as BarRow const index = data.indexOf(row) const value = Number(row[yKey]) return (

{yFormatter ? yFormatter(value) : String(value)}

{tooltipLabel ? tooltipLabel(row, index) : xFormatter(row[xKey])}

) }} /> ) : null} onBarClick(data[index]!, index) : undefined } className={onBarClick ? "cursor-pointer" : undefined} > {data.map((_, index) => ( ))} {referenceLines.map((line, index) => ( ))} ) } export { BarChart } 50: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 } 51:Td4a,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" export interface PeriodOption { value: string label: string } export const defaultPeriods: PeriodOption[] = [ { value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }, ] export interface PeriodTabsProps extends Omit, "children"> { options?: PeriodOption[] size?: "sm" | "default" /** Slide a single pill between tabs instead of swapping backgrounds. */ animated?: boolean } interface IndicatorRect { left: number top: number width: number height: number } /** Small segmented control for switching a chart's time range. */ function PeriodTabs({ options = defaultPeriods, size = "sm", animated = false, className, value, defaultValue, onValueChange, ...props }: PeriodTabsProps) { const listRef = React.useRef(null) const [internalValue, setInternalValue] = React.useState( defaultValue ?? options[0]?.value ) const active = value ?? internalValue const [rect, setRect] = React.useState(null) const measure = React.useCallback(() => { const list = listRef.current if (!list) return const trigger = list.querySelector('[data-state="active"]') if (!trigger) return setRect({ left: trigger.offsetLeft, top: trigger.offsetTop, width: trigger.offsetWidth, height: trigger.offsetHeight, }) }, []) React.useLayoutEffect(() => { if (!animated) return measure() }, [animated, active, options, size, measure]) React.useEffect(() => { if (!animated || !listRef.current) return const observer = new ResizeObserver(measure) observer.observe(listRef.current) return () => observer.disconnect() }, [animated, measure]) return ( { setInternalValue(next) onValueChange?.(next) }} {...props} > {animated && rect ? ( ) : null} {options.map((option) => ( {option.label} ))} ) } export { PeriodTabs } 52: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":[["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@dashboardcn","registryDependencies":["card","chart","tabs"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/dashboardcn/blocks/period-bar-chart-card.tsx","content":"$4e","type":"registry:component"},{"path":"registry/dashboardcn/ui/bar-chart.tsx","content":"$4f","type":"registry:ui"},{"path":"registry/dashboardcn/ui/delta-badge.tsx","content":"$50","type":"registry:ui"},{"path":"registry/dashboardcn/ui/period-tabs.tsx","content":"$51","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$52","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]