@siyahi/ui 0.1.9-next.29 → 0.1.9-next.30

package/dist/lib/chart-frame.js

@@ -2,17 +2,64 @@ import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 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 { useMemo } from "react";
-import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } 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.
 */
@@ -48,8 +95,15 @@ function seriesFill(item, data) {
 * 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) {
-	return ({ cx, cy, index }) => index === count - 1 && cx !== void 0 && cy !== void 0 ? /* @__PURE__ */ jsx("circle", {
+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,
@@ -188,8 +242,18 @@ function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
 * 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, 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 }) {
+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 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,
@@ -220,158 +284,197 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 	const plotStyle = {
 		height: detailedRows ? Math.max(height, rowCount * 72 + 48) : height,
 		minWidth,
-		...detailedRows ? { "--wrapped-chart-height": `${rowCount * 104 + 48}px` } : {}
+		...detailedRows ? { "--wrapped-chart-height": `${rowCount * 104 + 48}px` } : {},
+		...forecastFrom !== void 0 ? {
+			"--chart-actual": `url(#${clipId}-actual)`,
+			"--chart-forecast": `url(#${clipId}-forecast)`
+		} : {}
 	};
-	return /* @__PURE__ */ jsxs(Card, { children: [
-		/* @__PURE__ */ jsxs(CardHeader, { children: [
-			/* @__PURE__ */ jsx(CardTitle, { children: title }),
-			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
-			(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, {
-			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: !horizontal && xTicks ? endRoom(xFormatter, xTicks) : horizontal && yTickFormatter ? 28 : 8
-					},
-					children: [
-						/* @__PURE__ */ jsx(CartesianGrid, {
-							vertical: horizontal,
-							horizontal: !horizontal,
-							strokeDasharray: "3 3"
-						}),
-						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"
+	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
+						},
+						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)
+							}, `${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
 							})
-						}),
-						children,
-						/* @__PURE__ */ jsx(ChartLegend, {
-							content: 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, endDot, seriesFill, seriesRow };
+export { ChartFrame, QuietLegend, barFill, endDot, seriesFill, seriesRow };

package/dist/lib/chart-marks.d.ts

@@ -0,0 +1,83 @@
+import { ChartSeries } from "./chart-series.js";
+//#region src/lib/chart-marks.d.ts
+/** The colour a series takes when it is one of many drawn quietly behind the few a page names in colour. */
+export declare const QUIET = "var(--muted-foreground)";
+/** Quiet series first, so the named ones draw over them; otherwise the page's order. */
+export declare function drawOrder<T>(series: ChartSeries<T>): ChartSeries<T>;
+/** Room the names need right of the plot: the widest name as drawn, after its leader and colour square. */
+export declare function endLabelRoom(names: readonly string[]): number;
+/**
+ * Whether every line ends on the plot's right edge: each series has a value in the last row, there is more than one
+ * row, and a numeric x axis runs no further than the data. A line that stops short would need a long leader across
+ * the others to reach its name, so the chart keeps its legend then.
+ */
+export declare function linesEndAtEdge<T extends object, K extends keyof T>(data: readonly T[], xKey: K, series: ChartSeries<T>, xDomain?: readonly [number, number]): boolean;
+/**
+ * Whether the names fit at the line ends: a card at least 400px wide, names taking at most 30% of it, and a plot
+ * tall enough to hold them all 14px apart. Otherwise the chart keeps its legend below.
+ */
+export declare function endLabelsFit(names: readonly string[], width: number, plotHeight: number): boolean;
+/** A series' line end, in pixels, and the name it carries there. */
+export interface LineEnd {
+  /** The series' key: names can repeat, keys cannot. */
+  id: string;
+  name: string;
+  color: string;
+  x: number;
+  y: number;
+  /** A quiet (grey) series: its name is muted, with no colour square; its place says which line it is. */
+  quiet: boolean;
+}
+/** A name placed in the gutter right of the plot. */
+export interface PlacedEnd extends LineEnd {
+  /** The level it sits at, after names that would collide are spread apart. */
+  at: number;
+  /** The plot's right edge, where every name starts, whichever point its line ends on. */
+  gutter: number;
+  /** A leader joins the name to its line's end: moved off the end's level, or the line ends short of the edge. */
+  leader: boolean;
+}
+/** The part of the chart the series are drawn in, as Recharts' usePlotArea gives it. */
+export interface PlotBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+/**
+ * Where each name goes: every line's name at its end's level, spread to 14px apart, top to bottom, pushed back up
+ * from the plot's foot and never above its top. A point that maps to no number (a scale being replaced) is left out.
+ */
+export declare function placeEnds(lines: readonly LineEnd[], plot: PlotBox): PlacedEnd[];
+interface EndLabelsProps<T extends object, K extends keyof T> {
+  data: readonly T[];
+  xKey: K;
+  series: ChartSeries<T>;
+}
+/**
+ * Each series' name in the gutter right of the plot, in the text colour beside a square of the line's colour, in
+ * place of a legend the reader has to match colours against. A leader joins each name to its line's end where the
+ * name was moved off the end's level or the line ends short of the plot's edge. A quiet (grey) series' name is
+ * muted, with no square: its place beside its line's end says which line it is.
+ */
+export declare function EndLabels<T extends object, K extends keyof T>({ data, xKey, series }: EndLabelsProps<T, K>): import("react").JSX.Element | null;
+interface TimeMarksProps<T extends object, K extends keyof T> {
+  data: readonly T[];
+  xKey: K;
+  /** The x value from which the data is a forecast. */
+  forecastFrom?: T[K];
+  /** The x value of today. */
+  today?: T[K];
+  /** Prefix of the clip paths the series' actual and forecast copies use (`<id>-actual`, `<id>-forecast`). */
+  clipId: string;
+  /** Hatch the forecast stretch; a stack's fills already cover it, so a stacked chart only labels it. */
+  hatch: boolean;
+}
+/**
+ * A forecast stretch, from forecastFrom to the last point: a faint hatched band labelled FORECAST behind the lines,
+ * and the clip paths that keep each line solid before it and dashed after. And a "today" rule: 1px in the link
+ * colour with a small mono capital label.
+ */
+export declare function TimeMarks<T extends object, K extends keyof T>({ data, xKey, forecastFrom, today, clipId, hatch }: TimeMarksProps<T, K>): import("react").JSX.Element | null;
+//#endregion
+export {};