@ixfx/components 0.4.1 → 0.4.2

package/bundle/index.js

@@ -1896,6 +1896,174 @@ __decorate$1([r$1()], AcTextElement.prototype, "_isOpen", void 0);
 __decorate$1([r$1()], AcTextElement.prototype, "_isLoading", void 0);
 AcTextElement = __decorate$1([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
 //#endregion
+//#region src/common/data-controller.ts
+function isAsyncIterable$1(v) {
+	return typeof v === `object` && v !== null && Symbol.asyncIterator in v;
+}
+/**
+* Lit ReactiveController that manages one active data provider request at a time.
+*
+* Handles all three provider return modes (sync, async one-shot, streaming),
+* tracks progress, and cancels in-flight requests when a new one starts.
+* Calls host.requestUpdate() on every state change so the component re-renders
+* automatically.
+*
+* @typeParam TQuery - The query/scope type passed to the provider.
+* @typeParam TItem  - The item type produced by the provider.
+*
+* @example
+* ```ts
+* class MyList extends LitElement {
+*   #data = new DataController<string, MyItem>(this, myProvider);
+*
+*   protected override render() {
+*     return html`
+*       ${this.#data.loading ? html`<span>Loading…</span>` : nothing}
+*       ${this.#data.items.map(item => html`<div>${item.label}</div>`)}
+*     `;
+*   }
+* }
+* ```
+*/
+var DataController = class {
+	#host;
+	#opts;
+	#provider;
+	#abort;
+	#items = [];
+	#loading = false;
+	#loaded = 0;
+	#total;
+	#error;
+	constructor(host, provider, options) {
+		this.#host = host;
+		this.#provider = provider;
+		this.#opts = {
+			clearOnRequest: options?.clearOnRequest ?? true,
+			onError: options?.onError
+		};
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {
+		this.cancel();
+	}
+	get provider() {
+		return this.#provider;
+	}
+	set provider(value) {
+		this.#provider = value;
+	}
+	/** The currently accumulated items. */
+	get items() {
+		return this.#items;
+	}
+	/** True while a provider call is pending or a stream is still open. */
+	get loading() {
+		return this.#loading;
+	}
+	/** Number of items accumulated so far in the current request. */
+	get loaded() {
+		return this.#loaded;
+	}
+	/**
+	* Provider's latest estimate of the total number of items expected.
+	* Undefined when the provider has not reported a total.
+	*/
+	get total() {
+		return this.#total;
+	}
+	/**
+	* Progress as a 0–1 value, or undefined when total is unknown.
+	* Derived from loaded / total.
+	*/
+	get progress() {
+		if (this.#total === void 0 || this.#total === 0) return void 0;
+		return Math.min(this.#loaded / this.#total, 1);
+	}
+	/** The last error thrown by the provider, or undefined if the last request succeeded. */
+	get error() {
+		return this.#error;
+	}
+	/**
+	* Cancel any in-flight request and start a new one.
+	* Clears items immediately unless clearOnRequest was set to false.
+	*/
+	request(query) {
+		this.cancel();
+		if (!this.#provider) return;
+		if (this.#opts.clearOnRequest) {
+			this.#items = [];
+			this.#loaded = 0;
+		}
+		this.#total = void 0;
+		this.#error = void 0;
+		this.#loading = true;
+		this.#host.requestUpdate();
+		this.#abort = new AbortController();
+		const { signal } = this.#abort;
+		this.#consume(this.#provider(query, signal), signal);
+	}
+	/** Abort any in-flight request without issuing a new one. */
+	cancel() {
+		this.#abort?.abort();
+		this.#abort = void 0;
+		if (this.#loading) {
+			this.#loading = false;
+			this.#host.requestUpdate();
+		}
+	}
+	#consume(result, signal) {
+		if (Array.isArray(result)) {
+			this.#applyBatch({ items: result }, signal);
+			this.#loading = false;
+			this.#host.requestUpdate();
+		} else if (isAsyncIterable$1(result)) this.#consumeStream(result, signal);
+		else result.then((items) => {
+			if (signal.aborted) return;
+			this.#applyBatch({ items }, signal);
+			this.#loading = false;
+			this.#host.requestUpdate();
+		}, (err) => {
+			if (signal.aborted) return;
+			this.#handleError(err);
+		});
+	}
+	async #consumeStream(stream, signal) {
+		try {
+			for await (const batch of stream) {
+				if (signal.aborted) return;
+				this.#applyBatch(batch, signal);
+				this.#host.requestUpdate();
+			}
+		} catch (err) {
+			if (signal.aborted) return;
+			this.#handleError(err);
+			return;
+		}
+		if (!signal.aborted) {
+			this.#loading = false;
+			this.#host.requestUpdate();
+		}
+	}
+	#applyBatch(batch, _signal) {
+		if (batch.replace) {
+			this.#items = [...batch.items];
+			this.#loaded = batch.items.length;
+		} else {
+			this.#items = [...this.#items, ...batch.items];
+			this.#loaded = this.#items.length;
+		}
+		if (batch.total !== void 0) this.#total = batch.total;
+	}
+	#handleError(err) {
+		this.#error = err;
+		this.#loading = false;
+		this.#opts.onError?.(err);
+		this.#host.requestUpdate();
+	}
+};
+//#endregion
 //#region src/incr-search/fuzzy.ts
 function defaultSelector(item) {
 	if (typeof item === `string`) return item;
@@ -2204,174 +2372,6 @@ function createElementIncrSearch(opts) {
 	};
 }
 //#endregion
-//#region src/common/data-controller.ts
-function isAsyncIterable$1(v) {
-	return typeof v === `object` && v !== null && Symbol.asyncIterator in v;
-}
-/**
-* Lit ReactiveController that manages one active data provider request at a time.
-*
-* Handles all three provider return modes (sync, async one-shot, streaming),
-* tracks progress, and cancels in-flight requests when a new one starts.
-* Calls host.requestUpdate() on every state change so the component re-renders
-* automatically.
-*
-* @typeParam TQuery - The query/scope type passed to the provider.
-* @typeParam TItem  - The item type produced by the provider.
-*
-* @example
-* ```ts
-* class MyList extends LitElement {
-*   #data = new DataController<string, MyItem>(this, myProvider);
-*
-*   protected override render() {
-*     return html`
-*       ${this.#data.loading ? html`<span>Loading…</span>` : nothing}
-*       ${this.#data.items.map(item => html`<div>${item.label}</div>`)}
-*     `;
-*   }
-* }
-* ```
-*/
-var DataController = class {
-	#host;
-	#opts;
-	#provider;
-	#abort;
-	#items = [];
-	#loading = false;
-	#loaded = 0;
-	#total;
-	#error;
-	constructor(host, provider, options) {
-		this.#host = host;
-		this.#provider = provider;
-		this.#opts = {
-			clearOnRequest: options?.clearOnRequest ?? true,
-			onError: options?.onError
-		};
-		host.addController(this);
-	}
-	hostConnected() {}
-	hostDisconnected() {
-		this.cancel();
-	}
-	get provider() {
-		return this.#provider;
-	}
-	set provider(value) {
-		this.#provider = value;
-	}
-	/** The currently accumulated items. */
-	get items() {
-		return this.#items;
-	}
-	/** True while a provider call is pending or a stream is still open. */
-	get loading() {
-		return this.#loading;
-	}
-	/** Number of items accumulated so far in the current request. */
-	get loaded() {
-		return this.#loaded;
-	}
-	/**
-	* Provider's latest estimate of the total number of items expected.
-	* Undefined when the provider has not reported a total.
-	*/
-	get total() {
-		return this.#total;
-	}
-	/**
-	* Progress as a 0–1 value, or undefined when total is unknown.
-	* Derived from loaded / total.
-	*/
-	get progress() {
-		if (this.#total === void 0 || this.#total === 0) return void 0;
-		return Math.min(this.#loaded / this.#total, 1);
-	}
-	/** The last error thrown by the provider, or undefined if the last request succeeded. */
-	get error() {
-		return this.#error;
-	}
-	/**
-	* Cancel any in-flight request and start a new one.
-	* Clears items immediately unless clearOnRequest was set to false.
-	*/
-	request(query) {
-		this.cancel();
-		if (!this.#provider) return;
-		if (this.#opts.clearOnRequest) {
-			this.#items = [];
-			this.#loaded = 0;
-		}
-		this.#total = void 0;
-		this.#error = void 0;
-		this.#loading = true;
-		this.#host.requestUpdate();
-		this.#abort = new AbortController();
-		const { signal } = this.#abort;
-		this.#consume(this.#provider(query, signal), signal);
-	}
-	/** Abort any in-flight request without issuing a new one. */
-	cancel() {
-		this.#abort?.abort();
-		this.#abort = void 0;
-		if (this.#loading) {
-			this.#loading = false;
-			this.#host.requestUpdate();
-		}
-	}
-	#consume(result, signal) {
-		if (Array.isArray(result)) {
-			this.#applyBatch({ items: result }, signal);
-			this.#loading = false;
-			this.#host.requestUpdate();
-		} else if (isAsyncIterable$1(result)) this.#consumeStream(result, signal);
-		else result.then((items) => {
-			if (signal.aborted) return;
-			this.#applyBatch({ items }, signal);
-			this.#loading = false;
-			this.#host.requestUpdate();
-		}, (err) => {
-			if (signal.aborted) return;
-			this.#handleError(err);
-		});
-	}
-	async #consumeStream(stream, signal) {
-		try {
-			for await (const batch of stream) {
-				if (signal.aborted) return;
-				this.#applyBatch(batch, signal);
-				this.#host.requestUpdate();
-			}
-		} catch (err) {
-			if (signal.aborted) return;
-			this.#handleError(err);
-			return;
-		}
-		if (!signal.aborted) {
-			this.#loading = false;
-			this.#host.requestUpdate();
-		}
-	}
-	#applyBatch(batch, _signal) {
-		if (batch.replace) {
-			this.#items = [...batch.items];
-			this.#loaded = batch.items.length;
-		} else {
-			this.#items = [...this.#items, ...batch.items];
-			this.#loaded = this.#items.length;
-		}
-		if (batch.total !== void 0) this.#total = batch.total;
-	}
-	#handleError(err) {
-		this.#error = err;
-		this.#loading = false;
-		this.#opts.onError?.(err);
-		this.#host.requestUpdate();
-	}
-};
-//#endregion
 //#region src/ac-token/ac-token.ts
 const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
 function makeLruCache(maxSize) {
@@ -2708,7 +2708,7 @@ let AcTokenElement = class AcTokenElement extends i$4 {
 			const hit = this.#cache.get(query);
 			if (hit !== void 0) return this.#filterUsed(hit);
 			const result = raw(query, signal);
-			if (Symbol.asyncIterator in Object(result)) return result;
+			if (Symbol.asyncIterator in new Object(result)) return result;
 			if (Array.isArray(result)) {
 				this.#cache.set(query, result);
 				return this.#filterUsed(result);
@@ -20769,7 +20769,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$4 {
 				composed: true
 			}));
 			this.requestUpdate();
-		} catch (err) {
+		} catch {
 			if (controller.signal.aborted) return;
 			node.children = [];
 			this.#pendingNode = void 0;
@@ -23707,7 +23707,7 @@ let GroupedItemListerElement = class GroupedItemListerElement extends i$4 {
 			this.#subComponents.delete(key);
 		}
 		for (const [key, items] of groups) {
-			const panel = [...this.children].find((el) => el instanceof HTMLElement && el.dataset[`groupKey`] === key);
+			const panel = [...this.children].find((el) => el instanceof HTMLElement && el.dataset.groupKey === key);
 			if (!panel) continue;
 			let subEl = this.#subComponents.get(key);
 			if (!subEl) {
@@ -24297,7 +24297,7 @@ let TreeBaseElement = class TreeBaseElement extends i$4 {
 				composed: true
 			}));
 			this.requestUpdate();
-		} catch (err) {
+		} catch {
 			if (controller.signal.aborted) return;
 			node.children = [];
 			this.#pendingNode = void 0;
@@ -30790,9 +30790,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();
@@ -30806,11 +30817,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();
 		}
 	}
@@ -30818,14 +30838,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
@@ -30923,44 +30953,104 @@ let PlotMultiAxis = class PlotMultiAxis extends i$4 {
 	#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);
@@ -30989,7 +31079,7 @@ let PlotMultiAxis = class PlotMultiAxis extends i$4 {
 		el.addEventListener(`plot-pointer-leave`, () => {
 			this.#onSubPlotPointerLeave();
 		});
-		return el;
+		return [el, true];
 	}
 	#onSubPlotPointerMove(clientX, clientY, index) {
 		if (index < 0) {
@@ -31024,7 +31114,7 @@ let PlotMultiAxis = class PlotMultiAxis extends i$4 {
         part="container"
         style=${gridStyle}
       >
-        ${c(this.#seriesOrder, (name) => name, (name) => this.#ensurePlot(name))}
+        ${c(this.#seriesOrder, (name) => name, (name) => this.#ensurePlot(name)[0])}
       </div>
     `;
 	}
@@ -31090,10 +31180,10 @@ PlotMultiAxis = __decorate$1([safeCustomElement(`ixfx-plot-multi-axis`)], PlotMu
 let PlotHistogram = class PlotHistogram extends i$4 {
 	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;
@@ -31107,7 +31197,7 @@ let PlotHistogram = class PlotHistogram extends i$4 {
 	#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;
@@ -31134,12 +31224,12 @@ let PlotHistogram = class PlotHistogram extends i$4 {
 			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,
@@ -31152,19 +31242,19 @@ let PlotHistogram = class PlotHistogram extends i$4 {
 		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,
@@ -31179,7 +31269,7 @@ let PlotHistogram = class PlotHistogram extends i$4 {
 		const { values, range } = this.#series;
 		const w$7 = this._width;
 		const h = this._height;
-		const isHorizontal = this.orientation === "horizontal";
+		const isHorizontal = this.orientation === `horizontal`;
 		const padding = Math.min(4, (isHorizontal ? h : w$7) * .05);
 		const dataMin = this.min ?? range.min;
 		const dataSpan = (this.max ?? range.max) - dataMin || 1;
@@ -31189,7 +31279,7 @@ let PlotHistogram = class PlotHistogram extends i$4 {
 		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)));
@@ -31223,7 +31313,7 @@ let PlotHistogram = class PlotHistogram extends i$4 {
 			}
 		})}
         ${this.title ? w`<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>` : w``}
       </svg>
     `;
@@ -31264,7 +31354,7 @@ let PlotHistogram = class PlotHistogram extends i$4 {
   `;
 	}
 };
-__decorate$1([n$2({ attribute: "orientation" })], PlotHistogram.prototype, "orientation", void 0);
+__decorate$1([n$2({ attribute: `orientation` })], PlotHistogram.prototype, "orientation", void 0);
 __decorate$1([n$2({ type: Number })], PlotHistogram.prototype, "resolution", void 0);
 __decorate$1([n$2({ type: Number })], PlotHistogram.prototype, "min", void 0);
 __decorate$1([n$2({ type: Number })], PlotHistogram.prototype, "max", void 0);
@@ -31276,7 +31366,7 @@ __decorate$1([n$2({
 })], PlotHistogram.prototype, "paused", void 0);
 __decorate$1([r$1()], PlotHistogram.prototype, "_width", void 0);
 __decorate$1([r$1()], PlotHistogram.prototype, "_height", void 0);
-PlotHistogram = __decorate$1([safeCustomElement("ixfx-plot-histogram")], PlotHistogram);
+PlotHistogram = __decorate$1([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
 //#endregion
 //#region src/plots/single-axis.ts
 function buildLinePath(points) {
@@ -31391,9 +31481,9 @@ let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 			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;
@@ -31434,41 +31524,85 @@ let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 	}
 	#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;