@mstone6969/graph 0.1.0 → 0.2.0

package/dist/charts/timeline/CalendarSkylineChart.js

@@ -1,128 +0,0 @@
-import { Chart3D } from "../../core/Chart3D.js";
-import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { CalendarWeekStart } from "./CalendarHeatmap.js";
-import { TimeRows } from "./TimeRows.js";
-import { rollup, scaleLinear, scalePow, sum, utcDay, utcMonday, utcSunday } from "d3";
-import { BoxGeometry, CylinderGeometry, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry } from "three";
-// src/charts/timeline/CalendarSkylineChart.ts
-var SkylineShape = /* @__PURE__ */ function(SkylineShape) {
-	SkylineShape["Block"] = "blocks";
-	SkylineShape["Column"] = "columns";
-	return SkylineShape;
-}({});
-var BASE = -.7;
-var MONTH_NAMES = [
-	"Jan",
-	"Feb",
-	"Mar",
-	"Apr",
-	"May",
-	"Jun",
-	"Jul",
-	"Aug",
-	"Sep",
-	"Oct",
-	"Nov",
-	"Dec"
-];
-/** A year of daily activity as a city: weeks run along the floor and each day rises by its value. */
-var CalendarSkylineChart = class extends Chart3D {
-	static meta = {
-		id: "calendar-skyline",
-		name: "Calendar skyline",
-		family: ChartFamily.Temporal,
-		dimension: Dimension.Three,
-		shape: DataShape.Table,
-		description: "Raises a calendar grid into 3D so that peak days stand out as towers above the year.",
-		tags: [
-			"contribution",
-			"daily",
-			"skyline",
-			"city"
-		],
-		sample: (seed) => SampleData.timeSeries(seed, 280, 1).map((row, i, rows) => ({
-			date: row.date,
-			value: +(.5 + Math.min(3, Math.abs(+row.value - +(rows[i - 1]?.value ?? row.value))) * (row.date.getUTCDay() % 6 ? 2 : .6)).toFixed(1)
-		})),
-		variants: {
-			shape: Object.values(SkylineShape),
-			weekStart: Object.values(CalendarWeekStart),
-			scale: [ScaleKind.Linear, ScaleKind.Sqrt]
-		}
-	};
-	defaults() {
-		return {
-			date: "date",
-			value: "value",
-			shape: "blocks",
-			weekStart: CalendarWeekStart.Monday,
-			scale: ScaleKind.Linear,
-			distance: 3.7,
-			elevation: 40,
-			azimuth: 24
-		};
-	}
-	build(ctx) {
-		const { data, date, value, shape, weekStart, scale } = this.options;
-		const rows = data.flatMap((row) => {
-			const when = TimeRows.date(row[date]);
-			return when ? [{
-				day: +TimeRows.floorDay(when),
-				value: Math.max(0, TimeRows.number(row[value]) ?? 0)
-			}] : [];
-		});
-		const totals = rollup(rows, (list) => sum(list, (d) => d.value), (d) => d.day);
-		const floor = new Mesh(new PlaneGeometry(2.2, 1.1), new MeshStandardMaterial({ color: ctx.theme.grid }));
-		floor.rotation.x = -Math.PI / 2;
-		floor.position.y = BASE;
-		floor.receiveShadow = true;
-		ctx.root.add(floor);
-		if (!totals.size) return;
-		const stamps = [...totals.keys()], first = new Date(Math.min(...stamps)), last = new Date(Math.max(...stamps));
-		const days = utcDay.range(first, utcDay.offset(last, 1));
-		const week = weekStart === CalendarWeekStart.Monday ? utcMonday : utcSunday;
-		const origin = week.floor(first), weeks = week.count(origin, last) + 1;
-		const cell = Math.min(2 / weeks, 1 / 7), gap = cell * .86;
-		const top = Math.max(1e-9, ...totals.values());
-		const height = scale === ScaleKind.Sqrt ? scalePow().exponent(.5).domain([0, top]).range([0, .7]) : scaleLinear([0, top], [0, .7]);
-		const geometry = shape === "blocks" ? new BoxGeometry(gap, 1, gap) : new CylinderGeometry(gap / 2, gap / 2, 1, 12);
-		const towers = new InstancedMesh(geometry, new MeshStandardMaterial({ roughness: .5 }), days.length);
-		towers.castShadow = towers.receiveShadow = true;
-		const weekday = (day) => weekStart === CalendarWeekStart.Monday ? (day.getUTCDay() + 6) % 7 : day.getUTCDay();
-		const dummy = new Object3D();
-		const place = (progress) => {
-			days.forEach((day, i) => {
-				const h = Math.max(.006, height(totals.get(+day) ?? 0) * progress);
-				dummy.position.set((week.count(origin, day) - weeks / 2 + .5) * cell, BASE + h / 2, (weekday(day) - 3) * cell);
-				dummy.scale.set(1, h, 1);
-				dummy.updateMatrix();
-				towers.setMatrixAt(i, dummy.matrix);
-			});
-			towers.instanceMatrix.needsUpdate = true;
-		};
-		days.forEach((day, i) => {
-			const amount = totals.get(+day);
-			towers.setColorAt(i, ctx.color(amount === void 0 ? ctx.theme.grid : ctx.palette.sequential(.15 + .85 * (amount / top))));
-		});
-		ctx.reveal(place);
-		ctx.root.add(towers);
-		ctx.pick(towers, (i) => ({
-			title: TimeRows.long(days[i]),
-			rows: [["Value", +(totals.get(+days[i]) ?? 0).toFixed(1)]]
-		}));
-		let previous = -1, labelled = -Infinity;
-		for (const day of days) {
-			const month = day.getUTCMonth(), at = week.count(origin, day);
-			if (month === previous || (at - labelled) * cell < .26) continue;
-			previous = month;
-			labelled = at;
-			ctx.label(MONTH_NAMES[month], [
-				(at - weeks / 2 + .5) * cell,
-				BASE,
-				.6
-			], "secondary", 10);
-		}
-	}
-};
-export { CalendarSkylineChart, SkylineShape };

package/dist/charts/timeline/ScheduleBlocksChart.js

@@ -1,119 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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 };