@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/linesareas/MultiLineChart.js

@@ -0,0 +1,97 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, ScaleKind, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LineLabels, LineMarkers } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+import { mean, symbol } from "d3";
+// src/charts/linesareas/MultiLineChart.ts
+var SYMBOLS = Object.values(SymbolKind);
+/** Compare the shape of several series on one axis. Works up to about eight lines; past that use `GridPlot`. */
+var MultiLineChart = class extends TrendChart {
+	static meta = {
+		id: "multi-line",
+		name: "Multi-line chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Overlays several series on shared axes, identified directly or by legend, to compare their paths.",
+		tags: [
+			"trend",
+			"comparison",
+			"spaghetti"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 32, 5),
+		variants: {
+			labels: [LineLabels.Direct, LineLabels.Legend],
+			curve: [CurveKind.Monotone, CurveKind.Linear],
+			markers: [
+				LineMarkers.None,
+				LineMarkers.Ends,
+				LineMarkers.Extrema,
+				LineMarkers.All
+			],
+			symbols: [false, true],
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			average: [false, true]
+		},
+		valid: ({ markers, symbols }) => !(symbols && markers === LineMarkers.None)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			labels: LineLabels.Direct,
+			markers: LineMarkers.None,
+			symbols: false,
+			average: false
+		};
+	}
+	get direct() {
+		return this.options.labels === LineLabels.Direct;
+	}
+	tone(ctx) {
+		const { focus } = this.options;
+		return (s) => {
+			const color = ctx.palette.color(s.key);
+			return !focus?.length || focus.includes(s.key) ? color : ctx.theme.grid;
+		};
+	}
+	averaged() {
+		const lookups = this.view.map(TrendMath.byOrder);
+		return {
+			key: "Average",
+			points: this.source.xs.map((slot) => ({
+				...slot,
+				y: mean(lookups, (values) => values.get(slot.order) ?? void 0) ?? null
+			}))
+		};
+	}
+	plotMarks(ctx, axes) {
+		const series = this.view;
+		for (const s of series) ctx.palette.color(s.key);
+		const tone = this.tone(ctx);
+		const ordered = [...series].sort((a, b) => +(tone(a) !== ctx.theme.grid) - +(tone(b) !== ctx.theme.grid));
+		this.strokes(ctx, "lines", ordered, axes, this.curveOf(), tone);
+		this.strokes(ctx, "average", this.options.average ? [this.averaged()] : [], axes, this.curveOf(), () => ctx.theme.inkSecondary).attr("stroke-dasharray", "5 4");
+		this.markers(ctx, series, axes, this.options.symbols ? LineMarkers.None : this.options.markers);
+		this.glyphs(ctx, this.options.symbols ? series : [], axes, tone);
+		if (this.direct) this.endLabels(ctx, series, axes);
+		this.hoverColumns(ctx, axes, series);
+	}
+	glyphs(ctx, series, axes, tone) {
+		const width = ctx.plot.width - this.labelRoom();
+		const items = series.flatMap((s, i) => this.markerPoints(s, this.options.markers, width).map((p) => ({
+			key: `${s.key}/${p.order}`,
+			kind: SYMBOLS[i % SYMBOLS.length],
+			color: tone(s),
+			x: this.px(axes, p),
+			y: this.py(axes, p)
+		})));
+		const marks = ctx.marks("symbol-marks", "path", items, (d) => d.key).attr("fill", (d) => d.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(marks, {
+			d: (d) => symbol(Scales.symbol(d.kind), 90)() ?? "",
+			transform: (d) => `translate(${d.x},${d.y})`
+		});
+	}
+};
+export { MultiLineChart };

package/dist/charts/linesareas/RangeAreaChart.js

@@ -0,0 +1,148 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LineBaseline, RangeCenter, RangeForm } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendHover } from "./TrendHover.js";
+import { TrendTable } from "./TrendTable.js";
+import { area } from "d3";
+// src/charts/linesareas/RangeAreaChart.ts
+/** A value together with its uncertainty or daily range: temperature, confidence bands, min and max. */
+var RangeAreaChart = class extends TrendChart {
+	static meta = {
+		id: "range-area",
+		name: "Range area chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows a low-to-high range along x as a band, error bars or spans, with an optional centre line.",
+		tags: [
+			"band",
+			"confidence interval",
+			"min max"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 30),
+		variants: {
+			form: [
+				RangeForm.Band,
+				RangeForm.ErrorBars,
+				RangeForm.Spans
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			],
+			center: [RangeCenter.Line, RangeCenter.None],
+			edges: [false, true],
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			baseline: [LineBaseline.Data, LineBaseline.Zero]
+		},
+		valid: ({ form, curve, center, edges, scale, baseline }) => !(scale === ScaleKind.Log && baseline === LineBaseline.Zero) && (form === RangeForm.Band || !edges && (center === RangeCenter.Line || curve === CurveKind.Monotone))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			y: "close",
+			low: "low",
+			high: "high",
+			form: RangeForm.Band,
+			center: RangeCenter.Line,
+			edges: false,
+			baseline: LineBaseline.Data
+		};
+	}
+	get zeroBased() {
+		return this.options.baseline === LineBaseline.Zero;
+	}
+	shape(table) {
+		const { x, series, aggregate, low, high, y } = this.options;
+		const column = (name) => new TrendTable(this.options.data, {
+			x,
+			y: name,
+			series,
+			aggregate
+		}).series;
+		const lows = column(low), highs = column(high);
+		return table.series.map((s, n) => {
+			const key = (list) => new Map((list[n]?.points ?? []).map((p) => [p.order, p.y]));
+			const bottom = key(lows), top = key(highs);
+			const points = s.points.flatMap((p) => {
+				const a = bottom.get(p.order) ?? null, b = top.get(p.order) ?? null;
+				return a === null || b === null ? [] : [{
+					...p,
+					y: p.y ?? (a + b) / 2,
+					low: Math.min(a, b),
+					high: Math.max(a, b)
+				}];
+			});
+			return {
+				key: s.key === y ? "Range" : s.key,
+				points
+			};
+		});
+	}
+	ranges(s) {
+		return s.points;
+	}
+	yValues() {
+		return this.view.flatMap((s) => this.ranges(s).flatMap((p) => [p.low, p.high]));
+	}
+	drawBand(ctx, axes, series) {
+		const y = (value) => axes.y(value) ?? 0;
+		const valid = (p) => !this.logarithmic || p.low > 0;
+		const shape = area().defined(valid).x((p) => this.px(axes, p)).y0((p) => y(p.low)).y1((p) => y(p.high)).curve(this.curveOf());
+		const flat = area().defined(valid).x((p) => this.px(axes, p)).y((p) => y((p.low + p.high) / 2)).curve(this.curveOf());
+		const fills = ctx.marks("bands", "path", series, (s) => s.key).attr("fill", (s) => ctx.palette.color(s.key)).attr("fill-opacity", this.options.center === RangeCenter.None ? .45 : .25);
+		ctx.set(fills, { d: (s) => shape(this.ranges(s)) ?? "" }, { d: (s) => flat(this.ranges(s)) ?? "" });
+	}
+	drawDiscrete(ctx, axes, series) {
+		const { form } = this.options;
+		const y = (value) => axes.y(value) ?? 0;
+		const items = series.flatMap((s) => this.ranges(s).filter((p) => !this.logarithmic || p.low > 0).map((p) => ({
+			key: `${s.key}/${p.order}`,
+			owner: s.key,
+			p
+		})));
+		const span = (ctx.plot.width - this.labelRoom()) / Math.max(1, this.source.xs.length);
+		const width = Math.max(2, Math.min(12, span - 2));
+		const whiskers = ctx.marks("whiskers", "path", form === RangeForm.ErrorBars ? items : [], (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.owner)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(whiskers, { d: ({ p }) => {
+			const cx = this.px(axes, p), cap = width / 2, top = y(p.high), bottom = y(p.low);
+			return `M${cx - cap},${top}H${cx + cap}M${cx},${top}V${bottom}M${cx - cap},${bottom}H${cx + cap}`;
+		} });
+		const spans = ctx.marks("spans", "rect", form === RangeForm.Spans ? items : [], (d) => d.key).attr("fill", (d) => ctx.palette.color(d.owner)).attr("fill-opacity", .55).attr("rx", Math.min(4, width / 2));
+		ctx.set(spans, {
+			x: ({ p }) => this.px(axes, p) - width / 2,
+			width,
+			y: ({ p }) => y(p.high),
+			height: ({ p }) => Math.max(2, y(p.low) - y(p.high))
+		}, {
+			x: ({ p }) => this.px(axes, p) - width / 2,
+			width,
+			y: ({ p }) => y((p.low + p.high) / 2),
+			height: 0
+		}, 8);
+	}
+	plotMarks(ctx, axes) {
+		const { form, center, edges } = this.options;
+		const series = this.view;
+		this.drawBand(ctx, axes, form === RangeForm.Band ? series : []);
+		this.drawDiscrete(ctx, axes, form === RangeForm.Band ? [] : series);
+		const rim = (side) => edges ? series.map((s) => ({
+			key: `${s.key}/${side}`,
+			owner: s.key,
+			points: this.ranges(s).map((p) => ({
+				...p,
+				y: p[side]
+			}))
+		})) : [];
+		const color = (s) => ctx.palette.color(s.owner);
+		this.strokes(ctx, "edges", [...rim("low"), ...rim("high")], axes, this.curveOf(), color).attr("stroke-opacity", .7).attr("stroke-dasharray", "2 3");
+		this.strokes(ctx, "centers", center === RangeCenter.Line ? series : [], axes);
+		this.hoverColumns(ctx, axes, series, { value: (p) => {
+			const r = p;
+			return `${TrendHover.value(r.low)} – ${TrendHover.value(r.high)} (${TrendHover.value(r.y)})`;
+		} });
+	}
+};
+export { RangeAreaChart };

package/dist/charts/linesareas/RidgeLines.js

@@ -0,0 +1,118 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { RidgeFill, RidgeScale, RidgeSort } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendMath } from "./TrendMath.js";
+import { extent, mean, scaleIdentity, scalePoint, select } from "d3";
+// src/charts/linesareas/RidgeLines.ts
+/** Offset time series, one per row, for comparing the timing of peaks. For distributions use `RidgelineChart`. */
+var RidgeLines = class extends TrendChart {
+	static meta = {
+		id: "ridge-lines",
+		name: "Ridge lines",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks series as overlapping offset lines, so that the timing and shape of their peaks compare across many rows.",
+		tags: [
+			"joy plot",
+			"offset lines",
+			"stacked lines"
+		],
+		sample: (seed) => TrendMath.restart(SampleData.timeSeries(seed, 48, 7), 100),
+		variants: {
+			overlap: [
+				1.6,
+				1,
+				2.4
+			],
+			sort: [
+				RidgeSort.Data,
+				RidgeSort.Peak,
+				RidgeSort.Mean,
+				RidgeSort.Last
+			],
+			fill: [RidgeFill.Filled, RidgeFill.Line],
+			rowScale: [RidgeScale.Row, RidgeScale.Shared],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Basis,
+				CurveKind.Linear
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			overlap: 1.6,
+			sort: RidgeSort.Data,
+			fill: RidgeFill.Filled,
+			rowScale: RidgeScale.Row,
+			grid: false
+		};
+	}
+	get legended() {
+		return false;
+	}
+	shape(table) {
+		const known = (s) => s.points.filter((p) => p.y !== null);
+		const peak = (s) => known(s).reduce((best, p) => !best || p.y > best.y ? p : best, null)?.order ?? 0;
+		const score = {
+			[RidgeSort.Data]: null,
+			[RidgeSort.Peak]: (s) => peak(s),
+			[RidgeSort.Mean]: (s) => -(mean(known(s), (p) => p.y) ?? 0),
+			[RidgeSort.Last]: (s) => -(known(s).at(-1)?.y ?? 0)
+		}[this.options.sort];
+		return score ? [...table.series].sort((a, b) => score(a) - score(b)) : table.series;
+	}
+	scales(ctx) {
+		const count = this.view.length, step = ctx.plot.height / Math.max(1, count - 1 + this.options.overlap);
+		return {
+			x: this.xAxis([0, ctx.plot.width]),
+			y: scalePoint(this.view.map((s) => s.key), [this.options.overlap * step, ctx.plot.height])
+		};
+	}
+	tickFormat(scale) {
+		return typeof scale.domain?.()[0] === "string" ? (value) => TrendLabels.fit(String(value), 84) : super.tickFormat(scale);
+	}
+	plotMarks(ctx, axes) {
+		const { overlap, fill, rowScale } = this.options;
+		const series = this.view;
+		const rise = overlap * (ctx.plot.height / Math.max(1, series.length - 1 + overlap));
+		const all = extent(series.flatMap((s) => s.points.flatMap((p) => p.y === null ? [] : [p.y])));
+		const baseOf = (s) => axes.y(s.key) ?? 0;
+		/** Series re-expressed in pixels, so the shared path helpers apply with an identity y. */
+		const lifted = series.map((s) => {
+			const [lo = 0, hi = 1] = rowScale === RidgeScale.Shared ? all : extent(s.points, (p) => p.y ?? void 0);
+			const span = hi - lo || 1;
+			return {
+				key: s.key,
+				points: s.points.map((p) => ({
+					...p,
+					raw: p.y,
+					y: p.y === null ? null : baseOf(s) - (p.y - lo) / span * rise
+				}))
+			};
+		});
+		const flat = {
+			...axes,
+			y: scaleIdentity()
+		};
+		const backs = ctx.marks("backs", "g", lifted, (s) => s.key);
+		const chart = this;
+		backs.each(function(s) {
+			const group = ctx.group("ridge", select(this));
+			const base = baseOf(s);
+			const path = chart.areaPath(flat, base)(s.points), from = chart.flatPath(flat, base)(s.points);
+			const color = ctx.palette.color(s.key);
+			ctx.set(ctx.marks("occlude", "path", [s], void 0, group).attr("fill", ctx.theme.surface), { d: path }, { d: from });
+			ctx.set(ctx.marks("tint", "path", fill === RidgeFill.Filled ? [s] : [], void 0, group).attr("fill", color).attr("fill-opacity", .35), { d: path }, { d: from });
+			const stroke = chart.styleStroke(ctx.marks("line", "path", [s], void 0, group), color);
+			chart.trace(ctx, stroke, () => chart.linePath(flat)(s.points));
+			ctx.marks("base", "line", [s], void 0, group).attr("stroke", ctx.theme.axis).attr("x1", 0).attr("x2", ctx.plot.width).attr("y1", base).attr("y2", base);
+		});
+		this.hoverColumns(ctx, flat, lifted);
+	}
+};
+export { RidgeLines };

package/dist/charts/linesareas/SeasonalLines.js

@@ -0,0 +1,134 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { SeasonAlign, SeasonPeriod } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+import { area, max, mean, scaleLinear, utcFormat, utcMonday, utcMonth } from "d3";
+// src/charts/linesareas/SeasonalLines.ts
+var WEEKDAYS = [
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat",
+	"Sun"
+];
+var weekLabel = utcFormat("Wk of %b %-d");
+var monthLabel = utcFormat("%b %Y");
+/** Overlays each week or month on one cycle axis, darkest for the latest, to tell seasonality from trend. Needs date x values. */
+var SeasonalLines = class extends TrendChart {
+	static meta = {
+		id: "seasonal-lines",
+		name: "Seasonal lines",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Overlays repeating weeks or months on a single cycle axis to compare the current period with earlier ones.",
+		tags: [
+			"cycle plot",
+			"year over year",
+			"seasonality"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 120, 1),
+		variants: {
+			period: [SeasonPeriod.Month, SeasonPeriod.Week],
+			align: [SeasonAlign.Level, SeasonAlign.Rebased],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.Basis
+			],
+			envelope: [false, true],
+			average: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			period: SeasonPeriod.Month,
+			align: SeasonAlign.Level,
+			envelope: false,
+			average: false
+		};
+	}
+	get direct() {
+		return this.view.length > 0;
+	}
+	xTicks() {
+		return 7;
+	}
+	get weekly() {
+		return this.options.period === SeasonPeriod.Week;
+	}
+	shape(table) {
+		const cycles = /* @__PURE__ */ new Map();
+		for (const point of table.series[0]?.points ?? []) {
+			if (!(point.x instanceof Date)) continue;
+			const start = (this.weekly ? utcMonday : utcMonth).floor(point.x);
+			const offset = this.weekly ? Math.round((+point.x - +start) / 864e5) : point.x.getUTCDate() - 1;
+			(cycles.get(+start) ?? cycles.set(+start, []).get(+start)).push({
+				...point,
+				x: offset,
+				order: offset,
+				raw: point.y
+			});
+		}
+		return [...cycles].sort((a, b) => a[0] - b[0]).map(([start, points]) => {
+			const first = points.find((p) => p.y)?.y;
+			const rebased = this.options.align === SeasonAlign.Rebased && first;
+			return {
+				key: (this.weekly ? weekLabel : monthLabel)(new Date(start)),
+				points: rebased ? points.map((p) => ({
+					...p,
+					y: p.y === null ? null : p.y / first * 100
+				})) : points
+			};
+		});
+	}
+	xAxis(range) {
+		return scaleLinear([0, max(this.view, (s) => s.points.at(-1)?.order) || 1], range);
+	}
+	tickFormat(scale) {
+		if (!((scale.range?.() ?? [])[0] === 0)) return super.tickFormat(scale);
+		return (value) => this.weekly ? WEEKDAYS[+value] ?? "" : Number.isInteger(+value) ? String(+value + 1) : "";
+	}
+	spread(past) {
+		return past.reduce((best, s) => s.points.length > best.length ? s.points : best, []).flatMap((point) => {
+			const sorted = TrendMath.sorted(past.flatMap((s) => s.points.filter((p) => p.order === point.order)));
+			return sorted.length ? [{
+				point,
+				low: sorted[0],
+				high: sorted.at(-1),
+				mean: mean(sorted)
+			}] : [];
+		});
+	}
+	plotMarks(ctx, axes) {
+		const series = this.view;
+		const past = series.slice(0, -1), latest = series.slice(-1);
+		const tone = (s) => ctx.palette.sequential(.25 + .75 * (series.indexOf(s) + 1) / series.length);
+		const spread = this.spread(past);
+		const y = (value) => axes.y(value) ?? 0;
+		const shape = area().x((d) => this.px(axes, d.point)).y0((d) => y(d.low)).y1((d) => y(d.high)).curve(this.curveOf());
+		const band = ctx.marks("envelope", "path", this.options.envelope && spread.length ? [spread] : []).attr("fill", ctx.theme.grid);
+		ctx.set(band, { d: (d) => shape(d) ?? "" });
+		this.strokes(ctx, "past", this.options.envelope ? [] : past, axes, this.curveOf(), tone);
+		const average = this.options.average ? [{
+			key: "Average",
+			points: spread.map((d) => ({
+				...d.point,
+				y: d.mean
+			}))
+		}] : [];
+		this.strokes(ctx, "average", average, axes, this.curveOf(), () => ctx.theme.inkSecondary).attr("stroke-dasharray", "5 4");
+		this.strokes(ctx, "latest", latest, axes, this.curveOf(), () => ctx.theme.ink);
+		const named = this.options.envelope ? latest : series.length * 14 <= ctx.plot.height ? series : [.../* @__PURE__ */ new Set([series[0], ...latest])];
+		this.endLabels(ctx, named, axes, (key) => key === latest[0]?.key ? ctx.theme.ink : tone(series.find((s) => s.key === key)));
+		this.hoverColumns(ctx, axes, series, {
+			color: tone,
+			title: (p) => this.weekly ? WEEKDAYS[p.order] ?? "" : `Day ${p.order + 1}`
+		});
+	}
+};
+export { SeasonalLines };

package/dist/charts/linesareas/SlopeChart.js

@@ -0,0 +1,183 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, CurveKind, DataShape, Dimension, LegendPosition, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LineAggregate, SlopeLabels, SlopeSpan, SlopeValue } from "./LineEnums.js";
+import { TrendHover } from "./TrendHover.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendTable } from "./TrendTable.js";
+import { extent, line, scalePoint, utcFormat } from "d3";
+// src/charts/linesareas/SlopeChart.ts
+var HEADER = 22;
+var periodLabel = utcFormat("%b %-d");
+/** Before-and-after change for a handful of entities, where the angle of each line is the message. */
+var SlopeChart = class SlopeChart extends Chart2D {
+	static meta = {
+		id: "slope",
+		name: "Slope chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Connects each entity across two or a few periods so that direction and size of change read from the slope.",
+		tags: [
+			"slopegraph",
+			"before after",
+			"change"
+		],
+		sample: (seed) => {
+			const rows = SampleData.timeSeries(seed, 91, 6);
+			const days = [...new Set(rows.map((row) => +row.date))];
+			const kept = /* @__PURE__ */ new Set([
+				days[0],
+				days[45],
+				days[90]
+			]);
+			return rows.filter((row) => kept.has(+row.date));
+		},
+		variants: {
+			span: [SlopeSpan.Ends, SlopeSpan.All],
+			labels: [
+				SlopeLabels.Both,
+				SlopeLabels.Right,
+				SlopeLabels.Left
+			],
+			value: [SlopeValue.Absolute, SlopeValue.Indexed],
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			curve: [CurveKind.Linear, CurveKind.Bump],
+			dots: [true, false]
+		},
+		valid: ({ value, labels }) => value === SlopeValue.Absolute || labels === SlopeLabels.Right
+	};
+	defaults() {
+		return {
+			x: "date",
+			y: "value",
+			series: "series",
+			aggregate: LineAggregate.Mean,
+			scale: ScaleKind.Linear,
+			value: SlopeValue.Absolute,
+			span: SlopeSpan.Ends,
+			labels: SlopeLabels.Both,
+			curve: CurveKind.Linear,
+			dots: true
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	rebased(series, periods) {
+		const log = this.options.scale === ScaleKind.Log;
+		const stops = periods.flatMap((period, column) => {
+			const raw = series.points.find((p) => p.order === period.order)?.y;
+			return raw === null || raw === void 0 || log && raw <= 0 ? [] : [{
+				series: series.key,
+				column,
+				value: raw,
+				raw
+			}];
+		});
+		const first = stops[0]?.raw;
+		return this.options.value === SlopeValue.Indexed && first ? stops.map((stop) => ({
+			...stop,
+			value: stop.raw / first * 100
+		})) : stops;
+	}
+	static periodName(x) {
+		return x instanceof Date ? periodLabel(x) : String(x);
+	}
+	draw(ctx) {
+		const { x, y, series, aggregate, span, labels, dots, curve, scale } = this.options;
+		const table = new TrendTable(this.options.data, {
+			x,
+			y,
+			series,
+			aggregate
+		});
+		const periods = span === SlopeSpan.Ends && table.xs.length > 2 ? [table.xs[0], table.xs.at(-1)] : table.xs;
+		const lines = table.series.map((s) => ({
+			key: s.key,
+			stops: this.rebased(s, periods)
+		})).filter((line) => line.stops.length);
+		const values = lines.flatMap((line) => line.stops.map((stop) => stop.value));
+		const [lo = 1, hi = 10] = extent(values);
+		const value = Scales.continuous(scale).domain(lo === hi ? [lo * .9 || 1, lo * 1.1 || 2] : [lo, hi]).range([ctx.plot.height - 6, 28]);
+		const reach = Math.max(Math.abs(lo), Math.abs(hi));
+		const text = (stop) => Scales.format(stop.value, reach);
+		const edgeText = (name, stop, named) => named ? `${name} ${text(stop)}` : text(stop);
+		const limit = ctx.plot.width * .3;
+		const named = {
+			left: labels !== SlopeLabels.Right,
+			right: labels !== SlopeLabels.Left
+		};
+		const widest = (side, pick) => TrendLabels.room(lines.flatMap((line) => {
+			const stop = pick(line.stops);
+			return stop ? [edgeText(line.key, stop, named[side])] : [];
+		}), limit);
+		const opening = (all) => all[0]?.column === 0 ? all[0] : void 0;
+		const indexed = this.options.value === SlopeValue.Indexed;
+		const left = widest("left", opening);
+		const right = widest("right", (stops) => stops.at(-1)?.column === periods.length - 1 ? stops.at(-1) : void 0);
+		const column = scalePoint(periods.map((_, i) => i), [left, ctx.plot.width - right]);
+		const cx = (stop) => column(stop.column) ?? 0, cy = (stop) => value(stop.value);
+		const rules = ctx.marks("rules", "line", periods, (p) => p.order).attr("stroke", ctx.theme.grid).attr("y1", HEADER).attr("y2", ctx.plot.height);
+		ctx.set(rules, {
+			x1: (_, i) => column(i) ?? 0,
+			x2: (_, i) => column(i) ?? 0
+		});
+		const heads = ctx.text(ctx.marks("heads", "text", periods, (p) => p.order), 11, "ink").attr("font-weight", 600).attr("y", 12).attr("text-anchor", (_, i) => i === 0 && periods.length > 1 ? "end" : i === periods.length - 1 && periods.length > 1 ? "start" : "middle").text((p) => SlopeChart.periodName(p.x));
+		ctx.set(heads, { x: (_, i) => (column(i) ?? 0) + (i === 0 && periods.length > 1 ? 8 : i === periods.length - 1 && periods.length > 1 ? -8 : 0) });
+		const path = line().x(cx).y(cy).curve(Scales.curve(curve));
+		const strokes = ctx.marks("lines", "path", lines, (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.key)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		strokes.filter(function() {
+			return !this.getAttribute("d");
+		}).attr("d", (d) => path(d.stops) ?? "");
+		ctx.drawOn(strokes);
+		ctx.set(strokes, { d: (d) => path(d.stops) ?? "" });
+		const stops = lines.flatMap((line) => line.stops);
+		const marks = ctx.marks("dots", "circle", dots ? stops : [], (d) => `${d.series}/${d.column}`).attr("fill", (d) => ctx.palette.color(d.series)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(marks, {
+			cx,
+			cy,
+			r: 5
+		}, {
+			cx,
+			cy,
+			r: 0
+		});
+		const hits = ctx.marks("hits", "path", lines, (d) => d.key).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 16).attr("pointer-events", "stroke").attr("d", (d) => path(d.stops) ?? "");
+		ctx.hover(hits, (d) => ({
+			title: d.key,
+			color: ctx.palette.color(d.key),
+			rows: d.stops.map((stop) => [SlopeChart.periodName(periods[stop.column].x), TrendHover.value(stop.raw)])
+		}));
+		const edge = (name, room, side, pick) => {
+			const items = lines.flatMap((line) => {
+				const stop = pick(line.stops);
+				return stop ? [{
+					key: line.key,
+					y: cy(stop),
+					text: TrendLabels.fit(edgeText(line.key, stop, named[side]), room - 12),
+					x: cx(stop)
+				}] : [];
+			});
+			const placed = TrendLabels.dodge(items.map((item) => ({
+				...item,
+				y: item.y - HEADER
+			})), ctx.plot.height - HEADER).map((item) => ({
+				...item,
+				at: item.at + HEADER
+			}));
+			const marks = ctx.text(ctx.marks(name, "text", placed, (d) => d.key)).attr("dy", ".32em").attr("text-anchor", side === "left" ? "end" : "start").text((d) => d.text);
+			ctx.set(marks, {
+				x: (d) => d.x + (side === "left" ? -9 : 9),
+				y: (d) => d.at
+			}, {
+				x: (d) => d.x + (side === "left" ? -9 : 9),
+				y: (d) => d.at
+			});
+		};
+		edge("left-labels", left, "left", (all) => indexed && all !== lines[0]?.stops ? void 0 : opening(all));
+		edge("right-labels", right, "right", (all) => all.at(-1)?.column === periods.length - 1 && periods.length > 1 ? all.at(-1) : void 0);
+	}
+};
+export { SlopeChart };