@mstone6969/graph 0.1.0 → 0.2.0

package/dist/charts/bars/MarimekkoBar.js

@@ -1,191 +0,0 @@
-import { CartesianChart } from "../../core/CartesianChart.js";
-import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { BarRows, BarSort } from "./BarRows.js";
-import { ascending, descending, scaleLinear, sum } from "d3";
-// src/charts/bars/MarimekkoBar.ts
-var MekkoMode = /* @__PURE__ */ function(MekkoMode) {
-	MekkoMode["Mosaic"] = "mosaic";
-	MekkoMode["Spine"] = "spine";
-	return MekkoMode;
-}({});
-/** Band positions at custom offsets, so tick labels can sit under columns of unequal width. */
-var placed = (bands, centers, span) => {
-	const scale = ((band) => centers.get(band));
-	return Object.assign(scale, {
-		domain: () => bands,
-		range: () => [0, span],
-		copy: () => scale
-	});
-};
-/** Two-way composition: column width is a category's size, segment height its internal mix. */
-var MarimekkoBar = class extends CartesianChart {
-	static meta = {
-		id: "bar-marimekko",
-		name: "Marimekko bar",
-		family: ChartFamily.Composition,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Sizes columns by total and splits them by share, so each cell area is that combination of a market.",
-		tags: [
-			"mekko",
-			"mosaic",
-			"spine",
-			"variable width"
-		],
-		sample: (seed) => SampleData.categories(seed, 6, 4),
-		variants: {
-			orientation: [Orientation.Vertical, Orientation.Horizontal],
-			mode: ["mosaic", "spine"],
-			sort: [
-				BarSort.Descending,
-				BarSort.Data,
-				BarSort.Ascending
-			],
-			ranked: [false, true],
-			labels: [false, true]
-		},
-		valid: (values) => !(values.mode === "spine" && values.ranked)
-	};
-	zoomAxes() {
-		return null;
-	}
-	defaults() {
-		return {
-			x: "category",
-			y: "value",
-			series: "series",
-			orientation: Orientation.Vertical,
-			mode: "mosaic",
-			sort: BarSort.Descending,
-			ranked: false,
-			labels: false
-		};
-	}
-	get vertical() {
-		return this.options.orientation === Orientation.Vertical;
-	}
-	layout() {
-		const { data, x, y, series, sort, ranked, mode, focus } = this.options;
-		const positive = (data ?? []).filter((row) => (BarRows.number(row[y]) ?? 0) > 0);
-		const pivot = BarRows.pivot(positive, x, series, y);
-		const grand = sum(pivot.bands, pivot.total) || 1;
-		const bands = BarRows.order(pivot.bands, sort, pivot.total, (band) => band);
-		const spine = mode === "spine";
-		const key = focus ?? pivot.series[0] ?? "";
-		const names = spine ? [key, "Other"] : pivot.series;
-		let along = 0;
-		const columns = [], cells = [];
-		for (const band of bands) {
-			const total = pivot.total(band), span = total / grand;
-			columns.push({
-				band,
-				total,
-				start: along,
-				end: along + span
-			});
-			const value = (name) => spine && name === "Other" ? total - pivot.cell(band, key) : pivot.cell(band, name);
-			const parts = names.map((name) => ({
-				name,
-				size: value(name)
-			})).filter((part) => part.size > 0);
-			if (ranked) parts.sort((a, b) => descending(a.size, b.size) || ascending(a.name, b.name));
-			let up = 0;
-			for (const { name, size } of parts) {
-				const share = size / total;
-				cells.push({
-					band,
-					series: name,
-					value: size,
-					share,
-					x0: along,
-					x1: along + span,
-					y0: up,
-					y1: up + share
-				});
-				up += share;
-			}
-			along += span;
-		}
-		return {
-			columns,
-			cells,
-			series: names
-		};
-	}
-	scales(ctx) {
-		const { width, height } = ctx.plot;
-		const { columns } = this.layout();
-		const across = this.vertical ? width : height;
-		const band = placed(columns.map((column) => column.band), new Map(columns.map((column) => [column.band, (column.start + column.end) / 2 * across])), across);
-		const share = scaleLinear([0, 100], this.vertical ? [height, 0] : [0, width]);
-		return this.vertical ? {
-			x: band,
-			y: share
-		} : {
-			x: share,
-			y: band
-		};
-	}
-	tickFormat(scale) {
-		if (typeof (scale.domain?.() ?? [])[0] === "number") return (value) => `${value}%`;
-		const { columns } = this.layout();
-		const [, span = 0] = scale.range();
-		const width = new Map(columns.map((column) => [column.band, (column.end - column.start) * span]));
-		return (value) => {
-			const name = String(value), room = this.vertical ? Math.floor(((width.get(name) ?? 0) - 6) / 6.2) : 14;
-			return room < 3 ? "" : BarRows.clip(name, room);
-		};
-	}
-	plotMarks(ctx) {
-		const { cells, series } = this.layout();
-		const { width, height } = ctx.plot;
-		if (this.options.mode === "mosaic") series.forEach(ctx.palette.color);
-		const across = this.vertical ? width : height, along = this.vertical ? height : width;
-		const box = (d) => {
-			const a = d.x0 * across + 1, b = d.x1 * across - 1;
-			const c = (1 - d.y1) * along + (d.y1 < 1 ? 1 : 0), e = (1 - d.y0) * along - (d.y0 > 0 ? 1 : 0);
-			return this.vertical ? {
-				x: a,
-				y: c,
-				width: Math.max(0, b - a),
-				height: Math.max(0, e - c)
-			} : {
-				x: along - e,
-				y: a,
-				width: Math.max(0, e - c),
-				height: Math.max(0, b - a)
-			};
-		};
-		const fill = (d) => d.series === "Other" && this.options.mode === "spine" ? ctx.theme.grid : ctx.palette.color(d.series);
-		const rects = ctx.marks("cells", "rect", cells, (d) => `${d.band}/${d.series}`).attr("fill", fill).attr("rx", 2);
-		ctx.set(rects, {
-			x: (d) => box(d).x,
-			y: (d) => box(d).y,
-			width: (d) => box(d).width,
-			height: (d) => box(d).height
-		}, this.vertical ? {
-			x: (d) => box(d).x,
-			width: (d) => box(d).width,
-			y: height,
-			height: 0
-		} : {
-			y: (d) => box(d).y,
-			height: (d) => box(d).height,
-			x: 0,
-			width: 0
-		}, 10);
-		ctx.hover(rects, (d) => ({
-			title: d.band,
-			color: fill(d),
-			rows: [[d.series, d.value], ["Share of column", `${(d.share * 100).toFixed(1)}%`]]
-		}));
-		const fits = (d) => box(d).width >= 28 && box(d).height >= 16;
-		const text = ctx.marks("cell-labels", "text", this.options.labels ? cells.filter(fits) : [], (d) => `${d.band}/${d.series}`).text((d) => `${Math.round(d.share * 100)}%`).attr("text-anchor", "middle").attr("font-size", 10.5).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => d.series === "Other" ? ctx.theme.inkSecondary : ctx.palette.inkOn(fill(d))).style("pointer-events", "none");
-		ctx.set(text, {
-			x: (d) => box(d).x + box(d).width / 2,
-			y: (d) => box(d).y + box(d).height / 2 + 3.5
-		});
-	}
-};
-export { MarimekkoBar, MekkoMode };

package/dist/charts/bars/ParetoBar.js

@@ -1,143 +0,0 @@
-import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
-import { ZoomAxis } from "../../core/ChartViewport.js";
-import { SampleData } from "../../data/SampleData.js";
-import { BandChart } from "./BandChart.js";
-import { BarRows } from "./BarRows.js";
-import { axisRight, curveLinear, curveStepAfter, descending, line, scaleLinear, sum } from "d3";
-// src/charts/bars/ParetoBar.ts
-var ParetoBarLine = /* @__PURE__ */ function(ParetoBarLine) {
-	ParetoBarLine["Linear"] = "linear";
-	ParetoBarLine["Step"] = "step";
-	return ParetoBarLine;
-}({});
-/** The vital few: sorted bars with a cumulative line, to find which causes account for most of an effect. */
-var ParetoBar = class extends BandChart {
-	static meta = {
-		id: "bar-pareto",
-		name: "Pareto chart",
-		family: ChartFamily.Statistical,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Sorts causes by size against a running total, to show how few of them account for most of the effect.",
-		tags: [
-			"80 20",
-			"cumulative",
-			"quality"
-		],
-		sample: (seed) => SampleData.categories(seed, 10, 1),
-		variants: {
-			lineShape: ["linear", "step"],
-			groupTail: [false, true],
-			threshold: [80, 0],
-			points: [true, false],
-			padding: [.15, .04]
-		}
-	};
-	zoomAxes() {
-		return ZoomAxis.X;
-	}
-	defaults() {
-		return {
-			x: "category",
-			y: "value",
-			orientation: Orientation.Vertical,
-			lineShape: "linear",
-			groupTail: false,
-			threshold: 80,
-			points: true,
-			padding: .15
-		};
-	}
-	get items() {
-		const { data, x, y, groupTail, threshold } = this.options;
-		const rows = BarRows.rollup(data, x, y).filter((row) => row.value > 0).sort((a, b) => descending(a.value, b.value));
-		const total = sum(rows, (row) => row.value) || 1;
-		const items = [];
-		let running = 0;
-		for (const row of rows) {
-			running += row.value;
-			items.push({
-				...row,
-				running: running / total * 100
-			});
-		}
-		const cut = threshold || 80;
-		const keep = items.findIndex((item) => item.running >= cut) + 1;
-		if (!groupTail || !keep || keep >= items.length - 1) return items;
-		const tail = items.slice(keep);
-		return [...items.slice(0, keep), {
-			band: `Other (${tail.length})`,
-			value: sum(tail, (item) => item.value),
-			running: 100
-		}];
-	}
-	get vertical() {
-		return true;
-	}
-	get legendPosition() {
-		return LegendPosition.None;
-	}
-	bandNames() {
-		return this.items.map((item) => item.band);
-	}
-	bandPadding() {
-		return this.options.padding;
-	}
-	valueExtent() {
-		return [0, sum(this.items, (item) => item.value) || 1];
-	}
-	valueScale(domain) {
-		return scaleLinear().domain(domain);
-	}
-	baseline() {
-		return null;
-	}
-	plotMargin() {
-		return {
-			...super.plotMargin(),
-			right: 40
-		};
-	}
-	drawBands(ctx, frame) {
-		const { items } = this;
-		const { y, points, threshold, lineShape } = this.options;
-		const { width, height } = ctx.plot;
-		const color = ctx.palette.color(y);
-		const percent = scaleLinear([0, 100], [height, 0]);
-		this.percentAxis(ctx, percent, width);
-		const bars = ctx.marks("bars", "path", items, (d) => d.band).attr("fill", color);
-		const at = (d) => frame.band(d.band) ?? 0;
-		ctx.set(bars, { d: (d) => frame.bar(at(d), frame.thick, 0, d.value) }, { d: (d) => frame.bar(at(d), frame.thick, 0, 0) }, 25);
-		ctx.hover(bars, (d) => ({
-			title: d.band,
-			color,
-			rows: [[y, d.value], ["Cumulative", `${d.running.toFixed(1)}%`]]
-		}));
-		const rule = ctx.marks("threshold", "line", threshold ? [threshold] : []).attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 1).attr("stroke-dasharray", "4 3");
-		ctx.set(rule, {
-			x1: 0,
-			x2: width,
-			y1: (d) => percent(d),
-			y2: (d) => percent(d)
-		});
-		const trend = line().curve(lineShape === "step" ? curveStepAfter : curveLinear).x((d) => frame.center(d.band)).y((d) => percent(d.running));
-		const stroke = ctx.theme.ink;
-		const path = ctx.marks("cumulative", "path", items.length ? [items] : []).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("d", (d) => trend(d));
-		ctx.drawOn(path);
-		const dots = ctx.marks("points", "circle", points ? items : [], (d) => d.band).attr("r", 4).attr("fill", stroke).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
-		ctx.set(dots, {
-			cx: (d) => frame.center(d.band),
-			cy: (d) => percent(d.running)
-		});
-		ctx.hover(dots, (d) => ({
-			title: d.band,
-			rows: [["Cumulative", `${d.running.toFixed(1)}%`]]
-		}));
-	}
-	percentAxis(ctx, percent, width) {
-		const axis = ctx.group("axis-percent").attr("transform", `translate(${width},0)`).call(axisRight(percent).ticks(5).tickSize(0).tickFormat((value) => `${value}%`));
-		axis.select(".domain").attr("stroke", "none");
-		axis.selectAll("text").attr("fill", ctx.theme.inkSecondary).attr("font-size", 11).attr("font-family", ctx.theme.fontFamily);
-	}
-};
-export { ParetoBar, ParetoBarLine };

package/dist/charts/comparison/PanelChart.js

@@ -1,70 +0,0 @@
-import { Chart2D } from "../../core/Chart2D.js";
-import { Tally } from "./Tally.js";
-import { max, select } from "d3";
-// src/charts/comparison/PanelChart.ts
-/** How panels wrap across the plot. */
-var PanelFlow = /* @__PURE__ */ function(PanelFlow) {
-	PanelFlow["Auto"] = "auto";
-	PanelFlow["Row"] = "row";
-	PanelFlow["Column"] = "column";
-	return PanelFlow;
-}({});
-var TITLE = 18;
-var GAP_Y = 8;
-/** A wrapped grid of small panels sharing one reading: each subclass fills a panel with its marks. */
-var PanelChart = class extends Chart2D {
-	panels(ctx, keys, gutter) {
-		const { width, height } = ctx.plot;
-		const n = keys.length, gapY = gutter.gapY ?? GAP_Y;
-		const flow = this.options.flow ?? "auto";
-		const columns = Math.max(1, flow === "row" ? n : flow === "column" ? 1 : Math.min(n, Math.ceil(Math.sqrt(n * width / height / 1.6))));
-		const rows = Math.max(1, Math.ceil(n / columns));
-		const side = (height - gutter.bottom) / rows < 58;
-		const titleWidth = side ? Math.min(84, (max(keys, (key) => Tally.width(key)) ?? 0) + 8) : 0;
-		const left = gutter.left + titleWidth;
-		const cellWidth = (width - left - (columns - 1) * gutter.gapX) / columns;
-		const cellHeight = (height - gutter.bottom - (rows - 1) * gapY) / rows;
-		return keys.map((key, index) => {
-			const column = index % columns, row = Math.floor(index / columns);
-			const title = side ? 0 : TITLE;
-			return {
-				key,
-				index,
-				side,
-				room: side ? titleWidth - 8 : Math.max(4, cellWidth) + gutter.gapX - 4,
-				x: left + column * (cellWidth + gutter.gapX),
-				y: row * (cellHeight + gapY) + title,
-				width: Math.max(4, cellWidth),
-				height: Math.max(4, cellHeight - title),
-				left: column === 0,
-				bottom: index + columns >= n
-			};
-		});
-	}
-	/** One `<g>` per panel, with its title, ready for `fill`. */
-	eachPanel(ctx, panels, fill) {
-		ctx.marks("panels", "g", panels, (panel) => panel.key).attr("transform", (panel) => `translate(${panel.x},${panel.y})`).each(function(panel) {
-			const group = select(this);
-			ctx.text(ctx.marks("title", "text", [panel], (d) => d.key, group), 11, "ink").attr("font-weight", 600).attr("x", panel.side ? -panel.x : 0).attr("y", panel.side ? panel.height / 2 + 4 : -6).text(Tally.clip(panel.key, panel.room));
-			fill(panel, group);
-		});
-	}
-	/** Recessive grid across a panel, labelled when `labelled`. */
-	panelGrid(ctx, group, panel, scale, axis, labelled) {
-		const ticks = scale.ticks(axis === "y" ? Math.max(2, Math.floor(panel.height / 32)) : Math.max(2, Math.floor(panel.width / 56)));
-		const reach = max(scale.domain(), (value) => Math.abs(value)) ?? 0;
-		const rules = ctx.marks("rules", "line", ticks, (tick) => tick, group).attr("stroke", ctx.theme.grid);
-		if (axis === "y") rules.attr("x1", 0).attr("x2", panel.width).attr("y1", (tick) => scale(tick)).attr("y2", (tick) => scale(tick));
-		else rules.attr("y1", 0).attr("y2", panel.height).attr("x1", (tick) => scale(tick)).attr("x2", (tick) => scale(tick));
-		const room = axis === "y" ? 12 : 34;
-		const stacked = axis === "y" && panel.y > TITLE;
-		const spaced = ticks.filter((tick, i) => i === 0 || Math.abs(scale(tick) - scale(ticks[0])) / i >= room).filter((tick) => !stacked || scale(tick) >= 5);
-		const labels = ctx.text(ctx.marks("ticks", "text", labelled ? spaced : [], (tick) => tick, group), 10, "muted").text((tick) => tick.toLocaleString("en", {
-			notation: reach >= 1e4 ? "compact" : "standard",
-			maximumFractionDigits: reach < 10 ? 1 : 0
-		}));
-		if (axis === "y") labels.attr("text-anchor", "end").attr("x", -5).attr("y", (tick) => scale(tick) + 3);
-		else labels.attr("text-anchor", "middle").attr("y", panel.height + 12).attr("x", (tick) => scale(tick));
-	}
-};
-export { PanelChart, PanelFlow };

package/dist/charts/comparison/SmallMultipleBars.js

@@ -1,134 +0,0 @@
-import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { PanelChart, PanelFlow } from "./PanelChart.js";
-import { ComparisonSort, Tally } from "./Tally.js";
-import { settleMarks } from "./settleMarks.js";
-import { max, mean, min, rollup, scaleBand, scaleLinear } from "d3";
-// src/charts/comparison/SmallMultipleBars.ts
-/** Which field makes the panels. */
-var BarFacet = /* @__PURE__ */ function(BarFacet) {
-	BarFacet["Series"] = "series";
-	BarFacet["Category"] = "category";
-	return BarFacet;
-}({});
-/** One small bar chart per group, sharing scales, for comparing shapes that overlap when stacked in one plot. */
-var SmallMultipleBars = class extends PanelChart {
-	static meta = {
-		id: "comparison-small-multiple-bars",
-		name: "Small multiple bars",
-		family: ChartFamily.Comparison,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Repeats a bar chart across panels of a grouping field so each group shows its own shape on shared axes.",
-		tags: [
-			"facet",
-			"small multiples",
-			"panel chart"
-		],
-		sample: (seed) => SampleData.categories(seed, 7, 4),
-		variants: {
-			facet: ["series", "category"],
-			orientation: [Orientation.Vertical, Orientation.Horizontal],
-			flow: [
-				PanelFlow.Auto,
-				PanelFlow.Row,
-				PanelFlow.Column
-			],
-			freeScale: [false, true],
-			sort: [ComparisonSort.Input, ComparisonSort.Descending]
-		},
-		valid: (values) => !(values.freeScale && values.flow === PanelFlow.Column && values.orientation === Orientation.Horizontal)
-	};
-	defaults() {
-		return {
-			legend: LegendPosition.None,
-			category: "category",
-			series: "series",
-			value: "value",
-			facet: "series",
-			orientation: Orientation.Vertical,
-			flow: PanelFlow.Auto,
-			freeScale: false,
-			sort: ComparisonSort.Input
-		};
-	}
-	plotMargin() {
-		return {
-			top: 6,
-			right: 16,
-			bottom: 8,
-			left: 16
-		};
-	}
-	draw(ctx) {
-		const { data, category, series, value, facet, orientation, freeScale, sort } = this.options;
-		const panelField = facet === "series" ? series : category, barField = facet === "series" ? category : series;
-		const clean = data.filter((row) => Tally.num(row[value]) !== null);
-		const cells = rollup(clean, (rows) => mean(rows, (row) => Tally.num(row[value])) ?? 0, (row) => String(row[panelField] ?? ""), (row) => String(row[barField] ?? ""));
-		const keys = [...cells.keys()];
-		const names = [...new Set(clean.map((row) => String(row[barField] ?? "")))];
-		const every = [...cells.values()].flatMap((line) => [...line.values()]);
-		const vertical = orientation === Orientation.Vertical;
-		const longest = Math.min(64, (max(names, (name) => Tally.width(name)) ?? 0) + 6);
-		const widest = Tally.width(Tally.format(Math.round(max(every, Math.abs) ?? 0))) + 8;
-		const axisLeft = vertical ? widest : longest;
-		const panels = this.panels(ctx, keys, {
-			left: axisLeft,
-			bottom: 16,
-			gapX: freeScale ? vertical ? widest + 6 : 18 : 12,
-			gapY: freeScale && !vertical ? 20 : void 0
-		});
-		this.eachPanel(ctx, panels, (panel, group) => {
-			const line = cells.get(panel.key);
-			const bars = Tally.sorted([...line].map(([band, v]) => ({
-				panel: panel.key,
-				band,
-				value: v
-			})), sort, (d) => d.value, (d) => d.band);
-			const order = sort === ComparisonSort.Input ? names.filter((name) => line.has(name)) : bars.map((d) => d.band);
-			const span = freeScale ? [...line.values()] : every;
-			const low = Math.min(0, min(span) ?? 0), high = Math.max(0, max(span) ?? 1);
-			const scale = scaleLinear([low, high > low ? high : 1], vertical ? [panel.height, 0] : [0, panel.width]).nice();
-			const band = scaleBand(order, vertical ? [0, panel.width] : [0, panel.height]).padding(.16);
-			this.panelGrid(ctx, group, panel, scale, vertical ? "y" : "x", freeScale || (vertical ? panel.left : panel.bottom));
-			const color = ctx.palette.color(panel.key);
-			const zero = scale(0), thick = band.bandwidth();
-			const rx = Math.min(3, thick / 2);
-			const marks = ctx.marks("bars", "rect", bars, (d) => d.band, group).attr("fill", color).attr("rx", rx);
-			settleMarks(ctx, marks, vertical ? {
-				x: (d) => band(d.band),
-				width: thick,
-				y: (d) => Math.min(scale(d.value), zero),
-				height: (d) => Math.abs(scale(d.value) - zero)
-			} : {
-				y: (d) => band(d.band),
-				height: thick,
-				x: (d) => Math.min(scale(d.value), zero),
-				width: (d) => Math.abs(scale(d.value) - zero)
-			}, vertical ? {
-				y: zero,
-				height: 0
-			} : {
-				x: zero,
-				width: 0
-			}, 10);
-			ctx.hover(marks, (d) => ({
-				title: d.panel,
-				color,
-				rows: [[d.band, Tally.format(d.value)]]
-			}));
-			this.bandNames(ctx, group, panel, order, band, vertical, longest);
-		});
-	}
-	bandNames(ctx, group, panel, order, band, vertical, room) {
-		const step = band.step() || 1;
-		const labelled = vertical ? panel.bottom : panel.left && !panel.side;
-		const widest = max(order, (name) => Tally.width(name)) ?? 0;
-		const every = Math.max(1, Math.ceil((vertical ? Math.min(widest, 40) + 6 : 12) / step));
-		const shown = labelled ? order.filter((_, i) => i % every === 0) : [];
-		const texts = ctx.text(ctx.marks("names", "text", shown, (d) => d, group), 10, "secondary").text((d) => Tally.clip(d, vertical ? step * every - 2 : room - 6)).attr("text-anchor", vertical ? "middle" : "end");
-		if (vertical) texts.attr("x", (d) => band(d) + band.bandwidth() / 2).attr("y", panel.height + 12);
-		else texts.attr("x", -5).attr("y", (d) => band(d) + band.bandwidth() / 2 + 3);
-	}
-};
-export { BarFacet, SmallMultipleBars };

package/dist/charts/comparison/SpanChart.js

@@ -1,118 +0,0 @@
-import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { BandValueChart } from "./BandValueChart.js";
-import { ComparisonSort, ComparisonSpread, Tally } from "./Tally.js";
-import { settleMarks } from "./settleMarks.js";
-// src/charts/comparison/SpanChart.ts
-/** What marks the centre of a span. */
-var SpanMarker = /* @__PURE__ */ function(SpanMarker) {
-	SpanMarker["None"] = "none";
-	SpanMarker["Median"] = "median";
-	SpanMarker["Mean"] = "mean";
-	return SpanMarker;
-}({});
-/** How far each group reaches: a bar from low to high, derived from raw observations. */
-var SpanChart = class extends BandValueChart {
-	static meta = {
-		id: "comparison-span",
-		name: "Span chart",
-		family: ChartFamily.Comparison,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Shows the low-to-high reach of each group as a floating bar, for comparing ranges rather than totals.",
-		tags: [
-			"range bar",
-			"difference chart",
-			"min max"
-		],
-		sample: (seed) => SampleData.distribution(seed, 60, 6),
-		variants: {
-			statistic: [
-				ComparisonSpread.Range,
-				ComparisonSpread.Iqr,
-				ComparisonSpread.Decile
-			],
-			orientation: [Orientation.Horizontal, Orientation.Vertical],
-			sort: [ComparisonSort.Input, ComparisonSort.Descending],
-			marker: [
-				"median",
-				"mean",
-				"none"
-			],
-			ends: [false, true]
-		}
-	};
-	defaults() {
-		return {
-			legend: LegendPosition.None,
-			group: "group",
-			value: "value",
-			orientation: Orientation.Horizontal,
-			statistic: ComparisonSpread.Range,
-			sort: ComparisonSort.Input,
-			marker: "median",
-			ends: false
-		};
-	}
-	bandLayout() {
-		const { data, group, value, statistic, sort, ends } = this.options;
-		const all = Tally.group(data, group, value).map((tally) => {
-			const [low, high] = Tally.interval(tally, statistic);
-			return {
-				tally,
-				low,
-				high
-			};
-		});
-		const items = Tally.sorted(all, sort, (d) => d.high - d.low, (d) => d.tally.key);
-		const reach = items.flatMap((d) => [d.low, d.high]);
-		const lo = Math.min(...reach), hi = Math.max(...reach), pad = ends && items.length ? (hi - lo) * .09 : 0;
-		return {
-			bands: items.map((d) => d.tally.key),
-			items,
-			values: items.length ? [lo - pad, hi + pad] : []
-		};
-	}
-	plotBands(ctx, { items, band, mid, value }) {
-		const { marker, ends } = this.options;
-		const fill = ctx.palette.color(this.options.value);
-		const width = band.bandwidth();
-		const along = (d) => mid(d.tally.key);
-		const centre = (d) => marker === "mean" ? d.tally.mean : d.tally.median;
-		const tip = (d) => ({
-			title: d.tally.key,
-			color: fill,
-			rows: [
-				["Low", Tally.format(d.low)],
-				["High", Tally.format(d.high)],
-				["Span", Tally.format(d.high - d.low)]
-			]
-		});
-		const bars = ctx.marks("bars", "rect", items, (d) => d.tally.key).attr("fill", fill).attr("rx", Math.min(4, width / 2));
-		settleMarks(ctx, bars, this.span(along, width, (d) => value(d.low), (d) => value(d.high)), this.span(along, width, (d) => value(centre(d)), (d) => value(centre(d))), 30);
-		ctx.hover(bars, tip);
-		const ticks = ctx.marks("centres", "line", marker === "none" ? [] : items, (d) => d.tally.key).attr("stroke", ctx.palette.inkOn(fill)).attr("stroke-width", 2);
-		settleMarks(ctx, ticks, this.cross(along, (d) => value(centre(d)), width / 2 - 1));
-		const labels = ends ? items.flatMap((d) => [{
-			key: `${d.tally.key}/low`,
-			d,
-			at: d.low,
-			sign: this.vertical ? 1 : -1
-		}, {
-			key: `${d.tally.key}/high`,
-			d,
-			at: d.high,
-			sign: this.vertical ? -1 : 1
-		}]) : [];
-		const shift = (d) => d.sign * (this.vertical ? d.sign > 0 ? 13 : 5 : 5);
-		const texts = ctx.text(ctx.marks("ends", "text", labels, (d) => d.key)).text((d) => Tally.format(Math.round(d.at))).attr("text-anchor", (d) => this.vertical ? "middle" : d.sign > 0 ? "start" : "end");
-		settleMarks(ctx, texts, this.vertical ? {
-			x: (d) => along(d.d),
-			y: (d) => value(d.at) + shift(d)
-		} : {
-			y: (d) => along(d.d) + 4,
-			x: (d) => value(d.at) + shift(d)
-		});
-	}
-};
-export { SpanChart, SpanMarker };