@acronis-platform/ui-react 4.1.0 → 5.1.0

package/dist/components/ui/area-chart/area-chart.js

@@ -2,10 +2,10 @@
 import { cn as e } from "../../../lib/utils.js";
 import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o } from "../chart/chart.js";
-import { CHART_LABEL_MARGIN as ee, resolveAnimation as te, resolveAxisDomain as ne, resolveBrushProps as s, resolveCartesianLabelPosition as c, resolveChartReferenceValue as l, resolveLabelFillClass as u, resolveReferenceLineProps as d, resolveRotatedTickAnchor as f, resolveXAxisHeight as p, resolveXAxisTitle as m, resolveYAxisTitle as h, toLabelFormatter as g, toReferenceLineList as re } from "../chart/chart-format.js";
-import * as _ from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { Area as ie, AreaChart as ae, Brush as oe, CartesianGrid as se, LabelList as ce, ReferenceLine as b, XAxis as x, YAxis as S } from "recharts";
+import { CHART_LABEL_MARGIN as s, dropProjectionPayload as c, resolveAnimation as l, resolveAxisDomain as u, resolveBrushProps as d, resolveCartesianLabelPosition as ee, resolveChartReferenceValue as te, resolveLabelFillClass as ne, resolveReferenceLineProps as f, resolveRotatedTickAnchor as p, resolveXAxisHeight as re, resolveXAxisTitle as ie, resolveYAxisTitle as ae, toLabelFormatter as oe, toReferenceLineList as se } from "../chart/chart-format.js";
+import * as m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Area as v, AreaChart as y, Brush as b, CartesianGrid as ce, LabelList as le, ReferenceLine as ue, Text as de, XAxis as fe, YAxis as pe, usePlotArea as x, useXAxisScale as S } from "recharts";
 //#region src/components/ui/area-chart/area-chart.tsx
 var C = t("", {
 	variants: {
@@ -20,129 +20,235 @@ var C = t("", {
 	},
 	defaultVariants: {
 		layout: "single",
-		fill: "gradient"
+		fill: "solid"
 	}
 });
-function w({ dataKeys: e, gradientId: t, colorFor: n }) {
-	return /* @__PURE__ */ v("defs", { children: e.map((e) => /* @__PURE__ */ y("linearGradient", {
+function me(e) {
+	return function(t) {
+		let n = {
+			...t,
+			payload: c(t.payload)
+		};
+		return typeof e == "function" ? /* @__PURE__ */ g(e, { ...n }) : m.cloneElement(e, n);
+	};
+}
+function he({ projectionStart: e, prevTick: t, clipId: n }) {
+	let r = S(), i = x();
+	if (!r || !i) return null;
+	let a = r(t), o = r(e);
+	if (a == null || o == null) return null;
+	let s = (a + o) / 2, { x: c, y: l, width: u, height: d } = i;
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("defs", { children: [/* @__PURE__ */ g("clipPath", {
+		id: `${n}-actual`,
+		children: /* @__PURE__ */ g("rect", {
+			x: c,
+			y: l,
+			width: s - c,
+			height: d
+		})
+	}), /* @__PURE__ */ g("clipPath", {
+		id: `${n}-projection`,
+		children: /* @__PURE__ */ g("rect", {
+			x: s,
+			y: l,
+			width: c + u - s,
+			height: d
+		})
+	})] }), /* @__PURE__ */ g("line", {
+		x1: s,
+		y1: l,
+		x2: s,
+		y2: l + d,
+		stroke: "var(--ui-border-on-surface-border)",
+		strokeDasharray: "4 4"
+	})] });
+}
+function ge({ dataKeys: e, gradientId: t, colorFor: n }) {
+	return /* @__PURE__ */ g("defs", { children: e.map((e) => /* @__PURE__ */ _("linearGradient", {
 		id: `${t}-${e}`,
 		x1: "0",
 		y1: "0",
 		x2: "0",
 		y2: "1",
-		children: [/* @__PURE__ */ v("stop", {
+		children: [/* @__PURE__ */ g("stop", {
 			offset: "5%",
 			stopColor: n(e),
 			stopOpacity: .8
-		}), /* @__PURE__ */ v("stop", {
+		}), /* @__PURE__ */ g("stop", {
 			offset: "95%",
 			stopColor: n(e),
 			stopOpacity: .1
 		})]
 	}, e)) });
 }
-var T = _.forwardRef(({ className: t, config: T, palette: E, data: D, dataKeys: O, xKey: k, xAxisLabel: A, yAxisLabel: j, yUnit: M, layout: N = "single", fill: P = "gradient", curve: F = "monotone", strokeWidth: I = 2, fillOpacity: L = .4, showDots: R = !1, dotSize: z = 3, showActiveDot: B, connectNulls: V = !1, areaSettings: H, referenceLine: U, showGrid: W = !0, showTooltip: G = !0, showLegend: le = !0, showXAxis: ue = !0, showYAxis: de = !0, xTickFormatter: K, yTickFormatter: fe, xAxisAngle: q, xAxisInterval: pe, yAxisTickCount: me, yAxisDomain: he, gridDashed: ge, gridHorizontal: _e, gridVertical: ve, tooltipContent: ye, animate: be, animationDuration: xe, animationBegin: Se, animationEasing: Ce, showLabels: J = !1, labelPosition: we, labelFormatter: Te, showBrush: Ee = !1, brushHeight: De, brushAriaLabel: Oe, ...ke }, Ae) => {
-	let je = te({
-		animate: be,
-		animationDuration: xe,
-		animationBegin: Se,
-		animationEasing: Ce
-	}), Y = N === "stacked", Me = c({
-		labelPosition: we,
-		isStacked: Y
-	}), X = P === "gradient", Z = re(U), Q = (e) => H?.[e]?.color ?? `var(--color-${e})`, Ne = J || Object.values(H ?? {}).some((e) => e.showLabel), Pe = m(A), Fe = h(j), Ie = ne(he), Le = p(A, q), $ = `area-gradient-${_.useId().replace(/:/g, "")}`;
-	return /* @__PURE__ */ v("div", {
-		ref: Ae,
-		"data-layout": N,
-		"data-fill": P,
+var w = m.forwardRef(({ className: t, config: h, palette: x, data: S, dataKeys: w, xKey: T, xAxisLabel: E, yAxisLabel: D, yUnit: _e, layout: O = "single", fill: k = "solid", curve: A = "monotone", strokeWidth: j = 2, fillOpacity: M = .4, showDots: N = !1, dotSize: P = 3, showActiveDot: F, connectNulls: I = !1, areaSettings: L, referenceLine: ve, projectionStart: R, showGrid: ye = !0, showTooltip: be = !0, showLegend: xe = !0, showXAxis: Se = !0, showYAxis: Ce = !0, xTickFormatter: z, yTickFormatter: we, xAxisAngle: B, xAxisInterval: Te, yAxisTickCount: Ee, yAxisDomain: De, gridDashed: Oe, gridHorizontal: ke, gridVertical: Ae, tooltipContent: V, animate: je, animationDuration: Me, animationBegin: Ne, animationEasing: Pe, showLabels: H = !1, labelPosition: Fe, labelFormatter: Ie, showBrush: Le = !1, brushHeight: Re, brushAriaLabel: ze, ...Be }, Ve) => {
+	let U = l({
+		animate: je,
+		animationDuration: Me,
+		animationBegin: Ne,
+		animationEasing: Pe
+	}), W = O === "stacked", He = ee({
+		labelPosition: Fe,
+		isStacked: W
+	}), G = k === "gradient", Ue = se(ve), K = (e) => L?.[e]?.color ?? `var(--color-${e})`, We = H || Object.values(L ?? {}).some((e) => e.showLabel), Ge = ie(E), Ke = ae(D), qe = u(De), q = re(E, B), J = m.useMemo(() => R === void 0 ? -1 : S.findIndex((e) => e[T] === R), [
+		R,
+		S,
+		T
+	]), Y = J > 0, X = m.useMemo(() => {
+		if (!Y) return;
+		let e = new Set(S.slice(J).map((e) => e[T]));
+		return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ g(de, {
+			...r,
+			fontSize: 12,
+			className: e.has(t.value) ? "fill-[var(--ui-text-on-surface-disabled)]" : "fill-muted-foreground",
+			children: z ? z(t.value, n) : t.value
+		});
+	}, [
+		Y,
+		J,
+		S,
+		T,
+		z
+	]), Je = m.useMemo(() => Y ? S.map((e) => ({
+		...e,
+		...Object.fromEntries(w.map((t) => [`_proj_${t}`, e[t]]))
+	})) : S, [
+		Y,
+		S,
+		w
+	]), Z = m.useMemo(() => {
+		if (!(J <= 0)) return S[J - 1]?.[T];
+	}, [
+		J,
+		S,
+		T
+	]), Ye = m.useMemo(() => Y && V ? me(V) : void 0, [Y, V]), Xe = Y ? Ye ?? ((e) => /* @__PURE__ */ g(o, {
+		active: e.active,
+		label: e.label,
+		payload: c(e.payload)
+	})) : V ?? /* @__PURE__ */ g(o, {}), Ze = Y ? (e) => /* @__PURE__ */ g(i, {
+		verticalAlign: e.verticalAlign,
+		payload: c(e.payload)
+	}) : /* @__PURE__ */ g(i, {}), Q = `area-gradient-${m.useId().replace(/:/g, "")}`, $ = `area-proj-${m.useId().replace(/:/g, "")}`;
+	return /* @__PURE__ */ g("div", {
+		ref: Ve,
+		"data-layout": O,
+		"data-fill": k,
 		className: e(C({
-			layout: N,
-			fill: P
+			layout: O,
+			fill: k
 		}), t),
-		...ke,
-		children: /* @__PURE__ */ v(n, {
-			config: T,
-			palette: E,
+		...Be,
+		children: /* @__PURE__ */ g(n, {
+			config: h,
+			palette: x,
 			className: "size-full [&_.recharts-label]:fill-foreground",
-			children: /* @__PURE__ */ y(ae, {
-				data: D,
-				margin: Ne ? ee : void 0,
+			children: /* @__PURE__ */ _(y, {
+				data: Je,
+				margin: We ? s : void 0,
 				children: [
-					X && /* @__PURE__ */ v(w, {
-						dataKeys: O,
-						gradientId: $,
-						colorFor: Q
+					G && /* @__PURE__ */ g(ge, {
+						dataKeys: w,
+						gradientId: Q,
+						colorFor: K
 					}),
-					W && /* @__PURE__ */ v(se, {
-						horizontal: _e ?? !0,
-						vertical: ve ?? !1,
-						strokeDasharray: ge ? "3 3" : void 0
+					ye && /* @__PURE__ */ g(ce, {
+						horizontal: ke ?? !0,
+						vertical: Ae ?? !1,
+						strokeDasharray: Oe ? "3 3" : void 0
 					}),
-					/* @__PURE__ */ v(x, {
-						dataKey: k,
+					/* @__PURE__ */ g(fe, {
+						dataKey: T,
 						type: "category",
-						hide: !ue,
+						hide: !Se,
 						tickLine: !1,
 						axisLine: !1,
 						tickMargin: 8,
-						tickFormatter: K,
-						angle: q,
-						interval: pe,
-						textAnchor: f(q),
-						height: Le,
-						label: Pe
+						tickFormatter: X ? void 0 : z,
+						tick: X,
+						angle: B,
+						interval: Te,
+						textAnchor: p(B),
+						height: q,
+						label: Ge
 					}),
-					/* @__PURE__ */ v(S, {
+					/* @__PURE__ */ g(pe, {
 						type: "number",
-						hide: !de,
+						hide: !Ce,
 						tickLine: !1,
 						axisLine: !1,
-						unit: M,
-						tickFormatter: fe,
-						tickCount: me,
-						domain: Ie,
-						width: j ? 72 : void 0,
-						label: Fe
+						unit: _e,
+						tickFormatter: we,
+						tickCount: Ee,
+						domain: qe,
+						width: D ? 72 : void 0,
+						label: Ke
+					}),
+					be && /* @__PURE__ */ g(a, { content: Xe }),
+					xe && /* @__PURE__ */ g(r, { content: Ze }),
+					Y && Z != null && /* @__PURE__ */ g(he, {
+						projectionStart: R,
+						prevTick: Z,
+						clipId: $
 					}),
-					G && /* @__PURE__ */ v(a, { content: ye ?? /* @__PURE__ */ v(o, {}) }),
-					le && /* @__PURE__ */ v(r, { content: /* @__PURE__ */ v(i, {}) }),
-					O.map((e) => {
-						let t = H?.[e], n = t?.showDots ?? R, r = t?.dotSize ?? z, i = B ?? n, a = t?.showLabel ?? J, o = t?.labelPosition ?? Me;
-						return /* @__PURE__ */ v(ie, {
-							type: t?.curveType ?? F ?? "monotone",
+					w.map((e) => {
+						let t = L?.[e], n = t?.showDots ?? N, r = t?.dotSize ?? P, i = F ?? n, a = t?.showLabel ?? H, o = t?.labelPosition ?? He;
+						return /* @__PURE__ */ g(v, {
+							type: t?.curveType ?? A ?? "monotone",
 							dataKey: e,
-							stackId: Y ? "a" : void 0,
-							stroke: Q(e),
-							strokeWidth: t?.strokeWidth ?? I,
+							stackId: W ? "a" : void 0,
+							stroke: K(e),
+							strokeWidth: t?.strokeWidth ?? j,
 							strokeDasharray: t?.dashed ? "5 5" : void 0,
-							fill: X ? `url(#${$}-${e})` : Q(e),
-							fillOpacity: t?.fillOpacity ?? (X ? 1 : L),
+							fill: G ? `url(#${Q}-${e})` : K(e),
+							fillOpacity: t?.fillOpacity ?? (G ? 1 : M),
 							dot: n ? { r } : !1,
 							activeDot: i ? { r: r + 2 } : !1,
-							connectNulls: V,
-							...je,
-							children: a && /* @__PURE__ */ v(ce, {
+							connectNulls: I,
+							clipPath: Y ? `url(#${$}-actual)` : void 0,
+							...U,
+							children: a && /* @__PURE__ */ g(le, {
 								dataKey: e,
 								position: o,
-								formatter: g(Te),
-								className: u(o, { translucentSeries: !0 }),
+								formatter: oe(Ie),
+								className: ne(o, { translucentSeries: !0 }),
 								fontSize: 12
 							})
 						}, e);
 					}),
-					Z.map((e, t) => {
-						let n = l(e, D, O);
-						return n === void 0 ? null : /* @__PURE__ */ v(b, {
+					Y && w.map((e) => {
+						let t = L?.[e];
+						return /* @__PURE__ */ g(v, {
+							type: t?.curveType ?? A ?? "monotone",
+							dataKey: `_proj_${e}`,
+							name: e,
+							stackId: W ? "proj" : void 0,
+							stroke: K(e),
+							strokeWidth: t?.strokeWidth ?? j,
+							strokeDasharray: "5 5",
+							fill: G ? `url(#${Q}-${e})` : K(e),
+							fillOpacity: t?.fillOpacity ?? (G ? 1 : M),
+							dot: !1,
+							activeDot: !1,
+							clipPath: `url(#${$}-projection)`,
+							legendType: "none",
+							tooltipType: "none",
+							...U
+						}, `_proj_${e}`);
+					}),
+					Ue.map((e, t) => {
+						let n = te(e, S, w);
+						return n === void 0 ? null : /* @__PURE__ */ g(ue, {
 							y: n,
-							...d(e.label, e.labelPosition)
+							...f(e.label, e.labelPosition)
 						}, `${e.label ?? "ref"}-${t}`);
 					}),
-					Ee && /* @__PURE__ */ v(oe, {
-						dataKey: k,
-						tickFormatter: K,
-						...s({
-							brushHeight: De,
-							brushAriaLabel: Oe
+					Le && /* @__PURE__ */ g(b, {
+						dataKey: T,
+						tickFormatter: z,
+						...d({
+							brushHeight: Re,
+							brushAriaLabel: ze
 						})
 					})
 				]
@@ -150,8 +256,8 @@ var T = _.forwardRef(({ className: t, config: T, palette: E, data: D, dataKeys:
 		})
 	});
 });
-T.displayName = "AreaChart";
+w.displayName = "AreaChart";
 //#endregion
-export { T as AreaChart, C as areaChartVariants };
+export { w as AreaChart, C as areaChartVariants };
 
 //# sourceMappingURL=area-chart.js.map

package/dist/components/ui/area-chart/area-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart.js","names":[],"sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  Brush,\n  CartesianGrid,\n  LabelList,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_LABEL_FONT_SIZE,\n  CHART_LABEL_MARGIN,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveBrushProps,\n  resolveCartesianLabelPosition,\n  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCurveType,\n  type ChartDataLabelProps,\n  type ChartReferenceLine,\n  type CartesianLabelPosition,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n  variants: {\n    layout: {\n      single: '',\n      stacked: '',\n    },\n    fill: {\n      solid: '',\n      gradient: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'single',\n    fill: 'gradient',\n  },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n  /** Stroke and fill color. Defaults to the series' `config` color. */\n  color?: string;\n  /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n  strokeWidth?: number;\n  /** Dash this series' top border. */\n  dashed?: boolean;\n  /** Interpolation for this series only. Defaults to the chart's `curve`. */\n  curveType?: ChartCurveType;\n  /**\n   * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n   * gradient's own alpha rather than replacing it.\n   */\n  fillOpacity?: number;\n  /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n  showDots?: boolean;\n  /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n  dotSize?: number;\n  /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n  showLabel?: boolean;\n  /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof areaChartVariants>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n  data: ReadonlyArray<Record<string, string | number | null>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n   * primitives). Series take their colour from the container's `palette`; each\n   * entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Interpolation between points. */\n  curve?: ChartCurveType;\n  /** Stroke width of each area's top border. */\n  strokeWidth?: number;\n  /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n  fillOpacity?: number;\n  /** Render a dot at each data point. */\n  showDots?: boolean;\n  /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n  dotSize?: number;\n  /**\n   * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n   * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n   * `showActiveDot`) or a static-only area (dots without the hover one).\n   */\n  showActiveDot?: boolean;\n  /** Bridge `null` gaps in the data instead of breaking the area. */\n  connectNulls?: boolean;\n  /**\n   * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n   * render from the chart-wide props.\n   */\n  areaSettings?: Record<string, AreaChartAreaSettings>;\n  /**\n   * One or more dashed reference/average lines on the value axis — a target, a\n   * threshold, or a series mean. Pass a single object or an array to draw\n   * several at once. On a stacked chart the value is read against the stack's\n   * axis, not one series.\n   */\n  referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n  showLegend?: boolean;\n  /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n  dataKeys,\n  gradientId,\n  colorFor,\n}: {\n  dataKeys: string[];\n  gradientId: string;\n  colorFor: (key: string) => string;\n}) {\n  return (\n    <defs>\n      {dataKeys.map((key) => (\n        <linearGradient\n          key={key}\n          id={`${gradientId}-${key}`}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"0\"\n          y2=\"1\"\n        >\n          <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n          <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n        </linearGradient>\n      ))}\n    </defs>\n  );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'gradient',\n      curve = 'monotone',\n      strokeWidth = 2,\n      fillOpacity = 0.4,\n      showDots = false,\n      dotSize = 3,\n      showActiveDot,\n      connectNulls = false,\n      areaSettings,\n      referenceLine,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormatter,\n      showBrush = false,\n      brushHeight,\n      brushAriaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    const isStacked = layout === 'stacked';\n    const areaLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n    });\n    const isGradient = fill === 'gradient';\n    const referenceLines = toReferenceLineList(referenceLine);\n\n    // A series' `color` override has to reach its gradient stops too, or a\n    // gradient-filled chart would keep painting the `config` color.\n    const colorFor = (key: string) =>\n      areaSettings?.[key]?.color ?? `var(--color-${key})`;\n\n    // The plot inset is needed as soon as *any* series carries outside labels —\n    // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n    const hasLabels =\n      showLabels ||\n      Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // recharts renders SVG <defs> once per chart; the gradient ids must be unique\n    // across chart instances on the page. useId gives a stable per-instance id;\n    // strip the colons React emits (invalid in a url(#…) reference) — same guard\n    // the shared ChartContainer applies to its chart id.\n    const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n\n    return (\n      <div\n        ref={ref}\n        data-layout={layout}\n        data-fill={fill}\n        className={cn(areaChartVariants({ layout, fill }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart\n            data={data as readonly unknown[]}\n            margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\n          >\n            {isGradient && (\n              <AreaFillGradients\n                dataKeys={dataKeys}\n                gradientId={gradientId}\n                colorFor={colorFor}\n              />\n            )}\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key) => {\n              const settings = areaSettings?.[key];\n              const seriesDots = settings?.showDots ?? showDots;\n              const dotRadius = settings?.dotSize ?? dotSize;\n              // The hover dot follows the static dots unless asked otherwise, so\n              // a chart that sets neither renders exactly as before.\n              const activeDot = showActiveDot ?? seriesDots;\n              const seriesLabel = settings?.showLabel ?? showLabels;\n              const seriesLabelPosition =\n                settings?.labelPosition ?? areaLabelPosition;\n              return (\n                <Area\n                  key={key}\n                  type={settings?.curveType ?? curve ?? 'monotone'}\n                  dataKey={key}\n                  stackId={isStacked ? 'a' : undefined}\n                  stroke={colorFor(key)}\n                  strokeWidth={settings?.strokeWidth ?? strokeWidth}\n                  strokeDasharray={settings?.dashed ? '5 5' : undefined}\n                  fill={\n                    isGradient ? `url(#${gradientId}-${key})` : colorFor(key)\n                  }\n                  fillOpacity={\n                    settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n                  }\n                  dot={seriesDots ? { r: dotRadius } : false}\n                  activeDot={activeDot ? { r: dotRadius + 2 } : false}\n                  connectNulls={connectNulls}\n                  {...animation}\n                >\n                  {seriesLabel && (\n                    <LabelList\n                      dataKey={key}\n                      position={seriesLabelPosition}\n                      formatter={toLabelFormatter(labelFormatter)}\n                      className={resolveLabelFillClass(seriesLabelPosition, {\n                        translucentSeries: true,\n                      })}\n                      fontSize={CHART_LABEL_FONT_SIZE}\n                    />\n                  )}\n                </Area>\n              );\n            })}\n            {/* Annotations draw over the series they describe. */}\n            {referenceLines.map((ref, index) => {\n              const value = resolveChartReferenceValue(ref, data, dataKeys);\n              if (value === undefined) return null;\n              return (\n                <ReferenceLine\n                  key={`${ref.label ?? 'ref'}-${index}`}\n                  y={value}\n                  {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n                />\n              );\n            })}\n            {showBrush && (\n              <Brush\n                dataKey={xKey}\n                tickFormatter={xTickFormatter}\n                {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n              />\n            )}\n          </RechartsAreaChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"mappings":"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"}
+{"version":3,"file":"area-chart.js","names":[],"sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  Brush,\n  CartesianGrid,\n  LabelList,\n  ReferenceLine,\n  Text,\n  XAxis,\n  YAxis,\n  useXAxisScale,\n  usePlotArea,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_LABEL_FONT_SIZE,\n  CHART_LABEL_MARGIN,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveBrushProps,\n  resolveCartesianLabelPosition,\n  dropProjectionPayload,\n  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCurveType,\n  type ChartDataLabelProps,\n  type ChartReferenceLine,\n  type CartesianLabelPosition,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n  variants: {\n    layout: {\n      single: '',\n      stacked: '',\n    },\n    fill: {\n      solid: '',\n      gradient: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'single',\n    fill: 'solid',\n  },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n  /** Stroke and fill color. Defaults to the series' `config` color. */\n  color?: string;\n  /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n  strokeWidth?: number;\n  /** Dash this series' top border. */\n  dashed?: boolean;\n  /** Interpolation for this series only. Defaults to the chart's `curve`. */\n  curveType?: ChartCurveType;\n  /**\n   * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n   * gradient's own alpha rather than replacing it.\n   */\n  fillOpacity?: number;\n  /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n  showDots?: boolean;\n  /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n  dotSize?: number;\n  /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n  showLabel?: boolean;\n  /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof areaChartVariants>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n  data: ReadonlyArray<Record<string, string | number | null>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n   * primitives). Series take their colour from the container's `palette`; each\n   * entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Interpolation between points. */\n  curve?: ChartCurveType;\n  /** Stroke width of each area's top border. */\n  strokeWidth?: number;\n  /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n  fillOpacity?: number;\n  /** Render a dot at each data point. */\n  showDots?: boolean;\n  /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n  dotSize?: number;\n  /**\n   * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n   * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n   * `showActiveDot`) or a static-only area (dots without the hover one).\n   */\n  showActiveDot?: boolean;\n  /** Bridge `null` gaps in the data instead of breaking the area. */\n  connectNulls?: boolean;\n  /**\n   * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n   * render from the chart-wide props.\n   */\n  areaSettings?: Record<string, AreaChartAreaSettings>;\n  /**\n   * One or more dashed reference/average lines on the value axis — a target, a\n   * threshold, or a series mean. Pass a single object or an array to draw\n   * several at once. On a stacked chart the value is read against the stack's\n   * axis, not one series.\n   */\n  referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n  /**\n   * The category value (matching an `xKey` entry) at which the projection\n   * zone starts. Ticks from this point onward render in the disabled text\n   * color (`--ui-text-on-surface-disabled`). The chart data and series\n   * themselves are not affected — only the X-axis tick appearance changes.\n   *\n   * Use this when displaying a forecast/projection range where future\n   * data points should be visually de-emphasized on the axis.\n   */\n  projectionStart?: string | number;\n  showLegend?: boolean;\n  /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\ntype TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>['content']>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\ntype LegendContentFn = Extract<\n  React.ComponentProps<typeof ChartLegend>['content'],\n  (...args: never[]) => unknown\n>;\ntype LegendContentProps = Parameters<LegendContentFn>[0];\n\nfunction createProjectionTooltip(tooltipContent: TooltipContentType) {\n  return function ProjectionTooltip(props: TooltipRenderProps) {\n    const merged = {\n      ...props,\n      payload: dropProjectionPayload(props.payload),\n    } as TooltipRenderProps;\n    if (typeof tooltipContent === 'function') {\n      const Comp = tooltipContent as React.FunctionComponent<TooltipRenderProps>;\n      return <Comp {...merged} />;\n    }\n    // Element-form tooltip: cloneElement is the React-idiomatic way to\n    // re-render an existing element with new props (preserves refs & keys).\n    return React.cloneElement(tooltipContent, merged);\n  };\n}\n\n// Renders two <clipPath> defs (actual / projection) and a dashed separator\n// line at the visual midpoint between the last actual tick and the first\n// projection tick. Both the actual and projection <Area> series reference\n// these clip regions, so the exact same curve renders on each side — no kink.\nfunction ProjectionClip({\n  projectionStart,\n  prevTick,\n  clipId,\n}: {\n  projectionStart: string | number;\n  prevTick: string | number;\n  clipId: string;\n}) {\n  const xScale = useXAxisScale();\n  const plotArea = usePlotArea();\n  if (!xScale || !plotArea) return null;\n  const prevX = xScale(prevTick as string);\n  const currX = xScale(projectionStart as string);\n  if (prevX == null || currX == null) return null;\n  const midX = (prevX + currX) / 2;\n  const { x, y, width, height } = plotArea;\n  return (\n    <>\n      <defs>\n        <clipPath id={`${clipId}-actual`}>\n          <rect x={x} y={y} width={midX - x} height={height} />\n        </clipPath>\n        <clipPath id={`${clipId}-projection`}>\n          <rect x={midX} y={y} width={x + width - midX} height={height} />\n        </clipPath>\n      </defs>\n      <line\n        x1={midX}\n        y1={y}\n        x2={midX}\n        y2={y + height}\n        stroke=\"var(--ui-border-on-surface-border)\"\n        strokeDasharray=\"4 4\"\n      />\n    </>\n  );\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n  dataKeys,\n  gradientId,\n  colorFor,\n}: {\n  dataKeys: string[];\n  gradientId: string;\n  colorFor: (key: string) => string;\n}) {\n  return (\n    <defs>\n      {dataKeys.map((key) => (\n        <linearGradient\n          key={key}\n          id={`${gradientId}-${key}`}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"0\"\n          y2=\"1\"\n        >\n          <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n          <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n        </linearGradient>\n      ))}\n    </defs>\n  );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'solid',\n      curve = 'monotone',\n      strokeWidth = 2,\n      fillOpacity = 0.4,\n      showDots = false,\n      dotSize = 3,\n      showActiveDot,\n      connectNulls = false,\n      areaSettings,\n      referenceLine,\n      projectionStart,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormatter,\n      showBrush = false,\n      brushHeight,\n      brushAriaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    const isStacked = layout === 'stacked';\n    const areaLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n    });\n    const isGradient = fill === 'gradient';\n    const referenceLines = toReferenceLineList(referenceLine);\n\n    // A series' `color` override has to reach its gradient stops too, or a\n    // gradient-filled chart would keep painting the `config` color.\n    const colorFor = (key: string) =>\n      areaSettings?.[key]?.color ?? `var(--color-${key})`;\n\n    // The plot inset is needed as soon as *any* series carries outside labels —\n    // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n    const hasLabels =\n      showLabels ||\n      Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    const projStartIndex = React.useMemo(() => {\n      if (projectionStart === undefined) return -1;\n      return data.findIndex((row) => row[xKey] === projectionStart);\n    }, [projectionStart, data, xKey]);\n    // projStartIndex === 0 (boundary at the first tick) is excluded: there is no\n    // \"previous tick\" to define the clip midpoint, so clipPath defs can't be\n    // emitted, which would make all series invisible. Treat it as no-projection.\n    const hasProjection = projStartIndex > 0;\n\n    // Build the projection tick renderer when projectionStart is set. Each tick\n    // past (and including) the start value renders in the disabled text color;\n    // ticks before it stay in the muted-foreground color. Returns undefined when\n    // projectionStart is absent or not found so recharts uses its own renderer.\n    const projectionTick = React.useMemo(() => {\n      if (!hasProjection) return undefined;\n      const projectedValues = new Set(\n        data.slice(projStartIndex).map((row) => row[xKey])\n      );\n      const ProjectionTick = ({\n        payload,\n        index,\n        ...tickProps\n      }: {\n        payload: { value: string | number };\n        index?: number;\n        [key: string]: unknown;\n      }) => (\n        <Text\n          {...(tickProps as React.ComponentProps<typeof Text>)}\n          fontSize={12}\n          className={\n            projectedValues.has(payload.value)\n              ? 'fill-[var(--ui-text-on-surface-disabled)]'\n              : 'fill-muted-foreground'\n          }\n        >\n          {xTickFormatter\n            ? xTickFormatter(payload.value as never, index)\n            : payload.value}\n        </Text>\n      );\n      return ProjectionTick;\n    }, [hasProjection, projStartIndex, data, xKey, xTickFormatter]);\n\n    // When projection is active, copy each series value to `_proj_${key}` — same\n    // data, no nulls. Both the actual and projection <Area> see the identical curve;\n    // the clipPath (computed in ProjectionClip) restricts which half each paints.\n    const chartData = React.useMemo(() => {\n      if (!hasProjection) return data;\n      return data.map((row) => ({\n        ...row,\n        ...Object.fromEntries(\n          dataKeys.map((k) => [`_proj_${k}`, row[k]])\n        ),\n      }));\n    }, [hasProjection, data, dataKeys]);\n\n    // The tick immediately before the projection boundary — needed to compute the\n    // visual midpoint where the clip edge and separator line are placed.\n    const prevTickValue = React.useMemo(() => {\n      if (projStartIndex <= 0) return undefined;\n      return data[projStartIndex - 1]?.[xKey];\n    }, [projStartIndex, data, xKey]);\n\n    const projectionTooltip = React.useMemo(\n      () =>\n        hasProjection && tooltipContent\n          ? createProjectionTooltip(tooltipContent)\n          : undefined,\n      [hasProjection, tooltipContent]\n    );\n\n    const tooltipNode = hasProjection\n      ? (projectionTooltip ??\n          ((tp: TooltipRenderProps) => (\n            <ChartTooltipContent\n              active={tp.active}\n              label={tp.label}\n              payload={\n                dropProjectionPayload(\n                  tp.payload\n                ) as ChartTooltipContentProps['payload']\n              }\n            />\n          )))\n      : (tooltipContent ?? <ChartTooltipContent />);\n\n    const legendNode = hasProjection\n      ? (lp: LegendContentProps) => (\n          <ChartLegendContent\n            verticalAlign={lp.verticalAlign}\n            payload={\n              dropProjectionPayload(\n                lp.payload\n              ) as ChartLegendContentProps['payload']\n            }\n          />\n        )\n      : <ChartLegendContent />;\n\n    // recharts renders SVG <defs> once per chart; the gradient/clip ids must be\n    // unique across chart instances on the page. useId gives a stable per-instance\n    // id; strip the colons React emits (invalid in a url(#…) reference).\n    const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n    const clipId = `area-proj-${React.useId().replace(/:/g, '')}`;\n\n    return (\n      <div\n        ref={ref}\n        data-layout={layout}\n        data-fill={fill}\n        className={cn(areaChartVariants({ layout, fill }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart\n            data={chartData as readonly unknown[]}\n            margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\n          >\n            {isGradient && (\n              <AreaFillGradients\n                dataKeys={dataKeys}\n                gradientId={gradientId}\n                colorFor={colorFor}\n              />\n            )}\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={projectionTick ? undefined : xTickFormatter}\n              tick={projectionTick}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && <ChartTooltip content={tooltipNode} />}\n            {showLegend && <ChartLegend content={legendNode} />}\n            {hasProjection && prevTickValue != null && (\n              <ProjectionClip\n                projectionStart={projectionStart!}\n                prevTick={prevTickValue}\n                clipId={clipId}\n              />\n            )}\n            {dataKeys.map((key) => {\n              const settings = areaSettings?.[key];\n              const seriesDots = settings?.showDots ?? showDots;\n              const dotRadius = settings?.dotSize ?? dotSize;\n              // The hover dot follows the static dots unless asked otherwise, so\n              // a chart that sets neither renders exactly as before.\n              const activeDot = showActiveDot ?? seriesDots;\n              const seriesLabel = settings?.showLabel ?? showLabels;\n              const seriesLabelPosition =\n                settings?.labelPosition ?? areaLabelPosition;\n              return (\n                <Area\n                  key={key}\n                  type={settings?.curveType ?? curve ?? 'monotone'}\n                  dataKey={key}\n                  stackId={isStacked ? 'a' : undefined}\n                  stroke={colorFor(key)}\n                  strokeWidth={settings?.strokeWidth ?? strokeWidth}\n                  strokeDasharray={settings?.dashed ? '5 5' : undefined}\n                  fill={\n                    isGradient ? `url(#${gradientId}-${key})` : colorFor(key)\n                  }\n                  fillOpacity={\n                    settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n                  }\n                  dot={seriesDots ? { r: dotRadius } : false}\n                  activeDot={activeDot ? { r: dotRadius + 2 } : false}\n                  connectNulls={connectNulls}\n                  clipPath={hasProjection ? `url(#${clipId}-actual)` : undefined}\n                  {...animation}\n                >\n                  {seriesLabel && (\n                    <LabelList\n                      dataKey={key}\n                      position={seriesLabelPosition}\n                      formatter={toLabelFormatter(labelFormatter)}\n                      className={resolveLabelFillClass(seriesLabelPosition, {\n                        translucentSeries: true,\n                      })}\n                      fontSize={CHART_LABEL_FONT_SIZE}\n                    />\n                  )}\n                </Area>\n              );\n            })}\n            {hasProjection &&\n              dataKeys.map((key) => {\n                const settings = areaSettings?.[key];\n                return (\n                  <Area\n                    key={`_proj_${key}`}\n                    type={settings?.curveType ?? curve ?? 'monotone'}\n                    dataKey={`_proj_${key}`}\n                    name={key}\n                    stackId={isStacked ? 'proj' : undefined}\n                    stroke={colorFor(key)}\n                    strokeWidth={settings?.strokeWidth ?? strokeWidth}\n                    strokeDasharray=\"5 5\"\n                    fill={\n                      isGradient ? `url(#${gradientId}-${key})` : colorFor(key)\n                    }\n                    fillOpacity={\n                      settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n                    }\n                    dot={false}\n                    activeDot={false}\n                    clipPath={`url(#${clipId}-projection)`}\n                    legendType=\"none\"\n                    tooltipType=\"none\"\n                    {...animation}\n                  />\n                );\n              })}\n            {/* Annotations draw over the series they describe. */}\n            {referenceLines.map((ref, index) => {\n              const value = resolveChartReferenceValue(ref, data, dataKeys);\n              if (value === undefined) return null;\n              return (\n                <ReferenceLine\n                  key={`${ref.label ?? 'ref'}-${index}`}\n                  y={value}\n                  {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n                />\n              );\n            })}\n            {showBrush && (\n              <Brush\n                dataKey={xKey}\n                tickFormatter={xTickFormatter}\n                {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n              />\n            )}\n          </RechartsAreaChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"mappings":"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"}