blazeplot 0.1.6 → 0.1.7

package/dist/index.js

@@ -122,7 +122,7 @@ var t = 16, n = class {
 	_dirty = !1;
 	_visible = !0;
 	constructor(e, t, r) {
-		this.dataset = e, this.config = t, this.pyramid = t.downsample === "none" ? null : new n(), this.style = r, this.pyramid && e.length > 0 && this.pyramid.build(e);
+		this.dataset = e, this.config = t, this.pyramid = t.mode === "line" && t.downsample !== "none" ? new n() : null, this.style = r, this.pyramid && e.length > 0 && this.pyramid.build(e);
 	}
 	get hasLOD() {
 		return this.pyramid !== null;
@@ -168,28 +168,58 @@ var t = 16, n = class {
 		return Math.max(0, n - t);
 	}
 	copyRawVisible(e, t, n) {
-		if (n <= 0 || t.length < n * 2) return 0;
-		let r = this.dataset.lowerBoundX(e.xMin), i = this.dataset.upperBoundX(e.xMax), a = i - r;
-		if (a <= 0) return 0;
-		let o = Math.max(1, Math.ceil(a / n)), s = 0;
-		for (let e = r; e < i && s < n; e += o) t[s * 2] = this.dataset.getX(e), t[s * 2 + 1] = this.dataset.getY(e), s++;
-		return s;
+		return this.copyVisibleSamples(e, t, n, "points", 0);
+	}
+	copyAreaVisible(e, t, n, r = 0) {
+		return this.copyVisibleSamples(e, t, n, "area", r) * 2;
 	}
 	copyMinMaxVisible(e, t, n) {
-		if (!this.pyramid || n <= 0 || t.length < n * 4) return 0;
-		let r = this.dataset.lowerBoundX(e.xMin), i = this.dataset.upperBoundX(e.xMax), a = i - r;
-		if (a <= 0) return 0;
-		let o = Math.min(n, a), s = 0;
-		for (let e = 0; e < o; e++) {
-			let n = r + Math.floor(e * a / o), c = r + Math.max(Math.floor((e + 1) * a / o), Math.floor(e * a / o) + 1), l = Math.min(i, c), u = Infinity, d = -Infinity;
+		return this.copyMinMaxSegments(e, t, n, "line-list") * 2;
+	}
+	copyMinMaxInstanced(e, t, n) {
+		return this.copyMinMaxSegments(e, t, n, "instanced");
+	}
+	copyVisibleSamples(e, t, n, r, i) {
+		let a = r === "points" ? 2 : 4;
+		if (n <= 0 || t.length < n * a) return 0;
+		let o = this.dataset.lowerBoundX(e.xMin), s = this.dataset.upperBoundX(e.xMax), c = s - o;
+		if (c <= 0) return 0;
+		let l = Math.max(1, Math.ceil(c / n)), u = 0;
+		for (let e = o; e < s && u < n; e += l) {
+			let n = this.dataset.getX(e), a = this.dataset.getY(e);
+			if (r === "points") {
+				let e = u * 2;
+				t[e] = n, t[e + 1] = a;
+			} else {
+				let e = u * 4;
+				t[e] = n, t[e + 1] = i, t[e + 2] = n, t[e + 3] = a;
+			}
+			u++;
+		}
+		return u;
+	}
+	copyMinMaxSegments(e, t, n, r) {
+		let i = r === "line-list" ? 4 : 3;
+		if (!this.pyramid || n <= 0 || t.length < n * i) return 0;
+		let a = this.dataset.lowerBoundX(e.xMin), o = this.dataset.upperBoundX(e.xMax), s = o - a;
+		if (s <= 0) return 0;
+		let c = Math.min(n, s);
+		for (let e = 0; e < c; e++) {
+			let n = a + Math.floor(e * s / c), i = a + Math.max(Math.floor((e + 1) * s / c), Math.floor(e * s / c) + 1), l = Math.min(o, i), u = Infinity, d = -Infinity;
 			for (let e = n; e < l; e++) {
 				let t = this.dataset.getY(e);
 				t < u && (u = t), t > d && (d = t);
 			}
 			let f = this.dataset.getX(n + (l - n >> 1));
-			t[s * 2] = f, t[s * 2 + 1] = u, s++, t[s * 2] = f, t[s * 2 + 1] = d, s++;
+			if (r === "line-list") {
+				let n = e * 4;
+				t[n] = f, t[n + 1] = u, t[n + 2] = f, t[n + 3] = d;
+			} else {
+				let n = e * 3;
+				t[n] = f, t[n + 1] = u, t[n + 2] = d;
+			}
 		}
-		return s;
+		return c;
 	}
 }, i = class {
 	capacity;
@@ -260,16 +290,70 @@ var t = 16, n = class {
 		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
 	},
 	segment: {
-		vert: "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  float y = (gl_VertexID == 0) ? aMinY : aMaxY;\n  vec2 position = vec2(aX, y);\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
+		vert: "attribute float aX;\nattribute float aMinY;\nattribute float aMaxY;\nattribute float aSelect;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\n\nvoid main() {\n  float y = (aSelect < 0.5) ? aMinY : aMaxY;\n  vec2 position = vec2(aX, y);\n  vec2 clipSpace = position * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
+		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
+	},
+	point: {
+		vert: "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform vec2 uCanvasSize;\nuniform float uPointSize;\n\nvoid main() {\n  vec2 centerClip = aPosition * uScale + uOffset;\n  vec2 pointSizeClip = vec2(2.0 / uCanvasSize.x, 2.0 / uCanvasSize.y) * uPointSize * 0.5;\n  vec2 clipSpace = centerClip + aCorner * pointSizeClip;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
+		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
+	},
+	bar: {
+		vert: "attribute vec2 aPosition;\nattribute vec2 aCorner;\n\nuniform vec2 uScale;\nuniform vec2 uOffset;\nuniform float uBarWidth;\nuniform float uBaseline;\n\nvoid main() {\n  float x = aPosition.x + aCorner.x * uBarWidth;\n  float y = mix(uBaseline, aPosition.y, aCorner.y);\n  vec2 clipSpace = vec2(x, y) * uScale + uOffset;\n  gl_Position = vec4(clipSpace, 0.0, 1.0);\n}\n",
 		frag: "precision mediump float;\n\nuniform vec4 uColor;\n\nvoid main() {\n  gl_FragColor = uColor;\n}\n"
 	}
-}, o = class {
+}, o = 3, s = 2, c = 4, l = 4, u = .8, d = 0, f = class {
 	backend;
 	lineProgram;
+	segmentProgram;
+	pointProgram;
+	barProgram;
+	segmentSelectBuffer;
+	pointCornerBuffer;
+	barCornerBuffer;
 	scaleUniform = new Float32Array(2);
 	offsetUniform = new Float32Array(2);
+	canvasSizeUniform = new Float32Array(2);
 	constructor(e) {
-		this.backend = e, this.lineProgram = this.backend.createProgram(a.line.vert, a.line.frag);
+		this.backend = e, this.lineProgram = this.backend.createProgram(a.line.vert, a.line.frag), this.segmentProgram = this.backend.createProgram(a.segment.vert, a.segment.frag), this.pointProgram = this.backend.createProgram(a.point.vert, a.point.frag), this.barProgram = this.backend.createProgram(a.bar.vert, a.bar.frag), this.segmentSelectBuffer = this.backend.createBuffer({
+			usage: "static",
+			type: "float",
+			length: 2
+		}), this.backend.updateBuffer(this.segmentSelectBuffer, new Float32Array([0, 1])), this.pointCornerBuffer = this.backend.createBuffer({
+			usage: "static",
+			type: "float",
+			length: 8
+		}), this.backend.updateBuffer(this.pointCornerBuffer, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			1,
+			1
+		])), this.barCornerBuffer = this.backend.createBuffer({
+			usage: "static",
+			type: "float",
+			length: 8
+		}), this.backend.updateBuffer(this.barCornerBuffer, new Float32Array([
+			-.5,
+			0,
+			.5,
+			0,
+			-.5,
+			1,
+			.5,
+			1
+		]));
+	}
+	get supportsInstancedSegments() {
+		return this.backend.capabilities.instancing;
+	}
+	get supportsInstancedPoints() {
+		return this.backend.capabilities.instancing;
+	}
+	get supportsInstancedBars() {
+		return this.backend.capabilities.instancing;
 	}
 	clear(e, t, n, r) {
 		this.backend.clear(e, t, n, r);
@@ -293,8 +377,131 @@ var t = 16, n = class {
 	drawLineStrip(e, t, n, r) {
 		this.drawLinePrimitive("line_strip", e, t, n, r);
 	}
+	drawMinMaxSegments(e, t, n, r) {
+		this.drawLines(e, t, n, r);
+	}
+	drawMinMaxSegmentsInstanced(e, t, n, r) {
+		this.writeCameraUniforms(r);
+		let i = o * c, a = {
+			buffer: e,
+			divisor: 1,
+			stride: i,
+			offset: 0
+		}, s = {
+			buffer: e,
+			divisor: 1,
+			stride: i,
+			offset: c
+		}, l = {
+			buffer: e,
+			divisor: 1,
+			stride: i,
+			offset: c * 2
+		}, u = {
+			buffer: this.segmentSelectBuffer,
+			divisor: 0,
+			stride: c,
+			offset: 0
+		};
+		this.backend.draw({
+			program: this.segmentProgram,
+			primitive: "lines",
+			count: 2,
+			instances: t,
+			attributes: {
+				aMaxY: l,
+				aMinY: s,
+				aSelect: u,
+				aX: a
+			},
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uColor: n.color
+			}
+		});
+	}
+	drawPointsInstanced(e, t, n, r, i, a) {
+		this.writeCameraUniforms(r), this.canvasSizeUniform[0] = Math.max(1, i), this.canvasSizeUniform[1] = Math.max(1, a);
+		let o = {
+			buffer: e,
+			divisor: 1,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		}, u = {
+			buffer: this.pointCornerBuffer,
+			divisor: 0,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		};
+		this.backend.draw({
+			program: this.pointProgram,
+			primitive: "triangle_strip",
+			count: 4,
+			instances: t,
+			attributes: {
+				aCorner: u,
+				aPosition: o
+			},
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uCanvasSize: this.canvasSizeUniform,
+				uPointSize: n.pointSize ?? l,
+				uColor: n.color
+			}
+		});
+	}
+	drawAreaStrip(e, t, n, r) {
+		this.writeCameraUniforms(r), this.backend.draw({
+			program: this.lineProgram,
+			primitive: "triangle_strip",
+			count: t,
+			attributes: { position: e },
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uColor: n.fillColor ?? n.color
+			}
+		});
+	}
+	drawBarsInstanced(e, t, n, r) {
+		this.writeCameraUniforms(r);
+		let i = {
+			buffer: e,
+			divisor: 1,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		}, a = {
+			buffer: this.barCornerBuffer,
+			divisor: 0,
+			stride: s * c,
+			offset: 0,
+			size: 2
+		};
+		this.backend.draw({
+			program: this.barProgram,
+			primitive: "triangle_strip",
+			count: 4,
+			instances: t,
+			attributes: {
+				aCorner: a,
+				aPosition: i
+			},
+			uniforms: {
+				uScale: this.scaleUniform,
+				uOffset: this.offsetUniform,
+				uBarWidth: n.barWidth ?? u,
+				uBaseline: n.baseline ?? d,
+				uColor: n.color
+			}
+		});
+	}
 	drawLinePrimitive(e, t, n, r, i) {
-		this.scaleUniform[0] = i.xScale, this.scaleUniform[1] = i.yScale, this.offsetUniform[0] = i.xOffset, this.offsetUniform[1] = i.yOffset, this.backend.draw({
+		this.writeCameraUniforms(i), this.backend.draw({
 			program: this.lineProgram,
 			primitive: e,
 			count: n,
@@ -306,19 +513,19 @@ var t = 16, n = class {
 			}
 		});
 	}
-	drawMinMaxSegments(e, t, n, r) {
-		this.drawLines(e, t, n, r);
+	writeCameraUniforms(e) {
+		this.scaleUniform[0] = e.xScale, this.scaleUniform[1] = e.yScale, this.offsetUniform[0] = e.xOffset, this.offsetUniform[1] = e.yOffset;
 	}
 	dispose() {
 		this.backend.destroy();
 	}
-}, s = [
+}, p = [
 	1024,
 	4096,
 	16384,
 	32768,
 	131072
-], c = class {
+], m = class {
 	regl;
 	pool = [];
 	preAllocated = !1;
@@ -331,7 +538,7 @@ var t = 16, n = class {
 	preAllocate() {
 		if (!this.preAllocated) {
 			this.preAllocated = !0;
-			for (let e of s) this.pool.push(this.createEntry(e, "stream"));
+			for (let e of p) this.pool.push(this.createEntry(e, "stream"));
 		}
 	}
 	acquire(e, t = "stream") {
@@ -371,23 +578,24 @@ var t = 16, n = class {
 		return this.pool.find((t) => !t.inUse && t.floatCapacity >= e);
 	}
 	roundUp(e) {
-		for (let t of s) if (t >= e) return t;
-		let t = s[s.length - 1], n = 1 << 32 - Math.clz32(e - 1);
+		for (let t of p) if (t >= e) return t;
+		let t = p[p.length - 1], n = 1 << 32 - Math.clz32(e - 1);
 		return Math.max(t * 2, n);
 	}
 };
 //#endregion
 //#region src/render/ReglBackend.ts
-function l(e) {
+function h(e) {
 	return e;
 }
-var u = class {
+var g = class {
 	gl;
 	regl;
 	resources;
 	nextProgramId = 1;
 	commandCache = /* @__PURE__ */ new Map();
 	scissorBox = null;
+	capabilities;
 	constructor(t) {
 		let n = t.getContext("webgl2", {
 			alpha: !0,
@@ -400,10 +608,10 @@ var u = class {
 		});
 		if (!n) throw Error("BlazePlot requires WebGL2, but this browser/context does not support it.");
 		this.gl = n, this.regl = e({
-			gl: l(this.gl),
+			gl: h(this.gl),
 			extensions: [],
-			optionalExtensions: ["ext_disjoint_timer_query_webgl2"]
-		}), this.resources = new c(this.regl), this.resources.preAllocate();
+			optionalExtensions: ["angle_instanced_arrays", "ext_disjoint_timer_query_webgl2"]
+		}), this.capabilities = { instancing: this.regl.hasExtension("angle_instanced_arrays") }, this.resources = new m(this.regl), this.resources.preAllocate();
 	}
 	createBuffer(e) {
 		let { buffer: t } = this.resources.acquire(e.length, e.usage);
@@ -436,7 +644,7 @@ var u = class {
 		].join("|"), a = this.commandCache.get(i);
 		a || (a = this.createDrawCommand(t, e.primitive, n, r, e.instances !== void 0), this.commandCache.set(i, a));
 		let o = {};
-		for (let t of n) o[t] = this.asReglBuffer(e.attributes[t]).buffer;
+		for (let t of n) o[t] = this.resolveAttribute(e.attributes[t]);
 		let s = {
 			count: e.count,
 			instances: e.instances ?? 0,
@@ -497,6 +705,15 @@ var u = class {
 			}
 		});
 	}
+	resolveAttribute(e) {
+		return "divisor" in e ? {
+			buffer: this.asReglBuffer(e.buffer).buffer,
+			divisor: e.divisor,
+			stride: e.stride,
+			offset: e.offset,
+			size: e.size
+		} : this.asReglBuffer(e).buffer;
+	}
 	asReglBuffer(e) {
 		return e;
 	}
@@ -513,7 +730,7 @@ var u = class {
 			default: return e;
 		}
 	}
-}, d = class {
+}, _ = class {
 	canvas;
 	camera;
 	policy;
@@ -567,7 +784,7 @@ var u = class {
 	dispose() {
 		this.canvas.removeEventListener("pointerdown", this.onPointerDown), this.canvas.removeEventListener("pointermove", this.onPointerMove), this.canvas.removeEventListener("pointerup", this.onPointerUp), this.canvas.removeEventListener("pointercancel", this.onPointerUp), this.canvas.removeEventListener("wheel", this.onWheel);
 	}
-}, f = class e {
+}, v = class e {
 	_xMin = 0;
 	_xMax = 1;
 	_yMin = 0;
@@ -652,7 +869,7 @@ var u = class {
 	static assertFinite(e, t) {
 		if (!Number.isFinite(t)) throw RangeError(`Camera2D ${e} must be finite.`);
 	}
-}, p = class {
+}, y = class {
 	camera;
 	constructor(e) {
 		this.camera = e;
@@ -684,7 +901,7 @@ var u = class {
 		let n = Math.max(0, -Math.floor(Math.log10(t)) + 2), r = Number(e.toFixed(n));
 		return Object.is(r, -0) ? 0 : r;
 	}
-}, m = class {
+}, b = class {
 	layout;
 	config;
 	options;
@@ -726,7 +943,7 @@ var u = class {
 			}
 		}
 	}
-}, h = class {
+}, x = class {
 	root;
 	plot;
 	canvas;
@@ -753,8 +970,8 @@ var u = class {
 	applyBaseStyles() {
 		this.root.style.display = "grid", this.root.style.width = "100%", this.root.style.height = "100%", this.root.style.minWidth = "0", this.root.style.minHeight = "0", this.root.style.overflow = "hidden", this.plot.style.position = "relative", this.plot.style.gridColumn = "2", this.plot.style.gridRow = "1", this.plot.style.minWidth = "0", this.plot.style.minHeight = "0", this.plot.style.overflow = "hidden", this.canvas.style.position = "absolute", this.canvas.style.inset = "0", this.canvas.style.display = "block", this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.touchAction = "none", this.yAxis.style.position = "relative", this.yAxis.style.gridColumn = "1", this.yAxis.style.gridRow = "1", this.yAxis.style.minWidth = "0", this.yAxis.style.minHeight = "0", this.yAxis.style.overflow = "hidden", this.yAxis.style.pointerEvents = "none", this.xAxis.style.position = "relative", this.xAxis.style.gridColumn = "2", this.xAxis.style.gridRow = "2", this.xAxis.style.minWidth = "0", this.xAxis.style.minHeight = "0", this.xAxis.style.overflow = "hidden", this.xAxis.style.pointerEvents = "none", this.corner.style.gridColumn = "1", this.corner.style.gridRow = "2", this.corner.style.minWidth = "0", this.corner.style.minHeight = "0", this.corner.style.pointerEvents = "none";
 	}
-}, g = 16384, _ = 64;
-function v(e) {
+}, S = 16384, C = S >> 1, w = S >> 1, T = 3, E = 64;
+function D(e) {
 	return e === !1 ? {
 		visible: !1,
 		position: "inside"
@@ -766,7 +983,7 @@ function v(e) {
 		position: e.position ?? "inside"
 	};
 }
-var y = class {
+var O = class {
 	options;
 	series = [];
 	camera;
@@ -775,6 +992,8 @@ var y = class {
 	input;
 	rawLineBuffer;
 	rawLineData;
+	minMaxInstanceBuffer;
+	minMaxInstanceData;
 	gridBuffer;
 	gridData;
 	gridStyle;
@@ -816,9 +1035,9 @@ var y = class {
 				position: "inside"
 			}
 		} : this.normalizedAxes = {
-			x: v(n.x),
-			y: v(n.y)
-		}, this.layout = new h(e, this.normalizedAxes), this.applyCanvasSize(), this.camera = new f(), this.axis = new p(this.camera), this.renderer = new o(new u(this.layout.canvas)), this.input = new d(this.layout.canvas, this.camera, t.viewportPolicy), this.rawLineData = new Float32Array(g * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.gridData = new Float32Array(_ * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
+			x: D(n.x),
+			y: D(n.y)
+		}, this.layout = new x(e, this.normalizedAxes), this.applyCanvasSize(), this.camera = new v(), this.axis = new y(this.camera), this.renderer = new f(new g(this.layout.canvas)), this.input = new _(this.layout.canvas, this.camera, t.viewportPolicy), this.rawLineData = new Float32Array(S * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.minMaxInstanceData = new Float32Array(w * T), this.minMaxInstanceBuffer = this.renderer.createFloatBuffer(this.minMaxInstanceData.length), this.gridData = new Float32Array(E * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
 			color: t.gridStyle?.color ?? [
 				.22,
 				.3,
@@ -826,22 +1045,31 @@ var y = class {
 				.45
 			],
 			lineWidth: t.gridStyle?.lineWidth ?? 1
-		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new m(this.layout, this.normalizedAxes)), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.layout.plot));
+		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new b(this.layout, this.normalizedAxes)), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.layout.plot));
 	}
 	get canvas() {
 		return this.layout.canvas;
 	}
 	addSeries(e, t) {
-		let n = new r(e.dataset ?? new i(e.capacity), e, {
-			color: t?.color ?? [
-				.3,
-				.6,
-				1,
-				1
-			],
-			lineWidth: t?.lineWidth ?? 1
+		let n = e.dataset ?? new i(e.capacity), a = t?.color ?? [
+			.3,
+			.6,
+			1,
+			1
+		], o = new r(n, e, {
+			color: a,
+			lineWidth: t?.lineWidth ?? 1,
+			pointSize: t?.pointSize ?? 4,
+			barWidth: t?.barWidth ?? .8,
+			baseline: t?.baseline ?? 0,
+			fillColor: t?.fillColor ?? [
+				a[0],
+				a[1],
+				a[2],
+				a[3] * .25
+			]
 		});
-		return this.series.push(n), n;
+		return this.series.push(o), o;
 	}
 	removeSeries(e) {
 		let t = this.series.indexOf(e);
@@ -882,7 +1110,26 @@ var y = class {
 		}
 		for (let e of this.series) {
 			if (!e.visible) continue;
-			let n = e.visibleSampleCount(t), r = e.hasLOD && n > g, i = r ? e.copyMinMaxVisible(t, this.rawLineData, Math.min(this.canvas.width, g >> 1)) : e.copyRawVisible(t, this.rawLineData, g);
+			if (e.config.mode === "scatter") {
+				this.drawScatterSeries(e, t);
+				continue;
+			}
+			if (e.config.mode === "bar") {
+				this.drawBarSeries(e, t);
+				continue;
+			}
+			if (e.config.mode === "area") {
+				this.drawAreaSeries(e, t);
+				continue;
+			}
+			let n = e.visibleSampleCount(t), r = e.hasLOD && n > S;
+			if (r && this.renderer.supportsInstancedSegments) {
+				let n = e.copyMinMaxInstanced(t, this.minMaxInstanceData, this.maxMinMaxSegments());
+				if (n <= 0) continue;
+				this.renderer.updateFloatBuffer(this.minMaxInstanceBuffer, this.minMaxInstanceData), this.renderer.drawMinMaxSegmentsInstanced(this.minMaxInstanceBuffer, n, e.style, this.camera), this.recordRenderMode("minmax"), this.stats.pointsRendered += n * 2, this.stats.drawCalls++, this.stats.uploadBytes += this.minMaxInstanceData.byteLength;
+				continue;
+			}
+			let i = r ? e.copyMinMaxVisible(t, this.rawLineData, this.maxMinMaxSegments()) : e.copyRawVisible(t, this.rawLineData, S);
 			i < 2 || (this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), r ? (this.renderer.drawMinMaxSegments(this.rawLineBuffer, i, e.style, this.camera), this.recordRenderMode("minmax")) : (this.renderer.drawLineStrip(this.rawLineBuffer, i, e.style, this.camera), this.recordRenderMode("raw")), this.stats.pointsRendered += i, this.stats.drawCalls++, this.stats.uploadBytes += this.rawLineData.byteLength);
 		}
 		this.axisOverlay?.update(this.camera, this.axis), this.stats.frameMs = performance.now() - e;
@@ -894,16 +1141,43 @@ var y = class {
 		let t = Number.isFinite(e) ? Math.max(1, e) : 1, n = Math.max(1, Math.floor(this.canvas.clientWidth * t)), r = Math.max(1, Math.floor(this.canvas.clientHeight * t));
 		return this.canvas.width === n && this.canvas.height === r ? !1 : (this.canvas.width = n, this.canvas.height = r, !0);
 	}
+	drawAreaSeries(e, t) {
+		let n = e.style.baseline ?? 0, r = e.copyAreaVisible(t, this.rawLineData, C, n);
+		if (r < 4) return;
+		this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), this.renderer.drawAreaStrip(this.rawLineBuffer, r, e.style, this.camera), this.stats.pointsRendered += r, this.stats.drawCalls++, this.stats.uploadBytes += this.rawLineData.byteLength;
+		let i = this.uploadRawInstances(e, t, C);
+		i >= 2 && (this.renderer.drawLineStrip(this.rawLineBuffer, i, e.style, this.camera), this.stats.pointsRendered += i, this.stats.drawCalls++), this.recordRenderMode("area");
+	}
+	drawScatterSeries(e, t) {
+		if (!this.renderer.supportsInstancedPoints) return;
+		let n = this.uploadRawInstances(e, t, S);
+		n <= 0 || (this.renderer.drawPointsInstanced(this.rawLineBuffer, n, e.style, this.camera, this.canvas.width, this.canvas.height), this.recordInstancedDraw("points", n));
+	}
+	drawBarSeries(e, t) {
+		if (!this.renderer.supportsInstancedBars) return;
+		let n = this.uploadRawInstances(e, t, S);
+		n <= 0 || (this.renderer.drawBarsInstanced(this.rawLineBuffer, n, e.style, this.camera), this.recordInstancedDraw("bars", n));
+	}
+	uploadRawInstances(e, t, n) {
+		let r = e.copyRawVisible(t, this.rawLineData, n);
+		return r <= 0 ? 0 : (this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), this.stats.uploadBytes += this.rawLineData.byteLength, r);
+	}
+	recordInstancedDraw(e, t) {
+		this.recordRenderMode(e), this.stats.pointsRendered += t, this.stats.drawCalls++;
+	}
+	maxMinMaxSegments() {
+		return Math.min(this.canvas.width, w);
+	}
 	writeGridVertices(e) {
 		let t = Math.max(1, this.canvas.clientWidth), n = Math.max(1, this.canvas.clientHeight);
 		this.axis.getXTickValues(t, 12, this.xTicks), this.axis.getYTickValues(n, 8, this.yTicks);
 		let r = 0;
 		for (let t of this.xTicks) {
-			if (r + 2 > _) return r;
+			if (r + 2 > E) return r;
 			this.gridData[r * 2] = t, this.gridData[r * 2 + 1] = e.yMin, r++, this.gridData[r * 2] = t, this.gridData[r * 2 + 1] = e.yMax, r++;
 		}
 		for (let t of this.yTicks) {
-			if (r + 2 > _) return r;
+			if (r + 2 > E) return r;
 			this.gridData[r * 2] = e.xMin, this.gridData[r * 2 + 1] = t, r++, this.gridData[r * 2] = e.xMax, this.gridData[r * 2 + 1] = t, r++;
 		}
 		return r;
@@ -911,7 +1185,7 @@ var y = class {
 	recordRenderMode(e) {
 		this.stats.renderMode === "none" ? this.stats.renderMode = e : this.stats.renderMode !== e && (this.stats.renderMode = "mixed");
 	}
-}, b = class {
+}, k = class {
 	xData;
 	yData;
 	constructor(e, t) {
@@ -953,6 +1227,6 @@ var y = class {
 	}
 };
 //#endregion
-export { p as AxisController, f as Camera2D, y as Chart, n as MinMaxPyramid, i as RingBuffer, r as SeriesStore, b as StaticDataset };
+export { y as AxisController, v as Camera2D, O as Chart, n as MinMaxPyramid, i as RingBuffer, r as SeriesStore, k as StaticDataset };
 
 //# sourceMappingURL=index.js.map