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:T292a,"use client" import * as React from "react" import { Area, AreaChart, AreaRevealShape, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis, type AreaRevealShapeProps, } from "recharts" import { cn } from "@/lib/utils" import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart" export interface TrendSeries { /** Key in each data row. */ key: string label: string /** Any CSS color. Defaults to chart-1 through chart-5 in order. */ color?: string } export interface TrendChartProps extends Omit, "config" | "children"> { data: Record[] /** Key of the x-axis value in each row. */ xKey: string series: TrendSeries[] type?: "area" | "line" | "bar" /** Area fill: a plain gradient, or a dot grid that fades out toward the line. */ fill?: "gradient" | "dots" /** Bars only: "horizontal" runs bars left to right with categories down the side. */ layout?: "vertical" | "horizontal" /** Bars only: corner radius in px, or "full" for pill-shaped bars. */ barRadius?: number | "full" /** Bars only: thickness of each bar in px. Defaults to a share of the category width. */ barSize?: number stacked?: boolean showLegend?: boolean legendPosition?: "top" | "bottom" legendAlign?: "left" | "center" | "right" showGrid?: boolean /** Show the value axis. In the horizontal layout this is the axis along the bottom. */ showYAxis?: boolean /** Recharts domain for the value axis, e.g. ["dataMin", "dataMax"] or ["auto", "auto"]. Defaults to [0, "auto"]. */ yDomain?: React.ComponentProps["domain"] xFormatter?: (value: unknown) => string yFormatter?: (value: number) => string } 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) } /** Area shape that masks the fill to a dot grid while keeping the stroke solid. */ function DotGridAreaShape({ maskId, ...props }: AreaRevealShapeProps & { maskId: string }) { return ( <> ) } /** Recharts clamps corner radii to half the bar, so an oversized radius draws a pill. */ const PILL = 9999 type Radius = number | [number, number, number, number] /** Round only the outer corners of a stack; mixed-sign stacks stay square. */ function barCorners( radius: number | "full", stacked: boolean, hasNegative: boolean, horizontal: boolean, index: number, count: number ): Radius { const r = radius === "full" ? PILL : radius if (!stacked || count === 1) return r if (hasNegative) return 0 // Corners run [top-left, top-right, bottom-right, bottom-left]. if (index === count - 1) return horizontal ? [0, r, r, 0] : [r, r, 0, 0] if (index === 0) return horizontal ? [r, 0, 0, r] : [0, 0, r, r] return 0 } function TrendChart({ data, xKey, series, type = "area", fill = "gradient", layout = "vertical", barRadius = 4, barSize, stacked = false, showLegend = false, legendPosition = "bottom", legendAlign = "center", showGrid = true, showYAxis = false, yDomain, xFormatter = defaultXFormatter, yFormatter, className, ...props }: TrendChartProps) { const id = React.useId() const dots = type === "area" && fill === "dots" const horizontal = type === "bar" && layout === "horizontal" const hasNegative = React.useMemo( () => data.some((row) => series.some((s) => { const v = row[s.key] return typeof v === "number" && v < 0 }) ), [data, series] ) const config = Object.fromEntries( series.map((s, index) => [ s.key, { label: s.label, color: s.color ?? `var(--chart-${(index % 5) + 1})` }, ]) ) satisfies ChartConfig const axes = ( <> {showGrid ? ( ) : null} {horizontal ? ( <> ) : ( <> {showYAxis ? ( ) : yDomain ? ( ) : null} )} {hasNegative ? ( ) : null} xFormatter(value)} formatter={ yFormatter ? (value, name) => (

{config[name as string]?.label ?? name} {yFormatter(Number(value))}

) : undefined } /> } /> {showLegend ? ( } /> ) : null} ) const margin = { top: 8, right: 8, bottom: 0, left: showYAxis || horizontal ? 0 : 8, } return ( {type === "bar" ? ( {axes} {series.map((s, index) => ( ))} ) : type === "line" ? ( {axes} {series.map((s) => ( ))} ) : ( {series.map((s) => ( ))} {dots ? ( <> ) : null} {axes} {series.map((s) => ( ( ) : undefined } /> ))} )} ) } export { TrendChart } 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/trend-chart.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]