@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/timeline/ScheduleBlocksChart.js

@@ -0,0 +1,119 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { scaleBand, scaleLinear, scaleUtc } from "d3";
+import { BoxGeometry, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry } from "three";
+// src/charts/timeline/ScheduleBlocksChart.ts
+var ScheduleBlockHeight = /* @__PURE__ */ function(ScheduleBlockHeight) {
+	ScheduleBlockHeight["Flat"] = "flat";
+	ScheduleBlockHeight["Effort"] = "by-effort";
+	ScheduleBlockHeight["Progress"] = "by-progress";
+	return ScheduleBlockHeight;
+}({});
+var ScheduleBlockOrder = /* @__PURE__ */ function(ScheduleBlockOrder) {
+	ScheduleBlockOrder["Start"] = "by-start";
+	ScheduleBlockOrder["Group"] = "by-group";
+	return ScheduleBlockOrder;
+}({});
+var ScheduleBlockBase = /* @__PURE__ */ function(ScheduleBlockBase) {
+	ScheduleBlockBase["Floor"] = "on-floor";
+	ScheduleBlockBase["Stairs"] = "stairs";
+	return ScheduleBlockBase;
+}({});
+var FLOOR = -.7;
+/** A schedule as a landscape: for presenting phasing and effort together, not for reading exact dates. */
+var ScheduleBlocksChart = class extends Chart3D {
+	static meta = {
+		id: "schedule-blocks",
+		name: "Schedule blocks",
+		family: ChartFamily.Project,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Extrudes schedule bars into blocks, with height carrying effort or completion on top of time and row.",
+		tags: [
+			"schedule",
+			"waterfall",
+			"phasing"
+		],
+		sample: (seed) => TimeSamples.plan(seed, 12),
+		variants: {
+			blockHeight: Object.values(ScheduleBlockHeight),
+			order: Object.values(ScheduleBlockOrder),
+			base: Object.values(ScheduleBlockBase)
+		}
+	};
+	defaults() {
+		return {
+			task: "task",
+			start: "start",
+			end: "end",
+			group: "group",
+			progress: "progress",
+			blockHeight: "flat",
+			order: "by-start",
+			base: "on-floor",
+			distance: 4.6,
+			elevation: 30
+		};
+	}
+	lift(span) {
+		const { blockHeight, progress } = this.options;
+		if (blockHeight === "flat") return .12;
+		if (blockHeight === "by-effort") return .08 + .6 * Math.min(1, TimeRows.days(span.start, span.end) / 20);
+		const done = TimeRows.number(span.row[progress]) ?? 0;
+		return .08 + .6 * Math.max(0, Math.min(1, done > 1 ? done / 100 : done));
+	}
+	build(ctx) {
+		const { data, task, start, end, group, order, base } = this.options;
+		const spans = TimeRows.spans(data, {
+			label: task,
+			start,
+			end,
+			group
+		});
+		for (const span of spans) ctx.palette.color(span.group);
+		spans.sort(order === "by-group" ? (a, b) => a.group.localeCompare(b.group) || +a.start - +b.start : (a, b) => +a.start - +b.start);
+		const keys = TimeRows.unique(spans.map((span) => span.label));
+		const x = scaleUtc(TimeRows.extent(spans.flatMap((span) => [span.start, span.end])), [-1, 1]);
+		const z = scaleBand(keys, [-1, 1]).padding(.22);
+		const rise = scaleLinear([0, Math.max(1, spans.length - 1)], [.7, 0]);
+		const floor = new Mesh(new PlaneGeometry(2.05, 2.05), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = FLOOR;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		if (!spans.length) return;
+		const blocks = new InstancedMesh(new BoxGeometry(1, 1, 1), new MeshStandardMaterial({ roughness: .5 }), spans.length);
+		blocks.castShadow = blocks.receiveShadow = true;
+		const dummy = new Object3D();
+		const place = (progress) => {
+			spans.forEach((span, i) => {
+				const left = x(span.start), width = Math.max(.02, x(span.end) - left) * Math.max(.001, progress), h = this.lift(span);
+				dummy.position.set(left + width / 2, FLOOR + (base === "stairs" ? rise(i) : 0) + h / 2, z(keys[i]) + z.bandwidth() / 2);
+				dummy.scale.set(width, h, z.bandwidth());
+				dummy.updateMatrix();
+				blocks.setMatrixAt(i, dummy.matrix);
+			});
+			blocks.instanceMatrix.needsUpdate = true;
+		};
+		spans.forEach((span, i) => blocks.setColorAt(i, ctx.color(ctx.palette.color(span.group))));
+		ctx.reveal(place);
+		ctx.root.add(blocks);
+		ctx.pick(blocks, (i) => {
+			const span = spans[i];
+			return {
+				title: span.label,
+				color: ctx.palette.color(span.group),
+				rows: [["Start", TimeRows.long(span.start)], ["End", TimeRows.long(span.end)]]
+			};
+		});
+		const ticks = x.ticks(4);
+		for (const tick of ticks) ctx.label(TimeRows.short(tick), [
+			x(tick),
+			FLOOR,
+			1.18
+		], "secondary", 10);
+	}
+};
+export { ScheduleBlockBase, ScheduleBlockHeight, ScheduleBlockOrder, ScheduleBlocksChart };

package/dist/charts/timeline/SpiralTimeline.js

@@ -0,0 +1,154 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeRows } from "./TimeRows.js";
+import { max, min, utcFormat } from "d3";
+// src/charts/timeline/SpiralTimeline.ts
+var SpiralPeriod = /* @__PURE__ */ function(SpiralPeriod) {
+	SpiralPeriod["Fortnight"] = "fortnight";
+	SpiralPeriod["Month"] = "month";
+	SpiralPeriod["Quarter"] = "quarter";
+	return SpiralPeriod;
+}({});
+var SpiralMark = /* @__PURE__ */ function(SpiralMark) {
+	SpiralMark["Bar"] = "bars";
+	SpiralMark["Dot"] = "dots";
+	SpiralMark["Line"] = "line";
+	return SpiralMark;
+}({});
+var SpiralDirection = /* @__PURE__ */ function(SpiralDirection) {
+	SpiralDirection["Outward"] = "outward";
+	SpiralDirection["Inward"] = "inward";
+	return SpiralDirection;
+}({});
+var LENGTH = {
+	["fortnight"]: 14,
+	["month"]: 30.44,
+	["quarter"]: 91.31
+};
+var STAMP = utcFormat("%b %-d");
+/** Wind time into a spiral so each turn lines up with the last and a repeating cycle becomes a pattern along one spoke. */
+var SpiralTimeline = class extends RadialChart {
+	static meta = {
+		id: "spiral-timeline",
+		name: "Spiral timeline",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Winds a time series along an Archimedean spiral, with one turn per period, to expose repeating patterns.",
+		tags: [
+			"cyclical",
+			"seasonal",
+			"spiral plot"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 200, 1).map((row, i) => ({
+			date: row.date,
+			value: +(+row.value * (1 + .6 * Math.sin(i / 30.44 * 2 * Math.PI))).toFixed(1)
+		})),
+		variants: {
+			period: [
+				"month",
+				"fortnight",
+				"quarter"
+			],
+			mark: Object.values(SpiralMark),
+			direction: Object.values(SpiralDirection)
+		}
+	};
+	defaults() {
+		return {
+			date: "date",
+			value: "value",
+			period: "month",
+			mark: "bars",
+			direction: "outward",
+			legend: LegendPosition.None
+		};
+	}
+	points(radius) {
+		const { data, date, value, period, direction } = this.options;
+		const rows = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]), amount = TimeRows.number(row[value]);
+			return when && amount !== null ? [{
+				when,
+				amount
+			}] : [];
+		}).sort((a, b) => +a.when - +b.when);
+		const inner = radius * .16, days = rows.length ? TimeRows.days(rows[0].when, rows[rows.length - 1].when) || 1 : 1;
+		const turns = days / LENGTH[period], band = (radius - inner) / (turns + 1);
+		const low = min(rows, (row) => row.amount) ?? 0, high = max(rows, (row) => row.amount) ?? 1;
+		return {
+			points: rows.map(({ when, amount }) => {
+				const elapsed = TimeRows.days(rows[0].when, when);
+				const turn = (direction === "inward" ? days - elapsed : elapsed) / LENGTH[period];
+				return {
+					date: when,
+					value: amount,
+					angle: turn * 2 * Math.PI - Math.PI / 2,
+					radius: inner + band * turn,
+					share: (amount - low) / (high - low || 1)
+				};
+			}),
+			band,
+			inner
+		};
+	}
+	drawRadial(ctx, { radius }) {
+		const { mark } = this.options;
+		const { points, band } = this.points(radius - 8);
+		const polar = (angle, r) => `${Math.cos(angle) * r},${Math.sin(angle) * r}`;
+		const guide = [...points].sort((a, b) => a.angle - b.angle);
+		const coil = ctx.marks("coil", "path", guide.length > 1 ? [guide] : [], (_, i) => i).attr("fill", "none").attr("stroke", mark === "line" ? ctx.theme.grid : ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(coil, { d: (list) => `M${list.map((p) => polar(p.angle, p.radius)).join("L")}` });
+		const reach = (p) => Math.max(1, p.share * band * .9);
+		const bars = ctx.marks("bars", "path", mark === "bars" ? points : [], (p) => +p.date).attr("stroke-linecap", "round").attr("fill", "none").attr("stroke-width", Math.min(3, Math.max(1.5, radius / 40))).attr("stroke", (p) => ctx.palette.sequential(.25 + p.share * .75));
+		ctx.set(bars, { d: (p) => `M${polar(p.angle, p.radius)}L${polar(p.angle, p.radius + reach(p))}` }, { d: (p) => `M${polar(p.angle, p.radius)}L${polar(p.angle, p.radius)}` }, 2);
+		ctx.hover(bars, (p) => this.about(p));
+		const dots = ctx.marks("dots", "circle", mark === "dots" ? points : [], (p) => +p.date).attr("fill", (p) => ctx.palette.sequential(.25 + p.share * .75));
+		ctx.set(dots, {
+			cx: (p) => Math.cos(p.angle) * p.radius,
+			cy: (p) => Math.sin(p.angle) * p.radius,
+			r: (p) => Math.max(.8, Math.sqrt(p.share) * Math.min(band / 2, 5))
+		}, {
+			cx: (p) => Math.cos(p.angle) * p.radius,
+			cy: (p) => Math.sin(p.angle) * p.radius,
+			r: 0
+		}, 2);
+		ctx.hover(dots, (p) => this.about(p));
+		const trace = ctx.marks("trace", "path", mark === "line" && guide.length > 1 ? [guide] : [], (_, i) => i).attr("fill", "none").attr("stroke", ctx.palette.color("value")).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(trace, { d: (list) => `M${list.map((p) => polar(p.angle, p.radius + reach(p))).join("L")}` });
+		ctx.drawOn(trace);
+		const hits = ctx.marks("hits", "circle", mark === "line" ? points : [], (p) => +p.date).attr("fill", "transparent").attr("r", 5);
+		ctx.set(hits, {
+			cx: (p) => Math.cos(p.angle) * (p.radius + reach(p)),
+			cy: (p) => Math.sin(p.angle) * (p.radius + reach(p))
+		});
+		ctx.hover(hits, (p) => this.about(p));
+		const rim = Math.max(0, ctx.plot.width / 2 - 2), tip = guide[guide.length - 1];
+		const out = tip ? tip.radius + (mark === "line" ? reach(tip) : 0) + 8 : 0;
+		const tipX = tip ? Math.cos(tip.angle) * out : 0, tipY = tip ? Math.sin(tip.angle) * out : 0;
+		const ends = tip && guide.length > 1 ? [{
+			point: guide[0],
+			x: 0,
+			y: 4,
+			anchor: "middle"
+		}, {
+			point: tip,
+			x: Math.max(-rim, Math.min(rim, tipX)),
+			y: Math.max(-radius + 8, Math.min(radius, tipY + 4)),
+			anchor: tipX < 0 ? "end" : "start"
+		}] : [];
+		const stamps = ctx.marks("ends", "text", ends, (d) => d.anchor).attr("text-anchor", (d) => d.anchor).attr("font-weight", 600).text((d) => STAMP(d.point.date));
+		ctx.text(ctx.set(stamps, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}), 10, "ink");
+	}
+	about(point) {
+		return {
+			title: TimeRows.long(point.date),
+			rows: [["Value", point.value]]
+		};
+	}
+};
+export { SpiralDirection, SpiralMark, SpiralPeriod, SpiralTimeline };

package/dist/charts/timeline/StreamTimeline.js

@@ -0,0 +1,141 @@
+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 { area, curveBasis, curveMonotoneX, max, min, scaleLinear, scaleUtc, stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAscending, stackOrderInsideOut, stackOrderNone, utcWeek } from "d3";
+// src/charts/timeline/StreamTimeline.ts
+var StreamTimelineBin = /* @__PURE__ */ function(StreamTimelineBin) {
+	StreamTimelineBin["Day"] = "daily";
+	StreamTimelineBin["Week"] = "weekly";
+	return StreamTimelineBin;
+}({});
+var StreamTimelineOffset = /* @__PURE__ */ function(StreamTimelineOffset) {
+	StreamTimelineOffset["Wiggle"] = "wiggle";
+	StreamTimelineOffset["Silhouette"] = "silhouette";
+	StreamTimelineOffset["Expand"] = "expand";
+	return StreamTimelineOffset;
+}({});
+var StreamTimelineOrder = /* @__PURE__ */ function(StreamTimelineOrder) {
+	StreamTimelineOrder["InsideOut"] = "inside-out";
+	StreamTimelineOrder["Ascending"] = "ascending";
+	StreamTimelineOrder["Input"] = "input-order";
+	return StreamTimelineOrder;
+}({});
+var StreamTimelineCurve = /* @__PURE__ */ function(StreamTimelineCurve) {
+	StreamTimelineCurve["Basis"] = "smooth";
+	StreamTimelineCurve["Monotone"] = "monotone";
+	return StreamTimelineCurve;
+}({});
+/** Show how many categories swell and fade over a long span, trading exact reading for overall shape. */
+var StreamTimeline = class extends Chart2D {
+	static meta = {
+		id: "stream-timeline",
+		name: "Stream timeline",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Flows stacked categories around a central baseline to show how the mix of activity changes through time.",
+		tags: [
+			"streamgraph",
+			"theme river",
+			"flow"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 120, 5),
+		variants: {
+			offset: Object.values(StreamTimelineOffset),
+			order: Object.values(StreamTimelineOrder),
+			curve: Object.values(StreamTimelineCurve),
+			bin: ["weekly", "daily"],
+			labels: [true, false]
+		},
+		valid: ({ offset, order }) => offset !== "expand" || order !== "inside-out"
+	};
+	defaults() {
+		return {
+			date: "date",
+			series: "series",
+			value: "value",
+			bin: "weekly",
+			offset: "wiggle",
+			order: "inside-out",
+			curve: "smooth",
+			labels: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 26,
+			bottom: 26,
+			left: 26
+		};
+	}
+	layers() {
+		const { data, date, series, value, bin, offset, order } = this.options;
+		const rows = bin === "weekly" ? data.map((row) => {
+			const when = TimeRows.date(row[date]);
+			return {
+				...row,
+				[date]: when ? utcWeek.floor(when) : null
+			};
+		}) : data;
+		const { names, table } = TimeRows.pivot(rows, date, series, value);
+		const offsets = {
+			["wiggle"]: stackOffsetWiggle,
+			["silhouette"]: stackOffsetSilhouette,
+			["expand"]: stackOffsetExpand
+		};
+		const orders = {
+			["inside-out"]: stackOrderInsideOut,
+			["ascending"]: stackOrderAscending,
+			["input-order"]: stackOrderNone
+		};
+		return {
+			names,
+			table,
+			layers: stack().keys(names).offset(offsets[offset]).order(orders[order])(table)
+		};
+	}
+	draw(ctx) {
+		const { names, table, layers } = this.layers();
+		const { width, height } = ctx.plot;
+		names.forEach((name) => ctx.palette.color(name));
+		const safe = (value) => Number.isFinite(value) ? value : 0;
+		const low = min(layers, (layer) => min(layer, (point) => safe(point[0]))) ?? 0;
+		const high = max(layers, (layer) => max(layer, (point) => safe(point[1]))) ?? 1;
+		const x = scaleUtc(TimeRows.extent(table.map((row) => new Date(row.date))), [0, width]);
+		const y = scaleLinear([low, high === low ? low + 1 : high], [height, 0]);
+		TimeMarks.axis(ctx, x);
+		const curve = this.options.curve === "smooth" ? curveBasis : curveMonotoneX;
+		const at = (d) => x(new Date(d.data.date));
+		const shape = area().x(at).y0((d) => y(safe(d[0]))).y1((d) => y(safe(d[1]))).curve(curve);
+		const mid = area().x(at).y0((d) => y((safe(d[0]) + safe(d[1])) / 2)).y1((d) => y((safe(d[0]) + safe(d[1])) / 2)).curve(curve);
+		const paths = ctx.marks("streams", "path", layers, (layer) => layer.key).attr("fill", (layer) => ctx.palette.color(layer.key)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(paths, { d: (layer) => shape(layer) ?? "" }, { d: (layer) => mid(layer) ?? "" }, 50);
+		ctx.hover(paths, (layer) => {
+			const values = layer.map((point) => point.data[layer.key] ?? 0);
+			return {
+				title: layer.key,
+				color: ctx.palette.color(layer.key),
+				rows: [["Peak", +(max(values) ?? 0).toFixed(1)], ["Latest", +(values[values.length - 1] ?? 0).toFixed(1)]]
+			};
+		});
+		const tags = !this.options.labels ? [] : layers.flatMap((layer) => {
+			const point = layer[layer.reduce((best, point, i) => point[1] - point[0] > layer[best][1] - layer[best][0] ? i : best, 0)];
+			if (!point) return [];
+			const thick = y(safe(point[0])) - y(safe(point[1])), place = x(new Date(point.data.date)), half = TimeRows.width(layer.key) / 2;
+			return thick >= 14 ? [{
+				name: layer.key,
+				x: Math.max(half, Math.min(width - half, place)),
+				y: (y(safe(point[0])) + y(safe(point[1]))) / 2 + 4
+			}] : [];
+		});
+		const labels = ctx.marks("names", "text", tags, (d) => d.name).attr("text-anchor", "middle").style("pointer-events", "none").text((d) => d.name);
+		ctx.set(ctx.text(labels, 11, "ink").attr("fill", (d) => ctx.palette.inkOn(ctx.palette.color(d.name))), {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { StreamTimeline, StreamTimelineBin, StreamTimelineCurve, StreamTimelineOffset, StreamTimelineOrder };

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 };

package/dist/charts/timeline/TimeBandChart.js

@@ -0,0 +1,23 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { scaleBand, scaleUtc } from "d3";
+// src/charts/timeline/TimeBandChart.ts
+/** Time across, one labelled row per entity. Base of the Gantt family. */
+var TimeBandChart = class extends CartesianChart {
+	bandPadding() {
+		return .18;
+	}
+	scales(ctx) {
+		return {
+			x: scaleUtc(this.range(), [0, ctx.plot.width]).nice(),
+			y: scaleBand(this.bands(), [0, ctx.plot.height]).paddingInner(this.bandPadding()).paddingOuter(this.bandPadding() / 2)
+		};
+	}
+	tickFormat(scale) {
+		return typeof scale.domain()[0] === "string" ? TimeMarks.bandFormat(scale) : super.tickFormat(scale);
+	}
+	timeGrid(ctx, x) {
+		TimeMarks.grid(ctx, x);
+	}
+};
+export { TimeBandChart };