@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/timeline/LifelineChart.js

@@ -0,0 +1,173 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { groups, scaleBand, scaleLinear, scaleUtc } from "d3";
+// src/charts/timeline/LifelineChart.ts
+var LifelineAlign = /* @__PURE__ */ function(LifelineAlign) {
+	LifelineAlign["Calendar"] = "calendar";
+	LifelineAlign["First"] = "from-first-event";
+	LifelineAlign["Last"] = "to-last-event";
+	return LifelineAlign;
+}({});
+var LifelineSort = /* @__PURE__ */ function(LifelineSort) {
+	LifelineSort["Input"] = "as-listed";
+	LifelineSort["Start"] = "by-entry";
+	LifelineSort["Length"] = "by-length";
+	return LifelineSort;
+}({});
+var LifelineTrack = /* @__PURE__ */ function(LifelineTrack) {
+	LifelineTrack["Bar"] = "bar";
+	LifelineTrack["Line"] = "line";
+	return LifelineTrack;
+}({});
+var LifelineEvents = /* @__PURE__ */ function(LifelineEvents) {
+	LifelineEvents["Dots"] = "dots";
+	LifelineEvents["Ticks"] = "ticks";
+	LifelineEvents["Hidden"] = "no-events";
+	return LifelineEvents;
+}({});
+/** Follow individual histories, such as patients, customers or machines, through their states, one line per subject. */
+var LifelineChart = class extends CartesianChart {
+	static meta = {
+		id: "lifeline",
+		name: "Lifeline chart",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws one line per subject coloured by state between events, aligned on the calendar or on a common event.",
+		tags: [
+			"patient history",
+			"customer journey",
+			"cohort",
+			"state changes"
+		],
+		sample: (seed) => TimeSamples.journeys(seed),
+		variants: {
+			align: Object.values(LifelineAlign),
+			sort: Object.values(LifelineSort),
+			track: Object.values(LifelineTrack),
+			events: Object.values(LifelineEvents)
+		},
+		valid: ({ track, events }) => track === "line" || events !== "ticks"
+	};
+	defaults() {
+		return {
+			subject: "subject",
+			date: "date",
+			state: "state",
+			align: "calendar",
+			sort: "as-listed",
+			track: "bar",
+			events: "dots"
+		};
+	}
+	get relative() {
+		return this.options.align !== "calendar";
+	}
+	lives() {
+		const { data, subject, date, state, align, sort } = this.options;
+		const rows = data.flatMap((row, i) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				name: TimeRows.text(row[subject], `#${i + 1}`),
+				date: when,
+				state: TimeRows.text(row[state], "Other")
+			}] : [];
+		});
+		const lives = groups(rows, (row) => row.name).map(([name, list]) => {
+			const ordered = list.sort((a, b) => +a.date - +b.date), first = ordered[0], last = ordered[ordered.length - 1];
+			const zero = align === "to-last-event" ? last.date : first.date;
+			return {
+				key: name,
+				name,
+				stops: ordered.map((stop) => ({
+					...stop,
+					at: TimeRows.days(zero, stop.date)
+				})),
+				length: TimeRows.days(first.date, last.date)
+			};
+		});
+		if (sort === "by-entry") lives.sort((a, b) => +b.stops[0].date - +a.stops[0].date);
+		if (sort === "by-length") lives.sort((a, b) => b.length - a.length);
+		return lives;
+	}
+	scales(ctx) {
+		const lives = this.lives();
+		const y = scaleBand(lives.map((life) => life.key), [0, ctx.plot.height]).padding(.25);
+		const stops = lives.flatMap((life) => life.stops);
+		if (!this.relative) return {
+			x: scaleUtc(TimeRows.extent(stops.map((stop) => stop.date)), [0, ctx.plot.width]).nice(),
+			y
+		};
+		const low = Math.min(0, ...stops.map((stop) => stop.at)), high = Math.max(0, ...stops.map((stop) => stop.at));
+		return {
+			x: scaleLinear([low, high === low ? low + 1 : high], [0, ctx.plot.width]).nice(),
+			y
+		};
+	}
+	tickFormat(scale) {
+		const first = scale.domain()[0];
+		if (typeof first === "string") return TimeMarks.bandFormat(scale);
+		return typeof first === "number" ? (value) => +value ? TimeRows.signedDays(+value) : "Day 0" : null;
+	}
+	/** The last state of a life is only a point, so it has no coloured mark unless events are dots. */
+	legendItems() {
+		if (this.options.events === "dots") return super.legendItems();
+		const tracked = new Set(this.lives().flatMap((life) => life.stops.slice(0, -1).map((stop) => stop.state)));
+		return super.legendItems().filter((item) => tracked.has(item.key));
+	}
+	plotMarks(ctx, { x, y }) {
+		const lives = this.lives(), { track, events } = this.options;
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.state], "Other"));
+		const place = (stop) => this.relative ? x(stop.at) : x(stop.date);
+		const band = y.bandwidth(), thick = track === "bar" ? Math.min(band, 12) : 2;
+		const mid = (life) => y(life.key) + band / 2;
+		const ticks = this.relative ? x.ticks(6) : x.ticks(Math.floor(ctx.plot.width / 80));
+		const grid = ctx.marks("vgrid", "line", ticks, (tick) => +tick).attr("stroke", ctx.theme.grid);
+		ctx.set(grid, {
+			x1: (t) => x(t),
+			x2: (t) => x(t),
+			y1: 0,
+			y2: ctx.plot.height
+		});
+		ctx.group("vgrid").lower();
+		const pieces = lives.flatMap((life) => life.stops.slice(0, -1).map((stop, i) => ({
+			life,
+			stop,
+			next: life.stops[i + 1],
+			key: `${life.key}/${i}`
+		})));
+		const bar = (d, w) => TimeMarks.bar(place(d.stop) + 1, mid(d.life) - thick / 2, Math.max(1, w), thick, Math.min(3, thick / 2));
+		const reach = (d) => place(d.next) - place(d.stop) - 2;
+		const tracks = ctx.marks("tracks", "path", pieces, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.stop.state));
+		ctx.set(tracks, { d: (d) => bar(d, reach(d)) }, { d: (d) => bar(d, 0) }, 6);
+		ctx.hover(tracks, (d) => ({
+			title: d.life.name,
+			color: ctx.palette.color(d.stop.state),
+			rows: [
+				["State", d.stop.state],
+				["From", TimeRows.long(d.stop.date)],
+				["To", TimeRows.long(d.next.date)]
+			]
+		}));
+		const stops = events === "no-events" ? [] : lives.flatMap((life) => life.stops.map((stop, i) => ({
+			life,
+			stop,
+			key: `${life.key}/${i}`
+		})));
+		const r = Math.min(4.5, Math.max(3, band / 2));
+		const dots = ctx.marks("events", "path", stops, (d) => d.key).attr("fill", events === "dots" ? (d) => ctx.palette.color(d.stop.state) : "none").attr("stroke", events === "dots" ? ctx.theme.surface : ctx.theme.ink).attr("stroke-width", events === "dots" ? 2 : 1.5);
+		ctx.set(dots, { d: (d) => {
+			const cx = place(d.stop), cy = mid(d.life);
+			return events === "dots" ? `M${cx - r},${cy}a${r},${r} 0 1 0 ${r * 2},0a${r},${r} 0 1 0 ${-r * 2},0Z` : `M${cx},${cy - Math.min(5, band / 2)}V${cy + Math.min(5, band / 2)}`;
+		} });
+		ctx.hover(dots, (d) => ({
+			title: d.life.name,
+			color: ctx.palette.color(d.stop.state),
+			rows: [["Event", d.stop.state], ["Date", TimeRows.long(d.stop.date)]]
+		}));
+	}
+};
+export { LifelineAlign, LifelineChart, LifelineEvents, LifelineSort, LifelineTrack };

package/dist/charts/timeline/MarimekkoTime.js

@@ -0,0 +1,192 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeRows } from "./TimeRows.js";
+import { descending, groups, scaleLinear, sum, utcMonth, utcWeek } from "d3";
+// src/charts/timeline/MarimekkoTime.ts
+var MekkoPeriod = /* @__PURE__ */ function(MekkoPeriod) {
+	MekkoPeriod["Week"] = "weekly";
+	MekkoPeriod["Fortnight"] = "fortnightly";
+	MekkoPeriod["Month"] = "monthly";
+	return MekkoPeriod;
+}({});
+var MekkoForm = /* @__PURE__ */ function(MekkoForm) {
+	MekkoForm["Mekko"] = "mekko";
+	MekkoForm["Proportional"] = "proportional";
+	MekkoForm["Absolute"] = "absolute";
+	return MekkoForm;
+}({});
+var MekkoOrder = /* @__PURE__ */ function(MekkoOrder) {
+	MekkoOrder["Input"] = "stable-order";
+	MekkoOrder["Largest"] = "largest-first";
+	return MekkoOrder;
+}({});
+var GAP = 2;
+/** Compare mix and volume per period at once: width is the period total, height is each part's share. */
+var MarimekkoTime = class extends Chart2D {
+	static meta = {
+		id: "marimekko-time",
+		name: "Time Marimekko",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides time into columns whose widths follow period totals and stacks each part inside by share.",
+		tags: [
+			"mekko",
+			"mosaic",
+			"share over time",
+			"variable width"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 150, 4).map((row) => ({
+			...row,
+			value: +row.value * (1 + Math.sin(+row.date / 9e8)) + 8
+		})),
+		variants: {
+			form: Object.values(MekkoForm),
+			period: [
+				"monthly",
+				"fortnightly",
+				"weekly"
+			],
+			order: Object.values(MekkoOrder),
+			labels: [true, false]
+		},
+		valid: ({ labels, period }) => labels === true || period !== "weekly"
+	};
+	defaults() {
+		return {
+			date: "date",
+			series: "series",
+			value: "value",
+			period: "monthly",
+			form: "mekko",
+			order: "stable-order",
+			labels: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 26,
+			bottom: 24,
+			left: 46
+		};
+	}
+	floor(date) {
+		const { period } = this.options;
+		if (period === "monthly") return utcMonth.floor(date);
+		if (period === "weekly") return utcWeek.floor(date);
+		return utcWeek.floor(/* @__PURE__ */ new Date(Math.floor(+date / (14 * TimeRows.DAY)) * 14 * TimeRows.DAY));
+	}
+	columns() {
+		const { data, date, series, value } = this.options;
+		const rows = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				period: this.floor(when),
+				series: TimeRows.text(row[series], "Other"),
+				value: Math.max(0, TimeRows.number(row[value]) ?? 0)
+			}] : [];
+		});
+		return groups(rows, (row) => +row.period).sort((a, b) => a[0] - b[0]).map(([stamp, list]) => {
+			const parts = groups(list, (row) => row.series).map(([name, items]) => ({
+				name,
+				value: sum(items, (item) => item.value)
+			}));
+			return {
+				period: new Date(stamp),
+				parts,
+				total: sum(parts, (part) => part.value)
+			};
+		}).filter((column) => column.total > 0);
+	}
+	draw(ctx) {
+		const { data, series, form, order, labels } = this.options;
+		const { width, height } = ctx.plot;
+		for (const row of data) ctx.palette.color(TimeRows.text(row[series], "Other"));
+		const columns = this.columns();
+		const absolute = form === "absolute";
+		const peak = Math.max(1, ...columns.map((column) => column.total));
+		const y = scaleLinear([0, absolute ? peak : 1], [height, 0]);
+		if (absolute) y.nice();
+		const grand = Math.max(1, sum(columns, (column) => column.total));
+		const free = width - GAP * Math.max(0, columns.length - 1);
+		let cursor = 0;
+		const cells = [], heads = [];
+		for (const column of columns) {
+			const w = form === "mekko" ? free * column.total / grand : free / columns.length;
+			const parts = order === "largest-first" ? [...column.parts].sort((a, b) => descending(a.value, b.value)) : column.parts;
+			let stacked = 0;
+			for (const part of parts) {
+				const amount = absolute ? part.value : part.value / column.total;
+				cells.push({
+					key: `${+column.period}/${part.name}`,
+					period: column.period,
+					series: part.name,
+					value: part.value,
+					share: part.value / column.total,
+					x: cursor,
+					y: y(stacked + amount),
+					w,
+					h: Math.max(0, y(stacked) - y(stacked + amount) - GAP)
+				});
+				stacked += amount;
+			}
+			heads.push({
+				x: cursor,
+				w,
+				label: this.options.period === "monthly" ? TimeRows.short(column.period).split(" ")[0] : TimeRows.short(column.period)
+			});
+			cursor += w + GAP;
+		}
+		const ticks = y.ticks(absolute ? 5 : 4);
+		const grid = ctx.marks("grid", "line", ticks, (d) => d).attr("stroke", ctx.theme.grid);
+		ctx.set(grid, {
+			x1: 0,
+			x2: width,
+			y1: (d) => y(d),
+			y2: (d) => y(d)
+		});
+		const axis = ctx.marks("y-labels", "text", ticks, (d) => d).attr("text-anchor", "end").text((d) => absolute ? Math.round(d).toLocaleString("en") : `${Math.round(d * 100)}%`);
+		ctx.text(ctx.set(axis, {
+			x: -6,
+			y: (d) => y(d) + 4
+		}));
+		const rects = ctx.marks("cells", "rect", cells, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series)).attr("rx", 2);
+		ctx.set(rects, {
+			x: (d) => d.x,
+			width: (d) => d.w,
+			y: (d) => d.y,
+			height: (d) => d.h
+		}, {
+			x: (d) => d.x,
+			width: (d) => d.w,
+			y: height,
+			height: 0
+		}, 6);
+		ctx.hover(rects, (d) => ({
+			title: `${d.series}, ${TimeRows.short(d.period)}`,
+			color: ctx.palette.color(d.series),
+			rows: [["Value", +d.value.toFixed(1)], ["Share", `${Math.round(d.share * 100)}%`]]
+		}));
+		const tags = labels ? cells.filter((d) => d.h >= 14 && d.w >= 30) : [];
+		const text = ctx.marks("shares", "text", tags, (d) => d.key).attr("text-anchor", "middle").style("pointer-events", "none").text((d) => `${Math.round(d.share * 100)}%`);
+		ctx.set(ctx.text(text, 10, "ink").attr("fill", (d) => ctx.palette.inkOn(ctx.palette.color(d.series))), {
+			x: (d) => d.x + d.w / 2,
+			y: (d) => d.y + d.h / 2 + 3.5
+		});
+		let last = -Infinity;
+		const shown = heads.filter((head) => {
+			const room = TimeRows.width(head.label, 10.5) + 8;
+			if (head.x + head.w / 2 - room / 2 < last) return false;
+			last = head.x + head.w / 2 + room / 2;
+			return true;
+		});
+		const under = ctx.marks("periods", "text", shown, (d) => d.label).attr("text-anchor", "middle").text((d) => d.label);
+		ctx.text(ctx.set(under, {
+			x: (d) => d.x + d.w / 2,
+			y: height + 15
+		}), 10.5);
+	}
+};
+export { MarimekkoTime, MekkoForm, MekkoOrder, MekkoPeriod };

package/dist/charts/timeline/MilestoneChart.js

@@ -0,0 +1,184 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { descending, max, scaleBand, scaleLinear, scaleUtc, symbol } from "d3";
+// src/charts/timeline/MilestoneChart.ts
+var MilestoneConnector = /* @__PURE__ */ function(MilestoneConnector) {
+	MilestoneConnector["Bar"] = "slip-bar";
+	MilestoneConnector["Arrow"] = "arrow";
+	MilestoneConnector["Hidden"] = "no-connector";
+	return MilestoneConnector;
+}({});
+var MilestoneSort = /* @__PURE__ */ function(MilestoneSort) {
+	MilestoneSort["Planned"] = "by-plan";
+	MilestoneSort["Slip"] = "by-slip";
+	MilestoneSort["Group"] = "by-group";
+	return MilestoneSort;
+}({});
+var MilestoneFrame = /* @__PURE__ */ function(MilestoneFrame) {
+	MilestoneFrame["Calendar"] = "calendar";
+	MilestoneFrame["Slip"] = "slip-days";
+	return MilestoneFrame;
+}({});
+/** Track commitments against plan: where each milestone was due, where it landed, and how far it slipped. */
+var MilestoneChart = class extends CartesianChart {
+	static meta = {
+		id: "milestone",
+		name: "Milestone chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares planned and actual milestone dates row by row, so slippage is visible as distance on the calendar.",
+		tags: [
+			"deadline",
+			"slip",
+			"plan versus actual"
+		],
+		sample: (seed) => SampleData.tasks(seed, 10).map((row, i) => ({
+			milestone: `Gate ${i + 1}`,
+			planned: row.end,
+			group: row.group,
+			actual: i > 7 ? null : TimeRows.addDays(row.end, Math.round((+row.progress - .42) * 16))
+		})),
+		variants: {
+			symbol: [
+				SymbolKind.Diamond,
+				SymbolKind.Triangle,
+				SymbolKind.Circle
+			],
+			connector: Object.values(MilestoneConnector),
+			sort: Object.values(MilestoneSort),
+			frame: Object.values(MilestoneFrame)
+		}
+	};
+	defaults() {
+		return {
+			milestone: "milestone",
+			planned: "planned",
+			actual: "actual",
+			group: "group",
+			symbol: SymbolKind.Diamond,
+			connector: "slip-bar",
+			sort: "by-plan",
+			frame: "calendar"
+		};
+	}
+	items() {
+		const { data, milestone, planned, actual, group, sort } = this.options;
+		const items = data.flatMap((row, i) => {
+			const due = TimeRows.date(row[planned]), landed = TimeRows.date(row[actual]);
+			if (!due) return [];
+			return [{
+				key: "",
+				label: TimeRows.text(row[milestone], `#${i + 1}`),
+				group: TimeRows.text(row[group], "Other"),
+				planned: due,
+				actual: landed,
+				slip: landed ? TimeRows.days(due, landed) : 0
+			}];
+		});
+		if (sort === "by-plan") items.sort((a, b) => +a.planned - +b.planned);
+		if (sort === "by-slip") items.sort((a, b) => descending(a.slip, b.slip));
+		if (sort === "by-group") items.sort((a, b) => a.group.localeCompare(b.group));
+		const keys = TimeRows.unique(items.map((item) => item.label));
+		return items.map((item, i) => ({
+			...item,
+			key: keys[i]
+		}));
+	}
+	scales(ctx) {
+		const items = this.items();
+		const y = scaleBand(items.map((item) => item.key), [0, ctx.plot.height]).padding(.2);
+		if (this.options.frame === "slip-days") {
+			const reach = Math.max(1, max(items, (item) => Math.abs(item.slip)) ?? 1);
+			return {
+				x: scaleLinear([-reach * 1.25, reach * 1.25], [0, ctx.plot.width]).nice(),
+				y
+			};
+		}
+		const dates = items.flatMap((item) => item.actual ? [item.planned, item.actual] : [item.planned]);
+		const [from, to] = TimeRows.extent(dates), pad = TimeRows.days(from, to) * .06;
+		return {
+			x: scaleUtc([TimeRows.addDays(from, -pad), TimeRows.addDays(to, pad)], [0, ctx.plot.width]).nice(),
+			y
+		};
+	}
+	tickFormat(scale) {
+		const domain = scale.domain?.() ?? [];
+		if (typeof domain[0] !== "string") return typeof domain[0] === "number" ? (value) => +value ? TimeRows.signedDays(+value) : "On plan" : null;
+		return TimeMarks.bandFormat(scale);
+	}
+	plotMarks(ctx, { x, y }) {
+		const items = this.items();
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.group], "Other"));
+		const slipFrame = this.options.frame === "slip-days";
+		const { connector } = this.options;
+		const mid = (item) => y(item.key) + y.bandwidth() / 2;
+		const plannedAt = (item) => slipFrame ? x(0) : x(item.planned);
+		const actualAt = (item) => slipFrame ? x(item.slip) : x(item.actual);
+		const ticks = slipFrame ? x.ticks(5) : x.ticks(Math.floor(ctx.plot.width / 80));
+		const grid = ctx.marks("vgrid", "line", ticks, (tick) => +tick).attr("stroke", ctx.theme.grid);
+		ctx.set(grid, {
+			x1: (t) => x(t),
+			x2: (t) => x(t),
+			y1: 0,
+			y2: ctx.plot.height
+		});
+		ctx.group("vgrid").lower();
+		const rails = ctx.marks("rails", "line", slipFrame ? [] : items, (d) => d.key).attr("stroke", ctx.theme.grid);
+		ctx.set(rails, {
+			x1: 0,
+			x2: (d) => plannedAt(d),
+			y1: mid,
+			y2: mid
+		});
+		const landed = items.filter((item) => item.actual);
+		const tone = (item) => ctx.palette.diverging(Math.max(-1, Math.min(1, item.slip / 6)) * .85 || 0);
+		const gaps = connector === "no-connector" ? [] : landed.filter((item) => Math.abs(actualAt(item) - plannedAt(item)) > 2);
+		const lines = ctx.marks("gaps", "path", gaps, (d) => d.key).attr("fill", "none").attr("stroke", tone).attr("stroke-linecap", "round").attr("stroke-width", connector === "slip-bar" ? Math.min(8, Math.max(3, y.bandwidth() * .45)) : 2);
+		ctx.set(lines, { d: (d) => {
+			const from = plannedAt(d), to = actualAt(d), dir = Math.sign(to - from);
+			if (connector === "slip-bar") return `M${from},${mid(d)}H${to}`;
+			return `M${from + dir * 6},${mid(d)}H${to - dir}M${to - dir * 5},${mid(d) - 3.5}L${to - dir},${mid(d)}L${to - dir * 5},${mid(d) + 3.5}`;
+		} });
+		const shape = symbol(Scales.symbol(this.options.symbol), 80)();
+		const zero = ctx.marks("zero", "line", slipFrame ? [0] : []).attr("stroke", ctx.theme.axis).attr("stroke-width", 2);
+		ctx.set(zero, {
+			x1: (d) => x(d),
+			x2: (d) => x(d),
+			y1: 0,
+			y2: ctx.plot.height
+		});
+		const plans = ctx.marks("plans", "path", slipFrame ? items.filter((item) => !item.actual) : items, (d) => d.key).attr("fill", ctx.theme.surface).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2);
+		ctx.set(plans, {
+			d: shape,
+			transform: (d) => `translate(${plannedAt(d)},${mid(d)})`
+		});
+		const dots = ctx.marks("actuals", "path", landed, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.group)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			d: shape,
+			transform: (d) => `translate(${actualAt(d)},${mid(d)})`
+		}, {}, 20);
+		const tip = (d) => ({
+			title: d.label,
+			color: ctx.palette.color(d.group),
+			rows: [
+				["Planned", TimeRows.long(d.planned)],
+				["Actual", d.actual ? TimeRows.long(d.actual) : "Pending"],
+				["Slip", d.actual ? TimeRows.signedDays(d.slip) : "—"]
+			]
+		});
+		ctx.hover(dots, tip);
+		ctx.hover(plans, tip);
+		const worst = [...landed].sort((a, b) => Math.abs(b.slip) - Math.abs(a.slip)).slice(0, 3).filter((d) => d.slip).filter((d) => y.bandwidth() >= 9 && Math.max(actualAt(d), plannedAt(d)) + 34 < ctx.plot.width);
+		const notes = ctx.marks("notes", "text", worst, (d) => d.key).text((d) => TimeRows.signedDays(d.slip));
+		ctx.text(ctx.set(notes, {
+			x: (d) => Math.max(actualAt(d), plannedAt(d)) + 9,
+			y: (d) => mid(d) + 3.5
+		}), 10, "secondary");
+	}
+};
+export { MilestoneChart, MilestoneConnector, MilestoneFrame, MilestoneSort };