@dou-ui/chart 0.0.0-stage → 0.1.0-alpha.0

package/dist/core/layout.js

@@ -0,0 +1,1002 @@
+import { categoryScale, categoryTicks, linearDomain, linearScale, linearTicks, logDomain, logScale, logTicks, nextNiceStep, niceStep, stepDecimals } from "./scale.js";
+import { toTime } from "./data.js";
+import { timeInterval, timeTicks } from "./time.js";
+import { numberTickFormat, timeTickFormat } from "./format.js";
+import { unitsOf } from "./window.js";
+// src/core/layout.ts
+/** `range` as the axis runs: turned round when it is reversed. */
+var runs = (config, range) => config?.reverse ? [range[1], range[0]] : range;
+var nameText = (name) => typeof name === "string" ? name : name.text;
+var swatchOf = (name) => typeof name === "string" ? SWATCH : name.swatch;
+/** A legend entry: the swatch, the room after it, and the room to the next entry. */
+var SWATCH = 12;
+var SWATCH_GAP = 6;
+var LEGEND_GAP = 16;
+var LEGEND_ROW_GAP = 4;
+/** Rows 40px apart on a touch screen: each entry's hit area reaches 12px past its text, above and below. */
+var LEGEND_ROW_GAP_COARSE = 24;
+/** The most of the chart's width a legend down the side may take. */
+var LEGEND_SIDE_SHARE = .3;
+var STRIP_GAP = 12;
+/** Wanted room between ticks, in px. */
+var X_TICK_SPACE = 64;
+var Y_TICK_SPACE = 48;
+/** The most of the chart's width that category names down the side may take. */
+var SIDE_LABEL_SHARE = .4;
+var asNumber = (value, kind) => value === void 0 ? void 0 : kind === "time" ? toTime(value) : Number(value);
+var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+/** Widens `[lo, hi]` so `inset` px stay free at both ends of an axis `length` px long. */
+function widen(lo, hi, inset, length) {
+	if (!(inset > 0) || !(hi > lo)) return [lo, hi];
+	const pad = (hi - lo) * inset / Math.max(1, length - inset * 2);
+	return [lo - pad, hi + pad];
+}
+/** Places the axes and works out the plot area, the scales and the tick labels. */
+function layoutChart(options) {
+	const { width, height, measure } = options;
+	const placed = placeLegendIn(options.legend ?? [], options.legendPlacement ?? "bottom", width, height, measure);
+	const { legend, box: legendBox } = placed;
+	const { bottom: legendHeight, top: legendTop, right: legendRight } = placed.room;
+	const room = options.strip ? 44 : 0;
+	if (options.horizontal) {
+		const inner = width - room - legendRight;
+		const layout = layoutAcross({
+			...options,
+			width: inner
+		}, legendHeight, legendTop);
+		const { plot } = layout;
+		const strip = room ? {
+			x: inner + STRIP_GAP,
+			y: plot.y,
+			width: 32,
+			height: plot.height
+		} : void 0;
+		return {
+			...layout,
+			width,
+			legend,
+			legendBox,
+			strip
+		};
+	}
+	const layout = layoutUp({
+		...options,
+		width: width - legendRight
+	}, legendHeight + room, legendTop);
+	const { plot } = layout;
+	const strip = room ? {
+		x: plot.x,
+		y: height - legendHeight - 32,
+		width: plot.width,
+		height: 32
+	} : void 0;
+	return {
+		...layout,
+		width,
+		legend,
+		legendBox,
+		strip
+	};
+}
+/**
+* Places a legend's entries where it goes: in rows under or above the
+* chart, or one under another down its right side. Gives the room it
+* takes from the chart on each side, and the box it shows in: past three
+* rows (or the chart's height, down the side), its entries scroll.
+*/
+function placeLegendIn(names, at, width, height, measure, coarse = false) {
+	const rowGap = coarse ? LEGEND_ROW_GAP_COARSE : LEGEND_ROW_GAP;
+	const room = {
+		top: 0,
+		bottom: 0,
+		right: 0
+	};
+	if (!names.length) return {
+		legend: [],
+		room
+	};
+	if (at === "right") {
+		const widest = Math.max(42, Math.floor(width * LEGEND_SIDE_SHARE) - LEGEND_GAP);
+		const step = 16 + Math.max(rowGap, 8);
+		const legend = names.map((name, index) => {
+			const text = nameText(name);
+			const full = swatchOf(name) + SWATCH_GAP + measure(text);
+			const item = {
+				index,
+				text,
+				left: 0,
+				top: index * step,
+				width: Math.min(full, widest)
+			};
+			if (full > widest) item.clipped = true;
+			if (typeof name !== "string") item.swatch = name.swatch;
+			return item;
+		});
+		const boxWidth = Math.max(...legend.map((item) => item.width));
+		const content = (legend.length - 1) * step + 16;
+		const boxHeight = Math.min(content, height - 16);
+		const box = {
+			x: width - 4 - boxWidth,
+			y: 8,
+			width: boxWidth,
+			height: boxHeight,
+			scroll: content > boxHeight + .5
+		};
+		for (const item of legend) {
+			item.left += box.x;
+			item.top += box.y;
+		}
+		room.right = boxWidth + LEGEND_GAP;
+		return {
+			legend,
+			box,
+			room
+		};
+	}
+	const legend = placeLegend(names, width, measure, coarse);
+	const rowStep = 16 + rowGap;
+	const content = legend[legend.length - 1].top + 16;
+	const boxHeight = Math.min(content, 2 * rowStep + 16);
+	const gap = 12;
+	const y = at === "top" ? 4 : height - boxHeight;
+	for (const item of legend) item.top += y;
+	const box = {
+		x: 0,
+		y,
+		width,
+		height: boxHeight,
+		scroll: content > boxHeight + .5
+	};
+	if (at === "top") room.top = 4 + boxHeight + gap - 8;
+	else room.bottom = boxHeight + gap;
+	return {
+		legend,
+		box,
+		room
+	};
+}
+var shown = (config) => !!config && !config.hidden;
+/**
+* The value axes for about `count` ticks; the second one gets as many
+* steps as the first, so both share one set of grid lines.
+*/
+function valueAxes(axes, model, count, locale, length, zoom, across = false, most = Infinity) {
+	let y = axes.y ? valueAxis("y", axes.y, model, count, locale, length, across, most) : null;
+	let y2 = axes.y2 ? valueAxis("y2", axes.y2, model, count, locale, length, across, most) : null;
+	if (y && y2 && !axes.y2.ticks && !y2.fixed && y.ticks.length > 1) {
+		const both = alignZero(y, y2, axes.y, axes.y2, model, locale, length);
+		if (both) ({y, y2} = both);
+		else y2 = alignTo(y2, y.ticks.length - 1, axes.y2, model, locale, length);
+	}
+	const primary = y ?? y2;
+	if (!zoom || !primary) return {
+		y,
+		y2
+	};
+	const units = unitsOf({ kind: primary.kind });
+	const [d0, d1] = primary.domain.map(units.to);
+	const part = [(units.to(zoom[0]) - d0) / (d1 - d0 || 1), (units.to(zoom[1]) - d0) / (d1 - d0 || 1)];
+	const zoomed = (axis, config) => axis && config ? zoomAxis(axis, part, count, config, locale, most) : null;
+	return {
+		y: zoomed(y, axes.y),
+		y2: zoomed(y2, axes.y2)
+	};
+}
+/** `axis` zoomed in to `part` of it (0 to 1 from its start), with ticks of its own. */
+function zoomAxis(axis, part, count, config, locale, most = Infinity) {
+	const units = unitsOf({ kind: axis.kind });
+	const [d0, d1] = axis.domain.map(units.to);
+	const domain = [units.from(d0 + (d1 - d0) * part[0]), units.from(d0 + (d1 - d0) * part[1])];
+	count = tickCount(config, count, most);
+	const given = explicitTicks(config, axis.kind);
+	const ticks = given ? given.filter((v) => v >= domain[0] && v <= domain[1]) : axis.kind === "log" ? logTicks(domain[0], domain[1], count) : linearTicks(domain[0], domain[1], count);
+	return {
+		...axis,
+		full: axis.domain,
+		domain,
+		ticks,
+		texts: valueTexts(ticks, config, locale)
+	};
+}
+/** The data span an axis has to show, with 0 when it starts at 0. */
+function extent(role, config, model, length) {
+	const data = model.y[role];
+	let [lo, hi] = data ? widen(data[0], data[1], model.inset, length) : [0, 1];
+	if (config.zero ?? model.zero[role]) {
+		lo = Math.min(lo, 0);
+		hi = Math.max(hi, 0);
+	}
+	return [lo, hi];
+}
+/**
+* Two linear axes that both reach below 0: 0 on one line, so bars on
+* both start from the same baseline. Each gets nice steps of its own, the
+* same number of them below 0 and above, as few as cover both. `null`
+* when it doesn't apply (an end or the ticks given, a log axis, all data
+* on one side of 0, where aligning the steps already lines up 0).
+*/
+function alignZero(y, y2, yConfig, y2Config, model, locale, length) {
+	if (y.kind === "log" || y2.kind === "log") return null;
+	const given = (c) => c.min !== void 0 || c.max !== void 0 || !!c.ticks;
+	if (given(yConfig) || given(y2Config)) return null;
+	const spans = [extent("y", yConfig, model, length), extent("y2", y2Config, model, length)];
+	if (!spans.some(([lo, hi]) => lo < 0 && hi > 0) || spans.some(([lo, hi]) => lo > 0 || hi < 0)) return null;
+	const intervals = y.ticks.length - 1;
+	const steps = spans.map(([lo, hi]) => {
+		const choices = [];
+		let step = niceStep(hi - lo || 1, intervals * 2);
+		for (let i = 0; i < 6; i++, step = nextNiceStep(step)) choices.push(step);
+		return choices;
+	});
+	let best = null;
+	for (const s1 of steps[0]) for (const s2 of steps[1]) {
+		const s = [s1, s2];
+		const below = Math.max(...spans.map(([lo], i) => Math.ceil(-lo / s[i] - 1e-9)));
+		const above = Math.max(...spans.map(([, hi], i) => Math.ceil(hi / s[i] - 1e-9)));
+		const total = below + above;
+		if (total < Math.max(2, intervals - 1) || total > intervals + 1) continue;
+		const fill = Math.min(...spans.map(([lo, hi], i) => (hi - lo) / (s[i] * total)));
+		if (!best || fill > best.fill + 1e-9) best = {
+			s,
+			below,
+			above,
+			fill
+		};
+	}
+	if (!best) return null;
+	const { s, below, above } = best;
+	const make = (axis, config, step) => {
+		const decimals = stepDecimals(step);
+		const ticks = Array.from({ length: below + above + 1 }, (_, i) => Number(((i - below) * step).toFixed(decimals)));
+		return {
+			...axis,
+			domain: [ticks[0], ticks[ticks.length - 1]],
+			ticks,
+			texts: valueTexts(ticks, config, locale)
+		};
+	};
+	return {
+		y: make(y, yConfig, s[0]),
+		y2: make(y2, y2Config, s[1])
+	};
+}
+/** x along the bottom, values up the left side (and the right). */
+function layoutUp({ model, axes, width, height, locale, measure, zoom, trailing = 0 }, legendHeight, topRoom = 0) {
+	const xAxis = axes.x;
+	const xShown = !xAxis.hidden;
+	const top = (shown(axes.y) && axes.y.title || shown(axes.y2) && axes.y2.title ? 32 : 8) + topRoom;
+	const bottom = (xShown ? 24 + (xAxis.title ? 20 : 0) : 8) + legendHeight;
+	const plotTop = top;
+	const plotHeight = Math.max(plotTop + 1, height - bottom) - plotTop;
+	const yCount = Math.max(2, Math.floor(plotHeight / Y_TICK_SPACE));
+	const roomy = (axis) => {
+		if (!axis || axis.ticks.length < 2 || model.yCategories?.[axis.role]) return true;
+		const scale = valueScale(axis, [plotHeight, 0]);
+		const at = axis.ticks.map((t) => scale.map(t));
+		return at.every((v, i) => i === 0 || Math.abs(v - at[i - 1]) >= 19.5);
+	};
+	const asked = [axes.y?.ticks, axes.y2?.ticks].filter((t) => typeof t === "number");
+	const rows = Math.max(2, Math.floor(plotHeight / 20) + 1);
+	let values = valueAxes(axes, model, yCount, locale, plotHeight, zoom?.y, false, rows);
+	for (let most = Math.min(Math.max(yCount, ...asked), rows); most >= 1; most--) {
+		values = valueAxes(axes, model, yCount, locale, plotHeight, zoom?.y, false, most);
+		if (roomy(values.y) && roomy(values.y2)) break;
+	}
+	const topOnly = (axis) => {
+		if (!axis || roomy(axis)) return axis;
+		const last = axis.ticks.length - 1;
+		return {
+			...axis,
+			ticks: [axis.ticks[last]],
+			texts: [axis.texts[last]]
+		};
+	};
+	const y = topOnly(values.y);
+	const y2 = topOnly(values.y2);
+	const side = (axis, config) => axis && shown(config) ? 4 + (config.labelWidth ?? labelWidth(axis.texts, measure)) + 8 : 8;
+	const leftWidth = side(y, axes.y);
+	const rightWidth = side(y2, axes.y2) + trailing;
+	const plot = {
+		x: leftWidth,
+		y: plotTop,
+		width: Math.max(1, width - leftWidth - rightWidth),
+		height: plotHeight
+	};
+	const yLayout = {};
+	for (const axis of [y, y2]) {
+		if (!axis) continue;
+		const config = axes[axis.role];
+		const scale = valueScale(axis, runs(config, [plot.y + plot.height, plot.y]));
+		const labels = config.hidden ? [] : placeDown(axis.ticks, axis.texts, scale, height, measure);
+		for (const label of labels) if (axis.role === "y") alignEnd(label, plot.x);
+		else label.left = plot.x + plot.width + trailing + 8;
+		yLayout[axis.role] = {
+			position: config.position,
+			scale,
+			ticks: axis.ticks,
+			labels,
+			grid: config.grid,
+			full: axis.full ?? axis.domain,
+			title: config.title && !config.hidden ? topTitle(config.title, axis.role === "y2", width, topRoom) : void 0
+		};
+	}
+	const along = [plot.x, plot.x + plot.width];
+	const count = Math.max(2, Math.floor(plot.width / X_TICK_SPACE));
+	const { scale, full } = xScale(xAxis, model, runs(xAxis, along), count, zoom?.x);
+	const labelTop = plot.y + plot.height + 8;
+	let x;
+	for (const { ticks, texts } of xTickChoices(xAxis, model, scale, plot.width, X_TICK_SPACE, locale)) {
+		const labels = placeAcross(ticks, texts, scale, labelTop, width, measure);
+		x = {
+			position: xAxis.position,
+			scale,
+			ticks,
+			labels,
+			grid: xAxis.grid,
+			full
+		};
+		if (fitAcross(labels)) break;
+	}
+	x ??= {
+		position: xAxis.position,
+		scale,
+		ticks: [],
+		labels: [],
+		grid: xAxis.grid,
+		full
+	};
+	if (!xShown) x.labels = [];
+	else if (xAxis.title) x.title = bottomTitle(xAxis.title, width, height, legendHeight);
+	return {
+		width,
+		height,
+		plot,
+		x,
+		y: yLayout
+	};
+}
+/**
+* x down the left side, values along the bottom (and a second kind along
+* the top): bars with long category names.
+*/
+function layoutAcross({ model, axes, width, height, locale, measure, zoom }, legendHeight, topRoom = 0) {
+	const xAxis = axes.x;
+	const xShown = !xAxis.hidden;
+	const yShown = shown(axes.y);
+	const y2Shown = shown(axes.y2);
+	const titleRow = xShown && xAxis.title || y2Shown && axes.y2.title ? 24 : 0;
+	const top = Math.max(8, titleRow + (y2Shown ? 24 : 0)) + topRoom;
+	const bottom = (yShown ? 24 + (axes.y.title ? 20 : 0) : 8) + legendHeight;
+	const plotTop = top;
+	const plotBottom = Math.max(plotTop + 1, height - bottom);
+	const plotHeight = plotBottom - plotTop;
+	const { scale, full } = xScale(xAxis, model, runs(xAxis, [plotTop, plotBottom]), Math.max(2, Math.floor(plotHeight / Y_TICK_SPACE)), zoom?.x);
+	let x;
+	for (const { ticks, texts } of xTickChoices(xAxis, model, scale, plotHeight, Y_TICK_SPACE, locale)) {
+		const labels = placeDown(ticks, texts, scale, height, measure);
+		x = {
+			position: xAxis.position,
+			scale,
+			ticks,
+			labels,
+			grid: xAxis.grid,
+			full
+		};
+		if (fitDown(labels)) break;
+	}
+	x ??= {
+		position: xAxis.position,
+		scale,
+		ticks: [],
+		labels: [],
+		grid: xAxis.grid,
+		full
+	};
+	if (!xShown) x.labels = [];
+	const widest = xAxis.labelWidth ?? Math.floor(width * SIDE_LABEL_SHARE);
+	for (const label of x.labels) if (label.width > widest) {
+		label.width = widest;
+		label.clipped = true;
+	}
+	const leftWidth = !xShown ? 8 : xAxis.labelWidth !== void 0 ? 4 + xAxis.labelWidth + 8 : x.labels.length ? 4 + labelWidth(x.labels.map((l) => l.width)) + 8 : 8;
+	let rightWidth = 8;
+	const plot = {
+		x: leftWidth,
+		y: plotTop,
+		width: 1,
+		height: plotHeight
+	};
+	const across = width - leftWidth - 8;
+	const place = (axis, labelTop, visible) => {
+		if (!axis) return null;
+		const valueScaleAcross = valueScale(axis, runs(axes[axis.role], [plot.x, plot.x + plot.width]));
+		return {
+			axis,
+			scale: valueScaleAcross,
+			labels: visible ? placeAcross(axis.ticks, axis.texts, valueScaleAcross, labelTop, width, measure) : []
+		};
+	};
+	const placeAll = (axes2) => {
+		plot.width = Math.max(1, width - leftWidth - rightWidth);
+		return {
+			y: place(axes2.y, plotBottom + 8, yShown),
+			y2: place(axes2.y2, plotTop - 8 - 16, y2Shown)
+		};
+	};
+	let values = valueAxes(axes, model, 2, locale, across, zoom?.y, true, 2);
+	let placed = placeAll(values);
+	const asked = [axes.y?.ticks, axes.y2?.ticks].filter((t) => typeof t === "number");
+	const start = Math.min(Math.max(2, Math.floor(across / X_TICK_SPACE), ...asked), Math.max(2, Math.floor(across / 16)));
+	const placeWithRoom = () => {
+		rightWidth = 8;
+		let out = placeAll(values);
+		let excess = 0;
+		for (const p of [out.y, out.y2]) {
+			const last = p?.labels[p.labels.length - 1];
+			if (p && last) excess = Math.max(excess, p.scale.map(p.axis.ticks[p.axis.ticks.length - 1]) + last.width / 2 + 4 - width);
+		}
+		if (excess > 0) {
+			rightWidth += Math.ceil(excess);
+			out = placeAll(values);
+		}
+		return out;
+	};
+	for (let count = start; count >= 2; count--) {
+		values = valueAxes(axes, model, count, locale, across, zoom?.y, true, count);
+		placed = placeWithRoom();
+		if ((!placed.y || fitAcross(placed.y.labels)) && (!placed.y2 || fitAcross(placed.y2.labels))) break;
+	}
+	for (const label of x.labels) alignEnd(label, plot.x);
+	x.title = xShown && xAxis.title ? {
+		text: xAxis.title,
+		left: 4,
+		top: topRoom,
+		align: "start"
+	} : void 0;
+	const yLayout = {};
+	for (const role of ["y", "y2"]) {
+		const p = placed[role];
+		const config = axes[role];
+		if (!p || !config) continue;
+		yLayout[role] = {
+			position: config.position,
+			scale: p.scale,
+			ticks: p.axis.ticks,
+			labels: p.labels,
+			grid: config.grid,
+			full: p.axis.full ?? p.axis.domain,
+			title: config.title && !config.hidden ? role === "y" ? bottomTitle(config.title, width, height, legendHeight) : topTitle(config.title, true, width, topRoom) : void 0
+		};
+	}
+	return {
+		width,
+		height,
+		plot,
+		x,
+		y: yLayout
+	};
+}
+/** Puts a label's right edge a gap before `edge`. */
+function alignEnd(label, edge) {
+	label.left = edge - 8 - label.width;
+}
+/** A title at the top: on the left, or (`end`) on the right. */
+function topTitle(text, end, width, top = 0) {
+	return {
+		text,
+		top,
+		left: end ? width - 4 : 4,
+		align: end ? "end" : "start"
+	};
+}
+function bottomTitle(text, width, height, legendHeight) {
+	return {
+		text,
+		top: height - legendHeight - 16,
+		left: width - 4,
+		align: "end"
+	};
+}
+/** Labels centered under their ticks, kept inside the chart. */
+function placeAcross(ticks, texts, scale, top, width, measure) {
+	return ticks.map((value, i) => {
+		const text = texts[i];
+		const w = measure(text);
+		return {
+			text,
+			width: w,
+			left: clamp(scale.map(value) - w / 2, 4, width - 4 - w),
+			top
+		};
+	});
+}
+/** Labels centered beside their ticks, kept inside the chart; `left` is set by the caller. */
+function placeDown(ticks, texts, scale, height, measure) {
+	return ticks.map((value, i) => {
+		const text = texts[i];
+		return {
+			text,
+			width: measure(text),
+			left: 0,
+			top: clamp(scale.map(value) - 8, 0, height - 16)
+		};
+	});
+}
+var fitAcross = (labels) => {
+	const list = [...labels];
+	list.sort((a, b) => a.left - b.left);
+	for (let i = 1; i < list.length; i++) if (list[i].left < list[i - 1].left + list[i - 1].width + 8) return false;
+	return true;
+};
+var fitDown = (labels) => {
+	for (let i = 1; i < labels.length; i++) if (Math.abs(labels[i].top - labels[i - 1].top) < 20) return false;
+	return true;
+};
+/** Entries in rows that fit `width`, each row centered; `top` counts from the first row. */
+function placeLegend(names, width, measure, coarse = false) {
+	const items = [];
+	let row = [];
+	let rowWidth = 0;
+	let top = 0;
+	const finish = () => {
+		let left = Math.max(4, (width - rowWidth) / 2);
+		for (const item of row) {
+			item.left = left;
+			left += item.width + LEGEND_GAP;
+		}
+		row = [];
+		rowWidth = 0;
+	};
+	names.forEach((name, index) => {
+		const text = nameText(name);
+		const w = swatchOf(name) + SWATCH_GAP + measure(text);
+		if (row.length && rowWidth + LEGEND_GAP + w > width - 8) {
+			finish();
+			top += 16 + (coarse ? LEGEND_ROW_GAP_COARSE : LEGEND_ROW_GAP);
+		}
+		const item = {
+			index,
+			text,
+			left: 0,
+			top,
+			width: w
+		};
+		if (typeof name !== "string") item.swatch = name.swatch;
+		rowWidth += (row.length ? LEGEND_GAP : 0) + w;
+		row.push(item);
+		items.push(item);
+	});
+	if (row.length) finish();
+	return items;
+}
+function labelWidth(items, measure) {
+	let widest = 0;
+	for (const item of items) widest = Math.max(widest, typeof item === "number" ? item : measure(item));
+	return Math.ceil(widest);
+}
+function valueScale(axis, range) {
+	return axis.kind === "log" ? logScale(axis.domain, range) : linearScale(axis.domain, range);
+}
+function valueAxis(role, config, model, count, locale, length, across = false, most = Infinity) {
+	const listed = model.yCategories?.[role];
+	if (listed) {
+		const ticks = listed.map((_, i) => i);
+		return {
+			role,
+			kind: "linear",
+			domain: across ? [-.5, listed.length - .5] : [listed.length - .5, -.5],
+			ticks,
+			texts: listed.map((label) => config.format ? config.format(label) : label),
+			fixed: true
+		};
+	}
+	count = tickCount(config, count, most);
+	const kind = config.type === "log" ? "log" : "linear";
+	const data = model.y[role];
+	const zero = config.zero ?? model.zero[role];
+	let [lo, hi] = data ? kind === "linear" ? widen(data[0], data[1], model.inset, length) : data : [0, 1];
+	if (zero && kind === "linear") {
+		lo = Math.min(lo, 0);
+		hi = Math.max(hi, 0);
+	}
+	const min = asNumber(config.min, kind);
+	const max = asNumber(config.max, kind);
+	if (min !== void 0) lo = min;
+	if (max !== void 0) hi = max;
+	let domain;
+	if (kind === "log") domain = min !== void 0 && max !== void 0 ? [lo, hi] : logDomain(lo, hi);
+	else {
+		domain = linearDomain(lo, hi, {
+			count,
+			nice: config.nice ?? true
+		});
+		if (min !== void 0) domain[0] = min;
+		if (max !== void 0) domain[1] = max;
+	}
+	const given = explicitTicks(config, kind);
+	let ticks = given ?? (kind === "log" ? logTicks(domain[0], domain[1], count) : linearTicks(domain[0], domain[1], count));
+	if (!given && kind === "linear" && (config.nice ?? true) && ticks.length > 1) {
+		const step = ticks[1] - ticks[0];
+		const decimals = stepDecimals(step);
+		const from = min ?? Number((Math.floor(domain[0] / step + 1e-9) * step).toFixed(decimals));
+		const to = max ?? Number((Math.ceil(domain[1] / step - 1e-9) * step).toFixed(decimals));
+		if (from !== domain[0] || to !== domain[1]) {
+			domain = [from, to];
+			ticks = linearTicks(from, to, count);
+		}
+	}
+	return {
+		role,
+		kind,
+		domain,
+		ticks,
+		texts: valueTexts(ticks, config, locale),
+		fixed: min !== void 0 && max !== void 0
+	};
+}
+/** Gives `axis` exactly `intervals` steps of a nice size, still covering its data. */
+function alignTo(axis, intervals, config, model, locale, length) {
+	if (axis.kind === "log") return axis;
+	let [lo, hi] = extent(axis.role, config, model, length);
+	if (config.min !== void 0) lo = Number(config.min);
+	if (lo === hi) hi = lo + 1;
+	let step = niceStep(hi - lo, intervals);
+	for (let guard = 0; guard < 8; guard++) {
+		const start = config.min !== void 0 ? lo : Math.floor(lo / step) * step;
+		if (start + step * intervals >= hi - 1e-9) {
+			const decimals = stepDecimals(step);
+			const ticks = Array.from({ length: intervals + 1 }, (_, i) => Number((start + step * i).toFixed(decimals)));
+			return {
+				...axis,
+				domain: [ticks[0], ticks[intervals]],
+				ticks,
+				texts: valueTexts(ticks, config, locale)
+			};
+		}
+		step = nextNiceStep(step);
+	}
+	return axis;
+}
+/**
+* How many ticks to aim for: the number given as `ticks`, else `count`
+* (what fits); never more than `most`, so asking for many on a narrow
+* chart doesn't pile the labels on one another.
+*/
+function tickCount(config, count, most = Infinity) {
+	const asked = typeof config.ticks === "number" && config.ticks >= 1 ? Math.round(config.ticks) : count;
+	return Math.max(1, Math.min(asked, most));
+}
+function explicitTicks(config, kind) {
+	if (!Array.isArray(config.ticks)) return null;
+	return config.ticks.map((value) => asNumber(value, kind)).filter((v) => Number.isFinite(v));
+}
+function valueTexts(ticks, config, locale) {
+	if (config.format) return ticks.map((value) => config.format(value));
+	const format = numberTickFormat(locale, ticks);
+	return ticks.map((value) => format(value));
+}
+/** The x scale over `range`; `count` is about how many ticks a nice number domain is rounded to. */
+function xScale(config, model, range, count, zoom) {
+	const scale = wholeXScale(config, model, range, count);
+	const full = scale.domain;
+	if (!zoom) return {
+		scale,
+		full
+	};
+	const lo = Math.max(full[0], Math.min(zoom[0], zoom[1]));
+	const hi = Math.min(full[1], Math.max(zoom[0], zoom[1]));
+	if (!(hi > lo)) return {
+		scale,
+		full
+	};
+	const part = linearScale([lo, hi], range, scale.kind === "time" ? "time" : "linear");
+	if (scale.kind !== "category") return {
+		scale: part,
+		full
+	};
+	const step = Math.abs(range[1] - range[0]) / (hi - lo);
+	return {
+		scale: {
+			...part,
+			kind: "category",
+			step,
+			categories: scale.categories
+		},
+		full
+	};
+}
+function wholeXScale(config, model, range, count) {
+	const kind = model.xKind;
+	if (kind === "category") return categoryScale(model.categories, range);
+	const data = model.x ?? [0, 1];
+	const pad = model.xStep > 0 ? model.xStep / 2 : 0;
+	const [from, to] = widen(data[0] - pad, data[1] + pad, model.inset, Math.abs(range[1] - range[0]));
+	let lo = asNumber(config.min, kind) ?? from;
+	let hi = asNumber(config.max, kind) ?? to;
+	if (kind === "time") {
+		if (lo === hi) {
+			lo -= 432e5;
+			hi += 432e5;
+		}
+		return linearScale([lo, hi], range, "time");
+	}
+	const domain = linearDomain(lo, hi, {
+		count: tickCount(config, count),
+		nice: config.nice ?? false
+	});
+	if (config.min !== void 0) domain[0] = lo;
+	if (config.max !== void 0) domain[1] = hi;
+	return linearScale(domain, range);
+}
+/**
+* The ticks to try on the x axis with their texts, most first: the
+* caller takes the first whose labels fit. `length` is the axis length
+* in px and `space` the wanted room per tick.
+*/
+function* xTickChoices(config, model, scale, length, space, locale) {
+	const kind = model.xKind;
+	if (kind === "category") {
+		const text = (value) => config.format ? config.format(model.categories[value]) : model.categories[value] ?? "";
+		const count = model.categories.length;
+		const [lo, hi] = scale.domain;
+		const shownTicks = (ticks) => lo <= -.5 && hi >= count - .5 ? ticks : ticks.filter((i) => i >= lo && i <= hi);
+		for (let every = 1; every <= Math.max(1, count); every++) {
+			const ticks = shownTicks(categoryTicks(count, every));
+			yield {
+				ticks,
+				texts: ticks.map(text)
+			};
+		}
+		return;
+	}
+	const explicit = explicitTicks(config, kind);
+	const [lo, hi] = scale.domain;
+	const wanted = tickCount(config, Math.max(2, Math.floor(length / space)));
+	if (kind === "time") {
+		for (let count = wanted; count >= 1; count--) {
+			const interval = timeInterval(hi - lo, count);
+			const ticks = explicit ?? timeTicks(lo, hi, interval);
+			const format = timeTickFormat(locale, interval);
+			yield {
+				ticks,
+				texts: ticks.map((value, i) => config.format ? config.format(new Date(value)) : format(value, ticks[i - 1]))
+			};
+			if (explicit) return;
+		}
+		return;
+	}
+	const most = model.xIntegers ? Math.max(1, Math.floor(hi - lo)) : wanted;
+	for (let count = Math.min(wanted, most); count >= 1; count--) {
+		const ticks = explicit ?? linearTicks(lo, hi, count);
+		const format = numberTickFormat(locale, ticks, { years: true });
+		yield {
+			ticks,
+			texts: ticks.map((value) => config.format ? config.format(value) : format(value))
+		};
+		if (explicit) return;
+	}
+}
+/**
+* The box round the part of a circle of radius 1 from `start` to `end`
+* (radians clockwise from 12 o'clock), its center included, in units of
+* the radius from the center: a half circle is half as tall as a whole.
+*/
+function arcBox(start, end) {
+	let [left, right, top, bottom] = [
+		0,
+		0,
+		0,
+		0
+	];
+	const take = (angle) => {
+		const x = Math.sin(angle);
+		const y = -Math.cos(angle);
+		left = Math.min(left, x);
+		right = Math.max(right, x);
+		top = Math.min(top, y);
+		bottom = Math.max(bottom, y);
+	};
+	take(start);
+	take(end);
+	for (let k = Math.ceil(start / (Math.PI / 2)); k * (Math.PI / 2) <= end; k++) take(k * (Math.PI / 2));
+	return {
+		left,
+		right,
+		top,
+		bottom
+	};
+}
+/**
+* A pie as large as fits above its legend; with labels outside, as large
+* as leaves room for the widest of them on each side, moved over towards
+* the side with the narrower labels.
+*/
+function layoutPie({ width, height, measure, legend: names = [], coarse, legendPlacement = "bottom", sideLabels = {
+	left: 0,
+	right: 0
+}, arc = [0, Math.PI * 2] }) {
+	const placed = placeLegendIn(names, legendPlacement, width, height, measure, coarse);
+	const { top, bottom, right: legendRight } = placed.room;
+	const room = height - top - bottom - 16;
+	const inner = width - legendRight;
+	const left = sideLabels.left > 0 ? sideLabels.left + 24 : 0;
+	const right = sideLabels.right > 0 ? sideLabels.right + 24 : 0;
+	const across = inner - left - right;
+	const down = left || right ? room - 16 : room;
+	const box = arcBox(arc[0], arc[1]);
+	const radius = Math.max(1, Math.min((across - 16) / (box.right - box.left || 1), down / (box.bottom - box.top || 1)));
+	return {
+		width,
+		height,
+		cx: left + across / 2 - (box.left + box.right) / 2 * radius,
+		cy: top + 8 + room / 2 - (box.top + box.bottom) / 2 * radius,
+		radius,
+		bottom: height - bottom - 8,
+		legend: placed.legend,
+		legendBox: placed.box
+	};
+}
+/** Room between the rim and a spoke's name. */
+var SPOKE_GAP = 8;
+/** The most of the chart's width a spoke's name may take, each side. */
+var SPOKE_SHARE = .22;
+/** Wanted room between rings, in px. */
+var RING_SPACE = 24;
+/**
+* Lays out a radar: the legend first, then the largest circle that leaves
+* room round it for the spokes' names (the categories), with rings at
+* nice values from the center (0, or the smallest value below it) out.
+*/
+function layoutRadar({ model, axes, width, height, locale, measure, legend: names = [], coarse, legendPlacement = "bottom", spokes }) {
+	const placed = placeLegendIn(names, legendPlacement, width, height, measure, coarse);
+	const { top, bottom, right: legendRight } = placed.room;
+	const across = width - legendRight;
+	const down = height - top - bottom;
+	const count = spokes.length;
+	const most = Math.max(24, Math.floor(across * SPOKE_SHARE));
+	const widths = spokes.map((text) => measure(text));
+	const angleOf = (i) => i / Math.max(1, count) * Math.PI * 2;
+	let side = 0;
+	widths.forEach((w, i) => {
+		if (Math.abs(Math.sin(angleOf(i))) >= .1) side = Math.max(side, w);
+	});
+	side = Math.min(side, most);
+	const radius = Math.max(1, Math.min((across - (side + SPOKE_GAP) * 2 - 16) / 2, (down - 48 - 16) / 2));
+	const cx = across / 2;
+	const cy = top + down / 2;
+	const config = axes.y ?? {
+		position: "left",
+		grid: true,
+		hidden: false
+	};
+	const axis = valueAxis("y", config, model, Math.max(2, Math.floor(radius / RING_SPACE)), locale, radius);
+	const scale = linearScale(axis.domain, [0, radius]);
+	const labels = [];
+	if (!axes.x.hidden) spokes.forEach((text, i) => {
+		const room = Math.min(widths[i], most);
+		const sin = Math.sin(angleOf(i));
+		const cos = Math.cos(angleOf(i));
+		const x = cx + sin * (radius + SPOKE_GAP);
+		const y = cy - cos * (radius + SPOKE_GAP);
+		const where = Math.abs(sin) < .1 ? 0 : sin > 0 ? 1 : -1;
+		const lift = where === 0 ? cos > 0 ? 8 : -8 : 0;
+		const label = {
+			text,
+			left: where === 0 ? x - room / 2 : where > 0 ? x : x - room,
+			top: y - 8 - lift,
+			width: room
+		};
+		if (widths[i] > most) label.clipped = true;
+		labels.push(label);
+	});
+	const values = [];
+	if (!config.hidden) axis.ticks.forEach((tick, i) => {
+		const r = scale.map(tick);
+		if (r < 1) return;
+		const text = axis.texts[i];
+		const half = Math.PI / Math.max(2, count);
+		const out = r * Math.cos(half);
+		const x = cx + Math.sin(half) * out;
+		const y = cy - Math.cos(half) * out;
+		const label = {
+			text,
+			left: x + 2,
+			top: y - 16,
+			width: measure(text)
+		};
+		if (!labels.some((other) => label.left < other.left + other.width && other.left < label.left + label.width && label.top < other.top + 16 && other.top < label.top + 16)) values.push(label);
+	});
+	return {
+		width,
+		height,
+		cx,
+		cy,
+		radius,
+		count,
+		scale,
+		ticks: axis.ticks,
+		labels,
+		values,
+		legend: placed.legend,
+		legendBox: placed.box
+	};
+}
+/** Room between a funnel's bars and the text beside them, and between a value and its rate. */
+var FUNNEL_GAP = 12;
+var RATE_GAP = 8;
+/** The most of the chart's width the names may take. */
+var FUNNEL_NAME_SHARE = .3;
+/** The tallest a stage's row grows, in px: a few stages don't fill a tall chart with bars. */
+var FUNNEL_STEP = 64;
+/**
+* Lays out a funnel: the legend, then the names in a column on the left
+* and the values (with rates) on the right, and the bars between them.
+*/
+function layoutFunnel({ width, height, measure, legend: names = [], coarse, legendPlacement = "bottom", stages, values: written, rates: rateTexts, max }) {
+	const placed = placeLegendIn(names, legendPlacement, width, height, measure, coarse);
+	const { top, bottom, right: legendRight } = placed.room;
+	const across = width - legendRight;
+	const count = stages.length;
+	const most = Math.floor(across * FUNNEL_NAME_SHARE);
+	const nameWidths = stages.map((text) => Math.min(measure(text), most));
+	const valueWidths = written.map((text) => measure(text));
+	const rateWidths = rateTexts.map((text) => text ? measure(text) : 0);
+	const valueColumn = Math.max(0, ...valueWidths);
+	const rateColumn = Math.max(0, ...rateWidths);
+	const left = 4 + Math.max(0, ...nameWidths) + FUNNEL_GAP;
+	const right = FUNNEL_GAP + valueColumn + (rateColumn ? RATE_GAP + rateColumn : 0) + 4;
+	const room = Math.max(1, height - top - bottom - 16);
+	const step = count ? Math.min(FUNNEL_STEP, room / count) : room;
+	const plotHeight = step * count;
+	const plot = {
+		x: left,
+		y: top + 8 + (room - plotHeight) / 2,
+		width: Math.max(1, across - left - right),
+		height: plotHeight
+	};
+	const scale = linearScale([0, max > 0 ? max : 1], [0, plot.width / 2]);
+	const middle = (i) => plot.y + step * i + step / 2 - 8;
+	const labels = stages.map((text, i) => {
+		const label = {
+			text,
+			left: plot.x - FUNNEL_GAP - nameWidths[i],
+			top: middle(i),
+			width: nameWidths[i]
+		};
+		if (measure(text) > most) label.clipped = true;
+		return label;
+	});
+	const valueLeft = plot.x + plot.width + FUNNEL_GAP;
+	const values = written.map((text, i) => ({
+		text,
+		left: valueLeft + valueColumn - valueWidths[i],
+		top: middle(i),
+		width: valueWidths[i]
+	}));
+	const rates = [];
+	rateTexts.forEach((text, i) => {
+		if (!text) return;
+		rates.push({
+			text,
+			left: valueLeft + valueColumn + RATE_GAP + rateColumn - rateWidths[i],
+			top: middle(i),
+			width: rateWidths[i]
+		});
+	});
+	return {
+		width,
+		height,
+		plot,
+		count,
+		step,
+		scale,
+		names: labels,
+		values,
+		rates,
+		legend: placed.legend,
+		legendBox: placed.box
+	};
+}
+export { arcBox, layoutChart, layoutFunnel, layoutPie, layoutRadar, placeLegend, placeLegendIn };
+
+//# sourceMappingURL=layout.js.map