@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/bars/DumbbellChart.js

@@ -0,0 +1,160 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows } from "./BarRows.js";
+import { descending, max, min } from "d3";
+// src/charts/bars/DumbbellChart.ts
+var DumbbellChartSort = /* @__PURE__ */ function(DumbbellChartSort) {
+	DumbbellChartSort["Data"] = "data";
+	DumbbellChartSort["Gap"] = "gap";
+	DumbbellChartSort["Start"] = "start";
+	DumbbellChartSort["End"] = "end";
+	return DumbbellChartSort;
+}({});
+var DumbbellChartConnector = /* @__PURE__ */ function(DumbbellChartConnector) {
+	DumbbellChartConnector["Line"] = "line";
+	DumbbellChartConnector["Arrow"] = "arrow";
+	DumbbellChartConnector["Band"] = "band";
+	return DumbbellChartConnector;
+}({});
+/** Show the change between two states across categories, such as before and after. */
+var DumbbellChart = class extends BandChart {
+	static meta = {
+		id: "bar-dumbbell",
+		name: "Dumbbell chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Joins two values per category so the size and direction of each gap reads directly.",
+		tags: [
+			"connected dot",
+			"gap",
+			"before after"
+		],
+		sample: (seed) => SampleData.categories(seed, 8, 2),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			sort: [
+				"data",
+				"gap",
+				"start",
+				"end"
+			],
+			connector: [
+				"line",
+				"arrow",
+				"band"
+			],
+			labels: [false, true],
+			zero: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			series: "series",
+			orientation: Orientation.Horizontal,
+			sort: "data",
+			connector: "line",
+			labels: false,
+			zero: false
+		};
+	}
+	get names() {
+		const { data, x, y, series, from, to } = this.options;
+		const found = BarRows.pivot(data, x, series, y).series;
+		return [from ?? found[0] ?? "Start", to ?? found[found.length - 1] ?? "End"];
+	}
+	get pairs() {
+		const { data, x, y, series, sort } = this.options;
+		const pivot = BarRows.pivot(data, x, series, y);
+		const [from, to] = this.names;
+		const rows = pivot.bands.filter((band) => pivot.has(band, from) && pivot.has(band, to)).map((band) => ({
+			band,
+			start: pivot.cell(band, from),
+			end: pivot.cell(band, to)
+		}));
+		const rank = (d) => sort === "gap" ? d.end - d.start : sort === "start" ? d.start : d.end;
+		return sort === "data" ? rows : rows.sort((a, b) => descending(rank(a), rank(b)));
+	}
+	bandNames() {
+		return this.pairs.map((pair) => pair.band);
+	}
+	bandPadding() {
+		return .1;
+	}
+	baseline() {
+		return this.options.zero ? 0 : null;
+	}
+	reserve() {
+		const room = this.options.labels ? this.vertical ? 22 : 40 : 10;
+		return [room, room];
+	}
+	valueExtent() {
+		const values = this.pairs.flatMap((pair) => [pair.start, pair.end]);
+		const low = min(values) ?? 0, high = max(values) ?? 1;
+		return this.options.zero ? [Math.min(0, low), Math.max(0, high)] : [low, high];
+	}
+	legendItems() {
+		return this.names.map((key) => ({
+			key,
+			color: this.palette.color(key)
+		}));
+	}
+	drawBands(ctx, frame) {
+		const { pairs } = this;
+		const [from, to] = this.names;
+		const { connector, labels } = this.options;
+		const fromColor = ctx.palette.color(from), toColor = ctx.palette.color(to);
+		const arrow = connector === "arrow";
+		const unit = frame.value.invert(frame.value(0) + 1) - frame.value.invert(frame.value(0));
+		const shaft = (d, end) => {
+			const away = Math.abs(frame.value(d.end) - frame.value(d.start)) > 10 ? Math.sign(d.end - d.start) * Math.abs(unit) * 6 : 0;
+			return frame.stem(frame.center(d.band), d.start, end - (arrow ? away : 0));
+		};
+		const bands = ctx.marks("bridge", "path", connector === "band" ? pairs : [], (d) => d.band).attr("fill", ctx.theme.axis);
+		ctx.set(bands, { d: (d) => frame.bar(frame.center(d.band) - 5, 10, d.start, d.end, 0) }, { d: (d) => frame.bar(frame.center(d.band) - 5, 10, d.start, d.start, 0) }, 15);
+		const lines = ctx.marks("links", "line", connector === "band" ? [] : pairs, (d) => d.band).attr("stroke", ctx.theme.axis).attr("stroke-width", 2);
+		ctx.set(lines, {
+			x1: (d) => shaft(d, d.end).x1,
+			y1: (d) => shaft(d, d.end).y1,
+			x2: (d) => shaft(d, d.end).x2,
+			y2: (d) => shaft(d, d.end).y2
+		});
+		const starts = ctx.marks("start", "circle", pairs, (d) => d.band).attr("r", 6).attr("fill", fromColor).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(starts, {
+			cx: (d) => frame.point(frame.center(d.band), d.start)[0],
+			cy: (d) => frame.point(frame.center(d.band), d.start)[1]
+		});
+		const ends = ctx.marks("end", "path", pairs, (d) => d.band).attr("fill", toColor).attr("stroke", ctx.theme.surface).attr("stroke-width", arrow ? 0 : 2).attr("d", (d) => this.endShape(arrow, frame.vertical, d));
+		ctx.set(ends, { transform: (d) => `translate(${frame.point(frame.center(d.band), d.end).join(",")})` }, { transform: (d) => `translate(${frame.point(frame.center(d.band), d.start).join(",")})` }, 15);
+		for (const marks of [starts, ends]) ctx.hover(marks, (d) => ({
+			title: d.band,
+			rows: [
+				[from, d.start],
+				[to, d.end],
+				["Change", +(d.end - d.start).toFixed(2)]
+			]
+		}));
+		const reach = this.formatter(frame);
+		this.endLabels(ctx, frame, !labels ? [] : pairs.map((d) => {
+			const below = d.end < d.start;
+			const nudge = below === frame.vertical ? 8 : -8;
+			const change = d.end - d.start;
+			return {
+				key: d.band,
+				at: frame.center(d.band),
+				value: frame.value.invert(frame.value(d.end) + nudge),
+				text: `${change > 0 ? "+" : ""}${reach(change)}`,
+				below
+			};
+		}));
+	}
+	endShape(arrow, vertical, d) {
+		if (!arrow) return "M-6,0A6,6 0 1 1 6,0A6,6 0 1 1 -6,0Z";
+		const sign = d.end >= d.start ? 1 : -1;
+		return vertical ? `M0,${-sign * 7}L6,${sign * 5}L-6,${sign * 5}Z` : `M${sign * 7},0L${-sign * 5},6L${-sign * 5},-6Z`;
+	}
+};
+export { DumbbellChart, DumbbellChartConnector, DumbbellChartSort };

package/dist/charts/bars/FacetedBarChart.js

@@ -0,0 +1,179 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows } from "./BarRows.js";
+import { descending, max, mean, scaleBand, scaleLinear } from "d3";
+// src/charts/bars/FacetedBarChart.ts
+var FacetedBarScale = /* @__PURE__ */ function(FacetedBarScale) {
+	FacetedBarScale["Shared"] = "shared";
+	FacetedBarScale["Free"] = "free";
+	return FacetedBarScale;
+}({});
+var FacetedBarMark = /* @__PURE__ */ function(FacetedBarMark) {
+	FacetedBarMark["Bar"] = "bar";
+	FacetedBarMark["Lollipop"] = "lollipop";
+	return FacetedBarMark;
+}({});
+var FacetedBarSort = /* @__PURE__ */ function(FacetedBarSort) {
+	FacetedBarSort["Data"] = "data";
+	FacetedBarSort["Total"] = "total";
+	return FacetedBarSort;
+}({});
+var TITLE = 20;
+/** Small multiples of a bar chart, one panel per series, when overlaid bars would be unreadable. */
+var FacetedBarChart = class extends Chart2D {
+	static meta = {
+		id: "bar-faceted",
+		name: "Faceted bar chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Splits one bar chart into aligned panels per series, so each profile reads alone on a common frame.",
+		tags: [
+			"small multiples",
+			"trellis",
+			"panels"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 3),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			scale: ["shared", "free"],
+			mark: ["bar", "lollipop"],
+			sort: ["data", "total"],
+			ghost: [false, true]
+		},
+		valid: (values) => !(values.ghost && values.mark === "lollipop")
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			series: "series",
+			orientation: Orientation.Horizontal,
+			scale: "shared",
+			mark: "bar",
+			sort: "data",
+			ghost: false
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	get horizontal() {
+		return this.options.orientation === Orientation.Horizontal;
+	}
+	draw(ctx) {
+		const { data, x, y, series, sort, scale, mark, ghost } = this.options;
+		const pivot = BarRows.pivot(data, x, series, y);
+		const bands = sort === "total" ? [...pivot.bands].sort((a, b) => descending(pivot.total(a), pivot.total(b))) : pivot.bands;
+		const shared = max(bands.flatMap((band) => pivot.series.map((name) => pivot.cell(band, name)))) || 1;
+		const average = (band) => mean(pivot.series, (name) => pivot.cell(band, name)) ?? 0;
+		const { width, height } = ctx.plot;
+		const count = Math.max(1, pivot.series.length);
+		const gutter = this.horizontal ? Math.min(90, (max(bands, (band) => Math.min(band.length, 12)) ?? 0) * 6.2 + 10) : 30;
+		const gap = 14;
+		const panels = pivot.series.map((name, i) => {
+			const reach = scale === "free" ? max(bands, (band) => pivot.cell(band, name)) || 1 : shared;
+			if (this.horizontal) {
+				const w = (width - gutter - gap * (count - 1)) / count;
+				return {
+					name,
+					x: gutter + i * (w + gap),
+					y: 0,
+					width: w,
+					height,
+					band: scaleBand(bands, [TITLE, height - 16]).padding(.2),
+					value: scaleLinear([0, reach], [0, w]).nice()
+				};
+			}
+			const h = (height - 16 - gap * (count - 1)) / count;
+			const py = i * (h + gap);
+			return {
+				name,
+				x: gutter,
+				y: py,
+				width: width - gutter,
+				height: h,
+				band: scaleBand(bands, [0, width - gutter]).padding(.2),
+				value: scaleLinear([0, reach], [h, TITLE]).nice()
+			};
+		});
+		panels.forEach((panel, i) => this.drawPanel(ctx, panel, i, pivot.cell, bands, mark, ghost ? average : null));
+		this.drawBandAxis(ctx, panels, bands, gutter);
+		ctx.root.selectAll("[class^=\"m-panel-\"]").filter((_, i) => i >= panels.length).remove();
+	}
+	drawPanel(root, panel, index, cell, bands, mark, ghost) {
+		const ctx = root.nest(`translate(${panel.x},${panel.y})`, `panel-${index}`);
+		const color = root.palette.color(panel.name);
+		const frame = new BarFrame(!this.horizontal, panel.value, panel.band);
+		const items = bands.map((band) => ({
+			band,
+			value: Math.max(0, cell(band, panel.name))
+		}));
+		const at = (d) => panel.band(d.band) ?? 0;
+		const reach = panel.value.domain()[1] ?? 1;
+		const ticks = panel.value.ticks(this.horizontal ? Math.max(2, Math.floor(panel.width / 50)) : 2);
+		const lines = ctx.marks("grid", "line", ticks, (d) => d).attr("stroke", root.theme.grid).attr("stroke-width", 1);
+		if (this.horizontal) lines.attr("x1", (d) => panel.value(d)).attr("x2", (d) => panel.value(d)).attr("y1", TITLE).attr("y2", panel.height - 16);
+		else lines.attr("x1", 0).attr("x2", panel.width).attr("y1", (d) => panel.value(d)).attr("y2", (d) => panel.value(d));
+		const tickText = ctx.text(ctx.marks("ticks", "text", ticks.filter((tick) => tick > 0 || !this.horizontal), (d) => d), 10, "muted").text((d) => Scales.format(d, reach)).attr("text-anchor", this.horizontal ? "middle" : "end");
+		if (this.horizontal) tickText.attr("x", (d) => panel.value(d)).attr("y", panel.height - 3);
+		else tickText.attr("x", -5).attr("y", (d) => panel.value(d) + 3.5);
+		const ghosts = ctx.marks("ghosts", "path", ghost ? items : [], (d) => d.band).attr("fill", root.theme.grid);
+		const wide = Math.min(panel.band.step() * .96, panel.band.bandwidth() + 6);
+		ctx.set(ghosts, { d: (d) => frame.bar(frame.center(d.band) - wide / 2, wide, 0, Math.min(reach, ghost(d.band)), 2) });
+		const bars = ctx.marks("bars", "path", mark === "bar" ? items : [], (d) => d.band).attr("fill", color);
+		ctx.set(bars, { d: (d) => frame.bar(at(d), frame.thick, 0, d.value) }, { d: (d) => frame.bar(at(d), frame.thick, 0, 0) }, 14);
+		const stems = ctx.marks("stems", "line", mark === "lollipop" ? items : [], (d) => d.band).attr("stroke", color).attr("stroke-width", 2);
+		const stem = (d) => frame.stem(frame.center(d.band), 0, d.value);
+		ctx.set(stems, {
+			x1: (d) => stem(d).x1,
+			y1: (d) => stem(d).y1,
+			x2: (d) => stem(d).x2,
+			y2: (d) => stem(d).y2
+		});
+		const heads = ctx.marks("heads", "circle", mark === "lollipop" ? items : [], (d) => d.band).attr("r", 5).attr("fill", color).attr("stroke", root.theme.surface).attr("stroke-width", 2);
+		ctx.set(heads, {
+			cx: (d) => frame.point(frame.center(d.band), d.value)[0],
+			cy: (d) => frame.point(frame.center(d.band), d.value)[1]
+		});
+		const tip = (d) => ({
+			title: d.band,
+			color,
+			rows: [[panel.name, d.value]]
+		});
+		ctx.hover(bars, tip);
+		ctx.hover(heads, tip);
+		const title = ctx.text(ctx.marks("title", "text", [panel.name]), 11, "ink").attr("font-weight", 600).text((d) => BarRows.clip(d, Math.floor(panel.width / 6.6)));
+		ctx.set(title, {
+			x: this.horizontal ? 0 : 2,
+			y: 11
+		});
+	}
+	drawBandAxis(ctx, panels, bands, gutter) {
+		const panel = panels[panels.length - 1];
+		if (!panel) {
+			ctx.group("band-axis").selectAll("*").remove();
+			return;
+		}
+		const group = ctx.group("band-axis");
+		if (this.horizontal) {
+			group.attr("transform", "translate(0,0)");
+			const labels = ctx.text(ctx.marks("labels", "text", bands, (d) => d, group), 10.5).attr("text-anchor", "end").text((d) => BarRows.clip(d, 12));
+			ctx.set(labels, {
+				x: gutter - 8,
+				y: (d) => panel.band(d) + panel.band.bandwidth() / 2 + 3.5
+			});
+		} else {
+			const every = Math.max(1, Math.ceil(((max(bands, (band) => Math.min(band.length, 10)) ?? 0) * 6.2 + 6) / (panel.band.step() || 1)));
+			const labels = ctx.text(ctx.marks("labels", "text", bands.filter((_, i) => i % every === 0), (d) => d, group), 10.5).attr("text-anchor", "middle").text((d) => BarRows.clip(d, 10));
+			ctx.set(labels, {
+				x: (d) => gutter + panel.band(d) + panel.band.bandwidth() / 2,
+				y: panel.y + panel.height + 12
+			});
+		}
+	}
+};
+export { FacetedBarChart, FacetedBarMark, FacetedBarScale, FacetedBarSort };

package/dist/charts/bars/GroupedStackedBar.js

@@ -0,0 +1,156 @@
+import { ChartFamily, DataShape, Dimension, Orientation, StackMode } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { descending, max, sum } from "d3";
+// src/charts/bars/GroupedStackedBar.ts
+var SCENARIOS = [
+	"Plan",
+	"Actual",
+	"Forecast"
+];
+var sample = (seed) => SampleData.categories(seed, 5, 6).map((row, i) => ({
+	category: row.category,
+	group: SCENARIOS[Math.floor(i / 2) % 3],
+	series: i % 2 ? "Online" : "Retail",
+	value: row.value
+}));
+/** Stacks inside groups: compare a composition across two categorical levels, such as channel mix by scenario and region. */
+var GroupedStackedBar = class extends BandChart {
+	static meta = {
+		id: "bar-grouped-stacked",
+		name: "Grouped stacked bar",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Puts a stacked column per group inside every band, for three-way comparison of category, group and part.",
+		tags: ["clustered stacked", "multi level"],
+		sample,
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			stack: [StackMode.Stacked, StackMode.Normalized],
+			sort: [BarSort.Data, BarSort.Descending],
+			ranked: [false, true],
+			totals: [false, true],
+			padding: [.22, .1]
+		},
+		valid: (values) => !(values.totals && values.stack === StackMode.Normalized)
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			group: "group",
+			series: "series",
+			orientation: Orientation.Vertical,
+			stack: StackMode.Stacked,
+			sort: BarSort.Data,
+			ranked: false,
+			totals: false,
+			padding: .22
+		};
+	}
+	get layout() {
+		const { data, x, y, group, series, sort, stack, ranked } = this.options;
+		const merged = (data ?? []).map((row) => ({
+			...row,
+			__key: `${BarRows.label(row[x])}\u0000${BarRows.label(row[group])}`
+		}));
+		const pivot = BarRows.pivot(merged, "__key", series, y);
+		const split = (key) => key.split("\0");
+		const groups = [...new Set(pivot.bands.map((key) => split(key)[1]))];
+		const totals = /* @__PURE__ */ new Map();
+		for (const key of pivot.bands) totals.set(split(key)[0], (totals.get(split(key)[0]) ?? 0) + pivot.total(key));
+		const bands = BarRows.order([...totals.keys()], sort, (band) => totals.get(band), (band) => band);
+		return {
+			pieces: bands.flatMap((band) => groups.flatMap((name) => {
+				const key = `${band}\u0000${name}`;
+				const cells = pivot.series.map((part) => ({
+					part,
+					value: Math.max(0, pivot.cell(key, part))
+				})).filter((cell) => cell.value > 0);
+				if (ranked) cells.sort((a, b) => descending(a.value, b.value));
+				const scale = stack === StackMode.Normalized ? 100 / (sum(cells, (cell) => cell.value) || 1) : 1;
+				let cursor = 0;
+				return cells.map(({ part, value }, i) => {
+					const start = cursor;
+					cursor += value * scale;
+					return {
+						band,
+						group: name,
+						series: part,
+						value,
+						start,
+						end: cursor,
+						outer: i === cells.length - 1
+					};
+				});
+			})),
+			groups,
+			bands,
+			series: pivot.series
+		};
+	}
+	bandNames() {
+		return this.layout.bands;
+	}
+	bandPadding() {
+		return this.options.padding;
+	}
+	unit() {
+		return this.options.stack === StackMode.Normalized ? "%" : "";
+	}
+	valueExtent() {
+		return [0, max(this.layout.pieces, (piece) => piece.end) || 1];
+	}
+	reserve() {
+		return [0, this.options.totals ? this.vertical ? 28 : 54 : this.vertical ? 16 : 18];
+	}
+	drawBands(ctx, frame) {
+		const { pieces, groups, bands, series } = this.layout;
+		series.forEach(ctx.palette.color);
+		const pitch = frame.thick / Math.max(1, groups.length);
+		const width = Math.max(1, pitch - 3);
+		const at = (band, name) => (frame.band(band) ?? 0) + groups.indexOf(name) * pitch;
+		const shape = (d, to) => frame.bar(at(d.band, d.group), width, d.start, to, d.outer ? 3 : 0, d.start ? 2 : 0);
+		const bars = ctx.marks("bars", "path", pieces, (d) => `${d.band}/${d.group}/${d.series}`).attr("fill", (d) => ctx.palette.color(d.series));
+		ctx.set(bars, { d: (d) => shape(d, d.end) }, { d: (d) => shape(d, d.start) }, 6);
+		ctx.hover(bars, (d) => ({
+			title: `${d.band} · ${d.group}`,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value]]
+		}));
+		const columns = bands.flatMap((band) => groups.map((name) => {
+			const own = pieces.filter((piece) => piece.band === band && piece.group === name);
+			return {
+				band,
+				name,
+				top: max(own, (piece) => piece.end) ?? 0,
+				total: sum(own, (piece) => piece.value)
+			};
+		})).filter((column) => column.top > 0);
+		this.drawTags(ctx, frame, columns, pitch, width, at);
+	}
+	/** Each column names its group at the tip: whole word when it fits, first letter otherwise. */
+	drawTags(ctx, frame, columns, pitch, width, at) {
+		const { totals } = this.options;
+		const { vertical } = frame;
+		const longest = Math.max(0, ...columns.map((column) => column.name.length));
+		const word = !vertical || longest * 5.4 <= pitch;
+		const format = this.formatter(frame);
+		const tag = (d) => word ? d.name : d.name.slice(0, 1);
+		const tip = (d, axis) => frame.point(at(d.band, d.name) + width / 2 + (vertical ? 0 : 3), d.top, vertical ? -4 : 4)[axis];
+		const tags = ctx.text(ctx.marks("tags", "text", pitch >= 8 ? columns : [], (d) => `${d.band}/${d.name}`), 9.5, "muted").attr("text-anchor", vertical ? "middle" : "start").style("pointer-events", "none").text((d) => totals && !vertical ? `${tag(d)} ${format(d.total)}` : tag(d));
+		ctx.set(tags, {
+			x: (d) => tip(d, 0),
+			y: (d) => tip(d, 1)
+		});
+		const fits = vertical && totals && columns.every((column) => format(column.total).length * 5.4 <= pitch);
+		const sums = ctx.text(ctx.marks("column-totals", "text", fits ? columns : [], (d) => `${d.band}/${d.name}`), 9.5).attr("text-anchor", "middle").style("pointer-events", "none").text((d) => format(d.total));
+		ctx.set(sums, {
+			x: (d) => tip(d, 0),
+			y: (d) => tip(d, 1) - 11
+		});
+	}
+};
+export { GroupedStackedBar };

package/dist/charts/bars/IconlessRankBar.js

@@ -0,0 +1,139 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { scaleLinear } from "d3";
+// src/charts/bars/IconlessRankBar.ts
+var IconlessRankLayout = /* @__PURE__ */ function(IconlessRankLayout) {
+	IconlessRankLayout["Inline"] = "inline";
+	IconlessRankLayout["Stacked"] = "stacked";
+	IconlessRankLayout["Inside"] = "inside";
+	return IconlessRankLayout;
+}({});
+var IconlessRankAlign = /* @__PURE__ */ function(IconlessRankAlign) {
+	IconlessRankAlign["Left"] = "left";
+	IconlessRankAlign["Right"] = "right";
+	return IconlessRankAlign;
+}({});
+var NUMERAL = 22;
+/** A typographic leaderboard: rank, name, value and a quiet bar, with no logos or icons needed. */
+var IconlessRankBar = class extends Chart2D {
+	static meta = {
+		id: "bar-iconless-rank",
+		name: "Iconless rank bar",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Turns a ranking into a readable list of numbered rows with proportional bars, for leaderboards and top-N panels.",
+		tags: [
+			"leaderboard",
+			"top n",
+			"list",
+			"ranking"
+		],
+		sample: (seed) => SampleData.categories(seed, 12, 1),
+		variants: {
+			layout: [
+				"inline",
+				"stacked",
+				"inside"
+			],
+			top: [
+				8,
+				5,
+				12
+			],
+			sort: [BarSort.Descending, BarSort.Ascending],
+			rail: [false, true],
+			align: ["left", "right"]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			layout: "inline",
+			top: 8,
+			sort: BarSort.Descending,
+			rail: false,
+			align: "left"
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	items(capacity) {
+		const { data, x, y, sort, top } = this.options;
+		const rows = BarRows.order(BarRows.rollup(data, x, y), sort, (row) => row.value, (row) => row.band);
+		let rank = 0;
+		const ranked = rows.map((row, index) => {
+			if (!index || row.value !== rows[index - 1].value) rank = index + 1;
+			return {
+				...row,
+				rank,
+				index
+			};
+		});
+		return ranked.slice(0, Math.min(top || ranked.length, capacity));
+	}
+	draw(ctx) {
+		const { layout, align, rail, y } = this.options;
+		const { width, height } = ctx.plot;
+		const stacked = layout === "stacked", inside = layout === "inside";
+		const items = this.items(Math.max(1, Math.floor(height / (stacked ? 28 : 16))));
+		const row = height / Math.max(1, items.length);
+		const reach = Math.max(0, ...items.map((item) => Math.abs(item.value)));
+		const widest = Math.max(0, ...items.map((item) => Math.min(item.band.length, 16)));
+		const nameWidth = stacked || inside ? 0 : widest * 6.2 + 12;
+		const right = align === "right";
+		const valueWidth = stacked ? 0 : 36;
+		const start = NUMERAL + nameWidth + (inside && right ? valueWidth : 0), end = width - (inside && right ? 0 : valueWidth);
+		const scale = scaleLinear([0, reach || 1], right ? [end, start] : [start, end]);
+		const frame = new BarFrame(false, scale);
+		const thick = stacked ? Math.min(8, row * .3) : inside ? Math.min(row - 3, 22) : Math.min(12, Math.max(4, row - 8));
+		const top = (d) => d.index * row + (stacked ? row - thick - 3 : (row - thick) / 2);
+		const color = ctx.palette.color(y);
+		const rails = ctx.marks("rails", "path", rail ? items : [], (d) => d.band).attr("fill", ctx.theme.grid);
+		ctx.set(rails, { d: (d) => frame.bar(top(d), thick, 0, reach || 1, 3) });
+		const bars = ctx.marks("bars", "path", items, (d) => d.band).attr("fill", color);
+		ctx.set(bars, { d: (d) => frame.bar(top(d), thick, 0, Math.abs(d.value), 4) }, { d: (d) => frame.bar(top(d), thick, 0, 0, 4) }, 25);
+		ctx.hover(bars, (d) => ({
+			title: d.band,
+			color,
+			rows: [["Rank", d.rank], [y, d.value]]
+		}));
+		const lineY = (d) => stacked ? top(d) - 4 : d.index * row + row / 2 + 3.5;
+		const format = (value) => Scales.format(value, reach);
+		const numbers = ctx.text(ctx.marks("ranks", "text", items, (d) => d.band), 11, "muted").attr("text-anchor", "end").text((d) => d.rank);
+		ctx.set(numbers, {
+			x: 14,
+			y: lineY
+		});
+		const names = ctx.text(ctx.marks("names", "text", items, (d) => d.band), 11, "ink").text((d) => BarRows.clip(d.band, inside ? 28 : 16)).attr("text-anchor", "start");
+		const insideFill = (d) => Math.abs(scale(Math.abs(d.value)) - scale(0)) > d.band.length * 6.2 + 12;
+		if (inside) names.attr("fill", (d) => insideFill(d) ? ctx.palette.inkOn(color) : ctx.theme.ink);
+		ctx.set(names, {
+			x: (d) => inside ? this.nameX(right, start, scale, d) : NUMERAL,
+			y: lineY
+		});
+		if (inside && right) names.attr("text-anchor", (d) => insideFill(d) ? "end" : "start");
+		const values = ctx.text(ctx.marks("values", "text", items, (d) => d.band), 11, "secondary").attr("text-anchor", "end").text((d) => format(d.value));
+		ctx.set(values, {
+			x: width,
+			y: lineY
+		});
+		if (inside && right) values.attr("text-anchor", "start");
+		if (inside && right) ctx.set(values, {
+			x: NUMERAL,
+			y: lineY
+		});
+	}
+	nameX(right, start, scale, d) {
+		const fill = Math.abs(scale(Math.abs(d.value)) - scale(0));
+		if (fill > d.band.length * 6.2 + 12) return right ? scale(0) - 8 : start + 8;
+		return right ? Math.max(start, scale(Math.abs(d.value)) - d.band.length * 6.2 - 8) : start + fill + 6;
+	}
+};
+export { IconlessRankAlign, IconlessRankBar, IconlessRankLayout };