@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/massive/CanvasSurface.js

@@ -0,0 +1,174 @@
+// src/charts/massive/CanvasSurface.ts
+/** Above this many pixels Safari on iOS leaves a canvas blank, so density is capped there. */
+var AREA_LIMIT = 16777216;
+/** The canvas stacked under a chart's SVG: backing store at device resolution, bitmap blits, sprites and the hover spot. */
+var CanvasSurface = class {
+	canvas;
+	#context;
+	#scratch;
+	#spot;
+	#backdrop;
+	#sprites = /* @__PURE__ */ new Map();
+	#onRatio;
+	#sizing = null;
+	#media = null;
+	#ratio = 1;
+	#cssWidth = 0;
+	#cssHeight = 0;
+	#shown = 1;
+	constructor(host, onRatio, onResize) {
+		this.#onRatio = onRatio;
+		if (typeof ResizeObserver === "function") {
+			const sizeOf = () => `${host.clientWidth}x${host.clientHeight}`;
+			let last = sizeOf();
+			this.#sizing = new ResizeObserver(() => {
+				if (sizeOf() !== last) onResize();
+				last = sizeOf();
+			});
+			this.#sizing.observe(host);
+		}
+		this.#backdrop = host.appendChild(document.createElement("div"));
+		Object.assign(this.#backdrop.style, {
+			position: "absolute",
+			zIndex: "0",
+			pointerEvents: "none"
+		});
+		this.canvas = host.appendChild(document.createElement("canvas"));
+		this.canvas.setAttribute("aria-hidden", "true");
+		Object.assign(this.canvas.style, {
+			position: "absolute",
+			display: "block",
+			zIndex: "0",
+			pointerEvents: "none"
+		});
+		const drawable = typeof CanvasRenderingContext2D === "function";
+		this.#context = drawable ? this.canvas.getContext("2d") : null;
+		this.#scratch = drawable ? document.createElement("canvas") : null;
+		this.#spot = host.appendChild(document.createElement("div"));
+		Object.assign(this.#spot.style, {
+			position: "absolute",
+			zIndex: "2",
+			left: "0",
+			top: "0",
+			width: "10px",
+			height: "10px",
+			margin: "-5px 0 0 -5px",
+			borderRadius: "50%",
+			pointerEvents: "none",
+			opacity: "0"
+		});
+	}
+	get context() {
+		return this.#context;
+	}
+	get ratio() {
+		return this.#ratio;
+	}
+	get cssSize() {
+		return {
+			width: this.#cssWidth,
+			height: this.#cssHeight
+		};
+	}
+	/** The chart's surface colour, which the transparent SVG no longer paints. */
+	backdrop(left, top, width, height, color) {
+		Object.assign(this.#backdrop.style, {
+			left: `${left}px`,
+			top: `${top}px`,
+			width: `${width}px`,
+			height: `${height}px`,
+			background: color
+		});
+	}
+	/** Positions the canvas and sizes its backing store. Returns the device-pixel ratio it really got. */
+	place({ left, top, width, height, displayWidth, displayHeight, ratio }) {
+		const fitted = Math.min(ratio, Math.sqrt(AREA_LIMIT / Math.max(1, width * height)));
+		const columns = Math.max(1, Math.round(width * fitted)), rows = Math.max(1, Math.round(height * fitted));
+		if (this.canvas.width !== columns) this.canvas.width = columns;
+		if (this.canvas.height !== rows) this.canvas.height = rows;
+		Object.assign(this.canvas.style, {
+			left: `${left}px`,
+			top: `${top}px`,
+			width: `${displayWidth}px`,
+			height: `${displayHeight}px`
+		});
+		this.#ratio = columns / Math.max(1, width);
+		this.#shown = displayWidth / columns;
+		this.#cssWidth = width;
+		this.#cssHeight = height;
+		this.#watch();
+		return this.#ratio;
+	}
+	clear() {
+		this.#context?.clearRect(0, 0, this.canvas.width, this.canvas.height);
+	}
+	/** Crisp one-CSS-pixel grid rules across the plot, at y positions in CSS pixels. */
+	rules(positions, color) {
+		const context = this.#context;
+		if (!context) return;
+		const thick = Math.max(1, Math.round(this.#ratio));
+		context.fillStyle = color;
+		for (const y of positions) context.fillRect(0, Math.round(y * this.#ratio - thick / 2), this.canvas.width, thick);
+	}
+	/** Puts a `columns × rows` RGBA bitmap on the canvas, each pixel `cell` device pixels wide, unsmoothed. */
+	pixels(words, columns, rows, cell) {
+		const context = this.#context, scratch = this.#scratch;
+		if (!context || !scratch) return;
+		if (scratch.width !== columns) scratch.width = columns;
+		if (scratch.height !== rows) scratch.height = rows;
+		const bytes = new Uint8ClampedArray(words.buffer, words.byteOffset, columns * rows * 4);
+		scratch.getContext("2d").putImageData(new ImageData(bytes, columns, rows), 0, 0);
+		context.imageSmoothingEnabled = false;
+		context.drawImage(scratch, 0, 0, columns * cell, rows * cell);
+	}
+	/** A disc with a surface-coloured ring, drawn once per colour, size and theme. */
+	sprite(fill, ring, radius, gap) {
+		const key = `${fill}/${ring}/${radius}/${gap}`;
+		let sprite = this.#sprites.get(key);
+		if (sprite) return sprite;
+		sprite = document.createElement("canvas");
+		const outer = radius + gap;
+		sprite.width = sprite.height = Math.ceil(outer * 2) + 2;
+		const context = sprite.getContext("2d"), centre = sprite.width / 2;
+		for (const [tone, size] of [[ring, outer], [fill, radius]]) {
+			context.fillStyle = tone;
+			context.beginPath();
+			context.arc(centre, centre, size, 0, Math.PI * 2);
+			context.fill();
+		}
+		this.#sprites.set(key, sprite);
+		return sprite;
+	}
+	/** Rings the hovered point without redrawing the data. `x` and `y` are device pixels on the canvas. */
+	spot(x, y, fill, ring) {
+		Object.assign(this.#spot.style, {
+			transform: `translate(${this.canvas.offsetLeft + x * this.#shown}px, ${this.canvas.offsetTop + y * this.#shown}px)`,
+			background: fill,
+			boxShadow: `0 0 0 2px ${ring}`,
+			opacity: "1"
+		});
+	}
+	unspot() {
+		this.#spot.style.opacity = "0";
+	}
+	destroy() {
+		this.#media?.removeEventListener("change", this.#changed);
+		this.#sizing?.disconnect();
+		this.canvas.remove();
+		this.#spot.remove();
+		this.#backdrop.remove();
+	}
+	#changed = () => {
+		this.#onRatio();
+	};
+	/** A window moved between screens changes the ratio without a resize, so the query is rebuilt per ratio. */
+	#watch() {
+		if (typeof matchMedia !== "function") return;
+		const query = `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`;
+		if (this.#media?.media === query) return;
+		this.#media?.removeEventListener("change", this.#changed);
+		this.#media = matchMedia(query);
+		this.#media.addEventListener("change", this.#changed);
+	}
+};
+export { CanvasSurface };

package/dist/charts/massive/LttbDecimator.js

@@ -0,0 +1,50 @@
+import { PassThrough } from "./PassThroughDecimator.js";
+// src/charts/massive/LttbDecimator.ts
+/**
+* Largest-Triangle-Three-Buckets: keeps the point in each bucket that spans the largest triangle with its
+* neighbours. Smoother to read than min-max, at the price of dropping some extremes.
+*/
+var LttbDecimator = class {
+	static reduce(run, from, to, view) {
+		const { x, y } = run;
+		const { ax, bx, ay, by, width } = view;
+		const threshold = Math.max(3, Math.ceil(width));
+		const size = to - from;
+		if (size <= threshold) return PassThrough.reduce(run, from, to, view);
+		const out = new Float32Array(threshold * 2);
+		const every = (size - 2) / (threshold - 2);
+		let anchorX = ax * x[from] + bx, anchorY = ay * y[from] + by, used = 0;
+		const put = (px, py) => {
+			out[used++] = px;
+			out[used++] = py;
+		};
+		put(anchorX, anchorY);
+		for (let bucket = 0; bucket < threshold - 2; bucket++) {
+			const start = from + Math.floor(bucket * every) + 1, end = from + Math.floor((bucket + 1) * every) + 1;
+			const beyond = Math.min(from + Math.floor((bucket + 2) * every) + 1, to);
+			let sumX = 0, sumY = 0, seen = 0;
+			for (let i = end; i < beyond; i++) {
+				sumX += ax * x[i] + bx;
+				sumY += ay * y[i] + by;
+				seen++;
+			}
+			const nextX = seen ? sumX / seen : ax * x[to - 1] + bx, nextY = seen ? sumY / seen : anchorY;
+			let best = -1, bestX = anchorX, bestY = anchorY;
+			for (let i = start; i < end; i++) {
+				const px = ax * x[i] + bx, py = ay * y[i] + by;
+				const area = Math.abs((anchorX - nextX) * (py - anchorY) - (anchorX - px) * (nextY - anchorY));
+				if (area > best) {
+					best = area;
+					bestX = px;
+					bestY = py;
+				}
+			}
+			put(bestX, bestY);
+			anchorX = bestX;
+			anchorY = bestY;
+		}
+		put(ax * x[to - 1] + bx, ay * y[to - 1] + by);
+		return out;
+	}
+};
+export { LttbDecimator };

package/dist/charts/massive/MassiveChart.js

@@ -0,0 +1,409 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartExporter, ExportFormat } from "../../core/ChartExporter.js";
+import { ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { CanvasSurface } from "./CanvasSurface.js";
+import { NearestIndex } from "./MassiveNearestIndex.js";
+import { PointColumns } from "./MassivePointColumns.js";
+import { scaleUtc, utcFormat } from "d3";
+// src/charts/massive/MassiveChart.ts
+var signed = (value, shape) => Math.sign(value) * shape(Math.abs(value));
+var FORWARD = {
+	[ScaleKind.Linear]: null,
+	[ScaleKind.Log]: (value) => value > 0 ? Math.log10(value) : NaN,
+	[ScaleKind.Sqrt]: (value) => signed(value, Math.sqrt),
+	[ScaleKind.Pow]: (value) => signed(value, (magnitude) => magnitude * magnitude),
+	[ScaleKind.Symlog]: (value) => signed(value, Math.log1p)
+};
+var INVERSE = {
+	[ScaleKind.Linear]: (value) => value,
+	[ScaleKind.Log]: (value) => 10 ** value,
+	[ScaleKind.Sqrt]: (value) => signed(value, (magnitude) => magnitude * magnitude),
+	[ScaleKind.Pow]: (value) => signed(value, Math.sqrt),
+	[ScaleKind.Symlog]: (value) => signed(value, Math.expm1)
+};
+var TRANSLATE = /translate\(\s*(-?[\d.]+)[ ,]+(-?[\d.]+)/;
+var clock = utcFormat("%b %d, %Y %H:%M");
+var compact = Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumSignificantDigits: 2
+});
+/**
+* Draws data to a canvas stacked under a transparent SVG, which keeps title, axes, legend, zoom buttons,
+* brush and annotations above the data. The grid moves to the canvas so it stays below the data.
+* Every scale kind reduces to one linear map from precomputed values to device pixels, so a frame is a
+* typed-array loop. Subclasses turn that view into a layer in `compose`, once per painted view.
+* `zoom` and `brush` are the library's `viewport`: pass `ZoomAxis.XY` to zoom both axes.
+*/
+var MassiveChart = class extends CartesianChart {
+	#surface = null;
+	#columnsKey = "";
+	#source;
+	#columns = null;
+	#space = null;
+	#spaceKey = "";
+	#index = null;
+	#view = null;
+	#layer = null;
+	#composed = "";
+	#colors = [];
+	#ramp = null;
+	#rules = [];
+	#hoverFrame = 0;
+	#pointer = null;
+	/** How far from the pointer a point can be picked, in CSS pixels. */
+	hoverReach() {
+		return {
+			x: 32,
+			y: 32
+		};
+	}
+	fillsX() {
+		return false;
+	}
+	defaults() {
+		return {
+			xScale: ScaleKind.Linear,
+			yScale: ScaleKind.Linear
+		};
+	}
+	/** Points after dropping non-finite rows. */
+	get columns() {
+		const { data, x, y, series } = this.options;
+		const key = `${x}/${y}/${series}`;
+		if (!this.#columns || this.#source !== data || this.#columnsKey !== key) {
+			this.#columns = PointColumns.from(data, x, y, series);
+			this.#source = data;
+			this.#columnsKey = key;
+			this.#space = null;
+		}
+		return this.#columns;
+	}
+	get points() {
+		const columns = this.columns;
+		const kindX = columns.time ? ScaleKind.Linear : this.options.xScale, kindY = this.options.yScale;
+		const key = `${kindX}/${kindY}`;
+		if (!this.#space || this.#spaceKey !== key) {
+			const x = mapped(columns.x, kindX), y = mapped(columns.y, kindY);
+			this.#space = {
+				x,
+				y,
+				group: columns.group,
+				length: columns.length,
+				xBounds: bounds(x),
+				yBounds: bounds(y)
+			};
+			this.#spaceKey = key;
+			this.#index = null;
+		}
+		return this.#space;
+	}
+	table() {
+		const { data } = this.options;
+		if (Array.isArray(data) || !data) return super.table();
+		const { x, y, group, names, time } = this.columns;
+		return {
+			columns: [
+				"x",
+				"y",
+				"series"
+			],
+			rows: Array.from(x, (value, i) => [
+				time ? new Date(value) : value,
+				y[i],
+				names[group[i]]
+			])
+		};
+	}
+	/** Asks without building `table()`, which is a million arrays here. */
+	get exportFormats() {
+		const { data } = this.options;
+		const rows = Array.isArray(data) ? data.length : data?.x.length;
+		return [
+			ExportFormat.SVG,
+			ExportFormat.PNG,
+			ExportFormat.PDF,
+			...ChartExporter.tabular(rows ?? 0)
+		];
+	}
+	/** A patch naming `data` may hold the same array, written to in place. */
+	update(patch) {
+		if ("data" in patch) {
+			this.#columns = null;
+			this.#ramp = null;
+		}
+		return super.update(patch);
+	}
+	signature() {
+		const detached = !this.host;
+		if (detached) this.mountScratch(document.createElement("div"));
+		const layer = this.#layer;
+		const text = `${super.signature()}|canvas:${layer?.kind}:${layer?.geometry.length}:${hash(layer?.geometry ?? [])}`;
+		if (detached) this.destroy();
+		return text;
+	}
+	/** A ramp stays through a zoom that reaches single dots: dropping its row mid-gesture would shift the plot under the pointer. */
+	legendItems() {
+		const ramp = this.#layer?.ramp;
+		if (ramp) this.#ramp = ramp;
+		else if (!this.viewport.zoomed) this.#ramp = null;
+		return this.#ramp ?? super.legendItems();
+	}
+	scales(ctx) {
+		const { xBounds, yBounds } = this.points;
+		const xBase = axis(xBounds, this.options.xScale, this.columns.time, [0, ctx.plot.width], !this.fillsX());
+		const yBase = axis(yBounds, this.options.yScale, false, [ctx.plot.height, 0], true);
+		return {
+			x: decades(xBase),
+			y: decades(yBase)
+		};
+	}
+	tickFormat(scale) {
+		return "base" in scale ? this.viewport.format(scale) ?? ((value) => compact.format(+value)) : super.tickFormat(scale);
+	}
+	plotMarks(ctx, axes) {
+		const { names, time } = this.columns;
+		this.#colors = names.map((name) => ctx.palette.color(name));
+		const surface = this.#surface ??= this.#attach();
+		const { plot } = ctx;
+		const frame = ctx.svg.select("g.g-plot");
+		const [, left = 0, top = 0] = TRANSLATE.exec(frame.attr("transform") ?? "")?.map(Number) ?? [];
+		const { x, y, width, height, stretch, shiftX, shiftY } = this.#drawnBox(ctx.svg.node());
+		surface.backdrop(x, y, width, height, ctx.theme.surface);
+		const asked = this.options.pixelRatio ?? globalThis.devicePixelRatio ?? 1;
+		const ratio = surface.place({
+			left: x + shiftX + left * stretch,
+			top: y + shiftY + top * stretch,
+			width: plot.width,
+			height: plot.height,
+			displayWidth: plot.width * stretch,
+			displayHeight: plot.height * stretch,
+			ratio: asked > 0 ? asked : 1
+		});
+		frame.select(":scope > g.m-grid").style("display", "none");
+		this.#rules = this.options.grid === false ? [] : axes.y.ticks(this.yTicks()).map((tick) => axes.y(tick));
+		const view = this.#project(axes, plot.width, plot.height, ratio, time);
+		const key = JSON.stringify(view);
+		if (key !== this.#composed) {
+			this.#layer = this.compose(view, this.points, this.#colors, ctx);
+			this.#composed = key;
+		}
+		this.#view = view;
+	}
+	/** The marks are on a canvas, so axes repaint in step with them rather than sliding ahead. */
+	get liveMotion() {
+		return false;
+	}
+	/** One composition per view: legend and gutter fitting can lay the SVG out more than once. */
+	paint() {
+		this.#composed = "";
+		this.#layer = null;
+		super.paint();
+		if (this.options.data == null) this.#detach();
+		const surface = this.#surface;
+		if (!surface) return;
+		this.svg.style("background", "transparent").style("position", "relative").style("z-index", "1");
+		surface.unspot();
+		if (this.#pointer && !this.viewport.moving) this.#queueHover();
+		surface.clear();
+		surface.rules(this.#rules, this.theme.grid);
+		this.#layer?.draw(surface);
+	}
+	teardown() {
+		globalThis.cancelAnimationFrame?.(this.#hoverFrame);
+		this.#hoverFrame = 0;
+		this.host?.removeEventListener("pointermove", this.#moved);
+		this.host?.removeEventListener("pointerleave", this.#left);
+		this.host?.removeEventListener("click", this.#clicked);
+		this.#detach();
+		this.#pointer = null;
+		super.teardown();
+	}
+	/** The SVG cannot show the canvas, so exports place its bitmap above the surface rectangle. */
+	finishCopy(copy) {
+		const surface = this.#surface;
+		if (!surface?.context) return;
+		copy.querySelector("g.g-plot > g.m-grid")?.remove();
+		const image = copy.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "image");
+		const { width, height } = surface.cssSize, transform = copy.querySelector("g.g-plot")?.getAttribute("transform") ?? "";
+		for (const [name, value] of Object.entries({
+			href: surface.canvas.toDataURL("image/png"),
+			width,
+			height,
+			transform
+		})) image.setAttribute(name, `${value}`);
+		copy.insertBefore(image, copy.querySelector(":scope > rect")?.nextSibling ?? copy.firstChild);
+	}
+	#project(axes, width, height, ratio, time) {
+		const [ax, bx] = linear(axes.x, time ? null : FORWARD[this.options.xScale], ratio);
+		const [ay, by] = linear(axes.y, FORWARD[this.options.yScale], ratio);
+		return {
+			ax,
+			bx,
+			ay,
+			by,
+			width: width * ratio,
+			height: height * ratio,
+			ratio
+		};
+	}
+	#attach() {
+		this.host.addEventListener("pointermove", this.#moved);
+		this.host.addEventListener("pointerleave", this.#left);
+		this.host.addEventListener("click", this.#clicked);
+		const repaint = () => {
+			if (this.host) this.render();
+		};
+		return new CanvasSurface(this.host, repaint, () => {
+			if (this.options.width && this.options.height) repaint();
+		});
+	}
+	#detach() {
+		this.#surface?.destroy();
+		this.#surface = null;
+		this.#layer = null;
+		this.#view = null;
+	}
+	/**
+	* The SVG's box in the host's coordinates and how much of a chart pixel the picture got: a chart wider
+	* than its container shrinks, keeps its height box and centres the picture in it. Measuring in the host's
+	* own pixels keeps this right under a CSS transform, and the host's border is outside its positioned children.
+	*/
+	#drawnBox(svg) {
+		const host = this.host, box = svg.getBoundingClientRect(), hostBox = host.getBoundingClientRect();
+		const unit = host.offsetWidth ? hostBox.width / host.offsetWidth : 1;
+		const width = box.width / unit, height = box.height / unit;
+		const x = (box.left - hostBox.left) / unit - host.clientLeft, y = (box.top - hostBox.top) / unit - host.clientTop;
+		if (!width || !height) return {
+			x,
+			y,
+			width: this.size.width,
+			height: this.size.height,
+			stretch: 1,
+			shiftX: 0,
+			shiftY: 0
+		};
+		const stretch = Math.min(width / this.size.width, height / this.size.height);
+		return {
+			x,
+			y,
+			width,
+			height,
+			stretch,
+			shiftX: (width - this.size.width * stretch) / 2,
+			shiftY: (height - this.size.height * stretch) / 2
+		};
+	}
+	#pick(pointer) {
+		const view = this.#view, canvas = this.#surface?.canvas;
+		if (!view || !canvas) return -1;
+		const box = canvas.getBoundingClientRect();
+		const scale = box.width ? view.width / box.width : 1;
+		const x = (pointer.clientX - box.left) * scale, y = (pointer.clientY - box.top) * scale;
+		if (x < 0 || y < 0 || x > view.width || y > view.height) return -1;
+		const reach = this.hoverReach();
+		this.#index ??= new NearestIndex(this.points);
+		return this.#index.nearest(view, x, y, reach.x * view.ratio, reach.y * view.ratio);
+	}
+	#moved = (event) => {
+		this.#pointer = event;
+		if (this.options.tooltip !== false) this.#queueHover();
+	};
+	#queueHover() {
+		this.#hoverFrame ||= requestAnimationFrame(() => {
+			this.#hoverFrame = 0;
+			this.#hover();
+		});
+	}
+	#left = () => {
+		this.#pointer = null;
+		this.#surface?.unspot();
+		this.untip();
+	};
+	#clicked = (event) => {
+		if (!this.options.onSelect) return;
+		const hit = this.#pick(event);
+		if (hit >= 0) this.options.onSelect?.(this.#datum(hit));
+	};
+	#hover() {
+		const pointer = this.#pointer, surface = this.#surface, view = this.#view;
+		const hit = pointer && view && !this.viewport.moving && this.options.tooltip !== false ? this.#pick(pointer) : -1;
+		if (hit < 0 || !pointer || !surface || !view) {
+			surface?.unspot();
+			this.untip();
+			return;
+		}
+		const { x, y } = this.points, color = this.#colors[this.columns.group[hit]];
+		surface.spot(view.ax * x[hit] + view.bx, view.ay * y[hit] + view.by, color, this.theme.surface);
+		this.tip(pointer, this.#content(hit, color));
+	}
+	#content(hit, color) {
+		const { x, y, group, names, time } = this.columns;
+		const { xLabel, yLabel, x: xName, y: yName } = this.options;
+		const rows = [[xLabel ?? xName, time ? clock(new Date(x[hit])) : x[hit]], [yLabel ?? yName, y[hit]]];
+		const view = this.#view;
+		const inBin = this.#layer?.count?.(view.ax * this.points.x[hit] + view.bx, view.ay * this.points.y[hit] + view.by);
+		if (inBin && inBin > 1) rows.push(["Points in bin", inBin]);
+		return {
+			color,
+			rows,
+			...names.length > 1 ? { title: names[group[hit]] } : {}
+		};
+	}
+	#datum(hit) {
+		const { data } = this.options;
+		const columns = this.columns;
+		if (Array.isArray(data)) return data[columns.source[hit]];
+		return {
+			x: data.x[columns.source[hit]],
+			y: data.y[columns.source[hit]],
+			series: columns.names[columns.group[hit]]
+		};
+	}
+};
+function mapped(values, kind) {
+	const forward = FORWARD[kind];
+	return forward ? values.map(forward) : values;
+}
+/** Slope and intercept of a rescaled d3 scale in scale space, in device pixels. */
+function linear(scale, forward, ratio) {
+	const domain = scale.domain().map(Number), range = scale.range();
+	const from = forward ? forward(domain[0]) : domain[0], to = forward ? forward(domain[domain.length - 1]) : domain[domain.length - 1];
+	const slope = (range[range.length - 1] - range[0]) / (to - from || 1);
+	return [slope * ratio, (range[0] - slope * from) * ratio];
+}
+function bounds(values) {
+	let low = Infinity, high = -Infinity;
+	for (let i = 0; i < values.length; i++) {
+		const value = values[i];
+		if (value < low) low = value;
+		if (value > high) high = value;
+	}
+	return low <= high ? [low, high] : null;
+}
+/** The fitted d3 scale. Bounds are in scale space, so they ignore points the scale cannot show. */
+function axis(span, kind, time, range, nice) {
+	const inverse = INVERSE[time ? ScaleKind.Linear : kind];
+	const logarithmic = kind === ScaleKind.Log && !time;
+	let from = span ? inverse(span[0]) : logarithmic ? 1 : 0, to = span ? inverse(span[1]) : logarithmic ? 10 : 1;
+	if (from === to) [from, to] = logarithmic ? [from / 2, to * 2] : [from - 1, to + 1];
+	if (time) return scaleUtc().domain([from, to]).range(range);
+	const scale = Scales.continuous(kind).domain([from, to]).range(range);
+	return nice ? scale.nice() : scale;
+}
+/** A log scale offers a tick per mantissa, far more than an axis can label: keep powers of ten while there are at least two. */
+function decades(scale) {
+	if (!("base" in scale)) return scale;
+	const log = scale, ticks = log.ticks.bind(log);
+	log.ticks = (count) => {
+		const all = ticks(count), tens = all.filter((tick) => Math.abs(Math.log10(tick) % 1) < 1e-9);
+		return tens.length >= 2 ? tens : all.filter((_, i) => i % Math.ceil(all.length / 6) === 0);
+	};
+	return scale;
+}
+function hash(values) {
+	let state = 2166136261;
+	for (let i = 0; i < values.length; i++) state = Math.imul(state ^ Math.round(values[i] * 16), 16777619);
+	return state >>> 0;
+}
+export { MassiveChart };

package/dist/charts/massive/MassiveColorTable.js

@@ -0,0 +1,31 @@
+import { color } from "d3";
+// src/charts/massive/MassiveColorTable.ts
+/** Packs CSS colours into the little-endian RGBA words an `ImageData` buffer holds. */
+var ColorTable = class ColorTable {
+	static SIZE = 256;
+	static rgb(value) {
+		const rgb = color(value)?.rgb();
+		return rgb ? [
+			rgb.r,
+			rgb.g,
+			rgb.b
+		] : [
+			0,
+			0,
+			0
+		];
+	}
+	static pack(red, green, blue, alpha = 255) {
+		return (alpha << 24 | blue << 16 | green << 8 | red) >>> 0;
+	}
+	/** The sequential ramp, skipping its faintest stop so a one-point bin still shows on the surface. */
+	static ramp(palette) {
+		const table = new Uint32Array(ColorTable.SIZE);
+		for (let i = 0; i < table.length; i++) table[i] = ColorTable.pack(...ColorTable.rgb(palette.sequential(ColorTable.tone(i / (table.length - 1)))));
+		return table;
+	}
+	static tone(t) {
+		return .15 + .85 * t;
+	}
+};
+export { ColorTable };