vue-data-ui 3.3.3 → 3.4.1

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

@@ -0,0 +1,1548 @@
+import { defineAsyncComponent as pe, ref as d, computed as g, useSlots as Ml, onMounted as Ta, toRefs as $l, watch as O, nextTick as be, onBeforeUnmount as Aa, shallowRef as Ye, createElementBlock as Ae, openBlock as F, normalizeClass as Il, normalizeStyle as xe, createCommentVNode as W, createElementVNode as J, createBlock as Y, unref as L, createSlots as Fa, withCtx as b, renderSlot as M, normalizeProps as K, guardReactiveProps as ee, createVNode as Ra, Teleport as Tl, toDisplayString as Ve, resolveDynamicComponent as Al, mergeProps as Fl, createTextVNode as Oa } from "vue";
+import { c as Rl, t as Ol, b as Pl, p as ae, O as Le, e as Dl, m as Ge, a as se, d as re, h as Pa, u as El, a1 as Nl, w as _l, o as Hl, f as Bl, G as Da, s as ke, S as Xl, P as Ul, Q as Wl, H as Yl } from "./lib-BcBZIm6u.js";
+import { c as Vl, a as qe, d as Gl, t as ql, u as Zl, l as C, r as Fe, b as V, p as Ea } from "./useResponsive-DfdjqQps.js";
+import { u as jl, a as Ze } from "./useNestedProp-B7CiTRDS.js";
+import { u as Jl, B as Ql } from "./BaseScanner-BgWxam9d.js";
+import { u as Kl } from "./usePrinter-C1GiglOH.js";
+import { u as et, a as at, l as lt } from "./useTimeLabels-BGFjWgrv.js";
+import { u as tt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ot } from "./useChartAccessibility-9icAAmYg.js";
+import ut from "./img-CFY3JivG.js";
+import { t as st } from "./themes-Dw-dDudK.js";
+import rt from "./Legend-C8u37J42.js";
+import nt from "./Title-CFmv95In.js";
+import it from "./BaseIcon-B5KaGWWC.js";
+import vt from "./vue-ui-accordion-BKkTS12x.js";
+import { S as ct } from "./SlicerPreview-Cobmb_1S.js";
+import { _ as dt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ht = ["id"], ft = ["id"], yt = ["id"], mt = ["onClick"], gt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, pt = ["innerHTML"], bt = {
+  __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"],
+  setup(je, { expose: Na, emit: _a }) {
+    const Ha = pe(() => import("./Tooltip-Cs4v8OnI.js")), Ba = pe(() => import("./DataTable-DOx3zgih.js")), Xa = pe(() => import("./UserOptions-C0YT60JN.js")), Ua = pe(() => import("./NonSvgPenAndPaper-BcxfJ-r2.js")), Wa = pe(() => import("./BaseDraggableDialog-CbuLbfrc.js")), { vue_ui_xy_canvas: Ya } = jl(), p = je, Q = d(Rl()), H = d(null), le = d(null), v = d(null), m = d(1), G = d(1), ne = d(!1), h = d(null), Ce = d(""), Je = d(null), A = d([]), te = d(1), D = d(!0), B = d(!0), we = d(null), Qe = d(0), ie = d(!1), Ke = d(null), ea = d(null), q = d(null), aa = d(null), Re = d(0), Oe = d(0), Pe = d(0), E = d(null), la = d(!1), ve = d(null), De = d(null), ce = d(!1), ta = d(!1), Se = d(!1), w = d(null), X = g(() => Array.isArray(_e.value) && _e.value.length > 0), Ee = _a, Va = Ml();
+    Ta(() => {
+      Va["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
+    });
+    const a = d(Be()), Ga = g(() => !!a.value.debug), { loading: Ne, FINAL_DATASET: _e } = Jl({
+      ...$l(p),
+      FINAL_CONFIG: a,
+      prepareConfig: Be,
+      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: Ol({
+        defaultConfig: a.value,
+        userConfig: {
+          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
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: He, setUserOptionsVisibility: oa, keepUserOptionState: ua } = tt({ config: a.value }), { svgRef: S } = ot({ config: a.value.style.chart.title });
+    function qa() {
+      oa(!0);
+    }
+    function Za() {
+      oa(!1), Ee("selectX", { seriesIndex: null, datapoint: null }), h.value = null;
+    }
+    function Be() {
+      const e = Ze({
+        userConfig: p.config,
+        defaultConfig: Ya
+      });
+      let l = {};
+      return e.theme ? l = {
+        ...Ze({
+          userConfig: st.vue_ui_xy_canvas[e.theme] || p.config,
+          defaultConfig: e
+        }),
+        customPalette: Pl[e.theme] || ae
+      } : l = e, p.config && Le(p.config, "style.chart.scale.min") ? l.style.chart.scale.min = p.config.style.chart.scale.min : l.style.chart.scale.min = null, p.config && Le(p.config, "style.chart.scale.max") ? l.style.chart.scale.max = p.config.style.chart.scale.max : l.style.chart.scale.max = null, p.config && Le(p.config, "style.chart.zoom.startIndex") ? l.style.chart.zoom.startIndex = p.config.style.chart.zoom.startIndex : l.style.chart.zoom.startIndex = null, p.config && Le(p.config, "style.chart.zoom.endIndex") ? l.style.chart.zoom.endIndex = p.config.style.chart.zoom.endIndex : l.style.chart.zoom.endIndex = null, p.config && Le(p.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."), l.style.chart.grid.x.timeLabels = Ze({
+        defaultConfig: l.style.chart.grid.x.timeLabels,
+        userConfig: p.config.style.chart.grid.y.timeLabels
+      })), l;
+    }
+    O(() => p.config, (e) => {
+      Ne.value || (a.value = Be()), He.value = !a.value.userOptions.showOnChartHover, La(), Re.value += 1, Oe.value += 1, Pe.value += 1, c.value.showTable = a.value.table.show, c.value.showDataLabels = a.value.style.chart.dataLabels.show, c.value.stacked = a.value.style.chart.stacked, c.value.showTooltip = a.value.style.chart.tooltip.show;
+    }, { deep: !0 }), O(() => p.dataset, async (e) => {
+      !Array.isArray(e) || e.length === 0 || (await be(), S.value && !v.value && (v.value = S.value.getContext("2d", { willReadFrequently: !0 })), D.value = !0, B.value = !0, await he(), Me(), Re.value += 1, Oe.value += 1, Pe.value += 1);
+    }, { deep: !0 });
+    const sa = d(a.value.style.chart.aspectRatio), { isPrinting: ra, isImaging: na, generatePdf: ia, generateImage: va } = Kl({
+      elementId: `xy_canvas_${Q.value}`,
+      fileName: a.value.style.chart.title.text || "vue-ui-xy-canvas",
+      options: a.value.userOptions.print
+    }), c = d({
+      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 ca(e) {
+      ie.value = e, Qe.value += 1;
+    }
+    const da = g(() => Dl(a.value.customPalette)), R = g(() => P.value ? Math.max(...P.value.filter((e, l) => !A.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0);
+    function ja(e) {
+      w.value = e, Z();
+    }
+    const o = g(() => {
+      const e = m.value - m.value * (a.value.style.chart.paddingProportions.left + a.value.style.chart.paddingProportions.right);
+      return {
+        canvasWidth: m.value,
+        canvasHeight: G.value,
+        left: m.value * a.value.style.chart.paddingProportions.left,
+        top: G.value * a.value.style.chart.paddingProportions.top,
+        right: m.value - m.value * a.value.style.chart.paddingProportions.right,
+        bottom: G.value - G.value * a.value.style.chart.paddingProportions.bottom,
+        width: e,
+        height: G.value - G.value * (a.value.style.chart.paddingProportions.top + a.value.style.chart.paddingProportions.bottom),
+        slot: e / (u.value.end - u.value.start)
+      };
+    });
+    function ha(e, l) {
+      return e / l;
+    }
+    function Ja({ hasAutoScale: e, series: l, min: t, max: r, scale: s, yOffset: i, individualHeight: n, stackIndex: f = null }) {
+      return l.map((x, T) => {
+        const k = s.min < 0 ? Math.abs(s.min) : 0, _ = ha(x + k, k + s.max);
+        let me, ge;
+        e && (me = s.min, ge = ha(x - me, s.max - me));
+        let U = 0;
+        return f === null ? U = o.value.bottom - o.value.height * (e ? ge : _) : U = o.value.bottom - i - n * (e ? ge : _), {
+          x: o.value.left + o.value.slot * T + o.value.slot / 2,
+          y: U,
+          value: x
+        };
+      });
+    }
+    const z = g(() => {
+      const e = a.value.style.chart.scale.min !== null ? a.value.style.chart.scale.min : Math.min(...P.value.filter((n, f) => !A.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(u.value.start, u.value.end))), l = a.value.style.chart.scale.max !== null ? a.value.style.chart.scale.max : Math.max(...P.value.filter((n, f) => !A.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(u.value.start, u.value.end))), t = Ge(e < 0 ? e : 0, l === e ? e + 1 < 0 ? 0 : e + 1 : l < 0 ? 0 : l, a.value.style.chart.scale.ticks), r = t.min < 0 ? Math.abs(t.min) : 0, s = o.value.bottom - o.value.height * (r / (t.max + r)), i = t.ticks.map((n) => ({
+        y: o.value.bottom - o.value.height * ((n + r) / (t.max + r)),
+        x: o.value.left - 8,
+        value: n
+      }));
+      return {
+        absoluteMin: r,
+        max: l,
+        min: e,
+        scale: t,
+        yLabels: i,
+        zero: s
+      };
+    }), Qa = g(() => y.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>${se(
+      a.value.style.chart.dataLabels.formatter,
+      e.series[h.value] ?? "-",
+      re({
+        p: e.prefix || "",
+        v: e.series[h.value] ?? "-",
+        s: e.suffix || "",
+        r: e.rounding || 0
+      }),
+      { datapoint: e, seriesIndex: h.value }
+    )}</span>
+            </div>
+        `)), ze = g(() => a.value.style.chart.line.cutNullValues), P = g(() => _e.value.map((e, l) => ({
+      ...e,
+      series: El({
+        data: Nl(e.series, [], ze.value),
+        threshold: a.value.downsample.threshold
+      }),
+      absoluteIndex: l,
+      color: Pa(e.color || da.value[l] || ae[l] || ae[l % ae.length])
+    }))), Ka = g(() => {
+      if (!a.value.style.chart.zoom.minimap.show) return [];
+      const e = P.value.filter((s) => !A.value.includes(s.absoluteIndex)), l = Math.max(...e.map((s) => s.series.length)), t = [];
+      for (let s = 0; s < l; s += 1)
+        t.push(e.map((i) => i.series[s] || 0).reduce((i, n) => (i || 0) + (n || 0), 0));
+      const r = Math.min(...t);
+      return t.map((s) => s + (r < 0 ? Math.abs(r) : 0));
+    }), el = g(() => a.value.style.chart.zoom.minimap.show ? P.value.map((l) => ({
+      ...l,
+      isVisible: !A.value.includes(l.absoluteIndex)
+    })) : []);
+    O(R, (e) => {
+      e && he();
+    });
+    const y = g(() => _l(P.value.filter((e, l) => !A.value.includes(e.absoluteIndex))).map((e, l) => ({
+      ...e,
+      series: e.series.slice(u.value.start, u.value.end)
+    })).map((e, l) => {
+      let t = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, r = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
+      t === r && (t = t >= 0 ? r - 1 : t, r = r >= 0 ? r : t + 1), e.series.filter((U) => ![null, void 0].includes(U)).map((U) => (U - t) / (r - t));
+      const s = {
+        valueMin: t,
+        valueMax: r
+      }, i = e.scaleSteps || a.value.style.chart.scale.ticks;
+      let n;
+      e.autoScaling ? n = Ge(s.valueMin, s.valueMax, i) : n = Ge(s.valueMin < 0 ? s.valueMin : 0, s.valueMax <= 0 ? 0 : s.valueMax, i);
+      const f = c.value.stacked ? o.value.height * (1 - e.cumulatedStackRatio) : 0, x = c.value.stacked ? o.value.height / a.value.style.chart.stackGap : 0, T = c.value.stacked ? o.value.height * e.stackRatio - x : o.value.height, k = n.min < 0 ? Math.abs(n.min) : 0;
+      let _;
+      e.autoScaling && c.value.stacked && r <= 0 ? _ = o.value.bottom - f - T : _ = o.value.bottom - f - T * (k / (n.max + k));
+      const me = n.ticks.map((U, zl) => ({
+        y: o.value.bottom - f - T * (zl / (n.ticks.length - 1)),
+        x: o.value.left - 8,
+        value: U
+      })), ge = Ja({
+        hasAutoScale: c.value.stacked && e.autoScaling,
+        series: e.series,
+        min: c.value.stacked ? t : z.value.min,
+        max: c.value.stacked ? r : z.value.max,
+        scale: c.value.stacked ? n : z.value.scale,
+        yOffset: f,
+        individualHeight: T,
+        stackIndex: c.value.stacked ? l : null
+      });
+      return {
+        ...e,
+        coordinatesLine: ge,
+        min: t,
+        max: r,
+        localScale: n,
+        localZero: _,
+        localMin: k,
+        localYLabels: me,
+        yOffset: f,
+        individualHeight: T
+      };
+    })), u = d({
+      start: 0,
+      end: R.value
+    }), $ = d({ start: 0, end: R.value }), de = d(null);
+    function al() {
+      return new Promise((e) => requestAnimationFrame(
+        () => requestAnimationFrame(() => e())
+      ));
+    }
+    Aa(() => {
+      de.value && cancelAnimationFrame(de.value);
+    });
+    async function he() {
+      ya(), await be(), de.value && cancelAnimationFrame(de.value), de.value = requestAnimationFrame(async () => {
+        await al(), ya();
+      });
+    }
+    const ll = g(() => a.value.style.chart.zoom.preview.enable && ($.value.start !== u.value.start || $.value.end !== u.value.end));
+    function fa(e, l) {
+      $.value[e] = l;
+    }
+    async function ya() {
+      if (!ce.value) {
+        ce.value = !0;
+        try {
+          const { startIndex: e, endIndex: l } = a.value.style.chart.zoom, t = Math.max(...P.value.map((i) => i.series.length)), r = e ?? 0, s = l != null ? Math.min(ma(l + 1), t) : t;
+          Se.value = !0, u.value.start = r, u.value.end = s, $.value.start = r, $.value.end = s, Xe(), ta.value = !0, await be(), q.value && (q.value.setStartValue(u.value.start), q.value.setEndValue(u.value.end));
+        } finally {
+          queueMicrotask(() => {
+            Se.value = !1;
+          }), ce.value = !1;
+        }
+      }
+    }
+    function tl(e) {
+      ce.value || Se.value || e !== u.value.start && (u.value.start = e, $.value.start = e, Xe());
+    }
+    function ol(e) {
+      if (ce.value || Se.value) return;
+      const l = ma(e);
+      l !== u.value.end && (u.value.end = l, $.value.end = l, Xe());
+    }
+    function ma(e) {
+      const l = R.value;
+      return e > l ? l : e < 0 || e < u.value.start ? a.value.style.chart.zoom.startIndex !== null ? a.value.style.chart.zoom.startIndex + 1 : 1 : e;
+    }
+    function Xe() {
+      const e = Math.max(
+        1,
+        Math.max(...P.value.map((r) => r.series.length))
+      );
+      let l = Math.max(0, Math.min(u.value.start ?? 0, e - 1)), t = Math.max(l + 1, Math.min(u.value.end ?? e, e));
+      (!Number.isFinite(l) || !Number.isFinite(t) || t <= l) && (l = 0, t = e), u.value = { start: l, end: t }, $.value.start = l, $.value.end = t, q.value && (q.value.setStartValue(l), q.value.setEndValue(t));
+    }
+    const ul = g(() => y.value.filter((e) => ["line", "plot", void 0].includes(e.type))), I = g(() => y.value.filter((e) => e.type === "bar"));
+    function Me() {
+      if (!S.value || !le.value) return;
+      const e = le.value.offsetWidth, l = le.value.offsetHeight;
+      S.value.width = e * te.value * 2, S.value.height = l * te.value * 2, m.value = e * te.value * 2, G.value = l * te.value * 2, v.value?.scale(te.value, te.value), Z();
+    }
+    O(X, async (e) => {
+      if (!e) {
+        we.value = null, ne.value = !1, h.value = null, E.value = null;
+        return;
+      }
+      await be(), S.value && !v.value && (v.value = S.value.getContext("2d", { willReadFrequently: !0 })), D.value = !0, B.value = !0, await he(), Me(), Z();
+    });
+    function sl() {
+      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), !!X.value)) {
+        if (c.value.stacked)
+          a.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < a.value.style.chart.grid.y.verticalLines.hideUnderXLength ? y.value.forEach((e) => {
+            for (let l = 0; l < u.value.end - u.value.start + 1; l += 1)
+              C(
+                v.value,
+                [
+                  {
+                    x: o.value.left + o.value.slot * l,
+                    y: o.value.bottom - e.yOffset - e.individualHeight
+                  },
+                  {
+                    x: o.value.left + o.value.slot * l,
+                    y: o.value.bottom - e.yOffset
+                  }
+                ],
+                {
+                  color: a.value.style.chart.grid.y.verticalLines.color
+                }
+              );
+          }) : a.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start >= a.value.style.chart.grid.y.verticalLines.hideUnderXLength && y.value.forEach((e) => {
+            for (let l = u.value.start; l < u.value.end; l += 1)
+              l % Math.floor((u.value.end - u.value.start) / a.value.style.chart.grid.x.timeLabels.modulo) === 0 && C(
+                v.value,
+                [
+                  {
+                    x: o.value.left + o.value.slot * (l - u.value.start) + o.value.slot / 2,
+                    y: o.value.bottom - e.yOffset - e.individualHeight
+                  },
+                  {
+                    x: o.value.left + o.value.slot * (l - u.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 ? y.value.forEach((e) => {
+            e.localYLabels.forEach((l, t) => {
+              t < e.localYLabels.length - 1 && Fe(
+                v.value,
+                [
+                  { x: o.value.left, y: l.y },
+                  { x: o.value.right, y: l.y },
+                  { x: o.value.right, y: e.localYLabels[t + 1].y },
+                  { x: o.value.left, y: e.localYLabels[t + 1].y }
+                ],
+                {
+                  fillColor: t % 2 === 0 ? "transparent" : ke(a.value.style.chart.grid.x.horizontalLines.color, a.value.style.chart.grid.x.horizontalLines.opacity),
+                  strokeColor: "transparent"
+                }
+              );
+            });
+          }) : y.value.forEach((e) => {
+            e.localYLabels.slice(u.value.start, u.value.end).forEach((l) => {
+              C(
+                v.value,
+                [
+                  { x: o.value.left, y: l.y },
+                  { x: o.value.right, y: l.y }
+                ],
+                {
+                  color: a.value.style.chart.grid.x.horizontalLines.color
+                }
+              );
+            });
+          })), a.value.style.chart.grid.zeroLine.show && y.value.forEach((e) => {
+            C(
+              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 && y.value.forEach((e) => {
+            C(
+              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
+              }
+            ), C(
+              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
+              }
+            );
+          }), y.value.forEach((e) => {
+            V(
+              v.value,
+              e.name,
+              m.value / 35,
+              o.value.bottom - e.yOffset - e.individualHeight / 2,
+              {
+                align: "center",
+                rotation: -90,
+                color: e.color,
+                font: `${Math.round(m.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 && u.value.end - u.value.start < a.value.style.chart.grid.y.verticalLines.hideUnderXLength)
+            for (let e = 0; e < u.value.end - u.value.start + 1; e += 1)
+              C(
+                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 && u.value.end - u.value.start >= a.value.style.chart.grid.y.verticalLines.hideUnderXLength)
+            for (let e = u.value.start; e < u.value.end; e += 1)
+              e % Math.floor((u.value.end - u.value.start) / a.value.style.chart.grid.x.timeLabels.modulo) === 0 && C(
+                v.value,
+                [
+                  { x: o.value.left + o.value.slot * (e - u.value.start) + o.value.slot / 2, y: o.value.top },
+                  { x: o.value.left + o.value.slot * (e - u.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 ? z.value.yLabels.forEach((e, l) => {
+            l < z.value.yLabels.length - 1 && Fe(
+              v.value,
+              [
+                { x: o.value.left, y: e.y },
+                { x: o.value.right, y: e.y },
+                { x: o.value.right, y: z.value.yLabels[l + 1].y },
+                { x: o.value.left, y: z.value.yLabels[l + 1].y }
+              ],
+              {
+                fillColor: l % 2 === 0 ? "transparent" : ke(a.value.style.chart.grid.x.horizontalLines.color, a.value.style.chart.grid.x.horizontalLines.opacity),
+                strokeColor: "transparent"
+              }
+            );
+          }) : z.value.yLabels.forEach((e) => {
+            C(
+              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 && C(
+            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 && C(
+            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 && C(
+            v.value,
+            [
+              { x: o.value.left, y: z.value.zero },
+              { x: o.value.right, y: z.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 && V(
+          v.value,
+          a.value.style.chart.grid.y.axisName,
+          m.value - m.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(m.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 && V(
+          v.value,
+          a.value.style.chart.grid.x.axisName,
+          m.value / 2,
+          G.value,
+          {
+            font: `${a.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+            color: a.value.style.chart.color,
+            align: "center"
+          }
+        );
+      }
+    }
+    function rl(e) {
+      for (let l = 0; l < e.coordinatesLine.length; l += 1) {
+        const t = (h.value === l || w.value === l ? m.value / 150 : a.value.style.chart.line.plots.show || e.type === "plot" ? m.value / 200 : 0) * a.value.style.chart.line.plots.radiusRatio;
+        qe(
+          v.value,
+          { x: e.coordinatesLine[l].x, y: e.coordinatesLine[l].y },
+          t,
+          {
+            color: a.value.style.chart.backgroundColor,
+            fillStyle: e.color
+          }
+        );
+      }
+    }
+    function nl() {
+      y.value.forEach((e) => {
+        e.showYMarker && fe(e) && V(
+          v.value,
+          se(
+            a.value.style.chart.dataLabels.formatter,
+            fe(e).value,
+            re({
+              p: e.prefix || a.value.style.chart.grid.y.axisLabels.prefix || "",
+              v: fe(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: fe(e), seriesIndex: null }
+          ),
+          o.value.left - 8 + a.value.style.chart.grid.y.axisLabels.offsetX,
+          fe(e).y,
+          {
+            align: "right",
+            font: `${a.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+            color: e.color
+          }
+        );
+      });
+    }
+    function il() {
+      a.value.style.chart.grid.y.axisLabels.show && (c.value.stacked ? y.value.forEach((e) => {
+        e.localYLabels.forEach((l, t) => {
+          V(
+            v.value,
+            se(
+              a.value.style.chart.dataLabels.formatter,
+              l.value,
+              re({
+                p: e.prefix || a.value.style.chart.grid.y.axisLabels.prefix || "",
+                v: l.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: l, seriesIndex: t }
+            ),
+            l.x + a.value.style.chart.grid.y.axisLabels.offsetX,
+            l.y,
+            {
+              align: "right",
+              font: `${a.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.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 ?? w.value) ? 0.2 : 1
+            }
+          );
+        });
+      }) : z.value.yLabels.forEach((e, l) => {
+        V(
+          v.value,
+          se(
+            a.value.style.chart.dataLabels.formatter,
+            e.value,
+            re({
+              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: l }
+          ),
+          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(m.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: y.value.some((t) => t.showYMarker) && ![null, void 0].includes(h.value ?? w.value) ? 0.2 : 1
+          }
+        );
+      }));
+    }
+    function vl(e) {
+      for (let l = 0; l < e.coordinatesLine.length; l += 1)
+        V(
+          v.value,
+          se(
+            a.value.style.chart.dataLabels.formatter,
+            e.coordinatesLine[l].value,
+            re({
+              p: e.prefix || "",
+              v: e.coordinatesLine[l].value,
+              s: e.suffix || "",
+              r: e.rounding || 0
+            }),
+            { datapoint: e.coordinatesLine[l], seriesIndex: l }
+          ),
+          e.coordinatesLine[l].x,
+          e.coordinatesLine[l].y + a.value.style.chart.dataLabels.offsetY,
+          {
+            align: "center",
+            font: `${a.value.style.chart.dataLabels.bold ? "bold " : ""}${Math.round(m.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 N = g(() => et({
+      values: a.value.style.chart.grid.x.timeLabels.values,
+      maxDatapoints: R.value,
+      formatter: a.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+      start: 0,
+      end: R.value
+    })), ga = g(() => {
+      const e = a.value.style.chart.grid.x.timeLabels.datetimeFormatter, l = at({
+        useUTC: e.useUTC,
+        locale: lt[e.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
+        januaryAsYear: e.januaryAsYear
+      });
+      return (t, r) => {
+        const i = a.value.style.chart.grid.x.timeLabels.values?.[t];
+        return i == null ? "" : l.formatDate(new Date(i), r);
+      };
+    }), pa = g(() => (a.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
+      text: ga.value(t, a.value.style.chart.zoom.timeFormat),
+      absoluteIndex: t
+    }))), cl = g(() => (a.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
+      text: ga.value(t, a.value.style.chart.tooltip.timeFormat),
+      absoluteIndex: t
+    })));
+    function dl() {
+      for (let e = u.value.start; e < u.value.end; e += 1)
+        (u.value.end - u.value.start < a.value.style.chart.grid.x.timeLabels.modulo || u.value.end - u.value.start >= a.value.style.chart.grid.x.timeLabels.modulo && (e % Math.floor((u.value.end - u.value.start) / a.value.style.chart.grid.x.timeLabels.modulo) === 0 || (e === h.value + u.value.start || e === w.value) && a.value.style.chart.grid.x.timeLabels.showMarker)) && V(
+          v.value,
+          N.value[e] ? N.value[e].text : e + 1,
+          o.value.left + o.value.slot * (e - u.value.start) + o.value.slot / 2,
+          o.value.bottom + m.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(m.value / 40 * a.value.style.chart.grid.x.timeLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+            color: a.value.style.chart.grid.x.timeLabels.showMarker ? ke(a.value.style.chart.grid.x.timeLabels.color, h.value !== null || w.value !== null ? h.value + u.value.start === e || w.value === e ? 100 : 20 : 100) : a.value.style.chart.grid.x.timeLabels.color,
+            rotation: a.value.style.chart.grid.x.timeLabels.rotation
+          }
+        );
+    }
+    function ba() {
+      C(
+        v.value,
+        [
+          { x: o.value.left + o.value.slot * (h.value ?? w.value) + o.value.slot / 2, y: o.value.top },
+          { x: o.value.left + o.value.slot * (h.value ?? w.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 hl() {
+      E.value && C(
+        v.value,
+        [
+          { x: o.value.left, y: E.value },
+          { x: o.value.right, y: E.value }
+        ],
+        {
+          color: a.value.style.chart.selector.color,
+          lineDash: a.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+          lineWidth: 2
+        }
+      );
+    }
+    function fl() {
+      I.value.forEach((e, l) => {
+        for (let t = 0; t < e.coordinatesLine.length; t += 1)
+          Fe(
+            v.value,
+            [
+              {
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (c.value.stacked ? 0 : o.value.slot / I.value.length * l - (l === 0 ? 0 : o.value.slot / (5 * I.value.length) * l)),
+                y: c.value.stacked ? e.localZero : z.value.zero
+              },
+              {
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (c.value.stacked ? 0 : o.value.slot / I.value.length * l - (l === 0 ? 0 : o.value.slot / (5 * I.value.length) * l)) + o.value.slot * 0.8 / (c.value.stacked ? 1 : I.value.length),
+                y: c.value.stacked ? e.localZero : z.value.zero
+              },
+              {
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (c.value.stacked ? 0 : o.value.slot / I.value.length * l - (l === 0 ? 0 : o.value.slot / (5 * I.value.length) * l)) + o.value.slot * 0.8 / (c.value.stacked ? 1 : I.value.length),
+                y: e.coordinatesLine[t].y
+              },
+              {
+                x: o.value.left + o.value.slot * t + o.value.slot / 10 + (c.value.stacked ? 0 : o.value.slot / I.value.length * l - (l === 0 ? 0 : o.value.slot / (5 * I.value.length) * l)),
+                y: e.coordinatesLine[t].y
+              }
+            ],
+            {
+              strokeColor: a.value.style.chart.backgroundColor,
+              gradient: {
+                type: "linear",
+                start: {
+                  x: e.coordinatesLine[t].x,
+                  y: e.coordinatesLine[t].y
+                },
+                end: {
+                  x: e.coordinatesLine[t].x,
+                  y: c.value.stacked ? e.localZero : z.value.zero
+                },
+                stops: [
+                  { offset: 0, color: e.color },
+                  { offset: 1, color: a.value.style.chart.bar.gradient.show ? Xl(e.color, 0.5) : e.color }
+                ]
+              }
+            }
+          ), c.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && V(
+            v.value,
+            se(
+              a.value.style.chart.dataLabels.formatter,
+              e.coordinatesLine[t].value,
+              re({
+                p: e.prefix || "",
+                v: e.coordinatesLine[t].value,
+                s: e.suffix || "",
+                r: e.rounding || 0
+              }),
+              { datapoint: e.coordinatesLine[t], seriesIndex: t }
+            ),
+            o.value.left + o.value.slot * t + o.value.slot / 10 + (c.value.stacked ? 0 : o.value.slot / I.value.length * l - (l === 0 ? 0 : o.value.slot / (5 * I.value.length) * l)) + o.value.slot * 0.4 / (c.value.stacked ? 1 : I.value.length),
+            (e.coordinatesLine[t].value < 0 ? c.value.stacked ? e.localZero : z.value.zero : e.coordinatesLine[t].y) + a.value.style.chart.dataLabels.offsetY,
+            {
+              align: "center",
+              font: `${Math.round(m.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 yl(e, l) {
+      const t = e.coordinatesLine.map((n, f) => {
+        const x = e.series[f];
+        return x != null && Number.isFinite(n?.y) ? n : null;
+      }), r = [], s = [];
+      let i = [];
+      for (let n = 0; n < t.length; n += 1) {
+        const f = t[n];
+        if (f)
+          i.push(f);
+        else {
+          if (i.length >= 2) {
+            const x = i[0], T = i[i.length - 1];
+            r.push([
+              { x: x.x, y: l },
+              ...i,
+              { x: T.x, y: l }
+            ]);
+          } else i.length === 1 && s.push(i[0]);
+          i = [];
+        }
+      }
+      if (i.length >= 2) {
+        const n = i[0], f = i[i.length - 1];
+        r.push([
+          { x: n.x, y: l },
+          ...i,
+          { x: f.x, y: l }
+        ]);
+      } else i.length === 1 && s.push(i[0]);
+      return { polygons: r, singles: s };
+    }
+    function ml(e) {
+      const l = e.coordinatesLine.map((s, i) => {
+        const n = e.series[i];
+        return n != null && Number.isFinite(s?.y) ? s : null;
+      }), t = [];
+      let r = [];
+      for (let s = 0; s < l.length; s += 1) {
+        const i = l[s];
+        i ? r.push(i) : (r.length >= 2 && t.push(r), r = []);
+      }
+      return r.length >= 2 && t.push(r), t;
+    }
+    function xa(e) {
+      if (ze.value) {
+        const l = ml(e);
+        for (const t of l)
+          C(v.value, t, {
+            color: e.color,
+            lineWidth: 3
+          });
+      } else
+        C(v.value, e.coordinatesLine, {
+          color: e.color,
+          lineWidth: 3
+        });
+    }
+    function gl(e) {
+      const l = !!ze.value;
+      if (e.useArea) {
+        const t = c.value.stacked ? e.localZero : z.value.zero;
+        if (l) {
+          const { polygons: r, singles: s } = yl(e, t);
+          for (const n of r)
+            Ea(v.value, n, {
+              fillColor: ke(e.color, a.value.style.chart.area.opacity),
+              strokeColor: "transparent"
+            });
+          const i = m.value / 200 * a.value.style.chart.line.plots.radiusRatio;
+          for (const n of s)
+            qe(
+              v.value,
+              { x: n.x, y: n.y },
+              i,
+              {
+                color: a.value.style.chart.backgroundColor,
+                fillStyle: e.color
+              }
+            );
+        } else {
+          const r = { x: e.coordinatesLine[0].x, y: t }, s = { x: e.coordinatesLine.at(-1).x, y: t };
+          Ea(
+            v.value,
+            [r, ...e.coordinatesLine, s],
+            {
+              fillColor: ke(e.color, a.value.style.chart.area.opacity),
+              strokeColor: "transparent"
+            }
+          );
+        }
+        xa(e);
+        return;
+      }
+      xa(e);
+    }
+    function pl() {
+      y.value.forEach((e, l) => {
+        C(
+          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 bl() {
+      const { left: e, top: l, width: t, height: r } = o.value, s = u.value.start, n = u.value.end - s, f = t / n, x = $.value.start - s, T = $.value.end - s, k = Math.max(0, Math.min(n, x)), _ = Math.max(0, Math.min(n, T));
+      Fe(
+        v.value,
+        [
+          { x: e + k * f, y: l },
+          { x: e + k * f + (_ - k) * f, y: l },
+          { x: e + k * f + (_ - k) * f, y: l + r },
+          { x: e + k * f, y: l + r }
+        ],
+        {
+          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 Z() {
+      !X.value || !S.value || !v.value || (sl(), D.value ? ((h.value !== null || w.value !== null) && a.value.style.chart.selector.show && ba(), fl(), c.value.stacked && a.value.style.chart.grid.x.showAxis && pl(), ul.value.forEach((e) => {
+        (e.type === "line" || !e.type) && gl(e), B.value && (rl(e), c.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && vl(e));
+      }), S.value && (we.value = Vl(S.value))) : (we.value && (v.value.clearRect(0, 0, 1e4, 1e4), v.value.drawImage(we.value, 0, 0)), (h.value !== null || w.value !== null) && a.value.style.chart.selector.show && ba(), (h.value !== null || w.value !== null) && y.value.forEach((e) => {
+        const l = h.value ?? w.value, t = e.coordinatesLine[l];
+        (e.type === "line" || !e.type || e.type === "plot") && t && Number.isFinite(t.x) && Number.isFinite(t.y) && qe(
+          v.value,
+          { x: t.x, y: t.y },
+          m.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 && dl(), a.value.style.chart.selector.show && a.value.style.chart.selector.showHorizontalSelector && hl(), il(), nl(), a.value.style.chart.zoom.preview.enable && (u.value.start !== $.value.start || u.value.end !== $.value.end) && bl(), D.value = !1);
+    }
+    const $e = Gl(() => {
+      B.value = !0, Me();
+    }, R.value > 200 ? 10 : 1, !B.value);
+    function fe(e) {
+      if ([null, void 0].includes(h.value ?? w.value) || !e.coordinatesLine[h.value ?? w.value]) return !1;
+      const { y: l, value: t } = e.coordinatesLine[h.value ?? w.value];
+      return { y: l, value: t };
+    }
+    function xl(e) {
+      if (!X.value || !S.value) return;
+      const { left: l, top: t } = S.value.getBoundingClientRect(), r = e.clientX - l;
+      if (E.value = (e.clientY - t) * 2, (E.value < o.value.top || E.value > o.value.bottom) && (E.value = null), r * 2 < o.value.left || r * 2 > o.value.right) {
+        ne.value = !1, h.value = null;
+        return;
+      }
+      const s = r * 2 - o.value.left;
+      if (h.value = Math.floor(s / o.value.slot), ne.value = !0, !B.value) return;
+      let i = "";
+      const n = a.value.style.chart.tooltip.customFormat, f = y.value.map((x) => ({
+        shape: x.shape || null,
+        name: x.name,
+        color: x.color,
+        type: x.type || "line",
+        value: x.series.find((T, k) => k === h.value)
+      }));
+      Ll({ seriesIndex: h.value, datapoint: f }), Da(n) && Yl(() => n({
+        seriesIndex: h.value,
+        datapoint: f,
+        series: y.value,
+        config: a.value
+      })) ? Ce.value = n({
+        seriesIndex: h.value,
+        datapoint: f,
+        series: y.value,
+        config: a.value
+      }) : (a.value.style.chart.grid.x.timeLabels.values.slice(u.value.start, u.value.end)[h.value] ? i += `<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 ? N.value.slice(u.value.start, u.value.end)[h.value]?.text : cl.value[h.value]?.text}</div>` : i += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${a.value.style.chart.tooltip.borderColor}; width:100%">${N.value[h.value + u.value.start]?.text ?? ""}</div>`, i += Qa.value.join(""), Ce.value = i), B.value = !1;
+    }
+    function Ll({ seriesIndex: e, datapoint: l }) {
+      const t = u.value.start + e;
+      Ee("selectX", {
+        dataset: l,
+        index: t,
+        indexLabel: ""
+      });
+    }
+    O(() => p.selectedXIndex, (e) => {
+      if ([null, void 0].includes(p.selectedXIndex)) {
+        h.value = null;
+        return;
+      }
+      const l = e - u.value.start;
+      l < 0 || e >= u.value.end ? h.value = null : h.value = l ?? null;
+    }, { immediate: !0 }), O(() => h.value, (e) => {
+      $e();
+    }), O(() => u.value, (e) => {
+      D.value = !0, Z();
+    }, {
+      deep: !0
+    }), O(() => $.value, (e) => {
+      Z();
+    }, { deep: !0 }), O(() => c.value.showDataLabels, (e) => {
+      D.value = !0, Z();
+    }), O(() => E.value, (e) => {
+      e && Z();
+    }), O(() => c.value.stacked, (e) => {
+      D.value = !0, B.value = !0, $e();
+    });
+    function kl() {
+      ne.value = !1, h.value = null, Ce.value = "", E.value = null, Z();
+    }
+    const j = Ye(null), oe = Ye(null), ue = Ye(null);
+    Ta(() => {
+      la.value = !0, La();
+    });
+    function La() {
+      if (Hl(p.dataset) && Ga.value && Bl({ componentName: "VueUiXyCanvas", type: "dataset" }), be(() => {
+        S.value && !v.value && (v.value = S.value.getContext("2d", { willReadFrequently: !0 })), v.value && X.value && (D.value = !0, B.value = !0, Me());
+      }), a.value.responsive) {
+        const e = ql(() => {
+          const { width: l, height: t } = Zl({
+            chart: H.value,
+            title: a.value.style.chart.title.text ? Ke.value : null,
+            legend: a.value.style.chart.legend.show ? ea.value : null,
+            slicer: a.value.style.chart.zoom.show && R.value > 6 ? q.value?.$el : null,
+            source: aa.value
+          });
+          requestAnimationFrame(() => {
+            sa.value = `${l} / ${t}`;
+          });
+        });
+        j.value && (oe.value && j.value.unobserve(oe.value), j.value.disconnect()), j.value = new ResizeObserver(e), oe.value = H.value.parentNode, j.value.observe(oe.value);
+      }
+      ue.value && ue.value.disconnect(), ue.value = new ResizeObserver((e) => {
+        for (const l of e)
+          l.contentBoxSize && le.value && (D.value = !0, $e());
+      }), ue.value.observe(le.value), he();
+    }
+    Aa(() => {
+      ue.value && ue.value.disconnect(), j.value && (oe.value && j.value.unobserve(oe.value), j.value.disconnect());
+    });
+    function ka(e) {
+      Ee("selectLegend", y.value.find((l) => l.absoluteIndex === e)), A.value.includes(e) ? A.value = A.value.filter((l) => l !== e) : A.value.push(e), D.value = !0, $e();
+    }
+    const Ca = g(() => P.value.map((e, l) => ({
+      ...e,
+      name: e.name,
+      color: Pa(e.color) || da.value[l] || ae[l] || ae[l % ae.length],
+      shape: e.shape || "circle",
+      prefix: e.prefix || "",
+      suffix: e.suffix || "",
+      rounding: e.rounding || 0
+    })).map((e) => ({
+      ...e,
+      opacity: A.value.includes(e.absoluteIndex) ? 0.5 : 1,
+      segregate: () => ka(e.absoluteIndex),
+      isSegregated: A.value.includes(e.absoluteIndex)
+    }))), Cl = 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" : ""
+    })), Ie = g(() => {
+      const e = [""].concat(y.value.map((s) => s.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 l = [];
+      for (let s = 0; s < R.value; s += 1) {
+        const i = y.value.map((n) => n.series[s] ?? 0).reduce((n, f) => n + f, 0);
+        l.push([a.value.style.chart.grid.x.timeLabels.values.slice(u.value.start, u.value.end)[s] ? N.value.slice(u.value.start, u.value.end)[s].text : s + 1].concat(y.value.map((n) => (n.series[s] ?? 0).toFixed(a.value.table.rounding))).concat((i ?? 0).toFixed(a.value.table.rounding)));
+      }
+      const t = {
+        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
+      }, r = [a.value.table.columnNames.period].concat(y.value.map((s) => s.name)).concat(a.value.table.columnNames.total);
+      return { head: e, body: l.slice(0, u.value.end - u.value.start), config: t, colNames: r };
+    }), wa = g(() => {
+      if (y.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const e = y.value.map((t) => ({
+        label: t.name,
+        color: t.color,
+        type: t.type
+      })), l = [];
+      for (let t = u.value.start; t < u.value.end; t += 1) {
+        const r = [a.value.style.chart.grid.x.timeLabels.values[t] ? N.value[t].text : t + 1];
+        y.value.forEach((s) => {
+          r.push(Number((s.series[t] || 0).toFixed(a.value.table.rounding)));
+        }), l.push(r);
+      }
+      return { head: e, body: l };
+    });
+    function Ue(e = null) {
+      const l = [[a.value.style.chart.title.text], [a.value.style.chart.title.subtitle.text], [""]], t = ["", ...wa.value.head.map((n) => n.label)], r = wa.value.body, s = l.concat([t]).concat(r), i = Ul(s);
+      e ? e(i) : Wl({ csvContent: i, title: a.value.style.chart.title.text || "vue-ui-xy-canvas" });
+    }
+    function wl() {
+      return y.value;
+    }
+    function Sa() {
+      c.value.showTable = !c.value.showTable;
+    }
+    function za() {
+      c.value.showDataLabels = !c.value.showDataLabels;
+    }
+    function Ma() {
+      c.value.stacked = !c.value.stacked;
+    }
+    function $a() {
+      c.value.showTooltip = !c.value.showTooltip;
+    }
+    const Te = d(!1);
+    function We() {
+      Te.value = !Te.value;
+    }
+    async function Sl({ scale: e = 2 } = {}) {
+      if (!H.value) return;
+      const { width: l, height: t } = H.value.getBoundingClientRect(), r = l / t, { imageUri: s, base64: i } = await ut({ domElement: H.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: s,
+        base64: i,
+        title: a.value.style.chart.title.text,
+        width: l,
+        height: t,
+        aspectRatio: r
+      };
+    }
+    const ye = g(() => {
+      const e = a.value.table.useDialog && !a.value.table.show, l = c.value.showTable;
+      return {
+        component: e ? Wa : vt,
+        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: ie.value,
+          fullscreenParent: H.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            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
+            }
+          }
+        }
+      };
+    });
+    O(() => c.value.showTable, (e) => {
+      a.value.table.show || (e && a.value.table.useDialog && ve.value ? ve.value.open() : "close" in ve.value && ve.value.close());
+    });
+    function Ia() {
+      c.value.showTable = !1, De.value && De.value.setTableIconState(!1);
+    }
+    return Na({
+      getData: wl,
+      getImage: Sl,
+      generateCsv: Ue,
+      generatePdf: ia,
+      generateImage: va,
+      toggleTable: Sa,
+      toggleLabels: za,
+      toggleStack: Ma,
+      toggleTooltip: $a,
+      toggleAnnotator: We,
+      toggleFullscreen: ca
+    }), (e, l) => (F(), Ae("div", {
+      style: xe(`width:100%; position:relative; ${a.value.responsive ? "height: 100%" : ""}; background:${a.value.style.chart.backgroundColor};`),
+      ref_key: "xy",
+      ref: H,
+      id: `xy_canvas_${Q.value}`,
+      class: Il(`vue-data-ui-component vue-ui-xy-canvas ${ie.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      onMouseenter: qa,
+      onMouseleave: Za
+    }, [
+      a.value.style.chart.title.text ? (F(), Ae("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: Ke,
+        style: xe(`width:100%;background:${a.value.style.chart.backgroundColor};`)
+      }, [
+        (F(), Y(nt, {
+          key: `title_${Re.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)) : W("", !0),
+      J("div", {
+        id: `legend-top-${Q.value}`
+      }, null, 8, ft),
+      a.value.userOptions.show && X.value && (L(ua) || L(He)) ? (F(), Y(L(Xa), {
+        ref_key: "userOptionsRef",
+        ref: De,
+        key: `user_option_${Qe.value}`,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        color: a.value.style.chart.color,
+        isPrinting: L(ra),
+        isImaging: L(na),
+        uid: Q.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: je.dataset.length > 1 && a.value.userOptions.buttons.stack,
+        hasFullscreen: a.value.userOptions.buttons.fullscreen,
+        hasTable: u.value.end - u.value.start <= 730 && a.value.userOptions.buttons.table,
+        isFullscreen: ie.value,
+        isTooltip: c.value.showTooltip,
+        isStacked: c.value.stacked,
+        titles: { ...a.value.userOptions.buttonTitles },
+        chartElement: H.value,
+        position: a.value.userOptions.position,
+        hasAnnotator: a.value.userOptions.buttons.annotator,
+        isAnnotation: Te.value,
+        callbacks: a.value.userOptions.callbacks,
+        printScale: a.value.userOptions.print.scale,
+        tableDialog: a.value.table.useDialog,
+        onToggleFullscreen: ca,
+        onGeneratePdf: L(ia),
+        onGenerateCsv: Ue,
+        onGenerateImage: L(va),
+        onToggleTable: Sa,
+        onToggleLabels: za,
+        onToggleStack: Ma,
+        onToggleTooltip: $a,
+        onToggleAnnotator: We,
+        style: xe({
+          visibility: L(ua) ? L(He) ? "visible" : "hidden" : "visible"
+        })
+      }, Fa({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: b(({ isOpen: t, color: r }) => [
+            M(e.$slots, "menuIcon", K(ee({ isOpen: t, color: r })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: b(() => [
+            M(e.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: b(() => [
+            M(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: b(() => [
+            M(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: b(() => [
+            M(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: b(() => [
+            M(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: b(() => [
+            M(e.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionStack ? {
+          name: "optionStack",
+          fn: b(() => [
+            M(e.$slots, "optionStack", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: b(({ toggleFullscreen: t, isFullscreen: r }) => [
+            M(e.$slots, "optionFullscreen", K(ee({ toggleFullscreen: t, isFullscreen: r })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: b(({ toggleAnnotator: t, isAnnotator: r }) => [
+            M(e.$slots, "optionAnnotator", K(ee({ toggleAnnotator: t, isAnnotator: r })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : W("", !0),
+      J("div", {
+        class: "vue-ui-xy-canvas",
+        style: xe(`position: relative; aspect-ratio: ${sa.value}`),
+        ref_key: "container",
+        ref: le
+      }, [
+        J("canvas", {
+          ref_key: "canvas",
+          ref: S,
+          style: { width: "100%", height: "100%" },
+          onMousemove: l[0] || (l[0] = (t) => xl(t)),
+          onMouseleave: kl
+        }, null, 544),
+        L(Ne) ? (F(), Y(Ql, { key: 0 })) : W("", !0),
+        Ra(L(Ha), {
+          show: c.value.showTooltip && ne.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: L(S),
+          content: Ce.value,
+          isFullscreen: ie.value,
+          backgroundOpacity: a.value.style.chart.tooltip.backgroundOpacity,
+          isCustom: L(Da)(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
+        }, {
+          "tooltip-before": b(() => [
+            M(e.$slots, "tooltip-before", K(ee({ ...Je.value })), void 0, !0)
+          ]),
+          "tooltip-after": b(() => [
+            M(e.$slots, "tooltip-after", K(ee({ ...Je.value })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"])
+      ], 4),
+      a.value.style.chart.zoom.show && R.value > 6 && X.value && ta.value && !L(Ne) ? (F(), Y(ct, {
+        key: 2,
+        ref_key: "chartSlicer",
+        ref: q,
+        allMinimaps: el.value,
+        background: a.value.style.chart.zoom.color,
+        borderColor: a.value.style.chart.backgroundColor,
+        customFormat: a.value.style.chart.zoom.customFormat,
+        cutNullValues: ze.value,
+        enableRangeHandles: a.value.style.chart.zoom.enableRangeHandles,
+        enableSelectionDrag: a.value.style.chart.zoom.enableSelectionDrag,
+        end: u.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: ll.value,
+        labelLeft: a.value.style.chart.grid.x.timeLabels.values[u.value.start] ? N.value[u.value.start].text : "",
+        labelRight: a.value.style.chart.grid.x.timeLabels.values[u.value.end - 1] ? N.value[u.value.end - 1].text : "",
+        max: R.value,
+        min: 0,
+        minimap: Ka.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: pa.value.length ? pa.value : N.value,
+        refreshEndPoint: a.value.style.chart.zoom.endIndex !== null ? a.value.style.chart.zoom.endIndex + 1 : R.value,
+        refreshStartPoint: a.value.style.chart.zoom.startIndex !== null ? a.value.style.chart.zoom.startIndex : 0,
+        selectColor: a.value.style.chart.zoom.highlightColor,
+        selectedSeries: P.value,
+        smoothMinimap: a.value.style.chart.zoom.minimap.smooth,
+        start: u.value.start,
+        timeLabels: N.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: u.value.end,
+        valueStart: u.value.start,
+        verticalHandles: a.value.style.chart.zoom.minimap.verticalHandles,
+        onFutureEnd: l[1] || (l[1] = (t) => fa("end", t)),
+        onFutureStart: l[2] || (l[2] = (t) => fa("start", t)),
+        onReset: he,
+        onTrapMouse: ja,
+        "onUpdate:end": ol,
+        "onUpdate:start": tl
+      }, {
+        "reset-action": b(({ reset: t }) => [
+          M(e.$slots, "reset-action", K(ee({ reset: t })), 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"])) : W("", !0),
+      J("div", {
+        id: `legend-bottom-${Q.value}`
+      }, null, 8, yt),
+      la.value ? (F(), Y(Tl, {
+        key: 3,
+        to: a.value.style.chart.legend.position === "top" ? `#legend-top-${Q.value}` : `#legend-bottom-${Q.value}`
+      }, [
+        J("div", {
+          ref_key: "chartLegend",
+          ref: ea
+        }, [
+          a.value.style.chart.legend.show && X.value ? (F(), Y(rt, {
+            legendSet: Ca.value,
+            config: Cl.value,
+            key: `legend_${Pe.value}`,
+            onClickMarker: l[3] || (l[3] = ({ i: t }) => ka(t))
+          }, {
+            item: b(({ legend: t, index: r }) => [
+              J("div", {
+                onClick: (s) => t.segregate(),
+                style: xe(`opacity:${A.value.includes(r) ? 0.5 : 1}`)
+              }, Ve(t.name), 13, mt)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : M(e.$slots, "legend", {
+            key: 1,
+            legend: Ca.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : W("", !0),
+      e.$slots.watermark ? (F(), Ae("div", gt, [
+        M(e.$slots, "watermark", K(ee({ isPrinting: L(ra) || L(na) })), void 0, !0)
+      ])) : W("", !0),
+      e.$slots.source ? (F(), Ae("div", {
+        key: 5,
+        ref_key: "source",
+        ref: aa,
+        dir: "auto"
+      }, [
+        M(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : W("", !0),
+      X.value && a.value.userOptions.buttons.table ? (F(), Y(Al(ye.value.component), Fl({ key: 6 }, ye.value.props, {
+        ref_key: "tableUnit",
+        ref: ve,
+        onClose: Ia
+      }), Fa({
+        content: b(() => [
+          (F(), Y(L(Ba), {
+            key: `table_${Oe.value}`,
+            colNames: Ie.value.colNames,
+            head: Ie.value.head,
+            body: Ie.value.body,
+            config: Ie.value.config,
+            title: a.value.table.useDialog ? "" : ye.value.title,
+            withCloseButton: !a.value.table.useDialog,
+            onClose: Ia
+          }, {
+            th: b(({ th: t }) => [
+              J("div", { innerHTML: t }, null, 8, pt)
+            ]),
+            td: b(({ td: t }) => [
+              Oa(Ve(t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        a.value.table.useDialog ? {
+          name: "title",
+          fn: b(() => [
+            Oa(Ve(ye.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        a.value.table.useDialog ? {
+          name: "actions",
+          fn: b(() => [
+            J("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[4] || (l[4] = (t) => Ue(a.value.userOptions.callbacks.csv))
+            }, [
+              Ra(it, {
+                name: "excel",
+                stroke: ye.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : W("", !0),
+      a.value.userOptions.buttons.annotator && y.value.length ? (F(), Y(L(Ua), {
+        key: 7,
+        parent: H.value,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        color: a.value.style.chart.color,
+        active: Te.value,
+        onClose: We
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : W("", !0)
+    ], 46, ht));
+  }
+}, Et = /* @__PURE__ */ dt(bt, [["__scopeId", "data-v-8c17f74b"]]);
+export {
+  Et as default
+};