@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/timeline/ResourceAllocationChart.js

@@ -0,0 +1,281 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { descending, max, scaleBand, scaleLinear, scaleUtc, sum, utcWeek } from "d3";
+// src/charts/timeline/ResourceAllocationChart.ts
+var ResourceForm = /* @__PURE__ */ function(ResourceForm) {
+	ResourceForm["Heat"] = "heat-strip";
+	ResourceForm["Histogram"] = "histogram";
+	ResourceForm["Profile"] = "profiles";
+	return ResourceForm;
+}({});
+var ResourceBin = /* @__PURE__ */ function(ResourceBin) {
+	ResourceBin["Week"] = "per-week";
+	ResourceBin["Day"] = "per-day";
+	return ResourceBin;
+}({});
+var ResourceSort = /* @__PURE__ */ function(ResourceSort) {
+	ResourceSort["Input"] = "as-listed";
+	ResourceSort["Peak"] = "by-peak";
+	ResourceSort["Total"] = "by-total";
+	return ResourceSort;
+}({});
+var GUTTER = 62;
+/** Balance people or machines against demand and catch over-allocation before it happens. */
+var ResourceAllocationChart = class extends Chart2D {
+	static meta = {
+		id: "resource-allocation",
+		name: "Resource allocation chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Turns overlapping assignments into load per resource over time and flags where it exceeds capacity.",
+		tags: [
+			"capacity",
+			"utilisation",
+			"resource histogram",
+			"workload"
+		],
+		sample: (seed) => SampleData.tasks(seed, 20).map((row, i) => ({
+			...row,
+			group: i % 6 === 5 ? "Delta" : row.group,
+			allocation: Math.ceil(+row.progress * 4) / 4 || .25
+		})),
+		variants: {
+			form: Object.values(ResourceForm),
+			bin: Object.values(ResourceBin),
+			sort: Object.values(ResourceSort),
+			limit: [true, false]
+		},
+		valid: ({ form, sort }) => form !== "histogram" || sort !== "by-total"
+	};
+	defaults() {
+		return {
+			resource: "group",
+			start: "start",
+			end: "end",
+			allocation: "allocation",
+			capacity: 1,
+			form: "heat-strip",
+			bin: "per-week",
+			sort: "as-listed",
+			limit: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 26,
+			bottom: 26,
+			left: this.options.form === "histogram" ? 34 : 70
+		};
+	}
+	edges() {
+		const { data, start, end, bin } = this.options;
+		const dates = data.flatMap((row) => [TimeRows.date(row[start]), TimeRows.date(row[end])]).filter((date) => date !== null);
+		const [low, high] = TimeRows.extent(dates);
+		const span = bin === "per-week" ? 7 : 1;
+		const first = bin === "per-week" ? utcWeek.floor(low) : TimeRows.floorDay(low);
+		const count = Math.max(1, Math.ceil(TimeRows.days(first, high) / span));
+		return Array.from({ length: count + 1 }, (_, i) => TimeRows.addDays(first, i * span));
+	}
+	loads(edges) {
+		const { data, resource, start, end, allocation, sort } = this.options;
+		const loads = [...new Set(data.map((row) => TimeRows.text(row[resource], "Other")))].map((name) => {
+			const rows = data.filter((row) => TimeRows.text(row[resource], "Other") === name);
+			const bins = edges.slice(1).map((edge, i) => {
+				const from = +edges[i], to = +edge;
+				return sum(rows, (row) => {
+					const a = TimeRows.date(row[start]), b = TimeRows.date(row[end]) ?? a;
+					if (!a || !b) return 0;
+					const overlap = Math.min(to, +b) - Math.max(from, +a);
+					return overlap > 0 ? overlap / (to - from) * (TimeRows.number(row[allocation]) ?? 1) : 0;
+				});
+			});
+			return {
+				name,
+				bins,
+				peak: max(bins) ?? 0,
+				total: sum(bins)
+			};
+		});
+		if (sort === "by-peak") loads.sort((a, b) => descending(a.peak, b.peak) || a.total - b.total);
+		if (sort === "by-total") loads.sort((a, b) => descending(a.total, b.total));
+		return loads;
+	}
+	draw(ctx) {
+		const edges = this.edges(), loads = this.loads(edges), { form } = this.options;
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.resource], "Other"));
+		const x = scaleUtc([edges[0], edges[edges.length - 1]], [0, ctx.plot.width]);
+		TimeMarks.axis(ctx, x);
+		if (form === "histogram") this.histogram(ctx, edges, loads, x);
+		else {
+			const y = scaleBand(loads.map((load) => load.name), [0, ctx.plot.height]).paddingInner(.14);
+			const names = ctx.marks("names", "text", loads, (load) => load.name).attr("text-anchor", "end").attr("font-weight", 600).text((load) => TimeRows.fit(load.name, GUTTER));
+			ctx.text(ctx.set(names, {
+				x: -8,
+				y: (load) => y(load.name) + y.bandwidth() / 2 + 4
+			}), 11, "ink");
+			if (form === "heat-strip") this.heat(ctx, edges, loads, x, y);
+			else this.profiles(ctx, edges, loads, x, y);
+		}
+	}
+	heat(ctx, edges, loads, x, y) {
+		const { capacity, limit } = this.options;
+		const peak = Math.max(capacity, ...loads.map((load) => load.peak), 1e-9);
+		const cells = loads.flatMap((load) => load.bins.map((value, i) => ({
+			load,
+			value,
+			i,
+			key: `${load.name}/${i}`,
+			x: x(edges[i]),
+			w: x(edges[i + 1]) - x(edges[i])
+		}))).filter((d) => d.value > 0);
+		const strips = ctx.marks("strips", "rect", loads, (load) => load.name).attr("fill", ctx.theme.grid).attr("fill-opacity", .5).attr("rx", 2);
+		ctx.set(strips, {
+			x: 0,
+			width: ctx.plot.width,
+			y: (load) => y(load.name),
+			height: y.bandwidth()
+		});
+		const rects = ctx.marks("cells", "rect", cells, (d) => d.key).attr("rx", (d) => Math.min(2, d.w / 3)).attr("fill", (d) => ctx.palette.sequential(.1 + .9 * (d.value / peak)));
+		const gap = (d) => d.w >= 5 ? 2 : 0;
+		ctx.set(rects, {
+			x: (d) => d.x + gap(d) / 2,
+			width: (d) => Math.max(.5, d.w - gap(d)),
+			y: (d) => y(d.load.name),
+			height: y.bandwidth()
+		}, {}, 2);
+		ctx.hover(rects, (d) => this.about(ctx, d.load.name, edges[d.i], d.value));
+		const over = limit ? cells.filter((d) => d.value > capacity + 1e-9) : [];
+		const flags = ctx.marks("flags", "path", over, (d) => d.key).attr("fill", ctx.theme.critical).attr("stroke", ctx.theme.surface).attr("stroke-width", 1).style("pointer-events", "none");
+		ctx.set(flags, { d: (d) => {
+			const r = Math.min(4, d.w / 3), top = y(d.load.name) + 2 + r;
+			return `M${d.x + d.w / 2 - r},${top}a${r},${r} 0 1 0 ${r * 2},0a${r},${r} 0 1 0 ${-r * 2},0Z`;
+		} });
+	}
+	about(ctx, name, from, value) {
+		const { capacity } = this.options;
+		return {
+			title: name,
+			color: ctx.palette.color(name),
+			rows: [
+				["From", TimeRows.long(from)],
+				["Load", +value.toFixed(2)],
+				["Status", value > capacity ? "Over capacity" : "Within capacity"]
+			]
+		};
+	}
+	histogram(ctx, edges, loads, x) {
+		const { capacity, limit } = this.options, { height, width } = ctx.plot;
+		const totals = edges.slice(1).map((_, i) => sum(loads, (load) => load.bins[i]));
+		const line = capacity * loads.length;
+		const y = scaleLinear([0, Math.max(limit ? line : 0, max(totals) ?? 1, 1e-9)], [height, 0]).nice();
+		const ticks = y.ticks(5);
+		const grid = ctx.marks("hgrid", "line", ticks, (d) => d).attr("stroke", ctx.theme.grid);
+		ctx.set(grid, {
+			x1: 0,
+			x2: width,
+			y1: (d) => y(d),
+			y2: (d) => y(d)
+		});
+		ctx.group("hgrid").lower();
+		const labels = ctx.marks("hticks", "text", ticks, (d) => d).attr("text-anchor", "end").text((d) => d.toLocaleString("en", { maximumFractionDigits: 1 }));
+		ctx.text(ctx.set(labels, {
+			x: -6,
+			y: (d) => y(d) + 4
+		}));
+		const segments = edges.slice(1).flatMap((_, i) => {
+			let base = 0;
+			return loads.map((load) => {
+				const value = load.bins[i], segment = {
+					load,
+					i,
+					value,
+					base,
+					key: `${load.name}/${i}`
+				};
+				base += value;
+				return segment;
+			});
+		}).filter((d) => d.value > 0);
+		const rects = ctx.marks("segments", "rect", segments, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.load.name)).attr("rx", 2);
+		ctx.set(rects, {
+			x: (d) => x(edges[d.i]) + 1,
+			width: (d) => Math.max(1, x(edges[d.i + 1]) - x(edges[d.i]) - 2),
+			y: (d) => y(d.base + d.value),
+			height: (d) => Math.max(.5, y(d.base) - y(d.base + d.value) - 1)
+		}, {
+			x: (d) => x(edges[d.i]) + 1,
+			width: (d) => Math.max(1, x(edges[d.i + 1]) - x(edges[d.i]) - 2),
+			y: height,
+			height: 0
+		}, 2);
+		ctx.hover(rects, (d) => this.about(ctx, d.load.name, edges[d.i], d.value));
+		const rule = ctx.marks("capacity", "line", limit ? [line] : []).attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-dasharray", "5 4");
+		ctx.set(rule, {
+			x1: 0,
+			x2: width,
+			y1: (d) => y(d),
+			y2: (d) => y(d)
+		});
+	}
+	profiles(ctx, edges, loads, x, y) {
+		const { capacity, limit } = this.options;
+		const peak = Math.max(capacity, ...loads.map((load) => load.peak), 1e-9);
+		const band = y.bandwidth(), height = (value) => value / peak * (band - 2);
+		const step = (load, cap, base) => {
+			const floor = y(load.name) + band;
+			const parts = load.bins.map((value, i) => {
+				const level = Math.max(0, Math.min(value, cap) - base);
+				return `H${x(edges[i])}V${floor - height(base) - height(level)}H${x(edges[i + 1])}`;
+			}).join("");
+			return `M${x(edges[0])},${floor - height(base)}${parts}V${floor - height(base)}Z`;
+		};
+		const floors = ctx.marks("floors", "line", loads, (load) => load.name).attr("stroke", ctx.theme.axis);
+		ctx.set(floors, {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (load) => y(load.name) + band,
+			y2: (load) => y(load.name) + band
+		});
+		const fills = ctx.marks("within", "path", loads, (load) => load.name).attr("fill", (load) => ctx.palette.color(load.name));
+		ctx.set(fills, { d: (load) => step(load, limit ? capacity : Infinity, 0) });
+		ctx.hover(fills, (load) => ({
+			title: load.name,
+			color: ctx.palette.color(load.name),
+			rows: [["Peak", +load.peak.toFixed(2)], ["Status", load.peak > capacity ? "Over capacity" : "Within capacity"]]
+		}));
+		const over = limit ? loads.filter((load) => load.peak > capacity) : [];
+		const excess = ctx.marks("excess", "path", over, (load) => load.name).attr("fill", ctx.theme.critical);
+		ctx.set(excess, { d: (load) => step(load, Infinity, capacity) });
+		const rules = ctx.marks("capacity", "line", limit ? loads : [], (load) => load.name).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "3 3");
+		ctx.set(rules, {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (load) => y(load.name) + band - height(capacity),
+			y2: (load) => y(load.name) + band - height(capacity)
+		});
+	}
+	legendItems() {
+		const { form, limit } = this.options;
+		if (form === "histogram") return [...this.palette.items(), ...limit ? [{
+			key: "Team capacity",
+			color: this.theme.ink
+		}] : []];
+		if (!limit) return [];
+		return [form === "heat-strip" ? {
+			key: "Load",
+			color: this.palette.sequential(.6)
+		} : {
+			key: "Capacity",
+			color: this.theme.ink
+		}, {
+			key: "Over capacity",
+			color: this.theme.critical
+		}];
+	}
+};
+export { ResourceAllocationChart, ResourceBin, ResourceForm, ResourceSort };

package/dist/charts/timeline/RoadmapChart.js

@@ -0,0 +1,198 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { groups, scaleUtc, sum, utcMonth } from "d3";
+// src/charts/timeline/RoadmapChart.ts
+var RoadmapSnap = /* @__PURE__ */ function(RoadmapSnap) {
+	RoadmapSnap["Continuous"] = "continuous";
+	RoadmapSnap["Month"] = "snap-month";
+	RoadmapSnap["Quarter"] = "snap-quarter";
+	return RoadmapSnap;
+}({});
+var RoadmapMark = /* @__PURE__ */ function(RoadmapMark) {
+	RoadmapMark["Pill"] = "pill";
+	RoadmapMark["Chevron"] = "chevron";
+	RoadmapMark["Block"] = "block";
+	return RoadmapMark;
+}({});
+var RoadmapGrouping = /* @__PURE__ */ function(RoadmapGrouping) {
+	RoadmapGrouping["Themes"] = "themes";
+	RoadmapGrouping["Flat"] = "flat";
+	return RoadmapGrouping;
+}({});
+var RoadmapLabel = /* @__PURE__ */ function(RoadmapLabel) {
+	RoadmapLabel["Inside"] = "label-inside";
+	RoadmapLabel["Above"] = "label-above";
+	return RoadmapLabel;
+}({});
+var GUTTER = 70;
+var MONTHS = 3;
+/** Communicate direction: initiatives by theme and period, deliberately coarser than a schedule. */
+var RoadmapChart = class extends Chart2D {
+	static meta = {
+		id: "roadmap",
+		name: "Roadmap",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows initiatives across themes and calendar periods, with labels on the marks for sharing plans with stakeholders.",
+		tags: [
+			"product",
+			"plan",
+			"quarters",
+			"initiatives"
+		],
+		sample: (seed) => SampleData.tasks(seed, 12).map((row, i) => {
+			const start = TimeRows.addDays(row.start, i * 9);
+			return {
+				...row,
+				task: `Initiative ${i + 1}`,
+				start,
+				end: TimeRows.addDays(start, 35 + +row.progress * 60)
+			};
+		}),
+		variants: {
+			snap: [
+				"snap-month",
+				"snap-quarter",
+				"continuous"
+			],
+			mark: Object.values(RoadmapMark),
+			grouping: Object.values(RoadmapGrouping),
+			labelStyle: Object.values(RoadmapLabel)
+		}
+	};
+	defaults() {
+		return {
+			initiative: "task",
+			start: "start",
+			end: "end",
+			theme_: "group",
+			snap: "snap-month",
+			mark: "pill",
+			grouping: "themes",
+			labelStyle: "label-inside"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 26,
+			bottom: 26,
+			left: this.options.grouping === "themes" ? 78 : 16
+		};
+	}
+	snapped(date, up) {
+		const { snap } = this.options;
+		if (snap === "continuous") return date;
+		const span = snap === "snap-quarter" ? MONTHS : 1;
+		const floor = new Date(Date.UTC(date.getUTCFullYear(), Math.floor(date.getUTCMonth() / span) * span, 1));
+		if (!up || +floor === +date) return floor;
+		return utcMonth.offset(floor, span);
+	}
+	spans() {
+		const { data, initiative, start, end, theme_ } = this.options;
+		return TimeRows.spans(data, {
+			label: initiative,
+			start,
+			end,
+			group: theme_
+		}).map((span) => {
+			const from = this.snapped(span.start, false), to = this.snapped(span.end, true);
+			return {
+				...span,
+				start: from,
+				end: +to > +from ? to : TimeRows.addDays(from, 7)
+			};
+		});
+	}
+	lanes(height, spans) {
+		const lanes = (this.options.grouping === "themes" ? groups(spans, (span) => span.group) : [["", spans]]).map(([name, members]) => {
+			const slots = TimeRows.pack(members, TimeRows.DAY * 3);
+			return {
+				name,
+				spans: members,
+				depth: Math.max(0, ...slots.values()) + 1,
+				offset: 0,
+				size: 0,
+				slots
+			};
+		});
+		const free = height - 3 * Math.max(0, lanes.length - 1), rows = sum(lanes, (lane) => lane.depth);
+		let offset = 0;
+		for (const lane of lanes) {
+			lane.size = free * lane.depth / Math.max(1, rows);
+			lane.offset = offset;
+			offset += lane.size + 3;
+		}
+		return lanes;
+	}
+	draw(ctx) {
+		const { width, height } = ctx.plot;
+		const { mark, labelStyle, grouping } = this.options;
+		const spans = this.spans(), grouped = grouping === "themes";
+		for (const span of spans) ctx.palette.color(span.group);
+		const scale = scaleUtc(TimeRows.extent(spans.flatMap((span) => [span.start, span.end])), [0, width]);
+		const lanes = this.lanes(height, spans);
+		const floors = ctx.marks("lanes", "rect", grouped ? lanes : [], (lane) => lane.name).attr("fill", ctx.theme.grid).attr("fill-opacity", .45).attr("rx", 4);
+		ctx.set(floors, {
+			x: 0,
+			width,
+			y: (lane) => lane.offset,
+			height: (lane) => lane.size
+		});
+		TimeMarks.axis(ctx, scale);
+		ctx.group("lanes").lower();
+		const names = ctx.marks("lane-names", "text", grouped ? lanes : [], (lane) => lane.name).attr("text-anchor", "end").attr("font-weight", 600).text((lane) => TimeRows.fit(lane.name, GUTTER));
+		ctx.text(ctx.set(names, {
+			x: -8,
+			y: (lane) => lane.offset + lane.size / 2 + 4
+		}), 11, "ink");
+		const above = labelStyle === "label-above";
+		const items = lanes.flatMap((lane) => lane.spans.map((span) => {
+			const slot = (lane.size - 6) / lane.depth, top = lane.offset + 3 + slot * lane.slots.get(span);
+			const showAbove = above && slot >= 20;
+			const thick = Math.max(4, Math.min(24, (showAbove ? slot - 13 : slot) - 2));
+			const from = scale(span.start), to = scale(span.end);
+			return {
+				span,
+				x: from,
+				w: Math.max(4, to - from - 2),
+				y: top + (showAbove ? 12 : Math.max(0, (slot - thick) / 2)),
+				thick,
+				room: showAbove,
+				top,
+				key: `${span.label}/${span.index}`
+			};
+		}));
+		const outline = (d, w) => {
+			if (mark === "chevron") return TimeMarks.chevron(d.x, d.y, w, d.thick);
+			return TimeMarks.bar(d.x, d.y, w, d.thick, mark === "pill" ? d.thick / 2 : 3);
+		};
+		const bars = ctx.marks("initiatives", "path", items, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.span.group));
+		ctx.set(bars, { d: (d) => outline(d, d.w) }, { d: (d) => outline(d, 0) }, 24);
+		ctx.hover(bars, ({ span }) => ({
+			title: span.label,
+			color: ctx.palette.color(span.group),
+			rows: [
+				["Theme", span.group],
+				["From", TimeRows.short(span.start)],
+				["To", TimeRows.short(span.end)]
+			]
+		}));
+		const pad = mark === "pill" ? 8 : 5;
+		const inside = (d) => !(above && d.room) && d.thick >= 11;
+		const text = (d) => inside(d) ? TimeRows.fit(d.span.label, d.w - pad * 2 - (mark === "chevron" ? d.thick / 2 : 0), 10.5) : TimeRows.fit(d.span.label, Math.min(d.w + 40, width - d.x));
+		const shown = items.filter((d) => (above && d.room || inside(d)) && text(d));
+		const labels = ctx.marks("labels", "text", shown, (d) => d.key).style("pointer-events", "none").text(text);
+		ctx.text(labels, 10.5, "ink");
+		labels.attr("fill", (d) => inside(d) ? ctx.palette.inkOn(ctx.palette.color(d.span.group)) : ctx.theme.ink);
+		ctx.set(labels, {
+			x: (d) => inside(d) ? d.x + pad : d.x + 1,
+			y: (d) => inside(d) ? d.y + d.thick / 2 + 3.5 : d.y - 3
+		});
+	}
+};
+export { RoadmapChart, RoadmapGrouping, RoadmapLabel, RoadmapMark, RoadmapSnap };

package/dist/charts/timeline/SwimlaneChart.js

@@ -0,0 +1,212 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { groups, scaleUtc, sum } from "d3";
+// src/charts/timeline/SwimlaneChart.ts
+var SwimlaneOrder = /* @__PURE__ */ function(SwimlaneOrder) {
+	SwimlaneOrder["FirstSeen"] = "first-seen";
+	SwimlaneOrder["Workload"] = "by-workload";
+	SwimlaneOrder["Latest"] = "by-latest";
+	return SwimlaneOrder;
+}({});
+var SwimlaneSizing = /* @__PURE__ */ function(SwimlaneSizing) {
+	SwimlaneSizing["Fit"] = "fit";
+	SwimlaneSizing["Equal"] = "equal";
+	return SwimlaneSizing;
+}({});
+var SwimlaneMark = /* @__PURE__ */ function(SwimlaneMark) {
+	SwimlaneMark["Bar"] = "bar";
+	SwimlaneMark["Dumbbell"] = "dumbbell";
+	SwimlaneMark["Line"] = "line";
+	return SwimlaneMark;
+}({});
+var SwimlaneOverlap = /* @__PURE__ */ function(SwimlaneOverlap) {
+	SwimlaneOverlap["Pack"] = "pack";
+	SwimlaneOverlap["Flat"] = "flat";
+	return SwimlaneOverlap;
+}({});
+var GUTTER = 76;
+var LANE_GAP = 2;
+/** Separate parallel streams of work into lanes so handoffs and concurrency stay readable. */
+var SwimlaneChart = class extends Chart2D {
+	static meta = {
+		id: "swimlane",
+		name: "Swimlane chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Splits spans of time into one lane per owner or stream, packing overlaps into sub-rows inside each lane.",
+		tags: [
+			"lanes",
+			"parallel",
+			"owners",
+			"schedule"
+		],
+		sample: (seed) => SampleData.tasks(seed, 16).map((row, i) => ({
+			...row,
+			group: i % 5 === 0 ? "Alpha" : row.group
+		})),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			order: Object.values(SwimlaneOrder),
+			sizing: Object.values(SwimlaneSizing),
+			mark: Object.values(SwimlaneMark),
+			overlap: Object.values(SwimlaneOverlap)
+		},
+		valid: ({ sizing, overlap }) => overlap === "pack" || sizing === "fit"
+	};
+	defaults() {
+		return {
+			task: "task",
+			start: "start",
+			end: "end",
+			lane: "group",
+			orientation: Orientation.Horizontal,
+			order: "first-seen",
+			sizing: "fit",
+			mark: "bar",
+			overlap: "pack"
+		};
+	}
+	get horizontal() {
+		return this.options.orientation === Orientation.Horizontal;
+	}
+	plotMargin() {
+		return this.horizontal ? {
+			top: 8,
+			right: 26,
+			bottom: 26,
+			left: 84
+		} : {
+			top: 28,
+			right: 12,
+			bottom: 10,
+			left: 58
+		};
+	}
+	lanes(cross) {
+		const { data, task, start, end, lane, order, sizing, overlap } = this.options;
+		const spans = TimeRows.spans(data, {
+			label: task,
+			start,
+			end,
+			group: lane
+		});
+		const lanes = groups(spans, (span) => span.group).map(([name, members]) => {
+			const slots = overlap === "pack" ? TimeRows.pack(members) : new Map(members.map((span) => [span, 0]));
+			return {
+				name,
+				spans: members,
+				depth: Math.max(...slots.values()) + 1,
+				offset: 0,
+				size: 0,
+				slots
+			};
+		});
+		const load = (item) => sum(item.spans, (span) => +span.end - +span.start);
+		const last = (item) => Math.max(...item.spans.map((span) => +span.end));
+		if (order === "by-workload") lanes.sort((a, b) => load(b) - load(a));
+		if (order === "by-latest") lanes.sort((a, b) => last(a) - last(b));
+		const free = cross - LANE_GAP * Math.max(0, lanes.length - 1), rows = sum(lanes, (item) => item.depth);
+		let offset = 0;
+		for (const item of lanes) {
+			item.size = sizing === "fit" ? free * item.depth / Math.max(1, rows) : free / lanes.length;
+			item.offset = offset;
+			offset += item.size + LANE_GAP;
+		}
+		return lanes;
+	}
+	draw(ctx) {
+		const { mark } = this.options, { width, height } = ctx.plot, horizontal = this.horizontal;
+		const along = horizontal ? width : height, cross = horizontal ? height : width;
+		const lanes = this.lanes(cross);
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.lane], "Other"));
+		const scale = scaleUtc(TimeRows.extent(lanes.flatMap((lane) => lane.spans.flatMap((span) => [span.start, span.end]))), [0, along]).nice();
+		const floors = ctx.marks("lanes", "rect", lanes, (lane) => lane.name).attr("fill", ctx.theme.grid).attr("fill-opacity", .45).attr("rx", 4);
+		ctx.set(floors, horizontal ? {
+			x: 0,
+			width,
+			y: (lane) => lane.offset,
+			height: (lane) => lane.size
+		} : {
+			y: 0,
+			height,
+			x: (lane) => lane.offset,
+			width: (lane) => lane.size
+		});
+		TimeMarks.axis(ctx, scale, horizontal ? "bottom" : "left");
+		ctx.group("lanes").lower();
+		const names = ctx.marks("lane-names", "text", lanes, (lane) => lane.name).attr("font-weight", 600).attr("text-anchor", horizontal ? "end" : "middle").text((lane) => TimeRows.fit(lane.name, horizontal ? GUTTER : lane.size - 4));
+		ctx.text(ctx.set(names, horizontal ? {
+			x: -8,
+			y: (lane) => lane.offset + lane.size / 2 + 4
+		} : {
+			x: (lane) => lane.offset + lane.size / 2,
+			y: -8
+		}), 11, "ink");
+		const items = lanes.flatMap((lane) => lane.spans.map((span) => {
+			const inset = 4, slot = (lane.size - 8) / lane.depth;
+			return {
+				lane,
+				span,
+				thick: Math.max(3, Math.min(mark === "bar" ? 20 : 8, slot - 2)),
+				mid: lane.offset + inset + slot * (lane.slots.get(span) + .5),
+				from: scale(span.start),
+				to: Math.max(scale(span.end), scale(span.start) + 3),
+				key: `${span.label}/${span.index}`
+			};
+		}));
+		const path = (d, to) => {
+			if (mark !== "bar") return horizontal ? `M${d.from},${d.mid}H${to}` : `M${d.mid},${d.from}V${to}`;
+			return horizontal ? TimeMarks.bar(d.from, d.mid - d.thick / 2, to - d.from, d.thick) : TimeMarks.bar(d.mid - d.thick / 2, d.from, d.thick, to - d.from);
+		};
+		const flat = this.options.overlap === "flat";
+		const marks = ctx.marks("spans", "path", items, (d) => d.key).attr("fill", mark === "bar" ? (d) => ctx.palette.color(d.span.group) : "none").attr("fill-opacity", flat ? .6 : 1).attr("stroke", mark === "bar" ? "none" : (d) => ctx.palette.color(d.span.group)).attr("stroke-width", 2);
+		ctx.set(marks, { d: (d) => path(d, d.to) }, { d: (d) => path(d, d.from) }, 14);
+		ctx.hover(marks, ({ span }) => ({
+			title: span.label,
+			color: ctx.palette.color(span.group),
+			rows: [
+				["Lane", span.group],
+				["Start", TimeRows.long(span.start)],
+				["End", TimeRows.long(span.end)]
+			]
+		}));
+		const ends = mark === "bar" ? [] : items.flatMap((d) => [{
+			d,
+			at: d.from,
+			id: `${d.key}<`
+		}, {
+			d,
+			at: d.to,
+			id: `${d.key}>`
+		}]);
+		const caps = ctx.marks("caps", "path", ends, (end) => end.id).attr("fill", mark === "dumbbell" ? (end) => ctx.palette.color(end.d.span.group) : "none").attr("stroke", mark === "dumbbell" ? ctx.theme.surface : (end) => ctx.palette.color(end.d.span.group)).attr("stroke-width", 2);
+		ctx.set(caps, { d: ({ d, at }) => {
+			const [cx, cy] = horizontal ? [at, d.mid] : [d.mid, at], r = 4.5;
+			if (mark === "dumbbell") return `M${cx - r},${cy}a${r},${r} 0 1 0 ${r * 2},0a${r},${r} 0 1 0 -9,0Z`;
+			return horizontal ? `M${cx},${cy - 4}V${cy + 4}` : `M${cx - 4},${cy}H${cx + 4}`;
+		} });
+		const reached = /* @__PURE__ */ new Map();
+		const labels = mark === "bar" ? items.filter((d) => {
+			const need = TimeRows.width(d.span.label) + 10;
+			if (d.thick < 14 || need >= (horizontal ? d.to - d.from : d.thick)) return false;
+			if (!flat) return true;
+			const lane = d.lane.name, end = horizontal ? d.from + need : d.mid + need;
+			if ((horizontal ? d.from : d.mid) < (reached.get(lane) ?? -Infinity)) return false;
+			reached.set(lane, end);
+			return true;
+		}) : [];
+		const text = ctx.marks("span-labels", "text", labels, (d) => d.key).style("pointer-events", "none").text((d) => d.span.label);
+		ctx.set(ctx.text(text, 11, "ink").attr("fill", (d) => flat ? ctx.theme.ink : ctx.palette.inkOn(ctx.palette.color(d.span.group))), horizontal ? {
+			x: (d) => d.from + 6,
+			y: (d) => d.mid + 4
+		} : {
+			x: (d) => d.mid + 4,
+			y: (d) => d.from + 12
+		});
+	}
+};
+export { SwimlaneChart, SwimlaneMark, SwimlaneOrder, SwimlaneOverlap, SwimlaneSizing };