@c2n/chart 0.0.7

package/dist/chart-base.js

@@ -0,0 +1,2 @@
+import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
+export { ChartBase };

package/dist/chart-data.js

@@ -0,0 +1,286 @@
+import { isChartFrame } from "./chart-types.js";
+import { getFieldValue } from "@c2n/core/data-helper.js";
+//#region src/chart-data.ts
+/**
+* Normalisation and projection: everything between "what the consumer handed us" and "what the engine
+* wants", and nothing else. No colour, no axis, no label formatting — those are presentation and live in
+* the elements.
+*
+* Two rules make the realtime path cheap:
+*
+* 1. Normalisation is keyed on the **identity** of the input, so re-assigning the same array never redoes
+*    it, and a 100 000-point dataset is never deep-compared.
+* 2. Appending writes into spare capacity and bumps `frame.revision`, so every projection cache below
+*    invalidates together without anything being rebuilt eagerly.
+*/
+/** Growth factor for the spare capacity an append writes into. */
+var GROWTH = 1.5;
+/** Smallest buffer we bother allocating. */
+var MIN_CAPACITY = 16;
+function toNumber(value) {
+	if (value === null || value === void 0 || value === "") return null;
+	if (typeof value === "number") return Number.isFinite(value) ? value : null;
+	if (value instanceof Date) return value.getTime();
+	const parsed = typeof value === "string" ? Date.parse(value) : NaN;
+	if (!Number.isNaN(parsed) && typeof value === "string" && /[-:TZ]/.test(value)) return parsed;
+	const coerced = Number(value);
+	return Number.isFinite(coerced) ? coerced : null;
+}
+/** True when every entry is a real number, which is what lets the column be a `Float64Array`. */
+function isDense(values) {
+	for (let index = 0; index < values.length; index += 1) if (values[index] === null) return false;
+	return true;
+}
+/**
+* Packs one column. Dense data becomes a `Float64Array` with spare capacity; anything with a hole stays a
+* plain array, because both engines detect a gap with `== null` and `NaN` in a typed array would be read
+* as a real value and wreck the scale range.
+*/
+function packColumn(values, capacity) {
+	if (!isDense(values)) {
+		const column = values.slice();
+		column.length = capacity;
+		return column;
+	}
+	const column = new Float64Array(capacity);
+	for (let index = 0; index < values.length; index += 1) column[index] = values[index];
+	return column;
+}
+function capacityFor(length) {
+	return Math.max(MIN_CAPACITY, Math.ceil(length * GROWTH));
+}
+function readLength(column) {
+	return column.length;
+}
+/** Reads one value out of a column, normalising the two representations to `number | null`. */
+function columnValue(column, index) {
+	const value = column[index];
+	return value === null || value === void 0 || Number.isNaN(value) ? null : value;
+}
+function growColumn(column, capacity) {
+	if (column instanceof Float64Array) {
+		const next = new Float64Array(capacity);
+		next.set(column);
+		return next;
+	}
+	const next = column.slice();
+	next.length = capacity;
+	return next;
+}
+/** A column that must now hold a `null` but is currently typed: widen it to a plain array. */
+function widenColumn(column, length) {
+	if (!(column instanceof Float64Array)) return column;
+	const next = new Array(column.length);
+	for (let index = 0; index < length; index += 1) next[index] = column[index];
+	return next;
+}
+/**
+* Builds and caches the normalised form of whatever a consumer assigned, and owns the projections each
+* engine consumes. One instance per chart element.
+*/
+var ChartFrameBuilder = class {
+	/** Keyed on the input reference: assigning the same array twice never re-reads it. */
+	#frames = /* @__PURE__ */ new WeakMap();
+	/** uPlot views, invalidated by `frame.revision`. */
+	#uplot = /* @__PURE__ */ new WeakMap();
+	/** ECharts views, invalidated by `frame.revision` and the requested shape. */
+	#echarts = /* @__PURE__ */ new WeakMap();
+	/**
+	* Normalises `input` into a {@link ChartFrame}. Returns the *same* frame for the same input reference
+	* and signature, so this is safe to call on every update.
+	*/
+	build(input, context) {
+		if (input === void 0 || input === null) return void 0;
+		if (isChartFrame(input)) return input;
+		if (!Array.isArray(input) || input.length === 0) return {
+			x: new Float64Array(MIN_CAPACITY),
+			columns: [],
+			length: 0,
+			capacity: MIN_CAPACITY,
+			revision: 0
+		};
+		const cached = this.#frames.get(input);
+		if (cached && cached.signature === context.signature) return cached.frame;
+		const frame = this.#normalize(input, context);
+		this.#frames.set(input, {
+			frame,
+			signature: context.signature
+		});
+		return frame;
+	}
+	#normalize(input, context) {
+		const rows = input;
+		const first = rows[0];
+		if (typeof first === "number") {
+			const values = rows;
+			const capacity = capacityFor(values.length);
+			const x = new Float64Array(capacity);
+			for (let index = 0; index < values.length; index += 1) x[index] = index;
+			return {
+				x,
+				columns: [packColumn(values.map(toNumber), capacity)],
+				length: values.length,
+				capacity,
+				revision: 0
+			};
+		}
+		if (Array.isArray(first) || ArrayBuffer.isView(first)) {
+			const columns = rows;
+			const length = columns.length > 0 ? readLength(columns[0]) : 0;
+			const capacity = capacityFor(length);
+			const read = (source) => {
+				const values = new Array(length);
+				for (let index = 0; index < length; index += 1) values[index] = toNumber(source[index]);
+				return packColumn(values, capacity);
+			};
+			return {
+				x: read(columns[0]),
+				columns: columns.slice(1).map(read),
+				length,
+				capacity,
+				revision: 0
+			};
+		}
+		return this.#fromRows(rows, context);
+	}
+	#fromRows(rows, context) {
+		const length = rows.length;
+		const capacity = capacityFor(length);
+		const xValues = new Array(length);
+		const labels = [];
+		let hasLabels = false;
+		for (let index = 0; index < length; index += 1) {
+			const row = rows[index];
+			xValues[index] = context.xField ? toNumber(getFieldValue(row, context.xField)) : index;
+			if (context.labelField) {
+				const label = getFieldValue(row, context.labelField);
+				if (label !== void 0 && label !== null) {
+					labels[index] = String(label);
+					hasLabels = true;
+				}
+			}
+		}
+		for (let index = 0; index < length; index += 1) if (xValues[index] === null) xValues[index] = index;
+		const columns = (context.series.length > 0 ? context.series.map((series) => series.field) : inferFields(rows, context)).map((field) => {
+			const values = new Array(length);
+			for (let index = 0; index < length; index += 1) values[index] = toNumber(getFieldValue(rows[index], field));
+			return packColumn(values, capacity);
+		});
+		const frame = {
+			x: packColumn(xValues, capacity),
+			columns,
+			length,
+			capacity,
+			revision: 0
+		};
+		if (hasLabels) frame.labels = labels;
+		return frame;
+	}
+	/**
+	* Appends one x and one value per series in place. Grows geometrically, and drops the oldest points once
+	* `maxPoints` is reached, so a streaming chart holds a bounded ring rather than an unbounded array.
+	*/
+	push(frame, x, values, maxPoints) {
+		if (frame.columns.length === 0 && values.length > 0) frame.columns = values.map(() => new Float64Array(frame.capacity));
+		if (frame.length >= frame.capacity) {
+			const capacity = capacityFor(frame.length + 1);
+			frame.x = growColumn(frame.x, capacity);
+			frame.columns = frame.columns.map((column) => growColumn(column, capacity));
+			frame.capacity = capacity;
+		}
+		const at = frame.length;
+		writeAt(frame, "x", at, x);
+		for (let index = 0; index < frame.columns.length; index += 1) {
+			const value = values[index] ?? null;
+			if (value === null) frame.columns[index] = widenColumn(frame.columns[index], at);
+			frame.columns[index][at] = value;
+		}
+		frame.length += 1;
+		if (maxPoints > 0 && frame.length > maxPoints) this.#trim(frame, frame.length - maxPoints);
+		frame.revision += 1;
+	}
+	/** Drops `count` points off the front, keeping the buffers and their capacity. */
+	#trim(frame, count) {
+		const remaining = frame.length - count;
+		shiftLeft(frame.x, count, remaining);
+		for (const column of frame.columns) shiftLeft(column, count, remaining);
+		if (frame.labels) frame.labels.splice(0, count);
+		frame.length = remaining;
+	}
+	/**
+	* uPlot's view: `[xs, ys…]` sliced to `length`. A typed column becomes a `subarray`, which is a view
+	* over the same buffer and costs nothing.
+	*/
+	uplotView(frame) {
+		const hit = this.#uplot.get(frame);
+		if (hit && hit.revision === frame.revision && hit.length === frame.length) return hit.view;
+		const view = [sliceColumn(frame.x, frame.length), ...frame.columns.map((column) => sliceColumn(column, frame.length))];
+		this.#uplot.set(frame, {
+			revision: frame.revision,
+			length: frame.length,
+			view
+		});
+		return view;
+	}
+	/**
+	* ECharts' view, one array per series. `pairs` is `[[x, y], …]` for the cartesian charts, `named` is
+	* `[{ name, value }, …]` for the ones whose marks are labelled rather than positioned (pie, gauge), and
+	* `values` is a bare value list.
+	*/
+	echartsView(frame, shape) {
+		let perShape = this.#echarts.get(frame);
+		if (!perShape) {
+			perShape = /* @__PURE__ */ new Map();
+			this.#echarts.set(frame, perShape);
+		}
+		const hit = perShape.get(shape);
+		if (hit && hit.revision === frame.revision && hit.length === frame.length) return hit.view;
+		const view = frame.columns.map((column) => {
+			const out = new Array(frame.length);
+			for (let index = 0; index < frame.length; index += 1) {
+				const value = columnValue(column, index);
+				if (shape === "pairs") out[index] = [columnValue(frame.x, index), value];
+				else if (shape === "named") out[index] = {
+					name: frame.labels?.[index] ?? String(index),
+					value
+				};
+				else out[index] = value;
+			}
+			return out;
+		});
+		perShape.set(shape, {
+			revision: frame.revision,
+			length: frame.length,
+			view
+		});
+		return view;
+	}
+};
+/** Writes into `x` through the same widening rule the y columns use. */
+function writeAt(frame, key, index, value) {
+	if (value === null) frame[key] = widenColumn(frame[key], index);
+	frame[key][index] = value;
+}
+function shiftLeft(column, count, remaining) {
+	if (column instanceof Float64Array) {
+		column.copyWithin(0, count, count + remaining);
+		return;
+	}
+	for (let index = 0; index < remaining; index += 1) column[index] = column[index + count];
+}
+function sliceColumn(column, length) {
+	if (column instanceof Float64Array) return column.subarray(0, length);
+	return column.slice(0, length);
+}
+/**
+* Every numeric key of the first row except the ones already spoken for by the x and label fields.
+*
+* Only a fallback: the element normally resolves the series first and passes them in. Plotting the x field
+* as a series is the bug this guards against.
+*/
+function inferFields(rows, context) {
+	const row = rows[0] ?? {};
+	return Object.keys(row).filter((key) => typeof row[key] === "number" && key !== context.xField && key !== context.labelField);
+}
+//#endregion
+export { ChartFrameBuilder, columnValue };

package/dist/chart-series-BnpHO3lm.js

@@ -0,0 +1,83 @@
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { LitElement, css } from "lit";
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/chart-series.ts
+/** Fired at the parent chart whenever a series definition changes. */
+var SERIES_CHANGE_EVENT = "c2-chart-series-change";
+/** The tag, so a chart can match a definition by name rather than by class identity. */
+var SERIES_TAG = "c2-chart-series";
+var ChartSeries = class ChartSeries extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.field = "";
+		this.axis = "left";
+		this.spanGaps = false;
+		this.hidden = false;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: none;
+    }
+  `;
+	}
+	/** A plain snapshot of this definition, so the chart never holds a reference to the element. */
+	toConfig() {
+		return {
+			field: this.field,
+			label: this.label,
+			color: this.color,
+			lineWidth: this.lineWidth,
+			axis: this.axis,
+			spanGaps: this.spanGaps,
+			hidden: this.hidden,
+			format: this.format
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#notify();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#notify();
+	}
+	updated(_changed) {
+		this.#notify();
+	}
+	/** Composed so it crosses the shadow boundary of a chart that wraps its slot; the chart stops it there. */
+	#notify() {
+		this.dispatchEvent(new CustomEvent(SERIES_CHANGE_EVENT, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], ChartSeries.prototype, "field", void 0);
+__decorate([property({ type: String })], ChartSeries.prototype, "label", void 0);
+__decorate([property({ type: String })], ChartSeries.prototype, "color", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "line-width"
+})], ChartSeries.prototype, "lineWidth", void 0);
+__decorate([property({ type: String })], ChartSeries.prototype, "axis", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "span-gaps"
+})], ChartSeries.prototype, "spanGaps", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ChartSeries.prototype, "hidden", void 0);
+__decorate([property({ attribute: false })], ChartSeries.prototype, "format", void 0);
+ChartSeries = __decorate([customElement("c2-chart-series")], ChartSeries);
+//#endregion
+export { __decorate as i, SERIES_CHANGE_EVENT as n, SERIES_TAG as r, ChartSeries as t };

package/dist/chart-series.js

@@ -0,0 +1,2 @@
+import { n as SERIES_CHANGE_EVENT, r as SERIES_TAG, t as ChartSeries } from "./chart-series-BnpHO3lm.js";
+export { ChartSeries, SERIES_CHANGE_EVENT, SERIES_TAG };

package/dist/chart-theme.js

@@ -0,0 +1,151 @@
+import { isServer } from "lit";
+//#region src/chart-theme.ts
+/**
+* Turns the element's own CSS custom properties into plain values a canvas engine can use.
+*
+* This is the one place the package has to work around the fact that a chart is not DOM: `::part()` and
+* `var()` never reach a canvas, so the theme has to be *read* and handed over as strings and numbers.
+*
+* Colours are read through hidden probe elements rather than `getPropertyValue`, because a custom
+* property whose value is a `var()` chain or a `color-mix()` comes back from `getPropertyValue` as the
+* author's literal text — which no engine can parse. The computed `color` of a probe is always a resolved
+* `rgb(…)`. The probes live in the shadow root under `display: none`, so they cost no layout.
+*/
+/** Number of series colours in the palette; matches `--c2-chart__series-1…8--color`. */
+var PALETTE_SIZE = 8;
+/**
+* The colours the probe block exposes, in DOM order. `chart.scss` emits one `i:nth-child(n)` rule per
+* entry, so this list and that loop must stay in step.
+*/
+var PROBE_COLORS = [
+	"series-1",
+	"series-2",
+	"series-3",
+	"series-4",
+	"series-5",
+	"series-6",
+	"series-7",
+	"series-8",
+	"axis",
+	"grid",
+	"text",
+	"muted",
+	"tooltip-background",
+	"tooltip-text",
+	"crosshair",
+	"positive",
+	"negative",
+	"surface"
+];
+var FALLBACK = {
+	palette: [
+		"#0265dc",
+		"#ea580c",
+		"#0f766e",
+		"#db2777",
+		"#a16207",
+		"#7c3aed",
+		"#0891b2",
+		"#52525b"
+	],
+	color: "#18181b",
+	mutedColor: "#71717a",
+	axisColor: "#71717a",
+	gridColor: "#e4e4e7",
+	surface: "#ffffff",
+	tooltipBackground: "#18181b",
+	tooltipColor: "#fafafa",
+	crosshairColor: "#a1a1aa",
+	positive: "#16a34a",
+	negative: "#dc2626",
+	fontFamily: "inherit",
+	fontSize: 12,
+	lineWidth: 2,
+	pointRadius: 2.5
+};
+/**
+* Resolves and caches the host's chart theme, and invalidates it whenever the page's colour scheme moves.
+*
+* Three independent triggers, because an app may use any of them: the `data-theme` / `class` attribute on
+* `<html>` (what a site toggle sets), the OS preference, and the `c2n-theme-change` event the docs site
+* happens to fire. None of them is required for the component to work.
+*/
+var ChartThemeController = class {
+	#host;
+	#onChange;
+	#theme;
+	#observer;
+	#media;
+	constructor(host, onChange) {
+		this.#host = host;
+		this.#onChange = onChange;
+		host.addController(this);
+	}
+	/** The resolved theme, computed on first read after each invalidation. */
+	get theme() {
+		if (!this.#theme) this.#theme = this.#resolve();
+		return this.#theme;
+	}
+	/** Drops the cached theme and tells the host to rebuild its engine options. */
+	invalidate() {
+		this.#theme = void 0;
+		this.#onChange();
+	}
+	hostConnected() {
+		if (isServer) return;
+		window.addEventListener("c2n-theme-change", this.#handle);
+		if (typeof MutationObserver !== "undefined") {
+			if (!this.#observer) this.#observer = new MutationObserver(this.#handle);
+			this.#observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["data-theme", "class"]
+			});
+		}
+		if (typeof matchMedia !== "undefined") {
+			if (!this.#media) this.#media = matchMedia("(prefers-color-scheme: dark)");
+			this.#media.addEventListener("change", this.#handle);
+		}
+	}
+	hostDisconnected() {
+		if (isServer) return;
+		window.removeEventListener("c2n-theme-change", this.#handle);
+		this.#observer?.disconnect();
+		this.#media?.removeEventListener("change", this.#handle);
+		this.#theme = void 0;
+	}
+	#handle = () => this.invalidate();
+	#resolve() {
+		if (isServer || typeof getComputedStyle !== "function") return FALLBACK;
+		const style = getComputedStyle(this.#host);
+		const probes = this.#host.renderRoot?.querySelectorAll(".theme-probe > i");
+		if (!probes || probes.length < PROBE_COLORS.length) return FALLBACK;
+		const at = (name, fallback) => {
+			const index = PROBE_COLORS.indexOf(name);
+			const probe = probes[index];
+			return (probe ? getComputedStyle(probe).color : "") || fallback;
+		};
+		const scalar = (name, fallback) => {
+			const value = parseFloat(style.getPropertyValue(name));
+			return Number.isFinite(value) ? value : fallback;
+		};
+		return {
+			palette: PROBE_COLORS.slice(0, 8).map((name, index) => at(name, FALLBACK.palette[index])),
+			color: at("text", FALLBACK.color),
+			mutedColor: at("muted", FALLBACK.mutedColor),
+			axisColor: at("axis", FALLBACK.axisColor),
+			gridColor: at("grid", FALLBACK.gridColor),
+			surface: at("surface", FALLBACK.surface),
+			tooltipBackground: at("tooltip-background", FALLBACK.tooltipBackground),
+			tooltipColor: at("tooltip-text", FALLBACK.tooltipColor),
+			crosshairColor: at("crosshair", FALLBACK.crosshairColor),
+			positive: at("positive", FALLBACK.positive),
+			negative: at("negative", FALLBACK.negative),
+			fontFamily: style.getPropertyValue("--c2-chart--font-family").trim() || FALLBACK.fontFamily,
+			fontSize: scalar("--c2-chart--font-size", FALLBACK.fontSize),
+			lineWidth: scalar("--c2-chart__line--width", FALLBACK.lineWidth),
+			pointRadius: scalar("--c2-chart__point--radius", FALLBACK.pointRadius)
+		};
+	}
+};
+//#endregion
+export { ChartThemeController, PALETTE_SIZE, PROBE_COLORS };

package/dist/chart-types.js

@@ -0,0 +1,8 @@
+import { getFieldValue } from "@c2n/core/data-helper.js";
+//#region src/chart-types.ts
+/** Marks a value as a `ChartFrame` without an `instanceof` check surviving a bundler boundary. */
+function isChartFrame(value) {
+	return typeof value === "object" && value !== null && "columns" in value && "length" in value && "revision" in value;
+}
+//#endregion
+export { getFieldValue, isChartFrame };

package/dist/chart.js

@@ -0,0 +1,13 @@
+import { t as ChartBase } from "./chart-base-C4-1TyKq.js";
+import { isChartFrame } from "./chart-types.js";
+import { ChartFrameBuilder, columnValue } from "./chart-data.js";
+import { ChartThemeController, PALETTE_SIZE, PROBE_COLORS } from "./chart-theme.js";
+import { n as SERIES_CHANGE_EVENT, t as ChartSeries } from "./chart-series-BnpHO3lm.js";
+import { t as UplotChartBase } from "./uplot-chart-base-BWr0zJE2.js";
+import { LineChart } from "./line-chart.js";
+import { AreaChart } from "./area-chart.js";
+import { BarChart } from "./bar-chart.js";
+import { Sparkline } from "./sparkline.js";
+import { t as EchartsChartBase } from "./echarts-chart-base-LogCQN10.js";
+import { PieChart } from "./pie-chart.js";
+export { AreaChart, BarChart, ChartBase, ChartFrameBuilder, ChartSeries, ChartThemeController, EchartsChartBase, LineChart, PALETTE_SIZE, PROBE_COLORS, PieChart, SERIES_CHANGE_EVENT, Sparkline, UplotChartBase, columnValue, isChartFrame };