@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/timeline/PeriodicHeatmap.js

@@ -0,0 +1,218 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { arc, max, mean, min, range, rollup, utcFormat } from "d3";
+// src/charts/timeline/PeriodicHeatmap.ts
+var PeriodicCycle = /* @__PURE__ */ function(PeriodicCycle) {
+	PeriodicCycle["HourByWeekday"] = "hour-by-weekday";
+	PeriodicCycle["HourByMonth"] = "hour-by-month";
+	PeriodicCycle["WeekdayByMonth"] = "weekday-by-month";
+	PeriodicCycle["DayByMonth"] = "day-by-month";
+	return PeriodicCycle;
+}({});
+var PeriodicForm = /* @__PURE__ */ function(PeriodicForm) {
+	PeriodicForm["Grid"] = "grid";
+	PeriodicForm["Radial"] = "radial";
+	return PeriodicForm;
+}({});
+var PeriodicCell = /* @__PURE__ */ function(PeriodicCell) {
+	PeriodicCell["Fill"] = "fill";
+	PeriodicCell["Bubble"] = "bubble";
+	return PeriodicCell;
+}({});
+var PeriodicScaling = /* @__PURE__ */ function(PeriodicScaling) {
+	PeriodicScaling["Global"] = "global";
+	PeriodicScaling["PerRow"] = "per-row";
+	return PeriodicScaling;
+}({});
+var WEEKDAYS = [
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat",
+	"Sun"
+];
+var MONTH = utcFormat("%b");
+var weekday = (date) => (date.getUTCDay() + 6) % 7;
+var HOURS = {
+	labels: range(24).map((h) => `${h}`),
+	of: (date) => date.getUTCHours()
+};
+var DAYS = {
+	labels: WEEKDAYS,
+	of: weekday
+};
+var DATES = {
+	labels: range(1, 32).map(String),
+	of: (date) => date.getUTCDate() - 1
+};
+var MONTHS = {
+	labels: range(12).map((m) => MONTH(new Date(Date.UTC(2026, m, 1)))),
+	of: (date) => date.getUTCMonth()
+};
+/** Fold time onto its cycles to answer when something usually happens: which hour, which weekday, which month. */
+var PeriodicHeatmap = class extends Chart2D {
+	static meta = {
+		id: "periodic-heatmap",
+		name: "Periodic heatmap",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Aggregates a timestamped measure over two nested cycles, such as hour by weekday, as a grid or polar clock.",
+		tags: [
+			"punchcard",
+			"seasonality",
+			"clock",
+			"hour of day"
+		],
+		sample: (seed) => TimeSamples.hourly(seed),
+		variants: {
+			cycle: Object.values(PeriodicCycle),
+			form: Object.values(PeriodicForm),
+			cell: Object.values(PeriodicCell),
+			scaling: Object.values(PeriodicScaling)
+		},
+		valid: ({ cell, scaling }) => cell === "bubble" || scaling === "global"
+	};
+	defaults() {
+		return {
+			date: "date",
+			value: "value",
+			cycle: "hour-by-weekday",
+			form: "grid",
+			cell: "fill",
+			scaling: "global",
+			legend: LegendPosition.None
+		};
+	}
+	plotMargin() {
+		return this.options.form === "grid" ? {
+			top: 8,
+			right: 14,
+			bottom: 30,
+			left: 34
+		} : {
+			top: 8,
+			right: 14,
+			bottom: 22,
+			left: 14
+		};
+	}
+	axes() {
+		switch (this.options.cycle) {
+			case "hour-by-month": return [HOURS, MONTHS];
+			case "weekday-by-month": return [DAYS, MONTHS];
+			case "day-by-month": return [DATES, MONTHS];
+			default: return [HOURS, DAYS];
+		}
+	}
+	bins(columns, rows) {
+		const { data, date, value, scaling } = this.options;
+		const points = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]), amount = TimeRows.number(row[value]);
+			return when && amount !== null ? [{
+				column: columns.of(when),
+				row: rows.of(when),
+				amount
+			}] : [];
+		});
+		const nested = rollup(points, (list) => mean(list, (d) => d.amount), (d) => d.row, (d) => d.column);
+		const rowIds = rows === MONTHS ? [...nested.keys()].sort((a, b) => a - b) : range(rows.labels.length);
+		const positive = [...nested.values()].flatMap((inner) => [...inner.values()]);
+		const low = Math.min(0, min(positive) ?? 0), top = max(positive) ?? 1;
+		return {
+			bins: [...nested].flatMap(([row, inner]) => {
+				const peak = scaling === "per-row" ? max(inner.values()) ?? 1 : top;
+				return [...inner].map(([column, amount]) => ({
+					key: `${row}/${column}`,
+					column,
+					row: rowIds.indexOf(row),
+					value: amount,
+					share: Math.max(0, (amount - low) / (peak - low || 1))
+				}));
+			}),
+			rowIds
+		};
+	}
+	draw(ctx) {
+		const [columns, rows] = this.axes();
+		const { bins, rowIds } = this.bins(columns, rows);
+		const rowNames = rowIds.map((id) => rows.labels[id]);
+		const name = (d) => `${rowNames[d.row]}, ${columns.labels[d.column]}`;
+		const shape = this.options.form === "radial" ? this.radial(ctx, columns, rowNames) : this.grid(ctx, columns, rowNames);
+		this.options.cell;
+		const radial = this.options.form === "radial";
+		ctx.group("bins").attr("transform", radial ? `translate(${ctx.plot.width / 2},${ctx.plot.height / 2})` : null);
+		const marks = ctx.marks("bins", "path", bins, (d) => d.key).attr("fill", (d) => ctx.palette.sequential(.08 + d.share * .92));
+		ctx.set(marks, { d: shape }, {}, 0);
+		ctx.hover(marks, (d) => ({
+			title: name(d),
+			rows: [["Mean", +d.value.toFixed(2)]]
+		}));
+		TimeMarks.ramp(ctx, ctx.plot.width, ctx.plot.height + (this.options.form === "grid" ? 26 : 16), "Low", "High");
+	}
+	bubble(cx, cy, room, share) {
+		const r = Math.max(.6, room / 2 * Math.sqrt(share));
+		return `M${cx - r},${cy}a${r},${r} 0 1 0 ${r * 2},0a${r},${r} 0 1 0 ${-r * 2},0Z`;
+	}
+	grid(ctx, columns, rowNames) {
+		const { width, height } = ctx.plot;
+		const w = width / columns.labels.length, h = height / Math.max(1, rowNames.length);
+		const bubble = this.options.cell === "bubble";
+		const stride = Math.ceil(30 / w);
+		const heads = columns.labels.flatMap((label, i) => i % stride ? [] : [{
+			label,
+			x: i * w + w / 2
+		}]);
+		const top = ctx.marks("column-heads", "text", heads, (d) => d.label).attr("text-anchor", "middle").text((d) => d.label);
+		ctx.text(ctx.set(top, {
+			x: (d) => d.x,
+			y: height + 13,
+			transform: null
+		}), 10);
+		const rowStride = Math.ceil(13 / h);
+		const sides = rowNames.flatMap((label, i) => i % rowStride ? [] : [{
+			label,
+			y: i * h + h / 2 + 3.5
+		}]);
+		const left = ctx.marks("row-heads", "text", sides, (d) => d.label).attr("text-anchor", "end").text((d) => d.label);
+		ctx.text(ctx.set(left, {
+			x: -6,
+			y: (d) => d.y
+		}), 10);
+		return (d) => bubble ? this.bubble(d.column * w + w / 2, d.row * h + h / 2, Math.min(w, h) - 1, d.share) : TimeMarks.bar(d.column * w + 1, d.row * h + 1, Math.max(1, w - 2), Math.max(1, h - 2), 2);
+	}
+	radial(ctx, columns, rowNames) {
+		const { width, height } = ctx.plot;
+		const cx = width / 2, cy = height / 2, outer = Math.min(width, height) / 2 - 12, inner = outer * .24;
+		const ring = (outer - inner) / Math.max(1, rowNames.length), slice = 2 * Math.PI / columns.labels.length;
+		const stride = Math.max(1, Math.ceil(columns.labels.length / 8));
+		const heads = columns.labels.flatMap((label, i) => i % stride ? [] : [{
+			label,
+			angle: (i + .5) * slice - Math.PI / 2
+		}]);
+		const side = (angle) => {
+			const c = Math.cos(angle);
+			return c > .3 ? "start" : c < -.3 ? "end" : "middle";
+		};
+		const spokes = ctx.marks("column-heads", "text", heads, (d) => d.label).attr("text-anchor", (d) => side(d.angle)).text((d) => d.label);
+		ctx.text(ctx.set(spokes, {
+			x: (d) => cx + Math.cos(d.angle) * (outer + 5),
+			y: (d) => cy + Math.sin(d.angle) * (outer + 7) + 3.5,
+			transform: null
+		}), 10);
+		ctx.group("row-heads").selectAll("*").remove();
+		const bubble = this.options.cell === "bubble";
+		const shape = arc().innerRadius((d) => inner + d.row * ring + 1).outerRadius((d) => inner + (d.row + 1) * ring - 1).startAngle((d) => d.column * slice + .012).endAngle((d) => (d.column + 1) * slice - .012).cornerRadius(1.5);
+		return (d) => {
+			if (!bubble) return shape(d) ?? "";
+			const angle = (d.column + .5) * slice - Math.PI / 2, r = inner + (d.row + .5) * ring;
+			return this.bubble(Math.cos(angle) * r, Math.sin(angle) * r, Math.min(ring, r * slice) - 1, d.share);
+		};
+	}
+};
+export { PeriodicCell, PeriodicCycle, PeriodicForm, PeriodicHeatmap, PeriodicScaling };

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