@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/linesareas/DifferenceChart.js

@@ -0,0 +1,168 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DifferenceView, LineLabels } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+// src/charts/linesareas/DifferenceChart.ts
+/** Two series with the gap between them filled by whoever leads: exports against imports, plan against actual. */
+var DifferenceChart = class extends TrendChart {
+	static meta = {
+		id: "difference",
+		name: "Difference chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills the gap between two series in the colour of whichever leads, making surplus, deficit and crossovers obvious.",
+		tags: [
+			"between",
+			"surplus deficit",
+			"gap"
+		],
+		sample: (seed) => {
+			return SampleData.timeSeries(seed, 40, 2).map((row) => row.series === "Bravo" ? {
+				...row,
+				value: +(row.value - 18).toFixed(2)
+			} : row);
+		},
+		variants: {
+			view: [DifferenceView.Between, DifferenceView.Delta],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter,
+				CurveKind.CatmullRom
+			],
+			lines: [true, false],
+			crossings: [false, true],
+			labels: [LineLabels.Direct, LineLabels.Legend]
+		},
+		valid: ({ view, labels }) => view === DifferenceView.Between || labels === LineLabels.Legend
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			view: DifferenceView.Between,
+			lines: true,
+			crossings: false,
+			labels: LineLabels.Direct
+		};
+	}
+	get between() {
+		return this.options.view === DifferenceView.Between;
+	}
+	get direct() {
+		return this.between && this.options.labels === LineLabels.Direct;
+	}
+	get zeroBased() {
+		return !this.between;
+	}
+	/** The two compared series, reduced to the x positions they share. */
+	shape(table) {
+		const pick = (key, fallback) => table.series.find((s) => s.key === key) ?? table.series[fallback];
+		const a = pick(this.options.a, 0), b = pick(this.options.b, 1);
+		if (!a || !b || a === b) return a ? [a] : [];
+		const shared = new Set(a.points.filter((p) => p.y !== null).map((p) => p.order));
+		const both = new Set(b.points.filter((p) => p.y !== null && shared.has(p.order)).map((p) => p.order));
+		const only = (s) => ({
+			key: s.key,
+			points: s.points.filter((p) => both.has(p.order))
+		});
+		return [only(a), only(b)];
+	}
+	get gaps() {
+		const [a, b] = this.view;
+		return !a || !b ? [] : a.points.map((p, i) => ({
+			...p,
+			y: p.y - b.points[i].y,
+			raw: p.y - b.points[i].y
+		}));
+	}
+	yValues() {
+		return this.between ? super.yValues() : this.gaps.map((p) => p.y);
+	}
+	legendItems() {
+		const [a, b] = this.view;
+		if (!a || !b) return [];
+		return this.between ? [{
+			key: a.key,
+			color: this.palette.color(a.key)
+		}, {
+			key: b.key,
+			color: this.palette.color(b.key)
+		}] : [{
+			key: `${a.key} ahead`,
+			color: this.palette.diverging(TrendMath.polarity(1))
+		}, {
+			key: `${b.key} ahead`,
+			color: this.palette.diverging(TrendMath.polarity(-1))
+		}];
+	}
+	/** Points where the gap changes sign, placed by linear interpolation. */
+	crossings(axes, level) {
+		const gaps = this.gaps;
+		return gaps.slice(1).flatMap((point, n) => {
+			const before = gaps[n];
+			if (before.y * point.y >= 0) return [];
+			const t = before.y / (before.y - point.y);
+			const x0 = this.px(axes, before), x1 = this.px(axes, point);
+			return [{
+				key: `${before.order}`,
+				x: x0 + (x1 - x0) * t,
+				y: level(n) + (level(n + 1) - level(n)) * t,
+				color: this.theme.ink
+			}];
+		});
+	}
+	drawBetween(ctx, axes) {
+		const [a, b] = this.view;
+		const bottoms = new Map(b.points.map((p) => [p.order, this.py(axes, p)]));
+		const band = this.areaPath(axes, (p) => bottoms.get(p.order) ?? 0)(a.points);
+		const leads = [{
+			key: a.key,
+			clip: this.clipTo(ctx, "below", this.areaPath(axes, ctx.plot.height)(a.points))
+		}, {
+			key: b.key,
+			clip: this.clipTo(ctx, "above", this.areaPath(axes, 0)(a.points))
+		}];
+		const fills = ctx.marks("gaps", "path", leads, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.key)).attr("fill-opacity", .3).attr("clip-path", (d) => d.clip);
+		ctx.set(fills, { d: band });
+		this.strokes(ctx, "lines", this.options.lines ? [a, b] : [], axes);
+	}
+	drawDelta(ctx, axes) {
+		const gaps = this.gaps;
+		const zero = axes.y(0) ?? 0;
+		const fill = this.areaPath(axes, zero)(gaps);
+		const sides = [{
+			key: "ahead",
+			tone: 1,
+			clip: this.clipTo(ctx, "upper", `M0,0H${ctx.plot.width}V${zero}H0Z`)
+		}, {
+			key: "behind",
+			tone: -1,
+			clip: this.clipTo(ctx, "lower", `M0,${zero}H${ctx.plot.width}V${ctx.plot.height}H0Z`)
+		}];
+		const fills = ctx.marks("gaps", "path", sides, (d) => d.key).attr("fill", (d) => ctx.palette.diverging(TrendMath.polarity(d.tone))).attr("fill-opacity", .75).attr("clip-path", (d) => d.clip);
+		ctx.set(fills, { d: fill }, { d: this.flatPath(axes, zero)(gaps) });
+		this.strokes(ctx, "lines", this.options.lines ? [{
+			key: "gap",
+			points: gaps
+		}] : [], axes, this.curveOf(), () => ctx.theme.inkSecondary);
+		ctx.marks("zero", "line", [0]).attr("stroke", ctx.theme.axis).attr("x1", 0).attr("x2", ctx.plot.width).attr("y1", zero).attr("y2", zero);
+	}
+	plotMarks(ctx, axes) {
+		const [a, b] = this.view;
+		if (a && b) {
+			if (this.between) this.drawBetween(ctx, axes);
+			else this.drawDelta(ctx, axes);
+		} else this.strokes(ctx, "lines", this.view, axes);
+		const zero = axes.y(0) ?? 0;
+		const level = (i) => this.between ? this.py(axes, a.points[i]) : zero;
+		this.dots(ctx, "crossings", this.options.crossings && a && b ? this.crossings(axes, level) : []);
+		if (this.direct) this.endLabels(ctx, this.view, axes);
+		this.hoverColumns(ctx, axes, this.between ? this.view : [{
+			key: "Gap",
+			points: this.gaps
+		}], { color: () => ctx.theme.inkSecondary });
+	}
+};
+export { DifferenceChart };

package/dist/charts/linesareas/DualAxisChart.js

@@ -0,0 +1,151 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { ZoomAxis } from "../../core/ChartViewport.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DualAlignment, DualForm } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendTable } from "./TrendTable.js";
+import { axisRight, extent, range, scaleLinear } from "d3";
+// src/charts/linesareas/DualAxisChart.ts
+var RIGHT = 46;
+/**
+* Two measures with different units over the same x. A last resort: the visual relation depends on arbitrary axis ranges,
+* so prefer `IndexedLine` or `SmallMultipleLines`. If you must use it, prefer `Gridlock`, which at least shares gridlines.
+*/
+var DualAxisChart = class extends TrendChart {
+	static meta = {
+		id: "dual-axis",
+		name: "Dual-axis chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "A last resort that plots two measures against separate y axes; prefer indexed lines or small multiples when possible.",
+		tags: [
+			"combo",
+			"two scales",
+			"secondary axis"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 30),
+		variants: {
+			form: [
+				DualForm.Bars,
+				DualForm.Line,
+				DualForm.Area
+			],
+			alignment: [
+				DualAlignment.Gridlock,
+				DualAlignment.Zero,
+				DualAlignment.Independent
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			]
+		},
+		valid: ({ form, alignment }) => form === DualForm.Line || alignment !== DualAlignment.Independent
+	};
+	zoomAxes() {
+		return ZoomAxis.X;
+	}
+	defaults() {
+		return {
+			...super.defaults(),
+			y: "close",
+			y2: "volume",
+			form: DualForm.Bars,
+			alignment: DualAlignment.Gridlock
+		};
+	}
+	get legended() {
+		return true;
+	}
+	get zeroBased() {
+		return this.options.alignment === DualAlignment.Zero;
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			right: RIGHT
+		};
+	}
+	get second() {
+		const { x, y2, aggregate } = this.options;
+		return {
+			key: y2,
+			points: new TrendTable(this.options.data, {
+				x,
+				y: y2,
+				series: `\0${y2}`,
+				aggregate
+			}).series[0]?.points ?? []
+		};
+	}
+	/** Right scale whose ticks land exactly on the left gridlines. */
+	lockedScale(axes, values) {
+		const left = axes.y.ticks(this.yTicks());
+		const intervals = Math.max(1, left.length - 1);
+		const raw = (Math.max(0, ...values) || 1) / intervals, power = 10 ** Math.floor(Math.log10(raw));
+		const step = [
+			1,
+			2,
+			2.5,
+			5,
+			10
+		].find((mult) => mult * power >= raw) * power;
+		return {
+			scale: scaleLinear([0, step * intervals], [axes.y(left[0]) ?? 0, axes.y(left.at(-1)) ?? 0]),
+			ticks: range(intervals + 1).map((i) => i * step)
+		};
+	}
+	rightAxis(axes, height, values) {
+		const { alignment, form } = this.options;
+		if (alignment === DualAlignment.Gridlock) return this.lockedScale(axes, values);
+		const [lo = 0, hi = 1] = extent(alignment === DualAlignment.Zero || form !== DualForm.Line ? [...values, 0] : values);
+		return {
+			scale: scaleLinear([lo, hi === lo ? lo + 1 : hi], [height, 0]).nice(),
+			ticks: null
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { form } = this.options;
+		const { width, height } = ctx.plot;
+		const first = this.view, second = this.second;
+		const values = second.points.flatMap((p) => p.y === null ? [] : [p.y]);
+		const { scale, ticks } = this.rightAxis(axes, height, values);
+		const right = {
+			...axes,
+			y: scale
+		};
+		for (const s of first) ctx.palette.color(s.key);
+		const color = ctx.palette.color(second.key);
+		const axis = axisRight(scale).tickSize(0).tickFormat((value) => Scales.format(+value, Math.max(...values.map(Math.abs), 0)));
+		if (ticks) axis.tickValues(ticks);
+		else axis.ticks(this.yTicks());
+		const drawn = ctx.group("axis-right").attr("transform", `translate(${width},0)`).call(axis);
+		drawn.select(".domain").attr("stroke", "none");
+		drawn.selectAll("text").attr("fill", ctx.theme.inkSecondary).attr("font-size", 11).attr("font-family", ctx.theme.fontFamily);
+		const span = width / Math.max(1, second.points.length);
+		const thick = Math.max(2, Math.min(14, span - 2));
+		const base = scale(Math.max(scale.domain()[0], 0));
+		const known = second.points.filter((p) => p.y !== null);
+		const bars = ctx.marks("bars", "rect", form === DualForm.Bars ? known : [], (p) => p.order).attr("fill", color).attr("fill-opacity", .4).attr("rx", Math.min(4, thick / 2));
+		ctx.set(bars, {
+			x: (p) => this.px(axes, p) - thick / 2,
+			width: thick,
+			y: (p) => Math.min(scale(p.y), base),
+			height: (p) => Math.abs(base - scale(p.y))
+		}, {
+			x: (p) => this.px(axes, p) - thick / 2,
+			width: thick,
+			y: base,
+			height: 0
+		}, 8);
+		const fills = ctx.marks("second-area", "path", form === DualForm.Area ? [second] : [], (s) => s.key).attr("fill", color).attr("fill-opacity", .25);
+		ctx.set(fills, { d: (s) => this.areaPath(right, base)(s.points) }, { d: (s) => this.flatPath(right, base)(s.points) });
+		this.strokes(ctx, "second-lines", form === DualForm.Bars ? [] : [second], right);
+		this.strokes(ctx, "lines", first, axes);
+		this.hoverColumns(ctx, axes, [...first, second], { place: (p, s) => [this.px(axes, p), s === second ? scale(p.y) : this.py(axes, p)] });
+	}
+};
+export { DualAxisChart };

package/dist/charts/linesareas/FanChart.js

@@ -0,0 +1,135 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FanCenter } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+import { area, mean } from "d3";
+// src/charts/linesareas/FanChart.ts
+var BANDS = [
+	{
+		share: 95,
+		low: .025,
+		high: .975
+	},
+	{
+		share: 80,
+		low: .1,
+		high: .9
+	},
+	{
+		share: 50,
+		low: .25,
+		high: .75
+	}
+];
+/** Summarises an ensemble of runs, simulations or forecasts as nested quantile bands, where a spaghetti plot would be unreadable. */
+var FanChart = class extends TrendChart {
+	static meta = {
+		id: "fan",
+		name: "Fan chart",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Summarises many runs of a series as nested quantile bands around a central estimate to show widening uncertainty.",
+		tags: [
+			"ensemble",
+			"uncertainty",
+			"quantiles",
+			"projection"
+		],
+		sample: (seed) => Array.from({ length: 6 }, (_, run) => TrendMath.restart(SampleData.timeSeries(seed + run * 7, 40, 8), 100).map((row) => ({
+			...row,
+			series: `${row.series}-${run}`
+		}))).flat(),
+		variants: {
+			levels: [
+				3,
+				2,
+				1
+			],
+			center: [
+				FanCenter.Median,
+				FanCenter.Mean,
+				FanCenter.None
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.Basis
+			],
+			envelope: [false, true],
+			members: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			levels: 3,
+			center: FanCenter.Median,
+			envelope: false,
+			members: false
+		};
+	}
+	get legended() {
+		return this.view.length > 1;
+	}
+	get bands() {
+		return BANDS.slice(BANDS.length - this.options.levels);
+	}
+	get slices() {
+		const groups = /* @__PURE__ */ new Map();
+		for (const s of this.view) for (const p of s.points) (groups.get(p.order) ?? groups.set(p.order, []).get(p.order)).push(p);
+		return this.source.xs.map((point) => ({
+			point,
+			sorted: TrendMath.sorted(groups.get(point.order) ?? [])
+		})).filter((slice) => slice.sorted.length);
+	}
+	shade(index) {
+		return this.palette.sequential(.28 + (index + 3 - this.bands.length) * .2);
+	}
+	legendItems() {
+		return this.bands.map((band, i) => ({
+			key: `${band.share}%`,
+			color: this.shade(i)
+		}));
+	}
+	line(key, slices, pick) {
+		return {
+			key,
+			points: slices.map(({ point, sorted }) => ({
+				...point,
+				y: pick(sorted)
+			}))
+		};
+	}
+	yValues() {
+		const slices = this.slices;
+		const outer = this.options.envelope ? {
+			low: 0,
+			high: 1
+		} : this.bands[0];
+		return slices.flatMap(({ sorted }) => [TrendMath.quantile(sorted, outer.low), TrendMath.quantile(sorted, outer.high)]).concat(this.options.members ? super.yValues() : []);
+	}
+	plotMarks(ctx, axes) {
+		const { center, envelope, members } = this.options;
+		const slices = this.slices;
+		const y = (value) => axes.y(value) ?? 0;
+		this.strokes(ctx, "members", members ? this.view : [], axes, this.curveOf(), () => ctx.theme.axis).attr("stroke-opacity", .45).attr("stroke-width", 1);
+		const shape = area().x((s) => this.px(axes, s.point)).curve(this.curveOf());
+		const fills = ctx.marks("bands", "path", this.bands, (band) => band.share).attr("fill", (_, i) => this.shade(i)).attr("fill-opacity", members ? .8 : 1);
+		const of = (sorted, p) => y(TrendMath.quantile(sorted, p));
+		ctx.set(fills, { d: (band) => shape.y0((s) => of(s.sorted, band.low)).y1((s) => of(s.sorted, band.high))(slices) ?? "" }, { d: () => shape.y0((s) => of(s.sorted, .5)).y1((s) => of(s.sorted, .5))(slices) ?? "" });
+		const edges = envelope ? [this.line("Lowest", slices, (s) => s[0]), this.line("Highest", slices, (s) => s.at(-1))] : [];
+		this.strokes(ctx, "envelope", edges, axes, this.curveOf(), () => ctx.theme.inkMuted).attr("stroke-dasharray", "2 4");
+		const central = center === FanCenter.None ? [] : [this.line(center === FanCenter.Median ? "Median" : "Mean", slices, (s) => center === FanCenter.Median ? TrendMath.quantile(s, .5) : mean(s))];
+		this.strokes(ctx, "center", central, axes, this.curveOf(), () => ctx.theme.ink);
+		const outer = this.bands[0], inner = this.bands.at(-1);
+		const readout = [
+			this.line(`${outer.share}% high`, slices, (s) => TrendMath.quantile(s, outer.high)),
+			this.line("Median", slices, (s) => TrendMath.quantile(s, .5)),
+			this.line(`${inner.share}% low`, slices, (s) => TrendMath.quantile(s, inner.low))
+		];
+		this.hoverColumns(ctx, axes, readout, { color: () => ctx.theme.ink });
+	}
+};
+export { FanChart };

package/dist/charts/linesareas/ForecastLine.js

@@ -0,0 +1,161 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ForecastMethod } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+import { TrendXKind } from "./TrendTable.js";
+import { area, mean, median } from "d3";
+// src/charts/linesareas/ForecastLine.ts
+var Z = {
+	0: 0,
+	80: 1.2816,
+	95: 1.96
+};
+/** History plus a simple labelled projection. These rules are descriptive baselines, not a substitute for a fitted model. */
+var ForecastLine = class extends TrendChart {
+	static meta = {
+		id: "line-forecast",
+		name: "Forecast line",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Extends a series past its last observation with a dashed projection and a prediction interval.",
+		tags: [
+			"projection",
+			"prediction interval",
+			"outlook"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 48, 1),
+		variants: {
+			method: [
+				ForecastMethod.Linear,
+				ForecastMethod.Holt,
+				ForecastMethod.Naive,
+				ForecastMethod.Mean
+			],
+			horizon: [
+				.25,
+				.5,
+				.1
+			],
+			interval: [
+				95,
+				80,
+				0
+			],
+			curve: [CurveKind.Linear, CurveKind.Monotone]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			curve: CurveKind.Linear,
+			method: ForecastMethod.Linear,
+			horizon: .25,
+			interval: 95
+		};
+	}
+	/** Point forecast `k` steps past the end, plus the one-step errors behind the interval. */
+	rule(known) {
+		const values = known.map((p) => p.y);
+		const { method } = this.options;
+		if (method === ForecastMethod.Linear) {
+			const { slope, intercept } = TrendMath.fit(known);
+			return {
+				at: (_, order) => intercept + slope * order,
+				errors: known.map((p) => p.y - intercept - slope * p.order),
+				growing: false
+			};
+		}
+		if (method === ForecastMethod.Mean) {
+			const level = mean(values) ?? 0;
+			return {
+				at: () => level,
+				errors: values.map((value) => value - level),
+				growing: false
+			};
+		}
+		if (method === ForecastMethod.Naive) return {
+			at: () => values.at(-1) ?? 0,
+			errors: values.slice(1).map((value, i) => value - values[i]),
+			growing: true
+		};
+		let level = values[0] ?? 0, trend = (values[1] ?? level) - level;
+		return {
+			at: (k) => level + k * trend,
+			errors: values.slice(1).map((value) => {
+				const expected = level + trend, next = .5 * value + .5 * expected;
+				trend = .3 * (next - level) + .7 * trend;
+				level = next;
+				return value - expected;
+			}),
+			growing: true
+		};
+	}
+	project(s, kind) {
+		const known = s.points.filter((p) => p.y !== null);
+		const steps = kind === TrendXKind.Category || known.length < 2 ? 0 : Math.ceil(known.length * this.options.horizon);
+		if (!steps) return {
+			key: s.key,
+			actual: s,
+			ahead: []
+		};
+		const gap = median(known.slice(1).map((p, i) => p.order - known[i].order));
+		const last = known.at(-1);
+		const { at, errors, growing } = this.rule(known);
+		const spread = Math.sqrt(mean(errors, (error) => error * error) ?? 0) * Z[this.options.interval];
+		const ahead = Array.from({ length: steps + 1 }, (_, k) => {
+			const order = last.order + k * gap;
+			const y = k ? at(k, order) : last.y;
+			const reach = growing ? spread * Math.sqrt(k) : spread;
+			return {
+				x: kind === TrendXKind.Time ? new Date(order) : order,
+				order,
+				y,
+				low: y - reach,
+				high: y + reach
+			};
+		});
+		return {
+			key: s.key,
+			actual: s,
+			ahead
+		};
+	}
+	get projections() {
+		return this.view.map((s) => this.project(s, this.source.kind));
+	}
+	xAxis(range) {
+		const end = this.projections.flatMap((p) => p.ahead.at(-1) ?? []).reduce((best, p) => !best || p.order > best.order ? p : best, null);
+		const scale = this.source.xScale(range);
+		return end ? scale.domain([scale.domain()[0], end.x]) : scale;
+	}
+	yValues() {
+		return [...super.yValues(), ...this.projections.flatMap((p) => p.ahead.flatMap((a) => [a.low, a.high]))];
+	}
+	plotMarks(ctx, axes) {
+		const projections = this.projections;
+		const y = (value) => axes.y(value) ?? 0;
+		const shape = area().defined((p) => !this.logarithmic || p.low > 0).x((p) => this.px(axes, p)).y0((p) => y(p.low)).y1((p) => y(p.high));
+		const flat = area().x((p) => this.px(axes, p)).y((p) => y(p.y));
+		const bands = ctx.marks("intervals", "path", this.options.interval ? projections.filter((p) => p.ahead.length) : [], (p) => p.key).attr("fill", (p) => ctx.palette.color(p.key)).attr("fill-opacity", .2);
+		ctx.set(bands, { d: (p) => shape(p.ahead) ?? "" }, { d: (p) => flat(p.ahead) ?? "" });
+		const starts = projections.filter((p) => p.ahead.length);
+		const rule = ctx.marks("split", "line", starts.slice(0, 1), (p) => p.key).attr("stroke", ctx.theme.axis).attr("stroke-dasharray", "3 3").attr("y1", 0).attr("y2", ctx.plot.height);
+		ctx.set(rule, {
+			x1: (p) => this.px(axes, p.ahead[0]),
+			x2: (p) => this.px(axes, p.ahead[0])
+		});
+		this.strokes(ctx, "lines", projections.map((p) => p.actual), axes);
+		const paths = projections.filter((p) => p.ahead.length).map((p) => ({
+			key: p.key,
+			points: p.ahead
+		}));
+		this.strokes(ctx, "forecasts", paths, axes, this.curveOf(CurveKind.Linear)).attr("stroke-dasharray", "5 5");
+		this.hoverColumns(ctx, axes, [...this.view, ...paths.map((p) => ({
+			key: `${p.key} forecast`,
+			points: p.points.slice(1)
+		}))], { color: (s) => ctx.palette.color(s.key.replace(/ forecast$/, "")) });
+	}
+};
+export { ForecastLine };