@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/timeline/CumulativeFlowChart.js

@@ -0,0 +1,163 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { TimeRows } from "./TimeRows.js";
+import { TimeSamples } from "./TimeSamples.js";
+import { area, scaleLinear, scaleUtc, stack, stackOffsetExpand, stackOffsetNone } from "d3";
+// src/charts/timeline/CumulativeFlowChart.ts
+var FlowOffset = /* @__PURE__ */ function(FlowOffset) {
+	FlowOffset["Counts"] = "counts";
+	FlowOffset["Share"] = "share";
+	return FlowOffset;
+}({});
+var FlowStacking = /* @__PURE__ */ function(FlowStacking) {
+	FlowStacking["DoneFirst"] = "done-at-base";
+	FlowStacking["BacklogFirst"] = "backlog-at-base";
+	return FlowStacking;
+}({});
+var FlowScope = /* @__PURE__ */ function(FlowScope) {
+	FlowScope["All"] = "all-states";
+	FlowScope["Active"] = "active-states";
+	return FlowScope;
+}({});
+/** Diagnose a delivery process: band width is work in a state, horizontal distance is lead time. */
+var CumulativeFlowChart = class extends CartesianChart {
+	static meta = {
+		id: "cumulative-flow",
+		name: "Cumulative flow diagram",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks work by workflow state over time so bottlenecks show up as widening bands.",
+		tags: [
+			"kanban",
+			"cfd",
+			"wip",
+			"lead time"
+		],
+		sample: (seed) => TimeSamples.flow(seed),
+		variants: {
+			curve: [
+				CurveKind.StepAfter,
+				CurveKind.Monotone,
+				CurveKind.Linear
+			],
+			offset: Object.values(FlowOffset),
+			stacking: Object.values(FlowStacking),
+			scope: Object.values(FlowScope),
+			guides: [false, true]
+		},
+		valid: ({ guides, offset, stacking, scope }) => !guides || offset === "counts" && stacking === "done-at-base" && scope === "all-states"
+	};
+	defaults() {
+		return {
+			date: "date",
+			state: "state",
+			value: "value",
+			curve: CurveKind.StepAfter,
+			offset: "counts",
+			stacking: "done-at-base",
+			scope: "all-states",
+			guides: false
+		};
+	}
+	layers() {
+		const { data, date, state, value, stacking, scope, offset } = this.options;
+		const { names, table } = TimeRows.pivot(data, date, state, value);
+		const shown = scope === "active-states" && names.length > 2 ? names.slice(1, -1) : names;
+		const keys = stacking === "done-at-base" ? [...shown].reverse() : shown;
+		return {
+			names,
+			table,
+			series: stack().keys(keys).offset(offset === "share" ? stackOffsetExpand : stackOffsetNone)(table)
+		};
+	}
+	scales(ctx) {
+		const { table, series } = this.layers();
+		const top = Math.max(1e-9, ...series.flatMap((layer) => layer.map((point) => Number.isFinite(point[1]) ? point[1] : 0)));
+		const y = scaleLinear([0, top || 1], [ctx.plot.height, 0]);
+		if (this.options.offset !== "share") y.nice();
+		return {
+			x: scaleUtc(TimeRows.extent(table.map((row) => new Date(row.date))), [0, ctx.plot.width]),
+			y
+		};
+	}
+	tickFormat(scale) {
+		if (this.options.offset === "share" && typeof scale.domain()[0] === "number") return (value) => `${Math.round(+value * 100)}%`;
+		return super.tickFormat(scale);
+	}
+	legendItems() {
+		const drawn = new Set(this.layers().series.map((layer) => layer.key));
+		return super.legendItems().filter((item) => drawn.has(item.key));
+	}
+	plotMarks(ctx, { x, y }) {
+		const { names, series } = this.layers();
+		names.forEach((name) => ctx.palette.color(name));
+		const shape = area((d) => x(new Date(d.data.date)), (d) => y(Number.isFinite(d[0]) ? d[0] : 0), (d) => y(Number.isFinite(d[1]) ? d[1] : 0)).curve(Scales.curve(this.options.curve));
+		const flat = area((d) => x(new Date(d.data.date)), y(0), y(0)).curve(Scales.curve(this.options.curve));
+		const bands = ctx.marks("bands", "path", series, (layer) => layer.key).attr("fill", (layer) => ctx.palette.color(layer.key)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(bands, { d: (layer) => shape(layer) ?? "" }, { d: (layer) => flat(layer) ?? "" }, 40);
+		ctx.hover(bands, (layer) => {
+			const last = layer[layer.length - 1];
+			return {
+				title: layer.key,
+				color: ctx.palette.color(layer.key),
+				rows: [["Latest", +(last?.data[layer.key] ?? 0).toFixed(1)]]
+			};
+		});
+		this.drawNames(ctx, series, x, y);
+		this.drawGuides(ctx, series, x, y);
+	}
+	drawNames(ctx, series, x, y) {
+		const tags = series.flatMap((layer) => {
+			const point = layer[Math.floor(layer.length * .72)];
+			if (!point) return [];
+			const thick = y(point[0]) - y(point[1]), name = layer.key, at = x(new Date(point.data.date));
+			return thick >= 26 && at + TimeRows.width(name) + 6 < ctx.plot.width ? [{
+				name,
+				x: at,
+				y: (y(point[0]) + y(point[1])) / 2 + 4
+			}] : [];
+		});
+		const labels = ctx.marks("names", "text", tags, (d) => d.name).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
+		});
+	}
+	/** WIP is the vertical gap at one date; lead time is the horizontal gap back to when that volume arrived. */
+	drawGuides(ctx, series, x, y) {
+		const top = series[series.length - 1], base = series[0];
+		const at = top && this.options.guides ? Math.floor(top.length * .62) : -1;
+		const finished = base?.[at]?.[1] ?? 0, arrived = top?.[at]?.[1] ?? 0;
+		const start = top?.findIndex((point) => point[1] >= finished) ?? -1;
+		const ready = at >= 0 && start >= 0;
+		const when = ready ? new Date(top[at].data.date) : null, since = ready ? new Date(top[start].data.date) : null;
+		const rules = ready ? [{
+			id: "wip",
+			d: `M${x(when)},${y(finished)}V${y(arrived)}M${x(when) - 3},${y(arrived)}h6M${x(when) - 3},${y(finished)}h6`
+		}, {
+			id: "lead",
+			d: `M${x(since)},${y(finished)}H${x(when)}M${x(since)},${y(finished) - 3}v6`
+		}] : [];
+		const paths = ctx.marks("guides", "path", rules, (d) => d.id).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 1.5);
+		ctx.set(paths, { d: (d) => d.d });
+		const notes = ready ? [{
+			id: "wip",
+			text: `WIP ${Math.round(arrived - finished)}`,
+			x: x(when) + 5,
+			y: (y(finished) + y(arrived)) / 2
+		}, {
+			id: "lead",
+			text: `Lead ${Math.round(TimeRows.days(since, when))}d`,
+			x: (x(since) + x(when)) / 2 - 18,
+			y: y(finished) - 5
+		}] : [];
+		const tags = ctx.marks("guide-notes", "text", notes, (d) => d.id).attr("font-weight", 600).text((d) => d.text);
+		ctx.text(ctx.set(tags, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}), 10.5, "ink").attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+	}
+};
+export { CumulativeFlowChart, FlowOffset, FlowScope, FlowStacking };

package/dist/charts/timeline/CycleTimeChart.js

@@ -0,0 +1,176 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeRows } from "./TimeRows.js";
+import { deviation, mean, quantile, scaleLinear, scaleLog, scaleUtc, symbol, symbolCircle } from "d3";
+// src/charts/timeline/CycleTimeChart.ts
+var CycleGuides = /* @__PURE__ */ function(CycleGuides) {
+	CycleGuides["Percentiles"] = "percentiles";
+	CycleGuides["Control"] = "control-limits";
+	CycleGuides["Hidden"] = "no-guides";
+	return CycleGuides;
+}({});
+var WINDOW = 9;
+var SHAPES = [
+	SymbolKind.Circle,
+	SymbolKind.Square,
+	SymbolKind.Triangle,
+	SymbolKind.Diamond,
+	SymbolKind.Wye,
+	SymbolKind.Star,
+	SymbolKind.Cross
+];
+/** Control chart for delivery: how long items took, how predictable that is, and what to promise next. */
+var CycleTimeChart = class extends CartesianChart {
+	static meta = {
+		id: "cycle-time",
+		name: "Cycle time chart",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Scatters each finished item by completion date and elapsed days, with percentile or control-limit guides.",
+		tags: [
+			"control chart",
+			"lead time",
+			"kanban",
+			"predictability"
+		],
+		sample: (seed) => SampleData.tasks(seed, 70),
+		variants: {
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			guides: Object.values(CycleGuides),
+			rolling: [true, false],
+			shapes: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			start: "start",
+			end: "end",
+			item: "task",
+			group: "group",
+			scale: ScaleKind.Linear,
+			guides: "percentiles",
+			rolling: true,
+			shapes: false
+		};
+	}
+	yTicks() {
+		return this.options.scale === ScaleKind.Log ? 4 : 6;
+	}
+	tickFormat(scale) {
+		if (this.options.scale !== ScaleKind.Log || scale.domain()[0] instanceof Date) return super.tickFormat(scale);
+		return (value) => {
+			const lead = +value / 10 ** Math.floor(Math.log10(+value));
+			return [
+				1,
+				2,
+				5
+			].includes(Math.round(lead * 100) / 100) ? `${+value}` : "";
+		};
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			right: this.options.guides === "no-guides" ? 20 : 56
+		};
+	}
+	items() {
+		const { data, start, end, item, group } = this.options;
+		return data.flatMap((row, i) => {
+			const from = TimeRows.date(row[start]), to = TimeRows.date(row[end]);
+			return from && to ? [{
+				key: `${i}`,
+				label: TimeRows.text(row[item], `#${i + 1}`),
+				group: TimeRows.text(row[group], "Other"),
+				done: to,
+				days: Math.max(.5, TimeRows.days(from, to))
+			}] : [];
+		}).sort((a, b) => +a.done - +b.done);
+	}
+	scales(ctx) {
+		const items = this.items(), top = Math.max(1, ...items.map((item) => item.days), this.limits().at(-1)?.value ?? 0);
+		const low = Math.min(top / 2, ...items.map((item) => item.days));
+		const y = this.options.scale === ScaleKind.Log ? scaleLog([Math.max(.5, low * .8), top * 1.25], [ctx.plot.height, 0]) : scaleLinear([0, top], [ctx.plot.height, 0]).nice();
+		const [from, to] = TimeRows.extent(items.map((item) => item.done)), pad = TimeRows.days(from, to) * .03;
+		return {
+			x: scaleUtc([TimeRows.addDays(from, -pad), TimeRows.addDays(to, pad)], [0, ctx.plot.width]),
+			y
+		};
+	}
+	limits() {
+		const days = this.items().map((item) => item.days).sort((a, b) => a - b);
+		if (!days.length) return [];
+		if (this.options.guides === "percentiles") return [
+			["50%", .5],
+			["85%", .85],
+			["95%", .95]
+		].map(([name, p]) => ({
+			name,
+			value: quantile(days, p)
+		}));
+		if (this.options.guides === "control-limits") {
+			const centre = mean(days), sigma = deviation(days) ?? 0;
+			return [
+				{
+					name: "LCL",
+					value: Math.max(.5, centre - 2 * sigma)
+				},
+				{
+					name: "Mean",
+					value: centre
+				},
+				{
+					name: "UCL",
+					value: centre + 2 * sigma
+				}
+			];
+		}
+		return [];
+	}
+	plotMarks(ctx, { x, y }) {
+		const items = this.items(), { width } = ctx.plot;
+		const names = [...new Set(this.options.data.map((row) => TimeRows.text(row[this.options.group], "Other")))];
+		names.forEach((name) => ctx.palette.color(name));
+		const limits = this.limits().filter((limit) => y(limit.value) >= 0 && y(limit.value) <= ctx.plot.height);
+		const rules = ctx.marks("limits", "line", limits, (d) => d.name).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1).attr("stroke-dasharray", "4 4");
+		ctx.set(rules, {
+			x1: 0,
+			x2: width,
+			y1: (d) => y(d.value),
+			y2: (d) => y(d.value)
+		});
+		let lastY = Infinity;
+		const tags = limits.filter((limit) => {
+			const at = y(limit.value);
+			if (lastY - at < 12) return false;
+			lastY = at;
+			return true;
+		});
+		const notes = ctx.marks("limit-notes", "text", tags, (d) => d.name).text((d) => `${d.name} ${Math.round(d.value)}d`);
+		ctx.text(ctx.set(notes, {
+			x: width + 5,
+			y: (d) => y(d.value) + 3.5
+		}), 10, "secondary");
+		const shape = (d) => this.options.shapes ? symbol(Scales.symbol(SHAPES[names.indexOf(d.group) % SHAPES.length]), 56)() : symbol(symbolCircle, 56)();
+		const dots = ctx.marks("items", "path", items, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.group)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(dots, {
+			d: shape,
+			transform: (d) => `translate(${x(d.done)},${y(d.days)})`
+		}, {}, 4);
+		ctx.hover(dots, (d) => ({
+			title: d.label,
+			color: ctx.palette.color(d.group),
+			rows: [["Finished", TimeRows.long(d.done)], ["Cycle time", `${+d.days.toFixed(1)} d`]]
+		}));
+		const rolling = !this.options.rolling || items.length < WINDOW ? [] : items.slice(8).map((item, i) => ({
+			x: x(item.done),
+			y: y(mean(items.slice(i, i + WINDOW), (d) => d.days))
+		}));
+		const trail = ctx.marks("rolling", "path", rolling.length ? [rolling] : [], (_, i) => i).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2);
+		ctx.set(trail, { d: (points) => `M${points.map((point) => `${point.x},${point.y}`).join("L")}` });
+		ctx.drawOn(trail);
+	}
+};
+export { CycleGuides, CycleTimeChart };

package/dist/charts/timeline/EventDropChart.js

@@ -0,0 +1,184 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TimeBandChart } from "./TimeBandChart.js";
+import { TimeRows } from "./TimeRows.js";
+import { groups, max, sum, symbol, symbolCircle } from "d3";
+// src/charts/timeline/EventDropChart.ts
+var EventDropMark = /* @__PURE__ */ function(EventDropMark) {
+	EventDropMark["Dot"] = "dot";
+	EventDropMark["Tick"] = "tick";
+	EventDropMark["Drop"] = "drop";
+	EventDropMark["Bubble"] = "bubble";
+	return EventDropMark;
+}({});
+var EventDropArrangement = /* @__PURE__ */ function(EventDropArrangement) {
+	EventDropArrangement["Line"] = "on-line";
+	EventDropArrangement["Swarm"] = "swarm";
+	return EventDropArrangement;
+}({});
+var EventDropDensity = /* @__PURE__ */ function(EventDropDensity) {
+	EventDropDensity["None"] = "no-density";
+	EventDropDensity["Ridge"] = "ridge";
+	EventDropDensity["Bins"] = "bins";
+	return EventDropDensity;
+}({});
+var EventDropOrder = /* @__PURE__ */ function(EventDropOrder) {
+	EventDropOrder["FirstSeen"] = "first-seen";
+	EventDropOrder["Count"] = "by-count";
+	EventDropOrder["Quiet"] = "by-quiet";
+	return EventDropOrder;
+}({});
+var COLUMN = 10;
+/** Show when discrete events happen across several streams, keeping every event visible. */
+var EventDropChart = class extends TimeBandChart {
+	static meta = {
+		id: "event-drop",
+		name: "Event drops",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Drops one mark per event on a row for each stream, exposing bursts, gaps and coincidences in time.",
+		tags: [
+			"events",
+			"log",
+			"activity",
+			"strip"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 90, 5).filter((row, i) => Math.sin(i * 12.9898 + +row.value) * 43758.5 % 1 > .35 + Math.sin(i / 11) * .3),
+		variants: {
+			mark: Object.values(EventDropMark),
+			arrangement: Object.values(EventDropArrangement),
+			density: Object.values(EventDropDensity),
+			order: Object.values(EventDropOrder)
+		},
+		valid: ({ mark, arrangement }) => mark !== "tick" || arrangement === "on-line"
+	};
+	defaults() {
+		return {
+			date: "date",
+			series: "series",
+			value: "value",
+			mark: "dot",
+			arrangement: "on-line",
+			density: "no-density",
+			order: "first-seen"
+		};
+	}
+	bandPadding() {
+		return .14;
+	}
+	lanes() {
+		const { data, date, series, value, order } = this.options;
+		const rows = data.flatMap((row) => {
+			const when = TimeRows.date(row[date]);
+			return when ? [{
+				name: TimeRows.text(row[series], "Other"),
+				date: when,
+				value: Math.abs(TimeRows.number(row[value]) ?? 1)
+			}] : [];
+		});
+		const lanes = groups(rows, (row) => row.name).map(([name, events]) => ({
+			name,
+			events: events.sort((a, b) => +a.date - +b.date)
+		}));
+		if (order === "by-count") lanes.sort((a, b) => b.events.length - a.events.length);
+		if (order === "by-quiet") lanes.sort((a, b) => a.events.length - b.events.length);
+		return lanes;
+	}
+	bands() {
+		return this.lanes().map((lane) => lane.name);
+	}
+	range() {
+		return TimeRows.extent(this.lanes().flatMap((lane) => lane.events.map((event) => event.date)));
+	}
+	/** Greedy beeswarm around the row centre: nearest offset that does not touch earlier marks. */
+	dodge(items, limit) {
+		const placed = [];
+		for (const item of items) {
+			const near = placed.filter((other) => Math.abs(other.x - item.x) < other.r + item.r + 1);
+			let offset = 0, step = 0;
+			const clear = (at) => near.every((other) => (other.x - item.x) ** 2 + (other.y - at) ** 2 >= (other.r + item.r + 1) ** 2);
+			while (!clear(item.y + offset) && Math.abs(offset) <= limit) {
+				step += 1;
+				offset = (step % 2 ? 1 : -1) * Math.ceil(step / 2) * 2;
+			}
+			if (Math.abs(offset) > limit) offset = 0;
+			item.y += offset;
+			placed.push(item);
+		}
+	}
+	density(lane, x, width) {
+		const bins = new Array(Math.max(1, Math.ceil(width / COLUMN))).fill(0);
+		for (const event of lane.events) {
+			const bin = Math.min(bins.length - 1, Math.max(0, Math.floor(x(event.date) / COLUMN)));
+			bins[bin] += 1;
+		}
+		return bins;
+	}
+	plotMarks(ctx, { x, y }) {
+		const lanes = this.lanes();
+		for (const row of this.options.data) ctx.palette.color(TimeRows.text(row[this.options.series], "Other"));
+		const { mark, arrangement, density } = this.options;
+		const band = y.bandwidth(), tracked = density !== "no-density";
+		const peak = max(lanes.flatMap((lane) => lane.events), (event) => event.value) || 1;
+		this.timeGrid(ctx, x);
+		const rail = (name) => y(name) + (tracked ? band * .72 : band / 2);
+		const rails = ctx.marks("rails", "line", lanes, (lane) => lane.name).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		ctx.set(rails, {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (lane) => rail(lane.name),
+			y2: (lane) => rail(lane.name)
+		});
+		this.drawDensity(ctx, lanes, x, y, band * .55);
+		const room = Math.min(band * (tracked ? .26 : .46), 16);
+		const drops = lanes.flatMap((lane) => {
+			const items = lane.events.map((event, i) => ({
+				key: `${lane.name}/${i}`,
+				series: lane.name,
+				date: event.date,
+				value: event.value,
+				x: x(event.date),
+				y: rail(lane.name),
+				r: mark === "bubble" ? Math.max(1.5, Math.min(band * .4, 9) * Math.sqrt(event.value / peak)) : 4
+			}));
+			if (arrangement === "swarm") this.dodge(items, room);
+			return items;
+		});
+		const tick = Math.min(band * .7, 14);
+		const shape = (d) => {
+			if (mark === "tick") return `M-1,${-tick / 2}H1V${tick / 2}H-1Z`;
+			if (mark === "drop") return `M0,${-d.r * 2}C${d.r * .6},${-d.r * .9} ${d.r},${-d.r * .5} ${d.r},0A${d.r},${d.r} 0 1 1 ${-d.r},0C${-d.r},${-d.r * .5} ${-d.r * .6},${-d.r * .9} 0,${-d.r * 2}Z`;
+			return symbol(symbolCircle, Math.PI * d.r * d.r)();
+		};
+		const marks = ctx.marks("drops", "path", drops, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series)).attr("fill-opacity", mark === "bubble" ? .75 : 1).attr("stroke", mark === "tick" ? "none" : ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(marks, {
+			d: shape,
+			transform: (d) => `translate(${d.x},${d.y})`
+		}, {}, 0);
+		ctx.hover(marks, (d) => ({
+			title: d.series,
+			color: ctx.palette.color(d.series),
+			rows: [["Date", TimeRows.long(d.date)], ["Value", d.value]]
+		}));
+	}
+	drawDensity(ctx, lanes, x, y, height) {
+		const { density } = this.options, width = ctx.plot.width;
+		const profiles = density === "no-density" ? [] : lanes.map((lane) => ({
+			lane,
+			bins: this.density(lane, x, width)
+		}));
+		const top = max(profiles.flatMap((p) => p.bins)) ?? 1;
+		const base = (name) => y(name) + y.bandwidth() * .62;
+		const smooth = (bins) => bins.map((_, i) => sum(bins.slice(Math.max(0, i - 2), i + 3)) / Math.min(bins.length, 5));
+		const path = ({ lane, bins }) => {
+			const floor = base(lane.name), scale = height / top;
+			if (density === "bins") return bins.map((count, i) => count ? `M${i * COLUMN},${floor}v${-count * scale}h8v${count * scale}Z` : "").join("");
+			const curve = smooth(bins), rate = height / Math.max(...profiles.map((p) => max(smooth(p.bins)) ?? 1), 1e-9);
+			return `M0,${floor}${curve.map((value, i) => `L${i * COLUMN + COLUMN / 2},${floor - value * rate}`).join("")}L${width},${floor}Z`;
+		};
+		const shapes = ctx.marks("density", "path", profiles, (p) => p.lane.name).attr("fill", (p) => ctx.palette.color(p.lane.name)).attr("fill-opacity", .28);
+		ctx.set(shapes, { d: path });
+	}
+};
+export { EventDropArrangement, EventDropChart, EventDropDensity, EventDropMark, EventDropOrder };