@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/timeline/BurnChart.js

@@ -0,0 +1,138 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { CurveKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { TimeRows } from "./TimeRows.js";
+import { area, deviation, line, mean, scaleLinear, scaleUtc } from "d3";
+// src/charts/timeline/BurnChart.ts
+var BurnMark = /* @__PURE__ */ function(BurnMark) {
+	BurnMark["Line"] = "line";
+	BurnMark["Step"] = "step";
+	BurnMark["Area"] = "area";
+	BurnMark["Column"] = "column";
+	return BurnMark;
+}({});
+var BurnForecast = /* @__PURE__ */ function(BurnForecast) {
+	BurnForecast["Regression"] = "regression";
+	BurnForecast["Recent"] = "recent-pace";
+	BurnForecast["Cone"] = "cone";
+	BurnForecast["None"] = "no-forecast";
+	return BurnForecast;
+}({});
+var HORIZON = 1.6;
+/** Progress toward a goal over a calendar, with a projection of when the goal is met. */
+var BurnChart = class extends CartesianChart {
+	calendar() {
+		return this.options.data.flatMap((row) => TimeRows.date(row[this.options.date]) ?? []).sort((a, b) => +a - +b);
+	}
+	projection() {
+		const { forecast } = this.options;
+		const points = this.actual();
+		if (forecast === "no-forecast" || points.length < 2) return null;
+		const last = points[points.length - 1], first = points[0];
+		const days = points.slice(-8);
+		const steps = days.slice(1).map((point, i) => (point.value - days[i].value) / Math.max(1e-9, TimeRows.days(days[i].date, point.date)));
+		const recent = mean(steps) ?? 0;
+		const fit = TimeRows.trend(points.map((point) => [TimeRows.days(first.date, point.date), point.value]))?.slope ?? 0;
+		const spread = (deviation(steps) ?? Math.abs(recent)) / Math.sqrt(steps.length);
+		const paces = forecast === "regression" ? [fit] : forecast === "recent-pace" ? [recent] : [recent + spread, recent - spread];
+		const distance = this.goal() - last.value;
+		const calendar = this.calendar();
+		const horizon = TimeRows.addDays(first.date, TimeRows.days(first.date, calendar[calendar.length - 1] ?? last.date) * HORIZON);
+		const reachAt = (pace) => pace * distance > 0 ? TimeRows.addDays(last.date, distance / pace) : horizon;
+		const arrivals = paces.map(reachAt).map((date) => date > horizon ? horizon : date);
+		const end = new Date(Math.max(...arrivals.map(Number)));
+		const central = reachAt(paces.length > 1 ? recent : paces[0]);
+		return {
+			from: last,
+			paces,
+			finish: central <= horizon ? central : null,
+			end
+		};
+	}
+	scales(ctx) {
+		const plan = this.projection();
+		const dates = [...this.calendar(), ...plan ? [plan.end] : []];
+		const inset = this.options.mark === "column" ? ctx.plot.width / Math.max(1, this.calendar().length) / 2 : 0;
+		return {
+			x: scaleUtc(TimeRows.extent(dates), [inset, ctx.plot.width - inset]),
+			y: scaleLinear([0, Math.max(1, this.top())], [ctx.plot.height, 0]).nice()
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { x, y } = axes, { mark } = this.options;
+		const points = this.actual(), color = ctx.palette.color(this.name());
+		this.context(ctx, axes);
+		this.drawForecast(ctx, axes, color);
+		const curve = Scales.curve(mark === "step" ? CurveKind.StepAfter : CurveKind.Linear);
+		const trace = line((d) => x(d.date), (d) => y(d.value)).curve(curve);
+		const wash = area((d) => x(d.date), y(0), (d) => y(d.value)).curve(curve);
+		const fills = ctx.marks("wash", "path", mark === "area" ? [points] : [], (_, i) => i).attr("fill", color).attr("fill-opacity", .22);
+		ctx.set(fills, { d: (d) => wash(d) ?? "" });
+		const stride = Math.max(2, median$1(points, x) - 2);
+		const columns = ctx.marks("columns", "path", mark === "column" ? points : [], (d) => +d.date).attr("fill", color);
+		const column = (d, height) => {
+			const left = x(d.date) - stride / 2, r = Math.min(2, stride / 2);
+			return `M${left},${y(0)}V${y(0) - height + r}Q${left},${y(0) - height} ${left + r},${y(0) - height}H${left + stride - r}Q${left + stride},${y(0) - height} ${left + stride},${y(0) - height + r}V${y(0)}Z`;
+		};
+		ctx.set(columns, { d: (d) => column(d, y(0) - y(d.value)) }, { d: (d) => column(d, 0) }, 8);
+		ctx.hover(columns, (d) => this.tipFor(d, color));
+		const lines = ctx.marks("actual", "path", mark === "column" ? [] : [points], (_, i) => i).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: (d) => trace(d) ?? "" });
+		ctx.drawOn(lines);
+		const hits = ctx.marks("hits", "circle", mark === "column" ? [] : points, (d) => +d.date).attr("fill", "transparent").attr("r", 7);
+		ctx.set(hits, {
+			cx: (d) => x(d.date),
+			cy: (d) => y(d.value)
+		});
+		ctx.hover(hits, (d) => this.tipFor(d, color));
+		const now = points[points.length - 1];
+		const head = ctx.marks("head", "circle", now && mark !== "column" ? [now] : [], (d) => +d.date).attr("r", 4.5).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(head, {
+			cx: (d) => x(d.date),
+			cy: (d) => y(d.value)
+		});
+	}
+	tipFor(point, color) {
+		return {
+			title: TimeRows.long(point.date),
+			color,
+			rows: [[this.name(), +point.value.toFixed(1)]]
+		};
+	}
+	drawForecast(ctx, { x, y }, color) {
+		const plan = this.projection();
+		const goal = this.goal();
+		const reach = (pace) => {
+			if (!plan) return null;
+			const days = TimeRows.days(plan.from.date, plan.end);
+			const stop = (plan.from.value + pace * days - goal) * (plan.from.value - goal) < 0 ? (goal - plan.from.value) / pace : days;
+			return {
+				x: x(TimeRows.addDays(plan.from.date, stop)),
+				y: y(plan.from.value + pace * stop)
+			};
+		};
+		const ends = plan?.paces.flatMap((pace) => reach(pace) ?? []) ?? [];
+		const start = plan ? {
+			x: x(plan.from.date),
+			y: y(plan.from.value)
+		} : {
+			x: 0,
+			y: 0
+		};
+		const wedge = ctx.marks("cone", "path", ends.length > 1 ? [ends] : [], (_, i) => i).attr("fill", color).attr("fill-opacity", .16);
+		ctx.set(wedge, { d: ([a, b]) => `M${start.x},${start.y}L${a.x},${a.y}L${b.x},${b.y}Z` });
+		const rays = ctx.marks("rays", "path", ends, (_, i) => i).attr("fill", "none").attr("stroke", color).attr("stroke-width", ends.length > 1 ? 1 : 2).attr("stroke-dasharray", "4 4");
+		ctx.set(rays, { d: (end) => `M${start.x},${start.y}L${end.x},${end.y}` });
+		const finish = plan?.finish ?? null;
+		const notes = ctx.marks("finish", "text", finish ? [finish] : [], (d) => +d).attr("text-anchor", (d) => x(d) > ctx.plot.width - 74 ? "end" : "start").attr("font-weight", 600).text((d) => `Done ${TimeRows.short(d)}`);
+		ctx.text(ctx.set(notes, {
+			x: (d) => x(d) > ctx.plot.width - 74 ? x(d) : x(d) + 6,
+			y: () => Math.max(12, Math.min(ctx.plot.height - 6, y(goal) + (y(goal) < 24 ? 16 : -7)))
+		}), 10.5, "ink").attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+	}
+};
+function median$1(points, x) {
+	const gaps = points.slice(1).map((point, i) => x(point.date) - x(points[i].date)).sort((a, b) => a - b);
+	return gaps[Math.floor(gaps.length / 2)] ?? 8;
+}
+export { BurnChart, BurnForecast, BurnMark };

package/dist/charts/timeline/BurndownChart.js

@@ -0,0 +1,93 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { BurnChart, BurnForecast, BurnMark } from "./BurnChart.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { line } from "d3";
+// src/charts/timeline/BurndownChart.ts
+var BurndownIdeal = /* @__PURE__ */ function(BurndownIdeal) {
+	BurndownIdeal["Linear"] = "ideal-linear";
+	BurndownIdeal["Weekdays"] = "ideal-weekdays";
+	BurndownIdeal["Hidden"] = "no-ideal";
+	return BurndownIdeal;
+}({});
+/** Watch work left fall toward zero during a sprint, against the pace needed to finish on time. */
+var BurndownChart = class extends BurnChart {
+	static meta = {
+		id: "burndown",
+		name: "Burndown chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots remaining work over time against an ideal line, with a forecast of the likely finish date.",
+		tags: [
+			"agile",
+			"sprint",
+			"scrum",
+			"remaining work"
+		],
+		sample: (seed) => TimeSamples.sprint(seed),
+		variants: {
+			mark: Object.values(BurnMark),
+			forecast: Object.values(BurnForecast),
+			ideal: Object.values(BurndownIdeal)
+		}
+	};
+	defaults() {
+		return {
+			date: "date",
+			remaining: "remaining",
+			mark: BurnMark.Line,
+			forecast: BurnForecast.Regression,
+			ideal: "ideal-linear"
+		};
+	}
+	actual() {
+		const { data, date, remaining } = this.options;
+		return data.flatMap((row) => {
+			const when = TimeRows.date(row[date]), value = TimeRows.number(row[remaining]);
+			return when && value !== null ? [{
+				date: when,
+				value: Math.max(0, value)
+			}] : [];
+		}).sort((a, b) => +a.date - +b.date);
+	}
+	goal() {
+		return 0;
+	}
+	top() {
+		return Math.max(1, ...this.actual().map((point) => point.value));
+	}
+	name() {
+		return "Remaining";
+	}
+	idealLine() {
+		const days = this.calendar();
+		const first = this.actual()[0];
+		if (!first || days.length < 2) return [];
+		if (this.options.ideal === "no-ideal") return [];
+		const working = (date) => this.options.ideal === "ideal-weekdays" ? date.getUTCDay() % 6 !== 0 : true;
+		const total = Math.max(1, days.slice(1).filter(working).length);
+		let left = first.value;
+		return days.map((date, i) => {
+			if (i && working(date)) left -= first.value / total;
+			return {
+				date,
+				value: Math.max(0, left)
+			};
+		});
+	}
+	context(ctx, { x, y }) {
+		const ideal = this.idealLine();
+		const trace = line((d) => x(d.date), (d) => y(d.value));
+		const paths = ctx.marks("ideal", "path", ideal.length ? [ideal] : [], (_, i) => i).attr("fill", "none").attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 2);
+		ctx.set(paths, { d: (d) => trace(d) ?? "" });
+	}
+	legendItems() {
+		const ideal = this.options.ideal === "no-ideal" ? [] : [{
+			key: "Ideal",
+			color: this.theme.inkMuted
+		}];
+		return [...this.palette.items(), ...ideal];
+	}
+};
+export { BurndownChart, BurndownIdeal };

package/dist/charts/timeline/BurnupChart.js

@@ -0,0 +1,103 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { BurnChart, BurnForecast, BurnMark } from "./BurnChart.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { curveStepAfter, line } from "d3";
+// src/charts/timeline/BurnupChart.ts
+var BurnupScope = /* @__PURE__ */ function(BurnupScope) {
+	BurnupScope["Step"] = "scope-steps";
+	BurnupScope["Line"] = "scope-line";
+	return BurnupScope;
+}({});
+var BurnupUnit = /* @__PURE__ */ function(BurnupUnit) {
+	BurnupUnit["Absolute"] = "absolute";
+	BurnupUnit["Percent"] = "percent";
+	return BurnupUnit;
+}({});
+/** Separate delivery from scope change: completed work climbs toward a total that can itself move. */
+var BurnupChart = class extends BurnChart {
+	static meta = {
+		id: "burnup",
+		name: "Burnup chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots completed work rising toward total scope, so added scope is never mistaken for slow delivery.",
+		tags: [
+			"agile",
+			"release",
+			"scope",
+			"completed work"
+		],
+		sample: (seed) => TimeSamples.sprint(seed),
+		variants: {
+			mark: [
+				BurnMark.Area,
+				BurnMark.Line,
+				BurnMark.Step
+			],
+			forecast: Object.values(BurnForecast),
+			scopeStyle: Object.values(BurnupScope),
+			unit: Object.values(BurnupUnit)
+		},
+		valid: ({ scopeStyle, unit }) => unit === "absolute" || scopeStyle === "scope-steps"
+	};
+	defaults() {
+		return {
+			date: "date",
+			done: "done",
+			scope: "scope",
+			mark: BurnMark.Area,
+			forecast: BurnForecast.Regression,
+			scopeStyle: "scope-steps",
+			unit: "absolute"
+		};
+	}
+	get percent() {
+		return this.options.unit === "percent";
+	}
+	scopeLine() {
+		const { data, date, scope } = this.options;
+		return data.flatMap((row) => {
+			const when = TimeRows.date(row[date]), value = TimeRows.number(row[scope]);
+			return when && value !== null ? [{
+				date: when,
+				value: this.percent ? 100 : Math.max(0, value)
+			}] : [];
+		}).sort((a, b) => +a.date - +b.date);
+	}
+	actual() {
+		const { data, date, done, scope } = this.options;
+		return data.flatMap((row) => {
+			const when = TimeRows.date(row[date]), value = TimeRows.number(row[done]), total = TimeRows.number(row[scope]);
+			if (!when || value === null) return [];
+			return [{
+				date: when,
+				value: Math.max(0, this.percent ? value / (total || 1) * 100 : value)
+			}];
+		}).sort((a, b) => +a.date - +b.date);
+	}
+	goal() {
+		return this.scopeLine().at(-1)?.value ?? 0;
+	}
+	top() {
+		return Math.max(1, ...this.scopeLine().map((point) => point.value), ...this.actual().map((point) => point.value)) * 1.06;
+	}
+	name() {
+		return "Done";
+	}
+	context(ctx, { x, y }) {
+		const scope = this.scopeLine();
+		const trace = line((d) => x(d.date), (d) => y(d.value));
+		if (this.options.scopeStyle === "scope-steps") trace.curve(curveStepAfter);
+		const paths = ctx.marks("scope", "path", scope.length ? [scope] : [], (_, i) => i).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2);
+		ctx.set(paths, { d: (d) => trace(d) ?? "" });
+	}
+	legendItems() {
+		return [...this.palette.items(), {
+			key: "Scope",
+			color: this.theme.inkSecondary
+		}];
+	}
+};
+export { BurnupChart, BurnupScope, BurnupUnit };

package/dist/charts/timeline/CalendarHeatmap.js

@@ -0,0 +1,332 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { extent, max, rollup, sum, utcDay, utcFormat, utcMonday, utcMonth, utcSunday } from "d3";
+// src/charts/timeline/CalendarHeatmap.ts
+var CalendarLayout = /* @__PURE__ */ function(CalendarLayout) {
+	CalendarLayout["Weeks"] = "weeks";
+	CalendarLayout["Columns"] = "week-rows";
+	CalendarLayout["Months"] = "months";
+	return CalendarLayout;
+}({});
+var CalendarHeatCell = /* @__PURE__ */ function(CalendarHeatCell) {
+	CalendarHeatCell["Square"] = "square";
+	CalendarHeatCell["Dot"] = "dot";
+	CalendarHeatCell["Bubble"] = "bubble";
+	return CalendarHeatCell;
+}({});
+var CalendarWeekStart = /* @__PURE__ */ function(CalendarWeekStart) {
+	CalendarWeekStart["Monday"] = "monday";
+	CalendarWeekStart["Sunday"] = "sunday";
+	return CalendarWeekStart;
+}({});
+var CalendarAggregate = /* @__PURE__ */ function(CalendarAggregate) {
+	CalendarAggregate["Sum"] = "sum";
+	CalendarAggregate["Mean"] = "mean";
+	CalendarAggregate["Max"] = "max";
+	CalendarAggregate["Count"] = "count";
+	return CalendarAggregate;
+}({});
+var NAMES = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+var MONTH = utcFormat("%b");
+var FULL_MONTH = utcFormat("%b %Y");
+var GAP = 2;
+/** See daily rhythm over months or years: each day is one cell on a real calendar. */
+var CalendarHeatmap = class extends Chart2D {
+	static meta = {
+		id: "calendar-heatmap",
+		name: "Calendar heatmap",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Colours one cell per day on a calendar grid to reveal weekly habits, streaks and seasonal gaps.",
+		tags: [
+			"contribution",
+			"github",
+			"daily",
+			"streak"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 250, 1).map((row, i, rows) => ({
+			date: row.date,
+			value: +((1 + Math.abs(+row.value - +(rows[i - 1]?.value ?? row.value))) * (row.date.getUTCDay() % 6 ? 2 : .5)).toFixed(1)
+		})).filter((_, i) => i % 11 !== 7),
+		variants: {
+			layout: Object.values(CalendarLayout),
+			cell: Object.values(CalendarHeatCell),
+			weekStart: Object.values(CalendarWeekStart),
+			outline: [false, true]
+		},
+		valid: ({ layout, outline, cell }) => !outline || layout === "weeks" && cell === "square"
+	};
+	defaults() {
+		return {
+			date: "date",
+			value: "value",
+			layout: "weeks",
+			cell: "square",
+			weekStart: "monday",
+			aggregate: "sum",
+			outline: false,
+			legend: LegendPosition.None
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 16,
+			bottom: 22,
+			left: this.options.layout === "months" ? 12 : 34
+		};
+	}
+	totals() {
+		const { data, date, value, aggregate } = this.options;
+		const rows = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				day: +TimeRows.floorDay(when),
+				value: TimeRows.number(row[value]) ?? 0
+			}] : [];
+		});
+		return rollup(rows, (list) => {
+			if (aggregate === "count") return list.length;
+			if (aggregate === "max") return max(list, (d) => d.value);
+			const total = sum(list, (d) => d.value);
+			return aggregate === "mean" ? total / list.length : total;
+		}, (d) => d.day);
+	}
+	weekday(date) {
+		return this.options.weekStart === "monday" ? (date.getUTCDay() + 6) % 7 : date.getUTCDay();
+	}
+	draw(ctx) {
+		const totals = this.totals();
+		const reserved = ctx.plot;
+		const stamps = [...totals.keys()];
+		if (!stamps.length) return this.clear(ctx);
+		const first = new Date(Math.min(...stamps)), last = new Date(Math.max(...stamps));
+		const days = utcDay.range(first, utcDay.offset(last, 1)).map((date) => ({
+			date,
+			value: totals.get(+date) ?? null
+		}));
+		const { size, cells, blocks } = this.options.layout === "months" ? this.months(days, reserved.width, reserved.height) : this.weeks(days, reserved.width, reserved.height);
+		const [low = 0, high = 1] = extent(cells.filter((d) => d.value !== null), (d) => d.value);
+		const span = high - low || 1;
+		const signed = low < 0 && high > 0, reach = Math.max(-low, high) || 1;
+		const fill = (d) => {
+			if (d.value === null) return ctx.theme.grid;
+			return signed ? ctx.palette.diverging(d.value / reach) : ctx.palette.sequential(.12 + .88 * ((d.value - low) / span));
+		};
+		const { cell } = this.options;
+		const side = (d) => {
+			if (cell === "square") return size - GAP;
+			if (cell === "dot" || d.value === null) return Math.max(3, (size - GAP) * (cell === "dot" ? .86 : .22));
+			return Math.max(2, (size - GAP) * Math.sqrt(Math.abs(d.value) / Math.max(Math.abs(low), Math.abs(high), 1e-9)));
+		};
+		const marks = ctx.marks("days", "rect", cells, (d) => +d.date).attr("fill", fill);
+		const centre = (at, d) => at + (size - GAP - side(d)) / 2;
+		ctx.set(marks, {
+			x: (d) => centre(d.x, d),
+			y: (d) => centre(d.y, d),
+			width: side,
+			height: side,
+			rx: (d) => cell === "square" ? Math.min(2, side(d) / 2) : side(d) / 2
+		}, {
+			x: (d) => d.x + (size - GAP) / 2,
+			y: (d) => d.y + (size - GAP) / 2,
+			width: 0,
+			height: 0
+		}, 2);
+		ctx.hover(marks, (d) => ({
+			title: TimeRows.long(d.date),
+			rows: [["Value", d.value === null ? "No data" : +d.value.toFixed(2)]]
+		}));
+		const heads = ctx.marks("heads", "text", blocks, (d) => `${d.x}/${d.y}/${d.label}`).text((d) => d.label);
+		ctx.text(ctx.set(heads, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}), 10.5, "secondary");
+		this.drawOutline(ctx, cells, size);
+		if (signed) for (const name of ["ramp", "ramp-label"]) ctx.group(name).selectAll("*").remove();
+		else TimeMarks.ramp(ctx, ctx.plot.width, ctx.plot.height + 16);
+	}
+	clear(ctx) {
+		for (const name of [
+			"days",
+			"heads",
+			"weekdays",
+			"outline",
+			"ramp",
+			"ramp-label"
+		]) ctx.group(name).selectAll("*").remove();
+	}
+	/** Wraps the week grid over as many rows as makes the cells largest, so short ranges fill the plot too. */
+	weeks(days, width, height) {
+		const vertical = this.options.layout === "week-rows";
+		const floor = this.options.weekStart === "monday" ? utcMonday : utcSunday;
+		const origin = floor.floor(days[0].date);
+		const week = (date) => floor.count(origin, date);
+		const weeks = week(days[days.length - 1].date) + 1;
+		const head = 16, gutter = vertical ? 30 : 0;
+		let best = {
+			wraps: 1,
+			size: 0
+		};
+		for (let wraps = 1; wraps <= 8; wraps++) {
+			const per = Math.ceil(weeks / wraps);
+			const size = vertical ? Math.min((height - head) / per, (width - gutter * (wraps - 1)) / (wraps * 7)) : Math.min(width / per, (height - 22 * wraps) / (wraps * 7));
+			if (size > best.size) best = {
+				wraps,
+				size
+			};
+		}
+		const per = Math.ceil(weeks / best.wraps), size = Math.min(18, best.size);
+		const stride = vertical ? size * 7 + gutter : size * 7 + head + 6;
+		const offset = head;
+		const cells = days.map(({ date, value }) => {
+			const index = week(date), wrap = Math.floor(index / per), along = index % per * size, wd = this.weekday(date) * size;
+			return vertical ? {
+				date,
+				value,
+				x: wrap * stride + wd,
+				y: offset + along,
+				block: wrap
+			} : {
+				date,
+				value,
+				x: along,
+				y: wrap * stride + offset + wd - 2,
+				block: wrap
+			};
+		});
+		const blocks = [];
+		const spots = /* @__PURE__ */ new Map();
+		for (const month of utcMonth.range(utcMonth.ceil(days[0].date), days[days.length - 1].date)) {
+			const cell = cells.find((d) => +d.date === +month);
+			if (!cell) continue;
+			const along = vertical ? cell.y : cell.x, gap = vertical ? 13 : 26;
+			if (along - (spots.get(cell.block) ?? -Infinity) < gap) continue;
+			spots.set(cell.block, along);
+			const label = MONTH(month);
+			blocks.push(vertical ? {
+				x: cell.block * stride - 26,
+				y: cell.y + size / 2 + 3,
+				label,
+				columns: 1
+			} : {
+				x: cell.x,
+				y: cell.block * stride + offset - 6,
+				label,
+				columns: 1
+			});
+		}
+		return {
+			size,
+			cells,
+			blocks: blocks.concat(vertical ? this.weekHeads(best.wraps, stride, size) : this.rowHeads(best.wraps, stride, 14, size))
+		};
+	}
+	weekHeads(wraps, stride, size) {
+		return Array.from({ length: wraps }, (_, wrap) => [
+			0,
+			2,
+			4,
+			6
+		].map((i) => ({
+			x: wrap * stride + i * size + size / 2 - 4,
+			y: 11,
+			label: this.dayName(i).slice(0, 1),
+			columns: 1
+		}))).flat();
+	}
+	rowHeads(wraps, stride, offset, size) {
+		if (size < 8) return [];
+		return Array.from({ length: wraps }, (_, wrap) => [
+			0,
+			2,
+			4
+		].map((i) => ({
+			x: -30,
+			y: wrap * stride + offset + i * size + size / 2 + 3,
+			label: this.dayName(i),
+			columns: 1
+		}))).flat();
+	}
+	dayName(i) {
+		return NAMES[(i + (this.options.weekStart === "monday" ? 1 : 0)) % 7];
+	}
+	/** Small multiples of one calendar page per month, wrapped to the shape of the plot. */
+	months(days, width, height) {
+		const pages = [...new Set(days.map(({ date }) => +utcMonth.floor(date)))];
+		const head = 15, pad = 12;
+		let best = {
+			perRow: 1,
+			size: 0
+		};
+		for (let perRow = 1; perRow <= pages.length; perRow++) {
+			const rows = Math.ceil(pages.length / perRow);
+			const size = Math.min((width - pad * (perRow - 1)) / (perRow * 7), (height - 27 * rows) / (rows * 6));
+			if (size > best.size) best = {
+				perRow,
+				size
+			};
+		}
+		const size = Math.min(20, best.size);
+		const place = (page) => {
+			const index = pages.indexOf(page);
+			return {
+				x: index % best.perRow * (size * 7 + pad),
+				y: Math.floor(index / best.perRow) * (size * 6 + head + pad) + head
+			};
+		};
+		return {
+			size,
+			cells: days.map(({ date, value }) => {
+				const page = +utcMonth.floor(date), { x, y } = place(page);
+				const row = Math.floor((new Date(page).getUTCDate() - 1 + this.weekday(new Date(page)) + date.getUTCDate() - 1) / 7);
+				return {
+					date,
+					value,
+					x: x + this.weekday(date) * size,
+					y: y + row * size,
+					block: page
+				};
+			}),
+			blocks: pages.map((page) => {
+				const { x, y } = place(page);
+				return {
+					x,
+					y: y - 5,
+					label: FULL_MONTH(new Date(page)),
+					columns: 7
+				};
+			})
+		};
+	}
+	drawOutline(ctx, cells, size) {
+		const edges = !this.options.outline ? [] : cells.flatMap((d) => {
+			if (d.date.getUTCDate() !== 1) return [];
+			const { x, y } = d, weekday = this.weekday(d.date), top = y - weekday * size - GAP / 2, bottom = top + 7 * size;
+			const left = x - GAP / 2;
+			if (!weekday) return [{
+				key: +d.date,
+				d: `M${left},${top}V${bottom}`
+			}];
+			return [{
+				key: +d.date,
+				d: `M${left + size},${top}V${y - GAP / 2}H${left}V${bottom}`
+			}];
+		});
+		const paths = ctx.marks("outline", "path", edges, (edge) => edge.key).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1);
+		ctx.set(paths, { d: (edge) => edge.d });
+	}
+};
+export { CalendarAggregate, CalendarHeatCell, CalendarHeatmap, CalendarLayout, CalendarWeekStart };