@ixfx/components 0.1.5 → 0.2.1

package/bundle/index.js

@@ -1,9 +1,10 @@
-import { Circles, degreeToRadian, radianArc, radianToDegree, radiansSum } from "ixfx/geometry.js";
+import { Circles, Rects, degreeToRadian, radianArc, radianToDegree, radiansSum } from "ixfx/geometry.js";
 import * as Numbers from "ixfx/numbers.js";
 import { clamp } from "ixfx/numbers.js";
 import { getCssVariable, getCssVariablesWithFallback } from "ixfx/dom.js";
 import { Trees } from "ixfx/collections.js";
 import { CanvasHelper, Colour, Drawing } from "ixfx/visual.js";
+import * as Arrays from "ixfx/arrays.js";
 import { Pathed } from "ixfx";
 
 //#region node_modules/@lit/reactive-element/css-tag.js
@@ -2227,31 +2228,139 @@ SplitLayoutElement = __decorate([t("ixfx-split-layout")], SplitLayoutElement);
 
 //#endregion
 //#region src/charts/plot.ts
+const rangeIsEqual = (a$2, b$2) => {
+	if (a$2 === void 0 || b$2 === void 0) return false;
+	return a$2.max === b$2.max && a$2.min === b$2.min;
+};
+var PlotAxis = class {
+	bounds = `auto`;
+	#currentScalerRange;
+	#persistentScale = Numbers.rangeInit();
+	#currentScaler = (v$2) => v$2;
+	constructor(name) {
+		this.name = name;
+	}
+	humanFormatValue(value) {
+		if (value.length === 0) return ``;
+		const v$2 = value[0];
+		if (v$2 < 2) return v$2.toFixed(2);
+		return v$2.toString();
+	}
+	getRange(series) {
+		if (this.bounds === `auto`) return this.computeActualRange(series);
+		if (this.bounds === `auto-persistent`) {
+			const r$6 = this.computeActualRange(series);
+			this.#persistentScale = Numbers.rangeMergeRange(r$6, this.#persistentScale);
+			return this.#persistentScale;
+		}
+		return this.bounds;
+	}
+	getCurrentRange() {
+		return this.#currentScalerRange;
+	}
+	getValueScaler(series) {
+		const r$6 = this.getRange(series);
+		if (!rangeIsEqual(r$6, this.#currentScalerRange)) {
+			this.#currentScalerRange = r$6;
+			this.#currentScaler = Numbers.scaler(r$6.min, r$6.max, 0, 1);
+		}
+		return this.#currentScaler;
+	}
+	computeActualRange(seriesOnAxis, column = 0) {
+		let min = Number.MAX_SAFE_INTEGER;
+		let max = Number.MIN_SAFE_INTEGER;
+		let count = 0;
+		for (const s$5 of seriesOnAxis) {
+			for (const [v$2, _index] of s$5.getValuesForColumn(column)) {
+				if (typeof v$2 !== `number`) continue;
+				if (Number.isNaN(v$2)) continue;
+				if (v$2 < min) min = v$2;
+				if (v$2 > max) max = v$2;
+			}
+			count++;
+		}
+		return {
+			min,
+			max
+		};
+	}
+};
 let PlotElement = class PlotElement$1 extends i {
-	streaming = true;
 	hideLegend = false;
-	maxLength = 500;
-	dataWidth = 5;
-	fixedMax = NaN;
-	fixedMin = NaN;
-	lineWidth = 2;
 	renderStyle = `dot`;
-	manualDraw = false;
 	padding = 5;
+	primaryAxis = new PlotAxis(`primary`);
+	secondaryAxis = new PlotAxis(`secondary`);
 	paused = false;
+	plotAreaFormat = {
+		fill: { type: `none` },
+		outline: { type: `none` }
+	};
+	/**
+	* Settings used for automatically generating series colour
+	*/
+	automaticSeriesColour = {
+		saturation: 1,
+		lightness: .5,
+		alpha: 1
+	};
+	seriesDefault = {};
 	#series = /* @__PURE__ */ new Map();
 	#canvas;
 	#drawing;
 	#legendColour = ``;
-	#hue = 0;
+	#autoSeriesColour = 0;
+	#hitboxes = [];
+	#seriesFormatting = /* @__PURE__ */ new Map();
+	#swatchSize = 10;
 	canvasEl = e$1();
-	seriesRanges = /* @__PURE__ */ new Map();
+	tooltipEl = e$1();
+	seriesColourGenerate = (_seriesName) => {
+		const c$6 = Colour.goldenAngleColour(this.#autoSeriesColour, this.automaticSeriesColour.saturation, this.automaticSeriesColour.lightness, this.automaticSeriesColour.alpha);
+		this.#autoSeriesColour++;
+		return c$6;
+	};
 	get series() {
 		return [...this.#series.values()];
 	}
 	get seriesCount() {
 		return this.#series.size;
 	}
+	getSeriesFormatting(seriesName, createIfNeeded) {
+		let f$4 = this.#seriesFormatting.get(seriesName);
+		if (!f$4 && createIfNeeded) {
+			f$4 = {
+				axis: `primary`,
+				fill: {
+					colour: this.seriesColourGenerate(seriesName),
+					type: `solid`
+				},
+				outline: { type: `none` },
+				bar: { gapWidth: 10 },
+				dot: {
+					gapWidth: 0,
+					radius: `automatic`
+				},
+				line: {
+					width: 2,
+					cap: `round`,
+					join: `round`
+				}
+			};
+			this.#seriesFormatting.set(seriesName, f$4);
+		}
+		return f$4;
+	}
+	setSeriesFormatting(seriesName, formatting) {
+		let existing = this.getSeriesFormatting(seriesName, true);
+		const combined = {
+			...existing,
+			...formatting
+		};
+		combined.fill = resolveFillDrawStyle(combined.fill);
+		combined.outline = resolveOutlineDrawStyle(combined.outline);
+		this.#seriesFormatting.set(seriesName, combined);
+	}
 	/**
 	* Returns a `PlotElement` instance based on a query
 	* ```js
@@ -2298,6 +2407,7 @@ let PlotElement = class PlotElement$1 extends i {
 	*/
 	clear() {
 		this.#series.clear();
+		this.#autoSeriesColour = 0;
 	}
 	/**
 	* Keeps all series, but deletes their data
@@ -2305,8 +2415,45 @@ let PlotElement = class PlotElement$1 extends i {
 	clearData() {
 		for (const s$5 of this.#series.values()) s$5.clear();
 	}
-	render() {
-		return x`<canvas ${n$1(this.canvasEl)}></canvas>`;
+	#lastPointerPosition;
+	#onPointerLeave() {
+		this.#lastPointerPosition = void 0;
+		this.#hideTooltip();
+	}
+	#onPointerMove(event) {
+		this.#lastPointerPosition = {
+			x: event.offsetX,
+			screenX: event.x,
+			y: event.offsetY,
+			screenY: event.y
+		};
+		this.#updateToolTip();
+	}
+	#updateToolTip() {
+		if (!this.#lastPointerPosition) return;
+		for (const hb of this.#hitboxes) if (Rects.intersectsPoint(hb, this.#lastPointerPosition)) {
+			if (hb.value) this.#setTooltip(hb.series.humanFormatValue(hb.value));
+			else this.#setTooltip(``);
+			return;
+		}
+		this.#hideTooltip();
+	}
+	#hideTooltip() {
+		const v$2 = this.tooltipEl.value;
+		if (!v$2) return;
+		v$2.classList.add(`hidden`);
+	}
+	#setTooltip(innerHtml) {
+		const v$2 = this.tooltipEl.value;
+		if (!v$2) return;
+		const pos = this.#lastPointerPosition;
+		v$2.classList.remove(`hidden`);
+		const offset = 10;
+		v$2.innerHTML = innerHtml;
+		if (pos) {
+			v$2.style.left = `${pos.screenX + offset}px`;
+			v$2.style.top = `${pos.screenY + offset}px`;
+		}
 	}
 	#setupCanvas() {
 		if (this.#canvas !== void 0) return this.#canvas;
@@ -2326,48 +2473,46 @@ let PlotElement = class PlotElement$1 extends i {
 			if (!c$6) return;
 			const entry = event[0];
 			c$6.setLogicalSize(entry.contentRect);
+			if (this.#hasDirty()) this.draw();
 		});
 		ro.observe(this);
 		this.updateColours();
 	}
+	#hasDirty() {
+		for (const s$5 of this.series.values()) if (s$5.isDirty) return true;
+		return false;
+	}
 	updateColours() {
 		this.#legendColour = getCssVariable(`legend-fg`, `black`);
 	}
-	plot(value, seriesName = ``, skipDrawing = false) {
-		if (typeof value !== "number") throw new TypeError(`Can only add numbers. Got: ${typeof value}`);
-		let s$5 = this.#series.get(seriesName.toLowerCase());
-		if (s$5 === void 0) {
-			s$5 = new PlotSeries(seriesName, this.colourGenerator(seriesName), this);
-			this.#series.set(seriesName.toLowerCase(), s$5);
-		}
-		s$5.push(value);
-		if (!this.manualDraw && !skipDrawing) this.draw();
-		return s$5;
-	}
-	plotSeries(values, seriesName = ``, skipDrawing = false) {
+	setRawValues(values, seriesName, automaticallyDraw) {
 		if (!Array.isArray(values)) throw new TypeError(`Param 'values' is not an array`);
-		let s$5 = this.#series.get(seriesName.toLowerCase());
-		if (s$5 === void 0) {
-			s$5 = new PlotSeries(seriesName, this.colourGenerator(seriesName), this);
-			this.#series.set(seriesName.toLowerCase(), s$5);
-		}
-		s$5.setValues(values);
-		if (!this.manualDraw && !skipDrawing) this.draw();
+		let s$5 = this.getOrCreateSeries(seriesName);
+		s$5.setRawValues(values, automaticallyDraw);
 		return s$5;
 	}
 	/**
-	* Draw a set of key-value pairs as a batch.
+	* Treats each property of an object as the series name
 	* @param value 
+	* @param automaticallyDraw 
 	*/
-	plotObject(value) {
-		for (const p$3 of Pathed.getPathsAndData(value, true)) this.plot(p$3.value, p$3.path, true);
-		this.draw();
+	appendObjectBySeries(value, automaticallyDraw) {
+		for (const p$3 of Pathed.getPathsAndData(value, true)) {
+			const v$2 = p$3.value;
+			if (typeof v$2 === `number`) this.appendRawValues(v$2, p$3.path, false);
+		}
+		if (automaticallyDraw) this.draw();
 	}
-	colourGenerator(_series) {
-		const c$6 = Colour.HslSpace.scalar(this.#hue, .9, .4);
-		this.#hue = Numbers.wrap(this.#hue + .1);
-		return c$6;
+	appendRawValues(values, seriesName, automaticallyDraw) {
+		if (!Array.isArray(values)) values = [values];
+		let s$5 = this.getOrCreateSeries(seriesName);
+		for (const v$2 of values) s$5.pushValue(v$2, false);
+		if (automaticallyDraw) this.draw();
 	}
+	/**
+	* Draw a set of key-value pairs as a batch.
+	* @param value 
+	*/
 	draw() {
 		if (this.paused) return;
 		const c$6 = this.#canvas;
@@ -2384,14 +2529,12 @@ let PlotElement = class PlotElement$1 extends i {
 			width: axisYwidth,
 			height: plotHeight
 		};
-		const cp = this.computePlot(c$6, plotHeight, cy.width, padding);
+		const plotDataArea = this.calculatePlotDataArea(c$6, plotHeight, cy.width, padding);
 		const cl = {
 			...clLegend.bounds,
 			x: cy.width,
-			y: cp.y + cp.height + padding
+			y: plotDataArea.y + plotDataArea.height + padding
 		};
-		let globalScaler;
-		if (!Number.isNaN(this.fixedMax) && !Number.isNaN(this.fixedMin)) globalScaler = Numbers.scaler(this.fixedMin, this.fixedMax);
 		if (!this.hideLegend) {
 			ctx.save();
 			ctx.translate(cl.x + padding, cl.y + padding);
@@ -2399,19 +2542,41 @@ let PlotElement = class PlotElement$1 extends i {
 			ctx.restore();
 		}
 		ctx.save();
-		ctx.translate(cp.x + padding, cp.y + padding);
+		ctx.translate(plotDataArea.x + padding, plotDataArea.y + padding);
+		if (this.plotAreaFormat.fill.type === `solid`) {
+			ctx.fillStyle = Colour.resolveCss(this.plotAreaFormat.fill.colour);
+			ctx.fillRect(0, 0, plotDataArea.width, plotDataArea.height);
+		}
+		if (this.plotAreaFormat.outline.type === `solid`) {
+			ctx.strokeStyle = Colour.resolveCss(this.plotAreaFormat.outline.colour);
+			ctx.strokeRect(0, 0, plotDataArea.width, plotDataArea.height);
+		}
+		const primaryAxisS = this.primaryAxis.getValueScaler(this.#series.values().filter((s$5) => s$5.onPrimaryAxis));
+		const secondaryAxisAxisS = this.secondaryAxis.getValueScaler(this.#series.values().filter((s$5) => !s$5.onPrimaryAxis));
+		this.#hitboxes = [];
 		for (const series of this.#series.values()) {
-			const seriesScale = this.seriesRanges.get(series.name);
-			const data = seriesScale === void 0 ? globalScaler === void 0 ? series.getScaled() : series.getScaledBy(globalScaler) : series.getScaledBy(Numbers.scaler(seriesScale[0], seriesScale[1]));
-			const colour = Colour.toCssColour(series.colour);
 			switch (this.renderStyle) {
 				case `line`:
-					this.drawLineSeries(data, cp, d$3, colour);
+					this.#drawLineSeries(series, d$3, series.onPrimaryAxis ? primaryAxisS : secondaryAxisAxisS, plotDataArea, {
+						x: padding,
+						y: padding
+					});
 					break;
-				default: this.drawDotSeries(data, cp, d$3, colour);
+				case `bar`:
+					this.#drawBarSeries(series, d$3, series.onPrimaryAxis ? primaryAxisS : secondaryAxisAxisS, plotDataArea, {
+						x: padding,
+						y: padding
+					});
+					break;
+				default: this.#drawDotSeries(series, d$3, series.onPrimaryAxis ? primaryAxisS : secondaryAxisAxisS, plotDataArea, {
+					x: padding,
+					y: padding
+				});
 			}
+			series.isDirty = false;
 		}
 		ctx.restore();
+		this.#updateToolTip();
 	}
 	drawLegend(cl, d$3) {
 		const textColour = this.#legendColour;
@@ -2421,7 +2586,9 @@ let PlotElement = class PlotElement$1 extends i {
 		const swatchSize = 10;
 		const ctx = d$3.ctx;
 		for (const series of this.#series.values()) {
-			ctx.fillStyle = Colour.toCssColour(series.colour);
+			const f$4 = series.getFormatting();
+			const colour = f$4.fill.type === `solid` ? f$4.fill.colour : `transparent`;
+			ctx.fillStyle = Colour.toCssColour(colour);
 			ctx.fillRect(x$1, y$2, swatchSize, swatchSize);
 			ctx.fillStyle = textColour;
 			x$1 += swatchSize + padding;
@@ -2435,60 +2602,161 @@ let PlotElement = class PlotElement$1 extends i {
 			}
 		}
 	}
-	drawLineSeries(data, cp, d$3, colour) {
-		const pointWidth = this.streaming ? this.dataWidth : cp.width / data.length;
+	#drawLineSeries(series, d$3, scaler, plotDataArea, plotDataAreaOffset) {
+		const formatting = series.getFormatting();
+		const lineFormatting = formatting.line;
+		const widthPerValue = plotDataArea.width / series.length;
+		const xOffset = widthPerValue / 2;
+		const lineThickness = lineFormatting.width;
+		const lineThicknessHalf = lineThickness / 2;
+		const h$5 = plotDataArea.height;
 		let x$1 = 0;
-		if (this.streaming) x$1 = cp.width - pointWidth * data.length;
-		const pos = data.map((d$4) => {
-			x$1 += pointWidth;
+		const dotsToDraw = [...series.getValuesForColumn(0)].map((d$4) => {
+			const [value, index] = d$4;
+			x$1 += widthPerValue;
+			const scaledValue = scaler(value);
+			if (Number.isNaN(value)) return void 0;
 			return {
-				x: x$1,
-				y: (1 - d$4) * cp.height,
-				radius: pointWidth
+				x: x$1 - xOffset,
+				y: (1 - scaledValue) * h$5,
+				value,
+				index
 			};
 		});
-		const trimmed = pos.filter((p$3) => {
-			if (p$3.x < 0) return false;
-			return true;
-		});
-		d$3.connectedPoints(trimmed, {
-			strokeStyle: colour,
-			lineWidth: this.lineWidth
-		});
-	}
-	drawDotSeries(data, cp, d$3, colour) {
-		const pointWidth = this.streaming ? this.dataWidth : cp.width / data.length;
+		const filtered = dotsToDraw.filter((f$4) => f$4 !== void 0);
+		const hitboxes = filtered.map((d$4) => ({
+			height: lineThickness,
+			width: widthPerValue,
+			x: plotDataAreaOffset.x + d$4.x - lineThicknessHalf,
+			y: plotDataAreaOffset.y + d$4.y - lineThicknessHalf,
+			series,
+			index: d$4.index,
+			value: series.getValue(d$4.index)
+		}));
+		this.#hitboxes.push(...hitboxes);
+		const drawOpts = {
+			filled: false,
+			fillStyle: `transparent`,
+			stroked: true,
+			strokeStyle: `black`,
+			strokeWidth: lineFormatting.width
+		};
+		if (formatting.outline.type === `solid`) drawOpts.strokeStyle = formatting.outline.colour;
+		else if (formatting.fill.type === `solid`) drawOpts.strokeStyle = formatting.fill.colour;
+		d$3.ctx.lineWidth = lineFormatting.width;
+		d$3.ctx.lineCap = lineFormatting.cap;
+		d$3.ctx.lineJoin = lineFormatting.join;
+		d$3.connectedPoints(filtered, drawOpts);
+	}
+	#drawDotSeries(series, d$3, scaler, plotDataArea, plotDataAreaOffset) {
+		const formatting = series.getFormatting();
+		const dotFormatting = formatting.dot;
+		const widthPerValue = plotDataArea.width / series.length;
+		const radius = dotFormatting.radius === `automatic` ? widthPerValue * .3 : dotFormatting.radius;
+		const xOffset = widthPerValue / 2;
+		const h$5 = plotDataArea.height;
 		let x$1 = 0;
-		if (this.streaming) x$1 = cp.width - pointWidth * data.length;
-		const pos = data.map((d$4) => {
-			x$1 += pointWidth;
+		const dotsToDraw = [...series.getValuesForColumn(0)].map((d$4) => {
+			const [value, index] = d$4;
+			x$1 += widthPerValue;
+			const scaledValue = scaler(value);
+			if (Number.isNaN(value)) return void 0;
 			return {
-				x: x$1,
-				y: (1 - d$4) * cp.height,
-				radius: pointWidth
+				x: x$1 - xOffset,
+				y: (1 - scaledValue) * h$5,
+				radius,
+				value,
+				index
 			};
 		});
-		const trimmed = pos.filter((p$3) => {
-			if (p$3.x < 0) return false;
-			return true;
-		});
-		d$3.dot(trimmed, {
-			filled: true,
-			fillStyle: colour
+		const filtered = dotsToDraw.filter((f$4) => f$4 !== void 0);
+		const hitboxes = filtered.map((d$4) => ({
+			height: d$4.radius * 2,
+			width: d$4.radius * 2,
+			x: plotDataAreaOffset.x + d$4.x - d$4.radius,
+			y: plotDataAreaOffset.y + d$4.y - d$4.radius,
+			series,
+			index: d$4.index,
+			value: series.getValue(d$4.index)
+		}));
+		this.#hitboxes.push(...hitboxes);
+		const drawOpts = {
+			filled: false,
+			fillStyle: `transparent`,
+			stroked: false,
+			strokeStyle: `transparent`
+		};
+		if (formatting.fill.type === `solid`) {
+			drawOpts.filled = true;
+			drawOpts.fillStyle = formatting.fill.colour;
+		}
+		if (formatting.outline.type === `solid`) {
+			drawOpts.stroked = true;
+			drawOpts.strokeStyle = formatting.outline.colour;
+		}
+		d$3.dot(filtered, drawOpts);
+	}
+	#drawBarSeries(series, d$3, scaler, plotDataArea, plotDataAreaOffset) {
+		const formatting = series.getFormatting();
+		const barFormatting = formatting.bar;
+		const widthPerValue = plotDataArea.width / series.length;
+		const rectWidth = widthPerValue - barFormatting.gapWidth / 2;
+		const xOffset = widthPerValue / 2;
+		const h$5 = plotDataArea.height;
+		let x$1 = 0;
+		const rectsToDraw = [...series.getValuesForColumn(0)].map((d$4) => {
+			const [value, index] = d$4;
+			x$1 += widthPerValue;
+			const scaledValue = scaler(value);
+			if (Number.isNaN(value)) return void 0;
+			const barHeight = scaledValue * h$5;
+			return {
+				x: x$1 - xOffset,
+				y: h$5 - barHeight,
+				width: rectWidth,
+				height: barHeight,
+				value,
+				index
+			};
 		});
+		const filtered = rectsToDraw.filter((f$4) => f$4 !== void 0);
+		const hitboxes = filtered.map((d$4) => ({
+			height: Math.max(5, d$4.height),
+			width: d$4.width,
+			x: plotDataAreaOffset.x + d$4.x,
+			y: plotDataAreaOffset.y + d$4.y,
+			series,
+			index: d$4.index,
+			value: series.getValue(d$4.index)
+		}));
+		this.#hitboxes.push(...hitboxes);
+		const drawOpts = {
+			filled: false,
+			fillStyle: `transparent`,
+			stroked: false,
+			strokeStyle: `transparent`
+		};
+		if (formatting.fill.type === `solid`) {
+			drawOpts.filled = true;
+			drawOpts.fillStyle = formatting.fill.colour;
+		}
+		if (formatting.outline.type === `solid`) {
+			drawOpts.stroked = true;
+			drawOpts.strokeStyle = formatting.outline.colour;
+		}
+		d$3.rect(filtered, drawOpts);
 	}
-	computePlot(c$6, plotHeight, axisYwidth, padding) {
+	calculatePlotDataArea(c$6, plotHeight, axisYwidth, padding) {
 		return {
 			x: axisYwidth,
 			y: 0,
-			width: c$6.width - axisYwidth - padding,
-			height: plotHeight - padding - padding
+			width: c$6.width - axisYwidth - padding - padding,
+			height: plotHeight - padding
 		};
 	}
 	computeAxisYWidth(_c) {
 		return 0;
 	}
-	#swatchSize = 10;
 	computeLegend(c$6, maxWidth, padding) {
 		if (this.hideLegend) return {
 			bounds: {
@@ -2537,105 +2805,158 @@ let PlotElement = class PlotElement$1 extends i {
 			parts
 		};
 	}
+	getOrCreateSeries(name) {
+		let s$5 = this.#series.get(name.toLowerCase());
+		if (s$5) return s$5;
+		s$5 = new PlotSeries(name, this);
+		const seriesDefault = {
+			limit: NaN,
+			...this.seriesDefault
+		};
+		if (!Number.isNaN(seriesDefault.limit)) s$5.setCapacityLimit(seriesDefault.limit);
+		this.#series.set(name.toLowerCase(), s$5);
+		return s$5;
+	}
 	getSeries(name) {
 		return this.#series.get(name);
 	}
+	render() {
+		return x`<canvas @pointerleave="${this.#onPointerLeave}" @pointermove="${this.#onPointerMove}" ${n$1(this.canvasEl)}></canvas><div class="hidden" ${n$1(this.tooltipEl)} id="tooltip">Tooltip!</div>`;
+	}
 	static styles = i$1`
   :host {
     width: 100%;
     height: 100%;
     display: block;
   }
+
+  #tooltip {
+    border: 1px solid black;
+    background: white;
+    color: black;
+    padding: 0.3em;
+    font-size: 10px;
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    opacity:1;
+    pointer-events: none;
+  }
+
+  .hidden {
+    opacity:0 !important;
+  }
   `;
 };
-__decorate([n({
-	attribute: `streaming`,
-	type: Boolean
-})], PlotElement.prototype, "streaming", void 0);
 __decorate([n({
 	attribute: `hide-legend`,
 	type: Boolean
 })], PlotElement.prototype, "hideLegend", void 0);
-__decorate([n({
-	attribute: `max-length`,
-	type: Number
-})], PlotElement.prototype, "maxLength", void 0);
-__decorate([n({
-	attribute: `data-width`,
-	type: Number
-})], PlotElement.prototype, "dataWidth", void 0);
-__decorate([n({
-	attribute: `fixed-max`,
-	type: Number
-})], PlotElement.prototype, "fixedMax", void 0);
-__decorate([n({
-	attribute: `fixed-min`,
-	type: Number
-})], PlotElement.prototype, "fixedMin", void 0);
-__decorate([n({
-	attribute: `line-width`,
-	type: Number
-})], PlotElement.prototype, "lineWidth", void 0);
 __decorate([n({
 	attribute: `render`,
 	type: String
 })], PlotElement.prototype, "renderStyle", void 0);
 __decorate([n({
-	attribute: `manual-draw`,
-	type: Boolean
-})], PlotElement.prototype, "manualDraw", void 0);
+	attribute: `padding`,
+	type: Number
+})], PlotElement.prototype, "padding", void 0);
 PlotElement = __decorate([t(`ixfx-plot-element`)], PlotElement);
+const resolveFillDrawStyle = (s$5) => {
+	if (s$5.type === `none`) return s$5;
+	const c$6 = Colour.resolveCss(s$5.colour);
+	return {
+		type: `solid`,
+		colour: c$6
+	};
+};
+const resolveOutlineDrawStyle = (s$5) => {
+	if (s$5.type === `none`) return s$5;
+	const c$6 = Colour.resolveCss(s$5.colour);
+	return {
+		...s$5,
+		colour: c$6
+	};
+};
 var PlotSeries = class {
-	data = [];
-	minSeen = Number.MAX_SAFE_INTEGER;
-	maxSeen = Number.MIN_SAFE_INTEGER;
-	constructor(name, colour, plot) {
+	#data = [];
+	#capacityLimit = NaN;
+	#dirty = false;
+	#onPrimaryAxis = true;
+	constructor(name, plot) {
 		this.name = name;
-		this.colour = colour;
 		this.plot = plot;
 	}
-	clear() {
-		this.data = [];
-		this.resetScale();
+	get length() {
+		return this.#data.length;
 	}
-	/**
-	* Returns a copy of the data scaled by the current
-	* range of the data
-	* @returns 
-	*/
-	getScaled() {
-		let min = this.minSeen;
-		let max = this.maxSeen;
-		if (Number.isNaN(min)) min = 0;
-		if (Number.isNaN(max)) max = 1;
-		const s$5 = Numbers.scaler(min, max);
-		return this.getScaledBy(s$5);
-	}
-	getScaledBy(scaler) {
-		return this.data.map((v$2) => {
-			if (typeof v$2 !== `number`) throw new Error(`Data should just be numbers. Got: ${typeof v$2}`);
-			if (Number.isNaN(v$2)) throw new Error(`data contains NaN`);
-			const scaled = scaler(v$2);
-			if (Number.isNaN(scaled)) throw new Error(`NaN. v: ${v$2} scaled: ${scaled}`);
-			return Numbers.clamp(scaled);
-		});
+	*getValuesForColumn(column) {
+		let index = 0;
+		for (const dv of this.#data) {
+			if (dv && column in dv) yield [dv[column], index];
+			else yield [NaN, index];
+			index++;
+		}
 	}
-	push(value) {
-		if (typeof value !== "number") throw new Error(`Can only add numbers. Got: ${typeof value}`);
-		this.data.push(value);
-		if (this.data.length > this.plot.maxLength && this.plot.streaming) this.data = this.data.slice(1);
-		this.minSeen = Math.min(this.minSeen, value);
-		this.maxSeen = Math.max(this.maxSeen, value);
+	getValue(index) {
+		return this.#data[index];
 	}
-	setValues(values) {
+	pushValue(value, automaticallyDraw) {
+		if (!Array.isArray(value)) value = [value];
+		if (value.length === 0) throw new Error(`Param 'value' is empty. Expected a value or array of value components`);
+		this.#data.push(value);
+		if (!Number.isNaN(this.#capacityLimit)) this.#data = Arrays.ensureLength(this.#data, this.#capacityLimit, `undefined`, `from-start`);
+		this.#dirty = true;
+		if (automaticallyDraw) this.plot.draw();
+	}
+	setValues(values, automaticallyDraw) {
 		if (!Array.isArray(values)) throw new TypeError(`Param 'values' is not an array`);
-		this.data = values;
-		this.minSeen = Math.min(...values);
-		this.maxSeen = Math.max(...values);
+		this.#data = Arrays.ensureLength(values, this.#capacityLimit, `undefined`);
+		this.#dirty = true;
+		if (automaticallyDraw) this.plot.draw();
+	}
+	humanFormatValue(value) {
+		let v$2 = `${this.name} `;
+		if (this.onPrimaryAxis) v$2 += this.plot.primaryAxis.humanFormatValue(value);
+		else v$2 += this.plot.secondaryAxis.humanFormatValue(value);
+		return v$2;
+	}
+	setRawValues(values, automaticallyDraw) {
+		this.setValues(values.map((v$2) => [v$2]), automaticallyDraw);
+	}
+	setCapacityLimit(v$2) {
+		if (typeof v$2 !== `number`) throw new TypeError(`Expect type number. Got: ${typeof v$2}`);
+		if (!Number.isFinite(v$2)) throw new TypeError(`Param 'v' is not finite`);
+		if (Number.isNaN(v$2)) throw new TypeError(`Param 'v' is NaN`);
+		this.#capacityLimit = v$2;
+		this.#data = Arrays.ensureLength(this.#data, this.#capacityLimit, `undefined`);
+	}
+	unsetCapacityLimit() {
+		this.#capacityLimit = NaN;
 	}
-	resetScale() {
-		this.minSeen = Number.MAX_SAFE_INTEGER;
-		this.maxSeen = Number.MIN_SAFE_INTEGER;
+	setFormatting(formatting) {
+		this.plot.setSeriesFormatting(this.name, formatting);
+	}
+	getFormatting() {
+		return this.plot.getSeriesFormatting(this.name, true);
+	}
+	get isDirty() {
+		return this.#dirty;
+	}
+	set isDirty(value) {
+		this.#dirty = value;
+	}
+	get onPrimaryAxis() {
+		return this.#onPrimaryAxis;
+	}
+	set onPrimaryAxis(value) {
+		if (value === this.#onPrimaryAxis) return;
+		this.#onPrimaryAxis = value;
+		this.#dirty = true;
+	}
+	clear() {
+		this.#data = [];
+		this.#dirty = true;
 	}
 };
 
@@ -3013,5 +3334,5 @@ const init = () => {
 };
 
 //#endregion
-export { CrumbNavElement, CrumbNavigationElement, DialElement, FrequencyHistogramPlot, HistogramVis, PlotElement, PlotSeries, SelectHorizontalElement, SplitLayoutElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, init };
+export { CrumbNavElement, CrumbNavigationElement, DialElement, FrequencyHistogramPlot, HistogramVis, PlotAxis, PlotElement, PlotSeries, SelectHorizontalElement, SplitLayoutElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, init };
 //# sourceMappingURL=index.js.map