@ixfx/components 0.4.0 → 0.4.2

package/dist/{xy-axis-CK64haaK.js → xy-axis-DbPezP6A.js}

@@ -1,5 +1,5 @@
 import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import { a as radiansNormalise, c as isEmpty$1, d as isPlaceholder, f as isPoint, i as piPi$1, l as isNaN$1, m as pointTest, n as average$1, o as guard$2, p as isPoint3d, r as averager, s as guardNonZeroPoint, t as colour_exports, u as isNull } from "./colour-C3MQIjFJ-vRCdr8W-.js";
+import { a as radiansNormalise, c as isEmpty$1, d as isPlaceholder, f as isPoint, i as piPi$1, l as isNaN, m as pointTest, n as average$1, o as guard$2, p as isPoint3d, r as averager, s as guardNonZeroPoint, t as colour_exports, u as isNull } from "./colour-C3MQIjFJ-vRCdr8W-.js";
 import { C as resultThrow, S as percentTest, _ as functionTest, c as round, f as wrap, l as scale, o as quantiseEvery, r as dotProduct, s as rangeStream, t as clamp, v as integerTest, w as stringTest, x as numberTest } from "./dist-CA13FvMn.js";
 import { LitElement, css, html, svg } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -5920,7 +5920,7 @@ var point_exports = /* @__PURE__ */ __exportAll$2({
 	invert: () => invert,
 	isEmpty: () => isEmpty$1,
 	isEqual: () => isEqual,
-	isNaN: () => isNaN$1,
+	isNaN: () => isNaN,
 	isNull: () => isNull,
 	isPlaceholder: () => isPlaceholder,
 	isPoint: () => isPoint,
@@ -6559,9 +6559,20 @@ function applyAgeModification(base, ageFraction, ageStyle) {
 }
 //#endregion
 //#region src/plots/data.ts
+/**
+* A data series
+*/
 var PlotDataSeries = class {
 	#rangeStream;
 	#options;
+	/**
+	* Constructor.
+	*
+	* Default options:
+	* - `capacityLimit`: 100
+	* - `persistentScaling`: true
+	* @param options
+	*/
 	constructor(options = {}) {
 		this.values = [];
 		this.#rangeStream = rangeStream();
@@ -6575,11 +6586,20 @@ var PlotDataSeries = class {
 			...options
 		};
 	}
-	add(value) {
-		this.values.push(value);
-		this.range = this.#rangeStream.seen(value);
+	/**
+	* Adds a single value
+	* @param valueOrValues Value to add
+	*/
+	add(valueOrValues) {
+		if (typeof valueOrValues === `number`) {
+			this.values.push(valueOrValues);
+			this.range = this.#rangeStream.seen(valueOrValues);
+		} else {
+			this.values.push(...valueOrValues);
+			for (const v of valueOrValues) this.range = this.#rangeStream.seen(v);
+		}
 		if (this.values.length > this.#options.capacityLimit) {
-			this.values.shift();
+			this.values = this.values.slice(this.values.length - this.#options.capacityLimit);
 			if (!this.#options.persistentScaling) this.#recompute();
 		}
 	}
@@ -6587,14 +6607,24 @@ var PlotDataSeries = class {
 		if (!this.#options.persistentScaling) this.#rangeStream = rangeStream();
 		for (let i = 0; i < this.values.length; i++) this.range = this.#rangeStream.seen(this.values[i]);
 	}
+	/**
+	* Sets the entire data series at once, replacing any existing data. If the number of values exceeds the `capacityLimit`, only the most recent values up to the limit are kept.
+	* @param values
+	*/
 	set(values) {
 		if (values.length > this.#options.capacityLimit) values = values.slice(values.length - this.#options.capacityLimit);
 		this.values = values;
 		this.#recompute();
 	}
+	/**
+	* Clear all data and reset range. If `persistentScaling` is _false_, also resets scaling to initial state.
+	* @returns _true_ if there was data to clear
+	*/
 	clear() {
+		const empty = this.values.length === 0;
 		this.values = [];
 		if (!this.#options.persistentScaling) this.#recompute();
+		return !empty;
 	}
 };
 //#endregion
@@ -6692,44 +6722,104 @@ let PlotMultiAxis = class PlotMultiAxis extends LitElement {
 	#seriesOrder;
 	#seriesSet;
 	#pendingStyles;
-	addData(nameOrData, value) {
-		if (typeof nameOrData === `object` && nameOrData !== null) {
-			const entries = Object.entries(nameOrData);
-			for (const [name, val] of entries) this.#addToSeries(name, val);
-		} else this.#addToSeries(nameOrData, value);
-		this.requestUpdate();
+	/**
+	* Adds a single data point
+	* @param name Series name
+	* @param value Value
+	* @param witholdRedraw If _false_ (default) plot is automatically redrawn
+	*/
+	addData(name, value, witholdRedraw = false) {
+		return this.#addToSeries(name, value, witholdRedraw);
 	}
+	setData(name, values, witholdRedraw = false) {
+		const [el, created] = this.#ensurePlot(name);
+		if (!this.#seriesSet.has(name)) {
+			this.#seriesSet.add(name);
+			this.#seriesOrder.push(name);
+		}
+		el.set(values, witholdRedraw);
+		if (created) this.requestUpdate();
+		return el;
+	}
+	setObjects(data, witholdRedraw = false) {
+		const entries = Object.entries(data);
+		for (const [name, vals] of entries) this.setData(name, vals, true);
+		if (witholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Calls redraw() on all subplots.
+	*/
+	redraw() {
+		for (const el of this.#instances.values()) el.redraw();
+	}
+	/**
+	* Adds a record of data points to the plot. Each key in the record corresponds to a series name, and its value is added as a data point to that series. If a series does not exist for a given key, it will be created.
+	* @param data Data to add
+	* @param witholdRedraw If _false_ (default) plot is automatically redrawn after adding the data. If _true_, plot is not redrawn automatically, and you need to call `redraw()` manually to update the plot after adding the data.
+	*/
+	addObject(data, witholdRedraw = false) {
+		const entries = Object.entries(data);
+		for (const [name, val] of entries) this.#addToSeries(name, val, true);
+		if (witholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Styles a series by setting CSS variables on the subplot.
+	* @param name Name of series
+	* @param styles Styles to apply
+	*/
 	styleSeries(name, styles) {
-		const normalized = {};
-		for (const [key, val] of Object.entries(styles)) normalized[key.startsWith(`--`) ? key : `--${key}`] = val;
+		const normalised = {};
+		for (const [key, val] of Object.entries(styles)) normalised[key.startsWith(`--`) ? key : `--${key}`] = val;
 		const el = this.#instances.get(name);
 		if (!el) {
-			this.#pendingStyles.set(name, normalized);
+			this.#pendingStyles.set(name, normalised);
 			return;
 		}
-		for (const [key, val] of Object.entries(normalized)) el.style.setProperty(key, val);
+		for (const [key, val] of Object.entries(normalised)) el.style.setProperty(key, val);
 	}
+	/**
+	* Clears data from all sub-plots
+	* @returns _True_ if there was data to clear
+	*/
 	clear() {
-		for (const el of this.#instances.values()) el.clear();
+		let cleared = false;
+		for (const el of this.#instances.values()) cleared = cleared || el.clear();
+		return cleared;
 	}
+	/**
+	* Clears data from a given series
+	* @param name Series name
+	* @returns _True_ if series was found and had data
+	*/
 	clearSeries(name) {
 		const el = this.#instances.get(name);
-		if (el) el.clear();
+		if (el) {
+			el.clear();
+			return true;
+		}
+		return false;
 	}
+	/**
+	* Returns a copy of the series names
+	*/
 	get series() {
 		return [...this.#seriesOrder];
 	}
-	#addToSeries(name, value) {
-		const el = this.#ensurePlot(name);
+	#addToSeries(name, valueOrValues, withholdRedraw = false) {
+		const [el, created] = this.#ensurePlot(name);
 		if (!this.#seriesSet.has(name)) {
 			this.#seriesSet.add(name);
 			this.#seriesOrder.push(name);
 		}
-		el.add(value);
+		el.add(valueOrValues, withholdRedraw);
+		if (created) this.requestUpdate();
+		return el;
 	}
 	#ensurePlot(name) {
 		let el = this.#instances.get(name);
-		if (el) return el;
+		if (el) return [el, false];
 		el = document.createElement(`ixfx-plot-single-axis`);
 		el.tooltips = false;
 		this.#instances.set(name, el);
@@ -6758,7 +6848,7 @@ let PlotMultiAxis = class PlotMultiAxis extends LitElement {
 		el.addEventListener(`plot-pointer-leave`, () => {
 			this.#onSubPlotPointerLeave();
 		});
-		return el;
+		return [el, true];
 	}
 	#onSubPlotPointerMove(clientX, clientY, index) {
 		if (index < 0) {
@@ -6793,7 +6883,7 @@ let PlotMultiAxis = class PlotMultiAxis extends LitElement {
         part="container"
         style=${gridStyle}
       >
-        ${repeat(this.#seriesOrder, (name) => name, (name) => this.#ensurePlot(name))}
+        ${repeat(this.#seriesOrder, (name) => name, (name) => this.#ensurePlot(name)[0])}
       </div>
     `;
 	}
@@ -6859,10 +6949,10 @@ PlotMultiAxis = __decorate([safeCustomElement(`ixfx-plot-multi-axis`)], PlotMult
 let PlotHistogram = class PlotHistogram extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.orientation = "horizontal";
+		this.orientation = `horizontal`;
 		this.resolution = .1;
 		this.capacity = 100;
-		this.title = "";
+		this.title = ``;
 		this.paused = false;
 		this._width = 100;
 		this._height = 40;
@@ -6876,7 +6966,7 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 	#hasProgrammaticData;
 	#parseDeclarativeData(text) {
 		if (!text) return [];
-		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !isNaN(n));
+		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !Number.isNaN(n));
 	}
 	add(v) {
 		this.#hasProgrammaticData = true;
@@ -6903,12 +6993,12 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 			this._height = e.contentRect.height;
 		}).observe(this);
 		if (!this.#hasProgrammaticData) {
-			const data = this.#parseDeclarativeData(this.textContent ?? "");
+			const data = this.#parseDeclarativeData(this.textContent ?? ``);
 			if (data.length > 0) this.#series.set(data);
 		}
 	}
 	updated(changed) {
-		if (changed.has("capacity")) {
+		if (changed.has(`capacity`)) {
 			const old = [...this.#series.values];
 			this.#series = new PlotDataSeries({
 				capacityLimit: this.capacity,
@@ -6921,19 +7011,19 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		return getComputedStyle(this).getPropertyValue(name).trim();
 	}
 	#getGapPx() {
-		const val = this.#readCssVar("--plot-histogram-gap");
-		if (val === "") return 1;
-		const parsed = parseFloat(val);
-		return isFinite(parsed) ? Math.max(0, parsed) : 1;
+		const val = this.#readCssVar(`--plot-histogram-gap`);
+		if (val === ``) return 1;
+		const parsed = Number.parseFloat(val);
+		return Number.isFinite(parsed) ? Math.max(0, parsed) : 1;
 	}
 	#getBarLengthOverride() {
-		const val = this.#readCssVar("--plot-histogram-bar-length");
-		if (val === "" || val === "auto") return null;
-		const parsed = parseFloat(val);
-		return isFinite(parsed) ? Math.max(0, Math.min(1, parsed)) : null;
+		const val = this.#readCssVar(`--plot-histogram-bar-length`);
+		if (val === `` || val === `auto`) return null;
+		const parsed = Number.parseFloat(val);
+		return Number.isFinite(parsed) ? Math.max(0, Math.min(1, parsed)) : null;
 	}
 	#emitClick(i, valueMin, valueMax, relativeValue) {
-		this.dispatchEvent(new CustomEvent("plot-bucket-click", {
+		this.dispatchEvent(new CustomEvent(`plot-bucket-click`, {
 			detail: {
 				bucketIndex: i,
 				valueMin,
@@ -6948,7 +7038,7 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		const { values, range } = this.#series;
 		const w = this._width;
 		const h = this._height;
-		const isHorizontal = this.orientation === "horizontal";
+		const isHorizontal = this.orientation === `horizontal`;
 		const padding = Math.min(4, (isHorizontal ? h : w) * .05);
 		const dataMin = this.min ?? range.min;
 		const dataSpan = (this.max ?? range.max) - dataMin || 1;
@@ -6958,7 +7048,7 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		const bucketSize = availableMain / bucketCount;
 		const gap = this.#getGapPx();
 		const barLengthOverride = this.#getBarLengthOverride();
-		const buckets = new Array(bucketCount).fill(0);
+		const buckets = Array.from({ length: bucketCount }).fill(0);
 		for (const v of values) {
 			const normalized = (v - dataMin) / dataSpan;
 			const index = Math.min(bucketCount - 1, Math.max(0, Math.floor(normalized * bucketCount)));
@@ -6992,7 +7082,7 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 			}
 		})}
         ${this.title ? svg`<text x=${padding + 2} y=${padding + Math.min(10, h * .6)}
-          class="overlay-text" fill=${"var(--plot-text, var(--surface-2-text, #fff))"}
+          class="overlay-text" fill=${`var(--plot-text, var(--surface-2-text, #fff))`}
           style="opacity: 0.6">${this.title}</text>` : svg``}
       </svg>
     `;
@@ -7033,7 +7123,7 @@ let PlotHistogram = class PlotHistogram extends LitElement {
   `;
 	}
 };
-__decorate([property({ attribute: "orientation" })], PlotHistogram.prototype, "orientation", void 0);
+__decorate([property({ attribute: `orientation` })], PlotHistogram.prototype, "orientation", void 0);
 __decorate([property({ type: Number })], PlotHistogram.prototype, "resolution", void 0);
 __decorate([property({ type: Number })], PlotHistogram.prototype, "min", void 0);
 __decorate([property({ type: Number })], PlotHistogram.prototype, "max", void 0);
@@ -7045,7 +7135,7 @@ __decorate([property({
 })], PlotHistogram.prototype, "paused", void 0);
 __decorate([state()], PlotHistogram.prototype, "_width", void 0);
 __decorate([state()], PlotHistogram.prototype, "_height", void 0);
-PlotHistogram = __decorate([safeCustomElement("ixfx-plot-histogram")], PlotHistogram);
+PlotHistogram = __decorate([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
 //#endregion
 //#region src/plots/single-axis.ts
 function buildLinePath(points) {
@@ -7160,9 +7250,9 @@ let PlotSingleAxis = class PlotSingleAxis extends LitElement {
 			persistentScaling: true
 		});
 		this.#hasProgrammaticData = false;
-		this.valueFormat = (v) => v ? v.toFixed(2) : ``;
 		this.#lastClientX = null;
 		this.#lastClientY = null;
+		this.valueFormat = (v) => v ? v.toFixed(2) : ``;
 		this.#onPointerMove = (e) => {
 			this.#lastClientX = e.clientX;
 			this.#lastClientY = e.clientY;
@@ -7203,41 +7293,85 @@ let PlotSingleAxis = class PlotSingleAxis extends LitElement {
 	}
 	#series;
 	#hasProgrammaticData;
+	#lastClientX;
+	#lastClientY;
 	#parseDeclarativeData(text) {
 		if (!text) return [];
-		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !isNaN(n));
+		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !Number.isNaN(n));
 	}
+	/**
+	* Get all values in the data series as a readonly array.
+	*/
 	get values() {
 		return this.#series.values;
 	}
+	/**
+	* Get length of data series
+	*/
 	get dataCount() {
 		return this.#series.values.length;
 	}
+	/**
+	* Get value at specific index of data series
+	* @param index
+	*/
 	getValueAt(index) {
 		return this.#series.values[index];
 	}
+	/**
+	* Get value index based on client X position
+	* @param clientX
+	*/
 	getIndexFromClientX(clientX) {
 		return this.#getIndexFromX(clientX, this.getBoundingClientRect());
 	}
-	#lastClientX;
-	#lastClientY;
-	add(v) {
+	/**
+	* Adds a value to the data series.
+	*
+	* Pass `withholdRedraw = true` to prevent automatic redraw after adding the value. In this case, call `redraw()` manually after adding all values to update the plot.
+	*
+	* Use {@link set} to replace the entire data series at once.
+	* @param valueOrValues Single value, or several values
+	* @param withholdRedraw If _false_ (default) plot is automatically redrawn
+	*/
+	add(valueOrValues, withholdRedraw = false) {
 		this.#hasProgrammaticData = true;
-		this.#series.add(v);
+		this.#series.add(valueOrValues);
 		if (this.paused) return;
+		if (withholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Redraws the plot.
+	* Normally not needed, unless add() is called with withholdRedraw = true, or styleSeries() is used to update series styles.
+	*/
+	redraw() {
 		this.requestUpdate();
 		this.#updateTooltipAtLastPos();
 	}
-	set(values) {
+	/**
+	* Sets the entire data for a series at once, replacing contents.
+	*
+	* Use add() to add values one by one.
+	*
+	* Pass `withholdRedraw = true` to prevent automatic redraw after setting the values. In this case, call `redraw()` manually after setting the values to update the plot.
+	* @param values Values
+	* @param withholdRedraw If _false_ (default) plot is automatically redrawn
+	*/
+	set(values, withholdRedraw = false) {
 		this.#hasProgrammaticData = true;
 		this.#series.set(values);
 		if (this.paused) return;
-		this.requestUpdate();
-		this.#updateTooltipAtLastPos();
+		if (withholdRedraw) return;
+		this.redraw();
 	}
+	/**
+	* Clears all data and redraws
+	*/
 	clear() {
-		this.#series.clear();
+		const result = this.#series.clear();
 		this.requestUpdate();
+		return result;
 	}
 	firstUpdated(_changed) {
 		this._width = this.clientWidth || 100;
@@ -7712,4 +7846,4 @@ PlotXyAxis = __decorate([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
 //#endregion
 export { isEqualValueDefault as _, PlotDataSeries as a, parseColourScaleAttr as c, QueueMutable as d, isPrimitive as f, isEqualDefault as g, defaultComparer as h, PlotMultiAxis as i, readBaseColour as l, __exportAll$1 as m, PlotSingleAxis as n, applyAgeModification as o, toStringAbbreviate as p, PlotHistogram as r, computeColour as s, PlotXyAxis as t, last$2 as u, isEqualValueIgnoreOrder as v };
 
-//# sourceMappingURL=xy-axis-CK64haaK.js.map
+//# sourceMappingURL=xy-axis-DbPezP6A.js.map