blazeplot 0.1.10 → 0.1.12

package/dist/index.js

@@ -500,7 +500,7 @@ var i = class {
 		vert: h,
 		frag: g
 	}
-}, v = 3, y = 2, b = 4, x = 4, S = .8, C = 0, w = class {
+}, v = 3, y = 2, b = 4, x = 4, S = .8, C = 0, ee = class {
 	backend;
 	lineProgram;
 	segmentProgram;
@@ -793,13 +793,13 @@ var i = class {
 	dispose() {
 		this.backend.destroy();
 	}
-}, T = [
+}, w = [
 	1024,
 	4096,
 	16384,
 	32768,
 	131072
-], E = class {
+], te = class {
 	regl;
 	pool = [];
 	preAllocated = !1;
@@ -812,7 +812,7 @@ var i = class {
 	preAllocate() {
 		if (!this.preAllocated) {
 			this.preAllocated = !0;
-			for (let e of T) this.pool.push(this.createEntry(e, "stream"));
+			for (let e of w) this.pool.push(this.createEntry(e, "stream"));
 		}
 	}
 	acquire(e, t = "stream") {
@@ -852,17 +852,17 @@ var i = class {
 		return this.pool.find((t) => !t.inUse && t.floatCapacity >= e);
 	}
 	roundUp(e) {
-		for (let t of T) if (t >= e) return t;
-		let t = T[T.length - 1], n = 1 << 32 - Math.clz32(e - 1);
+		for (let t of w) if (t >= e) return t;
+		let t = w[w.length - 1], n = 1 << 32 - Math.clz32(e - 1);
 		return Math.max(t * 2, n);
 	}
 };
 //#endregion
 //#region src/render/ReglBackend.ts
-function D(e) {
+function ne(e) {
 	return e;
 }
-var O = class {
+var T = class {
 	gl;
 	regl;
 	resources;
@@ -882,10 +882,10 @@ var O = class {
 		});
 		if (!n) throw Error("BlazePlot requires WebGL2, but this browser/context does not support it.");
 		this.gl = n, this.regl = e({
-			gl: D(this.gl),
+			gl: ne(this.gl),
 			extensions: [],
 			optionalExtensions: ["angle_instanced_arrays", "ext_disjoint_timer_query_webgl2"]
-		}), this.capabilities = { instancing: this.regl.hasExtension("angle_instanced_arrays") }, this.resources = new E(this.regl), this.resources.preAllocate();
+		}), this.capabilities = { instancing: this.regl.hasExtension("angle_instanced_arrays") }, this.resources = new te(this.regl), this.resources.preAllocate();
 	}
 	createBuffer(e) {
 		let { buffer: t } = this.resources.acquire(e.length, e.usage);
@@ -944,7 +944,7 @@ var O = class {
 		] });
 	}
 	viewport(e, t, n, r) {
-		this.scissorBox = {
+		this.regl.poll(), this.scissorBox = {
 			x: e,
 			y: t,
 			w: n,
@@ -1004,61 +1004,7 @@ var O = class {
 			default: return e;
 		}
 	}
-}, k = class {
-	canvas;
-	camera;
-	policy;
-	_enabled = !0;
-	activePointerId = null;
-	lastX = 0;
-	lastY = 0;
-	constructor(e, t, n) {
-		this.canvas = e, this.camera = t, this.policy = n, this.bindEvents();
-	}
-	get enabled() {
-		return this._enabled;
-	}
-	set enabled(e) {
-		this._enabled = e;
-	}
-	bindEvents() {
-		this.canvas.addEventListener("pointerdown", this.onPointerDown), this.canvas.addEventListener("pointermove", this.onPointerMove), this.canvas.addEventListener("pointerup", this.onPointerUp), this.canvas.addEventListener("pointercancel", this.onPointerUp), this.canvas.addEventListener("wheel", this.onWheel, { passive: !1 });
-	}
-	onPointerDown = (e) => {
-		!this._enabled || this.activePointerId !== null || (this.activePointerId = e.pointerId, this.lastX = e.clientX, this.lastY = e.clientY, this.canvas.setPointerCapture(e.pointerId));
-	};
-	onPointerMove = (e) => {
-		if (!this._enabled || e.pointerId !== this.activePointerId) return;
-		let t = this.canvas.getBoundingClientRect(), n = t.width > 0 ? (this.lastX - e.clientX) / t.width : 0, r = t.height > 0 ? (e.clientY - this.lastY) / t.height : 0, i = this.applyPanPolicy({
-			dx: n,
-			dy: r
-		});
-		i && this.camera.pan(i), this.lastX = e.clientX, this.lastY = e.clientY;
-	};
-	onPointerUp = (e) => {
-		e.pointerId === this.activePointerId && (this.activePointerId = null, this.canvas.hasPointerCapture(e.pointerId) && this.canvas.releasePointerCapture(e.pointerId));
-	};
-	onWheel = (e) => {
-		if (!this._enabled) return;
-		e.preventDefault();
-		let t = e.deltaY < 0 ? 1.1 : .9, n = this.canvas.getBoundingClientRect(), r = n.width > 0 ? (e.clientX - n.left) / n.width : .5, i = n.height > 0 ? 1 - (e.clientY - n.top) / n.height : .5, a = this.applyZoomPolicy({
-			factor: t,
-			cx: r,
-			cy: i,
-			axis: "xy"
-		});
-		a && this.camera.zoom(a);
-	};
-	applyPanPolicy(e) {
-		return this.policy?.beforePan ? this.policy.beforePan(this.camera, e) : e;
-	}
-	applyZoomPolicy(e) {
-		return this.policy?.beforeZoom ? this.policy.beforeZoom(this.camera, e) : e;
-	}
-	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);
-	}
-}, A = class e {
+}, E = class e {
 	_xMin = 0;
 	_xMax = 1;
 	_yMin = 0;
@@ -1143,7 +1089,7 @@ var O = class {
 	static assertFinite(e, t) {
 		if (!Number.isFinite(t)) throw RangeError(`Camera2D ${e} must be finite.`);
 	}
-}, j = class {
+}, D = class {
 	camera;
 	constructor(e) {
 		this.camera = e;
@@ -1175,7 +1121,7 @@ var O = 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 {
+}, O = class {
 	layout;
 	config;
 	options;
@@ -1186,6 +1132,11 @@ var O = class {
 	constructor(e, t, n = {}) {
 		this.layout = e, this.config = t, this.options = n;
 	}
+	setOptions(e) {
+		this.options = e;
+		for (let e of this.xPool) e.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", e.style.color = this.options.color ?? "#bfd6ff";
+		for (let e of this.yPool) e.style.font = this.options.font ?? "11px ui-monospace, monospace, sans-serif", e.style.color = this.options.color ?? "#bfd6ff";
+	}
 	update(e, t) {
 		let n = Math.max(1, this.layout.plot.clientWidth), r = Math.max(1, this.layout.plot.clientHeight);
 		this.config.x.visible ? t.getXTickValues(n, 12, this.xTicks) : this.xTicks.length = 0, this.config.y.visible ? t.getYTickValues(r, 8, this.yTicks) : this.yTicks.length = 0, this.updateAxis(this.xPool, this.xTicks, "x", e, n, r, t), this.updateAxis(this.yPool, this.yTicks, "y", e, n, r, t);
@@ -1217,7 +1168,7 @@ var O = class {
 			}
 		}
 	}
-}, N = class {
+}, k = class {
 	root;
 	plot;
 	canvas;
@@ -1244,8 +1195,181 @@ var O = class {
 	applyBaseStyles() {
 		this.root.style.position = "relative", 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";
 	}
-}, P = 16384, F = P >> 1, I = P >> 1, L = 3, R = 4096, z = 12, B = 64;
+}, A = {
+	backgroundColor: [
+		.08,
+		.1,
+		.16,
+		1
+	],
+	backgroundCssColor: "rgba(20, 26, 41, 1)",
+	gridColor: [
+		.22,
+		.3,
+		.44,
+		.45
+	],
+	axisColor: "#bfd6ff",
+	axisFont: "11px ui-monospace, monospace, sans-serif",
+	seriesColors: [
+		[
+			.3,
+			.6,
+			1,
+			1
+		],
+		[
+			.95,
+			.35,
+			.35,
+			1
+		],
+		[
+			.2,
+			.8,
+			.4,
+			.9
+		],
+		[
+			.95,
+			.72,
+			.25,
+			1
+		],
+		[
+			.72,
+			.45,
+			.95,
+			1
+		],
+		[
+			.25,
+			.85,
+			.95,
+			1
+		]
+	],
+	tooltipBackgroundColor: "rgba(4, 8, 16, 0.85)",
+	tooltipTextColor: "#bfd6ff",
+	tooltipFont: "11px/1.35 ui-monospace, monospace",
+	legendBackgroundColor: "rgba(4, 8, 16, 0.85)",
+	legendBorderColor: "transparent",
+	legendTextColor: "#bfd6ff",
+	legendMutedTextColor: "#789",
+	legendFont: "11px/1.35 ui-monospace, monospace"
+};
+function j(e, t) {
+	if (!e) return A;
+	let n = M(e.backgroundColor, A.backgroundColor, t), r = e.seriesColors?.length ? e.seriesColors.map((e, n) => M(e, A.seriesColors[n % A.seriesColors.length], t)) : A.seriesColors;
+	return {
+		backgroundColor: n,
+		backgroundCssColor: N(e.backgroundColor, A.backgroundCssColor),
+		gridColor: M(e.gridColor, A.gridColor, t),
+		axisColor: e.axisColor ?? A.axisColor,
+		axisFont: e.axisFont ?? A.axisFont,
+		seriesColors: r,
+		tooltipBackgroundColor: e.tooltipBackgroundColor ?? A.tooltipBackgroundColor,
+		tooltipTextColor: e.tooltipTextColor ?? A.tooltipTextColor,
+		tooltipFont: e.tooltipFont ?? A.tooltipFont,
+		legendBackgroundColor: e.legendBackgroundColor ?? A.legendBackgroundColor,
+		legendBorderColor: e.legendBorderColor ?? A.legendBorderColor,
+		legendTextColor: e.legendTextColor ?? A.legendTextColor,
+		legendMutedTextColor: e.legendMutedTextColor ?? A.legendMutedTextColor,
+		legendFont: e.legendFont ?? A.legendFont
+	};
+}
+function M(e, t, n) {
+	if (!e) return t;
+	if (typeof e != "string") return e;
+	let r = F(e, n), i = L(r ?? e, n);
+	return I(r ?? e) ?? I(i ?? "") ?? t;
+}
+function N(e, t) {
+	return e ? typeof e == "string" ? e : P(e) : t;
+}
+function P(e) {
+	return `rgba(${Math.round(e[0] * 255)}, ${Math.round(e[1] * 255)}, ${Math.round(e[2] * 255)}, ${e[3]})`;
+}
+function F(e, t) {
+	let n = t?.ownerDocument ?? globalThis.document;
+	if (!n?.documentElement || typeof getComputedStyle > "u") return null;
+	let r = t instanceof HTMLElement ? t : n.documentElement, i = n.createElement("span");
+	i.style.position = "absolute", i.style.visibility = "hidden", i.style.pointerEvents = "none", i.style.color = e, r.appendChild(i);
+	let a = getComputedStyle(i).color;
+	return i.remove(), a || null;
+}
+function I(e) {
+	let t = e.trim();
+	return R(t) ?? z(t) ?? B(t);
+}
+function L(e, t) {
+	let n = t?.ownerDocument ?? globalThis.document;
+	if (!n?.createElement) return null;
+	let r = n.createElement("canvas").getContext("2d");
+	if (!r) return null;
+	let i = "#010203";
+	r.fillStyle = i, r.fillStyle = e;
+	let a = String(r.fillStyle);
+	return a === i ? null : a;
+}
+function R(e) {
+	let t = e.match(/^rgba?\((.*)\)$/i);
+	if (!t) return null;
+	let n = t[1].trim().split("/").map((e) => e.trim()), r = n[0], i = n[1], a = r.includes(",") ? r.split(",").map((e) => e.trim()).filter(Boolean) : r.split(/\s+/).filter(Boolean);
+	if (a.length < 3) return null;
+	let o = V(a[0]), s = V(a[1]), c = V(a[2]), l = U(i ?? (a.length > 3 ? a[3] : void 0));
+	return o === null || s === null || c === null || l === null ? null : [
+		o,
+		s,
+		c,
+		l
+	];
+}
+function z(e) {
+	let t = e.match(/^color\(\s*srgb\s+(.+)\)$/i);
+	if (!t) return null;
+	let n = t[1].split("/").map((e) => e.trim()), r = n[0].split(/\s+/).filter(Boolean);
+	if (r.length < 3) return null;
+	let i = H(r[0]), a = H(r[1]), o = H(r[2]), s = U(n[1]);
+	return i === null || a === null || o === null || s === null ? null : [
+		i,
+		a,
+		o,
+		s
+	];
+}
+function B(e) {
+	let t = e.startsWith("#") ? e.slice(1) : "";
+	if (![
+		3,
+		4,
+		6,
+		8
+	].includes(t.length) || !/^[\da-f]+$/i.test(t)) return null;
+	let n = t.length <= 4 ? [...t].map((e) => e + e).join("") : t, r = Number.parseInt(n, 16);
+	return Number.isFinite(r) ? [
+		(r >> (n.length === 8 ? 24 : 16) & 255) / 255,
+		(r >> (n.length === 8 ? 16 : 8) & 255) / 255,
+		(r >> (n.length === 8 ? 8 : 0) & 255) / 255,
+		n.length === 8 ? (r & 255) / 255 : 1
+	] : null;
+}
 function V(e) {
+	return e.endsWith("%") ? W(Number.parseFloat(e) / 100) : W(Number.parseFloat(e) / 255);
+}
+function H(e) {
+	return e.endsWith("%") ? W(Number.parseFloat(e) / 100) : W(Number.parseFloat(e));
+}
+function U(e) {
+	return e ? e.endsWith("%") ? W(Number.parseFloat(e) / 100) : W(Number.parseFloat(e)) : 1;
+}
+function W(e) {
+	return Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : null;
+}
+//#endregion
+//#region src/ui/Chart.ts
+var G = 16384, K = G >> 1, q = G >> 1, J = 3, Y = 4096, X = 12, Z = 64;
+function Q(e) {
 	return e === !1 ? {
 		visible: !1,
 		position: "inside"
@@ -1257,13 +1381,36 @@ function V(e) {
 		position: e.position ?? "inside"
 	};
 }
-var H = class {
+function $(e) {
+	return e === !1 ? {
+		x: {
+			visible: !1,
+			position: "inside"
+		},
+		y: {
+			visible: !1,
+			position: "inside"
+		}
+	} : e === !0 || e === void 0 ? {
+		x: {
+			visible: !0,
+			position: "inside"
+		},
+		y: {
+			visible: !0,
+			position: "inside"
+		}
+	} : {
+		x: Q(e.x),
+		y: Q(e.y)
+	};
+}
+var re = class {
 	options;
 	series = [];
 	camera;
 	axis;
 	renderer;
-	input;
 	rawLineBuffer;
 	rawLineData;
 	minMaxInstanceBuffer;
@@ -1277,6 +1424,8 @@ var H = class {
 	yTicks = [];
 	axisOverlay = null;
 	normalizedAxes;
+	resolvedTheme;
+	_gridVisible;
 	layout;
 	stats = {
 		fps: 0,
@@ -1290,6 +1439,7 @@ var H = class {
 	pluginDisposers = [];
 	hoverSubscribers = /* @__PURE__ */ new Set();
 	seriesSubscribers = /* @__PURE__ */ new Set();
+	themeSubscribers = /* @__PURE__ */ new Set();
 	currentHover = null;
 	lastPointerClientX = 0;
 	lastPointerClientY = 0;
@@ -1303,38 +1453,13 @@ var H = class {
 		this.pointerInPlot = !1, this.emitHover(null);
 	};
 	constructor(e, t = {}) {
-		this.options = t;
-		let n = t.axes;
-		n === !1 ? this.normalizedAxes = {
-			x: {
-				visible: !1,
-				position: "inside"
-			},
-			y: {
-				visible: !1,
-				position: "inside"
-			}
-		} : n === !0 || n === void 0 ? this.normalizedAxes = {
-			x: {
-				visible: !0,
-				position: "inside"
-			},
-			y: {
-				visible: !0,
-				position: "inside"
-			}
-		} : this.normalizedAxes = {
-			x: V(n.x),
-			y: V(n.y)
-		}, this.layout = new N(e, this.normalizedAxes), this.applyCanvasSize(), this.camera = new A(), this.axis = new j(this.camera), this.renderer = new w(new O(this.layout.canvas)), this.input = new k(this.layout.canvas, this.camera, t.viewportPolicy), this.rawLineData = new Float32Array(P * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.minMaxInstanceData = new Float32Array(I * L), this.minMaxInstanceBuffer = this.renderer.createFloatBuffer(this.minMaxInstanceData.length), this.barTriangleData = new Float32Array(R * z), this.barTriangleBuffer = this.renderer.createFloatBuffer(this.barTriangleData.length), this.gridData = new Float32Array(B * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
-			color: t.gridStyle?.color ?? [
-				.22,
-				.3,
-				.44,
-				.45
-			],
+		this.options = t, this.resolvedTheme = j(t.theme, e), this.normalizedAxes = $(t.axes), this._gridVisible = t.grid !== !1, this.layout = new k(e, this.normalizedAxes), this.layout.root.style.background = this.resolvedTheme.backgroundCssColor, this.applyCanvasSize(), this.camera = new E(), this.axis = new D(this.camera), this.renderer = new ee(new T(this.layout.canvas)), this.rawLineData = new Float32Array(G * 2), this.rawLineBuffer = this.renderer.createFloatBuffer(this.rawLineData.length), this.minMaxInstanceData = new Float32Array(q * J), this.minMaxInstanceBuffer = this.renderer.createFloatBuffer(this.minMaxInstanceData.length), this.barTriangleData = new Float32Array(Y * X), this.barTriangleBuffer = this.renderer.createFloatBuffer(this.barTriangleData.length), this.gridData = new Float32Array(Z * 2), this.gridBuffer = this.renderer.createFloatBuffer(this.gridData.length), this.gridStyle = {
+			color: t.gridStyle?.color ?? this.resolvedTheme.gridColor,
 			lineWidth: t.gridStyle?.lineWidth ?? 1
-		}, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new M(this.layout, this.normalizedAxes)), this.canvas.addEventListener("pointermove", this.handlePointerMove), this.canvas.addEventListener("pointerleave", this.handlePointerLeave), 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 O(this.layout, this.normalizedAxes, {
+			color: this.resolvedTheme.axisColor,
+			font: this.resolvedTheme.axisFont
+		})), this.canvas.addEventListener("pointermove", this.handlePointerMove), this.canvas.addEventListener("pointerleave", this.handlePointerLeave), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.layout.plot));
 		for (let e of t.plugins ?? []) {
 			let t = e.install(this);
 			typeof t == "function" ? this.pluginDisposers.push(t) : t && this.pluginDisposers.push(() => t.dispose());
@@ -1349,30 +1474,54 @@ var H = class {
 	get plotElement() {
 		return this.layout.plot;
 	}
+	get xAxisElement() {
+		return this.layout.xAxis;
+	}
+	get yAxisElement() {
+		return this.layout.yAxis;
+	}
+	get theme() {
+		return this.resolvedTheme;
+	}
+	getCamera() {
+		return this.camera;
+	}
 	dataToPlot(e, t) {
 		let [n, r] = this.camera.toClip(e, t);
 		return this.camera.toScreen(n, r, this.canvas.clientWidth, this.canvas.clientHeight);
 	}
+	clientToData(e, t) {
+		let n = this.canvas.getBoundingClientRect();
+		if (n.width <= 0 || n.height <= 0) return null;
+		let r = e - n.left, i = t - n.top;
+		if (r < 0 || i < 0 || r > n.width || i > n.height) return null;
+		let a = this.camera.viewport;
+		return [a.xMin + r / n.width * (a.xMax - a.xMin), a.yMax - i / n.height * (a.yMax - a.yMin)];
+	}
+	getViewport() {
+		return this.camera.viewport;
+	}
+	pan(e) {
+		this.camera.pan(e), this.refreshHover();
+	}
+	zoom(e) {
+		this.camera.zoom(e), this.refreshHover();
+	}
 	addSeries(e, t) {
-		let n = e.dataset ?? new a(e.capacity), r = t?.color ?? [
-			.3,
-			.6,
-			1,
-			1
-		], o = new i(n, e, {
-			color: r,
+		let n = e.dataset ?? new a(e.capacity), r = this.resolvedTheme.seriesColors, o = r[this.series.length % r.length] ?? this.resolvedTheme.seriesColors[0], s = t?.color ?? o, c = new i(n, e, {
+			color: s,
 			lineWidth: t?.lineWidth ?? 1,
 			pointSize: t?.pointSize ?? 4,
 			barWidth: t?.barWidth ?? .8,
 			baseline: t?.baseline ?? 0,
 			fillColor: t?.fillColor ?? [
-				r[0],
-				r[1],
-				r[2],
-				r[3] * .25
+				s[0],
+				s[1],
+				s[2],
+				s[3] * .25
 			]
 		});
-		return this.series.push(o), this.emitSeriesChange(), o;
+		return this.series.push(c), this.emitSeriesChange(), c;
 	}
 	addLine(e, t) {
 		return this.addSeries({
@@ -1417,10 +1566,11 @@ var H = class {
 		}));
 	}
 	setViewport(e) {
-		this.camera.setViewport(e);
+		this.camera.setViewport(e), this.refreshHover();
 	}
 	resize(e = globalThis.devicePixelRatio) {
-		return this.applyCanvasSize(e);
+		let t = this.applyCanvasSize(e);
+		return t && this.refreshHover(), t;
 	}
 	getFrameStats(e = {
 		fps: 0,
@@ -1440,9 +1590,28 @@ var H = class {
 			let e = t;
 			return this.hoverSubscribers.add(e), () => this.hoverSubscribers.delete(e);
 		}
+		if (e === "themechange") {
+			let e = t;
+			return this.themeSubscribers.add(e), () => this.themeSubscribers.delete(e);
+		}
 		let n = t;
 		return this.seriesSubscribers.add(n), () => this.seriesSubscribers.delete(n);
 	}
+	setTheme(e) {
+		this.resolvedTheme = j(e, this.layout.root), this.applyTheme(), this.emitThemeChange(), this.refreshHover();
+	}
+	setGridVisible(e) {
+		this._gridVisible = e;
+	}
+	getGridVisible() {
+		return this._gridVisible;
+	}
+	setAxes(e) {
+		this.normalizedAxes = $(e), this.layout.update(this.normalizedAxes), this.axisOverlay?.dispose(), this.axisOverlay = null, (this.normalizedAxes.x.visible || this.normalizedAxes.y.visible) && (this.axisOverlay = new O(this.layout, this.normalizedAxes, {
+			color: this.resolvedTheme.axisColor,
+			font: this.resolvedTheme.axisFont
+		})), this.resize(), this.refreshHover();
+	}
 	pick(e, t, n = {}) {
 		let r = this.canvas.getBoundingClientRect();
 		if (r.width <= 0 || r.height <= 0) return null;
@@ -1467,7 +1636,7 @@ var H = class {
 		o.width = i, o.height = a;
 		let s = o.getContext("2d");
 		if (!s) throw Error("Unable to create a 2D canvas context for screenshot export.");
-		return e.background ? (s.fillStyle = e.background, s.fillRect(0, 0, i, a)) : s.clearRect(0, 0, i, a), s.drawImage(this.canvas, (n.left - t.left) * r, (n.top - t.top) * r, n.width * r, n.height * r), this.drawDomTextForScreenshot(s, t, r), new Promise((t, n) => {
+		return s.fillStyle = e.background ?? P(this.resolvedTheme.backgroundColor), s.fillRect(0, 0, i, a), s.drawImage(this.canvas, (n.left - t.left) * r, (n.top - t.top) * r, n.width * r, n.height * r), this.drawDomTextForScreenshot(s, t, r), new Promise((t, n) => {
 			o.toBlob((e) => e ? t(e) : n(/* @__PURE__ */ Error("Unable to encode chart screenshot.")), e.type ?? "image/png", e.quality);
 		});
 	}
@@ -1482,56 +1651,67 @@ var H = class {
 	}
 	render() {
 		let e = performance.now();
-		this.lastFrameAt > 0 && (this.stats.fps = 1e3 / (e - this.lastFrameAt)), this.lastFrameAt = e, this.stats.pointsRendered = 0, this.stats.drawCalls = 0, this.stats.uploadBytes = 0, this.stats.renderMode = "none", this.options.viewportPolicy?.beforeRender?.(this.camera), this.renderer.viewport(0, 0, this.canvas.width, this.canvas.height), this.renderer.clear(.08, .1, .16, 1);
-		let t = this.camera.viewport;
-		if (this.options.grid !== !1) {
-			let e = this.writeGridVertices(t);
+		this.lastFrameAt > 0 && (this.stats.fps = 1e3 / (e - this.lastFrameAt)), this.lastFrameAt = e, this.stats.pointsRendered = 0, this.stats.drawCalls = 0, this.stats.uploadBytes = 0, this.stats.renderMode = "none", this.options.viewportPolicy?.beforeRender?.(this.camera);
+		let [t, n, r, i] = this.resolvedTheme.backgroundColor;
+		this.renderer.viewport(0, 0, this.canvas.width, this.canvas.height), this.renderer.clear(t, n, r, i);
+		let a = this.camera.viewport;
+		if (this._gridVisible) {
+			let e = this.writeGridVertices(a);
 			e > 0 && (this.renderer.updateFloatBuffer(this.gridBuffer, this.gridData), this.renderer.drawLines(this.gridBuffer, e, this.gridStyle, this.camera), this.stats.drawCalls++, this.stats.uploadBytes += this.gridData.byteLength);
 		}
 		for (let e of this.series) {
 			if (!e.visible) continue;
 			if (e.rebuildPyramid(), e.config.mode === "scatter") {
-				this.drawScatterSeries(e, t);
+				this.drawScatterSeries(e, a);
 				continue;
 			}
 			if (e.config.mode === "bar") {
-				this.drawBarSeries(e, t);
+				this.drawBarSeries(e, a);
 				continue;
 			}
 			if (e.config.mode === "area") {
-				this.drawAreaSeries(e, t);
+				this.drawAreaSeries(e, a);
 				continue;
 			}
-			let n = e.visibleSampleCount(t), r = e.hasLOD && n > P;
-			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;
+			let t = e.visibleSampleCount(a), n = e.hasLOD && t > G;
+			if (n && this.renderer.supportsInstancedSegments) {
+				let t = e.copyMinMaxInstanced(a, this.minMaxInstanceData, this.maxMinMaxSegments());
+				if (t <= 0) continue;
+				this.renderer.updateFloatBuffer(this.minMaxInstanceBuffer, this.minMaxInstanceData), this.renderer.drawMinMaxSegmentsInstanced(this.minMaxInstanceBuffer, t, e.style, this.camera), this.recordRenderMode("minmax"), this.stats.pointsRendered += t * 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, P);
-			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);
+			let r = n ? e.copyMinMaxVisible(a, this.rawLineData, this.maxMinMaxSegments()) : e.copyRawVisible(a, this.rawLineData, G);
+			r < 2 || (this.renderer.updateFloatBuffer(this.rawLineBuffer, this.rawLineData), n ? (this.renderer.drawMinMaxSegments(this.rawLineBuffer, r, e.style, this.camera), this.recordRenderMode("minmax")) : (this.renderer.drawLineStrip(this.rawLineBuffer, r, e.style, this.camera), this.recordRenderMode("raw")), this.stats.pointsRendered += r, this.stats.drawCalls++, this.stats.uploadBytes += this.rawLineData.byteLength);
 		}
 		this.axisOverlay?.update(this.camera, this.axis), this.stats.frameMs = performance.now() - e, this.refreshHover();
 	}
 	dispose() {
 		this.stop(), this.resizeObserver?.disconnect(), this.canvas.removeEventListener("pointermove", this.handlePointerMove), this.canvas.removeEventListener("pointerleave", this.handlePointerLeave);
 		for (let e of this.pluginDisposers.splice(0)) e();
-		this.input.dispose(), this.axisOverlay?.dispose(), this.renderer.dispose(), this.layout.dispose();
+		this.axisOverlay?.dispose(), this.renderer.dispose(), this.layout.dispose();
+	}
+	applyTheme() {
+		this.layout.root.style.background = this.resolvedTheme.backgroundCssColor, this.options.gridStyle?.color === void 0 && (this.gridStyle = {
+			...this.gridStyle,
+			color: this.resolvedTheme.gridColor
+		}), this.axisOverlay?.setOptions({
+			color: this.resolvedTheme.axisColor,
+			font: this.resolvedTheme.axisFont
+		});
 	}
 	applyCanvasSize(e = globalThis.devicePixelRatio) {
 		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, F, n);
+		let n = e.style.baseline ?? 0, r = e.copyAreaVisible(t, this.rawLineData, K, 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, F);
+		let i = this.uploadRawInstances(e, t, K);
 		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) {
-		let n = this.uploadRawInstances(e, t, P);
+		let n = this.uploadRawInstances(e, t, G);
 		n <= 0 || (this.renderer.supportsInstancedPoints ? this.renderer.drawPointsInstanced(this.rawLineBuffer, n, e.style, this.camera, this.canvas.width, this.canvas.height) : this.renderer.drawPointSprites(this.rawLineBuffer, n, e.style, this.camera), this.recordInstancedDraw("points", n));
 	}
 	drawBarSeries(e, t) {
@@ -1559,7 +1739,7 @@ var H = class {
 	}
 	includeBaselineInBarRanges(e, t) {
 		for (let n = 0; n < e; n++) {
-			let e = n * L, r = this.minMaxInstanceData[e + 1], i = this.minMaxInstanceData[e + 2];
+			let e = n * J, r = this.minMaxInstanceData[e + 1], i = this.minMaxInstanceData[e + 2];
 			this.minMaxInstanceData[e + 1] = Math.min(t, r), this.minMaxInstanceData[e + 2] = Math.max(t, i);
 		}
 	}
@@ -1593,7 +1773,7 @@ var H = class {
 		return [Math.max(n.xMin, s), Math.min(n.xMax, c)];
 	}
 	writeBarTriangle(e, t, n, r, i) {
-		let a = e * z;
+		let a = e * X;
 		this.barTriangleData[a] = t, this.barTriangleData[a + 1] = r, this.barTriangleData[a + 2] = n, this.barTriangleData[a + 3] = r, this.barTriangleData[a + 4] = t, this.barTriangleData[a + 5] = i, this.barTriangleData[a + 6] = t, this.barTriangleData[a + 7] = i, this.barTriangleData[a + 8] = n, this.barTriangleData[a + 9] = r, this.barTriangleData[a + 10] = n, this.barTriangleData[a + 11] = i;
 	}
 	drawBarTriangleFallback(e, t) {
@@ -1657,6 +1837,9 @@ var H = class {
 		for (let e of this.seriesSubscribers) e();
 		this.refreshHover();
 	}
+	emitThemeChange() {
+		for (let e of this.themeSubscribers) e();
+	}
 	drawDomTextForScreenshot(e, t, n) {
 		let r = this.layout.root.querySelectorAll("div");
 		for (let i of r) {
@@ -1669,24 +1852,24 @@ var H = class {
 		}
 	}
 	maxMinMaxSegments() {
-		return Math.min(this.canvas.width, I);
+		return Math.min(this.canvas.width, q);
 	}
 	maxBarFallbackBars() {
-		return Math.min(R, P);
+		return Math.min(Y, G);
 	}
 	maxRawBarInstances() {
-		return this.renderer.supportsInstancedBars ? P : this.maxBarFallbackBars();
+		return this.renderer.supportsInstancedBars ? G : this.maxBarFallbackBars();
 	}
 	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 > B) return r;
+			if (r + 2 > Z) 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 > B) return r;
+			if (r + 2 > Z) 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;
@@ -1694,7 +1877,7 @@ var H = class {
 	recordRenderMode(e) {
 		this.stats.renderMode === "none" ? this.stats.renderMode = e : this.stats.renderMode !== e && (this.stats.renderMode = "mixed");
 	}
-}, U = class {
+}, ie = class {
 	xData;
 	yData;
 	constructor(e, t) {
@@ -1736,6 +1919,6 @@ var H = class {
 	}
 };
 //#endregion
-export { j as AxisController, A as Camera2D, H as Chart, n as MinMaxPyramid, a as RingBuffer, i as SeriesStore, U as StaticDataset };
+export { D as AxisController, E as Camera2D, re as Chart, A as DEFAULT_CHART_THEME, n as MinMaxPyramid, a as RingBuffer, i as SeriesStore, ie as StaticDataset };
 
 //# sourceMappingURL=index.js.map