@siyahi/ui 0.1.9-next.3 → 0.1.9-next.31

package/dist/lib/chart-frame.js

@@ -1,13 +1,88 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
 import { cn } from "./utils.js";
+import { useAxisScale } from "../components/siyahi/scale-toggle.js";
+import { StaleNote } from "../components/siyahi/stale-note.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
+import { EndLabels, QUIET, TimeMarks, endLabelRoom, endLabelsFit, linesEndAtEdge } from "./chart-marks.js";
+import { fitsLog, logAxis } from "./ticks.js";
+import { useElementWidth } from "./use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+import { useEffect, useId, useMemo, useState } from "react";
+import { CartesianGrid, Line, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } from "recharts";
 //#region src/lib/chart-frame.tsx
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const TICK = { className: "fill-muted-foreground font-mono" };
 const NO_LINES = [];
+const SERIES_LEGEND = /* @__PURE__ */ jsx(ChartLegendContent, { className: "flex-wrap gap-y-1" });
+/**
+* A bar's fill: a tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A selection dims
+* the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
+*/
+function barFill(color, dim = false) {
+	return `color-mix(in oklab, ${color} ${dim ? 10 : 25}%, var(--card))`;
+}
+/** Renders the component again once the page's fonts load, so text measured on a canvas is measured in Geist. */
+function useRenderWhenFontsLoad() {
+	const [loaded, setLoaded] = useState(() => typeof document === "undefined" || document.fonts?.status === "loaded");
+	useEffect(() => {
+		if (loaded || !document.fonts) return;
+		let live = true;
+		document.fonts.ready.then(() => live && setLoaded(true));
+		return () => {
+			live = false;
+		};
+	}, [loaded]);
+}
+/**
+* The legend when some series are quiet: every series by name. The grey ones share a colour, so a legend square
+* cannot say which line is which; on lines each grey name is a button that raises its line in the text colour, over
+* the rest. A stack's grey bands sit in the legend's order, bottom to top.
+*/
+function QuietLegend({ series, raisable, raised, onRaise }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3",
+		onFocus: (event) => event.stopPropagation(),
+		onKeyDown: (event) => event.stopPropagation(),
+		children: series.map(({ key, label, color }) => raisable && color === "var(--muted-foreground)" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-pressed": raised === key,
+			onClick: () => onRaise(raised === key ? void 0 : key),
+			className: "flex items-center gap-1.5 text-muted-foreground aria-pressed:text-foreground",
+			children: [/* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 bg-current" }), label]
+		}, key) : /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-1.5", color === "var(--muted-foreground)" && "text-muted-foreground"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "size-2 shrink-0",
+				style: { backgroundColor: color }
+			}), label]
+		}, key))
+	});
+}
+/**
+* A reference line over a card-coloured band, so it stays traceable where it crosses a bar or an area: the text
+* colour on --chart-1 is only 2:1, but each against the card is well over 3:1.
+*/
+function haloLine({ x1, y1, x2, y2, stroke, strokeDasharray }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		"data-slot": "reference-line-halo",
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke: "var(--card)",
+		strokeWidth: 4
+	}), /* @__PURE__ */ jsx("line", {
+		className: "recharts-reference-line-line",
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke,
+		strokeDasharray,
+		strokeWidth: 1
+	})] });
+}
 /**
 * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
 * zero, since each bar's own Cell follows its sign but the chip follows the Bar.
@@ -16,6 +91,27 @@ function seriesFill(item, data) {
 	const values = data.map((row) => row[item.key]).filter((value) => Number.isFinite(value)).map(Number);
 	return item.negativeColor && values.length > 0 && values.every((value) => value < 0) ? item.negativeColor : item.color;
 }
+/**
+* A Line or Area's dots: one solid dot on the latest point, ringed in the card's colour so it stands clear of the
+* grid, and none elsewhere. The eye lands on now, where a reader starts.
+*/
+function endDot(color, count, hollow = false) {
+	return ({ cx, cy, index }) => index === count - 1 && cx !== void 0 && cy !== void 0 ? hollow ? /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: 3.5,
+		fill: "var(--card)",
+		stroke: color,
+		strokeWidth: 1.5
+	}, "end") : /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: 4,
+		fill: color,
+		stroke: "var(--card)",
+		strokeWidth: 2
+	}, "end") : /* @__PURE__ */ jsx("g", {}, index);
+}
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 function seriesRow(series, formatValue) {
 	return (value, _name, item) => {
@@ -37,6 +133,21 @@ function seriesRow(series, formatValue) {
 		] });
 	};
 }
+/**
+* A value-axis tick formatted against the axis' largest tick, so every label shares one unit: ₹1.6L down to ₹0.4L,
+* never ₹80,000 halfway up. Recharts' tickFormatter sees one value at a time; the axis' ticks come from its hooks.
+* The rest of Recharts' tick props pass on as its own tick does, including the class it measures an auto width by.
+*/
+function ValueTick({ payload, axis, formatter, ownUnit = false, ...tick }) {
+	const xTicks = useXAxisTicks();
+	const yTicks = useYAxisTicks();
+	const value = Number(payload?.value);
+	const scale = ownUnit ? Math.abs(value) : Math.max(Math.abs(value), ...((axis === "x" ? xTicks : yTicks) ?? []).map((t) => Math.abs(Number(t.value))));
+	return /* @__PURE__ */ jsx(Text, {
+		...tick,
+		children: formatter(value, scale)
+	});
+}
 const GEIST_WIDTH = 6.6;
 const MONO_WIDTH = 7.2;
 /**
@@ -47,26 +158,51 @@ function endRoom(xFormatter, xTicks) {
 	const last = xTicks.at(-1);
 	return Math.max(24, Math.ceil((last === void 0 ? 0 : xFormatter(last).length * MONO_WIDTH) / 2) + 4);
 }
-/** Squeezes a line into its column with SVG's own textLength when it would run into the next one. */
-const fitTo = (text, room, charWidth) => room > 0 && text.length * charWidth > room ? {
-	textLength: room,
-	lengthAdjust: "spacingAndGlyphs"
-} : {};
 /**
-* An x tick fitted to its column, drawn whenever a page names its ticks or gives each a second line: Recharts'
+* An x tick with a second line or explicit position: Recharts'
 * own ticks would rather drop a label than let it run into the next. With a detail, the second line comes from the
 * tick's row; under a column the lines hang below the axis, and beside a horizontal bar they straddle its middle.
 * A two-line tick is set in Geist, not Mono: a name with a figure under it reads as a label, as in BarList, and
-* sector names in Mono would take most of a phone's width.
+* category names in Mono would take most of a phone's width.
 */
-function fittedTick(data, xKey, xFormatter, detailOf, beside) {
-	const charWidth = detailOf ? GEIST_WIDTH : MONO_WIDTH;
-	return ({ x, y, width, visibleTicksCount, payload }) => {
+function fittedTick(data, xKey, xFormatter, detailOf, beside, labelWidth) {
+	const rows = /* @__PURE__ */ new Map();
+	for (const row of data) if (!rows.has(row[xKey])) rows.set(row[xKey], row);
+	return ({ x, y, payload }) => {
 		const value = payload?.value;
-		const row = data.find((r) => r[xKey] === value);
+		const row = rows.get(value);
 		const name = xFormatter(value);
 		const detail = row && detailOf ? detailOf(row) : null;
-		const room = beside || !visibleTicksCount ? 0 : Number(width) / visibleTicksCount - 6;
+		if (beside) return /* @__PURE__ */ jsxs("g", {
+			className: "fill-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) - (detail ? 4 : 0),
+				width: labelWidth,
+				maxLines: 2,
+				textAnchor: "end",
+				verticalAnchor: detail ? "end" : "middle",
+				lineHeight: 14,
+				style: { fontSize: "var(--text-xs)" },
+				"aria-label": name,
+				className: "recharts-cartesian-axis-tick-value fill-muted-foreground",
+				children: name
+			}), detail !== null && /* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) + 4,
+				width: labelWidth,
+				textAnchor: "end",
+				verticalAnchor: "start",
+				lineHeight: 14,
+				style: {
+					fontSize: "var(--text-xs)",
+					fontVariantNumeric: "tabular-nums"
+				},
+				"aria-label": detail,
+				className: "fill-muted-foreground tabular-nums",
+				children: detail
+			})]
+		});
 		return /* @__PURE__ */ jsxs("text", {
 			x,
 			y,
@@ -74,150 +210,271 @@ function fittedTick(data, xKey, xFormatter, detailOf, beside) {
 			className: cn("recharts-cartesian-axis-tick-value fill-muted-foreground", !detailOf && "font-mono"),
 			children: [/* @__PURE__ */ jsx("tspan", {
 				x,
-				dy: beside ? -4 : 12,
-				...fitTo(name, room, charWidth),
+				dy: 12,
 				children: name
 			}), detail !== null && /* @__PURE__ */ jsx("tspan", {
 				x,
 				dy: 15,
 				className: "tabular-nums",
-				...fitTo(detail, room, charWidth),
 				children: detail
 			})]
 		});
 	};
 }
+function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
+	const width = Math.min(240, Math.floor((useChartWidth() ?? 320) * .45));
+	return /* @__PURE__ */ jsx(YAxis, {
+		dataKey: xKey,
+		type: "category",
+		width,
+		tickLine: false,
+		axisLine: false,
+		tickMargin: 8,
+		tickFormatter: xFormatter,
+		interval: 0,
+		ticks: xTicks,
+		tick: fittedTick(data, xKey, xFormatter, xTickDetail, true, width - 16)
+	});
+}
 /**
 * The card, axes, grid, tooltip and legend the three chart cards share. Both
 * axes keep Recharts' default ids: marks find their axes by id, and a page
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, tooltipRow, legend = SERIES_LEGEND, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks, yScale = "linear", yScaleToggle = false, logBlocked, endLabels = false, forecastHatch = true, curve = "monotone", forecastFrom, today, stale }) {
 	const { numberLocale } = useLocale();
-	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const clipId = useId();
+	const [contentRef, contentWidth] = useElementWidth();
+	useRenderWhenFontsLoad();
+	const [raisedKey, setRaisedKey] = useState();
+	const names = endLabels ? series.map(({ label }) => label) : [];
+	const labelRoom = endLabels ? endLabelRoom(names) : 0;
+	const plotHeight = height - 12 - (xTickDetail ? 40 : 30) - (xLabel ? 18 : 0);
+	const ends = endLabels && linesEndAtEdge(data, xKey, series, xDomain) && endLabelsFit(names, contentWidth, plotHeight);
+	const quiet = series.some(({ color }) => color === QUIET);
+	const raised = endLabels && !ends ? series.find(({ key, color }) => key === raisedKey && color === "var(--muted-foreground)") : void 0;
+	const formatValue = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
 		label,
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
-	return /* @__PURE__ */ jsxs(Card, { children: [
-		/* @__PURE__ */ jsxs(CardHeader, { children: [
-			/* @__PURE__ */ jsx(CardTitle, { children: title }),
-			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
-			action && /* @__PURE__ */ jsx(CardAction, { children: action })
-		] }),
-		/* @__PURE__ */ jsx(CardContent, { children: placeholder ? /* @__PURE__ */ jsx("div", {
-			"data-slot": "chart-placeholder",
-			className: "flex items-center justify-center",
-			style: { height },
-			children: placeholder
-		}) : /* @__PURE__ */ jsx(ChartContainer, {
-			config,
-			className: "aspect-auto w-full",
-			style: { height },
-			children: /* @__PURE__ */ jsxs(Chart, {
-				data,
-				layout: horizontal ? "vertical" : "horizontal",
-				stackOffset,
-				margin: {
-					left: 0,
-					right: xTicks ? endRoom(xFormatter, xTicks) : 8
-				},
-				children: [
-					/* @__PURE__ */ jsx(CartesianGrid, {
-						vertical: horizontal,
-						horizontal: !horizontal,
-						strokeDasharray: "3 3"
-					}),
-					horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
-						type: "number",
-						hide: true,
-						domain: yDomain,
-						ticks: yTicks
-					}), /* @__PURE__ */ jsx(YAxis, {
-						dataKey: xKey,
-						type: "category",
-						width: "auto",
-						tickLine: false,
-						axisLine: false,
-						tickMargin: 8,
-						tickFormatter: (value) => xFormatter(value),
-						tick: xTickDetail ? fittedTick(data, xKey, xFormatter, xTickDetail, horizontal) : TICK,
-						interval: 0
-					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
-						dataKey: xKey,
-						type: xDomain ? "number" : "category",
-						domain: xDomain,
-						ticks: xTicks,
-						height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
-						label: xLabel ? {
-							value: xLabel,
-							position: "insideBottom",
-							className: AXIS_TITLE
-						} : void 0,
-						tickLine: false,
-						axisLine: false,
-						tickMargin: 8,
-						tickFormatter: (value) => xFormatter(value),
-						tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
-						interval: xTickDetail || xTicks ? 0 : void 0
-					}), /* @__PURE__ */ jsx(YAxis, {
-						tickLine: false,
-						axisLine: false,
-						width: "auto",
-						domain: yDomain,
-						ticks: yTicks,
-						label: yLabel ? {
-							value: yLabel,
-							angle: -90,
-							position: "insideLeft",
-							style: { textAnchor: "middle" },
-							className: AXIS_TITLE
-						} : void 0,
-						tickFormatter: (value) => (yTickFormatter ?? formatValue)(value),
-						tick: TICK
-					})] }),
-					crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
-						x: 0,
-						stroke: "var(--border)"
-					}) : /* @__PURE__ */ jsx(ReferenceLine, {
-						y: 0,
-						stroke: "var(--border)"
-					})),
-					referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
-						...horizontal ? {
-							x: at.y,
-							y: at.x
-						} : at,
-						stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
-						strokeDasharray: at.y === void 0 ? void 0 : "4 4",
-						label: label === void 0 ? void 0 : {
-							value: label,
-							position: labelPosition,
-							className: "fill-muted-foreground text-xs"
-						}
-					}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
-					/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-						labelFormatter: (_, payload) => {
-							const row = payload[0]?.payload;
-							return row ? xTooltipFormatter(row[xKey]) : null;
+	const [low, high] = Array.isArray(yDomain) ? yDomain : [];
+	const range = typeof low === "number" && typeof high === "number" ? [low, high] : void 0;
+	const values = [...data.flatMap((row) => series.map(({ key }) => row[key])), ...range ?? []].filter((value) => typeof value === "number" && Number.isFinite(value));
+	const valueAxis = useAxisScale({
+		initial: yScale,
+		toggle: yScaleToggle,
+		label: yLabel ? `${yLabel} scale` : "Value axis scale",
+		logBlocked: logBlocked ?? (fitsLog(values) ? void 0 : "Log needs every value above zero")
+	});
+	const log = valueAxis.scale === "log" ? logAxis(values, range) : void 0;
+	const detailedRows = horizontal && xTickDetail !== void 0;
+	const rowCount = (xTicks ?? data).length;
+	const plotClass = detailedRows ? "min-h-(--wrapped-chart-height) @min-[24rem]/chart:min-h-0" : void 0;
+	let minWidth;
+	if (!horizontal && (xTicks || xTickDetail)) {
+		const labelledValues = xTicks ?? data.map((row) => row[xKey]);
+		let tickWidth = 0;
+		for (const value of labelledValues) tickWidth = Math.max(tickWidth, xFormatter(value).length * MONO_WIDTH);
+		if (xTickDetail) for (const row of data) tickWidth = Math.max(tickWidth, xTickDetail(row).length * GEIST_WIDTH);
+		minWidth = Math.ceil((tickWidth + 12) * labelledValues.length + 64);
+	}
+	const plotStyle = {
+		height: detailedRows ? Math.max(height, rowCount * 72 + 48) : height,
+		minWidth,
+		...detailedRows ? { "--wrapped-chart-height": `${rowCount * 104 + 48}px` } : {},
+		...forecastFrom !== void 0 ? {
+			"--chart-actual": `url(#${clipId}-actual)`,
+			"--chart-forecast": `url(#${clipId}-forecast)`
+		} : {}
+	};
+	const endRight = !horizontal && xTicks ? endRoom(xFormatter, xTicks) : horizontal && yTickFormatter ? 28 : 8;
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-stale": stale ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs(CardHeader, { children: [
+				/* @__PURE__ */ jsx(CardTitle, { children: title }),
+				description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+				stale && /* @__PURE__ */ jsx(StaleNote, { since: stale }),
+				(action || valueAxis.buttons) && /* @__PURE__ */ jsxs(CardAction, {
+					className: "flex flex-wrap items-center gap-x-3 gap-y-2",
+					children: [action, valueAxis.buttons]
+				})
+			] }),
+			/* @__PURE__ */ jsx(CardContent, {
+				ref: contentRef,
+				className: "@container/chart overflow-x-auto",
+				role: minWidth ? "region" : void 0,
+				"aria-label": minWidth ? "Chart, scroll horizontally for all labelled values" : void 0,
+				tabIndex: minWidth ? 0 : void 0,
+				children: placeholder ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "chart-placeholder",
+					className: cn("flex items-center justify-center", plotClass),
+					style: plotStyle,
+					children: placeholder
+				}) : /* @__PURE__ */ jsx(ChartContainer, {
+					config,
+					className: cn("aspect-auto w-full", plotClass, onClick && "cursor-pointer"),
+					style: plotStyle,
+					children: /* @__PURE__ */ jsxs(Chart, {
+						data,
+						layout: horizontal ? "vertical" : "horizontal",
+						stackOffset,
+						onClick,
+						throttledEvents: onClick ? [] : void 0,
+						margin: {
+							top: 12,
+							left: 0,
+							right: ends ? Math.max(labelRoom, endRight) : endRight
 						},
-						formatter: seriesRow(series, formatValue)
-					}) }),
-					children,
-					/* @__PURE__ */ jsx(ChartLegend, {
-						content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
-						itemSorter: null
+						children: [
+							/* @__PURE__ */ jsx(CartesianGrid, {
+								vertical: horizontal,
+								horizontal: !horizontal
+							}),
+							horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+								type: "number",
+								niceTicks: "snap125",
+								hide: !yTickFormatter,
+								domain: yDomain,
+								ticks: yTicks,
+								tickLine: false,
+								axisLine: false,
+								tickMargin: 8,
+								tick: yTickFormatter ? /* @__PURE__ */ jsx(ValueTick, {
+									axis: "x",
+									formatter: yTickFormatter,
+									...TICK
+								}) : TICK
+							}), /* @__PURE__ */ jsx(HorizontalAxis, {
+								data,
+								xKey,
+								xFormatter,
+								xTickDetail,
+								xTicks
+							})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+								dataKey: xKey,
+								type: xDomain ? "number" : "category",
+								domain: xDomain,
+								ticks: xTicks,
+								height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
+								label: xLabel ? {
+									value: xLabel,
+									position: "insideBottom",
+									className: AXIS_TITLE
+								} : void 0,
+								tickLine: false,
+								axisLine: false,
+								tickMargin: 8,
+								tickFormatter: (value) => xFormatter(value),
+								tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
+								interval: xTickDetail || xTicks ? 0 : void 0
+							}), /* @__PURE__ */ jsx(YAxis, {
+								scale: valueAxis.scale,
+								niceTicks: log ? void 0 : "snap125",
+								tickLine: false,
+								axisLine: false,
+								width: "auto",
+								domain: log?.domain ?? yDomain,
+								ticks: log?.ticks ?? yTicks,
+								label: yLabel ? {
+									value: yLabel,
+									angle: -90,
+									position: "insideLeft",
+									style: { textAnchor: "middle" },
+									className: AXIS_TITLE
+								} : void 0,
+								tick: yTickFormatter ? /* @__PURE__ */ jsx(ValueTick, {
+									axis: "y",
+									formatter: yTickFormatter,
+									ownUnit: log !== void 0,
+									...TICK
+								}) : TICK,
+								tickFormatter: yTickFormatter ? void 0 : (value) => formatValue(value)
+							})] }),
+							crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
+								x: 0,
+								stroke: "var(--border)"
+							}) : /* @__PURE__ */ jsx(ReferenceLine, {
+								y: 0,
+								stroke: "var(--border)"
+							})),
+							referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
+								...horizontal ? {
+									x: at.y,
+									y: at.x
+								} : at,
+								stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+								shape: haloLine,
+								strokeDasharray: at.y === void 0 ? void 0 : "4 4",
+								label: label === void 0 ? void 0 : {
+									value: label,
+									position: labelPosition,
+									className: "fill-muted-foreground stroke-card text-xs",
+									style: {
+										paintOrder: "stroke",
+										strokeWidth: 3,
+										strokeLinejoin: "round"
+									}
+								}
+							}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
+							/* @__PURE__ */ jsx(ChartTooltip, {
+								cursor: { fillOpacity: .4 },
+								content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+									labelFormatter: (_, payload) => {
+										const row = payload[0]?.payload;
+										return row ? xTooltipFormatter(row[xKey]) : null;
+									},
+									formatter: tooltipRow ?? seriesRow(series, formatValue)
+								})
+							}),
+							(forecastFrom !== void 0 || today !== void 0) && /* @__PURE__ */ jsx(TimeMarks, {
+								data,
+								xKey,
+								forecastFrom,
+								today,
+								clipId,
+								hatch: forecastHatch
+							}),
+							children,
+							raised && (forecastFrom === void 0 ? ["solid"] : ["chart-actual", "chart-forecast"]).map((part) => /* @__PURE__ */ jsx(Line, {
+								dataKey: raised.key,
+								type: curve,
+								stroke: "var(--foreground)",
+								strokeWidth: 2,
+								strokeDasharray: part === "chart-forecast" ? "5 4" : void 0,
+								className: part === "solid" ? "chart-raised" : `chart-raised ${part}`,
+								dot: false,
+								activeDot: false,
+								tooltipType: "none",
+								legendType: "none",
+								isAnimationActive: false
+							}, `raised-${part}`)),
+							ends ? /* @__PURE__ */ jsx(EndLabels, {
+								data,
+								xKey,
+								series
+							}) : /* @__PURE__ */ jsx(ChartLegend, {
+								content: quiet ? /* @__PURE__ */ jsx(QuietLegend, {
+									series,
+									raisable: endLabels,
+									raised: raised?.key,
+									onRaise: setRaisedKey
+								}) : legend,
+								itemSorter: null
+							})
+						]
 					})
-				]
+				})
+			}),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: "flex-col items-start gap-2 text-sm",
+				children: footer
 			})
-		}) }),
-		footer && /* @__PURE__ */ jsx(CardFooter, {
-			className: "flex-col items-start gap-2 text-sm",
-			children: footer
-		})
-	] });
+		]
+	});
 }
 //#endregion
-export { ChartFrame, seriesFill, seriesRow };
+export { ChartFrame, QuietLegend, barFill, endDot, seriesFill, seriesRow };