@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/catalog.js

@@ -0,0 +1,40 @@
+import { barsCatalog } from "./charts/bars/index.js";
+import { linesareasCatalog } from "./charts/linesareas/index.js";
+import { scatterCatalog } from "./charts/scatter/index.js";
+import { distributionCatalog } from "./charts/distribution/index.js";
+import { financialCatalog } from "./charts/financial/index.js";
+import { comparisonCatalog } from "./charts/comparison/index.js";
+import { proportionCatalog } from "./charts/proportion/index.js";
+import { radialCatalog } from "./charts/radial/index.js";
+import { hierarchyCatalog } from "./charts/hierarchy/index.js";
+import { indicatorsCatalog } from "./charts/indicators/index.js";
+import { timelineCatalog } from "./charts/timeline/index.js";
+import { pictorialCatalog } from "./charts/pictorial/index.js";
+import { networkCatalog } from "./charts/network/index.js";
+import { flowCatalog } from "./charts/flow/index.js";
+import { matrixCatalog } from "./charts/matrix/index.js";
+import { densityCatalog } from "./charts/density/index.js";
+import { multivariateCatalog } from "./charts/multivariate/index.js";
+import { statisticsCatalog } from "./charts/statistics/index.js";
+import { geomapsCatalog } from "./charts/geomaps/index.js";
+import { geoflowsCatalog } from "./charts/geoflows/index.js";
+import { scientificCatalog } from "./charts/scientific/index.js";
+import { engineeringCatalog } from "./charts/engineering/index.js";
+import { mathematicalCatalog } from "./charts/mathematical/index.js";
+import { signalsCatalog } from "./charts/signals/index.js";
+import { massiveCatalog } from "./charts/massive/index.js";
+import { businessCatalog } from "./charts/business/index.js";
+import { genomicsCatalog } from "./charts/genomics/index.js";
+import { earthscienceCatalog } from "./charts/earthscience/index.js";
+import { demographyCatalog } from "./charts/demography/index.js";
+import { structureCatalog } from "./charts/structure/index.js";
+import { threebarsCatalog } from "./charts/threebars/index.js";
+import { threesurfacesCatalog } from "./charts/threesurfaces/index.js";
+import { threevolumeCatalog } from "./charts/threevolume/index.js";
+import { threenetworkCatalog } from "./charts/threenetwork/index.js";
+import { threeglobeCatalog } from "./charts/threeglobe/index.js";
+import { ChartRegistry } from "./core/ChartRegistry.js";
+// src/catalog.ts
+/** Every chart class in the library, and every chart type they expand to. */
+var catalog = new ChartRegistry().register(...barsCatalog, ...linesareasCatalog, ...scatterCatalog, ...distributionCatalog, ...financialCatalog, ...comparisonCatalog, ...proportionCatalog, ...radialCatalog, ...hierarchyCatalog, ...indicatorsCatalog, ...timelineCatalog, ...pictorialCatalog, ...networkCatalog, ...flowCatalog, ...matrixCatalog, ...densityCatalog, ...multivariateCatalog, ...statisticsCatalog, ...geomapsCatalog, ...geoflowsCatalog, ...scientificCatalog, ...engineeringCatalog, ...mathematicalCatalog, ...signalsCatalog, ...massiveCatalog, ...businessCatalog, ...genomicsCatalog, ...earthscienceCatalog, ...demographyCatalog, ...structureCatalog, ...threebarsCatalog, ...threesurfacesCatalog, ...threevolumeCatalog, ...threenetworkCatalog, ...threeglobeCatalog);
+export { catalog };

package/dist/charts/bars/BandChart.js

@@ -0,0 +1,103 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows } from "./BarRows.js";
+import { max, scaleBand, scaleLinear } from "d3";
+// src/charts/bars/BandChart.ts
+var AXIS_CHARS = 14;
+var CHAR = 6.2;
+/** Any chart that places marks on a band axis against one value axis, in either orientation. */
+var BandChart = class extends CartesianChart {
+	get vertical() {
+		return (this.options.orientation ?? Orientation.Vertical) === Orientation.Vertical;
+	}
+	bandPadding() {
+		return .2;
+	}
+	/** Pixels kept free past the value range at each end, for end labels. */
+	reserve() {
+		return [0, 0];
+	}
+	unit() {
+		return "";
+	}
+	valueScale(domain) {
+		return scaleLinear().domain(domain).nice();
+	}
+	/** Value the baseline rule sits on, or null for no rule. */
+	baseline() {
+		return 0;
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		const band = scaleBand(this.bandNames(), this.vertical ? [0, width] : [0, height]).padding(this.bandPadding());
+		const [low, high] = this.valueExtent();
+		const [lowRoom, highRoom] = this.reserve();
+		const span = this.vertical ? [height - lowRoom, highRoom] : [lowRoom, width - highRoom];
+		const value = this.valueScale(low === high ? [low, low + 1] : [low, high]).range(span);
+		return this.vertical ? {
+			x: band,
+			y: value
+		} : {
+			x: value,
+			y: band
+		};
+	}
+	plotMarks(ctx, axes) {
+		const band = this.vertical ? axes.x : axes.y;
+		const value = this.vertical ? axes.y : axes.x;
+		const frame = new BarFrame(this.vertical, value, band);
+		if (!this.vertical) this.valueGrid(ctx, value);
+		this.drawBands(ctx, frame);
+		this.baselineRule(ctx, frame);
+	}
+	tickFormat(scale) {
+		const domain = scale.domain?.() ?? [];
+		if (typeof domain[0] === "string") return this.bandFormat(scale, domain);
+		const format = super.tickFormat(scale), unit = this.unit();
+		return format && unit ? (value) => `${format(value)}${unit}` : format;
+	}
+	bandFormat(scale, names) {
+		if (!this.vertical) return (name) => BarRows.clip(String(name), AXIS_CHARS);
+		const [start = 0, end = 0] = scale.range();
+		const step = Math.abs(end - start) / Math.max(1, names.length);
+		const widest = max(names, (name) => Math.min(name.length, AXIS_CHARS)) ?? 0;
+		const every = Math.max(1, Math.ceil((widest * CHAR + 8) / Math.max(1, step)));
+		return (name) => names.indexOf(String(name)) % every ? "" : BarRows.clip(String(name), AXIS_CHARS);
+	}
+	valueGrid(ctx, value) {
+		const count = Math.min(this.xTicks(), Math.floor(ctx.plot.width / 80));
+		const ticks = this.options.grid === false ? [] : value.ticks(count);
+		ctx.group("value-grid").lower().selectAll("line").data(ticks).join("line").attr("x1", (tick) => value(tick)).attr("x2", (tick) => value(tick)).attr("y1", 0).attr("y2", ctx.plot.height).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+	}
+	baselineRule(ctx, frame) {
+		const at = this.baseline();
+		const [low, high] = frame.value.domain();
+		const shown = at !== null && at >= Math.min(low, high) && at <= Math.max(low, high) && (!this.vertical || at !== low);
+		const length = this.vertical ? ctx.plot.width : ctx.plot.height;
+		ctx.group("baseline").raise().selectAll("line").data(shown ? [at] : []).join("line").attr("x1", (v) => frame.rule(v, 0, length).x1).attr("x2", (v) => frame.rule(v, 0, length).x2).attr("y1", (v) => frame.rule(v, 0, length).y1).attr("y2", (v) => frame.rule(v, 0, length).y2).attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+	}
+	/** Value labels just past the end of each mark, thinned so neighbours never collide. */
+	endLabels(ctx, frame, items, name = "end-labels") {
+		const { vertical } = frame;
+		const step = frame.band.step() || 1;
+		const widest = max(items, (d) => d.text.length * 5.8) ?? 0;
+		const every = Math.max(1, Math.ceil((vertical ? widest + 4 : 13) / step));
+		const kept = items.filter((_, i) => i % every === 0);
+		const lift = (d) => vertical ? d.below ? 13 : -5 : d.below ? -6 : 6;
+		const place = (d, axis) => frame.point(d.at + (vertical ? 0 : 3.5), d.value, lift(d))[axis];
+		const labels = ctx.text(ctx.marks(name, "text", kept, (d) => d.key), 10.5).text((d) => d.text).attr("text-anchor", vertical ? "middle" : (d) => d.below ? "end" : "start").style("pointer-events", "none");
+		ctx.set(labels, {
+			x: (d) => place(d, 0),
+			y: (d) => place(d, 1)
+		});
+	}
+	/** Label text for a value at the precision of this chart's axis. */
+	formatter(frame) {
+		const reach = max(frame.value.domain(), (value) => Math.abs(value)) ?? 0;
+		const unit = this.unit();
+		return (value) => `${Scales.format(value, reach)}${unit}`;
+	}
+};
+export { BandChart };

package/dist/charts/bars/BarChart.js

@@ -0,0 +1,155 @@
+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 { max, min, sum } from "d3";
+// src/charts/bars/BarChart.ts
+/** Compare magnitudes across categories: grouped, stacked or normalised, in either orientation. */
+var BarChart = class extends BandChart {
+	static meta = {
+		id: "bar",
+		name: "Bar chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares a value across categories using bar length, for ranking and part-of-total reading.",
+		tags: [
+			"column",
+			"grouped",
+			"stacked"
+		],
+		sample: (seed) => SampleData.categories(seed),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			stack: [
+				StackMode.None,
+				StackMode.Stacked,
+				StackMode.Normalized
+			],
+			padding: [
+				.2,
+				.4,
+				.05
+			],
+			sort: [
+				BarSort.Data,
+				BarSort.Descending,
+				BarSort.Ascending
+			],
+			totals: [false, true]
+		},
+		valid: (values) => !(values.totals && values.stack === StackMode.Normalized)
+	};
+	defaults() {
+		return {
+			x: "category",
+			series: "series",
+			y: "value",
+			orientation: Orientation.Vertical,
+			stack: StackMode.None,
+			radius: 4,
+			padding: .2,
+			sort: BarSort.Data,
+			totals: false
+		};
+	}
+	get pivot() {
+		return BarRows.pivot(this.options.data, this.options.x, this.options.series, this.options.y);
+	}
+	get bands() {
+		const { pivot } = this;
+		return BarRows.order(pivot.bands, this.options.sort, pivot.total, (band) => band);
+	}
+	segments() {
+		const { pivot } = this;
+		const { stack } = this.options;
+		return this.bands.flatMap((band) => {
+			const cells = pivot.series.map((series, slot) => ({
+				series,
+				slot,
+				value: pivot.cell(band, series)
+			}));
+			const scale = stack === StackMode.Normalized ? 100 / (sum(cells, (cell) => Math.abs(cell.value)) || 1) : 1;
+			let up = 0, down = 0;
+			const lastUp = cells.findLast((cell) => cell.value > 0), lastDown = cells.findLast((cell) => cell.value < 0);
+			return cells.map(({ series, slot, value }) => {
+				const size = value * scale;
+				if (stack === StackMode.None) return {
+					band,
+					series,
+					value,
+					start: 0,
+					end: size,
+					slot,
+					outer: true
+				};
+				const start = value < 0 ? down : up;
+				if (value < 0) down += size;
+				else up += size;
+				return {
+					band,
+					series,
+					value,
+					start,
+					end: start + size,
+					slot,
+					outer: series === lastUp?.series || series === lastDown?.series
+				};
+			});
+		});
+	}
+	bandNames() {
+		return this.bands;
+	}
+	bandPadding() {
+		return this.options.padding;
+	}
+	unit() {
+		return this.options.stack === StackMode.Normalized ? "%" : "";
+	}
+	valueExtent() {
+		const parts = this.segments();
+		return [Math.min(0, min(parts, (part) => part.end) ?? 0), Math.max(0, max(parts, (part) => part.end) ?? 0, 1e-9)];
+	}
+	reserve() {
+		if (!this.options.totals) return [0, 0];
+		const room = this.vertical ? 16 : 36;
+		return [this.valueExtent()[0] < 0 ? room : 0, room];
+	}
+	drawBands(ctx, frame) {
+		const parts = this.segments();
+		const { radius, stack } = this.options;
+		const grouped = stack === StackMode.None;
+		const slots = new Set(parts.map((part) => part.series)).size || 1;
+		const thick = grouped ? frame.thick / slots : frame.thick;
+		const width = Math.max(1, thick - (thick > 4 ? 2 : 0));
+		const along = (d) => (frame.band(d.band) ?? 0) + (grouped ? d.slot * thick : 0);
+		const shape = (d, to) => frame.bar(along(d), width, d.start, to, d.outer ? radius : 0, d.start ? 2 : 0);
+		const bars = ctx.marks("bars", "path", parts, (d) => `${d.band}/${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) }, 12);
+		ctx.hover(bars, (d) => ({
+			title: d.band,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value]]
+		}));
+		this.drawTotals(ctx, frame, parts, along, thick);
+	}
+	drawTotals(ctx, frame, parts, along, thick) {
+		const grouped = this.options.stack === StackMode.None;
+		const format = this.formatter(frame);
+		const items = !this.options.totals ? [] : this.bands.map((band) => {
+			const own = parts.filter((part) => part.band === band);
+			const top = own.reduce((best, part) => Math.abs(part.end) > Math.abs(best.end) ? part : best, own[0]);
+			const net = sum(own, (part) => part.value);
+			return {
+				key: band,
+				at: grouped ? along(top) + thick / 2 : (frame.band(band) ?? 0) + frame.thick / 2,
+				value: top.end,
+				text: format(grouped ? top.value : net),
+				below: top.end < 0
+			};
+		});
+		this.endLabels(ctx, frame, items);
+	}
+};
+export { BarChart };

package/dist/charts/bars/BarFrame.js

@@ -0,0 +1,70 @@
+import { scaleBand } from "d3";
+// src/charts/bars/BarFrame.ts
+var fix = (value) => +value.toFixed(2);
+/** Maps band/value coordinates to pixels for either orientation, so marks are written once. */
+var BarFrame = class BarFrame {
+	vertical;
+	value;
+	band;
+	constructor(vertical, value, band = scaleBand()) {
+		this.vertical = vertical;
+		this.value = value;
+		this.band = band;
+	}
+	get thick() {
+		return this.band.bandwidth();
+	}
+	center(name) {
+		return (this.band(name) ?? 0) + this.thick / 2;
+	}
+	/** Pixel point for `at` along the band axis and data value `v`, with `lift` px toward higher pixels on the value axis. */
+	point(at, v, lift = 0) {
+		const p = this.value(v) + lift;
+		return this.vertical ? [fix(at), fix(p)] : [fix(p), fix(at)];
+	}
+	/** Line attributes across the value axis at band position `at`. */
+	stem(at, from, to) {
+		const [x1, y1] = this.point(at, from), [x2, y2] = this.point(at, to);
+		return {
+			x1,
+			y1,
+			x2,
+			y2
+		};
+	}
+	/** Line attributes across the band axis at value `v`, from `start` to `end` px. */
+	rule(v, start, end) {
+		const [x1, y1] = this.point(start, v), [x2, y2] = this.point(end, v);
+		return {
+			x1,
+			y1,
+			x2,
+			y2
+		};
+	}
+	/** Bar from `from` to `to`, rounded at the `to` end (both ends when `capsule`). `inset` px is trimmed off the `from` end for stack gaps. */
+	bar(at, thick, from, to, radius = 4, inset = 0, capsule = false) {
+		const a = this.value(from), b = this.value(to);
+		const span = Math.abs(a - b), trim = Math.min(inset, span), forward = b >= a;
+		const start = a + (forward ? trim : -trim), length = span - trim;
+		const r = Math.min(radius, thick / 2, capsule ? length / 2 : length);
+		const lo = Math.min(start, b), hi = Math.max(start, b);
+		const near = capsule || !forward ? r : 0, far = capsule || forward ? r : 0;
+		return this.vertical ? BarFrame.box(at, lo, at + thick, hi, near, near, far, far) : BarFrame.box(lo, at, hi, at + thick, near, far, far, near);
+	}
+	/** Rectangle path with one radius per corner: top-left, top-right, bottom-right, bottom-left. */
+	static box(x0, y0, x1, y1, tl, tr, br, bl) {
+		const [a, b, c, d, p, q, r, s] = [
+			x0,
+			y0,
+			x1,
+			y1,
+			tl,
+			tr,
+			br,
+			bl
+		].map(fix);
+		return `M${a + p},${b}L${c - q},${b}A${q},${q} 0 0 1 ${c},${b + q}L${c},${d - r}A${r},${r} 0 0 1 ${c - r},${d}L${a + s},${d}A${s},${s} 0 0 1 ${a},${d - s}L${a},${b + p}A${p},${p} 0 0 1 ${a + p},${b}Z`;
+	}
+};
+export { BarFrame };

package/dist/charts/bars/BarRows.js

@@ -0,0 +1,91 @@
+import { ascending, descending, max, mean, median, min, sum } from "d3";
+// src/charts/bars/BarRows.ts
+var BarAggregate = /* @__PURE__ */ function(BarAggregate) {
+	BarAggregate["Sum"] = "sum";
+	BarAggregate["Mean"] = "mean";
+	BarAggregate["Median"] = "median";
+	BarAggregate["Max"] = "max";
+	BarAggregate["Min"] = "min";
+	BarAggregate["Count"] = "count";
+	return BarAggregate;
+}({});
+var BarSort = /* @__PURE__ */ function(BarSort) {
+	BarSort["Data"] = "data";
+	BarSort["Descending"] = "descending";
+	BarSort["Ascending"] = "ascending";
+	BarSort["Alphabetical"] = "alphabetical";
+	return BarSort;
+}({});
+/** Turns user rows into clean band/value records: blanks skipped, duplicate keys merged. */
+var BarRows = class BarRows {
+	static number(cell) {
+		if (cell === null || cell === void 0 || cell === "") return null;
+		const value = +cell;
+		return Number.isFinite(value) ? value : null;
+	}
+	static label(cell) {
+		if (cell === null || cell === void 0 || cell === "") return "(none)";
+		return cell instanceof Date ? cell.toISOString().slice(0, 10) : String(cell);
+	}
+	static clip(text, chars) {
+		return text.length > chars ? `${text.slice(0, Math.max(1, chars - 1))}…` : text;
+	}
+	/** Values per band in first-seen order; rows with no number are dropped. */
+	static values(data, x, y) {
+		const bands = /* @__PURE__ */ new Map();
+		for (const row of data ?? []) {
+			const value = BarRows.number(row[y]);
+			if (value === null) continue;
+			const band = BarRows.label(row[x]);
+			const list = bands.get(band);
+			if (list) list.push(value);
+			else bands.set(band, [value]);
+		}
+		return bands;
+	}
+	static reduce(values, how = "sum") {
+		switch (how) {
+			case "mean": return mean(values) ?? 0;
+			case "median": return median(values) ?? 0;
+			case "max": return max(values) ?? 0;
+			case "min": return min(values) ?? 0;
+			case "count": return values.length;
+			default: return sum(values);
+		}
+	}
+	static rollup(data, x, y, how = "sum") {
+		return [...BarRows.values(data, x, y)].map(([band, values]) => ({
+			band,
+			value: BarRows.reduce(values, how)
+		}));
+	}
+	/** Long rows to a band × series lookup; duplicates add up. */
+	static pivot(data, x, series, y) {
+		const cells = /* @__PURE__ */ new Map();
+		const names = /* @__PURE__ */ new Set();
+		for (const row of data ?? []) {
+			const value = BarRows.number(row[y]);
+			if (value === null) continue;
+			const band = BarRows.label(row[x]), name = BarRows.label(row[series]);
+			names.add(name);
+			const inner = cells.get(band) ?? /* @__PURE__ */ new Map();
+			inner.set(name, (inner.get(name) ?? 0) + value);
+			cells.set(band, inner);
+		}
+		return {
+			bands: [...cells.keys()],
+			series: [...names],
+			cell: (band, name) => cells.get(band)?.get(name) ?? 0,
+			has: (band, name) => cells.get(band)?.has(name) ?? false,
+			total: (band) => sum(cells.get(band)?.values() ?? [])
+		};
+	}
+	static order(items, sort = "data", value, name) {
+		const copy = [...items];
+		if (sort === "descending") copy.sort((a, b) => descending(value(a), value(b)));
+		if (sort === "ascending") copy.sort((a, b) => ascending(value(a), value(b)));
+		if (sort === "alphabetical") copy.sort((a, b) => ascending(name(a), name(b)));
+		return copy;
+	}
+};
+export { BarAggregate, BarRows, BarSort };

package/dist/charts/bars/BulletBar.js

@@ -0,0 +1,184 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { descending, max, symbol, symbolTriangle } from "d3";
+// src/charts/bars/BulletBar.ts
+var BulletBarScale = /* @__PURE__ */ function(BulletBarScale) {
+	BulletBarScale["Shared"] = "shared";
+	BulletBarScale["Target"] = "target";
+	return BulletBarScale;
+}({});
+var BulletBarTarget = /* @__PURE__ */ function(BulletBarTarget) {
+	BulletBarTarget["Line"] = "line";
+	BulletBarTarget["Triangle"] = "triangle";
+	BulletBarTarget["Dot"] = "target-dot";
+	return BulletBarTarget;
+}({});
+var BulletBarMeasure = /* @__PURE__ */ function(BulletBarMeasure) {
+	BulletBarMeasure["Bar"] = "bar";
+	BulletBarMeasure["Dot"] = "measure-dot";
+	return BulletBarMeasure;
+}({});
+var sample = (seed) => {
+	const rows = SampleData.categories(seed, 5, 3);
+	return rows.filter((_, i) => i % 3 === 0).map((row, i) => {
+		const goal = +rows[i * 3 + 1].value + 15;
+		return {
+			category: row.category,
+			value: row.value,
+			target: goal,
+			poor: Math.round(goal * .5),
+			fair: Math.round(goal * .85),
+			good: Math.round(goal * 1.25)
+		};
+	});
+};
+/** Stephen Few's bullet graph: a measure against a target and qualitative ranges, in a compact row. */
+var BulletBar = class extends BandChart {
+	static meta = {
+		id: "bar-bullet",
+		name: "Bullet bar",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows a measure against its target and poor-to-good ranges, replacing gauges in tight dashboards.",
+		tags: [
+			"target",
+			"kpi",
+			"gauge alternative",
+			"few"
+		],
+		sample,
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			scale: ["shared", "target"],
+			targetMark: [
+				"line",
+				"triangle",
+				"target-dot"
+			],
+			rangeCount: [
+				3,
+				2,
+				0
+			],
+			measure: ["bar", "measure-dot"],
+			sort: [BarSort.Data, BarSort.Descending]
+		},
+		valid: (values) => !(values.rangeCount === 0 && values.measure === "measure-dot")
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			target: "target",
+			ranges: [
+				"poor",
+				"fair",
+				"good"
+			],
+			rangeCount: 3,
+			orientation: Orientation.Horizontal,
+			scale: "shared",
+			targetMark: "line",
+			measure: "bar",
+			sort: BarSort.Data
+		};
+	}
+	get bullets() {
+		const { data, x, y, target, ranges, rangeCount, scale, sort } = this.options;
+		const fields = rangeCount ? ranges.slice(-rangeCount) : [];
+		const normal = scale === "target";
+		const rows = (data ?? []).flatMap((row) => {
+			const raw = BarRows.number(row[y]);
+			if (raw === null) return [];
+			const rawGoal = BarRows.number(row[target]) ?? raw;
+			const factor = normal ? 100 / (rawGoal || 1) : 1;
+			return [{
+				band: BarRows.label(row[x]),
+				raw,
+				rawGoal,
+				value: raw * factor,
+				goal: rawGoal * factor,
+				ranges: fields.map((field) => (BarRows.number(row[field]) ?? 0) * factor)
+			}];
+		});
+		const unique = [...new Map(rows.map((row) => [row.band, row])).values()];
+		return sort === BarSort.Descending ? unique.sort((a, b) => descending(a.raw / (a.rawGoal || 1), b.raw / (b.rawGoal || 1))) : unique;
+	}
+	bandNames() {
+		return this.bullets.map((bullet) => bullet.band);
+	}
+	bandPadding() {
+		return .22;
+	}
+	unit() {
+		return this.options.scale === "target" ? "%" : "";
+	}
+	valueExtent() {
+		const edges = this.bullets.flatMap((bullet) => [
+			bullet.value,
+			bullet.goal,
+			...bullet.ranges
+		]);
+		return [Math.min(0, ...edges), Math.max(0, max(edges) ?? 1)];
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	drawBands(ctx, frame) {
+		const { bullets } = this;
+		const { measure, targetMark, y } = this.options;
+		const color = ctx.palette.color(y);
+		const thick = Math.min(frame.thick, 34);
+		const start = (band) => frame.center(band) - thick / 2;
+		const shades = bullets.flatMap((bullet) => bullet.ranges.map((value, i, all) => ({
+			key: `${bullet.band}/${i}`,
+			band: bullet.band,
+			from: i ? all[i - 1] : 0,
+			to: value,
+			level: i,
+			levels: all.length
+		})));
+		const zones = ctx.marks("ranges", "path", shades, (d) => d.key).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", (d) => .34 - .24 * d.level / Math.max(1, d.levels - 1));
+		ctx.set(zones, { d: (d) => frame.bar(start(d.band), thick, d.from, d.to, 0) }, { d: (d) => frame.bar(start(d.band), thick, d.from, d.from, 0) }, 10);
+		const inner = Math.max(3, thick * .36);
+		const bars = ctx.marks("measures", "path", measure === "bar" ? bullets : [], (d) => d.band).attr("fill", color);
+		ctx.set(bars, { d: (d) => frame.bar(frame.center(d.band) - inner / 2, inner, 0, d.value, 2) }, { d: (d) => frame.bar(frame.center(d.band) - inner / 2, inner, 0, 0, 2) }, 30);
+		const dots = ctx.marks("measure-dots", "circle", measure === "measure-dot" ? bullets : [], (d) => d.band).attr("r", Math.min(6, thick / 3)).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			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: [
+				["Value", d.raw],
+				["Target", d.rawGoal],
+				["Attainment", `${Math.round(d.raw / (d.rawGoal || 1) * 100)}%`]
+			]
+		});
+		ctx.hover(bars, tip);
+		ctx.hover(dots, tip);
+		this.drawTargets(ctx, frame, bullets, targetMark, thick);
+	}
+	drawTargets(ctx, frame, bullets, mark, thick) {
+		const rules = ctx.marks("target-lines", "line", mark === "line" ? bullets : [], (d) => d.band).attr("stroke", ctx.theme.ink).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
+		const rule = (d) => frame.rule(d.goal, frame.center(d.band) - thick * .36, frame.center(d.band) + thick * .36);
+		ctx.set(rules, {
+			x1: (d) => rule(d).x1,
+			y1: (d) => rule(d).y1,
+			x2: (d) => rule(d).x2,
+			y2: (d) => rule(d).y2
+		});
+		const offset = thick / 2 - 1;
+		const pin = (d) => frame.point(frame.center(d.band) + (mark === "triangle" ? offset : 0), d.goal);
+		const glyph = mark === "triangle" ? symbol(symbolTriangle, 60)() : "M-5,0A5,5 0 1 1 5,0A5,5 0 1 1 -5,0Z";
+		const spin = mark === "triangle" && frame.vertical ? " rotate(-90)" : "";
+		const pins = ctx.marks("target-pins", "path", mark === "line" ? [] : bullets, (d) => d.band).attr("d", glyph).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(pins, { transform: (d) => `translate(${pin(d).join(",")})${spin}` });
+	}
+};
+export { BulletBar, BulletBarMeasure, BulletBarScale, BulletBarTarget };