@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/timeline/CycleTimeChart.js

@@ -0,0 +1,176 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeRows } from "./TimeRows.js";
+import { deviation, mean, quantile, scaleLinear, scaleLog, scaleUtc, symbol, symbolCircle } from "d3";
+// src/charts/timeline/CycleTimeChart.ts
+var CycleGuides = /* @__PURE__ */ function(CycleGuides) {
+	CycleGuides["Percentiles"] = "percentiles";
+	CycleGuides["Control"] = "control-limits";
+	CycleGuides["Hidden"] = "no-guides";
+	return CycleGuides;
+}({});
+var WINDOW = 9;
+var SHAPES = [
+	SymbolKind.Circle,
+	SymbolKind.Square,
+	SymbolKind.Triangle,
+	SymbolKind.Diamond,
+	SymbolKind.Wye,
+	SymbolKind.Star,
+	SymbolKind.Cross
+];
+/** Control chart for delivery: how long items took, how predictable that is, and what to promise next. */
+var CycleTimeChart = class extends CartesianChart {
+	static meta = {
+		id: "cycle-time",
+		name: "Cycle time chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Scatters each finished item by completion date and elapsed days, with percentile or control-limit guides.",
+		tags: [
+			"control chart",
+			"lead time",
+			"kanban",
+			"predictability"
+		],
+		sample: (seed) => SampleData.tasks(seed, 70),
+		variants: {
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			guides: Object.values(CycleGuides),
+			rolling: [true, false],
+			shapes: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			start: "start",
+			end: "end",
+			item: "task",
+			group: "group",
+			scale: ScaleKind.Linear,
+			guides: "percentiles",
+			rolling: true,
+			shapes: false
+		};
+	}
+	yTicks() {
+		return this.options.scale === ScaleKind.Log ? 4 : 6;
+	}
+	tickFormat(scale) {
+		if (this.options.scale !== ScaleKind.Log || scale.domain()[0] instanceof Date) return super.tickFormat(scale);
+		return (value) => {
+			const lead = +value / 10 ** Math.floor(Math.log10(+value));
+			return [
+				1,
+				2,
+				5
+			].includes(Math.round(lead * 100) / 100) ? `${+value}` : "";
+		};
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			right: this.options.guides === "no-guides" ? 20 : 56
+		};
+	}
+	items() {
+		const { data, start, end, item, group } = this.options;
+		return data.flatMap((row, i) => {
+			const from = TimeRows.date(row[start]), to = TimeRows.date(row[end]);
+			return from && to ? [{
+				key: `${i}`,
+				label: TimeRows.text(row[item], `#${i + 1}`),
+				group: TimeRows.text(row[group], "Other"),
+				done: to,
+				days: Math.max(.5, TimeRows.days(from, to))
+			}] : [];
+		}).sort((a, b) => +a.done - +b.done);
+	}
+	scales(ctx) {
+		const items = this.items(), top = Math.max(1, ...items.map((item) => item.days), this.limits().at(-1)?.value ?? 0);
+		const low = Math.min(top / 2, ...items.map((item) => item.days));
+		const y = this.options.scale === ScaleKind.Log ? scaleLog([Math.max(.5, low * .8), top * 1.25], [ctx.plot.height, 0]) : scaleLinear([0, top], [ctx.plot.height, 0]).nice();
+		const [from, to] = TimeRows.extent(items.map((item) => item.done)), pad = TimeRows.days(from, to) * .03;
+		return {
+			x: scaleUtc([TimeRows.addDays(from, -pad), TimeRows.addDays(to, pad)], [0, ctx.plot.width]),
+			y
+		};
+	}
+	limits() {
+		const days = this.items().map((item) => item.days).sort((a, b) => a - b);
+		if (!days.length) return [];
+		if (this.options.guides === "percentiles") return [
+			["50%", .5],
+			["85%", .85],
+			["95%", .95]
+		].map(([name, p]) => ({
+			name,
+			value: quantile(days, p)
+		}));
+		if (this.options.guides === "control-limits") {
+			const centre = mean(days), sigma = deviation(days) ?? 0;
+			return [
+				{
+					name: "LCL",
+					value: Math.max(.5, centre - 2 * sigma)
+				},
+				{
+					name: "Mean",
+					value: centre
+				},
+				{
+					name: "UCL",
+					value: centre + 2 * sigma
+				}
+			];
+		}
+		return [];
+	}
+	plotMarks(ctx, { x, y }) {
+		const items = this.items(), { width } = ctx.plot;
+		const names = [...new Set(this.options.data.map((row) => TimeRows.text(row[this.options.group], "Other")))];
+		names.forEach((name) => ctx.palette.color(name));
+		const limits = this.limits().filter((limit) => y(limit.value) >= 0 && y(limit.value) <= ctx.plot.height);
+		const rules = ctx.marks("limits", "line", limits, (d) => d.name).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1).attr("stroke-dasharray", "4 4");
+		ctx.set(rules, {
+			x1: 0,
+			x2: width,
+			y1: (d) => y(d.value),
+			y2: (d) => y(d.value)
+		});
+		let lastY = Infinity;
+		const tags = limits.filter((limit) => {
+			const at = y(limit.value);
+			if (lastY - at < 12) return false;
+			lastY = at;
+			return true;
+		});
+		const notes = ctx.marks("limit-notes", "text", tags, (d) => d.name).text((d) => `${d.name} ${Math.round(d.value)}d`);
+		ctx.text(ctx.set(notes, {
+			x: width + 5,
+			y: (d) => y(d.value) + 3.5
+		}), 10, "secondary");
+		const shape = (d) => this.options.shapes ? symbol(Scales.symbol(SHAPES[names.indexOf(d.group) % SHAPES.length]), 56)() : symbol(symbolCircle, 56)();
+		const dots = ctx.marks("items", "path", items, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.group)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(dots, {
+			d: shape,
+			transform: (d) => `translate(${x(d.done)},${y(d.days)})`
+		}, {}, 4);
+		ctx.hover(dots, (d) => ({
+			title: d.label,
+			color: ctx.palette.color(d.group),
+			rows: [["Finished", TimeRows.long(d.done)], ["Cycle time", `${+d.days.toFixed(1)} d`]]
+		}));
+		const rolling = !this.options.rolling || items.length < WINDOW ? [] : items.slice(8).map((item, i) => ({
+			x: x(item.done),
+			y: y(mean(items.slice(i, i + WINDOW), (d) => d.days))
+		}));
+		const trail = ctx.marks("rolling", "path", rolling.length ? [rolling] : [], (_, i) => i).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2);
+		ctx.set(trail, { d: (points) => `M${points.map((point) => `${point.x},${point.y}`).join("L")}` });
+		ctx.drawOn(trail);
+	}
+};
+export { CycleGuides, CycleTimeChart };

package/dist/charts/timeline/EventDropChart.js

@@ -0,0 +1,184 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeBandChart } from "./TimeBandChart.js";
+import { TimeRows } from "./TimeRows.js";
+import { groups, max, sum, symbol, symbolCircle } from "d3";
+// src/charts/timeline/EventDropChart.ts
+var EventDropMark = /* @__PURE__ */ function(EventDropMark) {
+	EventDropMark["Dot"] = "dot";
+	EventDropMark["Tick"] = "tick";
+	EventDropMark["Drop"] = "drop";
+	EventDropMark["Bubble"] = "bubble";
+	return EventDropMark;
+}({});
+var EventDropArrangement = /* @__PURE__ */ function(EventDropArrangement) {
+	EventDropArrangement["Line"] = "on-line";
+	EventDropArrangement["Swarm"] = "swarm";
+	return EventDropArrangement;
+}({});
+var EventDropDensity = /* @__PURE__ */ function(EventDropDensity) {
+	EventDropDensity["None"] = "no-density";
+	EventDropDensity["Ridge"] = "ridge";
+	EventDropDensity["Bins"] = "bins";
+	return EventDropDensity;
+}({});
+var EventDropOrder = /* @__PURE__ */ function(EventDropOrder) {
+	EventDropOrder["FirstSeen"] = "first-seen";
+	EventDropOrder["Count"] = "by-count";
+	EventDropOrder["Quiet"] = "by-quiet";
+	return EventDropOrder;
+}({});
+var COLUMN = 10;
+/** Show when discrete events happen across several streams, keeping every event visible. */
+var EventDropChart = class extends TimeBandChart {
+	static meta = {
+		id: "event-drop",
+		name: "Event drops",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Drops one mark per event on a row for each stream, exposing bursts, gaps and coincidences in time.",
+		tags: [
+			"events",
+			"log",
+			"activity",
+			"strip"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 90, 5).filter((row, i) => Math.sin(i * 12.9898 + +row.value) * 43758.5 % 1 > .35 + Math.sin(i / 11) * .3),
+		variants: {
+			mark: Object.values(EventDropMark),
+			arrangement: Object.values(EventDropArrangement),
+			density: Object.values(EventDropDensity),
+			order: Object.values(EventDropOrder)
+		},
+		valid: ({ mark, arrangement }) => mark !== "tick" || arrangement === "on-line"
+	};
+	defaults() {
+		return {
+			date: "date",
+			series: "series",
+			value: "value",
+			mark: "dot",
+			arrangement: "on-line",
+			density: "no-density",
+			order: "first-seen"
+		};
+	}
+	bandPadding() {
+		return .14;
+	}
+	lanes() {
+		const { data, date, series, value, order } = this.options;
+		const rows = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				name: TimeRows.text(row[series], "Other"),
+				date: when,
+				value: Math.abs(TimeRows.number(row[value]) ?? 1)
+			}] : [];
+		});
+		const lanes = groups(rows, (row) => row.name).map(([name, events]) => ({
+			name,
+			events: events.sort((a, b) => +a.date - +b.date)
+		}));
+		if (order === "by-count") lanes.sort((a, b) => b.events.length - a.events.length);
+		if (order === "by-quiet") lanes.sort((a, b) => a.events.length - b.events.length);
+		return lanes;
+	}
+	bands() {
+		return this.lanes().map((lane) => lane.name);
+	}
+	range() {
+		return TimeRows.extent(this.lanes().flatMap((lane) => lane.events.map((event) => event.date)));
+	}
+	/** Greedy beeswarm around the row centre: nearest offset that does not touch earlier marks. */
+	dodge(items, limit) {
+		const placed = [];
+		for (const item of items) {
+			const near = placed.filter((other) => Math.abs(other.x - item.x) < other.r + item.r + 1);
+			let offset = 0, step = 0;
+			const clear = (at) => near.every((other) => (other.x - item.x) ** 2 + (other.y - at) ** 2 >= (other.r + item.r + 1) ** 2);
+			while (!clear(item.y + offset) && Math.abs(offset) <= limit) {
+				step += 1;
+				offset = (step % 2 ? 1 : -1) * Math.ceil(step / 2) * 2;
+			}
+			if (Math.abs(offset) > limit) offset = 0;
+			item.y += offset;
+			placed.push(item);
+		}
+	}
+	density(lane, x, width) {
+		const bins = new Array(Math.max(1, Math.ceil(width / COLUMN))).fill(0);
+		for (const event of lane.events) {
+			const bin = Math.min(bins.length - 1, Math.max(0, Math.floor(x(event.date) / COLUMN)));
+			bins[bin] += 1;
+		}
+		return bins;
+	}
+	plotMarks(ctx, { x, y }) {
+		const lanes = this.lanes();
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.series], "Other"));
+		const { mark, arrangement, density } = this.options;
+		const band = y.bandwidth(), tracked = density !== "no-density";
+		const peak = max(lanes.flatMap((lane) => lane.events), (event) => event.value) || 1;
+		this.timeGrid(ctx, x);
+		const rail = (name) => y(name) + (tracked ? band * .72 : band / 2);
+		const rails = ctx.marks("rails", "line", lanes, (lane) => lane.name).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		ctx.set(rails, {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (lane) => rail(lane.name),
+			y2: (lane) => rail(lane.name)
+		});
+		this.drawDensity(ctx, lanes, x, y, band * .55);
+		const room = Math.min(band * (tracked ? .26 : .46), 16);
+		const drops = lanes.flatMap((lane) => {
+			const items = lane.events.map((event, i) => ({
+				key: `${lane.name}/${i}`,
+				series: lane.name,
+				date: event.date,
+				value: event.value,
+				x: x(event.date),
+				y: rail(lane.name),
+				r: mark === "bubble" ? Math.max(1.5, Math.min(band * .4, 9) * Math.sqrt(event.value / peak)) : 4
+			}));
+			if (arrangement === "swarm") this.dodge(items, room);
+			return items;
+		});
+		const tick = Math.min(band * .7, 14);
+		const shape = (d) => {
+			if (mark === "tick") return `M-1,${-tick / 2}H1V${tick / 2}H-1Z`;
+			if (mark === "drop") return `M0,${-d.r * 2}C${d.r * .6},${-d.r * .9} ${d.r},${-d.r * .5} ${d.r},0A${d.r},${d.r} 0 1 1 ${-d.r},0C${-d.r},${-d.r * .5} ${-d.r * .6},${-d.r * .9} 0,${-d.r * 2}Z`;
+			return symbol(symbolCircle, Math.PI * d.r * d.r)();
+		};
+		const marks = ctx.marks("drops", "path", drops, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series)).attr("fill-opacity", mark === "bubble" ? .75 : 1).attr("stroke", mark === "tick" ? "none" : ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(marks, {
+			d: shape,
+			transform: (d) => `translate(${d.x},${d.y})`
+		}, {}, 0);
+		ctx.hover(marks, (d) => ({
+			title: d.series,
+			color: ctx.palette.color(d.series),
+			rows: [["Date", TimeRows.long(d.date)], ["Value", d.value]]
+		}));
+	}
+	drawDensity(ctx, lanes, x, y, height) {
+		const { density } = this.options, width = ctx.plot.width;
+		const profiles = density === "no-density" ? [] : lanes.map((lane) => ({
+			lane,
+			bins: this.density(lane, x, width)
+		}));
+		const top = max(profiles.flatMap((p) => p.bins)) ?? 1;
+		const base = (name) => y(name) + y.bandwidth() * .62;
+		const smooth = (bins) => bins.map((_, i) => sum(bins.slice(Math.max(0, i - 2), i + 3)) / Math.min(bins.length, 5));
+		const path = ({ lane, bins }) => {
+			const floor = base(lane.name), scale = height / top;
+			if (density === "bins") return bins.map((count, i) => count ? `M${i * COLUMN},${floor}v${-count * scale}h8v${count * scale}Z` : "").join("");
+			const curve = smooth(bins), rate = height / Math.max(...profiles.map((p) => max(smooth(p.bins)) ?? 1), 1e-9);
+			return `M0,${floor}${curve.map((value, i) => `L${i * COLUMN + COLUMN / 2},${floor - value * rate}`).join("")}L${width},${floor}Z`;
+		};
+		const shapes = ctx.marks("density", "path", profiles, (p) => p.lane.name).attr("fill", (p) => ctx.palette.color(p.lane.name)).attr("fill-opacity", .28);
+		ctx.set(shapes, { d: path });
+	}
+};
+export { EventDropArrangement, EventDropChart, EventDropDensity, EventDropMark, EventDropOrder };

package/dist/charts/timeline/GanttChart.js

@@ -0,0 +1,215 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { TimeBandChart } from "./TimeBandChart.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { groups } from "d3";
+// src/charts/timeline/GanttChart.ts
+var GanttSort = /* @__PURE__ */ function(GanttSort) {
+	GanttSort["Start"] = "by-start";
+	GanttSort["Input"] = "by-input";
+	GanttSort["Duration"] = "by-duration";
+	GanttSort["Group"] = "by-group";
+	return GanttSort;
+}({});
+var GanttBar = /* @__PURE__ */ function(GanttBar) {
+	GanttBar["Block"] = "block";
+	GanttBar["Slim"] = "slim";
+	GanttBar["Chevron"] = "chevron";
+	return GanttBar;
+}({});
+var GanttProgress = /* @__PURE__ */ function(GanttProgress) {
+	GanttProgress["Overlay"] = "overlay";
+	GanttProgress["Underline"] = "underline";
+	GanttProgress["Hidden"] = "no-progress";
+	return GanttProgress;
+}({});
+var GanttShade = /* @__PURE__ */ function(GanttShade) {
+	GanttShade["None"] = "no-shade";
+	GanttShade["Weekends"] = "weekends";
+	GanttShade["Months"] = "months";
+	return GanttShade;
+}({});
+/** Schedule work against a calendar: bars show when each task runs, with progress, dependencies and group roll-ups. */
+var GanttChart = class extends TimeBandChart {
+	static meta = {
+		id: "gantt",
+		name: "Gantt chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lays tasks out as bars on a calendar so the schedule, overlap, progress and dependencies read at a glance.",
+		tags: [
+			"schedule",
+			"project",
+			"tasks",
+			"dependencies"
+		],
+		sample: (seed) => TimeSamples.plan(seed),
+		variants: {
+			sort: Object.values(GanttSort),
+			bar: Object.values(GanttBar),
+			progressStyle: Object.values(GanttProgress),
+			links: [true, false],
+			shade: Object.values(GanttShade)
+		},
+		valid: ({ bar, progressStyle }) => bar === "block" || progressStyle === "overlay" || bar === "slim" && progressStyle === "no-progress"
+	};
+	defaults() {
+		return {
+			task: "task",
+			start: "start",
+			end: "end",
+			group: "group",
+			progress: "progress",
+			dependsOn: "dependsOn",
+			sort: "by-start",
+			bar: "block",
+			progressStyle: "overlay",
+			links: true,
+			shade: "no-shade"
+		};
+	}
+	done(row) {
+		const value = TimeRows.number(row[this.options.progress]) ?? 0;
+		return Math.max(0, Math.min(1, value > 1 ? value / 100 : value));
+	}
+	lines() {
+		const { data, task, start, end, group, sort } = this.options;
+		const spans = TimeRows.spans(data, {
+			label: task,
+			start,
+			end,
+			group
+		});
+		const length = (span) => +span.end - +span.start;
+		if (sort === "by-start") spans.sort((a, b) => +a.start - +b.start);
+		if (sort === "by-duration") spans.sort((a, b) => length(b) - length(a));
+		const lines = sort === "by-group" ? groups(spans, (span) => span.group).flatMap(([name, members]) => {
+			const [low, high] = TimeRows.extent(members.flatMap((span) => [span.start, span.end]));
+			return [{
+				span: {
+					row: {},
+					index: -1,
+					label: name,
+					group: name,
+					start: low,
+					end: high
+				},
+				done: 0,
+				summary: true
+			}, ...members.map((span) => ({
+				span,
+				done: this.done(span.row),
+				summary: false
+			}))];
+		}) : spans.map((span) => ({
+			span,
+			done: this.done(span.row),
+			summary: false
+		}));
+		const keys = TimeRows.unique(lines.map((line) => line.span.label));
+		return lines.map((line, i) => ({
+			...line,
+			key: keys[i]
+		}));
+	}
+	bands() {
+		return this.lines().map((line) => line.key);
+	}
+	range() {
+		return TimeRows.extent(this.lines().flatMap((line) => [line.span.start, line.span.end]));
+	}
+	plotMarks(ctx, { x, y }) {
+		const lines = this.lines();
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.group], "Other"));
+		this.shadeCalendar(ctx, x);
+		this.timeGrid(ctx, x);
+		const { bar, progressStyle } = this.options;
+		const band = y.bandwidth(), thick = bar === "slim" ? Math.min(band, Math.max(6, band * .42)) : band;
+		const inset = progressStyle === "underline" ? Math.min(4, band * .25) : 0;
+		const top = (line) => y(line.key) + (band - thick) / 2;
+		const shape = (line, width) => bar === "chevron" ? TimeMarks.chevron(x(line.span.start), top(line), width, thick - inset) : TimeMarks.bar(x(line.span.start), top(line), width, thick - inset, Math.min(4, thick / 2));
+		const reach = (line) => Math.max(3, x(line.span.end) - x(line.span.start));
+		const tasks = lines.filter((line) => !line.summary);
+		this.drawSummaries(ctx, lines.filter((line) => line.summary), x, y);
+		this.drawLinks(ctx, tasks, x, y);
+		const overlay = progressStyle === "overlay";
+		const tracks = ctx.marks("tracks", "path", tasks, (line) => line.key).attr("fill", (line) => ctx.palette.color(line.span.group)).attr("fill-opacity", overlay ? .32 : 1);
+		ctx.set(tracks, { d: (line) => shape(line, reach(line)) }, { d: (line) => shape(line, 0) }, 16);
+		ctx.hover(tracks, (line) => this.describe(ctx, line));
+		const filled = overlay ? tasks : [];
+		const fills = ctx.marks("fills", "path", filled, (line) => line.key).attr("fill", (line) => ctx.palette.color(line.span.group)).style("pointer-events", "none");
+		ctx.set(fills, { d: (line) => shape(line, reach(line) * line.done) }, { d: (line) => shape(line, 0) }, 16);
+		const under = progressStyle === "underline" ? tasks : [];
+		const rails = ctx.marks("rails", "path", under, (line) => line.key).attr("fill", ctx.theme.inkSecondary).style("pointer-events", "none");
+		ctx.set(rails, { d: (line) => TimeMarks.bar(x(line.span.start), top(line) + thick - inset + 1, reach(line) * line.done, Math.max(1, inset - 1), 1) }, { d: (line) => TimeMarks.bar(x(line.span.start), top(line) + thick - inset + 1, 0, Math.max(1, inset - 1), 1) }, 16);
+	}
+	describe(ctx, { span, done }) {
+		return {
+			title: span.label,
+			color: ctx.palette.color(span.group),
+			rows: [
+				["Start", TimeRows.long(span.start)],
+				["End", TimeRows.long(span.end)],
+				["Duration", `${Math.round(TimeRows.days(span.start, span.end))} days`],
+				["Done", `${Math.round(done * 100)}%`]
+			]
+		};
+	}
+	/** Roll-up bracket spanning a group, as on a work breakdown. */
+	drawSummaries(ctx, lines, x, y) {
+		const bracket = (line) => {
+			const left = x(line.span.start), right = Math.max(left + 8, x(line.span.end)), mid = y(line.key) + y.bandwidth() / 2, h = 3, tip = 3;
+			return `M${left},${mid - h}H${right}V${mid + h + tip}L${right - tip},${mid + h}H${left + tip}L${left},${mid + h + tip}Z`;
+		};
+		const marks = ctx.marks("summaries", "path", lines, (line) => line.key).attr("fill", ctx.theme.inkSecondary);
+		ctx.set(marks, { d: bracket });
+		ctx.hover(marks, ({ span }) => ({
+			title: span.label,
+			rows: [["Start", TimeRows.long(span.start)], ["End", TimeRows.long(span.end)]]
+		}));
+	}
+	drawLinks(ctx, lines, x, y) {
+		const byName = new Map(lines.map((line) => [line.span.label, line]));
+		const pairs = !this.options.links ? [] : lines.flatMap((to) => TimeRows.text(to.span.row[this.options.dependsOn], "").split(/\s*[,;]\s*/).flatMap((name) => {
+			const from = byName.get(name);
+			return from && from !== to ? [{
+				from,
+				to
+			}] : [];
+		}));
+		const mid = (line) => y(line.key) + y.bandwidth() / 2;
+		const paths = ctx.marks("links", "path", pairs, (d) => `${d.from.key}>${d.to.key}`).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(paths, { d: ({ from, to }) => TimeMarks.connector(x(from.span.end), mid(from), x(to.span.start), mid(to)) });
+	}
+	shadeCalendar(ctx, x) {
+		const { shade } = this.options;
+		const [from, to] = x.domain();
+		const blocks = [];
+		if (shade === "weekends") {
+			for (let day = +TimeRows.floorDay(from); day < +to; day += TimeRows.DAY) if (new Date(day).getUTCDay() === 6) blocks.push({
+				start: day,
+				end: day + 2 * TimeRows.DAY
+			});
+		}
+		if (shade === "months") for (let m = new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), 1)), i = 0; +m < +to; i++) {
+			const next = new Date(Date.UTC(m.getUTCFullYear(), m.getUTCMonth() + 1, 1));
+			if (i % 2 === 0) blocks.push({
+				start: +m,
+				end: +next
+			});
+			m = next;
+		}
+		const clamp = (stamp) => Math.max(0, Math.min(ctx.plot.width, x(new Date(stamp))));
+		const rects = ctx.marks("shade", "rect", blocks, (d) => d.start).attr("fill", ctx.theme.grid).attr("fill-opacity", .55);
+		ctx.set(rects, {
+			x: (d) => clamp(d.start),
+			width: (d) => clamp(d.end) - clamp(d.start),
+			y: 0,
+			height: ctx.plot.height
+		});
+		ctx.group("shade").lower();
+	}
+};
+export { GanttBar, GanttChart, GanttProgress, GanttShade, GanttSort };