@octane-xplat/charts 0.0.1 → 0.11.0

package/dist/native/Chart.tsrx.js

@@ -0,0 +1,340 @@
+import { computeScene } from "./core/scene.js";
+import { createScrub, hitLabel } from "./core/hit.js";
+import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalValue, useMemo, useRef, useState, withSlot } from "@nativescript-community/octane";
+import { AccessibilityRole, Color } from "@nativescript/core";
+import { useMeasure } from "@octane-xplat/ui";
+//#region src/Chart.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("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "host",
+		"type": "contentview",
+		"bindings": [["style", 1]]
+	}, {
+		"kind": "host",
+		"type": "label",
+		"bindings": [["text", 2], ["style", 3]]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"flexWrap": "wrap"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"bindings": [
+		["left", 0],
+		["top", 1],
+		["width", 2],
+		["text", 3],
+		["textAlignment", 4],
+		["style", 5]
+	]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "contentview",
+	"props": { "width": 1 },
+	"bindings": [
+		["left", 0],
+		["top", 1],
+		["height", 2],
+		["backgroundColor", 3]
+	]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "contentview",
+	"props": {
+		"width": 8,
+		"height": 8,
+		"borderRadius": 4
+	},
+	"bindings": [
+		["left", 0],
+		["top", 1],
+		["backgroundColor", 2]
+	]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"borderRadius": 4,
+		"paddingTop": 2,
+		"paddingBottom": 2,
+		"paddingLeft": 6,
+		"paddingRight": 6
+	},
+	"bindings": [
+		["left", 0],
+		["top", 1],
+		["backgroundColor", 2]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "label",
+		"bindings": [
+			["text", 3],
+			["color", 4],
+			["style", 5]
+		]
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "host",
+		"type": "contentview",
+		"bindings": [["style", 1]]
+	}, {
+		"kind": "host",
+		"type": "label",
+		"bindings": [["text", 2], ["style", 3]]
+	}]
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"flexWrap": "wrap"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["accessible", 3],
+		["accessibilityRole", 4],
+		["accessibilityLabel", 5]
+	],
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 6
+		},
+		{
+			"kind": "host",
+			"type": "gridlayout",
+			"bindings": [["ref", 7], ["style", 8]],
+			"children": [{
+				"kind": "host",
+				"type": "svgview",
+				"props": { "stretch": "aspectFit" },
+				"bindings": [["src", 9], ["style", 10]]
+			}, {
+				"kind": "host",
+				"type": "absolutelayout",
+				"bindings": [
+					["id", 11],
+					["style", 12],
+					["isUserInteractionEnabled", 13],
+					["onTouch", 14],
+					["onTap", 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("nativescript", 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 onTouch = useMemo(() => {
+		const scrub = createScrub(() => sceneRef.current, () => propsRef.current, setCursor);
+		return (e) => {
+			scrub(e.action, e.getX(), e.getY());
+		};
+	}, [], _h$5);
+	const onTap = useMemo(() => {
+		const scrub = createScrub(() => sceneRef.current, () => propsRef.current, setCursor);
+		return (e) => {
+			const size = e.object?.getActualSize?.();
+			scrub("tap", e.getX?.() ?? (size ? size.width / 2 : 0), e.getY?.() ?? (size ? size.height / 2 : 0));
+		};
+	}, [], _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,
+		AccessibilityRole.Image,
+		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: new Color(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
+		},
+		scene?.markup ?? EMPTY_SVG,
+		{
+			width: w,
+			height: h
+		},
+		props.id ? props.id + "-overlay" : void 0,
+		{
+			width: w,
+			height: h
+		},
+		interactive,
+		interactive ? onTouch : void 0,
+		interactive ? onTap : void 0,
+		scene?.labels.map((l) => universalValue(__octaneUniversalPlan2, [
+			l.x,
+			l.y,
+			l.width,
+			l.text,
+			l.align === "center" ? "center" : l.align === "end" ? "right" : "left",
+			{
+				fontSize: 10,
+				opacity: .7
+			}
+		])),
+		universalIf(cursor && props.crosshair && !scene?.pie && plot, () => {
+			return universalValue(__octaneUniversalPlan3, [
+				cursor.px - .5,
+				plot.y,
+				plot.height,
+				new Color("#8a8a8a")
+			]);
+		}),
+		universalIf(cursor && (props.crosshair || props.tooltip), () => {
+			return universalValue(__octaneUniversalPlan4, [
+				cursor.px - 4,
+				cursor.py - 4,
+				new Color(dotColor ?? "#4e79a7")
+			]);
+		}),
+		universalIf(cursor && props.tooltip && tipText, () => {
+			return universalValue(__octaneUniversalPlan5, [
+				tipLeft,
+				tipTop < 0 ? cursor.py + 12 : tipTop,
+				new Color("rgba(20,20,20,0.88)"),
+				tipText,
+				new Color("#ffffff"),
+				{ fontSize: 11 }
+			]);
+		}),
+		universalIf(legend === "bottom" && scene, () => {
+			return universalValue(__octaneUniversalPlan7, [{ paddingTop: 4 }, scene.legend.map((item) => universalValue(__octaneUniversalPlan6, [
+				{ marginRight: 12 },
+				{
+					width: 10,
+					height: 10,
+					borderRadius: 2,
+					backgroundColor: new Color(item.color),
+					marginRight: 4
+				},
+				item.text,
+				{ fontSize: 11 }
+			]))]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Chart };

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