vue-data-ui 3.15.12 → 3.16.1

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

@@ -0,0 +1,1810 @@
+import { defineAsyncComponent as ze, ref as c, computed as g, useSlots as vl, onMounted as Jt, toRefs as cl, watch as E, nextTick as Te, onBeforeUnmount as ot, watchEffect as st, shallowRef as ut, openBlock as I, createElementBlock as $e, normalizeClass as dl, normalizeStyle as ve, createElementVNode as H, toDisplayString as Ae, createBlock as q, createCommentVNode as W, unref as z, createSlots as Qt, withCtx as x, renderSlot as k, normalizeProps as K, guardReactiveProps as J, createVNode as ea, Teleport as hl, resolveDynamicComponent as fl, mergeProps as ml, createTextVNode as ta } from "vue";
+import { j as yl, t as aa, m as gl, p as se, $ as pl, n as bl, D as nt, k as ce, l as de, s as la, H as xl, a8 as Ll, J as Cl, o as kl, q as wl, T as rt, u as Ie, x as Sl, a0 as zl, a1 as Tl, U as oa } from "./lib-DBptbyyI.js";
+import { c as $l, a as it, d as Al, t as Il, u as Ml, l as T, r as _e, b as Q, p as sa } from "./useResponsive-DfdjqQps.js";
+import { u as Fl, a as ua, b as Pl } from "./useTimeLabels-C-A2uZKi.js";
+import { u as Rl } from "./useConfig-DO94Aj5s.js";
+import { u as Dl, B as Ol } from "./BaseScanner-BhhkKVoj.js";
+import { u as El } from "./usePrinter-CEpYU3r5.js";
+import { u as Xe } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Nl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Bl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Hl } from "./useChartAccessibility-9icAAmYg.js";
+import Wl from "./img-LXxMLmCg.js";
+import _l from "./vue_ui_xy_canvas-6BBDSowT.js";
+import Xl from "./Legend-CS7Xo5LK.js";
+import Vl from "./Title-BeMKE1cj.js";
+import Ul from "./BaseIcon-Cb3zzG6s.js";
+import Yl from "./vue-ui-accordion-nvggWcGN.js";
+import { S as ql } from "./SlicerPreview-DTjwV0iY.js";
+import { B as jl } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as Gl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Zl = ["id"], Kl = ["id"], Jl = {
+  class: "sr-only",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+}, Ql = ["id"], eo = ["aria-label", "aria-describedby"], to = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, ao = ["id"], lo = ["onClick"], oo = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, so = ["innerHTML"], uo = {
+  __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(vt, { expose: na, emit: ra }) {
+    const ia = ze(() => import("./Tooltip-Bf-kM3_A.js")), va = ze(() => import("./DataTable-DT2kIdQ6.js")), ca = ze(() => import("./UserOptions-rW2fRf3V.js")), da = ze(() => import("./NonSvgPenAndPaper-VyJFyJ6X.js")), ha = ze(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_xy_canvas: fa } = Rl(), { isThemeValid: ma, warnInvalidTheme: ya } = Nl(), D = vt, j = c(yl()), G = c(null), ue = c(null), v = c(null), y = c(1), ee = c(1), he = c(!1), f = c(null), fe = c(""), ct = c(null), p = c([]), ne = c(1), N = c(!0), _ = c(!0), Me = c(null), dt = c(0), me = c(!1), ht = c(null), ft = c(null), te = c(null), mt = c(null), Ve = c(0), Ue = c(0), Ye = c(0), X = c(null), yt = c(!1), ye = c(null), qe = c(null), ge = c(!1), gt = c(!1), Fe = c(!1), $ = c(null), je = c(!1), Pe = c(!1), Ge = c(!1), V = c(null), pt = c({ x: 0, y: 0 }), U = g(() => Array.isArray(Ze.value) && Ze.value.length > 0), Re = ra, ga = vl();
+    Jt(() => {
+      ga["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
+    });
+    const t = c(Je()), pa = g(() => {
+      const e = t.value.style.chart.title.text || "XY chart", a = s.value.end - s.value.start, l = h.value.filter((u) => !p.value.includes(u.absoluteIndex)).length;
+      return `${e}. ${l} series. ${a} visible data points.`;
+    }), ba = g(() => {
+      if (V.value === null) return "";
+      const e = V.value + s.value.start, a = t.value.style.chart.grid.x.timeLabels.values.slice(s.value.start, s.value.end)[V.value] ? t.value.style.chart.tooltip.useDefaultTimeFormat ? S.value.slice(s.value.start, s.value.end)[V.value]?.text : tt.value[V.value]?.text : S.value[e]?.text ?? `Point ${e + 1}`, l = h.value.filter((u) => !p.value.includes(u.absoluteIndex)).map((u) => {
+        const n = u.series[V.value], i = n?.value ?? n ?? null;
+        return `${u.name}: ${i}`;
+      }).join(". ");
+      return `${a}. ${l}.`;
+    }), le = g(() => t.value.userOptions.useCursorPointer), xa = g(() => !!t.value.debug), La = g(() => aa({
+      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: 0.05
+            },
+            scale: {
+              max: null,
+              min: null
+            },
+            zoom: {
+              endIndex: null,
+              startIndex: null
+            }
+          }
+        }
+      },
+      userConfig: t.value.skeletonConfig ?? {}
+    })), { loading: De, FINAL_DATASET: Ze } = Dl({
+      ...cl(D),
+      FINAL_CONFIG: t,
+      prepareConfig: Je,
+      skeletonDataset: D.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, 0.5, 1, 1.5, 2.5, 4, 6.5, 10.5, 17, 27.5, 44.5, 67],
+          type: "bar",
+          color: "#AAAAAA"
+        }
+      ],
+      skeletonConfig: aa({
+        defaultConfig: t.value,
+        userConfig: La.value
+      })
+    }), { userOptionsVisible: Ke, setUserOptionsVisibility: bt, keepUserOptionState: xt } = Bl({ config: t.value }), { svgRef: L } = Hl({ config: t.value.style.chart.title });
+    function Ca() {
+      bt(!0);
+    }
+    function ka() {
+      bt(!1), Re("selectX", { seriesIndex: null, datapoint: null }), f.value = null;
+    }
+    function Je() {
+      const e = Xe({
+        userConfig: D.config,
+        defaultConfig: fa
+      });
+      let a = {};
+      const l = e.theme;
+      if (l)
+        if (!ma.value(e))
+          ya(e), a = e;
+        else {
+          const u = Xe({
+            userConfig: _l[l] || D.config,
+            defaultConfig: e
+          });
+          a = {
+            ...Xe({
+              userConfig: D.config,
+              defaultConfig: u
+            }),
+            customPalette: e.customPalette.length ? e.customPalette : gl[l] || se
+          };
+        }
+      else
+        a = e;
+      return D.config && pl(D.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."), a.style.chart.grid.x.timeLabels = Xe({
+        defaultConfig: a.style.chart.grid.x.timeLabels,
+        userConfig: D.config.style.chart.grid.y.timeLabels
+      })), a;
+    }
+    E(() => D.config, (e) => {
+      De.value || (t.value = Je()), Ke.value = !t.value.userOptions.showOnChartHover, Xt(), Ve.value += 1, Ue.value += 1, Ye.value += 1, d.value.showTable = t.value.table.show, d.value.showDataLabels = t.value.style.chart.dataLabels.show, d.value.stacked = t.value.style.chart.stacked, d.value.showTooltip = t.value.style.chart.tooltip.show;
+    }, { deep: !0 }), E(() => D.dataset, async (e) => {
+      !Array.isArray(e) || e.length === 0 || (await Te(), L.value && !v.value && (v.value = L.value.getContext("2d", { willReadFrequently: !0 })), N.value = !0, _.value = !0, await xe(), Ee(), Ve.value += 1, Ue.value += 1, Ye.value += 1);
+    }, { deep: !0 });
+    const Lt = c(t.value.style.chart.aspectRatio), { isPrinting: Ct, isImaging: kt, generatePdf: wt, generateImage: St } = El({
+      elementId: `xy_canvas_${j.value}`,
+      fileName: t.value.style.chart.title.text || "vue-ui-xy-canvas",
+      options: t.value.userOptions.print
+    }), d = c({
+      showTable: t.value.table.show,
+      showDataLabels: t.value.style.chart.dataLabels.show,
+      stacked: t.value.style.chart.stacked,
+      showTooltip: t.value.style.chart.tooltip.show
+    });
+    function zt(e) {
+      me.value = e, dt.value += 1;
+    }
+    const Tt = g(() => bl(t.value.customPalette)), Qe = g(() => p.value.length === M.value.length), O = g(() => M.value ? Math.max(...M.value.filter((e, a) => Qe.value ? !0 : !p.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0);
+    function wa(e) {
+      $.value = e, Z();
+    }
+    const $t = c(0), pe = c(0);
+    function Sa() {
+      if (!v.value || !t.value.style.chart.grid.x.timeLabels.show) return 0;
+      const e = S.value || [], a = s.value.start ?? 0, l = s.value.end ?? 0;
+      if (!Math.max(0, l - a)) return 0;
+      const n = Math.round(
+        y.value / 40 * t.value.style.chart.grid.x.timeLabels.fontSizeRatio
+      ), i = `${t.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${n}px ${t.value.style.fontFamily}`;
+      v.value.save(), v.value.font = i;
+      let r = 0;
+      for (let Y = a; Y < l; Y += 1) {
+        const B = e[Y]?.text ?? `${Y + 1}`, We = v.value.measureText(String(B));
+        We.width > r && (r = We.width);
+      }
+      v.value.restore();
+      const C = (t.value.style.chart.grid.x.timeLabels.rotation || 0) * Math.PI / 180, b = n, w = Math.abs(Math.sin(C)) * r + Math.abs(Math.cos(C)) * b, R = t.value.style.chart.grid.x.timeLabels.offsetY || 1, oe = y.value / R;
+      return Math.max(0, oe + w + 4);
+    }
+    function za() {
+      $t.value = Sa();
+    }
+    function Ta() {
+      pe.value && cancelAnimationFrame(pe.value), pe.value = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          za();
+        });
+      });
+    }
+    ot(() => {
+      pe.value && cancelAnimationFrame(pe.value);
+    });
+    const o = g(() => {
+      const e = y.value - y.value * (t.value.style.chart.paddingProportions.left + t.value.style.chart.paddingProportions.right), a = ee.value * t.value.style.chart.paddingProportions.top, l = ee.value * t.value.style.chart.paddingProportions.bottom, u = $t.value, n = ee.value - l - u, i = ee.value - (a + l) - u;
+      return {
+        canvasWidth: y.value,
+        canvasHeight: ee.value,
+        left: y.value * t.value.style.chart.paddingProportions.left,
+        top: a,
+        right: y.value - y.value * t.value.style.chart.paddingProportions.right,
+        bottom: n,
+        width: e,
+        height: i,
+        slot: e / (s.value.end - s.value.start)
+      };
+    });
+    function At(e, a) {
+      return e / a;
+    }
+    function $a({ hasAutoScale: e, series: a, min: l, max: u, scale: n, yOffset: i, individualHeight: r, stackIndex: m = null }) {
+      return a.map((C, b) => {
+        const w = n.min < 0 ? Math.abs(n.min) : 0, R = At(C + w, w + n.max);
+        let oe, Y;
+        e && (oe = n.min, Y = At(C - oe, n.max - oe));
+        let B = 0;
+        return m === null ? B = o.value.bottom - o.value.height * (e ? Y : R) : B = o.value.bottom - i - r * (e ? Y : R), {
+          x: o.value.left + o.value.slot * b + o.value.slot / 2,
+          y: B,
+          value: C
+        };
+      });
+    }
+    const A = g(() => {
+      const e = t.value.style.chart.scale.min !== null ? t.value.style.chart.scale.min : Math.min(...M.value.filter((r, m) => !p.value.includes(r.absoluteIndex)).flatMap((r) => r.series.slice(s.value.start, s.value.end))), a = t.value.style.chart.scale.max !== null ? t.value.style.chart.scale.max : Math.max(...M.value.filter((r, m) => !p.value.includes(r.absoluteIndex)).flatMap((r) => r.series.slice(s.value.start, s.value.end))), l = nt(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, t.value.style.chart.scale.ticks), u = l.min < 0 ? Math.abs(l.min) : 0, n = o.value.bottom - o.value.height * (u / (l.max + u)), i = l.ticks.map((r) => ({
+        y: o.value.bottom - o.value.height * ((r + u) / (l.max + u)),
+        x: o.value.left - 8,
+        value: r
+      }));
+      return {
+        absoluteMin: u,
+        max: a,
+        min: e,
+        scale: l,
+        yLabels: i,
+        zero: n
+      };
+    }), It = g(() => h.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>${ce(
+      t.value.style.chart.dataLabels.formatter,
+      e.series[f.value] ?? "-",
+      de({
+        p: e.prefix || "",
+        v: e.series[f.value] ?? "-",
+        s: e.suffix || "",
+        r: e.rounding || 0
+      }),
+      { datapoint: e, seriesIndex: f.value }
+    )}</span>
+            </div>
+        `)), Oe = g(() => t.value.style.chart.line.cutNullValues), M = g(() => Ze.value.map((e, a) => ({
+      ...e,
+      series: xl({
+        data: Ll(e.series, [], Oe.value),
+        threshold: t.value.downsample.threshold
+      }),
+      absoluteIndex: a,
+      color: la(e.color || Tt.value[a] || se[a] || se[a % se.length])
+    }))), Aa = g(() => {
+      if (!t.value.style.chart.zoom.minimap.show) return [];
+      const e = M.value.filter((n) => !p.value.includes(n.absoluteIndex)), a = Math.max(...e.map((n) => n.series.length)), l = [];
+      for (let n = 0; n < a; n += 1)
+        l.push(e.map((i) => i.series[n] || 0).reduce((i, r) => (i || 0) + (r || 0), 0));
+      const u = Math.min(...l);
+      return l.map((n) => n + (u < 0 ? Math.abs(u) : 0));
+    }), Ia = g(() => t.value.style.chart.zoom.minimap.show ? M.value.map((a) => ({
+      ...a,
+      isVisible: !p.value.includes(a.absoluteIndex)
+    })) : []);
+    E(O, (e) => {
+      e && xe();
+    });
+    const h = g(() => Cl(M.value.filter((e, a) => !p.value.includes(e.absoluteIndex))).map((e, a) => ({
+      ...e,
+      series: e.series.slice(s.value.start, s.value.end)
+    })).map((e, a) => {
+      let l = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, u = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
+      l === u && (l = l >= 0 ? u - 1 : l, u = u >= 0 ? u : l + 1), e.series.filter((B) => ![null, void 0].includes(B)).map((B) => (B - l) / (u - l));
+      const n = {
+        valueMin: l,
+        valueMax: u
+      }, i = e.scaleSteps || t.value.style.chart.scale.ticks;
+      let r;
+      e.autoScaling ? r = nt(n.valueMin, n.valueMax, i) : r = nt(n.valueMin < 0 ? n.valueMin : 0, n.valueMax <= 0 ? 0 : n.valueMax, i);
+      const m = d.value.stacked ? o.value.height * (1 - e.cumulatedStackRatio) : 0, C = d.value.stacked ? o.value.height / t.value.style.chart.stackGap : 0, b = d.value.stacked ? o.value.height * e.stackRatio - C : o.value.height, w = r.min < 0 ? Math.abs(r.min) : 0;
+      let R;
+      e.autoScaling && d.value.stacked && u <= 0 ? R = o.value.bottom - m - b : R = o.value.bottom - m - b * (w / (r.max + w));
+      const oe = r.ticks.map((B, We) => ({
+        y: o.value.bottom - m - b * (We / (r.ticks.length - 1)),
+        x: o.value.left - 8,
+        value: B
+      })), Y = $a({
+        hasAutoScale: d.value.stacked && e.autoScaling,
+        series: e.series,
+        min: d.value.stacked ? l : A.value.min,
+        max: d.value.stacked ? u : A.value.max,
+        scale: d.value.stacked ? r : A.value.scale,
+        yOffset: m,
+        individualHeight: b,
+        stackIndex: d.value.stacked ? a : null
+      });
+      return {
+        ...e,
+        coordinatesLine: Y,
+        min: l,
+        max: u,
+        localScale: r,
+        localZero: R,
+        localMin: w,
+        localYLabels: oe,
+        yOffset: m,
+        individualHeight: b
+      };
+    })), s = c({
+      start: 0,
+      end: O.value
+    }), F = c({ start: 0, end: O.value }), be = c(null);
+    function Ma() {
+      return new Promise((e) => requestAnimationFrame(
+        () => requestAnimationFrame(() => e())
+      ));
+    }
+    ot(() => {
+      be.value && cancelAnimationFrame(be.value);
+    });
+    async function xe() {
+      Ft(), await Te(), be.value && cancelAnimationFrame(be.value), be.value = requestAnimationFrame(async () => {
+        await Ma(), Ft();
+      });
+    }
+    const Fa = g(() => t.value.style.chart.zoom.preview.enable && (F.value.start !== s.value.start || F.value.end !== s.value.end));
+    function Mt(e, a) {
+      F.value[e] = a;
+    }
+    async function Ft() {
+      if (!ge.value) {
+        ge.value = !0;
+        try {
+          const { startIndex: e, endIndex: a } = t.value.style.chart.zoom, l = Math.max(...M.value.map((i) => i.series.length)), u = e ?? 0, n = a != null ? Math.min(Pt(a + 1), l) : l;
+          Fe.value = !0, s.value.start = u, s.value.end = n, F.value.start = u, F.value.end = n, et(), gt.value = !0, await Te(), te.value && (te.value.setStartValue(s.value.start), te.value.setEndValue(s.value.end));
+        } finally {
+          queueMicrotask(() => {
+            Fe.value = !1;
+          }), ge.value = !1;
+        }
+      }
+    }
+    function Pa(e) {
+      ge.value || Fe.value || e !== s.value.start && (s.value.start = e, F.value.start = e, et());
+    }
+    function Ra(e) {
+      if (ge.value || Fe.value) return;
+      const a = Pt(e);
+      a !== s.value.end && (s.value.end = a, F.value.end = a, et());
+    }
+    function Pt(e) {
+      const a = O.value;
+      return e > a ? a : e < 0 || e < s.value.start ? t.value.style.chart.zoom.startIndex !== null ? t.value.style.chart.zoom.startIndex + 1 : 1 : e;
+    }
+    function et() {
+      const e = Math.max(
+        1,
+        Math.max(...M.value.map((u) => u.series.length))
+      );
+      let a = Math.max(0, Math.min(s.value.start ?? 0, e - 1)), l = Math.max(a + 1, Math.min(s.value.end ?? e, e));
+      (!Number.isFinite(a) || !Number.isFinite(l) || l <= a) && (a = 0, l = e), s.value = { start: a, end: l }, F.value.start = a, F.value.end = l, te.value && (te.value.setStartValue(a), te.value.setEndValue(l));
+    }
+    const Da = g(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), P = g(() => h.value.filter((e) => e.type === "bar"));
+    function Ee() {
+      if (!L.value || !ue.value) return;
+      const e = ue.value.offsetWidth, a = ue.value.offsetHeight;
+      L.value.width = e * ne.value * 2, L.value.height = a * ne.value * 2, y.value = e * ne.value * 2, ee.value = a * ne.value * 2, v.value?.scale(ne.value, ne.value), Z();
+    }
+    E(U, async (e) => {
+      if (!e) {
+        Me.value = null, he.value = !1, f.value = null, X.value = null;
+        return;
+      }
+      await Te(), L.value && !v.value && (v.value = L.value.getContext("2d", { willReadFrequently: !0 })), N.value = !0, _.value = !0, await xe(), Ee(), Z();
+    });
+    function Oa() {
+      if (v.value && (v.value.clearRect(0, 0, 1e4, 1e4), v.value.fillStyle = t.value.style.chart.backgroundColor, v.value.fillRect(0, 0, o.value.canvasWidth, o.value.canvasHeight), !!U.value)) {
+        if (d.value.stacked)
+          t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start < t.value.style.chart.grid.y.verticalLines.hideUnderXLength ? h.value.forEach((e) => {
+            for (let a = 0; a < s.value.end - s.value.start + 1; a += 1)
+              T(
+                v.value,
+                [
+                  {
+                    x: o.value.left + o.value.slot * a,
+                    y: o.value.bottom - e.yOffset - e.individualHeight
+                  },
+                  {
+                    x: o.value.left + o.value.slot * a,
+                    y: o.value.bottom - e.yOffset
+                  }
+                ],
+                {
+                  color: t.value.style.chart.grid.y.verticalLines.color
+                }
+              );
+          }) : t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start >= t.value.style.chart.grid.y.verticalLines.hideUnderXLength && h.value.forEach((e) => {
+            for (let a = s.value.start; a < s.value.end; a += 1)
+              a % Math.floor((s.value.end - s.value.start) / t.value.style.chart.grid.x.timeLabels.modulo) === 0 && T(
+                v.value,
+                [
+                  {
+                    x: o.value.left + o.value.slot * (a - s.value.start) + o.value.slot / 2,
+                    y: o.value.bottom - e.yOffset - e.individualHeight
+                  },
+                  {
+                    x: o.value.left + o.value.slot * (a - s.value.start) + o.value.slot / 2,
+                    y: o.value.bottom - e.yOffset
+                  }
+                ],
+                {
+                  color: t.value.style.chart.grid.y.verticalLines.color
+                }
+              );
+          }), t.value.style.chart.grid.x.horizontalLines.show && (t.value.style.chart.grid.x.horizontalLines.alternate ? h.value.forEach((e) => {
+            e.localYLabels.forEach((a, l) => {
+              l < e.localYLabels.length - 1 && _e(
+                v.value,
+                [
+                  { x: o.value.left, y: a.y },
+                  { x: o.value.right, y: a.y },
+                  { x: o.value.right, y: e.localYLabels[l + 1].y },
+                  { x: o.value.left, y: e.localYLabels[l + 1].y }
+                ],
+                {
+                  fillColor: l % 2 === 0 ? "transparent" : Ie(t.value.style.chart.grid.x.horizontalLines.color, t.value.style.chart.grid.x.horizontalLines.opacity),
+                  strokeColor: "transparent"
+                }
+              );
+            });
+          }) : h.value.forEach((e) => {
+            e.localYLabels.slice(s.value.start, s.value.end).forEach((a) => {
+              T(
+                v.value,
+                [
+                  { x: o.value.left, y: a.y },
+                  { x: o.value.right, y: a.y }
+                ],
+                {
+                  color: t.value.style.chart.grid.x.horizontalLines.color
+                }
+              );
+            });
+          })), t.value.style.chart.grid.zeroLine.show && h.value.forEach((e) => {
+            T(
+              v.value,
+              [
+                { x: o.value.left, y: e.localZero },
+                { x: o.value.right, y: e.localZero }
+              ],
+              {
+                color: t.value.style.chart.grid.zeroLine.color,
+                lineDash: t.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+              }
+            );
+          }), t.value.style.chart.grid.y.axisLabels.show && h.value.forEach((e) => {
+            T(
+              v.value,
+              [
+                { x: o.value.left, y: o.value.bottom - e.yOffset },
+                { x: o.value.left, y: o.value.bottom - e.yOffset - e.individualHeight }
+              ],
+              {
+                color: e.color
+              }
+            ), T(
+              v.value,
+              [
+                { x: o.value.right, y: o.value.bottom - e.yOffset },
+                { x: o.value.right, y: o.value.bottom - e.yOffset - e.individualHeight }
+              ],
+              {
+                color: e.color
+              }
+            );
+          }), h.value.forEach((e) => {
+            Q(
+              v.value,
+              e.name,
+              y.value / 35,
+              o.value.bottom - e.yOffset - e.individualHeight / 2,
+              {
+                align: "center",
+                rotation: -90,
+                color: e.color,
+                font: `${Math.round(y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`
+              }
+            );
+          });
+        else {
+          if (t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start < t.value.style.chart.grid.y.verticalLines.hideUnderXLength)
+            for (let e = 0; e < s.value.end - s.value.start + 1; e += 1)
+              T(
+                v.value,
+                [
+                  { x: o.value.left + o.value.slot * e, y: o.value.top },
+                  { x: o.value.left + o.value.slot * e, y: o.value.bottom }
+                ],
+                {
+                  color: t.value.style.chart.grid.y.verticalLines.color
+                }
+              );
+          else if (t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start >= t.value.style.chart.grid.y.verticalLines.hideUnderXLength)
+            for (let e = s.value.start; e < s.value.end; e += 1)
+              e % Math.floor((s.value.end - s.value.start) / t.value.style.chart.grid.x.timeLabels.modulo) === 0 && T(
+                v.value,
+                [
+                  { x: o.value.left + o.value.slot * (e - s.value.start) + o.value.slot / 2, y: o.value.top },
+                  { x: o.value.left + o.value.slot * (e - s.value.start) + o.value.slot / 2, y: o.value.bottom }
+                ],
+                {
+                  color: t.value.style.chart.grid.y.verticalLines.color
+                }
+              );
+          t.value.style.chart.grid.x.horizontalLines.show && (t.value.style.chart.grid.x.horizontalLines.alternate ? A.value.yLabels.forEach((e, a) => {
+            a < A.value.yLabels.length - 1 && _e(
+              v.value,
+              [
+                { x: o.value.left, y: e.y },
+                { x: o.value.right, y: e.y },
+                { x: o.value.right, y: A.value.yLabels[a + 1].y },
+                { x: o.value.left, y: A.value.yLabels[a + 1].y }
+              ],
+              {
+                fillColor: a % 2 === 0 ? "transparent" : Ie(t.value.style.chart.grid.x.horizontalLines.color, t.value.style.chart.grid.x.horizontalLines.opacity),
+                strokeColor: "transparent"
+              }
+            );
+          }) : A.value.yLabels.forEach((e) => {
+            T(
+              v.value,
+              [
+                { x: o.value.left, y: e.y },
+                { x: o.value.right, y: e.y }
+              ],
+              {
+                color: t.value.style.chart.grid.x.horizontalLines.color
+              }
+            );
+          })), t.value.style.chart.grid.y.showAxis && T(
+            v.value,
+            [
+              { x: o.value.left, y: o.value.top },
+              { x: o.value.left, y: o.value.bottom }
+            ],
+            {
+              color: t.value.style.chart.grid.y.axisColor,
+              lineWidth: t.value.style.chart.grid.y.axisThickness
+            }
+          ), t.value.style.chart.grid.x.showAxis && T(
+            v.value,
+            [
+              { x: o.value.left, y: o.value.bottom },
+              { x: o.value.right, y: o.value.bottom }
+            ],
+            {
+              color: t.value.style.chart.grid.x.axisColor,
+              lineWidth: t.value.style.chart.grid.x.axisThickness
+            }
+          ), t.value.style.chart.grid.zeroLine.show && T(
+            v.value,
+            [
+              { x: o.value.left, y: A.value.zero },
+              { x: o.value.right, y: A.value.zero }
+            ],
+            {
+              color: t.value.style.chart.grid.zeroLine.color,
+              lineDash: t.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+            }
+          );
+        }
+        t.value.style.chart.grid.y.axisName && Q(
+          v.value,
+          t.value.style.chart.grid.y.axisName,
+          y.value - y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2,
+          o.value.bottom - o.value.height / 2,
+          {
+            font: `${t.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+            color: t.value.style.chart.color,
+            align: "center",
+            rotation: 90
+          }
+        ), t.value.style.chart.grid.x.axisName && Q(
+          v.value,
+          t.value.style.chart.grid.x.axisName,
+          y.value / 2,
+          ee.value,
+          {
+            font: `${t.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+            color: t.value.style.chart.color,
+            align: "center"
+          }
+        );
+      }
+    }
+    function Ea(e) {
+      for (let a = 0; a < e.coordinatesLine.length; a += 1) {
+        const l = (f.value === a || $.value === a ? y.value / 150 : t.value.style.chart.line.plots.show || e.type === "plot" ? y.value / 200 : 0) * t.value.style.chart.line.plots.radiusRatio;
+        it(
+          v.value,
+          { x: e.coordinatesLine[a].x, y: e.coordinatesLine[a].y },
+          l,
+          {
+            color: t.value.style.chart.backgroundColor,
+            fillStyle: e.color
+          }
+        );
+      }
+    }
+    function Na() {
+      h.value.forEach((e) => {
+        e.showYMarker && Ce(e) && Q(
+          v.value,
+          ce(
+            t.value.style.chart.dataLabels.formatter,
+            Ce(e).value,
+            de({
+              p: e.prefix || t.value.style.chart.grid.y.axisLabels.prefix || "",
+              v: Ce(e).value,
+              s: e.suffix || t.value.style.chart.grid.y.axisLabels.suffix || "",
+              r: e.rounding || t.value.style.chart.grid.y.axisLabels.rounding || 0
+            }),
+            { datapoint: Ce(e), seriesIndex: null }
+          ),
+          o.value.left - 8 + t.value.style.chart.grid.y.axisLabels.offsetX,
+          Ce(e).y,
+          {
+            align: "right",
+            font: `${t.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+            color: e.color
+          }
+        );
+      });
+    }
+    function Ba() {
+      t.value.style.chart.grid.y.axisLabels.show && (d.value.stacked ? h.value.forEach((e) => {
+        e.localYLabels.forEach((a, l) => {
+          Q(
+            v.value,
+            ce(
+              t.value.style.chart.dataLabels.formatter,
+              a.value,
+              de({
+                p: e.prefix || t.value.style.chart.grid.y.axisLabels.prefix || "",
+                v: a.value,
+                s: e.suffix || t.value.style.chart.grid.y.axisLabels.suffix || "",
+                r: e.rounding || t.value.style.chart.grid.y.axisLabels.rounding || 0
+              }),
+              { datapoint: a, seriesIndex: l }
+            ),
+            a.x + t.value.style.chart.grid.y.axisLabels.offsetX,
+            a.y,
+            {
+              align: "right",
+              font: `${t.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+              color: e.color,
+              globalAlpha: e.showYMarker && ![null, void 0].includes(f.value ?? $.value) ? 0.2 : 1
+            }
+          );
+        });
+      }) : A.value.yLabels.forEach((e, a) => {
+        Q(
+          v.value,
+          ce(
+            t.value.style.chart.dataLabels.formatter,
+            e.value,
+            de({
+              p: t.value.style.chart.grid.y.axisLabels.prefix || "",
+              v: e.value,
+              s: t.value.style.chart.grid.y.axisLabels.suffix || "",
+              r: t.value.style.chart.grid.y.axisLabels.rounding || 0
+            }),
+            { datapoint: e, seriesIndex: a }
+          ),
+          e.x + t.value.style.chart.grid.y.axisLabels.offsetX,
+          e.y,
+          {
+            align: "right",
+            font: `${t.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+            color: t.value.style.chart.grid.y.axisLabels.color,
+            globalAlpha: h.value.some((l) => l.showYMarker) && ![null, void 0].includes(f.value ?? $.value) ? 0.2 : 1
+          }
+        );
+      }));
+    }
+    function Ha(e) {
+      for (let a = 0; a < e.coordinatesLine.length; a += 1)
+        Q(
+          v.value,
+          ce(
+            t.value.style.chart.dataLabels.formatter,
+            e.coordinatesLine[a].value,
+            de({
+              p: e.prefix || "",
+              v: e.coordinatesLine[a].value,
+              s: e.suffix || "",
+              r: e.rounding || 0
+            }),
+            { datapoint: e.coordinatesLine[a], seriesIndex: a }
+          ),
+          e.coordinatesLine[a].x,
+          e.coordinatesLine[a].y + t.value.style.chart.dataLabels.offsetY,
+          {
+            align: "center",
+            font: `${t.value.style.chart.dataLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.dataLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+            color: t.value.style.chart.dataLabels.useSerieColor ? e.color : t.value.style.chart.dataLabels.color,
+            strokeColor: t.value.style.chart.backgroundColor,
+            lineWidth: 0.5
+          }
+        );
+    }
+    const S = c([]);
+    let Rt = 0;
+    st(() => {
+      const e = ++Rt;
+      (async () => {
+        const a = await Fl({
+          values: t.value.style.chart.grid.x.timeLabels.values,
+          maxDatapoints: O.value,
+          formatter: t.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+          start: 0,
+          end: O.value
+        });
+        e === Rt && (S.value = a);
+      })();
+    }), st(() => {
+      t.value.style.chart.grid.x.timeLabels.show, t.value.style.chart.grid.x.timeLabels.rotation, t.value.style.chart.grid.x.timeLabels.offsetY, t.value.style.chart.grid.x.timeLabels.fontSizeRatio, t.value.style.chart.grid.x.timeLabels.bold, s.value.start, s.value.end, y.value, ee.value, (S.value || []).map((e) => e?.text ?? "").join("|"), Ta();
+    }, { flush: "post" });
+    const Dt = c({ months: [], shortMonths: [], days: [], shortDays: [] });
+    let Ot = 0;
+    st(() => {
+      const e = ++Ot, a = t.value.style.chart.grid.x.timeLabels.datetimeFormatter;
+      (async () => {
+        const l = await ua(a.locale).catch(() => ua("en"));
+        e === Ot && (Dt.value = l.data);
+      })();
+    });
+    const Et = g(() => {
+      const e = t.value.style.chart.grid.x.timeLabels.datetimeFormatter, a = Pl({
+        useUTC: e.useUTC,
+        locale: Dt.value,
+        januaryAsYear: e.januaryAsYear
+      });
+      return (l, u) => {
+        const i = t.value.style.chart.grid.x.timeLabels.values?.[l];
+        return i == null ? "" : a.formatDate(new Date(i), u);
+      };
+    }), Nt = g(() => (t.value.style.chart.grid.x.timeLabels.values || []).map((a, l) => ({
+      text: Et.value(l, t.value.style.chart.zoom.timeFormat),
+      absoluteIndex: l
+    }))), tt = g(() => (t.value.style.chart.grid.x.timeLabels.values || []).map((a, l) => ({
+      text: Et.value(l, t.value.style.chart.tooltip.timeFormat),
+      absoluteIndex: l
+    })));
+    function Wa() {
+      for (let e = s.value.start; e < s.value.end; e += 1)
+        (s.value.end - s.value.start < t.value.style.chart.grid.x.timeLabels.modulo || s.value.end - s.value.start >= t.value.style.chart.grid.x.timeLabels.modulo && (e % Math.floor((s.value.end - s.value.start) / t.value.style.chart.grid.x.timeLabels.modulo) === 0 || (e === f.value + s.value.start || e === $.value) && t.value.style.chart.grid.x.timeLabels.showMarker)) && Q(
+          v.value,
+          S.value[e] ? S.value[e].text : e + 1,
+          o.value.left + o.value.slot * (e - s.value.start) + o.value.slot / 2,
+          o.value.bottom + y.value / t.value.style.chart.grid.x.timeLabels.offsetY,
+          {
+            align: t.value.style.chart.grid.x.timeLabels.rotation === 0 ? "center" : t.value.style.chart.grid.x.timeLabels.rotation > 0 ? "left" : "right",
+            font: `${t.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * t.value.style.chart.grid.x.timeLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+            color: t.value.style.chart.grid.x.timeLabels.showMarker ? Ie(t.value.style.chart.grid.x.timeLabels.color, f.value !== null || $.value !== null ? f.value + s.value.start === e || $.value === e ? 100 : 20 : 100) : t.value.style.chart.grid.x.timeLabels.color,
+            rotation: t.value.style.chart.grid.x.timeLabels.rotation
+          }
+        );
+    }
+    function Bt() {
+      T(
+        v.value,
+        [
+          { x: o.value.left + o.value.slot * (f.value ?? $.value) + o.value.slot / 2, y: o.value.top },
+          { x: o.value.left + o.value.slot * (f.value ?? $.value) + o.value.slot / 2, y: o.value.bottom }
+        ],
+        {
+          color: t.value.style.chart.selector.color,
+          lineDash: t.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+          lineWidth: 2
+        }
+      );
+    }
+    function _a() {
+      X.value && T(
+        v.value,
+        [
+          { x: o.value.left, y: X.value },
+          { x: o.value.right, y: X.value }
+        ],
+        {
+          color: t.value.style.chart.selector.color,
+          lineDash: t.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+          lineWidth: 2
+        }
+      );
+    }
+    function Xa() {
+      P.value.forEach((e, a) => {
+        for (let l = 0; l < e.coordinatesLine.length; l += 1)
+          _e(
+            v.value,
+            [
+              {
+                x: o.value.left + o.value.slot * l + o.value.slot / 10 + (d.value.stacked ? 0 : o.value.slot / P.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * P.value.length) * a)),
+                y: d.value.stacked ? e.localZero : A.value.zero
+              },
+              {
+                x: o.value.left + o.value.slot * l + o.value.slot / 10 + (d.value.stacked ? 0 : o.value.slot / P.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * P.value.length) * a)) + o.value.slot * 0.8 / (d.value.stacked ? 1 : P.value.length),
+                y: d.value.stacked ? e.localZero : A.value.zero
+              },
+              {
+                x: o.value.left + o.value.slot * l + o.value.slot / 10 + (d.value.stacked ? 0 : o.value.slot / P.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * P.value.length) * a)) + o.value.slot * 0.8 / (d.value.stacked ? 1 : P.value.length),
+                y: e.coordinatesLine[l].y
+              },
+              {
+                x: o.value.left + o.value.slot * l + o.value.slot / 10 + (d.value.stacked ? 0 : o.value.slot / P.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * P.value.length) * a)),
+                y: e.coordinatesLine[l].y
+              }
+            ],
+            {
+              strokeColor: t.value.style.chart.backgroundColor,
+              gradient: {
+                type: "linear",
+                start: {
+                  x: e.coordinatesLine[l].x,
+                  y: e.coordinatesLine[l].y
+                },
+                end: {
+                  x: e.coordinatesLine[l].x,
+                  y: d.value.stacked ? e.localZero : A.value.zero
+                },
+                stops: [
+                  { offset: 0, color: e.color },
+                  { offset: 1, color: t.value.style.chart.bar.gradient.show ? Sl(e.color, 0.5) : e.color }
+                ]
+              }
+            }
+          ), d.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Q(
+            v.value,
+            ce(
+              t.value.style.chart.dataLabels.formatter,
+              e.coordinatesLine[l].value,
+              de({
+                p: e.prefix || "",
+                v: e.coordinatesLine[l].value,
+                s: e.suffix || "",
+                r: e.rounding || 0
+              }),
+              { datapoint: e.coordinatesLine[l], seriesIndex: l }
+            ),
+            o.value.left + o.value.slot * l + o.value.slot / 10 + (d.value.stacked ? 0 : o.value.slot / P.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * P.value.length) * a)) + o.value.slot * 0.4 / (d.value.stacked ? 1 : P.value.length),
+            (e.coordinatesLine[l].value < 0 ? d.value.stacked ? e.localZero : A.value.zero : e.coordinatesLine[l].y) + t.value.style.chart.dataLabels.offsetY,
+            {
+              align: "center",
+              font: `${Math.round(y.value / 40 * t.value.style.chart.dataLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
+              color: t.value.style.chart.dataLabels.useSerieColor ? e.color : t.value.style.chart.dataLabels.color,
+              strokeColor: t.value.style.chart.backgroundColor,
+              lineWidth: 0.8
+            }
+          );
+      });
+    }
+    function Va(e, a) {
+      const l = e.coordinatesLine.map((r, m) => {
+        const C = e.series[m];
+        return C != null && Number.isFinite(r?.y) ? r : null;
+      }), u = [], n = [];
+      let i = [];
+      for (let r = 0; r < l.length; r += 1) {
+        const m = l[r];
+        if (m)
+          i.push(m);
+        else {
+          if (i.length >= 2) {
+            const C = i[0], b = i[i.length - 1];
+            u.push([
+              { x: C.x, y: a },
+              ...i,
+              { x: b.x, y: a }
+            ]);
+          } else i.length === 1 && n.push(i[0]);
+          i = [];
+        }
+      }
+      if (i.length >= 2) {
+        const r = i[0], m = i[i.length - 1];
+        u.push([
+          { x: r.x, y: a },
+          ...i,
+          { x: m.x, y: a }
+        ]);
+      } else i.length === 1 && n.push(i[0]);
+      return { polygons: u, singles: n };
+    }
+    function Ua(e) {
+      const a = e.coordinatesLine.map((n, i) => {
+        const r = e.series[i];
+        return r != null && Number.isFinite(n?.y) ? n : null;
+      }), l = [];
+      let u = [];
+      for (let n = 0; n < a.length; n += 1) {
+        const i = a[n];
+        i ? u.push(i) : (u.length >= 2 && l.push(u), u = []);
+      }
+      return u.length >= 2 && l.push(u), l;
+    }
+    function Ht(e) {
+      if (Oe.value) {
+        const a = Ua(e);
+        for (const l of a)
+          T(v.value, l, {
+            color: e.color,
+            lineWidth: 3
+          });
+      } else
+        T(v.value, e.coordinatesLine, {
+          color: e.color,
+          lineWidth: 3
+        });
+    }
+    function Ya(e) {
+      const a = !!Oe.value;
+      if (e.useArea) {
+        const l = d.value.stacked ? e.localZero : A.value.zero;
+        if (a) {
+          const { polygons: u, singles: n } = Va(e, l);
+          for (const r of u)
+            sa(v.value, r, {
+              fillColor: Ie(e.color, t.value.style.chart.area.opacity),
+              strokeColor: "transparent"
+            });
+          const i = y.value / 200 * t.value.style.chart.line.plots.radiusRatio;
+          for (const r of n)
+            it(
+              v.value,
+              { x: r.x, y: r.y },
+              i,
+              {
+                color: t.value.style.chart.backgroundColor,
+                fillStyle: e.color
+              }
+            );
+        } else {
+          const u = { x: e.coordinatesLine[0].x, y: l }, n = { x: e.coordinatesLine.at(-1).x, y: l };
+          sa(
+            v.value,
+            [u, ...e.coordinatesLine, n],
+            {
+              fillColor: Ie(e.color, t.value.style.chart.area.opacity),
+              strokeColor: "transparent"
+            }
+          );
+        }
+        Ht(e);
+        return;
+      }
+      Ht(e);
+    }
+    function qa() {
+      h.value.forEach((e, a) => {
+        T(
+          v.value,
+          [
+            { x: o.value.left, y: o.value.bottom - e.yOffset },
+            { x: o.value.right, y: o.value.bottom - e.yOffset }
+          ],
+          {
+            color: t.value.style.chart.grid.x.horizontalLines.color,
+            lineWidth: 1
+          }
+        );
+      });
+    }
+    function ja() {
+      const { left: e, top: a, width: l, height: u } = o.value, n = s.value.start, r = s.value.end - n, m = l / r, C = F.value.start - n, b = F.value.end - n, w = Math.max(0, Math.min(r, C)), R = Math.max(0, Math.min(r, b));
+      _e(
+        v.value,
+        [
+          { x: e + w * m, y: a },
+          { x: e + w * m + (R - w) * m, y: a },
+          { x: e + w * m + (R - w) * m, y: a + u },
+          { x: e + w * m, y: a + u }
+        ],
+        {
+          fillColor: t.value.style.chart.zoom.preview.fill,
+          strokeColor: t.value.style.chart.zoom.preview.stroke,
+          lineDash: Array(4).fill(t.value.style.chart.zoom.preview.strokeDasharray),
+          lineWidth: t.value.style.chart.zoom.preview.strokeWidth
+        }
+      );
+    }
+    function Z() {
+      !U.value || !L.value || !v.value || (Oa(), N.value ? ((f.value !== null || $.value !== null) && t.value.style.chart.selector.show && Bt(), Xa(), d.value.stacked && t.value.style.chart.grid.x.showAxis && qa(), Da.value.forEach((e) => {
+        (e.type === "line" || !e.type) && Ya(e), _.value && (Ea(e), d.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Ha(e));
+      }), L.value && (Me.value = $l(L.value))) : (Me.value && (v.value.clearRect(0, 0, 1e4, 1e4), v.value.drawImage(Me.value, 0, 0)), (f.value !== null || $.value !== null) && t.value.style.chart.selector.show && Bt(), (f.value !== null || $.value !== null) && h.value.forEach((e) => {
+        const a = f.value ?? $.value, l = e.coordinatesLine[a];
+        (e.type === "line" || !e.type || e.type === "plot") && l && Number.isFinite(l.x) && Number.isFinite(l.y) && it(
+          v.value,
+          { x: l.x, y: l.y },
+          y.value / 150 * t.value.style.chart.line.plots.radiusRatio,
+          {
+            color: t.value.style.chart.backgroundColor,
+            fillStyle: e.color
+          }
+        );
+      })), t.value.style.chart.grid.x.timeLabels.show && Wa(), t.value.style.chart.selector.show && t.value.style.chart.selector.showHorizontalSelector && _a(), Ba(), Na(), t.value.style.chart.zoom.preview.enable && (s.value.start !== F.value.start || s.value.end !== F.value.end) && ja(), N.value = !1);
+    }
+    const Le = Al(() => {
+      _.value = !0, Ee();
+    }, O.value > 200 ? 10 : 1, !_.value);
+    function Ce(e) {
+      if ([null, void 0].includes(f.value ?? $.value) || !e.coordinatesLine[f.value ?? $.value]) return !1;
+      const { y: a, value: l } = e.coordinatesLine[f.value ?? $.value];
+      return { y: a, value: l };
+    }
+    function Ga(e) {
+      if (!U.value || !L.value || Qe.value) return;
+      const { left: a, top: l } = L.value.getBoundingClientRect(), u = e.clientX - a;
+      if (X.value = (e.clientY - l) * 2, (X.value < o.value.top || X.value > o.value.bottom) && (X.value = null), u * 2 < o.value.left || u * 2 > o.value.right) {
+        ke();
+        return;
+      }
+      const n = u * 2 - o.value.left, i = Math.floor(n / o.value.slot);
+      if (f.value = i, V.value = i, he.value = !0, Pe.value = !1, !_.value) return;
+      let r = "";
+      const m = t.value.style.chart.tooltip.customFormat, C = h.value.map((b) => ({
+        shape: b.shape || null,
+        name: b.name,
+        color: b.color,
+        type: b.type || "line",
+        value: b.series.find((w, R) => R === f.value)
+      }));
+      _t({ seriesIndex: f.value, datapoint: C }), rt(m) && oa(() => m({
+        seriesIndex: f.value,
+        datapoint: C,
+        series: h.value,
+        config: t.value
+      })) ? fe.value = m({
+        seriesIndex: f.value,
+        datapoint: C,
+        series: h.value,
+        config: t.value
+      }) : (t.value.style.chart.grid.x.timeLabels.values.slice(s.value.start, s.value.end)[f.value] ? r += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.tooltip.useDefaultTimeFormat ? S.value.slice(s.value.start, s.value.end)[f.value]?.text : tt.value[f.value]?.text}</div>` : r += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${S.value[f.value + s.value.start]?.text ?? ""}</div>`, r += It.value.join(""), fe.value = r), _.value = !1;
+    }
+    function Za(e) {
+      return h.value.map((a) => ({
+        shape: a.shape || null,
+        name: a.name,
+        color: a.color,
+        type: a.type || "line",
+        value: a.series.find((l, u) => u === e)
+      }));
+    }
+    function Ka(e) {
+      let a = "";
+      const l = t.value.style.chart.tooltip.customFormat, u = Za(e);
+      return _t({ seriesIndex: e, datapoint: u }), rt(l) && oa(() => l({
+        seriesIndex: e,
+        datapoint: u,
+        series: h.value,
+        config: t.value
+      })) ? l({
+        seriesIndex: e,
+        datapoint: u,
+        series: h.value,
+        config: t.value
+      }) : (t.value.style.chart.grid.x.timeLabels.values.slice(s.value.start, s.value.end)[e] ? a += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.tooltip.useDefaultTimeFormat ? S.value.slice(s.value.start, s.value.end)[e]?.text : tt.value[e]?.text}</div>` : a += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${S.value[e + s.value.start]?.text ?? ""}</div>`, a += It.value.join(""), a);
+    }
+    function Ja(e) {
+      if (!L.value || !o.value?.slot) return;
+      const a = L.value.getBoundingClientRect(), l = a.width / o.value.canvasWidth, u = a.height / o.value.canvasHeight, n = o.value.left + o.value.slot * e + o.value.slot / 2, i = o.value.top + o.value.height / 2;
+      pt.value = {
+        x: a.left + n * l,
+        y: a.top + i * u
+      };
+    }
+    function Wt(e, { fromKeyboard: a = !1 } = {}) {
+      !U.value || Qe.value || e != null && (e < 0 || e >= s.value.end - s.value.start || (f.value = e, V.value = e, he.value = !0, Pe.value = a, fe.value = Ka(e), a && Ja(e), _.value = !1, Z()));
+    }
+    function ke() {
+      he.value = !1, f.value = null, V.value = null, fe.value = "", X.value = null, Pe.value = !1, Z();
+    }
+    function Qa() {
+      Ge.value = !0;
+    }
+    function el() {
+      Ge.value = !1, ke();
+    }
+    function tl(e) {
+      if (!L.value || we.value || document.activeElement !== L.value) return;
+      const a = e.key === "ArrowLeft", l = e.key === "ArrowRight";
+      if (!a && !l) return;
+      const u = s.value.end - s.value.start;
+      if (u <= 0) return;
+      e.preventDefault(), e.stopPropagation();
+      let n = V.value;
+      n !== null && n >= 0 && n < u ? l ? (n += 1, n >= u && (n = 0)) : (n -= 1, n < 0 && (n = u - 1)) : l ? n = 0 : n = u - 1, Wt(n, { fromKeyboard: !0 });
+    }
+    function _t({ seriesIndex: e, datapoint: a }) {
+      const l = s.value.start + e;
+      Re("selectX", {
+        dataset: a,
+        index: l,
+        indexLabel: ""
+      });
+    }
+    E(() => D.selectedXIndex, (e) => {
+      if ([null, void 0].includes(D.selectedXIndex)) {
+        ke();
+        return;
+      }
+      const a = e - s.value.start;
+      a < 0 || e >= s.value.end ? ke() : Wt(a, { fromKeyboard: !1 });
+    }, { immediate: !0 }), E(() => f.value, (e) => {
+      Le();
+    }), E(() => s.value, (e) => {
+      N.value = !0, Z();
+    }, {
+      deep: !0
+    }), E(() => F.value, (e) => {
+      Z();
+    }, { deep: !0 }), E(() => d.value.showDataLabels, (e) => {
+      N.value = !0, Z();
+    }), E(() => X.value, (e) => {
+      e && Z();
+    }), E(() => d.value.stacked, (e) => {
+      N.value = !0, _.value = !0, Le();
+    });
+    function al() {
+      ke();
+    }
+    const ae = ut(null), re = ut(null), ie = ut(null);
+    Jt(() => {
+      yt.value = !0, Xt();
+    });
+    function Xt() {
+      if (kl(D.dataset) && xa.value && wl({ componentName: "VueUiXyCanvas", type: "dataset" }), Te(() => {
+        L.value && !v.value && (v.value = L.value.getContext("2d", { willReadFrequently: !0 })), v.value && U.value && (N.value = !0, _.value = !0, Ee());
+      }), t.value.responsive) {
+        const e = Il(() => {
+          const { width: a, height: l } = Ml({
+            chart: G.value,
+            title: t.value.style.chart.title.text ? ht.value : null,
+            legend: t.value.style.chart.legend.show ? ft.value : null,
+            slicer: t.value.style.chart.zoom.show && O.value > 6 ? te.value?.$el : null,
+            source: mt.value
+          });
+          requestAnimationFrame(() => {
+            Lt.value = `${a} / ${l}`;
+          });
+        });
+        ae.value && (re.value && ae.value.unobserve(re.value), ae.value.disconnect()), ae.value = new ResizeObserver(e), re.value = G.value.parentNode, ae.value.observe(re.value);
+      }
+      ie.value && ie.value.disconnect(), ie.value = new ResizeObserver(async (e) => {
+        for (const a of e)
+          a.contentBoxSize && ue.value && (N.value = !0, Le());
+      }), ie.value.observe(ue.value), xe();
+    }
+    ot(() => {
+      ie.value && ie.value.disconnect(), ae.value && (re.value && ae.value.unobserve(re.value), ae.value.disconnect());
+    });
+    function ll() {
+      p.value.length ? p.value = [] : Be.value.forEach((e, a) => {
+        p.value.push(a);
+      }), N.value = !0, Le();
+    }
+    function Ne(e) {
+      Re("selectLegend", h.value.find((a) => a.absoluteIndex === e)), p.value.includes(e) ? p.value = p.value.filter((a) => a !== e) : p.value.push(e), N.value = !0, Le();
+    }
+    function Vt(e) {
+      if (!M.value.length)
+        return t.value.debug && console.warn("VueUiXyCanvas - There are no series to show."), null;
+      const a = M.value.find((l) => l.name === e);
+      return a || (t.value.debug && console.warn(`VueUiXyCanvas - Series name not found "${e}"`), null);
+    }
+    function ol(e) {
+      const a = Vt(e);
+      a !== null && p.value.includes(a.absoluteIndex) && Ne(a.absoluteIndex);
+    }
+    function sl(e) {
+      const a = Vt(e);
+      a !== null && (p.value.includes(a.absoluteIndex) || Ne(a.absoluteIndex));
+    }
+    const Be = g(() => M.value.map((e, a) => ({
+      ...e,
+      name: e.name,
+      color: la(e.color) || Tt.value[a] || se[a] || se[a % se.length],
+      shape: e.shape || "circle",
+      prefix: e.prefix || "",
+      suffix: e.suffix || "",
+      rounding: e.rounding || 0
+    })).map((e) => ({
+      ...e,
+      opacity: p.value.includes(e.absoluteIndex) ? 0.5 : 1,
+      segregate: () => Ne(e.absoluteIndex),
+      isSegregated: p.value.includes(e.absoluteIndex)
+    }))), ul = g(() => ({
+      cy: "donut-div-legend",
+      backgroundColor: t.value.style.chart.legend.backgroundColor,
+      color: t.value.style.chart.legend.color,
+      fontSize: t.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
+    })), He = g(() => {
+      const e = [""].concat(h.value.map((n) => n.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
+      let a = [];
+      for (let n = 0; n < O.value; n += 1) {
+        const i = h.value.map((r) => r.series[n] ?? 0).reduce((r, m) => r + m, 0);
+        a.push(
+          [
+            t.value.style.chart.grid.x.timeLabels.values.slice(s.value.start, s.value.end)[n] ? S?.value?.slice(s.value.start, s.value.end)?.[n]?.text ?? n + 1 : n + 1
+          ].concat(
+            h.value.map(
+              (r) => (r.series[n] ?? 0).toFixed(t.value.table.rounding)
+            )
+          ).concat((i ?? 0).toFixed(t.value.table.rounding))
+        );
+      }
+      const l = {
+        th: {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          outline: t.value.table.th.outline
+        },
+        td: {
+          backgroundColor: t.value.table.td.backgroundColor,
+          color: t.value.table.td.color,
+          outline: t.value.table.td.outline
+        },
+        breakpoint: t.value.table.responsiveBreakpoint
+      }, u = [t.value.table.columnNames.period].concat(h.value.map((n) => n.name)).concat(t.value.table.columnNames.total);
+      return { head: e, body: a.slice(0, s.value.end - s.value.start), config: l, colNames: u };
+    }), Ut = g(() => {
+      if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const e = h.value.map((l) => ({
+        label: l.name,
+        color: l.color,
+        type: l.type
+      })), a = [];
+      for (let l = s.value.start; l < s.value.end; l += 1) {
+        const u = [t.value.style.chart.grid.x.timeLabels.values[l] ? S.value[l].text : l + 1];
+        h.value.forEach((n) => {
+          u.push(Number((n.series[l] || 0).toFixed(t.value.table.rounding)));
+        }), a.push(u);
+      }
+      return { head: e, body: a };
+    });
+    function at(e = null) {
+      const a = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], l = ["", ...Ut.value.head.map((r) => r.label)], u = Ut.value.body, n = a.concat([l]).concat(u), i = zl(n);
+      e ? e(i) : Tl({ csvContent: i, title: t.value.style.chart.title.text || "vue-ui-xy-canvas" });
+    }
+    function nl() {
+      return h.value;
+    }
+    function Yt() {
+      d.value.showTable = !d.value.showTable;
+    }
+    function qt() {
+      d.value.showDataLabels = !d.value.showDataLabels;
+    }
+    function jt() {
+      d.value.stacked = !d.value.stacked;
+    }
+    function Gt() {
+      d.value.showTooltip = !d.value.showTooltip;
+    }
+    const we = c(!1);
+    function lt() {
+      we.value = !we.value;
+    }
+    async function rl({ scale: e = 2 } = {}) {
+      if (!G.value) return;
+      const { width: a, height: l } = G.value.getBoundingClientRect(), u = a / l, { imageUri: n, base64: i } = await Wl({ domElement: G.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: n,
+        base64: i,
+        title: t.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: u
+      };
+    }
+    const Se = g(() => {
+      const e = t.value.table.useDialog && !t.value.table.show, a = d.value.showTable;
+      return {
+        component: e ? ha : Yl,
+        title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? `: ${t.value.style.chart.title.subtitle.text}` : ""}`,
+        props: e ? {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          headerColor: t.value.table.th.color,
+          headerBg: t.value.table.th.backgroundColor,
+          isFullscreen: me.value,
+          fullscreenParent: G.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: le.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: t.value.style.chart.backgroundColor,
+              color: t.value.style.chart.color
+            },
+            head: {
+              backgroundColor: t.value.style.chart.backgroundColor,
+              color: t.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    E(() => d.value.showTable, (e) => {
+      t.value.table.show || (e && t.value.table.useDialog && ye.value ? ye.value.open() : "close" in ye.value && ye.value.close());
+    });
+    function Zt() {
+      d.value.showTable = !1, qe.value && qe.value.setTableIconState(!1);
+    }
+    function il(e) {
+      if (e?.stage === "start") {
+        je.value = !0;
+        return;
+      }
+      if (e?.stage === "end") {
+        je.value = !1;
+        return;
+      }
+      St();
+    }
+    async function Kt() {
+      if (Re("copyAlt", {
+        config: t.value,
+        dataset: h.value
+      }), !t.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(t.value.userOptions.callbacks.altCopy({
+        config: t.value,
+        dataset: h.value
+      }));
+    }
+    return na({
+      getData: nl,
+      getImage: rl,
+      generateCsv: at,
+      generatePdf: wt,
+      generateImage: St,
+      hideSeries: sl,
+      showSeries: ol,
+      toggleTable: Yt,
+      toggleLabels: qt,
+      toggleStack: jt,
+      toggleTooltip: Gt,
+      toggleAnnotator: lt,
+      toggleFullscreen: zt,
+      copyAlt: Kt
+    }), (e, a) => (I(), $e("div", {
+      style: ve(`width:100%; position:relative; ${t.value.responsive ? "height: 100%" : ""}; background:${t.value.style.chart.backgroundColor};`),
+      ref_key: "xy",
+      ref: G,
+      id: `xy_canvas_${j.value}`,
+      class: dl(`vue-data-ui-component vue-ui-xy-canvas ${me.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      onMouseenter: Ca,
+      onMouseleave: ka
+    }, [
+      H("div", {
+        id: `chart-instructions-${j.value}`,
+        class: "sr-only"
+      }, [
+        H("p", null, Ae(t.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Kl),
+      H("div", Jl, Ae(ba.value), 1),
+      t.value.style.chart.title.text ? (I(), $e("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: ht,
+        style: ve(`width:100%;background:${t.value.style.chart.backgroundColor};`)
+      }, [
+        (I(), q(Vl, {
+          key: `title_${Ve.value}`,
+          config: {
+            title: {
+              cy: "xy-canvas-title",
+              ...t.value.style.chart.title
+            },
+            subtitle: {
+              cy: "xy-canvas-subtitle",
+              ...t.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 4)) : W("", !0),
+      H("div", {
+        id: `legend-top-${j.value}`
+      }, null, 8, Ql),
+      t.value.userOptions.show && U.value && (z(xt) || z(Ke)) ? (I(), q(z(ca), {
+        ref_key: "userOptionsRef",
+        ref: qe,
+        key: `user_option_${dt.value}`,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        isPrinting: z(Ct),
+        isImaging: z(kt),
+        uid: j.value,
+        hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
+        hasPdf: t.value.userOptions.buttons.pdf,
+        hasImg: t.value.userOptions.buttons.img,
+        hasXls: t.value.userOptions.buttons.csv,
+        hasLabel: t.value.userOptions.buttons.labels,
+        hasStack: vt.dataset.length > 1 && t.value.userOptions.buttons.stack,
+        hasFullscreen: t.value.userOptions.buttons.fullscreen,
+        hasAltCopy: t.value.userOptions.buttons.altCopy,
+        hasTable: s.value.end - s.value.start <= 730 && t.value.userOptions.buttons.table,
+        isFullscreen: me.value,
+        isTooltip: d.value.showTooltip,
+        isStacked: d.value.stacked,
+        titles: { ...t.value.userOptions.buttonTitles },
+        chartElement: G.value,
+        position: t.value.userOptions.position,
+        hasAnnotator: t.value.userOptions.buttons.annotator,
+        isAnnotation: we.value,
+        callbacks: t.value.userOptions.callbacks,
+        printScale: t.value.userOptions.print.scale,
+        tableDialog: t.value.table.useDialog,
+        isCursorPointer: le.value,
+        onToggleFullscreen: zt,
+        onGeneratePdf: z(wt),
+        onGenerateCsv: at,
+        onGenerateImage: il,
+        onToggleTable: Yt,
+        onToggleLabels: qt,
+        onToggleStack: jt,
+        onToggleTooltip: Gt,
+        onToggleAnnotator: lt,
+        onCopyAlt: Kt,
+        style: ve({
+          visibility: z(xt) ? z(Ke) ? "visible" : "hidden" : "visible"
+        })
+      }, Qt({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: x(({ isOpen: l, color: u }) => [
+            k(e.$slots, "menuIcon", K(J({ isOpen: l, color: u })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: x(() => [
+            k(e.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: x(() => [
+            k(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: x(() => [
+            k(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: x(() => [
+            k(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: x(() => [
+            k(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: x(() => [
+            k(e.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionStack ? {
+          name: "optionStack",
+          fn: x(() => [
+            k(e.$slots, "optionStack", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: x(({ toggleFullscreen: l, isFullscreen: u }) => [
+            k(e.$slots, "optionFullscreen", K(J({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: x(({ toggleAnnotator: l, isAnnotator: u }) => [
+            k(e.$slots, "optionAnnotator", K(J({ toggleAnnotator: l, isAnnotator: u })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0,
+        e.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: x(({ altCopy: l }) => [
+            k(e.$slots, "optionAltCopy", K(J({ altCopy: l })), void 0, !0)
+          ]),
+          key: "10"
+        } : void 0
+      ]), 1032, ["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"])) : W("", !0),
+      H("div", {
+        class: "vue-ui-xy-canvas",
+        style: ve(`position: relative; aspect-ratio: ${Lt.value}`),
+        ref_key: "container",
+        ref: ue
+      }, [
+        H("canvas", {
+          ref_key: "canvas",
+          ref: L,
+          "aria-label": pa.value,
+          "aria-describedby": `chart-instructions-${j.value}`,
+          role: "img",
+          "aria-live": "polite",
+          tabindex: "0",
+          style: { width: "100%", height: "100%" },
+          onMousemove: a[0] || (a[0] = (l) => Ga(l)),
+          onMouseleave: al,
+          onFocus: Qa,
+          onBlur: el,
+          onKeydown: tl
+        }, null, 40, eo),
+        e.$slots.hint ? (I(), $e("div", to, [
+          k(e.$slots, "hint", K(J({ hint: t.value.a11y.translations.keyboardNavigation, isVisible: Ge.value })), void 0, !0)
+        ])) : W("", !0),
+        k(e.$slots, "skeleton", {}, () => [
+          z(De) ? (I(), q(Ol, { key: 0 })) : W("", !0)
+        ], !0),
+        ea(z(ia), {
+          teleportTo: t.value.style.chart.tooltip.teleportTo,
+          show: d.value.showTooltip && he.value,
+          backgroundColor: t.value.style.chart.tooltip.backgroundColor,
+          color: t.value.style.chart.tooltip.color,
+          fontSize: t.value.style.chart.tooltip.fontSize,
+          borderRadius: t.value.style.chart.tooltip.borderRadius,
+          borderColor: t.value.style.chart.tooltip.borderColor,
+          borderWidth: t.value.style.chart.tooltip.borderWidth,
+          position: t.value.style.chart.tooltip.position,
+          offsetY: t.value.style.chart.tooltip.offsetY,
+          parent: e.$refs.xy,
+          content: fe.value,
+          isFullscreen: me.value,
+          backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
+          isCustom: z(rt)(t.value.style.chart.tooltip.customFormat),
+          smooth: t.value.style.chart.tooltip.smooth,
+          backdropFilter: t.value.style.chart.tooltip.backdropFilter,
+          smoothForce: t.value.style.chart.tooltip.smoothForce,
+          smoothSnapThreshold: t.value.style.chart.tooltip.smoothSnapThreshold,
+          isA11yMode: Pe.value,
+          a11yPosition: pt.value
+        }, {
+          "tooltip-before": x(() => [
+            k(e.$slots, "tooltip-before", K(J({ ...ct.value })), void 0, !0)
+          ]),
+          "tooltip-after": x(() => [
+            k(e.$slots, "tooltip-after", K(J({ ...ct.value })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"])
+      ], 4),
+      t.value.style.chart.zoom.show && O.value > 6 && U.value && gt.value && !z(De) ? (I(), q(ql, {
+        key: 2,
+        ref_key: "chartSlicer",
+        ref: te,
+        allMinimaps: Ia.value,
+        background: t.value.style.chart.zoom.color,
+        borderColor: t.value.style.chart.backgroundColor,
+        customFormat: t.value.style.chart.zoom.customFormat,
+        cutNullValues: Oe.value,
+        enableRangeHandles: t.value.style.chart.zoom.enableRangeHandles,
+        enableSelectionDrag: t.value.style.chart.zoom.enableSelectionDrag,
+        end: s.value.end,
+        focusOnDrag: t.value.style.chart.zoom.focusOnDrag,
+        focusRangeRatio: t.value.style.chart.zoom.focusRangeRatio,
+        fontSize: t.value.style.chart.zoom.fontSize,
+        immediate: !t.value.style.chart.zoom.preview.enable,
+        inputColor: t.value.style.chart.zoom.color,
+        isPreview: Fa.value,
+        labelLeft: t.value.style.chart.grid.x.timeLabels.values[s.value.start] ? S.value[s.value.start]?.text : "",
+        labelRight: t.value.style.chart.grid.x.timeLabels.values[s.value.end - 1] ? S.value[s.value.end - 1]?.text : "",
+        max: O.value,
+        min: 0,
+        minimap: Aa.value,
+        minimapCompact: t.value.style.chart.zoom.minimap.compact,
+        minimapFrameColor: t.value.style.chart.zoom.minimap.frameColor,
+        minimapIndicatorColor: t.value.style.chart.zoom.minimap.indicatorColor,
+        minimapLineColor: t.value.style.chart.zoom.minimap.lineColor,
+        minimapMerged: t.value.style.chart.zoom.minimap.merged,
+        minimapSelectedColor: t.value.style.chart.zoom.minimap.selectedColor,
+        minimapSelectedColorOpacity: t.value.style.chart.zoom.minimap.selectedColorOpacity,
+        minimapSelectedIndex: f.value,
+        minimapSelectionRadius: t.value.style.chart.zoom.minimap.selectionRadius,
+        preciseLabels: Nt.value?.length ? Nt.value : S.value,
+        refreshEndPoint: t.value.style.chart.zoom.endIndex !== null ? t.value.style.chart.zoom.endIndex + 1 : O.value,
+        refreshStartPoint: t.value.style.chart.zoom.startIndex !== null ? t.value.style.chart.zoom.startIndex : 0,
+        selectColor: t.value.style.chart.zoom.highlightColor,
+        selectedSeries: M.value,
+        smoothMinimap: t.value.style.chart.zoom.minimap.smooth,
+        start: s.value.start,
+        timeLabels: S.value,
+        usePreciseLabels: t.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !t.value.style.chart.zoom.useDefaultFormat,
+        textColor: t.value.style.chart.color,
+        useResetSlot: t.value.style.chart.zoom.useResetSlot,
+        valueEnd: s.value.end,
+        valueStart: s.value.start,
+        verticalHandles: t.value.style.chart.zoom.minimap.verticalHandles,
+        maxWidth: t.value.style.chart.zoom.maxWidth,
+        additionalMinimapHeight: t.value.style.chart.zoom.minimap.additionalHeight,
+        handleType: t.value.style.chart.zoom.minimap.handleType,
+        handleIconColor: t.value.style.chart.zoom.minimap.handleIconColor,
+        handleBorderWidth: t.value.style.chart.zoom.minimap.handleBorderWidth,
+        handleBorderColor: t.value.style.chart.zoom.minimap.handleBorderColor,
+        handleFill: t.value.style.chart.zoom.minimap.handleFill,
+        handleWidth: t.value.style.chart.zoom.minimap.handleWidth,
+        onFutureEnd: a[1] || (a[1] = (l) => Mt("end", l)),
+        onFutureStart: a[2] || (a[2] = (l) => Mt("start", l)),
+        onReset: xe,
+        onTrapMouse: wa,
+        "onUpdate:end": Ra,
+        "onUpdate:start": Pa
+      }, {
+        "reset-action": x(({ reset: l }) => [
+          k(e.$slots, "reset-action", K(J({ reset: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["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", "additionalMinimapHeight", "handleType", "handleIconColor", "handleBorderWidth", "handleBorderColor", "handleFill", "handleWidth"])) : W("", !0),
+      H("div", {
+        id: `legend-bottom-${j.value}`
+      }, null, 8, ao),
+      yt.value ? (I(), q(hl, {
+        key: 3,
+        to: t.value.style.chart.legend.position === "top" ? `#legend-top-${j.value}` : `#legend-bottom-${j.value}`
+      }, [
+        H("div", {
+          ref_key: "chartLegend",
+          ref: ft
+        }, [
+          t.value.style.chart.legend.show && U.value ? (I(), q(Xl, {
+            legendSet: Be.value,
+            config: ul.value,
+            key: `legend_${Ye.value}`,
+            isCursorPointer: le.value,
+            onClickMarker: a[3] || (a[3] = ({ i: l }) => Ne(l))
+          }, {
+            item: x(({ legend: l, index: u }) => [
+              H("div", {
+                onClick: (n) => l.segregate(),
+                style: ve(`opacity:${p.value.includes(u) ? 0.5 : 1}`)
+              }, Ae(l.name), 13, lo)
+            ]),
+            legendToggle: x(() => [
+              Be.value.length > 2 && t.value.style.chart.legend.selectAllToggle.show && !z(De) ? (I(), q(jl, {
+                key: 0,
+                backgroundColor: t.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: t.value.style.chart.legend.selectAllToggle.color,
+                fontSize: t.value.style.chart.legend.fontSize,
+                checked: p.value.length > 0,
+                isCursorPointer: le.value,
+                onToggle: ll
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : W("", !0)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "isCursorPointer"])) : k(e.$slots, "legend", {
+            key: 1,
+            legend: Be.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : W("", !0),
+      e.$slots.watermark ? (I(), $e("div", oo, [
+        k(e.$slots, "watermark", K(J({ isPrinting: z(Ct) || z(kt) || je.value })), void 0, !0)
+      ])) : W("", !0),
+      e.$slots.source ? (I(), $e("div", {
+        key: 5,
+        ref_key: "source",
+        ref: mt,
+        dir: "auto"
+      }, [
+        k(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : W("", !0),
+      U.value && t.value.userOptions.buttons.table ? (I(), q(fl(Se.value.component), ml({ key: 6 }, Se.value.props, {
+        ref_key: "tableUnit",
+        ref: ye,
+        onClose: Zt
+      }), Qt({
+        content: x(() => [
+          (I(), q(z(va), {
+            key: `table_${Ue.value}`,
+            colNames: He.value.colNames,
+            head: He.value.head,
+            body: He.value.body,
+            config: He.value.config,
+            title: t.value.table.useDialog ? "" : Se.value.title,
+            withCloseButton: !t.value.table.useDialog,
+            isCursorPointer: le.value,
+            onClose: Zt
+          }, {
+            th: x(({ th: l }) => [
+              H("div", { innerHTML: l }, null, 8, so)
+            ]),
+            td: x(({ td: l }) => [
+              ta(Ae(l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        t.value.table.useDialog ? {
+          name: "title",
+          fn: x(() => [
+            ta(Ae(Se.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        t.value.table.useDialog ? {
+          name: "actions",
+          fn: x(() => [
+            H("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[4] || (a[4] = (l) => at(t.value.userOptions.callbacks.csv)),
+              style: ve({ cursor: le.value ? "pointer" : "default" })
+            }, [
+              ea(Ul, {
+                name: "fileCsv",
+                stroke: Se.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : W("", !0),
+      t.value.userOptions.buttons.annotator && h.value.length ? (I(), q(z(da), {
+        key: 7,
+        parent: G.value,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        active: we.value,
+        isCursorPointer: le.value,
+        onClose: lt
+      }, null, 8, ["parent", "backgroundColor", "color", "active", "isCursorPointer"])) : W("", !0)
+    ], 46, Zl));
+  }
+}, $o = /* @__PURE__ */ Gl(uo, [["__scopeId", "data-v-959fa836"]]);
+export {
+  $o as default
+};