@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/timeline/GanttChart.js

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

package/dist/charts/timeline/LifelineChart.js

@@ -0,0 +1,173 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { TimeMarks } from "./TimeMarks.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { groups, scaleBand, scaleLinear, scaleUtc } from "d3";
+// src/charts/timeline/LifelineChart.ts
+var LifelineAlign = /* @__PURE__ */ function(LifelineAlign) {
+	LifelineAlign["Calendar"] = "calendar";
+	LifelineAlign["First"] = "from-first-event";
+	LifelineAlign["Last"] = "to-last-event";
+	return LifelineAlign;
+}({});
+var LifelineSort = /* @__PURE__ */ function(LifelineSort) {
+	LifelineSort["Input"] = "as-listed";
+	LifelineSort["Start"] = "by-entry";
+	LifelineSort["Length"] = "by-length";
+	return LifelineSort;
+}({});
+var LifelineTrack = /* @__PURE__ */ function(LifelineTrack) {
+	LifelineTrack["Bar"] = "bar";
+	LifelineTrack["Line"] = "line";
+	return LifelineTrack;
+}({});
+var LifelineEvents = /* @__PURE__ */ function(LifelineEvents) {
+	LifelineEvents["Dots"] = "dots";
+	LifelineEvents["Ticks"] = "ticks";
+	LifelineEvents["Hidden"] = "no-events";
+	return LifelineEvents;
+}({});
+/** Follow individual histories, such as patients, customers or machines, through their states, one line per subject. */
+var LifelineChart = class extends CartesianChart {
+	static meta = {
+		id: "lifeline",
+		name: "Lifeline chart",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws one line per subject coloured by state between events, aligned on the calendar or on a common event.",
+		tags: [
+			"patient history",
+			"customer journey",
+			"cohort",
+			"state changes"
+		],
+		sample: (seed) => TimeSamples.journeys(seed),
+		variants: {
+			align: Object.values(LifelineAlign),
+			sort: Object.values(LifelineSort),
+			track: Object.values(LifelineTrack),
+			events: Object.values(LifelineEvents)
+		},
+		valid: ({ track, events }) => track === "line" || events !== "ticks"
+	};
+	defaults() {
+		return {
+			subject: "subject",
+			date: "date",
+			state: "state",
+			align: "calendar",
+			sort: "as-listed",
+			track: "bar",
+			events: "dots"
+		};
+	}
+	get relative() {
+		return this.options.align !== "calendar";
+	}
+	lives() {
+		const { data, subject, date, state, align, sort } = this.options;
+		const rows = data.flatMap((row, i) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				name: TimeRows.text(row[subject], `#${i + 1}`),
+				date: when,
+				state: TimeRows.text(row[state], "Other")
+			}] : [];
+		});
+		const lives = groups(rows, (row) => row.name).map(([name, list]) => {
+			const ordered = list.sort((a, b) => +a.date - +b.date), first = ordered[0], last = ordered[ordered.length - 1];
+			const zero = align === "to-last-event" ? last.date : first.date;
+			return {
+				key: name,
+				name,
+				stops: ordered.map((stop) => ({
+					...stop,
+					at: TimeRows.days(zero, stop.date)
+				})),
+				length: TimeRows.days(first.date, last.date)
+			};
+		});
+		if (sort === "by-entry") lives.sort((a, b) => +b.stops[0].date - +a.stops[0].date);
+		if (sort === "by-length") lives.sort((a, b) => b.length - a.length);
+		return lives;
+	}
+	scales(ctx) {
+		const lives = this.lives();
+		const y = scaleBand(lives.map((life) => life.key), [0, ctx.plot.height]).padding(.25);
+		const stops = lives.flatMap((life) => life.stops);
+		if (!this.relative) return {
+			x: scaleUtc(TimeRows.extent(stops.map((stop) => stop.date)), [0, ctx.plot.width]).nice(),
+			y
+		};
+		const low = Math.min(0, ...stops.map((stop) => stop.at)), high = Math.max(0, ...stops.map((stop) => stop.at));
+		return {
+			x: scaleLinear([low, high === low ? low + 1 : high], [0, ctx.plot.width]).nice(),
+			y
+		};
+	}
+	tickFormat(scale) {
+		const first = scale.domain()[0];
+		if (typeof first === "string") return TimeMarks.bandFormat(scale);
+		return typeof first === "number" ? (value) => +value ? TimeRows.signedDays(+value) : "Day 0" : null;
+	}
+	/** The last state of a life is only a point, so it has no coloured mark unless events are dots. */
+	legendItems() {
+		if (this.options.events === "dots") return super.legendItems();
+		const tracked = new Set(this.lives().flatMap((life) => life.stops.slice(0, -1).map((stop) => stop.state)));
+		return super.legendItems().filter((item) => tracked.has(item.key));
+	}
+	plotMarks(ctx, { x, y }) {
+		const lives = this.lives(), { track, events } = this.options;
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.state], "Other"));
+		const place = (stop) => this.relative ? x(stop.at) : x(stop.date);
+		const band = y.bandwidth(), thick = track === "bar" ? Math.min(band, 12) : 2;
+		const mid = (life) => y(life.key) + band / 2;
+		const ticks = this.relative ? x.ticks(6) : x.ticks(Math.floor(ctx.plot.width / 80));
+		const grid = ctx.marks("vgrid", "line", ticks, (tick) => +tick).attr("stroke", ctx.theme.grid);
+		ctx.set(grid, {
+			x1: (t) => x(t),
+			x2: (t) => x(t),
+			y1: 0,
+			y2: ctx.plot.height
+		});
+		ctx.group("vgrid").lower();
+		const pieces = lives.flatMap((life) => life.stops.slice(0, -1).map((stop, i) => ({
+			life,
+			stop,
+			next: life.stops[i + 1],
+			key: `${life.key}/${i}`
+		})));
+		const bar = (d, w) => TimeMarks.bar(place(d.stop) + 1, mid(d.life) - thick / 2, Math.max(1, w), thick, Math.min(3, thick / 2));
+		const reach = (d) => place(d.next) - place(d.stop) - 2;
+		const tracks = ctx.marks("tracks", "path", pieces, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.stop.state));
+		ctx.set(tracks, { d: (d) => bar(d, reach(d)) }, { d: (d) => bar(d, 0) }, 6);
+		ctx.hover(tracks, (d) => ({
+			title: d.life.name,
+			color: ctx.palette.color(d.stop.state),
+			rows: [
+				["State", d.stop.state],
+				["From", TimeRows.long(d.stop.date)],
+				["To", TimeRows.long(d.next.date)]
+			]
+		}));
+		const stops = events === "no-events" ? [] : lives.flatMap((life) => life.stops.map((stop, i) => ({
+			life,
+			stop,
+			key: `${life.key}/${i}`
+		})));
+		const r = Math.min(4.5, Math.max(3, band / 2));
+		const dots = ctx.marks("events", "path", stops, (d) => d.key).attr("fill", events === "dots" ? (d) => ctx.palette.color(d.stop.state) : "none").attr("stroke", events === "dots" ? ctx.theme.surface : ctx.theme.ink).attr("stroke-width", events === "dots" ? 2 : 1.5);
+		ctx.set(dots, { d: (d) => {
+			const cx = place(d.stop), cy = mid(d.life);
+			return events === "dots" ? `M${cx - r},${cy}a${r},${r} 0 1 0 ${r * 2},0a${r},${r} 0 1 0 ${-r * 2},0Z` : `M${cx},${cy - Math.min(5, band / 2)}V${cy + Math.min(5, band / 2)}`;
+		} });
+		ctx.hover(dots, (d) => ({
+			title: d.life.name,
+			color: ctx.palette.color(d.stop.state),
+			rows: [["Event", d.stop.state], ["Date", TimeRows.long(d.stop.date)]]
+		}));
+	}
+};
+export { LifelineAlign, LifelineChart, LifelineEvents, LifelineSort, LifelineTrack };

package/dist/charts/timeline/MarimekkoTime.js

@@ -0,0 +1,192 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeRows } from "./TimeRows.js";
+import { descending, groups, scaleLinear, sum, utcMonth, utcWeek } from "d3";
+// src/charts/timeline/MarimekkoTime.ts
+var MekkoPeriod = /* @__PURE__ */ function(MekkoPeriod) {
+	MekkoPeriod["Week"] = "weekly";
+	MekkoPeriod["Fortnight"] = "fortnightly";
+	MekkoPeriod["Month"] = "monthly";
+	return MekkoPeriod;
+}({});
+var MekkoForm = /* @__PURE__ */ function(MekkoForm) {
+	MekkoForm["Mekko"] = "mekko";
+	MekkoForm["Proportional"] = "proportional";
+	MekkoForm["Absolute"] = "absolute";
+	return MekkoForm;
+}({});
+var MekkoOrder = /* @__PURE__ */ function(MekkoOrder) {
+	MekkoOrder["Input"] = "stable-order";
+	MekkoOrder["Largest"] = "largest-first";
+	return MekkoOrder;
+}({});
+var GAP = 2;
+/** Compare mix and volume per period at once: width is the period total, height is each part's share. */
+var MarimekkoTime = class extends Chart2D {
+	static meta = {
+		id: "marimekko-time",
+		name: "Time Marimekko",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides time into columns whose widths follow period totals and stacks each part inside by share.",
+		tags: [
+			"mekko",
+			"mosaic",
+			"share over time",
+			"variable width"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 150, 4).map((row) => ({
+			...row,
+			value: +row.value * (1 + Math.sin(+row.date / 9e8)) + 8
+		})),
+		variants: {
+			form: Object.values(MekkoForm),
+			period: [
+				"monthly",
+				"fortnightly",
+				"weekly"
+			],
+			order: Object.values(MekkoOrder),
+			labels: [true, false]
+		},
+		valid: ({ labels, period }) => labels === true || period !== "weekly"
+	};
+	defaults() {
+		return {
+			date: "date",
+			series: "series",
+			value: "value",
+			period: "monthly",
+			form: "mekko",
+			order: "stable-order",
+			labels: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 26,
+			bottom: 24,
+			left: 46
+		};
+	}
+	floor(date) {
+		const { period } = this.options;
+		if (period === "monthly") return utcMonth.floor(date);
+		if (period === "weekly") return utcWeek.floor(date);
+		return utcWeek.floor(/* @__PURE__ */ new Date(Math.floor(+date / (14 * TimeRows.DAY)) * 14 * TimeRows.DAY));
+	}
+	columns() {
+		const { data, date, series, value } = this.options;
+		const rows = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				period: this.floor(when),
+				series: TimeRows.text(row[series], "Other"),
+				value: Math.max(0, TimeRows.number(row[value]) ?? 0)
+			}] : [];
+		});
+		return groups(rows, (row) => +row.period).sort((a, b) => a[0] - b[0]).map(([stamp, list]) => {
+			const parts = groups(list, (row) => row.series).map(([name, items]) => ({
+				name,
+				value: sum(items, (item) => item.value)
+			}));
+			return {
+				period: new Date(stamp),
+				parts,
+				total: sum(parts, (part) => part.value)
+			};
+		}).filter((column) => column.total > 0);
+	}
+	draw(ctx) {
+		const { data, series, form, order, labels } = this.options;
+		const { width, height } = ctx.plot;
+		for (const row of data) ctx.palette.color(TimeRows.text(row[series], "Other"));
+		const columns = this.columns();
+		const absolute = form === "absolute";
+		const peak = Math.max(1, ...columns.map((column) => column.total));
+		const y = scaleLinear([0, absolute ? peak : 1], [height, 0]);
+		if (absolute) y.nice();
+		const grand = Math.max(1, sum(columns, (column) => column.total));
+		const free = width - GAP * Math.max(0, columns.length - 1);
+		let cursor = 0;
+		const cells = [], heads = [];
+		for (const column of columns) {
+			const w = form === "mekko" ? free * column.total / grand : free / columns.length;
+			const parts = order === "largest-first" ? [...column.parts].sort((a, b) => descending(a.value, b.value)) : column.parts;
+			let stacked = 0;
+			for (const part of parts) {
+				const amount = absolute ? part.value : part.value / column.total;
+				cells.push({
+					key: `${+column.period}/${part.name}`,
+					period: column.period,
+					series: part.name,
+					value: part.value,
+					share: part.value / column.total,
+					x: cursor,
+					y: y(stacked + amount),
+					w,
+					h: Math.max(0, y(stacked) - y(stacked + amount) - GAP)
+				});
+				stacked += amount;
+			}
+			heads.push({
+				x: cursor,
+				w,
+				label: this.options.period === "monthly" ? TimeRows.short(column.period).split(" ")[0] : TimeRows.short(column.period)
+			});
+			cursor += w + GAP;
+		}
+		const ticks = y.ticks(absolute ? 5 : 4);
+		const grid = ctx.marks("grid", "line", ticks, (d) => d).attr("stroke", ctx.theme.grid);
+		ctx.set(grid, {
+			x1: 0,
+			x2: width,
+			y1: (d) => y(d),
+			y2: (d) => y(d)
+		});
+		const axis = ctx.marks("y-labels", "text", ticks, (d) => d).attr("text-anchor", "end").text((d) => absolute ? Math.round(d).toLocaleString("en") : `${Math.round(d * 100)}%`);
+		ctx.text(ctx.set(axis, {
+			x: -6,
+			y: (d) => y(d) + 4
+		}));
+		const rects = ctx.marks("cells", "rect", cells, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series)).attr("rx", 2);
+		ctx.set(rects, {
+			x: (d) => d.x,
+			width: (d) => d.w,
+			y: (d) => d.y,
+			height: (d) => d.h
+		}, {
+			x: (d) => d.x,
+			width: (d) => d.w,
+			y: height,
+			height: 0
+		}, 6);
+		ctx.hover(rects, (d) => ({
+			title: `${d.series}, ${TimeRows.short(d.period)}`,
+			color: ctx.palette.color(d.series),
+			rows: [["Value", +d.value.toFixed(1)], ["Share", `${Math.round(d.share * 100)}%`]]
+		}));
+		const tags = labels ? cells.filter((d) => d.h >= 14 && d.w >= 30) : [];
+		const text = ctx.marks("shares", "text", tags, (d) => d.key).attr("text-anchor", "middle").style("pointer-events", "none").text((d) => `${Math.round(d.share * 100)}%`);
+		ctx.set(ctx.text(text, 10, "ink").attr("fill", (d) => ctx.palette.inkOn(ctx.palette.color(d.series))), {
+			x: (d) => d.x + d.w / 2,
+			y: (d) => d.y + d.h / 2 + 3.5
+		});
+		let last = -Infinity;
+		const shown = heads.filter((head) => {
+			const room = TimeRows.width(head.label, 10.5) + 8;
+			if (head.x + head.w / 2 - room / 2 < last) return false;
+			last = head.x + head.w / 2 + room / 2;
+			return true;
+		});
+		const under = ctx.marks("periods", "text", shown, (d) => d.label).attr("text-anchor", "middle").text((d) => d.label);
+		ctx.text(ctx.set(under, {
+			x: (d) => d.x + d.w / 2,
+			y: height + 15
+		}), 10.5);
+	}
+};
+export { MarimekkoTime, MekkoForm, MekkoOrder, MekkoPeriod };