vue-data-ui 3.23.10 → 3.23.11

package/dist/vue-ui-xy-canvas-BHpBO5dS.js

@@ -0,0 +1,1823 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { $ as t, At as n, Bt as r, D as i, Dt as a, Ht as o, It as s, Jt as c, Nt as l, S as u, St as ee, X as te, Xt as ne, _ as re, ft as ie, i as ae, lt as oe, nt as se, o as ce, q as le, w as ue, yt as de } from "./lib-Dqr_-I6Y.js";
+import { n as fe, t as pe } from "./useHints-Dq_w2E8B.js";
+import { n as me, r as he, t as ge } from "./useTimeLabels-d2f-W1L4.js";
+import { t as _e } from "./useConfig-DwdGsXTx.js";
+import { t as ve } from "./usePrinter-CEiH1b6R.js";
+import { n as ye, t as be } from "./BaseScanner-DZvpgOjM.js";
+import { t as xe } from "./useNestedProp-CulPqtou.js";
+import { t as Se } from "./useThemeCheck-C43Tcqmk.js";
+import { t as Ce } from "./img-Bkzj3lDD.js";
+import { n as we } from "./Title-CaVA8EIw.js";
+import { t as Te } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { a as d, c as f, i as Ee, l as De, n as Oe, o as ke, r as Ae, s as je, t as Me } from "./useResponsive-ZtArZtUf.js";
+import { t as Ne } from "./BaseIcon-BbElSC8_.js";
+import { t as Pe } from "./SlicerPreview-BRRyc1p7.js";
+import { t as Fe } from "./vue-ui-accordion-C6L7glHU.js";
+import { t as Ie } from "./BaseLegendToggle-CtEdLr4R.js";
+import { t as Le } from "./useUserOptionState-DK-_1ddE.js";
+import { t as Re } from "./useChartAccessibility-DYqac8yF.js";
+import { t as ze } from "./Legend-BJtY2RA9.js";
+import { t as Be } from "./vue_ui_xy_canvas-Cb6dg3eK.js";
+import { Teleport as Ve, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as He, createElementVNode as g, createSlots as Ue, createTextVNode as We, createVNode as Ge, defineAsyncComponent as Ke, guardReactiveProps as _, mergeProps as qe, nextTick as Je, normalizeClass as Ye, normalizeProps as v, normalizeStyle as Xe, onBeforeUnmount as Ze, onMounted as Qe, openBlock as y, ref as b, renderSlot as x, resolveDynamicComponent as $e, shallowRef as et, toDisplayString as tt, toRefs as nt, unref as S, useSlots as rt, watch as C, watchEffect as it, withCtx as w } from "vue";
+//#region src/components/vue-ui-xy-canvas.vue
+var at = /* @__PURE__ */ e({ default: () => _t }), ot = ["id"], st = ["id"], ct = {
+	class: "sr-only",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, lt = ["id"], ut = ["aria-label", "aria-describedby"], dt = {
+	key: 0,
+	style: {
+		position: "absolute",
+		top: "100%",
+		left: "0",
+		width: "100%"
+	},
+	"data-dom-to-png-ignore": "",
+	"aria-hidden": "true"
+}, ft = ["id"], pt = ["onClick"], mt = {
+	key: 4,
+	class: "vue-data-ui-watermark"
+}, ht = { key: 0 }, gt = { key: 1 }, _t = /*#__PURE__*/ Te({
+	__name: "vue-ui-xy-canvas",
+	props: {
+		dataset: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		config: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		selectedXIndex: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: [
+		"selectLegend",
+		"selectX",
+		"copyAlt"
+	],
+	setup(e, { expose: Te, emit: at }) {
+		let _t = Ke(() => import("./Tooltip-CVxJe3UW.js")), vt = Ke(() => import("./DataTable-CmyEubtT.js")), yt = Ke(() => import("./UserOptions-WH7-49V0.js").then((e) => e.n)), bt = Ke(() => import("./NonSvgPenAndPaper-DmxzHJtV.js")), xt = Ke(() => import("./BaseDraggableDialog-Dr_Q6Yt5.js").then((e) => e.n)), { vue_ui_xy_canvas: St } = _e(), { isThemeValid: Ct, warnInvalidTheme: wt } = Se(), T = e, E = b(le()), D = b(null), Tt = b(null), O = b(null), k = b(1), A = b(1), Et = b(!1), j = b(null), Dt = b(""), Ot = b(null), M = b([]), kt = b(1), N = b(!0), P = b(!0), At = b(null), jt = b(0), Mt = b(!1), Nt = b(null), Pt = b(null), F = b(null), Ft = b(null), It = b(0), Lt = b(0), Rt = b(0), I = b(null), zt = b(!1), Bt = b(null), Vt = b(null), Ht = b(!1), Ut = b(!1), Wt = b(!1), L = b(null), Gt = b(!1), Kt = b(!1), qt = b(!1), R = b(null), Jt = b({
+			x: 0,
+			y: 0
+		}), z = p(() => Array.isArray(rn.value) && rn.value.length > 0), Yt = at, Xt = rt(), B = b(un());
+		fe({
+			config: () => B.value,
+			dataset: () => T.dataset,
+			component: "VueUiXyCanvas",
+			rules: [
+				pe.emptyArray,
+				{
+					test: (e) => e.every((e) => e.series.length < 300),
+					message: [
+						"👀 Series have < 300 datapoints. Consider:",
+						"",
+						"▶️ Using VueUiXy instead, if you need more options, or more customization possibilities."
+					]
+				},
+				{
+					test: (e) => e.some((e) => e.series.length > 1e4),
+					message: [
+						"👀 The dataset has > 10_000 datapoints. Above this threshold, the dataset is computed through an LTTB algorithm, to preserve the shape of the data without increasing the number of datapoints.",
+						"",
+						"▶️ If you need this level of detail, you can change config.downsample.threshold and set a higher value. Note that performance can be impacted. JS runtime might crash with > 100_000 datapoints."
+					]
+				}
+			]
+		});
+		let Zt = p(() => {
+			let e = B.value.style.chart.title.text || "XY chart", t = J.value.end - J.value.start;
+			return `${e}. ${q.value.filter((e) => !M.value.includes(e.absoluteIndex)).length} series. ${t} visible data points.`;
+		}), Qt = p(() => {
+			if (R.value === null) return "";
+			let e = R.value + J.value.start;
+			return `${B.value.style.chart.grid.x.timeLabels.values.slice(J.value.start, J.value.end)[R.value] ? B.value.style.chart.tooltip.useDefaultTimeFormat ? Z.value.slice(J.value.start, J.value.end)[R.value]?.text : $n.value[R.value]?.text : Z.value[e]?.text ?? `Point ${e + 1}`}. ${q.value.filter((e) => !M.value.includes(e.absoluteIndex)).map((e) => {
+				let t = e.series[R.value], n = t?.value ?? t ?? null;
+				return `${e.name}: ${n}`;
+			}).join(". ")}.`;
+		}), $t = p(() => B.value.userOptions.useCursorPointer), en = p(() => B.value.debug);
+		Qe(() => {
+			Xt["chart-background"] && en.value && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
+		});
+		let tn = p(() => ne({
+			defaultConfig: {
+				userOptions: { show: !1 },
+				table: { show: !1 },
+				style: { chart: {
+					backgroundColor: "#99999930",
+					grid: {
+						x: {
+							axisColor: "#6A6A6A",
+							timeLabels: { show: !1 },
+							axisName: "",
+							horizontalLines: { color: "#6A6A6A" }
+						},
+						y: {
+							axisColor: "#6A6A6A",
+							axisLabels: { show: !1 },
+							axisName: "",
+							verticalLines: { color: "#6A6A6A" }
+						},
+						zeroLine: { color: "#6A6A6A" }
+					},
+					legend: { backgroundColor: "#99999930" },
+					paddingProportions: { left: .05 },
+					scale: {
+						max: null,
+						min: null
+					},
+					zoom: {
+						endIndex: null,
+						startIndex: null
+					}
+				} }
+			},
+			userConfig: B.value.skeletonConfig ?? {}
+		})), { loading: nn, FINAL_DATASET: rn } = ye({
+			...nt(T),
+			FINAL_CONFIG: B,
+			prepareConfig: un,
+			skeletonDataset: T.config?.skeletonDataset ?? [{
+				name: "",
+				series: [
+					0,
+					1,
+					2,
+					3,
+					5,
+					8,
+					13,
+					21,
+					34,
+					55,
+					89,
+					134
+				],
+				type: "line",
+				smooth: !0,
+				color: "#BABABA"
+			}, {
+				name: "",
+				series: [
+					0,
+					.5,
+					1,
+					1.5,
+					2.5,
+					4,
+					6.5,
+					10.5,
+					17,
+					27.5,
+					44.5,
+					67
+				],
+				type: "bar",
+				color: "#AAAAAA"
+			}],
+			skeletonConfig: ne({
+				defaultConfig: B.value,
+				userConfig: tn.value
+			})
+		}), { userOptionsVisible: an, setUserOptionsVisibility: on, keepUserOptionState: sn } = Le({ config: B.value }), { svgRef: V } = Re({ config: B.value.style.chart.title });
+		function cn() {
+			on(!0);
+		}
+		function ln() {
+			on(!1), Yt("selectX", {
+				dataset: null,
+				index: null,
+				indexLabel: null
+			}), j.value = null;
+		}
+		function un() {
+			let e = xe({
+				userConfig: T.config,
+				defaultConfig: St
+			}), t = {}, n = e.theme;
+			if (n) if (!Ct.value(e)) wt(e), t = e;
+			else {
+				let r = xe({
+					userConfig: Be[n] || T.config,
+					defaultConfig: e
+				});
+				t = {
+					...xe({
+						userConfig: T.config,
+						defaultConfig: r
+					}),
+					customPalette: e.customPalette.length ? e.customPalette : c[n] || s
+				};
+			}
+			else t = e;
+			return T.config && de(T.config, "style.chart.grid.y.timeLabels") && (console.warn("VueUiXyCanvas: you are using the deprecated config.style.chart.grid.y.timeLabels. It is recommended to move this configuration to config.style.chart.grid.x.timeLabels."), t.style.chart.grid.x.timeLabels = xe({
+				defaultConfig: t.style.chart.grid.x.timeLabels,
+				userConfig: T.config.style.chart.grid.y.timeLabels
+			})), t;
+		}
+		C(() => T.config, (e) => {
+			nn.value || (B.value = un()), an.value = !B.value.userOptions.showOnChartHover, Tr(), It.value += 1, Lt.value += 1, Rt.value += 1, H.value.showTable = B.value.table.show, H.value.showDataLabels = B.value.style.chart.dataLabels.show, H.value.stacked = B.value.style.chart.stacked, H.value.showTooltip = B.value.style.chart.tooltip.show;
+		}, { deep: !0 }), C(() => T.dataset, async (e) => {
+			!Array.isArray(e) || e.length === 0 || (await Je(), V.value && !O.value && (O.value = V.value.getContext("2d", { willReadFrequently: !0 })), N.value = !0, P.value = !0, await Nn(), Hn(), It.value += 1, Lt.value += 1, Rt.value += 1);
+		}, { deep: !0 });
+		let dn = b(B.value.style.chart.aspectRatio), { isPrinting: fn, isImaging: pn, generatePdf: mn, generateImage: hn } = ve({
+			elementId: `xy_canvas_${E.value}`,
+			fileName: B.value.style.chart.title.text || "vue-ui-xy-canvas",
+			options: B.value.userOptions.print
+		}), H = b({
+			showTable: B.value.table.show,
+			showDataLabels: B.value.style.chart.dataLabels.show,
+			stacked: B.value.style.chart.stacked,
+			showTooltip: B.value.style.chart.tooltip.show
+		});
+		function gn(e) {
+			Mt.value = e, jt.value += 1;
+		}
+		let _n = p(() => ue(B.value.customPalette)), vn = p(() => M.value.length === K.value.length), U = p(() => K.value ? Math.max(...K.value.filter((e, t) => vn.value ? !0 : !M.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0);
+		function yn(e) {
+			L.value = e, Q();
+		}
+		let bn = b(0), xn = b(0);
+		function Sn() {
+			if (!O.value || !B.value.style.chart.grid.x.timeLabels.show) return 0;
+			let e = Z.value || [], t = J.value.start ?? 0, n = J.value.end ?? 0;
+			if (!Math.max(0, n - t)) return 0;
+			let r = Math.round(k.value / 40 * B.value.style.chart.grid.x.timeLabels.fontSizeRatio), i = `${B.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${r}px ${B.value.style.fontFamily}`;
+			O.value.save(), O.value.font = i;
+			let a = 0;
+			for (let r = t; r < n; r += 1) {
+				let t = e[r]?.text ?? `${r + 1}`, n = O.value.measureText(String(t));
+				n.width > a && (a = n.width);
+			}
+			O.value.restore();
+			let o = (B.value.style.chart.grid.x.timeLabels.rotation || 0) * Math.PI / 180, s = r, c = Math.abs(Math.sin(o)) * a + Math.abs(Math.cos(o)) * s, l = B.value.style.chart.grid.x.timeLabels.offsetY || 1, u = k.value / l;
+			return Math.max(0, u + c + 4);
+		}
+		function Cn() {
+			bn.value = Sn();
+		}
+		function wn() {
+			xn.value && cancelAnimationFrame(xn.value), xn.value = requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					Cn();
+				});
+			});
+		}
+		Ze(() => {
+			xn.value && cancelAnimationFrame(xn.value);
+		});
+		let W = p(() => {
+			let e = k.value - k.value * (B.value.style.chart.paddingProportions.left + B.value.style.chart.paddingProportions.right), t = A.value * B.value.style.chart.paddingProportions.top, n = A.value * B.value.style.chart.paddingProportions.bottom, r = bn.value, i = A.value - n - r, a = A.value - (t + n) - r;
+			return {
+				canvasWidth: k.value,
+				canvasHeight: A.value,
+				left: k.value * B.value.style.chart.paddingProportions.left,
+				top: t,
+				right: k.value - k.value * B.value.style.chart.paddingProportions.right,
+				bottom: i,
+				width: e,
+				height: a,
+				slot: e / (J.value.end - J.value.start)
+			};
+		});
+		function Tn(e, t) {
+			return e / t;
+		}
+		function En({ hasAutoScale: e, series: t, min: n, max: r, scale: i, yOffset: a, individualHeight: o, stackIndex: s = null }) {
+			return t.map((t, n) => {
+				let r = i.min < 0 ? Math.abs(i.min) : 0, c = Tn(t + r, r + i.max), l, u;
+				e && (l = i.min, u = Tn(t - l, i.max - l));
+				let ee = 0;
+				return ee = s === null ? W.value.bottom - W.value.height * (e ? u : c) : W.value.bottom - a - o * (e ? u : c), {
+					x: W.value.left + W.value.slot * n + W.value.slot / 2,
+					y: ee,
+					value: t
+				};
+			});
+		}
+		let G = p(() => {
+			let e = B.value.style.chart.scale.min === null ? Math.min(...K.value.filter((e, t) => !M.value.includes(e.absoluteIndex)).flatMap((e) => e.series.slice(J.value.start, J.value.end))) : B.value.style.chart.scale.min, t = B.value.style.chart.scale.max === null ? Math.max(...K.value.filter((e, t) => !M.value.includes(e.absoluteIndex)).flatMap((e) => e.series.slice(J.value.start, J.value.end))) : B.value.style.chart.scale.max, n = re(e < 0 ? e : 0, t === e ? e + 1 < 0 ? 0 : e + 1 : t < 0 ? 0 : t, B.value.style.chart.scale.ticks), r = n.min < 0 ? Math.abs(n.min) : 0, i = W.value.bottom - W.value.height * (r / (n.max + r));
+			return {
+				absoluteMin: r,
+				max: t,
+				min: e,
+				scale: n,
+				yLabels: n.ticks.map((e) => ({
+					y: W.value.bottom - W.value.height * ((e + r) / (n.max + r)),
+					x: W.value.left - 8,
+					value: e
+				})),
+				zero: i
+			};
+		}), Dn = p(() => q.value.map((e) => `
+            <div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
+                <svg viewBox="0 0 10 10" height="12" width="12">
+                    <circle cx="5" cy="5" r="5" fill="${e.color}"/>
+                </svg>
+                <span>${e.name ? e.name + ": " : ""}</span>
+                <span>${ae(B.value.style.chart.dataLabels.formatter, e.series[j.value] ?? "-", te({
+			p: e.prefix || "",
+			v: e.series[j.value] ?? "-",
+			s: e.suffix || "",
+			r: e.rounding || 0
+		}), {
+			datapoint: e,
+			seriesIndex: j.value
+		})}</span>
+            </div>
+        `)), On = p(() => B.value.style.chart.line.cutNullValues), K = p(() => rn.value.map((e, t) => ({
+			...e,
+			series: a({
+				data: r(e.series, [], On.value),
+				threshold: B.value.downsample.threshold
+			}),
+			absoluteIndex: t,
+			color: u(e.color || _n.value[t] || s[t] || s[t % s.length])
+		}))), kn = p(() => {
+			if (!B.value.style.chart.zoom.minimap.show) return [];
+			let e = K.value.filter((e) => !M.value.includes(e.absoluteIndex)), t = Math.max(...e.map((e) => e.series.length)), n = [];
+			for (let r = 0; r < t; r += 1) n.push(e.map((e) => e.series[r] || 0).reduce((e, t) => (e || 0) + (t || 0), 0));
+			let r = Math.min(...n);
+			return n.map((e) => e + (r < 0 ? Math.abs(r) : 0));
+		}), An = p(() => B.value.style.chart.zoom.minimap.show ? K.value.map((e) => ({
+			...e,
+			isVisible: !M.value.includes(e.absoluteIndex)
+		})) : []);
+		C(U, (e) => {
+			e && Nn();
+		});
+		let q = p(() => ce(K.value.filter((e, t) => !M.value.includes(e.absoluteIndex))).map((e, t) => ({
+			...e,
+			series: e.series.slice(J.value.start, J.value.end)
+		})).map((e, t) => {
+			let n = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, r = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
+			n === r && (n = n >= 0 ? r - 1 : n, r = r >= 0 ? r : n + 1);
+			let i = {
+				ratios: e.series.filter((e) => ![null, void 0].includes(e)).map((e) => (e - n) / (r - n)),
+				valueMin: n,
+				valueMax: r
+			}, a = e.scaleSteps || B.value.style.chart.scale.ticks, o;
+			o = e.autoScaling ? re(i.valueMin, i.valueMax, a) : re(i.valueMin < 0 ? i.valueMin : 0, i.valueMax <= 0 ? 0 : i.valueMax, a);
+			let s = H.value.stacked ? W.value.height * (1 - e.cumulatedStackRatio) : 0, c = H.value.stacked ? W.value.height / B.value.style.chart.stackGap : 0, l = H.value.stacked ? W.value.height * e.stackRatio - c : W.value.height, u = o.min < 0 ? Math.abs(o.min) : 0, ee;
+			ee = e.autoScaling && H.value.stacked && r <= 0 ? W.value.bottom - s - l : W.value.bottom - s - l * (u / (o.max + u));
+			let te = o.ticks.map((e, t) => ({
+				y: W.value.bottom - s - l * (t / (o.ticks.length - 1)),
+				x: W.value.left - 8,
+				value: e
+			})), ne = En({
+				hasAutoScale: H.value.stacked && e.autoScaling,
+				series: e.series,
+				min: H.value.stacked ? n : G.value.min,
+				max: H.value.stacked ? r : G.value.max,
+				scale: H.value.stacked ? o : G.value.scale,
+				yOffset: s,
+				individualHeight: l,
+				stackIndex: H.value.stacked ? t : null
+			});
+			return {
+				...e,
+				coordinatesLine: ne,
+				min: n,
+				max: r,
+				localScale: o,
+				localZero: ee,
+				localMin: u,
+				localYLabels: te,
+				yOffset: s,
+				individualHeight: l
+			};
+		})), J = b({
+			start: 0,
+			end: U.value
+		}), Y = b({
+			start: 0,
+			end: U.value
+		}), jn = b(null);
+		function Mn() {
+			return new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(() => e())));
+		}
+		Ze(() => {
+			jn.value && cancelAnimationFrame(jn.value);
+		});
+		async function Nn() {
+			In(), await Je(), jn.value && cancelAnimationFrame(jn.value), jn.value = requestAnimationFrame(async () => {
+				await Mn(), In();
+			});
+		}
+		let Pn = p(() => B.value.style.chart.zoom.preview.enable && (Y.value.start !== J.value.start || Y.value.end !== J.value.end));
+		function Fn(e, t) {
+			Y.value[e] = t;
+		}
+		async function In() {
+			if (!Ht.value) {
+				Ht.value = !0;
+				try {
+					let { startIndex: e, endIndex: t } = B.value.style.chart.zoom, n = Math.max(...K.value.map((e) => e.series.length)), r = e ?? 0, i = t == null ? n : Math.min(zn(t + 1), n);
+					Wt.value = !0, J.value.start = r, J.value.end = i, Y.value.start = r, Y.value.end = i, Bn(), Ut.value = !0, await Je(), F.value && (F.value.setStartValue(J.value.start), F.value.setEndValue(J.value.end));
+				} finally {
+					queueMicrotask(() => {
+						Wt.value = !1;
+					}), Ht.value = !1;
+				}
+			}
+		}
+		function Ln(e) {
+			Ht.value || Wt.value || e !== J.value.start && (J.value.start = e, Y.value.start = e, Bn());
+		}
+		function Rn(e) {
+			if (Ht.value || Wt.value) return;
+			let t = zn(e);
+			t !== J.value.end && (J.value.end = t, Y.value.end = t, Bn());
+		}
+		function zn(e) {
+			let t = U.value;
+			return e > t ? t : e < 0 || e < J.value.start ? B.value.style.chart.zoom.startIndex === null ? 1 : B.value.style.chart.zoom.startIndex + 1 : e;
+		}
+		function Bn() {
+			let e = Math.max(1, Math.max(...K.value.map((e) => e.series.length))), t = Math.max(0, Math.min(J.value.start ?? 0, e - 1)), n = Math.max(t + 1, Math.min(J.value.end ?? e, e));
+			(!Number.isFinite(t) || !Number.isFinite(n) || n <= t) && (t = 0, n = e), J.value = {
+				start: t,
+				end: n
+			}, Y.value.start = t, Y.value.end = n, F.value && (F.value.setStartValue(t), F.value.setEndValue(n));
+		}
+		let Vn = p(() => q.value.filter((e) => [
+			"line",
+			"plot",
+			void 0
+		].includes(e.type))), X = p(() => q.value.filter((e) => e.type === "bar"));
+		function Hn() {
+			if (!V.value || !Tt.value) return;
+			let e = Tt.value.offsetWidth, t = Tt.value.offsetHeight;
+			V.value.width = e * kt.value * 2, V.value.height = t * kt.value * 2, k.value = e * kt.value * 2, A.value = t * kt.value * 2, O.value?.scale(kt.value, kt.value), Q();
+		}
+		C(z, async (e) => {
+			if (!e) {
+				At.value = null, Et.value = !1, j.value = null, I.value = null;
+				return;
+			}
+			await Je(), V.value && !O.value && (O.value = V.value.getContext("2d", { willReadFrequently: !0 })), N.value = !0, P.value = !0, await Nn(), Hn(), Q();
+		});
+		function Un() {
+			if (O.value && (O.value.clearRect(0, 0, 1e4, 1e4), O.value.fillStyle = B.value.style.chart.backgroundColor, O.value.fillRect(0, 0, W.value.canvasWidth, W.value.canvasHeight), z.value)) {
+				if (H.value.stacked) B.value.style.chart.grid.y.verticalLines.show && J.value.end - J.value.start < B.value.style.chart.grid.y.verticalLines.hideUnderXLength ? q.value.forEach((e) => {
+					for (let t = 0; t < J.value.end - J.value.start + 1; t += 1) d(O.value, [{
+						x: W.value.left + W.value.slot * t,
+						y: W.value.bottom - e.yOffset - e.individualHeight
+					}, {
+						x: W.value.left + W.value.slot * t,
+						y: W.value.bottom - e.yOffset
+					}], { color: B.value.style.chart.grid.y.verticalLines.color });
+				}) : B.value.style.chart.grid.y.verticalLines.show && J.value.end - J.value.start >= B.value.style.chart.grid.y.verticalLines.hideUnderXLength && q.value.forEach((e) => {
+					for (let t = J.value.start; t < J.value.end; t += 1) t % Math.floor((J.value.end - J.value.start) / B.value.style.chart.grid.x.timeLabels.modulo) === 0 && d(O.value, [{
+						x: W.value.left + W.value.slot * (t - J.value.start) + W.value.slot / 2,
+						y: W.value.bottom - e.yOffset - e.individualHeight
+					}, {
+						x: W.value.left + W.value.slot * (t - J.value.start) + W.value.slot / 2,
+						y: W.value.bottom - e.yOffset
+					}], { color: B.value.style.chart.grid.y.verticalLines.color });
+				}), B.value.style.chart.grid.x.horizontalLines.show && (B.value.style.chart.grid.x.horizontalLines.alternate ? q.value.forEach((e) => {
+					e.localYLabels.forEach((t, n) => {
+						n < e.localYLabels.length - 1 && je(O.value, [
+							{
+								x: W.value.left,
+								y: t.y
+							},
+							{
+								x: W.value.right,
+								y: t.y
+							},
+							{
+								x: W.value.right,
+								y: e.localYLabels[n + 1].y
+							},
+							{
+								x: W.value.left,
+								y: e.localYLabels[n + 1].y
+							}
+						], {
+							fillColor: n % 2 == 0 ? "transparent" : o(B.value.style.chart.grid.x.horizontalLines.color, B.value.style.chart.grid.x.horizontalLines.opacity),
+							strokeColor: "transparent"
+						});
+					});
+				}) : q.value.forEach((e) => {
+					e.localYLabels.slice(J.value.start, J.value.end).forEach((e) => {
+						d(O.value, [{
+							x: W.value.left,
+							y: e.y
+						}, {
+							x: W.value.right,
+							y: e.y
+						}], { color: B.value.style.chart.grid.x.horizontalLines.color });
+					});
+				})), B.value.style.chart.grid.zeroLine.show && q.value.forEach((e) => {
+					d(O.value, [{
+						x: W.value.left,
+						y: e.localZero
+					}, {
+						x: W.value.right,
+						y: e.localZero
+					}], {
+						color: B.value.style.chart.grid.zeroLine.color,
+						lineDash: B.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+					});
+				}), B.value.style.chart.grid.y.axisLabels.show && q.value.forEach((e) => {
+					d(O.value, [{
+						x: W.value.left,
+						y: W.value.bottom - e.yOffset
+					}, {
+						x: W.value.left,
+						y: W.value.bottom - e.yOffset - e.individualHeight
+					}], { color: e.color }), d(O.value, [{
+						x: W.value.right,
+						y: W.value.bottom - e.yOffset
+					}, {
+						x: W.value.right,
+						y: W.value.bottom - e.yOffset - e.individualHeight
+					}], { color: e.color });
+				}), q.value.forEach((e) => {
+					f(O.value, e.name, k.value / 35, W.value.bottom - e.yOffset - e.individualHeight / 2, {
+						align: "center",
+						rotation: -90,
+						color: e.color,
+						font: `${Math.round(k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`
+					});
+				});
+				else {
+					if (B.value.style.chart.grid.y.verticalLines.show && J.value.end - J.value.start < B.value.style.chart.grid.y.verticalLines.hideUnderXLength) for (let e = 0; e < J.value.end - J.value.start + 1; e += 1) d(O.value, [{
+						x: W.value.left + W.value.slot * e,
+						y: W.value.top
+					}, {
+						x: W.value.left + W.value.slot * e,
+						y: W.value.bottom
+					}], { color: B.value.style.chart.grid.y.verticalLines.color });
+					else if (B.value.style.chart.grid.y.verticalLines.show && J.value.end - J.value.start >= B.value.style.chart.grid.y.verticalLines.hideUnderXLength) for (let e = J.value.start; e < J.value.end; e += 1) e % Math.floor((J.value.end - J.value.start) / B.value.style.chart.grid.x.timeLabels.modulo) === 0 && d(O.value, [{
+						x: W.value.left + W.value.slot * (e - J.value.start) + W.value.slot / 2,
+						y: W.value.top
+					}, {
+						x: W.value.left + W.value.slot * (e - J.value.start) + W.value.slot / 2,
+						y: W.value.bottom
+					}], { color: B.value.style.chart.grid.y.verticalLines.color });
+					B.value.style.chart.grid.x.horizontalLines.show && (B.value.style.chart.grid.x.horizontalLines.alternate ? G.value.yLabels.forEach((e, t) => {
+						t < G.value.yLabels.length - 1 && je(O.value, [
+							{
+								x: W.value.left,
+								y: e.y
+							},
+							{
+								x: W.value.right,
+								y: e.y
+							},
+							{
+								x: W.value.right,
+								y: G.value.yLabels[t + 1].y
+							},
+							{
+								x: W.value.left,
+								y: G.value.yLabels[t + 1].y
+							}
+						], {
+							fillColor: t % 2 == 0 ? "transparent" : o(B.value.style.chart.grid.x.horizontalLines.color, B.value.style.chart.grid.x.horizontalLines.opacity),
+							strokeColor: "transparent"
+						});
+					}) : G.value.yLabels.forEach((e) => {
+						d(O.value, [{
+							x: W.value.left,
+							y: e.y
+						}, {
+							x: W.value.right,
+							y: e.y
+						}], { color: B.value.style.chart.grid.x.horizontalLines.color });
+					})), B.value.style.chart.grid.y.showAxis && d(O.value, [{
+						x: W.value.left,
+						y: W.value.top
+					}, {
+						x: W.value.left,
+						y: W.value.bottom
+					}], {
+						color: B.value.style.chart.grid.y.axisColor,
+						lineWidth: B.value.style.chart.grid.y.axisThickness
+					}), B.value.style.chart.grid.x.showAxis && d(O.value, [{
+						x: W.value.left,
+						y: W.value.bottom
+					}, {
+						x: W.value.right,
+						y: W.value.bottom
+					}], {
+						color: B.value.style.chart.grid.x.axisColor,
+						lineWidth: B.value.style.chart.grid.x.axisThickness
+					}), B.value.style.chart.grid.zeroLine.show && d(O.value, [{
+						x: W.value.left,
+						y: G.value.zero
+					}, {
+						x: W.value.right,
+						y: G.value.zero
+					}], {
+						color: B.value.style.chart.grid.zeroLine.color,
+						lineDash: B.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+					});
+				}
+				B.value.style.chart.grid.y.axisName && f(O.value, B.value.style.chart.grid.y.axisName, k.value - k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2, W.value.bottom - W.value.height / 2, {
+					font: `${B.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+					color: B.value.style.chart.color,
+					align: "center",
+					rotation: 90
+				}), B.value.style.chart.grid.x.axisName && f(O.value, B.value.style.chart.grid.x.axisName, k.value / 2, A.value, {
+					font: `${B.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+					color: B.value.style.chart.color,
+					align: "center"
+				});
+			}
+		}
+		function Wn(e) {
+			for (let t = 0; t < e.coordinatesLine.length; t += 1) {
+				let n = (j.value === t || L.value === t ? k.value / 150 : B.value.style.chart.line.plots.show || e.type === "plot" ? k.value / 200 : 0) * B.value.style.chart.line.plots.radiusRatio;
+				Oe(O.value, {
+					x: e.coordinatesLine[t].x,
+					y: e.coordinatesLine[t].y
+				}, n, {
+					color: B.value.style.chart.backgroundColor,
+					fillStyle: e.color,
+					strokeColor: "transparent"
+				});
+			}
+		}
+		function Gn() {
+			q.value.forEach((e) => {
+				e.showYMarker && dr(e) && f(O.value, ae(B.value.style.chart.dataLabels.formatter, dr(e).value, te({
+					p: e.prefix || B.value.style.chart.grid.y.axisLabels.prefix || "",
+					v: dr(e).value,
+					s: e.suffix || B.value.style.chart.grid.y.axisLabels.suffix || "",
+					r: e.rounding || B.value.style.chart.grid.y.axisLabels.rounding || 0
+				}), {
+					datapoint: dr(e),
+					seriesIndex: null
+				}), W.value.left - 8 + B.value.style.chart.grid.y.axisLabels.offsetX, dr(e).y, {
+					align: "right",
+					font: `${B.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+					color: e.color
+				});
+			});
+		}
+		function Kn() {
+			B.value.style.chart.grid.y.axisLabels.show && (H.value.stacked ? q.value.forEach((e) => {
+				e.localYLabels.forEach((t, n) => {
+					f(O.value, ae(B.value.style.chart.dataLabels.formatter, t.value, te({
+						p: e.prefix || B.value.style.chart.grid.y.axisLabels.prefix || "",
+						v: t.value,
+						s: e.suffix || B.value.style.chart.grid.y.axisLabels.suffix || "",
+						r: e.rounding || B.value.style.chart.grid.y.axisLabels.rounding || 0
+					}), {
+						datapoint: t,
+						seriesIndex: n
+					}), t.x + B.value.style.chart.grid.y.axisLabels.offsetX, t.y, {
+						align: "right",
+						font: `${B.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+						color: e.color,
+						globalAlpha: e.showYMarker && ![null, void 0].includes(j.value ?? L.value) ? .2 : 1
+					});
+				});
+			}) : G.value.yLabels.forEach((e, t) => {
+				f(O.value, ae(B.value.style.chart.dataLabels.formatter, e.value, te({
+					p: B.value.style.chart.grid.y.axisLabels.prefix || "",
+					v: e.value,
+					s: B.value.style.chart.grid.y.axisLabels.suffix || "",
+					r: B.value.style.chart.grid.y.axisLabels.rounding || 0
+				}), {
+					datapoint: e,
+					seriesIndex: t
+				}), e.x + B.value.style.chart.grid.y.axisLabels.offsetX, e.y, {
+					align: "right",
+					font: `${B.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+					color: B.value.style.chart.grid.y.axisLabels.color,
+					globalAlpha: q.value.some((e) => e.showYMarker) && ![null, void 0].includes(j.value ?? L.value) ? .2 : 1
+				});
+			}));
+		}
+		function qn(e) {
+			for (let t = 0; t < e.coordinatesLine.length; t += 1) f(O.value, ae(B.value.style.chart.dataLabels.formatter, e.coordinatesLine[t].value, te({
+				p: e.prefix || "",
+				v: e.coordinatesLine[t].value,
+				s: e.suffix || "",
+				r: e.rounding || 0
+			}), {
+				datapoint: e.coordinatesLine[t],
+				seriesIndex: t
+			}), e.coordinatesLine[t].x, e.coordinatesLine[t].y + B.value.style.chart.dataLabels.offsetY, {
+				align: "center",
+				font: `${B.value.style.chart.dataLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.dataLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+				color: B.value.style.chart.dataLabels.useSerieColor ? e.color : B.value.style.chart.dataLabels.color,
+				strokeColor: B.value.style.chart.backgroundColor,
+				lineWidth: .5
+			});
+		}
+		let Z = b([]), Jn = 0;
+		it(() => {
+			let e = ++Jn;
+			(async () => {
+				let t = await ge({
+					values: B.value.style.chart.grid.x.timeLabels.values,
+					maxDatapoints: U.value,
+					formatter: B.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+					start: 0,
+					end: U.value
+				});
+				e === Jn && (Z.value = t);
+			})();
+		}), it(() => {
+			B.value.style.chart.grid.x.timeLabels.show, B.value.style.chart.grid.x.timeLabels.rotation, B.value.style.chart.grid.x.timeLabels.offsetY, B.value.style.chart.grid.x.timeLabels.fontSizeRatio, B.value.style.chart.grid.x.timeLabels.bold, J.value.start, J.value.end, k.value, A.value, (Z.value || []).map((e) => e?.text ?? "").join("|"), wn();
+		}, { flush: "post" });
+		let Yn = b({
+			months: [],
+			shortMonths: [],
+			days: [],
+			shortDays: []
+		}), Xn = 0;
+		it(() => {
+			let e = ++Xn, t = B.value.style.chart.grid.x.timeLabels.datetimeFormatter;
+			(async () => {
+				let n = await he(t.locale).catch(() => he("en"));
+				e === Xn && (Yn.value = n.data);
+			})();
+		});
+		let Zn = p(() => {
+			let e = B.value.style.chart.grid.x.timeLabels.datetimeFormatter, t = me({
+				useUTC: e.useUTC,
+				locale: Yn.value,
+				januaryAsYear: e.januaryAsYear
+			});
+			return (e, n) => {
+				let r = B.value.style.chart.grid.x.timeLabels.values?.[e];
+				return r == null ? "" : t.formatDate(new Date(r), n);
+			};
+		}), Qn = p(() => (B.value.style.chart.grid.x.timeLabels.values || []).map((e, t) => ({
+			text: Zn.value(t, B.value.style.chart.zoom.timeFormat),
+			absoluteIndex: t
+		}))), $n = p(() => (B.value.style.chart.grid.x.timeLabels.values || []).map((e, t) => ({
+			text: Zn.value(t, B.value.style.chart.tooltip.timeFormat),
+			absoluteIndex: t
+		})));
+		function er() {
+			for (let e = J.value.start; e < J.value.end; e += 1) (J.value.end - J.value.start < B.value.style.chart.grid.x.timeLabels.modulo || J.value.end - J.value.start >= B.value.style.chart.grid.x.timeLabels.modulo && (e % Math.floor((J.value.end - J.value.start) / B.value.style.chart.grid.x.timeLabels.modulo) === 0 || (e === j.value + J.value.start || e === L.value) && B.value.style.chart.grid.x.timeLabels.showMarker)) && f(O.value, Z.value[e] ? Z.value[e].text : e + 1, W.value.left + W.value.slot * (e - J.value.start) + W.value.slot / 2, W.value.bottom + k.value / B.value.style.chart.grid.x.timeLabels.offsetY, {
+				align: B.value.style.chart.grid.x.timeLabels.rotation === 0 ? "center" : B.value.style.chart.grid.x.timeLabels.rotation > 0 ? "left" : "right",
+				font: `${B.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${Math.round(k.value / 40 * B.value.style.chart.grid.x.timeLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+				color: B.value.style.chart.grid.x.timeLabels.showMarker ? o(B.value.style.chart.grid.x.timeLabels.color, j.value !== null || L.value !== null ? j.value + J.value.start === e || L.value === e ? 100 : 20 : 100) : B.value.style.chart.grid.x.timeLabels.color,
+				rotation: B.value.style.chart.grid.x.timeLabels.rotation
+			});
+		}
+		function tr() {
+			d(O.value, [{
+				x: W.value.left + W.value.slot * (j.value ?? L.value) + W.value.slot / 2,
+				y: W.value.top
+			}, {
+				x: W.value.left + W.value.slot * (j.value ?? L.value) + W.value.slot / 2,
+				y: W.value.bottom
+			}], {
+				color: B.value.style.chart.selector.color,
+				lineDash: B.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+				lineWidth: 2,
+				linceCap: "round"
+			});
+		}
+		function nr() {
+			I.value && d(O.value, [{
+				x: W.value.left,
+				y: I.value
+			}, {
+				x: W.value.right,
+				y: I.value
+			}], {
+				color: B.value.style.chart.selector.color,
+				lineDash: B.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+				lineWidth: 2,
+				linceCap: "round"
+			});
+		}
+		function rr() {
+			X.value.forEach((e, t) => {
+				for (let r = 0; r < e.coordinatesLine.length; r += 1) je(O.value, [
+					{
+						x: W.value.left + W.value.slot * r + W.value.slot / 10 + (H.value.stacked ? 0 : W.value.slot / X.value.length * t - (t === 0 ? 0 : W.value.slot / (5 * X.value.length) * t)),
+						y: H.value.stacked ? e.localZero : G.value.zero
+					},
+					{
+						x: W.value.left + W.value.slot * r + W.value.slot / 10 + (H.value.stacked ? 0 : W.value.slot / X.value.length * t - (t === 0 ? 0 : W.value.slot / (5 * X.value.length) * t)) + W.value.slot * .8 / (H.value.stacked ? 1 : X.value.length),
+						y: H.value.stacked ? e.localZero : G.value.zero
+					},
+					{
+						x: W.value.left + W.value.slot * r + W.value.slot / 10 + (H.value.stacked ? 0 : W.value.slot / X.value.length * t - (t === 0 ? 0 : W.value.slot / (5 * X.value.length) * t)) + W.value.slot * .8 / (H.value.stacked ? 1 : X.value.length),
+						y: e.coordinatesLine[r].y
+					},
+					{
+						x: W.value.left + W.value.slot * r + W.value.slot / 10 + (H.value.stacked ? 0 : W.value.slot / X.value.length * t - (t === 0 ? 0 : W.value.slot / (5 * X.value.length) * t)),
+						y: e.coordinatesLine[r].y
+					}
+				], {
+					strokeColor: B.value.style.chart.backgroundColor,
+					gradient: {
+						type: "linear",
+						start: {
+							x: e.coordinatesLine[r].x,
+							y: e.coordinatesLine[r].y
+						},
+						end: {
+							x: e.coordinatesLine[r].x,
+							y: H.value.stacked ? e.localZero : G.value.zero
+						},
+						stops: [{
+							offset: 0,
+							color: e.color
+						}, {
+							offset: 1,
+							color: B.value.style.chart.bar.gradient.show ? n(e.color, .5) : e.color
+						}]
+					}
+				}), H.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && f(O.value, ae(B.value.style.chart.dataLabels.formatter, e.coordinatesLine[r].value, te({
+					p: e.prefix || "",
+					v: e.coordinatesLine[r].value,
+					s: e.suffix || "",
+					r: e.rounding || 0
+				}), {
+					datapoint: e.coordinatesLine[r],
+					seriesIndex: r
+				}), W.value.left + W.value.slot * r + W.value.slot / 10 + (H.value.stacked ? 0 : W.value.slot / X.value.length * t - (t === 0 ? 0 : W.value.slot / (5 * X.value.length) * t)) + W.value.slot * .4 / (H.value.stacked ? 1 : X.value.length), (e.coordinatesLine[r].value < 0 ? H.value.stacked ? e.localZero : G.value.zero : e.coordinatesLine[r].y) + B.value.style.chart.dataLabels.offsetY, {
+					align: "center",
+					font: `${Math.round(k.value / 40 * B.value.style.chart.dataLabels.fontSizeRatio)}px ${B.value.style.fontFamily}`,
+					color: B.value.style.chart.dataLabels.useSerieColor ? e.color : B.value.style.chart.dataLabels.color,
+					strokeColor: B.value.style.chart.backgroundColor,
+					lineWidth: .8
+				});
+			});
+		}
+		function ir(e, t) {
+			let n = e.coordinatesLine.map((t, n) => e.series[n] != null && Number.isFinite(t?.y) ? t : null), r = [], i = [], a = [];
+			for (let e = 0; e < n.length; e += 1) {
+				let o = n[e];
+				if (o) a.push(o);
+				else {
+					if (a.length >= 2) {
+						let e = a[0], n = a[a.length - 1];
+						r.push([
+							{
+								x: e.x,
+								y: t
+							},
+							...a,
+							{
+								x: n.x,
+								y: t
+							}
+						]);
+					} else a.length === 1 && i.push(a[0]);
+					a = [];
+				}
+			}
+			if (a.length >= 2) {
+				let e = a[0], n = a[a.length - 1];
+				r.push([
+					{
+						x: e.x,
+						y: t
+					},
+					...a,
+					{
+						x: n.x,
+						y: t
+					}
+				]);
+			} else a.length === 1 && i.push(a[0]);
+			return {
+				polygons: r,
+				singles: i
+			};
+		}
+		function ar(e) {
+			let t = e.coordinatesLine.map((t, n) => e.series[n] != null && Number.isFinite(t?.y) ? t : null), n = [], r = [];
+			for (let e = 0; e < t.length; e += 1) {
+				let i = t[e];
+				i ? r.push(i) : (r.length >= 2 && n.push(r), r = []);
+			}
+			return r.length >= 2 && n.push(r), n;
+		}
+		function or(e) {
+			if (On.value) {
+				let t = ar(e);
+				for (let n of t) d(O.value, n, {
+					color: e.color,
+					lineWidth: 3
+				});
+			} else d(O.value, e.coordinatesLine, {
+				color: e.color,
+				lineWidth: 3
+			});
+		}
+		function sr(e) {
+			let t = !!On.value;
+			if (e.useArea) {
+				let n = H.value.stacked ? e.localZero : G.value.zero;
+				if (t) {
+					let { polygons: t, singles: r } = ir(e, n);
+					for (let n of t) ke(O.value, n, {
+						fillColor: o(e.color, B.value.style.chart.area.opacity),
+						strokeColor: "transparent"
+					});
+					let i = k.value / 200 * B.value.style.chart.line.plots.radiusRatio;
+					for (let t of r) Oe(O.value, {
+						x: t.x,
+						y: t.y
+					}, i, {
+						color: B.value.style.chart.backgroundColor,
+						fillStyle: e.color,
+						strokeColor: "transparent"
+					});
+				} else {
+					let t = {
+						x: e.coordinatesLine[0].x,
+						y: n
+					}, r = {
+						x: e.coordinatesLine.at(-1).x,
+						y: n
+					};
+					ke(O.value, [
+						t,
+						...e.coordinatesLine,
+						r
+					], {
+						fillColor: o(e.color, B.value.style.chart.area.opacity),
+						strokeColor: "transparent"
+					});
+				}
+				or(e);
+				return;
+			}
+			or(e);
+		}
+		function cr() {
+			q.value.forEach((e, t) => {
+				d(O.value, [{
+					x: W.value.left,
+					y: W.value.bottom - e.yOffset
+				}, {
+					x: W.value.right,
+					y: W.value.bottom - e.yOffset
+				}], {
+					color: B.value.style.chart.grid.x.horizontalLines.color,
+					lineWidth: 1
+				});
+			});
+		}
+		function lr() {
+			let { left: e, top: t, width: n, height: r } = W.value, i = J.value.start, a = J.value.end - i, o = n / a, s = Y.value.start - i, c = Y.value.end - i, l = Math.max(0, Math.min(a, s)), u = Math.max(0, Math.min(a, c));
+			je(O.value, [
+				{
+					x: e + l * o,
+					y: t
+				},
+				{
+					x: e + l * o + (u - l) * o,
+					y: t
+				},
+				{
+					x: e + l * o + (u - l) * o,
+					y: t + r
+				},
+				{
+					x: e + l * o,
+					y: t + r
+				}
+			], {
+				fillColor: B.value.style.chart.zoom.preview.fill,
+				strokeColor: B.value.style.chart.zoom.preview.stroke,
+				lineDash: [
+					,
+					,
+					,
+					,
+				].fill(B.value.style.chart.zoom.preview.strokeDasharray),
+				lineWidth: B.value.style.chart.zoom.preview.strokeWidth
+			});
+		}
+		function Q() {
+			!z.value || !V.value || !O.value || (Un(), N.value ? ((j.value !== null || L.value !== null) && B.value.style.chart.selector.show && tr(), rr(), H.value.stacked && B.value.style.chart.grid.x.showAxis && cr(), Vn.value.forEach((e) => {
+				(e.type === "line" || !e.type) && sr(e), P.value && (Wn(e), H.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && qn(e));
+			}), V.value && (At.value = Ae(V.value))) : (At.value && (O.value.clearRect(0, 0, 1e4, 1e4), O.value.drawImage(At.value, 0, 0)), (j.value !== null || L.value !== null) && B.value.style.chart.selector.show && tr(), (j.value !== null || L.value !== null) && q.value.forEach((e) => {
+				let t = j.value ?? L.value, n = e.coordinatesLine[t];
+				(e.type === "line" || !e.type || e.type === "plot") && n && Number.isFinite(n.x) && Number.isFinite(n.y) && Oe(O.value, {
+					x: n.x,
+					y: n.y
+				}, k.value / 150 * B.value.style.chart.line.plots.radiusRatio, {
+					color: B.value.style.chart.backgroundColor,
+					fillStyle: e.color,
+					strokeColor: "transparent"
+				});
+			})), B.value.style.chart.grid.x.timeLabels.show && er(), B.value.style.chart.selector.show && B.value.style.chart.selector.showHorizontalSelector && nr(), Kn(), Gn(), B.value.style.chart.zoom.preview.enable && (J.value.start !== Y.value.start || J.value.end !== Y.value.end) && lr(), N.value = !1);
+		}
+		let ur = Ee(() => {
+			P.value = !0, Hn();
+		}, U.value > 200 ? 10 : 1, !P.value);
+		function dr(e) {
+			if ([null, void 0].includes(j.value ?? L.value) || !e.coordinatesLine[j.value ?? L.value]) return !1;
+			let { y: t, value: n } = e.coordinatesLine[j.value ?? L.value];
+			return {
+				y: t,
+				value: n
+			};
+		}
+		function fr(e) {
+			if (!z.value || !V.value || vn.value) return;
+			let { left: t, top: n } = V.value.getBoundingClientRect(), r = e.clientX - t;
+			if (I.value = (e.clientY - n) * 2, (I.value < W.value.top || I.value > W.value.bottom) && (I.value = null), r * 2 < W.value.left || r * 2 > W.value.right) {
+				_r();
+				return;
+			}
+			let i = r * 2 - W.value.left, a = Math.floor(i / W.value.slot);
+			if (j.value = a, R.value = a, Et.value = !0, Kt.value = !1, !P.value) return;
+			let o = "", s = B.value.style.chart.tooltip.customFormat, c = q.value.map((e) => ({
+				shape: e.shape || null,
+				name: e.name,
+				color: e.color,
+				type: e.type || "line",
+				value: e.series.find((e, t) => t === j.value)
+			}));
+			Ot.value = {
+				timeLabel: B.value.style.chart.grid.x.timeLabels.values.slice(J.value.start, J.value.end)[j.value] ? B.value.style.chart.tooltip.useDefaultTimeFormat ? Z.value.slice(J.value.start, J.value.end)[j.value]?.text : $n.value[j.value]?.text : "",
+				datapoint: c,
+				seriesIndex: j.value,
+				series: q.value,
+				config: B.value
+			}, xr({
+				seriesIndex: j.value,
+				datapoint: c
+			}), ee(s) && oe(() => s({
+				seriesIndex: j.value,
+				datapoint: c,
+				series: q.value,
+				config: B.value
+			})) ? Dt.value = s({
+				seriesIndex: j.value,
+				datapoint: c,
+				series: q.value,
+				config: B.value
+			}) : (B.value.style.chart.grid.x.timeLabels.values.slice(J.value.start, J.value.end)[j.value] ? o += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${B.value.style.chart.tooltip.borderColor}; width:100%">${B.value.style.chart.tooltip.useDefaultTimeFormat ? Z.value.slice(J.value.start, J.value.end)[j.value]?.text : $n.value[j.value]?.text}</div>` : o += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${B.value.style.chart.tooltip.borderColor}; width:100%">${Z.value[j.value + J.value.start]?.text ?? ""}</div>`, o += Dn.value.join(""), Dt.value = o), P.value = !1;
+		}
+		function pr(e) {
+			return q.value.map((t) => ({
+				shape: t.shape || null,
+				name: t.name,
+				color: t.color,
+				type: t.type || "line",
+				value: t.series.find((t, n) => n === e)
+			}));
+		}
+		function mr(e) {
+			let t = "", n = B.value.style.chart.tooltip.customFormat, r = pr(e);
+			return xr({
+				seriesIndex: e,
+				datapoint: r
+			}), ee(n) && oe(() => n({
+				seriesIndex: e,
+				datapoint: r,
+				series: q.value,
+				config: B.value
+			})) ? n({
+				seriesIndex: e,
+				datapoint: r,
+				series: q.value,
+				config: B.value
+			}) : (B.value.style.chart.grid.x.timeLabels.values.slice(J.value.start, J.value.end)[e] ? t += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${B.value.style.chart.tooltip.borderColor}; width:100%">${B.value.style.chart.tooltip.useDefaultTimeFormat ? Z.value.slice(J.value.start, J.value.end)[e]?.text : $n.value[e]?.text}</div>` : t += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${B.value.style.chart.tooltip.borderColor}; width:100%">${Z.value[e + J.value.start]?.text ?? ""}</div>`, t += Dn.value.join(""), t);
+		}
+		function hr(e) {
+			if (!V.value || !W.value?.slot) return;
+			let t = V.value.getBoundingClientRect(), n = t.width / W.value.canvasWidth, r = t.height / W.value.canvasHeight, i = W.value.left + W.value.slot * e + W.value.slot / 2, a = W.value.top + W.value.height / 2;
+			Jt.value = {
+				x: t.left + i * n,
+				y: t.top + a * r
+			};
+		}
+		function gr(e, { fromKeyboard: t = !1 } = {}) {
+			!z.value || vn.value || e != null && (e < 0 || e >= J.value.end - J.value.start || (j.value = e, R.value = e, Et.value = !0, Kt.value = t, Dt.value = mr(e), t && hr(e), P.value = !1, Q()));
+		}
+		function _r() {
+			Et.value = !1, j.value = null, R.value = null, Dt.value = "", I.value = null, Kt.value = !1, Q();
+		}
+		function vr() {
+			qt.value = !0;
+		}
+		function yr() {
+			qt.value = !1, _r();
+		}
+		function br(e) {
+			if (!V.value || Vr.value || document.activeElement !== V.value) return;
+			let t = e.key === "ArrowLeft", n = e.key === "ArrowRight";
+			if (!t && !n) return;
+			let r = J.value.end - J.value.start;
+			if (r <= 0) return;
+			e.preventDefault(), e.stopPropagation();
+			let i = R.value;
+			i !== null && i >= 0 && i < r ? n ? (i += 1, i >= r && (i = 0)) : (--i, i < 0 && (i = r - 1)) : i = n ? 0 : r - 1, gr(i, { fromKeyboard: !0 });
+		}
+		function xr({ seriesIndex: e, datapoint: t }) {
+			let n = J.value.start + e;
+			Yt("selectX", {
+				dataset: t,
+				index: n,
+				indexLabel: ""
+			});
+		}
+		C(() => T.selectedXIndex, (e) => {
+			if ([null, void 0].includes(T.selectedXIndex)) {
+				_r();
+				return;
+			}
+			let t = e - J.value.start;
+			t < 0 || e >= J.value.end ? _r() : gr(t, { fromKeyboard: !1 });
+		}, { immediate: !0 }), C(() => j.value, (e) => {
+			ur();
+		}), C(() => J.value, (e) => {
+			N.value = !0, Q();
+		}, { deep: !0 }), C(() => Y.value, (e) => {
+			Q();
+		}, { deep: !0 }), C(() => H.value.showDataLabels, (e) => {
+			N.value = !0, Q();
+		}), C(() => I.value, (e) => {
+			e && Q();
+		}), C(() => H.value.stacked, (e) => {
+			N.value = !0, P.value = !0, ur();
+		});
+		function Sr() {
+			_r();
+		}
+		let $ = et(null), Cr = et(null), wr = et(null);
+		Qe(() => {
+			zt.value = !0, Tr();
+		});
+		function Tr() {
+			if (l(T.dataset) && se({
+				componentName: "VueUiXyCanvas",
+				type: "dataset",
+				debug: en.value
+			}), Je(() => {
+				V.value && !O.value && (O.value = V.value.getContext("2d", { willReadFrequently: !0 })), O.value && z.value && (N.value = !0, P.value = !0, Hn());
+			}), B.value.responsive) {
+				let e = De(() => {
+					let { width: e, height: t } = Me({
+						chart: D.value,
+						title: B.value.style.chart.title.text ? Nt.value : null,
+						legend: B.value.style.chart.legend.show ? Pt.value : null,
+						slicer: B.value.style.chart.zoom.show && U.value > 6 ? F.value?.$el : null,
+						source: Ft.value
+					});
+					requestAnimationFrame(() => {
+						dn.value = `${e} / ${t}`;
+					});
+				});
+				$.value && (Cr.value && $.value.unobserve(Cr.value), $.value.disconnect()), $.value = new ResizeObserver(e), Cr.value = D.value.parentNode, $.value.observe(Cr.value);
+			}
+			wr.value && wr.value.disconnect(), wr.value = new ResizeObserver(async (e) => {
+				for (let t of e) t.contentBoxSize && Tt.value && (N.value = !0, ur());
+			}), wr.value.observe(Tt.value), Nn();
+		}
+		Ze(() => {
+			wr.value && wr.value.disconnect(), $.value && (Cr.value && $.value.unobserve(Cr.value), $.value.disconnect());
+		});
+		function Er() {
+			M.value.length ? M.value = [] : jr.value.forEach((e, t) => {
+				M.value.push(t);
+			}), N.value = !0, ur(), Yt("selectLegend", q.value);
+		}
+		function Dr(e) {
+			M.value.includes(e) ? M.value = M.value.filter((t) => t !== e) : M.value.push(e), N.value = !0, ur(), Yt("selectLegend", q.value);
+		}
+		function Or(e) {
+			return K.value.length ? K.value.find((t) => t.name === e) || (en.value && console.warn(`VueUiXyCanvas - Series name not found "${e}"`), null) : (en.value && console.warn("VueUiXyCanvas - There are no series to show."), null);
+		}
+		function kr(e) {
+			let t = Or(e);
+			t !== null && M.value.includes(t.absoluteIndex) && Dr(t.absoluteIndex);
+		}
+		function Ar(e) {
+			let t = Or(e);
+			t !== null && (M.value.includes(t.absoluteIndex) || Dr(t.absoluteIndex));
+		}
+		let jr = p(() => K.value.map((e, t) => ({
+			...e,
+			name: e.name,
+			color: u(e.color) || _n.value[t] || s[t] || s[t % s.length],
+			shape: e.shape || "circle",
+			prefix: e.prefix || "",
+			suffix: e.suffix || "",
+			rounding: e.rounding || 0
+		})).map((e) => ({
+			...e,
+			opacity: M.value.includes(e.absoluteIndex) ? .5 : 1,
+			segregate: () => Dr(e.absoluteIndex),
+			isSegregated: M.value.includes(e.absoluteIndex)
+		}))), Mr = p(() => ({
+			cy: "donut-div-legend",
+			backgroundColor: B.value.style.chart.legend.backgroundColor,
+			color: B.value.style.chart.legend.color,
+			fontSize: B.value.style.chart.legend.fontSize,
+			paddingBottom: 12,
+			fontWeight: B.value.style.chart.legend.bold ? "bold" : ""
+		})), Nr = p(() => {
+			let e = [""].concat(q.value.map((e) => e.name), "__SUM__"), t = [];
+			for (let e = 0; e < U.value; e += 1) {
+				let n = q.value.map((t) => t.series[e] ?? 0).reduce((e, t) => e + t, 0);
+				t.push([B.value.style.chart.grid.x.timeLabels.values.slice(J.value.start, J.value.end)[e] ? Z?.value?.slice(J.value.start, J.value.end)?.[e]?.text ?? e + 1 : e + 1].concat(q.value.map((t) => (t.series[e] ?? 0).toFixed(B.value.table.rounding)), (n ?? 0).toFixed(B.value.table.rounding)));
+			}
+			let n = {
+				th: {
+					backgroundColor: B.value.table.th.backgroundColor,
+					color: B.value.table.th.color,
+					outline: B.value.table.th.outline
+				},
+				td: {
+					backgroundColor: B.value.table.td.backgroundColor,
+					color: B.value.table.td.color,
+					outline: B.value.table.td.outline
+				},
+				breakpoint: B.value.table.responsiveBreakpoint
+			}, r = [B.value.table.columnNames.period].concat(q.value.map((e) => e.name), B.value.table.columnNames.total);
+			return {
+				head: e,
+				body: t.slice(0, J.value.end - J.value.start),
+				config: n,
+				colNames: r
+			};
+		}), Pr = p(() => {
+			if (q.value.length === 0) return {
+				head: [],
+				body: [],
+				config: {},
+				columnNames: []
+			};
+			let e = q.value.map((e) => ({
+				label: e.name,
+				color: e.color,
+				type: e.type
+			})), t = [];
+			for (let e = J.value.start; e < J.value.end; e += 1) {
+				let n = [B.value.style.chart.grid.x.timeLabels.values[e] ? Z.value[e].text : e + 1];
+				q.value.forEach((t) => {
+					n.push(Number((t.series[e] || 0).toFixed(B.value.table.rounding)));
+				}), t.push(n);
+			}
+			return {
+				head: e,
+				body: t
+			};
+		});
+		function Fr(e = null) {
+			let n = [
+				[B.value.style.chart.title.text],
+				[B.value.style.chart.title.subtitle.text],
+				[""]
+			], r = ["", ...Pr.value.head.map((e) => e.label)], a = Pr.value.body, o = n.concat([r]).concat(a), s = i(o);
+			e ? e(s) : t({
+				csvContent: s,
+				title: B.value.style.chart.title.text || "vue-ui-xy-canvas"
+			});
+		}
+		function Ir() {
+			return q.value;
+		}
+		function Lr() {
+			H.value.showTable = !H.value.showTable;
+		}
+		function Rr() {
+			H.value.showDataLabels = !H.value.showDataLabels;
+		}
+		function zr() {
+			H.value.stacked = !H.value.stacked;
+		}
+		function Br() {
+			H.value.showTooltip = !H.value.showTooltip;
+		}
+		let Vr = b(!1);
+		function Hr() {
+			Vr.value = !Vr.value;
+		}
+		async function Ur({ scale: e = 2 } = {}) {
+			if (!D.value) return;
+			let { imageUri: t, base64: n } = await Ce({
+				domElement: D.value,
+				base64: !0,
+				img: !0,
+				scale: e
+			}), r = D.value.getBoundingClientRect(), i = {
+				width: r.width,
+				height: r.height,
+				aspectRatio: r.height ? r.width / r.height : 0
+			}, a = await ie(t, e) ?? i;
+			return {
+				imageUri: t,
+				base64: n,
+				title: B.value.style.chart.title.text,
+				...a
+			};
+		}
+		let Wr = p(() => {
+			let e = B.value.table.useDialog && !B.value.table.show, t = H.value.showTable;
+			return {
+				component: e ? xt : Fe,
+				title: `${B.value.style.chart.title.text}${B.value.style.chart.title.subtitle.text ? `: ${B.value.style.chart.title.subtitle.text}` : ""}`,
+				props: e ? {
+					backgroundColor: B.value.table.th.backgroundColor,
+					color: B.value.table.th.color,
+					headerColor: B.value.table.th.color,
+					headerBg: B.value.table.th.backgroundColor,
+					isFullscreen: Mt.value,
+					fullscreenParent: D.value,
+					forcedWidth: Math.min(800, window.innerWidth * .8),
+					isCursorPointer: $t.value
+				} : {
+					hideDetails: !0,
+					config: {
+						open: t,
+						maxHeight: 1e4,
+						body: {
+							backgroundColor: B.value.style.chart.backgroundColor,
+							color: B.value.style.chart.color
+						},
+						head: {
+							backgroundColor: B.value.style.chart.backgroundColor,
+							color: B.value.style.chart.color
+						}
+					}
+				}
+			};
+		});
+		C(() => H.value.showTable, (e) => {
+			B.value.table.show || (e && B.value.table.useDialog && Bt.value ? Bt.value.open() : "close" in Bt.value && Bt.value.close());
+		});
+		function Gr() {
+			H.value.showTable = !1, Vt.value && Vt.value.setTableIconState(!1);
+		}
+		function Kr(e) {
+			if (e?.stage === "start") {
+				Gt.value = !0;
+				return;
+			}
+			if (e?.stage === "end") {
+				Gt.value = !1;
+				return;
+			}
+			hn();
+		}
+		async function qr() {
+			if (Yt("copyAlt", {
+				config: B.value,
+				dataset: q.value
+			}), !B.value.userOptions.callbacks.altCopy) {
+				console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+				return;
+			}
+			await Promise.resolve(B.value.userOptions.callbacks.altCopy({
+				config: B.value,
+				dataset: q.value
+			}));
+		}
+		return Te({
+			getData: Ir,
+			getImage: Ur,
+			generateCsv: Fr,
+			generatePdf: mn,
+			generateImage: hn,
+			hideSeries: Ar,
+			showSeries: kr,
+			toggleTable: Lr,
+			toggleLabels: Rr,
+			toggleStack: zr,
+			toggleTooltip: Br,
+			toggleAnnotator: Hr,
+			toggleFullscreen: gn,
+			copyAlt: qr
+		}), (t, n) => (y(), He("div", {
+			style: Xe(`width:100%; position:relative; ${B.value.responsive ? "height: 100%" : ""}; background:${B.value.style.chart.backgroundColor};`),
+			ref_key: "xy",
+			ref: D,
+			id: `xy_canvas_${E.value}`,
+			class: Ye(`vue-data-ui-component vue-ui-xy-canvas ${Mt.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+			onMouseenter: cn,
+			onMouseleave: ln
+		}, [
+			g("div", {
+				id: `chart-instructions-${E.value}`,
+				class: "sr-only"
+			}, [g("p", null, tt(B.value.a11y.translations.keyboardNavigation), 1)], 8, st),
+			g("div", ct, tt(Qt.value), 1),
+			B.value.style.chart.title.text ? (y(), He("div", {
+				key: 0,
+				ref_key: "chartTitle",
+				ref: Nt,
+				style: Xe(`width:100%;background:${B.value.style.chart.backgroundColor};`)
+			}, [(y(), m(we, {
+				key: `title_${It.value}`,
+				config: {
+					title: {
+						cy: "xy-canvas-title",
+						...B.value.style.chart.title
+					},
+					subtitle: {
+						cy: "xy-canvas-subtitle",
+						...B.value.style.chart.title.subtitle
+					}
+				}
+			}, null, 8, ["config"]))], 4)) : h("", !0),
+			g("div", { id: `legend-top-${E.value}` }, null, 8, lt),
+			B.value.userOptions.show && z.value && (S(sn) || S(an)) ? (y(), m(S(yt), {
+				ref_key: "userOptionsRef",
+				ref: Vt,
+				key: `user_option_${jt.value}`,
+				backgroundColor: B.value.style.chart.backgroundColor,
+				color: B.value.style.chart.color,
+				isPrinting: S(fn),
+				isImaging: S(pn),
+				uid: E.value,
+				hasTooltip: B.value.userOptions.buttons.tooltip && B.value.style.chart.tooltip.show,
+				hasPdf: B.value.userOptions.buttons.pdf,
+				hasImg: B.value.userOptions.buttons.img,
+				hasXls: B.value.userOptions.buttons.csv,
+				hasLabel: B.value.userOptions.buttons.labels,
+				hasStack: e.dataset.length > 1 && B.value.userOptions.buttons.stack,
+				hasFullscreen: B.value.userOptions.buttons.fullscreen,
+				hasAltCopy: B.value.userOptions.buttons.altCopy,
+				hasTable: J.value.end - J.value.start <= 730 && B.value.userOptions.buttons.table,
+				isFullscreen: Mt.value,
+				isTooltip: H.value.showTooltip,
+				isStacked: H.value.stacked,
+				titles: { ...B.value.userOptions.buttonTitles },
+				chartElement: D.value,
+				position: B.value.userOptions.position,
+				hasAnnotator: B.value.userOptions.buttons.annotator,
+				isAnnotation: Vr.value,
+				callbacks: B.value.userOptions.callbacks,
+				printScale: B.value.userOptions.print.scale,
+				tableDialog: B.value.table.useDialog,
+				isCursorPointer: $t.value,
+				onToggleFullscreen: gn,
+				onGeneratePdf: S(mn),
+				onGenerateCsv: Fr,
+				onGenerateImage: Kr,
+				onToggleTable: Lr,
+				onToggleLabels: Rr,
+				onToggleStack: zr,
+				onToggleTooltip: Br,
+				onToggleAnnotator: Hr,
+				onCopyAlt: qr,
+				style: Xe({ visibility: S(sn) ? S(an) ? "visible" : "hidden" : "visible" })
+			}, Ue({ _: 2 }, [
+				t.$slots.menuIcon ? {
+					name: "menuIcon",
+					fn: w(({ isOpen: e, color: n }) => [x(t.$slots, "menuIcon", v(_({
+						isOpen: e,
+						color: n
+					})), void 0, !0)]),
+					key: "0"
+				} : void 0,
+				t.$slots.optionTooltip ? {
+					name: "optionTooltip",
+					fn: w(() => [x(t.$slots, "optionTooltip", {}, void 0, !0)]),
+					key: "1"
+				} : void 0,
+				t.$slots.optionPdf ? {
+					name: "optionPdf",
+					fn: w(() => [x(t.$slots, "optionPdf", {}, void 0, !0)]),
+					key: "2"
+				} : void 0,
+				t.$slots.optionCsv ? {
+					name: "optionCsv",
+					fn: w(() => [x(t.$slots, "optionCsv", {}, void 0, !0)]),
+					key: "3"
+				} : void 0,
+				t.$slots.optionImg ? {
+					name: "optionImg",
+					fn: w(() => [x(t.$slots, "optionImg", {}, void 0, !0)]),
+					key: "4"
+				} : void 0,
+				t.$slots.optionTable ? {
+					name: "optionTable",
+					fn: w(() => [x(t.$slots, "optionTable", {}, void 0, !0)]),
+					key: "5"
+				} : void 0,
+				t.$slots.optionLabels ? {
+					name: "optionLabels",
+					fn: w(() => [x(t.$slots, "optionLabels", {}, void 0, !0)]),
+					key: "6"
+				} : void 0,
+				t.$slots.optionStack ? {
+					name: "optionStack",
+					fn: w(() => [x(t.$slots, "optionStack", {}, void 0, !0)]),
+					key: "7"
+				} : void 0,
+				t.$slots.optionFullscreen ? {
+					name: "optionFullscreen",
+					fn: w(({ toggleFullscreen: e, isFullscreen: n }) => [x(t.$slots, "optionFullscreen", v(_({
+						toggleFullscreen: e,
+						isFullscreen: n
+					})), void 0, !0)]),
+					key: "8"
+				} : void 0,
+				t.$slots.optionAnnotator ? {
+					name: "optionAnnotator",
+					fn: w(({ toggleAnnotator: e, isAnnotator: n }) => [x(t.$slots, "optionAnnotator", v(_({
+						toggleAnnotator: e,
+						isAnnotator: n
+					})), void 0, !0)]),
+					key: "9"
+				} : void 0,
+				t.$slots.optionAltCopy ? {
+					name: "optionAltCopy",
+					fn: w(({ altCopy: e }) => [x(t.$slots, "optionAltCopy", v(_({ altCopy: e })), void 0, !0)]),
+					key: "10"
+				} : void 0,
+				t.$slots["custom-menu-before"] ? {
+					name: "custom-menu-before",
+					fn: w(() => [x(t.$slots, "custom-menu-before", {}, void 0, !0)]),
+					key: "11"
+				} : void 0,
+				t.$slots["custom-menu-after"] ? {
+					name: "custom-menu-after",
+					fn: w(() => [x(t.$slots, "custom-menu-after", {}, void 0, !0)]),
+					key: "12"
+				} : void 0
+			]), 1032, /* @__PURE__ */ "backgroundColor.color.isPrinting.isImaging.uid.hasTooltip.hasPdf.hasImg.hasXls.hasLabel.hasStack.hasFullscreen.hasAltCopy.hasTable.isFullscreen.isTooltip.isStacked.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : h("", !0),
+			g("div", {
+				class: "vue-ui-xy-canvas",
+				style: Xe(`position: relative; aspect-ratio: ${dn.value}`),
+				ref_key: "container",
+				ref: Tt
+			}, [
+				g("canvas", {
+					ref_key: "canvas",
+					ref: V,
+					"aria-label": Zt.value,
+					"aria-describedby": `chart-instructions-${E.value}`,
+					role: "img",
+					"aria-live": "polite",
+					tabindex: "0",
+					style: {
+						width: "100%",
+						height: "100%"
+					},
+					onMousemove: n[0] ||= (e) => fr(e),
+					onMouseleave: Sr,
+					onFocus: vr,
+					onBlur: yr,
+					onKeydown: br
+				}, null, 40, ut),
+				t.$slots.hint ? (y(), He("div", dt, [x(t.$slots, "hint", v(_({
+					hint: B.value.a11y.translations.keyboardNavigation,
+					isVisible: qt.value
+				})), void 0, !0)])) : h("", !0),
+				x(t.$slots, "skeleton", {}, () => [S(nn) ? (y(), m(be, { key: 0 })) : h("", !0)], !0),
+				Ge(S(_t), {
+					teleportTo: B.value.style.chart.tooltip.teleportTo,
+					show: H.value.showTooltip && Et.value,
+					backgroundColor: B.value.style.chart.tooltip.backgroundColor,
+					color: B.value.style.chart.tooltip.color,
+					fontSize: B.value.style.chart.tooltip.fontSize,
+					borderRadius: B.value.style.chart.tooltip.borderRadius,
+					borderColor: B.value.style.chart.tooltip.borderColor,
+					borderWidth: B.value.style.chart.tooltip.borderWidth,
+					position: B.value.style.chart.tooltip.position,
+					offsetX: B.value.style.chart.tooltip.offsetX,
+					offsetY: B.value.style.chart.tooltip.offsetY,
+					parent: t.$refs.xy,
+					content: Dt.value,
+					isFullscreen: Mt.value,
+					backgroundOpacity: B.value.style.chart.tooltip.backgroundOpacity,
+					isCustom: S(ee)(B.value.style.chart.tooltip.customFormat),
+					smooth: B.value.style.chart.tooltip.smooth,
+					backdropFilter: B.value.style.chart.tooltip.backdropFilter,
+					smoothForce: B.value.style.chart.tooltip.smoothForce,
+					smoothSnapThreshold: B.value.style.chart.tooltip.smoothSnapThreshold,
+					isA11yMode: Kt.value,
+					a11yPosition: Jt.value
+				}, {
+					"tooltip-before": w(() => [x(t.$slots, "tooltip-before", v(_({ ...Ot.value })), void 0, !0)]),
+					tooltip: w(() => [x(t.$slots, "tooltip", v(_({ ...Ot.value })), void 0, !0)]),
+					"tooltip-after": w(() => [x(t.$slots, "tooltip-after", v(_({ ...Ot.value })), void 0, !0)]),
+					_: 3
+				}, 8, [
+					"teleportTo",
+					"show",
+					"backgroundColor",
+					"color",
+					"fontSize",
+					"borderRadius",
+					"borderColor",
+					"borderWidth",
+					"position",
+					"offsetX",
+					"offsetY",
+					"parent",
+					"content",
+					"isFullscreen",
+					"backgroundOpacity",
+					"isCustom",
+					"smooth",
+					"backdropFilter",
+					"smoothForce",
+					"smoothSnapThreshold",
+					"isA11yMode",
+					"a11yPosition"
+				])
+			], 4),
+			B.value.style.chart.zoom.show && U.value > 6 && z.value && Ut.value && !S(nn) ? (y(), m(Pe, {
+				key: 2,
+				ref_key: "chartSlicer",
+				ref: F,
+				"data-dom-to-png-ignore-layout": "",
+				allMinimaps: An.value,
+				background: B.value.style.chart.zoom.color,
+				borderColor: B.value.style.chart.backgroundColor,
+				customFormat: B.value.style.chart.zoom.customFormat,
+				cutNullValues: On.value,
+				enableRangeHandles: B.value.style.chart.zoom.enableRangeHandles,
+				enableSelectionDrag: B.value.style.chart.zoom.enableSelectionDrag,
+				end: J.value.end,
+				focusOnDrag: B.value.style.chart.zoom.focusOnDrag,
+				focusRangeRatio: B.value.style.chart.zoom.focusRangeRatio,
+				fontSize: B.value.style.chart.zoom.fontSize,
+				immediate: !B.value.style.chart.zoom.preview.enable,
+				inputColor: B.value.style.chart.zoom.color,
+				isPreview: Pn.value,
+				labelLeft: B.value.style.chart.grid.x.timeLabels.values[J.value.start] ? Z.value[J.value.start]?.text : "",
+				labelRight: B.value.style.chart.grid.x.timeLabels.values[J.value.end - 1] ? Z.value[J.value.end - 1]?.text : "",
+				max: U.value,
+				min: 0,
+				minimap: kn.value,
+				minimapCompact: B.value.style.chart.zoom.minimap.compact,
+				minimapFrameColor: B.value.style.chart.zoom.minimap.frameColor,
+				minimapIndicatorColor: B.value.style.chart.zoom.minimap.indicatorColor,
+				minimapLineColor: B.value.style.chart.zoom.minimap.lineColor,
+				minimapMerged: B.value.style.chart.zoom.minimap.merged,
+				minimapSelectedColor: B.value.style.chart.zoom.minimap.selectedColor,
+				minimapSelectedColorOpacity: B.value.style.chart.zoom.minimap.selectedColorOpacity,
+				minimapSelectedIndex: j.value,
+				minimapSelectionRadius: B.value.style.chart.zoom.minimap.selectionRadius,
+				preciseLabels: Qn.value?.length ? Qn.value : Z.value,
+				refreshEndPoint: B.value.style.chart.zoom.endIndex === null ? U.value : B.value.style.chart.zoom.endIndex + 1,
+				refreshStartPoint: B.value.style.chart.zoom.startIndex === null ? 0 : B.value.style.chart.zoom.startIndex,
+				selectColor: B.value.style.chart.zoom.highlightColor,
+				selectedSeries: K.value,
+				smoothMinimap: B.value.style.chart.zoom.minimap.smooth,
+				start: J.value.start,
+				timeLabels: Z.value,
+				usePreciseLabels: B.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !B.value.style.chart.zoom.useDefaultFormat,
+				textColor: B.value.style.chart.color,
+				useResetSlot: B.value.style.chart.zoom.useResetSlot,
+				valueEnd: J.value.end,
+				valueStart: J.value.start,
+				verticalHandles: B.value.style.chart.zoom.minimap.verticalHandles,
+				maxWidth: B.value.style.chart.zoom.maxWidth,
+				minimapLeftInsetRatio: W.value.canvasWidth > 0 && B.value.style.chart.zoom.autoFit ? W.value.left / W.value.canvasWidth : null,
+				minimapRightInsetRatio: W.value.canvasWidth > 0 && B.value.style.chart.zoom.autoFit ? (W.value.canvasWidth - W.value.right) / W.value.canvasWidth : null,
+				additionalMinimapHeight: B.value.style.chart.zoom.minimap.additionalHeight,
+				handleType: B.value.style.chart.zoom.minimap.handleType,
+				handleIconColor: B.value.style.chart.zoom.minimap.handleIconColor,
+				handleBorderWidth: B.value.style.chart.zoom.minimap.handleBorderWidth,
+				handleBorderColor: B.value.style.chart.zoom.minimap.handleBorderColor,
+				handleFill: B.value.style.chart.zoom.minimap.handleFill,
+				handleWidth: B.value.style.chart.zoom.minimap.handleWidth,
+				onFutureEnd: n[1] ||= (e) => Fn("end", e),
+				onFutureStart: n[2] ||= (e) => Fn("start", e),
+				onReset: Nn,
+				onTrapMouse: yn,
+				"onUpdate:end": Rn,
+				"onUpdate:start": Ln
+			}, {
+				"reset-action": w(({ reset: e }) => [x(t.$slots, "reset-action", v(_({ reset: e })), void 0, !0)]),
+				_: 3
+			}, 8, /* @__PURE__ */ "allMinimaps.background.borderColor.customFormat.cutNullValues.enableRangeHandles.enableSelectionDrag.end.focusOnDrag.focusRangeRatio.fontSize.immediate.inputColor.isPreview.labelLeft.labelRight.max.minimap.minimapCompact.minimapFrameColor.minimapIndicatorColor.minimapLineColor.minimapMerged.minimapSelectedColor.minimapSelectedColorOpacity.minimapSelectedIndex.minimapSelectionRadius.preciseLabels.refreshEndPoint.refreshStartPoint.selectColor.selectedSeries.smoothMinimap.start.timeLabels.usePreciseLabels.textColor.useResetSlot.valueEnd.valueStart.verticalHandles.maxWidth.minimapLeftInsetRatio.minimapRightInsetRatio.additionalMinimapHeight.handleType.handleIconColor.handleBorderWidth.handleBorderColor.handleFill.handleWidth".split("."))) : h("", !0),
+			g("div", { id: `legend-bottom-${E.value}` }, null, 8, ft),
+			zt.value && (B.value.style.chart.legend.show || t.$slots.legend) ? (y(), m(Ve, {
+				key: 3,
+				to: B.value.style.chart.legend.position === "top" ? `#legend-top-${E.value}` : `#legend-bottom-${E.value}`
+			}, [g("div", {
+				ref_key: "chartLegend",
+				ref: Pt
+			}, [x(t.$slots, "legend", { legend: jr.value }, () => [B.value.style.chart.legend.show && z.value ? (y(), m(ze, {
+				legendSet: jr.value,
+				config: Mr.value,
+				key: `legend_${Rt.value}`,
+				isCursorPointer: $t.value,
+				onClickMarker: n[3] ||= ({ i: e }) => Dr(e)
+			}, {
+				item: w(({ legend: e, index: t }) => [g("div", {
+					onClick: (t) => e.segregate(),
+					style: Xe(`opacity:${M.value.includes(t) ? .5 : 1}`)
+				}, tt(e.name), 13, pt)]),
+				legendToggle: w(() => [jr.value.length > 2 && B.value.style.chart.legend.selectAllToggle.show && !S(nn) ? (y(), m(Ie, {
+					key: 0,
+					backgroundColor: B.value.style.chart.legend.selectAllToggle.backgroundColor,
+					color: B.value.style.chart.legend.selectAllToggle.color,
+					fontSize: B.value.style.chart.legend.fontSize,
+					checked: M.value.length > 0,
+					isCursorPointer: $t.value,
+					onToggle: Er
+				}, null, 8, [
+					"backgroundColor",
+					"color",
+					"fontSize",
+					"checked",
+					"isCursorPointer"
+				])) : h("", !0)]),
+				_: 1
+			}, 8, [
+				"legendSet",
+				"config",
+				"isCursorPointer"
+			])) : h("", !0)], !0)], 512)], 8, ["to"])) : h("", !0),
+			t.$slots.watermark ? (y(), He("div", mt, [x(t.$slots, "watermark", v(_({ isPrinting: S(fn) || S(pn) || Gt.value })), void 0, !0)])) : h("", !0),
+			t.$slots.source ? (y(), He("div", {
+				key: 5,
+				ref_key: "source",
+				ref: Ft,
+				dir: "auto"
+			}, [x(t.$slots, "source", {}, void 0, !0)], 512)) : h("", !0),
+			z.value && B.value.userOptions.buttons.table ? (y(), m($e(Wr.value.component), qe({ key: 6 }, Wr.value.props, {
+				ref_key: "tableUnit",
+				ref: Bt,
+				onClose: Gr
+			}), Ue({
+				content: w(() => [(y(), m(S(vt), {
+					key: `table_${Lt.value}`,
+					colNames: Nr.value.colNames,
+					head: Nr.value.head,
+					body: Nr.value.body,
+					config: Nr.value.config,
+					title: B.value.table.useDialog ? "" : Wr.value.title,
+					withCloseButton: !B.value.table.useDialog,
+					isCursorPointer: $t.value,
+					onClose: Gr
+				}, {
+					th: w(({ th: e }) => [e === "__SUM__" ? (y(), He("div", ht, [Ge(Ne, {
+						name: "sigma",
+						stroke: Nr.value.config.th.color,
+						size: 16
+					}, null, 8, ["stroke"])])) : (y(), He("div", gt, tt(e), 1))]),
+					td: w(({ td: e }) => [We(tt(e), 1)]),
+					_: 1
+				}, 8, [
+					"colNames",
+					"head",
+					"body",
+					"config",
+					"title",
+					"withCloseButton",
+					"isCursorPointer"
+				]))]),
+				_: 2
+			}, [B.value.table.useDialog ? {
+				name: "title",
+				fn: w(() => [We(tt(Wr.value.title), 1)]),
+				key: "0"
+			} : void 0, B.value.table.useDialog ? {
+				name: "actions",
+				fn: w(() => [g("button", {
+					tabindex: "0",
+					class: "vue-ui-user-options-button",
+					onClick: n[4] ||= (e) => Fr(B.value.userOptions.callbacks.csv),
+					style: Xe({ cursor: $t.value ? "pointer" : "default" })
+				}, [Ge(Ne, {
+					name: "fileCsv",
+					stroke: Wr.value.props.color
+				}, null, 8, ["stroke"])], 4)]),
+				key: "1"
+			} : void 0]), 1040)) : h("", !0),
+			B.value.userOptions.buttons.annotator && q.value.length ? (y(), m(S(bt), {
+				key: 7,
+				parent: D.value,
+				backgroundColor: B.value.style.chart.backgroundColor,
+				color: B.value.style.chart.color,
+				active: Vr.value,
+				isCursorPointer: $t.value,
+				onClose: Hr
+			}, {
+				"annotator-action-close": w(() => [x(t.$slots, "annotator-action-close", {}, void 0, !0)]),
+				"annotator-action-color": w(({ color: e }) => [x(t.$slots, "annotator-action-color", v(_({ color: e })), void 0, !0)]),
+				"annotator-action-draw": w(({ mode: e }) => [x(t.$slots, "annotator-action-draw", v(_({ mode: e })), void 0, !0)]),
+				"annotator-action-undo": w(({ disabled: e }) => [x(t.$slots, "annotator-action-undo", v(_({ disabled: e })), void 0, !0)]),
+				"annotator-action-redo": w(({ disabled: e }) => [x(t.$slots, "annotator-action-redo", v(_({ disabled: e })), void 0, !0)]),
+				"annotator-action-delete": w(({ disabled: e }) => [x(t.$slots, "annotator-action-delete", v(_({ disabled: e })), void 0, !0)]),
+				_: 3
+			}, 8, [
+				"parent",
+				"backgroundColor",
+				"color",
+				"active",
+				"isCursorPointer"
+			])) : h("", !0)
+		], 46, ot));
+	}
+}, [["__scopeId", "data-v-c47c665d"]]);
+//#endregion
+export { at as n, _t as t };