4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T33a8,"use client"; import { Alert02Icon, MinusSignIcon, TradeDownIcon, TradeUpIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useId } from "react"; import type { ComponentProps, ReactNode } from "react"; import { Area, AreaChart, XAxis, YAxis } from "recharts"; import { NeonLoader } from "@/components/neon-loader/neon-loader"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import type { ChartConfig } from "@/components/ui/chart"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; export type MetricFormat = | "number" | "bytes" | "percent" | "currency" | "duration"; export interface MetricTrendPoint { label: string; value: number; } const NUMBER_FORMAT = new Intl.NumberFormat("en-US"); const CURRENCY_FORMAT = new Intl.NumberFormat("en-US", { currency: "USD", style: "currency", }); const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB", "PB"] as const; const BYTE_STEP = 1024; const SECONDS_PER_MINUTE = 60; const SECONDS_PER_HOUR = 3600; const formatBytes = (bytes: number) => { if (bytes === 0) { return "0 B"; } const exponent = Math.min( Math.floor(Math.log(Math.abs(bytes)) / Math.log(BYTE_STEP)), BYTE_UNITS.length - 1 ); const value = bytes / BYTE_STEP ** exponent; return `${value.toFixed(value >= 100 || exponent === 0 ? 0 : 1)} ${BYTE_UNITS[exponent]}`; }; const formatDuration = (seconds: number) => { if (seconds < SECONDS_PER_MINUTE) { return `${Math.round(seconds)}s`; } if (seconds < SECONDS_PER_HOUR) { return `${Math.floor(seconds / SECONDS_PER_MINUTE)}m ${Math.round(seconds % SECONDS_PER_MINUTE)}s`; } return `${Math.floor(seconds / SECONDS_PER_HOUR)}h ${Math.floor((seconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE)}m`; }; const formatValue = (value: number | string, format: MetricFormat) => { if (typeof value === "string") { return value; } switch (format) { case "bytes": { return formatBytes(value); } case "percent": { return `${NUMBER_FORMAT.format(value)}%`; } case "currency": { return CURRENCY_FORMAT.format(value); } case "duration": { return formatDuration(value); } default: { return NUMBER_FORMAT.format(value); } } }; const deltaDirection = (delta: number | undefined): "up" | "down" | "flat" => { if (delta === undefined || delta === 0) { return "flat"; } return delta > 0 ? "up" : "down"; }; const DeltaBadge = ({ delta }: { delta: number }) => { const direction = deltaDirection(delta); return ( {direction === "up" ? ( ) : null} {direction === "down" ? ( ) : null} {direction === "flat" ? ( ) : null} {direction === "up" ? "+" : ""} {NUMBER_FORMAT.format(Math.abs(delta))}% ); }; const CHART_HEIGHT = 56; interface TrendPoint extends MetricTrendPoint { index: number; } const normalizeTrend = (trend: (number | MetricTrendPoint)[]): TrendPoint[] => trend.map((point, index) => ({ index, label: typeof point === "number" ? `Point ${index + 1}` : point.label, value: typeof point === "number" ? point : point.value, })); /** Row renderer for the sparkline tooltip: the metric's own name and value. */ const trendTooltipFormatter = ( label: string, format: MetricFormat, unitText: string ) => function TrendTooltipRow(value: unknown) { return (

{label} {formatValue(Number(value), format)} {unitText}

); }; const TrendChart = ({ direction, format, label, trend, unit, }: { direction: "up" | "down" | "flat"; format: MetricFormat; label: string; trend: (number | MetricTrendPoint)[]; unit?: ReactNode; }) => { const chartId = useId().replaceAll(":", ""); const gradientId = `metric-trend-gradient-${chartId}`; const stripeId = `metric-trend-stripes-${chartId}`; const data = normalizeTrend(trend); const values = data.map((point) => point.value); const minimum = Math.min(...values); const maximum = Math.max(...values); const domainPadding = (maximum - minimum || 1) * 0.12; const color = direction === "down" ? "var(--destructive)" : "var(--primary)"; const unitText = typeof unit === "string" ? ` ${unit}` : ""; const firstLabel = data[0]?.label ?? ""; const middleLabel = data[Math.round((data.length - 1) / 2)]?.label ?? ""; const lastLabel = data.at(-1)?.label ?? ""; const config: ChartConfig = { value: { color, label }, }; return (

{/* House texture: a hairline rule every 8px under the fill. */} } cursor={{ stroke: "var(--border)", strokeDasharray: "2 3" }} />

); }; export type MetricCardProps = Omit, "children"> & { label: string; value: number | string; /** Signed percentage change versus the previous period. */ delta?: number; /** Human-readable context for the delta (for example, "vs yesterday"). */ comparisonLabel?: string; /** Series driving the trend chart; needs at least two points to render. */ trend?: (number | MetricTrendPoint)[]; format?: MetricFormat; /** Unit suffix rendered after the value (for example, "hrs"). */ unit?: ReactNode; isLoading?: boolean; error?: Error | string | null; }; const metricCardClassName = "min-h-[168px] gap-0 overflow-hidden rounded-lg border border-border/60 bg-card py-0 shadow-none ring-0 transition-colors hover:border-border"; export const MetricCard = ({ label, value, delta, comparisonLabel, trend, format = "number", unit, isLoading = false, error = null, className, ...props }: MetricCardProps) => { if (isLoading) { return ( {label} ); } if (error) { const message = typeof error === "string" ? error : error.message; return ( {label}

{message}

); } const direction = deltaDirection(delta); return ( {label} {delta === undefined ? null : (

{comparisonLabel ? ( {comparisonLabel} ) : null}

)}

{formatValue(value, format)} {unit ? ( {unit} ) : null}

{trend === undefined ? null : (

1 && direction === "up" && "from-primary/[0.045]", trend.length > 1 && direction === "down" && "from-destructive/[0.07]", trend.length > 1 && direction === "flat" && "from-muted/20" )} > {trend.length > 1 ? ( ) : (

)}

)} ); }; 4d:["$","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","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/card.json","https://ui.neon.com/r/badge.json","https://ui.neon.com/r/skeleton.json","https://ui.neon.com/r/neon-loader.json","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/chart.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/metric-card/metric-card.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]