@octane-xplat/charts 0.0.1 → 0.10.0

package/dist/web/Chart.web.tsrx.js

@@ -0,0 +1,488 @@
+import { computeScene } from "./core/scene.js";
+import { createScrub, hitLabel } from "./core/hit.js";
+import { __s, bag13, bag8, bag9, bagOf, child, clone, createElement, createScopedElement, createScopedValue, hookSlots, ifBlock, isHydratingStyle, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setDangerouslySetInnerHTML, setStyle, setStyleProperties, setStyleProperty, sibling, template, useEffect, useRef, useState, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish, hookMemoPublish2, hookMemoPublishInvariant, replaceRef, setPlainAttribute } from "octane/internal/client";
+import { useMeasure } from "@octane-xplat/ui";
+//#region src/Chart.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div style=\"position: absolute;\"></div>");
+var _t$1 = /* @__PURE__ */ template("<div><!><div style=\"position: relative; flex-grow: 1; min-height: 0;\"><div></div><div style=\"position: absolute; inset: 0;\"><!><!><!><!></div></div><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+function __then$2(__props, __s, __extra) {
+	const cursor = __extra[0];
+	const plot = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m7;
+		const _root = clone(_t$0, void 0, "||");
+		_m7 = _root;
+		_b = bag8(__s, _root, __s, void 0, void 0, void 0, void 0, void 0, void 0, _m7);
+	}
+	{
+		const _v0 = cursor.px - .5;
+		const _v1 = plot.y;
+		const _v2 = 1;
+		const _v3 = plot.height;
+		const _v4 = "#8a8a8a";
+		const _v5 = "none";
+		if (_b.a === __s || isHydratingStyle()) {
+			setStyleProperties(_b.h, [
+				"left",
+				_v0,
+				"top",
+				_v1,
+				"width",
+				_v2,
+				"height",
+				_v3,
+				"backgroundColor",
+				_v4,
+				"pointerEvents",
+				_v5
+			], "position: absolute;");
+			_b.a = null;
+			_b.b = _v0;
+			_b.c = _v1;
+			_b.d = _v2;
+			_b.e = _v3;
+			_b.f = _v4;
+			_b.g = _v5;
+		} else {
+			if (_b.b !== _v0) {
+				setStyleProperty(_b.h, "left", _v0, "", _b.b);
+				_b.b = _v0;
+			}
+			if (_b.c !== _v1) {
+				setStyleProperty(_b.h, "top", _v1, "", _b.c);
+				_b.c = _v1;
+			}
+			if (_b.d !== _v2) {
+				setStyleProperty(_b.h, "width", _v2, "", _b.d);
+				_b.d = _v2;
+			}
+			if (_b.e !== _v3) {
+				setStyleProperty(_b.h, "height", _v3, "", _b.e);
+				_b.e = _v3;
+			}
+			if (_b.f !== _v4) {
+				setStyleProperty(_b.h, "backgroundColor", _v4, "", _b.f);
+				_b.f = _v4;
+			}
+			if (_b.g !== _v5) {
+				setStyleProperty(_b.h, "pointerEvents", _v5, "", _b.g);
+				_b.g = _v5;
+			}
+		}
+	}
+}
+function __then$4(__props, __s, __extra) {
+	const cursor = __extra[0];
+	const dotColor = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m8;
+		const _root = clone(_t$0, void 0, "||");
+		_m8 = _root;
+		_b = bag9(__s, _root, __s, void 0, void 0, void 0, void 0, void 0, void 0, void 0, _m8);
+	}
+	{
+		const _v0 = cursor.px - 4;
+		const _v1 = cursor.py - 4;
+		const _v2 = 8;
+		const _v3 = 8;
+		const _v4 = 4;
+		const _v5 = dotColor ?? "#4e79a7";
+		const _v6 = "none";
+		if (_b.a === __s || isHydratingStyle()) {
+			setStyleProperties(_b.i, [
+				"left",
+				_v0,
+				"top",
+				_v1,
+				"width",
+				_v2,
+				"height",
+				_v3,
+				"borderRadius",
+				_v4,
+				"backgroundColor",
+				_v5,
+				"pointerEvents",
+				_v6
+			], "position: absolute;");
+			_b.a = null;
+			_b.b = _v0;
+			_b.c = _v1;
+			_b.d = _v2;
+			_b.e = _v3;
+			_b.f = _v4;
+			_b.g = _v5;
+			_b.h = _v6;
+		} else {
+			if (_b.b !== _v0) {
+				setStyleProperty(_b.i, "left", _v0, "", _b.b);
+				_b.b = _v0;
+			}
+			if (_b.c !== _v1) {
+				setStyleProperty(_b.i, "top", _v1, "", _b.c);
+				_b.c = _v1;
+			}
+			if (_b.d !== _v2) {
+				setStyleProperty(_b.i, "width", _v2, "", _b.d);
+				_b.d = _v2;
+			}
+			if (_b.e !== _v3) {
+				setStyleProperty(_b.i, "height", _v3, "", _b.e);
+				_b.e = _v3;
+			}
+			if (_b.f !== _v4) {
+				setStyleProperty(_b.i, "borderRadius", _v4, "", _b.f);
+				_b.f = _v4;
+			}
+			if (_b.g !== _v5) {
+				setStyleProperty(_b.i, "backgroundColor", _v5, "", _b.g);
+				_b.g = _v5;
+			}
+			if (_b.h !== _v6) {
+				setStyleProperty(_b.i, "pointerEvents", _v6, "", _b.h);
+				_b.h = _v6;
+			}
+		}
+	}
+}
+function __then$6(__props, __s, __extra) {
+	const cursor = __extra[0];
+	const tipLeft = __extra[1];
+	const tipText = __extra[2];
+	const tipTop = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m10;
+		const _root = clone(_t$0, void 0, "||");
+		_m10 = _root;
+		_b = bag13(__s, _root, __s, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, _m10, null, void 0);
+	}
+	{
+		const _v0 = tipLeft;
+		const _v1 = tipTop < 0 ? cursor.py + 12 : tipTop;
+		const _v2 = "rgba(20,20,20,0.88)";
+		const _v3 = "#fff";
+		const _v4 = 11;
+		const _v5 = "2px 6px";
+		const _v6 = 4;
+		const _v7 = "nowrap";
+		const _v8 = "none";
+		if (_b.a === __s || isHydratingStyle()) {
+			setStyleProperties(_b.k, [
+				"left",
+				_v0,
+				"top",
+				_v1,
+				"backgroundColor",
+				_v2,
+				"color",
+				_v3,
+				"fontSize",
+				_v4,
+				"padding",
+				_v5,
+				"borderRadius",
+				_v6,
+				"whiteSpace",
+				_v7,
+				"pointerEvents",
+				_v8
+			], "position: absolute;");
+			_b.a = null;
+			_b.b = _v0;
+			_b.c = _v1;
+			_b.d = _v2;
+			_b.e = _v3;
+			_b.f = _v4;
+			_b.g = _v5;
+			_b.h = _v6;
+			_b.i = _v7;
+			_b.j = _v8;
+		} else {
+			if (_b.b !== _v0) {
+				setStyleProperty(_b.k, "left", _v0, "", _b.b);
+				_b.b = _v0;
+			}
+			if (_b.c !== _v1) {
+				setStyleProperty(_b.k, "top", _v1, "", _b.c);
+				_b.c = _v1;
+			}
+			if (_b.d !== _v2) {
+				setStyleProperty(_b.k, "backgroundColor", _v2, "", _b.d);
+				_b.d = _v2;
+			}
+			if (_b.e !== _v3) {
+				setStyleProperty(_b.k, "color", _v3, "", _b.e);
+				_b.e = _v3;
+			}
+			if (_b.f !== _v4) {
+				setStyleProperty(_b.k, "fontSize", _v4, "", _b.f);
+				_b.f = _v4;
+			}
+			if (_b.g !== _v5) {
+				setStyleProperty(_b.k, "padding", _v5, "", _b.g);
+				_b.g = _v5;
+			}
+			if (_b.h !== _v6) {
+				setStyleProperty(_b.k, "borderRadius", _v6, "", _b.h);
+				_b.h = _v6;
+			}
+			if (_b.i !== _v7) {
+				setStyleProperty(_b.k, "whiteSpace", _v7, "", _b.i);
+				_b.i = _v7;
+			}
+			if (_b.j !== _v8) {
+				setStyleProperty(_b.k, "pointerEvents", _v8, "", _b.j);
+				_b.j = _v8;
+			}
+		}
+	}
+	_b.n = bindSignalChild(__s, _b.n, 1, _b.k, tipText, "b:a58cdbae", null, void 0, void 0, void 0, true);
+}
+var _rm$10 = [
+	"r",
+	"i",
+	"h"
+];
+var TIP_ESTIMATE_CHAR = 6.2;
+var Chart = /* @__PURE__ */ __s(function Chart(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(16);
+	let __hkd0, __hkd1, __hkd2, __hkd3, __hkd4, __hkd5, __hkd6, __hkd7, __hkd8, __hkd0$, __hkd1$;
+	const measure = withSlot(_h$0, useMeasure);
+	const [cursor, setCursor] = useState(null, _hs$ + 1);
+	const sceneRef = useRef(null, _hs$ + 2);
+	const propsRef = useRef(props, _hs$ + 3);
+	propsRef.current = props;
+	const hostRef = useRef(null, _hs$ + 4);
+	const bounds = measure.bounds;
+	const w = props.width ?? bounds?.width ?? 0;
+	const h = props.height ?? (props.aspectRatio && w > 0 ? w / props.aspectRatio : bounds?.height && bounds.height > 0 ? bounds.height : w > 0 ? w / 1.6 : 0);
+	const scene = (__hkd0 = props.type, __hkd1 = props.data, __hkd2 = props.margin, __hkd3 = props.stacked, __hkd4 = props.innerRadiusRatio, __hkd5 = props.xAxis, __hkd6 = props.yAxis, __hkd7 = w, __hkd8 = h, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) || !hookMemoEqual(__hk[4], __hkd3) || !hookMemoEqual(__hk[5], __hkd4) || !hookMemoEqual(__hk[6], __hkd5) || !hookMemoEqual(__hk[7], __hkd6) || !hookMemoEqual(__hk[8], __hkd7) || !hookMemoEqual(__hk[9], __hkd8) ? hookMemoPublish(__hk, 0, w > 0 && h > 0 ? computeScene(propsRef.current, w, h) : null, __hkd0, __hkd1, __hkd2, __hkd3, __hkd4, __hkd5, __hkd6, __hkd7, __hkd8) : __hk[10]);
+	sceneRef.current = scene;
+	const interactive = !!(props.onPress || props.onScrub || props.tooltip || props.crosshair);
+	useEffect(() => {
+		const el = hostRef.current;
+		if (!el || !interactive) return;
+		const scrub = createScrub(() => sceneRef.current, () => propsRef.current, setCursor);
+		const at = (e) => {
+			const rect = el.getBoundingClientRect();
+			return {
+				x: e.clientX - rect.left,
+				y: e.clientY - rect.top
+			};
+		};
+		const down = (e) => {
+			el.setPointerCapture?.(e.pointerId);
+			const p = at(e);
+			scrub("down", p.x, p.y);
+		};
+		const move = (e) => {
+			const p = at(e);
+			scrub(e.buttons !== 0 ? "move" : "hover", p.x, p.y);
+		};
+		const up = (e) => {
+			const p = at(e);
+			scrub("up", p.x, p.y);
+		};
+		const click = (e) => {
+			const p = e.clientX === 0 && e.clientY === 0 ? {
+				x: el.getBoundingClientRect().width / 2,
+				y: el.getBoundingClientRect().height / 2
+			} : at(e);
+			scrub("tap", p.x, p.y);
+		};
+		const end = () => scrub("cancel", 0, 0);
+		const leave = () => scrub("leave", 0, 0);
+		el.addEventListener("pointerdown", down);
+		el.addEventListener("pointermove", move);
+		el.addEventListener("pointerup", up);
+		el.addEventListener("pointercancel", end);
+		el.addEventListener("pointerleave", leave);
+		el.addEventListener("click", click);
+		return () => {
+			el.removeEventListener("pointerdown", down);
+			el.removeEventListener("pointermove", move);
+			el.removeEventListener("pointerup", up);
+			el.removeEventListener("pointercancel", end);
+			el.removeEventListener("pointerleave", leave);
+			el.removeEventListener("click", click);
+		};
+	}, [interactive], _hs$ + 5);
+	const legend = props.legend === true ? "bottom" : props.legend;
+	const plot = scene?.plot;
+	const dotColor = cursor && scene ? scene.pie ? scene.pie.slices.find((s) => s.series === cursor.series && s.index === cursor.index)?.color : scene.series[cursor.series]?.color : void 0;
+	const tipText = (__hkd0$ = cursor, __hkd1$ = scene, __hk[11] !== true || !hookMemoEqual(__hk[12], __hkd0$) || !hookMemoEqual(__hk[13], __hkd1$) ? hookMemoPublish2(__hk, 11, cursor && scene ? hitLabel(scene, cursor) : null, __hkd0$, __hkd1$) : __hk[14]);
+	const tipWidth = tipText ? tipText.length * TIP_ESTIMATE_CHAR + 14 : 0;
+	const tipLeft = cursor && scene ? Math.min(Math.max(0, cursor.px - tipWidth / 2), Math.max(0, scene.width - tipWidth)) : 0;
+	const tipTop = cursor ? cursor.py - 30 : 0;
+	const legendRow = __hk[15] ?? hookMemoPublishInvariant(__hk, 15, (items, position) => createScopedValue(() => createScopedElement("div", { style: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: 12,
+		paddingTop: position === "bottom" ? 4 : 0,
+		paddingBottom: position === "top" ? 4 : 0
+	} }, () => items.map((item) => createScopedElement("span", { style: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 4,
+		fontSize: 11
+	} }, () => positionalChildren([createScopedValue(() => createElement("span", { style: {
+		width: 10,
+		height: 10,
+		borderRadius: 2,
+		backgroundColor: item.color,
+		display: "inline-block"
+	} })), item.text]))))));
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m7, _m8, _m13, _m14, _m15, _m16, _m17, _m18, _m21, _m24;
+		const _root = clone(_t$1, void 0, "|1|");
+		_m1 = _root;
+		const _el0 = sibling(child(_root), 1);
+		_m7 = _el0;
+		queueRefAttach(__s, _m8 = (el) => {
+			hostRef.current = el;
+			measure.ref(el);
+		}, _m7);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.i, _b.h));
+		const _el1 = child(_el0);
+		_m13 = _el1;
+		const _el2 = sibling(_el1, 1);
+		_m14 = _el2;
+		const _el3 = sibling(child(_el2), 1);
+		_m15 = _el3;
+		const _el4 = sibling(_el3, 1);
+		_m16 = _el4;
+		_m17 = sibling(_el4, 1);
+		_m18 = child(_root);
+		_m21 = child(_el2);
+		_m24 = sibling(_el0, 1);
+		_b = bagOf(__s, _root, {
+			a: void 0,
+			b: _m1,
+			c: void 0,
+			d: void 0,
+			e: void 0,
+			f: void 0,
+			g: void 0,
+			h: _m7,
+			i: _m8,
+			j: __s,
+			k: void 0,
+			l: void 0,
+			m: void 0,
+			n: _m13,
+			o: _m14,
+			p: _m15,
+			q: _m16,
+			r: _m17,
+			s: _m18,
+			t: null,
+			u: void 0,
+			v: _m21,
+			w: null,
+			x: void 0,
+			y: _m24,
+			z: null,
+			A: void 0
+		});
+		__s.refFields = _rm$10;
+	} else {
+		const _r = (el) => {
+			hostRef.current = el;
+			measure.ref(el);
+		};
+		if (_r !== _b.i) _b.i = replaceRef(__s, _b.i, _r, _b.h);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:c3863ebe", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:75b7746e", "class");
+	{
+		const _v = {
+			display: "flex",
+			flexDirection: "column",
+			width: props.width,
+			height: props.height,
+			...props.style
+		};
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "role", props.accessibilityLabel ? "img" : void 0, "b:f6e63ca7", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "aria-label", props.accessibilityLabel, "b:6f97c1ef", setAriaAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.h, "id", props.id ? props.id + "-overlay" : void 0, "b:b2421ba0", setPlainAttribute);
+	{
+		const _v0 = props.width;
+		const _v1 = props.height ?? (props.aspectRatio && w > 0 ? w / props.aspectRatio : void 0);
+		if (_b.j === __s || isHydratingStyle()) {
+			setStyleProperties(_b.h, [
+				"width",
+				_v0,
+				"height",
+				_v1
+			], "position: relative; flex-grow: 1; min-height: 0;");
+			_b.j = null;
+			_b.k = _v0;
+			_b.l = _v1;
+		} else {
+			if (_b.k !== _v0) {
+				setStyleProperty(_b.h, "width", _v0, "", _b.k);
+				_b.k = _v0;
+			}
+			if (_b.l !== _v1) {
+				setStyleProperty(_b.h, "height", _v1, "", _b.l);
+				_b.l = _v1;
+			}
+		}
+	}
+	{
+		const _v = scene ? { __html: scene.markup } : void 0;
+		if (_b.m !== _v) {
+			setDangerouslySetInnerHTML(_b.n, _v);
+			_b.m = _v;
+		}
+	}
+	_b.B = bindSignalChild(__s, _b.B, 1, _b.b, legend === "top" && scene ? legendRow(scene.legend, "top") : null, "b:dbd2df85", _b.s, true, void 0, void 0, void 0);
+	_b.C = bindSignalChild(__s, _b.C, 2, _b.o, scene?.labels.map((l) => createScopedElement("div", { style: {
+		position: "absolute",
+		left: l.x,
+		top: l.y,
+		width: l.width,
+		fontSize: 10,
+		opacity: .7,
+		textAlign: l.align,
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis"
+	} }, () => l.text)), "b:fdc3332b", _b.v, true, void 0, void 0, void 0);
+	{
+		const __ifCondition = cursor && props.crosshair && !scene?.pie && plot;
+		ifBlock(__s, 3, _b.o, __ifCondition, __then$2, null, _b.p, __ifCondition ? [cursor, plot] : void 0);
+	}
+	{
+		const __ifCondition$ = cursor && (props.crosshair || props.tooltip);
+		ifBlock(__s, 4, _b.o, __ifCondition$, __then$4, null, _b.q, __ifCondition$ ? [cursor, dotColor] : void 0);
+	}
+	{
+		const __ifCondition$2 = cursor && props.tooltip && tipText;
+		ifBlock(__s, 5, _b.o, __ifCondition$2, __then$6, null, _b.r, __ifCondition$2 ? [
+			cursor,
+			tipLeft,
+			tipText,
+			tipTop
+		] : void 0);
+	}
+	_b.D = bindSignalChild(__s, _b.D, 6, _b.b, legend === "bottom" && scene ? legendRow(scene.legend, "bottom") : null, "b:30634c19", _b.y, true, void 0, void 0, void 0);
+});
+//#endregion
+export { Chart };

package/dist/web/core/axes.js

@@ -0,0 +1,146 @@
+import { xCenter } from "./scales.js";
+import { format } from "d3-format";
+import { timeFormat } from "d3-time-format";
+//#region src/core/axes.ts
+var AXIS_COLOR = "#9aa3ad";
+var GRID_COLOR = "#9aa3ad";
+var GRID_OPACITY = .22;
+var si = format("~s");
+var plain = format("~g");
+var day = timeFormat("%b %d");
+/** Default tick label formatting — SI suffixes for big magnitudes, plain
+*  significant digits otherwise, short month-day for dates. */
+function defaultFormat(value) {
+	if (value instanceof Date) return day(value);
+	if (typeof value === "number") return Math.abs(value) >= 1e3 ? si(value) : plain(value);
+	return String(value);
+}
+/** Cap categorical label count so boxes don't collide — keep every nth. */
+function thinDomain(domain, plotWidth) {
+	const maxLabels = Math.max(2, Math.floor(plotWidth / 56));
+	if (domain.length <= maxLabels) return domain;
+	const step = Math.ceil(domain.length / maxLabels);
+	return domain.filter((_, i) => i % step === 0);
+}
+function xAxisModel(kind, scale, spec, plot) {
+	const labels = spec?.labels !== false;
+	const stubs = spec?.ticks !== false;
+	const grid = spec?.grid === true;
+	const fmt = spec?.format ?? defaultFormat;
+	const frame = [{
+		kind: "line",
+		x1: plot.x,
+		y1: plot.y + plot.height,
+		x2: plot.x + plot.width,
+		y2: plot.y + plot.height,
+		stroke: AXIS_COLOR,
+		strokeWidth: 1
+	}];
+	const gridMarks = [];
+	const out = [];
+	let values;
+	let format = fmt;
+	if (kind === "band" || kind === "point") values = thinDomain(scale.domain(), plot.width);
+	else {
+		const continuous = scale;
+		const count = spec?.tickCount ?? 6;
+		values = continuous.ticks(count);
+		if (!spec?.format && kind === "time") {
+			const tf = continuous.tickFormat(count);
+			format = (v) => tf(v);
+		}
+	}
+	for (const v of values) {
+		const px = plot.x + xCenter(kind, scale, v);
+		if (stubs) frame.push({
+			kind: "line",
+			x1: px,
+			y1: plot.y + plot.height,
+			x2: px,
+			y2: plot.y + plot.height + 4,
+			stroke: AXIS_COLOR,
+			strokeWidth: 1
+		});
+		if (grid) gridMarks.push({
+			kind: "line",
+			x1: px,
+			y1: plot.y,
+			x2: px,
+			y2: plot.y + plot.height,
+			stroke: GRID_COLOR,
+			strokeOpacity: GRID_OPACITY,
+			strokeWidth: 1
+		});
+		if (labels) {
+			const width = Math.min(72, plot.width / Math.max(1, values.length));
+			const boxX = Math.min(Math.max(0, px - width / 2), Math.max(0, plot.x + plot.width + 8 - width));
+			out.push({
+				x: boxX,
+				y: plot.y + plot.height + 6,
+				width,
+				align: "center",
+				text: format(v),
+				axis: "x"
+			});
+		}
+	}
+	return {
+		labels: out,
+		frame,
+		grid: gridMarks
+	};
+}
+function yAxisModel(scale, spec, plot) {
+	const labels = spec?.labels !== false;
+	const stubs = spec?.ticks !== false;
+	const grid = spec?.grid === true;
+	const fmt = spec?.format ?? defaultFormat;
+	const frame = [{
+		kind: "line",
+		x1: plot.x,
+		y1: plot.y,
+		x2: plot.x,
+		y2: plot.y + plot.height,
+		stroke: AXIS_COLOR,
+		strokeWidth: 1
+	}];
+	const gridMarks = [];
+	const out = [];
+	for (const v of scale.ticks(spec?.tickCount ?? 5)) {
+		const py = plot.y + scale(v);
+		if (stubs) frame.push({
+			kind: "line",
+			x1: plot.x - 4,
+			y1: py,
+			x2: plot.x,
+			y2: py,
+			stroke: AXIS_COLOR,
+			strokeWidth: 1
+		});
+		if (grid) gridMarks.push({
+			kind: "line",
+			x1: plot.x,
+			y1: py,
+			x2: plot.x + plot.width,
+			y2: py,
+			stroke: GRID_COLOR,
+			strokeOpacity: GRID_OPACITY,
+			strokeWidth: 1
+		});
+		if (labels) out.push({
+			x: 0,
+			y: py - 6,
+			width: Math.max(0, plot.x - 8),
+			align: "end",
+			text: fmt(v),
+			axis: "y"
+		});
+	}
+	return {
+		labels: out,
+		frame,
+		grid: gridMarks
+	};
+}
+//#endregion
+export { defaultFormat, xAxisModel, yAxisModel };