vue-data-ui 3.17.13 → 3.18.0

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

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