@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/PdfWriter-6HJFYMCO.cjs

@@ -0,0 +1,205 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkVX54A7KAcjs = require('./chunk-VX54A7KA.cjs');
+
+
+var _chunk753UBLV2cjs = require('./chunk-753UBLV2.cjs');
+
+
+
+var _chunkZ3JPIJSCcjs = require('./chunk-Z3JPIJSC.cjs');
+
+// src/core/PdfWriter.ts
+var _pdflib = require('pdf-lib');
+var SIZES = { ["a4" /* A4 */]: _pdflib.PageSizes.A4, ["letter" /* Letter */]: _pdflib.PageSizes.Letter };
+var MARGIN = 36;
+var TITLE = 16;
+var TEXT = 8;
+var FOOTER = 7;
+var ROW = 14;
+var PADDING = 4;
+var [MIN_COLUMN, MAX_COLUMN] = [44, 180];
+var MEASURED = 500;
+var MAX_ROWS = 25e3;
+var SHARPNESS = 4;
+var [ASCENT, DESCENT] = [1.05, 0.35];
+var FALLBACK_FONT = 'Helvetica, Arial, "Noto Sans", sans-serif';
+var INK = _pdflib.rgb.call(void 0, 0.1, 0.1, 0.1);
+var QUIET = _pdflib.rgb.call(void 0, 0.4, 0.4, 0.4);
+var RULE = _pdflib.rgb.call(void 0, 0.8, 0.8, 0.8);
+var BAND = _pdflib.rgb.call(void 0, 0.94, 0.94, 0.94);
+var PdfWriter = class _PdfWriter {
+  #doc;
+  #regular;
+  #bold;
+  #glyphs;
+  #pictures = /* @__PURE__ */ new Map();
+  #ruler = null;
+  #width;
+  #height;
+  constructor(doc, regular, bold, size) {
+    this.#doc = doc;
+    this.#regular = regular;
+    this.#bold = bold;
+    this.#glyphs = new Set(regular.getCharacterSet());
+    [this.#width, this.#height] = size;
+  }
+  static async write(chart, options = {}) {
+    const table = options.table ? _chunk753UBLV2cjs.ExportText.rows(chart, "A PDF data table") : null;
+    return _PdfWriter.file(await chart.toPNG({ scale: _nullishCoalesce(options.scale, () => ( 3)) }), table, options);
+  }
+  static async file(png, table, options) {
+    const { pageSize = "a4" /* A4 */, orientation = "auto" /* Auto */, title } = options;
+    const size = SIZES[pageSize];
+    if (!size) throw new RangeError(`Unknown PDF page size ${pageSize}.`);
+    if (!Object.values(_chunkVX54A7KAcjs.PdfOrientation).includes(orientation)) throw new RangeError(`Unknown PDF orientation ${orientation}.`);
+    if (table && table.rows.length > MAX_ROWS) throw new (0, _chunkZ3JPIJSCcjs.ChartExportError)("unsupported" /* Unsupported */, `A PDF table holds ${MAX_ROWS} rows and this one has ${table.rows.length}. Use Excel or CSV for the data.`);
+    const doc = await _pdflib.PDFDocument.create();
+    doc.setCreator("@mstone6969/graph");
+    doc.setProducer("pdf-lib");
+    if (title) doc.setTitle(title);
+    const chart = await doc.embedPng(await png.arrayBuffer());
+    const [narrow, wide] = size;
+    const landscape = orientation === "landscape" /* Landscape */ || orientation === "auto" /* Auto */ && chart.width >= chart.height;
+    const writer = new _PdfWriter(doc, await doc.embedFont(_pdflib.StandardFonts.Helvetica), await doc.embedFont(_pdflib.StandardFonts.HelveticaBold), landscape ? [wide, narrow] : [narrow, wide]);
+    await writer.#chartPage(chart, title);
+    if (table) await writer.#tablePages(table);
+    await writer.#numberPages();
+    return new Blob([await doc.save()], { type: "application/pdf" });
+  }
+  #page() {
+    return this.#doc.addPage([this.#width, this.#height]);
+  }
+  get #room() {
+    return this.#width - MARGIN * 2;
+  }
+  async #chartPage(chart, title) {
+    const page = this.#page();
+    let top = this.#height - MARGIN;
+    if (title) {
+      top -= TITLE;
+      await this.#text(page, title, MARGIN, top, this.#room, { size: TITLE, bold: true });
+      top -= TITLE;
+    }
+    const fit = Math.min(this.#room / chart.width, (top - MARGIN) / chart.height);
+    const [width, height] = [chart.width * fit, chart.height * fit];
+    page.drawImage(chart, { x: (this.#width - width) / 2, y: top - height, width, height });
+  }
+  async #tablePages({ columns, rows }) {
+    const texts = rows.map((row) => columns.map((_, c) => _chunk753UBLV2cjs.ExportText.of(row[c])));
+    const natural = columns.map((column, c) => {
+      const widest = texts.slice(0, MEASURED).reduce((most, row) => Math.max(most, this.#textWidth(_PdfWriter.#clean(row[c]), TEXT)), this.#textWidth(_PdfWriter.#clean(column), TEXT, true));
+      return Math.min(MAX_COLUMN, Math.max(MIN_COLUMN, widest + PADDING * 2));
+    });
+    for (const block of this.#blocks(natural)) {
+      const used = block.reduce((sum, c) => sum + natural[c], 0);
+      const widths = block.map((c) => natural[c] * this.#room / used);
+      let page = null, y = 0;
+      for (const [r, row] of texts.entries()) {
+        if (!page || y < MARGIN + ROW) {
+          page = this.#page();
+          y = this.#height - MARGIN - ROW;
+          page.drawRectangle({ x: MARGIN, y: y - PADDING, width: this.#room, height: ROW, color: BAND });
+          await this.#row(page, block.map((c) => columns[c]), block.map((c) => typeof rows[0][c] === "number"), widths, y, true);
+          y -= ROW;
+        }
+        await this.#row(page, block.map((c) => row[c]), block.map((c) => typeof rows[r][c] === "number"), widths, y, false);
+        page.drawLine({ start: { x: MARGIN, y: y - PADDING }, end: { x: MARGIN + this.#room, y: y - PADDING }, thickness: 0.25, color: RULE });
+        y -= ROW;
+      }
+    }
+  }
+  /** Greedy runs of columns that fit a page. Later runs repeat the first column, so their rows can still be told apart. */
+  #blocks(widths) {
+    const blocks = [];
+    let used = Infinity;
+    widths.forEach((width, c) => {
+      if (used + width > this.#room) {
+        blocks.push(c ? [0, c] : [c]);
+        used = (c ? widths[0] : 0) + width;
+      } else {
+        blocks.at(-1).push(c);
+        used += width;
+      }
+    });
+    return blocks;
+  }
+  async #row(page, cells, right, widths, y, bold) {
+    let x = MARGIN;
+    for (const [c, cell] of cells.entries()) {
+      const room = widths[c] - PADDING * 2;
+      await this.#text(page, cell, right[c] ? x + PADDING + room : x + PADDING, y, room, { size: TEXT, bold, right: right[c] });
+      x += widths[c];
+    }
+  }
+  async #numberPages() {
+    const pages = this.#doc.getPages();
+    if (pages.length < 2) return;
+    for (const [i, page] of pages.entries()) {
+      await this.#text(page, `Page ${i + 1} of ${pages.length}`, this.#width - MARGIN, MARGIN / 2, this.#room, { size: FOOTER, color: QUIET, right: true });
+    }
+  }
+  static #clean(text) {
+    return text.replace(/\s+/g, " ").trim();
+  }
+  #encodable(text) {
+    for (const char of text) if (!this.#glyphs.has(char.codePointAt(0))) return false;
+    return true;
+  }
+  #font(bold) {
+    return bold ? this.#bold : this.#regular;
+  }
+  #cssFont(px, bold) {
+    return `${bold ? "bold " : ""}${px}px ${FALLBACK_FONT}`;
+  }
+  #textWidth(text, size, bold) {
+    if (this.#encodable(text)) return this.#font(bold).widthOfTextAtSize(text, size);
+    this.#ruler ??= _chunkZ3JPIJSCcjs.ChartExporter.paint(_chunkZ3JPIJSCcjs.ChartExporter.canvas(1, 1));
+    this.#ruler.font = this.#cssFont(size * SHARPNESS, bold);
+    return this.#ruler.measureText(text).width / SHARPNESS;
+  }
+  /** Cuts by code point, so an ellipsis never lands inside a surrogate pair. */
+  #fit(text, room, size, bold) {
+    if (this.#textWidth(text, size, bold) <= room) return text;
+    const chars = [...text];
+    let [low, high] = [0, chars.length];
+    while (low < high) {
+      const middle = Math.ceil((low + high) / 2);
+      if (this.#textWidth(`${chars.slice(0, middle).join("")}\u2026`, size, bold) <= room) low = middle;
+      else high = middle - 1;
+    }
+    return `${chars.slice(0, low).join("").trimEnd()}\u2026`;
+  }
+  /** The 14 built-in fonts cover Western European text only. Anything else is drawn as a small picture, so it shows but cannot be selected. */
+  async #text(page, text, x, y, room, style) {
+    const { size, bold, color = INK, right } = style;
+    const clean = _PdfWriter.#clean(text);
+    if (!clean) return;
+    const shown = this.#fit(clean, room, size, bold);
+    const width = this.#textWidth(shown, size, bold);
+    const left = right ? x - width : x;
+    if (this.#encodable(shown)) {
+      page.drawText(shown, { x: left, y, size, font: this.#font(bold), color });
+      return;
+    }
+    const picture = await this.#picture(shown, width, size, bold);
+    page.drawImage(picture, { x: left, y: y - size * DESCENT, width: picture.width / SHARPNESS, height: picture.height / SHARPNESS });
+  }
+  async #picture(text, width, size, bold) {
+    const key = `${size}|${bold}|${text}`;
+    const known = this.#pictures.get(key);
+    if (known) return known;
+    const canvas = _chunkZ3JPIJSCcjs.ChartExporter.canvas(Math.ceil(width * SHARPNESS), Math.ceil(size * (ASCENT + DESCENT) * SHARPNESS));
+    const paint = _chunkZ3JPIJSCcjs.ChartExporter.paint(canvas);
+    paint.font = this.#cssFont(size * SHARPNESS, bold);
+    paint.fillStyle = "#1a1a1a";
+    paint.textBaseline = "alphabetic";
+    paint.fillText(text, 0, size * ASCENT * SHARPNESS);
+    const picture = await this.#doc.embedPng(await (await _chunkZ3JPIJSCcjs.ChartExporter.png(canvas)).arrayBuffer());
+    this.#pictures.set(key, picture);
+    return picture;
+  }
+};
+
+
+exports.PdfWriter = PdfWriter;

package/dist/catalog-YWX6FHRM.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkWAODDPYXcjs = require('./chunk-WAODDPYX.cjs');
+require('./chunk-Z3JPIJSC.cjs');
+require('./chunk-KGSYGPLS.cjs');
+
+
+exports.catalog = _chunkWAODDPYXcjs.catalog;

package/dist/catalog.js

@@ -0,0 +1,44 @@
+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 { diagramsCatalog } from "./charts/diagrams/index.js";
+import { mlchartsCatalog } from "./charts/mlcharts/index.js";
+import { frameworksCatalog } from "./charts/frameworks/index.js";
+import { lifescienceCatalog } from "./charts/lifescience/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, ...diagramsCatalog, ...mlchartsCatalog, ...frameworksCatalog, ...lifescienceCatalog, ...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 };