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: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 } 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/composed-chart.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]