@octane-xplat/charts 0.0.0-stage → 0.10.0

package/dist/native/core/marks.js

@@ -0,0 +1,262 @@
+import { categoryKey, xCenter } from "./scales.js";
+import { scaleBand } from "d3-scale";
+import { arc, area, curveMonotoneX, line, pie } from "d3-shape";
+//#region src/core/marks.ts
+function buildMarks(type, layout, series, options) {
+	switch (type) {
+		case "line": return lineMarks(layout, series);
+		case "area": return areaMarks(layout, series);
+		case "scatter": return scatterMarks(layout, series);
+		case "bar": return options.stacked ? stackedBarMarks(layout, series) : groupedBarMarks(layout, series);
+		case "pie": return pieMarks(layout, series, options);
+	}
+}
+function lineMarks(layout, series) {
+	const { xKind, x, y } = layout;
+	const gen = line().defined((d) => Number.isFinite(d.y)).x((d) => xCenter(xKind, x, d.x)).y((d) => y(d.y)).curve(curveMonotoneX);
+	const marks = [];
+	const points = [];
+	series.forEach((s, si) => {
+		marks.push({
+			kind: "path",
+			d: gen(s.values) ?? "",
+			fill: "none",
+			stroke: s.color,
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			series: si
+		});
+		s.values.forEach((d, i) => {
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx: xCenter(xKind, x, d.x),
+				cy: y(d.y),
+				x: d.x,
+				y: d.y
+			});
+		});
+	});
+	return {
+		marks,
+		points
+	};
+}
+function areaMarks(layout, series) {
+	const { xKind, x, y } = layout;
+	const zero = y(Math.max(y.domain()[0], Math.min(0, y.domain()[1])));
+	const gen = area().defined((d) => Number.isFinite(d.y)).x((d) => xCenter(xKind, x, d.x)).y0(zero).y1((d) => y(d.y)).curve(curveMonotoneX);
+	const stroke = line().defined((d) => Number.isFinite(d.y)).x((d) => xCenter(xKind, x, d.x)).y((d) => y(d.y)).curve(curveMonotoneX);
+	const marks = [];
+	const points = [];
+	series.forEach((s, si) => {
+		marks.push({
+			kind: "path",
+			d: gen(s.values) ?? "",
+			fill: s.color,
+			fillOpacity: .25,
+			series: si
+		});
+		marks.push({
+			kind: "path",
+			d: stroke(s.values) ?? "",
+			fill: "none",
+			stroke: s.color,
+			strokeWidth: 2,
+			series: si
+		});
+		s.values.forEach((d, i) => {
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx: xCenter(xKind, x, d.x),
+				cy: y(d.y),
+				x: d.x,
+				y: d.y
+			});
+		});
+	});
+	return {
+		marks,
+		points
+	};
+}
+function scatterMarks(layout, series) {
+	const { xKind, x, y } = layout;
+	const marks = [];
+	const points = [];
+	series.forEach((s, si) => {
+		s.values.forEach((d, i) => {
+			const cx = xCenter(xKind, x, d.x);
+			const cy = y(d.y);
+			marks.push({
+				kind: "circle",
+				cx,
+				cy,
+				r: 3.5,
+				fill: d.color ?? s.color,
+				fillOpacity: .85,
+				series: si,
+				index: i
+			});
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx,
+				cy,
+				x: d.x,
+				y: d.y
+			});
+		});
+	});
+	return {
+		marks,
+		points
+	};
+}
+function groupedBarMarks(layout, series) {
+	const { x, y } = layout;
+	const outer = x;
+	const inner = scaleBand().domain(series.map((_, i) => String(i))).range([0, outer.bandwidth()]).padding(.08);
+	const marks = [];
+	const points = [];
+	series.forEach((s, si) => {
+		const offset = inner(String(si)) ?? 0;
+		const width = inner.bandwidth();
+		s.values.forEach((d, i) => {
+			const band = outer(String(d.x));
+			if (band === void 0 || !Number.isFinite(d.y)) return;
+			const top = y(Math.max(0, d.y));
+			const bottom = y(Math.min(0, d.y));
+			marks.push({
+				kind: "rect",
+				x: band + offset,
+				y: top,
+				width,
+				height: Math.max(0, bottom - top),
+				fill: d.color ?? s.color,
+				series: si,
+				index: i
+			});
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx: band + offset + width / 2,
+				cy: y(d.y),
+				x: d.x,
+				y: d.y
+			});
+		});
+	});
+	return {
+		marks,
+		points
+	};
+}
+/** Stacked bars accumulate per category — positive values stack up from the
+*  baseline, negatives down, so mixed-sign data stays correct. */
+function stackedBarMarks(layout, series) {
+	const { x, y } = layout;
+	const outer = x;
+	const posBase = /* @__PURE__ */ new Map();
+	const negBase = /* @__PURE__ */ new Map();
+	const marks = [];
+	const points = [];
+	series.forEach((s, si) => {
+		s.values.forEach((d, i) => {
+			const cat = String(d.x);
+			const band = outer(cat);
+			if (band === void 0 || !Number.isFinite(d.y)) return;
+			const v0 = d.y >= 0 ? posBase.get(cat) ?? 0 : negBase.get(cat) ?? 0;
+			const v1 = v0 + d.y;
+			if (d.y >= 0) posBase.set(cat, v1);
+			else negBase.set(cat, v1);
+			const top = y(Math.max(v0, v1));
+			const bottom = y(Math.min(v0, v1));
+			marks.push({
+				kind: "rect",
+				x: band,
+				y: top,
+				width: outer.bandwidth(),
+				height: Math.max(0, bottom - top),
+				fill: d.color ?? s.color,
+				series: si,
+				index: i
+			});
+			points.push({
+				series: si,
+				index: i,
+				key: cat,
+				cx: band + outer.bandwidth() / 2,
+				cy: y(v1),
+				x: d.x,
+				y: d.y
+			});
+		});
+	});
+	return {
+		marks,
+		points
+	};
+}
+/** Pie consumes every datum across series — each {x: label, y: value} is a
+*  slice; slice colors are categorical (palette by order) with datum.color
+*  overrides. A series color is ignored on pie — it would be monochrome. */
+function pieMarks(layout, series, options) {
+	const { plot } = layout;
+	const flat = [];
+	series.forEach((s, si) => s.values.forEach((d, i) => flat.push({
+		d,
+		si,
+		i
+	})));
+	const cx = plot.width / 2;
+	const cy = plot.height / 2;
+	const rOuter = Math.max(0, Math.min(plot.width, plot.height) / 2);
+	const ratio = options.innerRadiusRatio ?? 0;
+	const rInner = rOuter * Math.min(Math.max(ratio, 0), .95);
+	const arcs = pie().value((v) => Math.max(0, v.d.y)).sort(null)(flat);
+	const gen = arc().innerRadius(rInner).outerRadius(rOuter);
+	const marks = [];
+	const slices = [];
+	arcs.forEach((a, order) => {
+		const color = a.data.d.color ?? options.palette[order % options.palette.length];
+		const centroid = gen.centroid(a);
+		marks.push({
+			kind: "path",
+			d: gen(a) ?? "",
+			transform: `translate(${cx} ${cy})`,
+			fill: color,
+			series: a.data.si,
+			index: a.data.i
+		});
+		slices.push({
+			series: a.data.si,
+			index: a.data.i,
+			label: String(a.data.d.x),
+			value: a.data.d.y,
+			color,
+			startAngle: a.startAngle,
+			endAngle: a.endAngle,
+			cx: centroid[0],
+			cy: centroid[1]
+		});
+	});
+	return {
+		marks,
+		points: [],
+		pie: {
+			cx,
+			cy,
+			rOuter,
+			rInner,
+			slices
+		}
+	};
+}
+//#endregion
+export { buildMarks };

package/dist/native/core/scales.js

@@ -0,0 +1,99 @@
+import { extent } from "d3-array";
+import { scaleBand, scaleLinear, scalePoint, scaleTime } from "d3-scale";
+//#region src/core/scales.ts
+/** Categorical x values across all series, first-seen order — the band/point
+*  domain. */
+function categoryDomain(data) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const series of data) for (const d of series.values) {
+		const key = String(d.x);
+		if (!seen.has(key)) {
+			seen.add(key);
+			out.push(key);
+		}
+	}
+	return out;
+}
+/** A categorical x lookup — band/point domains key on String(x). */
+function categoryKey(x) {
+	return String(x);
+}
+/** Pick the x scale family: bar is always band, other cartesian types infer
+*  from the first datum — Date → time, string → point, number → linear. */
+function inferXKind(type, data) {
+	if (type === "bar") return "band";
+	const first = data[0]?.values[0]?.x;
+	if (first instanceof Date) return "time";
+	if (typeof first === "string") return "point";
+	return "linear";
+}
+function buildXScale(kind, data, width) {
+	switch (kind) {
+		case "band": return scaleBand().domain(categoryDomain(data)).range([0, width]).paddingInner(.25).paddingOuter(.15);
+		case "point": {
+			const domain = categoryDomain(data);
+			return scalePoint().domain(domain).range([0, width]).padding(domain.length <= 1 ? 0 : .5);
+		}
+		case "time": {
+			const values = data.flatMap((s) => s.values.map((d) => d.x));
+			const [lo, hi] = extent(values);
+			if (lo === void 0 || hi === void 0) {
+				const now = /* @__PURE__ */ new Date();
+				return scaleTime().domain([now, now]).range([0, width]);
+			}
+			return scaleTime().domain(padDomain(+lo, +hi).map((v) => new Date(v))).range([0, width]).nice();
+		}
+		case "linear": {
+			const values = data.flatMap((s) => s.values.map((d) => Number(d.x)));
+			const [lo, hi] = extent(values);
+			return scaleLinear().domain(padDomain(lo ?? 0, hi ?? 1)).range([0, width]).nice();
+		}
+	}
+}
+/** Degenerate domains (one value) get a unit pad so the scale still maps
+*  somewhere sensible. */
+function padDomain(lo, hi) {
+	return lo === hi ? [lo - .5, hi + .5] : [lo, hi];
+}
+/** Y domain: bar/area pin the zero baseline; line/scatter take the data
+*  extent; stacked bars sum per category (positive stack only — negative
+*  values in stacked mode stack below zero independently). */
+function yDomain(data, type, stacked) {
+	if (stacked && type === "bar") {
+		const pos = /* @__PURE__ */ new Map();
+		const neg = /* @__PURE__ */ new Map();
+		for (const series of data) for (const d of series.values) {
+			const key = String(d.x);
+			if (d.y >= 0) pos.set(key, (pos.get(key) ?? 0) + d.y);
+			else neg.set(key, (neg.get(key) ?? 0) + d.y);
+		}
+		const hi = Math.max(0, ...pos.values());
+		const lo = Math.min(0, ...neg.values());
+		return lo === hi ? [0, 1] : [lo, hi];
+	}
+	const values = data.flatMap((s) => s.values.map((d) => d.y));
+	const [lo, hi] = extent(values);
+	const min = lo ?? 0;
+	const max = hi ?? 1;
+	if (type === "bar" || type === "area") {
+		const domain = [Math.min(0, min), Math.max(0, max)];
+		return domain[0] === domain[1] ? [0, 1] : domain;
+	}
+	return padDomain(min, max);
+}
+function buildYScale(domain, height) {
+	return scaleLinear().domain(domain).range([height, 0]).nice();
+}
+/** Pixel center of an x value — band offsets by half the band, point and
+*  continuous scales map directly. */
+function xCenter(kind, scale, value) {
+	if (kind === "band") {
+		const band = scale;
+		return (band(String(value)) ?? NaN) + band.bandwidth() / 2;
+	}
+	if (kind === "point") return scale(String(value)) ?? NaN;
+	return scale(value);
+}
+//#endregion
+export { buildXScale, buildYScale, categoryDomain, categoryKey, inferXKind, xCenter, yDomain };

package/dist/native/core/scene.js

@@ -0,0 +1,120 @@
+import { buildXScale, buildYScale, inferXKind, yDomain } from "./scales.js";
+import { xAxisModel, yAxisModel } from "./axes.js";
+import { buildMarks } from "./marks.js";
+import { svgDocument } from "./svg.js";
+//#region src/core/scene.ts
+/** Default categorical palette — Tableau 10, embedded so the leaf stays free
+*  of d3-scale-chromatic. */
+var PALETTE = [
+	"#4e79a7",
+	"#f28e2b",
+	"#e15759",
+	"#76b7b2",
+	"#59a14f",
+	"#edc948",
+	"#b07aa1",
+	"#ff9da7",
+	"#9c755f",
+	"#bab0ac"
+];
+function computeScene(props, width, height) {
+	if (!(width > 0) || !(height > 0) || !props.data?.length) return null;
+	const pie = props.type === "pie";
+	const xLabels = !pie && props.xAxis?.labels !== false;
+	const yLabels = !pie && props.yAxis?.labels !== false;
+	const margin = {
+		top: 8,
+		right: 10,
+		bottom: pie ? 8 : xLabels ? 26 : 10,
+		left: pie ? 8 : yLabels ? 46 : 10,
+		...props.margin
+	};
+	const plot = {
+		x: margin.left,
+		y: margin.top,
+		width: Math.max(0, width - margin.left - margin.right),
+		height: Math.max(0, height - margin.top - margin.bottom)
+	};
+	if (!(plot.width > 0) || !(plot.height > 0)) return null;
+	const series = props.data.map((s, i) => ({
+		name: s.name,
+		color: s.color ?? PALETTE[i % PALETTE.length],
+		values: s.values
+	}));
+	let marks;
+	let points;
+	let pieScene = null;
+	let labels = [];
+	let grid = [];
+	let frame = [];
+	if (pie) {
+		const built = buildMarks("pie", {
+			plot,
+			xKind: "band",
+			x: buildXScale("band", [], 0),
+			y: buildYScale([0, 1], 1)
+		}, series, {
+			innerRadiusRatio: props.innerRadiusRatio,
+			palette: PALETTE
+		});
+		marks = built.marks;
+		points = [];
+		const center = {
+			cx: built.pie.cx + plot.x,
+			cy: built.pie.cy + plot.y
+		};
+		pieScene = {
+			...built.pie,
+			...center,
+			slices: built.pie.slices.map((s) => ({
+				...s,
+				cx: s.cx + center.cx,
+				cy: s.cy + center.cy
+			}))
+		};
+	} else {
+		const xKind = inferXKind(props.type, props.data);
+		const layout = {
+			plot,
+			xKind,
+			x: buildXScale(xKind, props.data, plot.width),
+			y: buildYScale(yDomain(props.data, props.type, props.stacked === true), plot.height)
+		};
+		const built = buildMarks(props.type, layout, series, {
+			stacked: props.stacked,
+			palette: PALETTE
+		});
+		marks = built.marks;
+		points = built.points.map((p) => ({
+			...p,
+			cx: p.cx + plot.x,
+			cy: p.cy + plot.y
+		}));
+		const xAxis = xAxisModel(xKind, layout.x, props.xAxis, plot);
+		const yAxis = yAxisModel(layout.y, props.yAxis, plot);
+		labels = [...xAxis.labels, ...yAxis.labels];
+		grid = [...xAxis.grid, ...yAxis.grid];
+		frame = [...xAxis.frame, ...yAxis.frame];
+	}
+	const legend = pieScene ? pieScene.slices.map((s) => ({
+		color: s.color,
+		text: s.label
+	})) : series.map((s) => ({
+		color: s.color,
+		text: s.name
+	}));
+	return {
+		type: props.type,
+		width,
+		height,
+		plot,
+		markup: svgDocument(marks, grid, frame, plot, width, height),
+		labels,
+		legend,
+		series,
+		points,
+		pie: pieScene
+	};
+}
+//#endregion
+export { PALETTE, computeScene };

package/dist/native/core/svg.js

@@ -0,0 +1,40 @@
+//#region src/core/svg.ts
+/** Mark[] → one `<svg>` markup string. Emits only the androidsvg ∩ SVGKit
+*  subset: `<svg>`/`<g>` structure, path/rect/circle/line shapes, solid fills
+*  and strokes, `translate` transforms, opacity attributes. Never `<text>`,
+*  filters, masks, patterns, or gradients — labels are real elements in the
+*  leaf overlay (docs/notes/primitive-notes.md). */
+function num(v) {
+	if (!Number.isFinite(v)) return "0";
+	return Number.isInteger(v) ? String(v) : String(+v.toFixed(2));
+}
+function esc(v) {
+	return v.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function paintAttrs(m) {
+	let out = "";
+	if (m.fill !== void 0) out += ` fill="${esc(m.fill)}"`;
+	if (m.fillOpacity !== void 0) out += ` fill-opacity="${num(m.fillOpacity)}"`;
+	if (m.stroke !== void 0) out += ` stroke="${esc(m.stroke)}"`;
+	if (m.strokeOpacity !== void 0) out += ` stroke-opacity="${num(m.strokeOpacity)}"`;
+	if (m.strokeWidth !== void 0) out += ` stroke-width="${num(m.strokeWidth)}"`;
+	if (m.strokeLinecap !== void 0) out += ` stroke-linecap="${m.strokeLinecap}"`;
+	if (m.transform !== void 0) out += ` transform="${esc(m.transform)}"`;
+	return out;
+}
+function markXml(m) {
+	switch (m.kind) {
+		case "path": return `<path d="${esc(m.d)}"${paintAttrs(m)}/>`;
+		case "rect": return `<rect x="${num(m.x)}" y="${num(m.y)}" width="${num(m.width)}" height="${num(m.height)}"${paintAttrs(m)}/>`;
+		case "circle": return `<circle cx="${num(m.cx)}" cy="${num(m.cy)}" r="${num(m.r)}"${paintAttrs(m)}/>`;
+		case "line": return `<line x1="${num(m.x1)}" y1="${num(m.y1)}" x2="${num(m.x2)}" y2="${num(m.y2)}"${paintAttrs(m)}/>`;
+	}
+}
+/** Chart marks are plot-space; axis rules are chart-space. Paint order:
+*  gridlines under the translated marks group, frame (spine + stubs) over. */
+function svgDocument(marks, grid, frame, plot, width, height) {
+	const body = `${grid.map(markXml).join("")}<g transform="translate(${num(plot.x)} ${num(plot.y)})">${marks.map(markXml).join("")}</g>${frame.map(markXml).join("")}`;
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${num(width)} ${num(height)}" width="${num(width)}" height="${num(height)}">${body}</svg>`;
+}
+//#endregion
+export { svgDocument };

package/dist/native/index.js

@@ -0,0 +1,2 @@
+import { Chart } from "./Chart.tsrx.js";
+export { Chart };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "1537cd61-c78d-4868-9308-ec38e5086a47",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}