@octane-xplat/charts 0.0.1 → 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/dist/macos/Chart.macos.tsrx.js

@@ -0,0 +1,351 @@
+import { appKitImageSource } from "./svg-image.macos.js";
+import { computeScene } from "./core/scene.js";
+import { createScrub, hitLabel } from "./core/hit.js";
+import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalProps, universalValue, useMemo, useRef, useState, withSlot } from "@nativescript-community/octane";
+import { useMeasure } from "@octane-xplat/ui";
+//#region src/Chart.macos.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(7);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var __octaneUniversalPlan0 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [["style", 1]]
+	}, {
+		"kind": "host",
+		"type": "label",
+		"bindings": [["text", 2], ["style", 3]]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"flexWrap": "wrap"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("macos", {
+	"kind": "host",
+	"type": "label",
+	"propsSlot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["left", 0],
+		["top", 1],
+		["style", 2]
+	]
+});
+var __octaneUniversalPlan4 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["left", 0],
+		["top", 1],
+		["style", 2]
+	]
+});
+var __octaneUniversalPlan5 = universalPlan("macos", {
+	"kind": "host",
+	"type": "label",
+	"propsSlot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [["style", 1]]
+	}, {
+		"kind": "host",
+		"type": "label",
+		"bindings": [["text", 2], ["style", 3]]
+	}]
+});
+var __octaneUniversalPlan7 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"flexWrap": "wrap"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan8 = universalPlan("macos", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "accessibilityRole": "image" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["accessible", 3],
+		["accessibilityLabel", 4]
+	],
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 5
+		},
+		{
+			"kind": "host",
+			"type": "gridlayout",
+			"bindings": [["ref", 6], ["style", 7]],
+			"children": [{
+				"kind": "host",
+				"type": "image",
+				"props": { "accessibilityLabel": "" },
+				"bindings": [
+					["id", 8],
+					["src", 9],
+					["style", 10]
+				]
+			}, {
+				"kind": "host",
+				"type": "flexboxlayout",
+				"bindings": [
+					["id", 11],
+					["style", 12],
+					["onTap", 13]
+				],
+				"children": [{
+					"kind": "host",
+					"type": "absolutelayout",
+					"bindings": [["id", 14], ["style", 15]],
+					"children": [
+						{
+							"kind": "slot",
+							"slot": 16
+						},
+						{
+							"kind": "slot",
+							"slot": 17
+						},
+						{
+							"kind": "slot",
+							"slot": 18
+						},
+						{
+							"kind": "slot",
+							"slot": 19
+						}
+					]
+				}]
+			}]
+		},
+		{
+			"kind": "slot",
+			"slot": 20
+		}
+	]
+});
+var EMPTY_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\"/>";
+var TIP_ESTIMATE_CHAR = 6.2;
+var Chart = defineUniversalComponent("macos", function Chart(props) {
+	const measure = withSlot(_h$0, useMeasure);
+	const [cursor, setCursor] = useState(null, _h$1);
+	const sceneRef = useRef(null, _h$2);
+	const propsRef = useRef(props, _h$3);
+	propsRef.current = props;
+	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 = useMemo(() => w > 0 && h > 0 ? computeScene(propsRef.current, w, h) : null, [
+		props.type,
+		props.data,
+		props.margin,
+		props.stacked,
+		props.innerRadiusRatio,
+		props.xAxis,
+		props.yAxis,
+		w,
+		h
+	], _h$4);
+	sceneRef.current = scene;
+	const interactive = !!(props.onPress || props.onScrub || props.tooltip || props.crosshair);
+	const onTap = useMemo(() => {
+		const scrub = createScrub(() => sceneRef.current, () => propsRef.current, setCursor);
+		return (e) => {
+			const scene = sceneRef.current;
+			scrub("tap", e?.getX?.() ?? (scene?.width ?? 0) / 2, e?.getY?.() ?? (scene?.height ?? 0) / 2);
+		};
+	}, [], _h$5);
+	const markup = scene?.markup ?? EMPTY_SVG;
+	const imageSource = useMemo(() => appKitImageSource(markup), [markup], _h$6);
+	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 = cursor && scene ? hitLabel(scene, cursor) : null;
+	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;
+	return universalValue(__octaneUniversalPlan8, [
+		props.id,
+		props.className,
+		{
+			flexDirection: "column",
+			...props.style
+		},
+		props.accessibilityLabel != null,
+		props.accessibilityLabel,
+		universalIf(legend === "top" && scene, () => {
+			return universalValue(__octaneUniversalPlan1, [{ paddingBottom: 4 }, scene.legend.map((item) => universalValue(__octaneUniversalPlan0, [
+				{ marginRight: 12 },
+				{
+					width: 10,
+					height: 10,
+					borderRadius: 2,
+					backgroundColor: item.color,
+					marginRight: 4
+				},
+				item.text,
+				{ fontSize: 11 }
+			]))]);
+		}),
+		measure.ref,
+		{
+			width: props.width,
+			height: props.height ?? (props.aspectRatio && w > 0 ? w / props.aspectRatio : void 0),
+			flexGrow: 1
+		},
+		props.id ? props.id + "-image" : void 0,
+		imageSource,
+		{
+			width: w,
+			height: h
+		},
+		props.id ? props.id + "-tap" : void 0,
+		{
+			width: w,
+			height: h
+		},
+		interactive ? onTap : void 0,
+		props.id ? props.id + "-overlay" : void 0,
+		{
+			width: w,
+			height: h
+		},
+		scene?.labels.map((l) => universalValue(__octaneUniversalPlan2, [universalProps([
+			[
+				"set",
+				"text",
+				l.text
+			],
+			["spread", {
+				left: l.x,
+				top: l.y
+			}],
+			[
+				"set",
+				"style",
+				{
+					width: l.width,
+					fontSize: 10,
+					opacity: .7,
+					textAlign: l.align === "center" ? "center" : l.align === "end" ? "right" : "left"
+				}
+			]
+		])])),
+		universalIf(cursor && props.crosshair && !scene?.pie && plot, () => {
+			return universalValue(__octaneUniversalPlan3, [
+				cursor.px - .5,
+				plot.y,
+				{
+					width: 1,
+					height: plot.height,
+					backgroundColor: "#8a8a8a"
+				}
+			]);
+		}),
+		universalIf(cursor && (props.crosshair || props.tooltip), () => {
+			return universalValue(__octaneUniversalPlan4, [
+				cursor.px - 4,
+				cursor.py - 4,
+				{
+					width: 8,
+					height: 8,
+					borderRadius: 4,
+					backgroundColor: dotColor ?? "#4e79a7"
+				}
+			]);
+		}),
+		universalIf(cursor && props.tooltip && tipText, () => {
+			return universalValue(__octaneUniversalPlan5, [universalProps([
+				[
+					"set",
+					"id",
+					props.id ? props.id + "-tooltip" : void 0
+				],
+				[
+					"set",
+					"text",
+					tipText
+				],
+				["spread", {
+					left: tipLeft,
+					top: tipTop < 0 ? cursor.py + 12 : tipTop
+				}],
+				[
+					"set",
+					"style",
+					{
+						width: tipWidth,
+						height: 24,
+						backgroundColor: "rgba(20,20,20,0.88)",
+						borderRadius: 4,
+						color: "#ffffff",
+						fontSize: 11,
+						textAlign: "center"
+					}
+				]
+			])]);
+		}),
+		universalIf(legend === "bottom" && scene, () => {
+			return universalValue(__octaneUniversalPlan7, [{ paddingTop: 4 }, scene.legend.map((item) => universalValue(__octaneUniversalPlan6, [
+				{ marginRight: 12 },
+				{
+					width: 10,
+					height: 10,
+					borderRadius: 2,
+					backgroundColor: item.color,
+					marginRight: 4
+				},
+				item.text,
+				{ fontSize: 11 }
+			]))]);
+		})
+	]);
+}, { "module": "@octane-xplat/macos-renderer" });
+//#endregion
+export { Chart };

package/dist/macos/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 };

package/dist/macos/core/hit.js

@@ -0,0 +1,131 @@
+import { defaultFormat } from "./axes.js";
+/** Map a chart-space pointer position to the nearest datum. Cartesian charts
+*  snap to the nearest x group, then pick the closest point inside it —
+*  scatter gates on pointer distance instead of always snapping. Pie hits
+*  resolve by ring + angle. Coordinates outside the plot (+slop) miss. */
+function hitTest(scene, x, y, slop = 24) {
+	if (scene.pie) return pieHit(scene, x, y, slop);
+	const { plot, points } = scene;
+	if (!points.length) return null;
+	if (x < plot.x - slop || x > plot.x + plot.width + slop || y < plot.y - slop || y > plot.y + plot.height + slop) return null;
+	const centers = /* @__PURE__ */ new Map();
+	for (const p of points) {
+		const cur = centers.get(p.key);
+		centers.set(p.key, cur === void 0 ? p.cx : (cur + p.cx) / 2);
+	}
+	let key = null;
+	let keyDist = Infinity;
+	for (const [k, cx] of centers) {
+		const d = Math.abs(cx - x);
+		if (d < keyDist) {
+			keyDist = d;
+			key = k;
+		}
+	}
+	if (key === null) return null;
+	let best = null;
+	let bestDist = Infinity;
+	for (const p of points) {
+		if (p.key !== key) continue;
+		const d = Math.hypot(p.cx - x, p.cy - y);
+		if (d < bestDist) {
+			bestDist = d;
+			best = {
+				series: p.series,
+				index: p.index,
+				x: p.x,
+				y: p.y,
+				px: p.cx,
+				py: p.cy
+			};
+		}
+	}
+	if (best && scene.type === "scatter" && bestDist > slop) return null;
+	return best;
+}
+function pieHit(scene, x, y, slop) {
+	const pie = scene.pie;
+	const dx = x - pie.cx;
+	const dy = y - pie.cy;
+	const r = Math.hypot(dx, dy);
+	if (r < pie.rInner - slop || r > pie.rOuter + slop) return null;
+	const angle = (Math.atan2(dx, -dy) + Math.PI * 2) % (Math.PI * 2);
+	const slice = pie.slices.find((s) => angle >= s.startAngle && angle < s.endAngle);
+	if (!slice) return null;
+	return {
+		series: slice.series,
+		index: slice.index,
+		x: slice.label,
+		y: slice.value,
+		px: slice.cx,
+		py: slice.cy
+	};
+}
+/** Shared gesture → cursor state machine. Both leaves normalize their pointer
+*  source (DOM pointer/click events, NS `touch`+`tap`) to phases and call
+*  this; hit math stays identical across targets. `move` while pressed
+*  scrubs and fires `onScrub`; `hover` (web-only, unpressed move) moves the
+*  cursor without scrubbing; `up` ends the scrub and persists the cursor;
+*  `tap` is a completed press — fires `onPress` and updates the cursor;
+*  `cancel`/`leave` clear. `onPress` lives only on `tap` so NS's tap
+*  recognizer and the web click both reach it exactly once. */
+function createScrub(getScene, getProps, setCursor) {
+	let downAt = null;
+	return (phase, x, y) => {
+		const scene = getScene();
+		const props = getProps();
+		const showCursor = props.tooltip === true || props.crosshair === true;
+		switch (phase) {
+			case "down": {
+				downAt = {
+					x,
+					y,
+					t: Date.now()
+				};
+				const hit = scene && showCursor ? hitTest(scene, x, y) : null;
+				setCursor(hit);
+				if (hit) props.onScrub?.(hit);
+				break;
+			}
+			case "move": {
+				if (!downAt) break;
+				const hit = scene && showCursor ? hitTest(scene, x, y) : null;
+				setCursor(hit);
+				props.onScrub?.(hit);
+				break;
+			}
+			case "hover":
+				if (downAt) break;
+				setCursor(scene && showCursor ? hitTest(scene, x, y) : null);
+				break;
+			case "up":
+				downAt = null;
+				setCursor(scene ? hitTest(scene, x, y) : null);
+				props.onScrub?.(null);
+				break;
+			case "tap": {
+				downAt = null;
+				const hit = scene ? hitTest(scene, x, y) : null;
+				setCursor(hit);
+				if (hit) props.onPress?.(hit);
+				break;
+			}
+			case "cancel":
+			case "leave":
+				downAt = null;
+				setCursor(null);
+				props.onScrub?.(null);
+		}
+	};
+}
+/** Tooltip body for a hit — series name + formatted y for cartesian charts,
+*  slice label + value for pie. */
+function hitLabel(scene, hit) {
+	if (scene.pie) {
+		const slice = scene.pie.slices.find((s) => s.series === hit.series && s.index === hit.index);
+		return slice ? `${slice.label}: ${defaultFormat(slice.value)}` : defaultFormat(hit.y);
+	}
+	return `${scene.series[hit.series]?.name ?? String(hit.series)}: ${defaultFormat(hit.y)}`;
+}
+//#endregion
+export { createScrub, hitLabel, hitTest };