@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/linesareas/ThresholdAreaChart.js

@@ -0,0 +1,133 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ThresholdSide, ThresholdSource } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+import { TrendHover } from "./TrendHover.js";
+// src/charts/linesareas/ThresholdAreaChart.ts
+/** One series against a limit: budget, target or normal level. Only the first series in the data is drawn. */
+var ThresholdAreaChart = class extends TrendChart {
+	static meta = {
+		id: "threshold-area",
+		name: "Threshold area chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Colours the area between a line and a threshold by polarity, to show when a value is over or under its limit.",
+		tags: [
+			"target",
+			"over under",
+			"bipartite area",
+			"limit"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 60, 1),
+		variants: {
+			source: [
+				ThresholdSource.Mean,
+				ThresholdSource.Median,
+				ThresholdSource.First,
+				ThresholdSource.Last
+			],
+			side: [
+				ThresholdSide.Both,
+				ThresholdSide.Above,
+				ThresholdSide.Below
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			],
+			tolerance: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			source: ThresholdSource.Mean,
+			side: ThresholdSide.Both,
+			tolerance: false
+		};
+	}
+	get legended() {
+		return this.points.length > 0;
+	}
+	get points() {
+		return this.view[0]?.points ?? [];
+	}
+	get level() {
+		const { threshold, source } = this.options;
+		if (threshold !== void 0) return threshold;
+		const known = this.points.filter((p) => p.y !== null);
+		const sorted = TrendMath.sorted(known);
+		if (source === ThresholdSource.First) return known[0]?.y ?? 0;
+		if (source === ThresholdSource.Last) return known.at(-1)?.y ?? 0;
+		if (source === ThresholdSource.Median) return TrendMath.quantile(sorted, .5) ?? 0;
+		return sorted.reduce((a, b) => a + b, 0) / Math.max(1, sorted.length);
+	}
+	get slack() {
+		return this.options.tolerance ? TrendMath.deviation(this.points) / 2 : 0;
+	}
+	yValues() {
+		return [
+			...this.points.flatMap((p) => p.y === null ? [] : [p.y]),
+			this.level,
+			this.level + this.slack,
+			this.level - this.slack
+		];
+	}
+	legendItems() {
+		const { side } = this.options;
+		return [...side === ThresholdSide.Below ? [] : [{
+			key: "Above",
+			color: this.palette.diverging(TrendMath.polarity(1))
+		}], ...side === ThresholdSide.Above ? [] : [{
+			key: "Below",
+			color: this.palette.diverging(TrendMath.polarity(-1))
+		}]];
+	}
+	plotMarks(ctx, axes) {
+		const { side } = this.options;
+		const { width, height } = ctx.plot;
+		const points = this.points;
+		const rule = axes.y(this.level) ?? 0;
+		const reach = this.slack;
+		const top = axes.y(this.level + reach) ?? 0, bottom = axes.y(this.level - reach) ?? 0;
+		const band = ctx.marks("tolerance", "rect", reach ? [0] : []).attr("fill", ctx.theme.grid).attr("rx", 2).attr("x", 0).attr("width", width);
+		ctx.set(band, {
+			y: top,
+			height: Math.max(0, bottom - top)
+		});
+		const sides = [...side === ThresholdSide.Below ? [] : [{
+			key: "above",
+			tone: 1,
+			clip: `M0,0H${width}V${top}H0Z`,
+			from: top
+		}], ...side === ThresholdSide.Above ? [] : [{
+			key: "below",
+			tone: -1,
+			clip: `M0,${bottom}H${width}V${height}H0Z`,
+			from: bottom
+		}]].map((item) => ({
+			...item,
+			url: this.clipTo(ctx, item.key, item.clip)
+		}));
+		const fills = ctx.marks("fills", "path", sides, (d) => d.key).attr("fill", (d) => ctx.palette.diverging(TrendMath.polarity(d.tone))).attr("fill-opacity", .7).attr("clip-path", (d) => d.url);
+		ctx.set(fills, { d: (d) => this.areaPath(axes, d.from)(points) }, { d: (d) => this.flatPath(axes, d.from)(points) });
+		ctx.marks("rule", "line", [0]).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "4 3").attr("x1", 0).attr("x2", width).attr("y1", rule).attr("y2", rule);
+		const series = this.view.slice(0, 1);
+		this.strokes(ctx, "lines", series, axes, Scales.curve(this.options.curve), () => ctx.theme.inkSecondary);
+		const text = `${TrendHover.value(this.level)}`;
+		const note = ctx.text(ctx.marks("rule-note", "text", points.length ? [text] : []), 11, "ink").attr("text-anchor", "end").attr("dy", rule < 16 ? 14 : -5).text((d) => d).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.set(note, {
+			x: width - 2,
+			y: rule
+		}, {
+			x: width - 2,
+			y: rule
+		});
+		this.hoverColumns(ctx, axes, series, { color: () => ctx.theme.inkSecondary });
+	}
+};
+export { ThresholdAreaChart };

package/dist/charts/linesareas/TrendChart.js

@@ -0,0 +1,290 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { CurveKind, LegendPosition, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { LineAggregate, LineMarkers } from "./LineEnums.js";
+import { TrendHover } from "./TrendHover.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendTable } from "./TrendTable.js";
+import { area, extent, line, ticks, utcFormat } from "d3";
+// src/charts/linesareas/TrendChart.ts
+var LABEL_ROOM = 96;
+var TICK_WIDTH = 58;
+/** Lines over a shared x: parsing, scales, gaps, direct labels, markers and hover, for the whole module. */
+var TrendChart = class TrendChart extends CartesianChart {
+	static clips = 0;
+	clipScope = 0;
+	cache = null;
+	defaults() {
+		return {
+			x: "date",
+			y: "value",
+			series: "series",
+			aggregate: LineAggregate.Mean,
+			curve: CurveKind.Monotone,
+			scale: ScaleKind.Linear
+		};
+	}
+	get parsed() {
+		if (this.cache?.options !== this.options) {
+			const { x, y, series, aggregate } = this.options;
+			const table = new TrendTable(this.options.data, {
+				x,
+				y,
+				series,
+				aggregate
+			});
+			this.cache = {
+				options: this.options,
+				table,
+				view: []
+			};
+			this.cache.view = this.shape(table);
+		}
+		return this.cache;
+	}
+	get source() {
+		return this.parsed.table;
+	}
+	/** The series as drawn. */
+	get view() {
+		return this.parsed.view;
+	}
+	/** Derive the drawn series from the parsed ones: rebase, accumulate, rank. */
+	shape(table) {
+		return table.series;
+	}
+	/** True when series are named on the plot, so no legend is needed. */
+	get direct() {
+		return false;
+	}
+	get legended() {
+		return !this.direct && this.view.length > 1;
+	}
+	get legendPosition() {
+		return this.legended ? super.legendPosition : LegendPosition.None;
+	}
+	get zeroBased() {
+		return false;
+	}
+	get logarithmic() {
+		return this.options.scale === ScaleKind.Log;
+	}
+	/** Values the y axis must reach. */
+	yValues() {
+		return this.view.flatMap((series) => series.points.flatMap((point) => point.y === null ? [] : [point.y]));
+	}
+	/** Width kept free at the right of the plot for direct labels. */
+	labelRoom() {
+		return this.direct ? TrendLabels.room(this.view.map((series) => series.key), LABEL_ROOM) : 0;
+	}
+	/** Width kept free at the left of the plot. */
+	startRoom() {
+		const { markers } = this.options;
+		return markers && markers !== LineMarkers.None ? 8 : 0;
+	}
+	scales(ctx) {
+		const range = [this.startRoom(), ctx.plot.width - this.labelRoom()];
+		return {
+			x: this.thinned(this.xAxis(range), range[1] - range[0]),
+			y: this.yAxis(ctx.plot.height)
+		};
+	}
+	/** The plot can be narrower than the chart once labels take room, so x ticks are thinned to what fits. */
+	thinned(scale, width) {
+		const { ticks: source } = scale;
+		if (!source) return scale;
+		const all = source.bind(scale);
+		return Object.assign(scale, { ticks: (...count) => {
+			const values = all(...count);
+			const every = Math.ceil(values.length / Math.max(2, Math.floor(width / TICK_WIDTH)));
+			return values.filter((_, i) => i % every === 0);
+		} });
+	}
+	xAxis(range) {
+		return this.source.xScale(range);
+	}
+	yAxis(height) {
+		const log = this.logarithmic;
+		let [lo, hi] = extent(this.yValues().filter((value) => !log || value > 0));
+		if (lo === void 0 || hi === void 0) [lo, hi] = log ? [1, 10] : [0, 1];
+		if (this.zeroBased && !log) {
+			lo = Math.min(lo, 0);
+			hi = Math.max(hi, 0);
+		}
+		if (lo === hi) {
+			const pad = Math.abs(lo) * .1 || 1;
+			lo = log ? lo / 2 : lo - pad;
+			hi += pad;
+		}
+		const scale = Scales.continuous(this.options.scale).domain([lo, hi]).range([height, 0]);
+		if (!log) return scale.nice();
+		return hi / lo < 10 ? Object.assign(scale, { ticks: () => ticks(lo, hi, this.yTicks()) }) : scale;
+	}
+	/** On a wide log axis only 1, 2 and 5 keep a label; the rest would collide. */
+	tickFormat(scale) {
+		const [lo, hi] = scale.domain?.() ?? [];
+		if (lo instanceof Date) return (value) => this.streaming && +hi - +lo < 12e4 ? utcFormat("%H:%M:%S")(value) : TrendChart.dateTick(value, +hi - +lo);
+		const format = super.tickFormat(scale);
+		if (!format || !this.logarithmic || !(hi / lo > 20)) return format;
+		return (value) => [
+			1,
+			2,
+			5
+		].includes(Math.round(+value / 10 ** Math.floor(Math.log10(+value) + 1e-9))) ? format(value) : "";
+	}
+	static dateTick(value, span) {
+		const day = 864e5;
+		return utcFormat(span < 2 * day ? "%H:%M" : span < 400 * day ? "%b %-d" : span < 1500 * day ? "%b %Y" : "%Y")(value);
+	}
+	drawn = (point) => point.y !== null && (!this.logarithmic || point.y > 0);
+	px(axes, point) {
+		return axes.x(point.x) ?? 0;
+	}
+	py(axes, point) {
+		return axes.y(point.y) ?? 0;
+	}
+	curveOf(kind = this.options.curve) {
+		return Scales.curve(kind);
+	}
+	linePath(axes, curve = this.curveOf()) {
+		const path = line().defined(this.drawn).x((p) => this.px(axes, p)).y((p) => this.py(axes, p)).curve(curve);
+		return (points) => path(points) ?? "";
+	}
+	/** Filled shape between the line and `base`, a pixel level or a per-point one. */
+	areaPath(axes, base, curve = this.curveOf()) {
+		const path = area().defined(this.drawn).x((p) => this.px(axes, p)).y0(base).y1((p) => this.py(axes, p)).curve(curve);
+		return (points) => path(points) ?? "";
+	}
+	/** The same outline as `areaPath`, collapsed onto `base`: the shape a fill grows from. */
+	flatPath(axes, base, curve = this.curveOf()) {
+		const path = area().defined(this.drawn).x((p) => this.px(axes, p)).y(base).curve(curve);
+		return (points) => path(points) ?? "";
+	}
+	/** Reveals a stroke on first paint and morphs it on later ones. */
+	trace(ctx, paths, d) {
+		paths.filter(function() {
+			return !this.getAttribute("d");
+		}).attr("d", d);
+		ctx.drawOn(paths);
+		ctx.set(paths, { d });
+	}
+	styleStroke(paths, color) {
+		return paths.attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+	}
+	/** One 2px line per series, plus a dot for any point with no neighbour to join. */
+	strokes(ctx, name, series, axes, curve = this.curveOf(), color = (s) => ctx.palette.color(s.key)) {
+		const d = this.linePath(axes, curve);
+		const lines = this.styleStroke(ctx.marks(name, "path", series, (s) => s.key), color);
+		this.trace(ctx, lines, (s) => d(s.points));
+		const lonely = series.flatMap((s) => s.points.flatMap((p, i) => {
+			const before = s.points[i - 1], after = s.points[i + 1];
+			return this.drawn(p) && !(before && this.drawn(before)) && !(after && this.drawn(after)) ? [{
+				key: `${s.key}/${p.order}`,
+				x: this.px(axes, p),
+				y: this.py(axes, p),
+				color: color(s)
+			}] : [];
+		}));
+		this.dots(ctx, `${name}-isolated`, lonely);
+		return lines;
+	}
+	/** Round markers with a 2px surface ring. */
+	dots(ctx, name, dots, parent = ctx.root, r = 5) {
+		const marks = ctx.marks(name, "circle", dots, (d) => d.key, parent).attr("fill", (d) => d.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(marks, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		});
+		return marks;
+	}
+	/** The points each series shows a marker on, thinned so that markers never touch. */
+	markerPoints(series, mode, width) {
+		const known = series.points.filter(this.drawn);
+		if (mode === LineMarkers.None || !known.length) return [];
+		if (mode === LineMarkers.Ends) return [.../* @__PURE__ */ new Set([known[0], known.at(-1)])];
+		if (mode === LineMarkers.Extrema) return this.extrema(known);
+		const stride = Math.ceil(known.length * 13 / Math.max(1, width));
+		return known.filter((_, i) => i % stride === 0);
+	}
+	extrema(known) {
+		const least = known.reduce((a, b) => b.y < a.y ? b : a), most = known.reduce((a, b) => b.y > a.y ? b : a);
+		return [.../* @__PURE__ */ new Set([least, most])];
+	}
+	markers(ctx, series, axes, mode) {
+		const width = ctx.plot.width - this.labelRoom();
+		this.dots(ctx, "markers", series.flatMap((s) => this.markerPoints(s, mode, width).map((p) => ({
+			key: `${s.key}/${p.order}`,
+			x: this.px(axes, p),
+			y: this.py(axes, p),
+			color: ctx.palette.color(s.key)
+		}))));
+		const notes = mode !== LineMarkers.Extrema ? [] : TrendLabels.reject(series.flatMap((s) => this.markerPoints(s, mode, width).map((p, i) => {
+			const y = this.py(axes, p), text = String(TrendHover.value(p.y)), w = text.length * 6.2, above = i === 1 || y > 20;
+			return {
+				key: `${s.key}/${p.order}`,
+				text,
+				w,
+				h: 12,
+				x: Math.min(width - w / 2, Math.max(w / 2, this.px(axes, p))),
+				y: Math.min(ctx.plot.height - 6, Math.max(6, above ? y - 12 : y + 13))
+			};
+		})));
+		const labels = ctx.text(ctx.marks("marker-notes", "text", notes, (d) => d.key)).attr("text-anchor", "middle").attr("dy", ".32em").text((d) => d.text);
+		ctx.set(labels, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+	/** Names each series past its last point; a thin leader ties a label pushed aside to its line. */
+	endLabels(ctx, series, axes, color = (key) => ctx.palette.color(key)) {
+		const start = ctx.plot.width - this.labelRoom();
+		const ends = series.flatMap((s) => {
+			const last = s.points.filter(this.drawn).at(-1);
+			return last ? [{
+				key: s.key,
+				from: this.px(axes, last),
+				y: this.py(axes, last)
+			}] : [];
+		});
+		const placed = TrendLabels.dodge(ends, ctx.plot.height);
+		const leads = this.styleStroke(ctx.marks("label-leads", "path", placed, (d) => d.key), (d) => color(d.key)).attr("stroke-width", 1).attr("stroke-dasharray", "1 3");
+		ctx.set(leads, { d: (d) => `M${d.from},${d.y}L${start + 3},${d.y}L${start + 8},${d.at}` });
+		const labels = ctx.text(ctx.marks("labels", "text", placed, (d) => d.key)).attr("dy", ".32em").text((d) => TrendLabels.fit(d.key, this.labelRoom() - 12));
+		ctx.set(labels, {
+			x: start + 11,
+			y: (d) => d.at
+		}, {
+			x: start + 11,
+			y: (d) => d.at
+		});
+	}
+	/** A clip region for later marks: returns the value for their `clip-path` attribute. */
+	clipTo(ctx, name, d, parent = ctx.root) {
+		this.clipScope ||= ++TrendChart.clips;
+		const id = `trend-clip-${this.clipScope}-${name}`;
+		ctx.marks(`clip-${name}`, "clipPath", [d], void 0, parent).attr("id", id).selectAll("path").data([d]).join("path").attr("d", d);
+		return `url(#${id})`;
+	}
+	/** Attaches the hover columns; call last so they sit above every mark. */
+	hoverColumns(ctx, axes, series, source = {}) {
+		const slices = TrendHover.slices(series.map((s) => ({
+			...s,
+			points: s.points.filter(this.drawn)
+		})), {
+			place: (point) => [this.px(axes, point), this.py(axes, point)],
+			color: (s) => ctx.palette.color(s.key),
+			value: (point) => TrendHover.value(point.raw === void 0 ? point.y : point.raw),
+			...source
+		});
+		TrendHover.attach(ctx, slices, ctx.plot.width, ctx.plot.height);
+	}
+};
+export { TrendChart };

package/dist/charts/linesareas/TrendHover.js

@@ -0,0 +1,55 @@
+import { utcFormat } from "d3";
+// src/charts/linesareas/TrendHover.ts
+var dateTitle = utcFormat("%b %-d, %Y");
+/** Column hit-areas over a plot, with a guide line and focus dots, so sparse thin lines stay easy to read. */
+var TrendHover = class {
+	static title(x) {
+		return x instanceof Date ? dateTitle(x) : String(x);
+	}
+	static value(value) {
+		return value === null || value === void 0 ? "–" : +value.toFixed(Math.abs(value) < 10 ? 3 : 2);
+	}
+	/** One slice per distinct x across `series`. */
+	static slices(series, { place, color, value, title }) {
+		const slices = /* @__PURE__ */ new Map();
+		for (const line of series) for (const point of line.points) {
+			const at = point.y === null ? null : place(point, line);
+			if (!at) continue;
+			const entry = slices.get(point.order) ?? {
+				order: point.order,
+				slice: {
+					x: at[0],
+					title: title?.(point) ?? this.title(point.x),
+					rows: [],
+					marks: []
+				}
+			};
+			entry.slice.rows.push([line.key, value?.(point, line) ?? this.value(point.y)]);
+			entry.slice.marks.push({
+				x: at[0],
+				y: at[1],
+				color: color(line)
+			});
+			slices.set(point.order, entry);
+		}
+		return [...slices.values()].sort((a, b) => a.order - b.order).map((entry) => entry.slice);
+	}
+	static attach(ctx, slices, width, height, parent = ctx.root) {
+		const stride = Math.max(1, Math.ceil(slices.length / Math.max(1, width / 2)));
+		const kept = slices.filter((_, i) => i % stride === 0);
+		const edge = (i) => i <= 0 ? 0 : i >= kept.length ? width : (kept[i - 1].x + kept[i].x) / 2;
+		const guide = ctx.marks("hover-guide", "line", [0], void 0, parent).attr("y1", 0).attr("y2", height).attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("opacity", 0).attr("pointer-events", "none");
+		const show = (slice) => {
+			guide.attr("opacity", slice ? 1 : 0).attr("x1", slice?.x ?? 0).attr("x2", slice?.x ?? 0);
+			ctx.marks("hover-dots", "circle", slice?.marks ?? [], void 0, parent).attr("cx", (d) => d.x).attr("cy", (d) => d.y).attr("r", 5).attr("fill", (d) => d.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("pointer-events", "none");
+		};
+		show(null);
+		const hits = ctx.marks("hover", "rect", kept, (_, i) => i, parent).attr("fill", "transparent").attr("x", (_, i) => edge(i)).attr("width", (_, i) => Math.max(0, edge(i + 1) - edge(i))).attr("y", 0).attr("height", height);
+		ctx.hover(hits, (slice) => ({
+			title: slice.title,
+			rows: slice.rows,
+			color: slice.marks.length === 1 ? slice.marks[0].color : void 0
+		})).style("cursor", "crosshair").on("pointermove.guide", (_, slice) => show(slice)).on("pointerleave.guide", () => show(null));
+	}
+};
+export { TrendHover };

package/dist/charts/linesareas/TrendLabels.js

@@ -0,0 +1,32 @@
+// src/charts/linesareas/TrendLabels.ts
+var CHAR = 6.2;
+var ROW = 14;
+/** Places direct labels so they never overlap, dropping what cannot fit. */
+var TrendLabels = class {
+	/** Width that the longest label needs, capped so the plot keeps most of the chart. */
+	static room(texts, limit) {
+		return Math.min(limit, Math.ceil(Math.max(0, ...texts.map((text) => text.length * CHAR))) + 14);
+	}
+	static fit(text, width) {
+		const chars = Math.floor(width / CHAR);
+		return text.length <= chars ? text : `${text.slice(0, Math.max(1, chars - 1))}…`;
+	}
+	/** Spreads items along `0..height` keeping `gap` between them, nearest their wanted `y`. */
+	static dodge(items, height, gap = ROW) {
+		const kept = [...items].sort((a, b) => a.y - b.y).slice(0, Math.max(1, Math.floor(height / gap)));
+		const at = kept.map((item) => item.y);
+		for (let i = 0; i < at.length; i++) at[i] = Math.max(at[i], i ? at[i - 1] + gap : gap / 2);
+		for (let i = at.length - 1; i >= 0; i--) at[i] = Math.min(at[i], i === at.length - 1 ? height - gap / 2 : at[i + 1] - gap);
+		return kept.map((item, i) => ({
+			...item,
+			at: at[i]
+		}));
+	}
+	/** Keeps items in priority order, skipping any box that would touch one already kept. */
+	static reject(items) {
+		const kept = [];
+		for (const item of items) if (!kept.some((other) => Math.abs(item.x - other.x) < (item.w + other.w) / 2 + 2 && Math.abs(item.y - other.y) < (item.h + other.h) / 2 + 1)) kept.push(item);
+		return kept;
+	}
+};
+export { TrendLabels };

package/dist/charts/linesareas/TrendMath.js

@@ -0,0 +1,62 @@
+import { deviation, mean, quantileSorted } from "d3";
+// src/charts/linesareas/TrendMath.ts
+var present = (points) => points.filter((point) => point.y !== null);
+/** Numeric transforms shared by the line charts. Null values stay gaps throughout. */
+var TrendMath = class {
+	/** Position on the diverging ramp for a signed amount: gains take the cool pole, losses the warm one. */
+	static polarity(sign, strength = .9) {
+		return -sign * strength;
+	}
+	/** Values of a series keyed by x position. */
+	static byOrder(series) {
+		return new Map(series.points.map((point) => [point.order, point.y]));
+	}
+	/** Sample reshaping: moves every series to start at `level`, removing the fixed offsets between them. */
+	static restart(rows, level) {
+		const start = /* @__PURE__ */ new Map();
+		return rows.map((row) => {
+			const name = row.series, value = row.value;
+			if (!start.has(name)) start.set(name, value);
+			return {
+				...row,
+				value: +(level + value - start.get(name)).toFixed(2)
+			};
+		});
+	}
+	/** Centred moving average, shrinking at the ends. */
+	static movingAverage(points, window) {
+		const reach = Math.floor(window / 2);
+		return points.map((point, i) => ({
+			...point,
+			y: mean(points.slice(Math.max(0, i - reach), i + reach + 1), (near) => near.y ?? void 0) ?? null
+		}));
+	}
+	/** Least-squares fit over x, returned as the fitted value at each point. */
+	static regression(points) {
+		const { slope, intercept } = this.fit(points);
+		return present(points).map((point) => ({
+			...point,
+			y: intercept + slope * point.order
+		}));
+	}
+	static fit(points) {
+		const known = present(points);
+		const mx = mean(known, (point) => point.order) ?? 0, my = mean(known, (point) => point.y) ?? 0;
+		const spread = known.reduce((total, point) => total + (point.order - mx) ** 2, 0);
+		const slope = spread ? known.reduce((total, point) => total + (point.order - mx) * (point.y - my), 0) / spread : 0;
+		return {
+			slope,
+			intercept: my - slope * mx
+		};
+	}
+	static sorted(points) {
+		return present(points).map((point) => point.y).sort((a, b) => a - b);
+	}
+	static quantile(sorted, p) {
+		return sorted.length ? quantileSorted(sorted, p) : null;
+	}
+	static deviation(points) {
+		return deviation(present(points), (point) => point.y) ?? 0;
+	}
+};
+export { TrendMath };

package/dist/charts/linesareas/TrendTable.js

@@ -0,0 +1,87 @@
+import { LineAggregate } from "./LineEnums.js";
+import { group, mean, scaleLinear, scalePoint, scaleUtc, sum } from "d3";
+// src/charts/linesareas/TrendTable.ts
+var TrendXKind = /* @__PURE__ */ function(TrendXKind) {
+	TrendXKind["Time"] = "time";
+	TrendXKind["Number"] = "number";
+	TrendXKind["Category"] = "category";
+	return TrendXKind;
+}({});
+var ISO_DATE = /^\d{4}-\d{2}(-\d{2})?/;
+/** Long-form rows parsed into sorted series. Accepts dates, ISO strings, numbers or categories on x; bad y values become gaps. */
+var TrendTable = class TrendTable {
+	kind;
+	series;
+	/** Every distinct x in axis order. */
+	xs;
+	constructor(rows, { x, y, series, aggregate }) {
+		const table = Array.isArray(rows) ? rows : [];
+		this.kind = TrendTable.classify(table.map((row) => row[x]));
+		const seen = /* @__PURE__ */ new Map();
+		const parsed = table.flatMap((row) => {
+			const place = this.locate(row[x], seen);
+			return place ? [{
+				...place,
+				key: String(row[series] ?? y),
+				y: TrendTable.number(row[y])
+			}] : [];
+		});
+		this.series = [...group(parsed, (item) => item.key)].map(([key, items]) => ({
+			key,
+			points: [...group(items, (item) => item.order)].map(([order, same]) => ({
+				x: same[0].x,
+				order,
+				y: TrendTable.combine(same.map((item) => item.y), aggregate)
+			})).sort((a, b) => a.order - b.order)
+		}));
+		this.xs = [...new Map(parsed.map((item) => [item.order, {
+			x: item.x,
+			order: item.order,
+			y: null
+		}])).values()].sort((a, b) => a.order - b.order);
+	}
+	/** A numeric cell, or null for anything that cannot be drawn. */
+	static number(cell) {
+		if (cell === null || cell === void 0 || cell === "") return null;
+		const value = +cell;
+		return Number.isFinite(value) ? value : null;
+	}
+	xScale(range) {
+		const first = this.xs[0], last = this.xs.at(-1);
+		if (this.kind === "category") return scalePoint(this.xs.map((point) => String(point.x)), range);
+		if (this.kind === "time") return scaleUtc([first?.x ?? /* @__PURE__ */ new Date(0), last?.x ?? /* @__PURE__ */ new Date(1)], range);
+		return scaleLinear([first?.order ?? 0, last?.order ?? 1], range);
+	}
+	static classify(cells) {
+		const present = cells.filter((cell) => cell !== null && cell !== void 0 && cell !== "");
+		if (present.length && present.every((cell) => cell instanceof Date || typeof cell === "string" && ISO_DATE.test(cell))) return "time";
+		return present.every((cell) => typeof cell === "number" && Number.isFinite(cell)) ? "number" : "category";
+	}
+	locate(cell, seen) {
+		if (cell === null || cell === void 0 || cell === "") return null;
+		if (this.kind === "time") {
+			const date = cell instanceof Date ? cell : new Date(cell);
+			return Number.isNaN(+date) ? null : {
+				x: date,
+				order: +date
+			};
+		}
+		if (this.kind === "number") return {
+			x: cell,
+			order: cell
+		};
+		const label = String(cell);
+		if (!seen.has(label)) seen.set(label, seen.size);
+		return {
+			x: label,
+			order: seen.get(label)
+		};
+	}
+	static combine(values, aggregate) {
+		const present = values.filter((value) => value !== null);
+		if (!present.length) return null;
+		if (aggregate === LineAggregate.Sum) return sum(present);
+		return aggregate === LineAggregate.Last ? present.at(-1) : mean(present);
+	}
+};
+export { TrendTable, TrendXKind };