vue-data-ui 3.0.23 → 3.1.0

package/dist/vue-ui-xy-canvas-D4wd-Asd.js

@@ -0,0 +1,1291 @@
+import { defineAsyncComponent as ee, ref as c, computed as L, useSlots as Kl, onMounted as vl, watch as P, nextTick as cl, shallowRef as Ie, onBeforeUnmount as Ql, createElementBlock as de, openBlock as S, unref as p, normalizeClass as ea, normalizeStyle as le, createCommentVNode as H, createElementVNode as Y, createBlock as D, createSlots as dl, withCtx as b, renderSlot as k, normalizeProps as V, guardReactiveProps as G, createVNode as hl, Teleport as la, toDisplayString as Me, resolveDynamicComponent as aa, mergeProps as ta, createTextVNode as yl } from "vue";
+import { u as oa, c as ua, a as ra, p as Z, b as sa, C as xe, d as na, D as Oe, k as ae, i as te, e as fl, a4 as ia, G as va, ae as ca, o as da, f as ha, y as gl, v as ya, w as fa, z as ga, s as he, l as pa } from "./index-CDQbCd41.js";
+import { d as ba, t as ma, u as xa, c as La, a as pl, l as C, r as Re, b as F, p as bl } from "./useResponsive-DfdjqQps.js";
+import { u as ml } from "./useNestedProp-BPEHGiYX.js";
+import { u as ka } from "./usePrinter-Bnl1YeUU.js";
+import { u as Ca } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as wa } from "./useChartAccessibility-9icAAmYg.js";
+import Sa from "./Legend-2-dC7DVb.js";
+import za from "./Title-Dq2_Z9kR.js";
+import { S as $a } from "./Slicer-D99HytqX.js";
+import Ta from "./vue-ui-accordion-Bf_LHFFX.js";
+import { u as Ia } from "./useTimeLabels-BGFjWgrv.js";
+import Ma from "./img-JOqdlnUs.js";
+import Oa from "./BaseIcon-DHtro8us.js";
+import { _ as Ra } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
+  key: 3,
+  class: "vue-data-ui-watermark"
+}, Na = ["innerHTML"], Ha = {
+  __name: "vue-ui-xy-canvas",
+  props: {
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(Pe, { expose: xl, emit: Ll }) {
+    const kl = ee(() => import("./DataTable-DJjA2_wf.js")), Cl = ee(() => import("./NonSvgPenAndPaper-DHeE4Yuv.js")), wl = ee(() => import("./vue-ui-skeleton-CFxBU2-p.js")), Sl = ee(() => import("./Tooltip-Y219DXZO.js")), zl = ee(() => import("./UserOptions-BuGfCdAY.js")), $l = ee(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_xy_canvas: Tl } = oa(), g = Pe, B = c(ua()), I = c(null), oe = c(null), n = c(null), y = c(1), E = c(1), ye = c(!1), d = c(null), fe = c(""), De = c(null), $ = c([]), j = c(1), U = c(!0), q = c(!0), Le = c(null), Fe = c(0), Ee = c(0), ue = c(!1), Ae = c(null), Ne = c(null), He = c(null), Ye = c(null), ke = c(0), Ce = c(0), we = c(0), M = c(null), Be = c(!1), re = c(null), ge = L(() => !!g.dataset && g.dataset.length), Il = Ll, Ml = Kl();
+    vl(() => {
+      Ml["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
+    });
+    const l = L({
+      get: () => Xe(),
+      set: (e) => e
+    }), { userOptionsVisible: Se, setUserOptionsVisibility: Ue, keepUserOptionState: We } = Ca({ config: l.value }), { svgRef: O } = wa({ config: l.value.style.chart.title });
+    function Xe() {
+      const e = ml({
+        userConfig: g.config,
+        defaultConfig: Tl
+      });
+      let a = {};
+      return e.theme ? a = {
+        ...ml({
+          userConfig: sa.vue_ui_xy_canvas[e.theme] || g.config,
+          defaultConfig: e
+        }),
+        customPalette: ra[e.theme] || Z
+      } : a = e, g.config && xe(g.config, "style.chart.scale.min") ? a.style.chart.scale.min = g.config.style.chart.scale.min : a.style.chart.scale.min = null, g.config && xe(g.config, "style.chart.scale.max") ? a.style.chart.scale.max = g.config.style.chart.scale.max : a.style.chart.scale.max = null, g.config && xe(g.config, "style.chart.zoom.startIndex") ? a.style.chart.zoom.startIndex = g.config.style.chart.zoom.startIndex : a.style.chart.zoom.startIndex = null, g.config && xe(g.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = g.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, a;
+    }
+    P(() => g.config, (e) => {
+      l.value = Xe(), Se.value = !l.value.userOptions.showOnChartHover, ze(), ke.value += 1, Ce.value += 1, we.value += 1, r.value.showTable = l.value.table.show, r.value.showDataLabels = l.value.style.chart.dataLabels.show, r.value.stacked = l.value.style.chart.stacked, r.value.showTooltip = l.value.style.chart.tooltip.show;
+    }, { deep: !0 }), P(() => g.dataset, () => {
+      ze(), ke.value += 1, Ce.value += 1, we.value += 1;
+    }, { deep: !0 });
+    const _e = c(l.value.style.chart.aspectRatio), { isPrinting: Ve, isImaging: Ge, generatePdf: Ze, generateImage: je } = ka({
+      elementId: `xy_canvas_${B.value}`,
+      fileName: l.value.style.chart.title.text || "vue-ui-xy-canvas",
+      options: l.value.userOptions.print
+    }), r = c({
+      showTable: l.value.table.show,
+      showDataLabels: l.value.style.chart.dataLabels.show,
+      stacked: l.value.style.chart.stacked,
+      showTooltip: l.value.style.chart.tooltip.show
+    });
+    function qe(e) {
+      ue.value = e, Ee.value += 1;
+    }
+    const Je = L(() => na(l.value.customPalette)), T = L(() => J.value ? Math.max(...J.value.filter((e, a) => !$.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), t = L(() => {
+      const e = y.value - y.value * (l.value.style.chart.paddingProportions.left + l.value.style.chart.paddingProportions.right);
+      return {
+        canvasWidth: y.value,
+        canvasHeight: E.value,
+        left: y.value * l.value.style.chart.paddingProportions.left,
+        top: E.value * l.value.style.chart.paddingProportions.top,
+        right: y.value - y.value * l.value.style.chart.paddingProportions.right,
+        bottom: E.value - E.value * l.value.style.chart.paddingProportions.bottom,
+        width: e,
+        height: E.value - E.value * (l.value.style.chart.paddingProportions.top + l.value.style.chart.paddingProportions.bottom),
+        slot: e / (u.value.end - u.value.start)
+      };
+    });
+    function Ke(e, a) {
+      return e / a;
+    }
+    function Ol({ hasAutoScale: e, series: a, min: o, max: s, scale: i, yOffset: x, individualHeight: v, stackIndex: f = null }) {
+      return a.map((X, z) => {
+        const N = i.min < 0 ? Math.abs(i.min) : 0, _ = Ke(X + N, N + i.max);
+        let ve, ce;
+        e && (ve = i.min, ce = Ke(X - ve, i.max - ve));
+        let R = 0;
+        return f === null ? R = t.value.bottom - t.value.height * (e ? ce : _) : R = t.value.bottom - x - v * (e ? ce : _), {
+          x: t.value.left + t.value.slot * z + t.value.slot / 2,
+          y: R,
+          value: X
+        };
+      });
+    }
+    const m = L(() => {
+      const e = l.value.style.chart.scale.min !== null ? l.value.style.chart.scale.min : Math.min(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), a = l.value.style.chart.scale.max !== null ? l.value.style.chart.scale.max : Math.max(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), o = Oe(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, l.value.style.chart.scale.ticks), s = o.min < 0 ? Math.abs(o.min) : 0, i = t.value.bottom - t.value.height * (s / (o.max + s)), x = o.ticks.map((v) => ({
+        y: t.value.bottom - t.value.height * ((v + s) / (o.max + s)),
+        x: t.value.left - 8,
+        value: v
+      }));
+      return {
+        absoluteMin: s,
+        max: a,
+        min: e,
+        scale: o,
+        yLabels: x,
+        zero: i
+      };
+    }), Rl = L(() => h.value.map((e) => `
+            <div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
+                <svg viewBox="0 0 10 10" height="12" width="12">
+                    <circle cx="5" cy="5" r="5" fill="${e.color}"/>
+                </svg>
+                <span>${e.name ? e.name + ": " : ""}</span>
+                <span>${ae(
+      l.value.style.chart.dataLabels.formatter,
+      e.series[d.value],
+      te({
+        p: e.prefix || "",
+        v: e.series[d.value],
+        s: e.suffix || "",
+        r: e.rounding || 0
+      }),
+      { datapoint: e, seriesIndex: d.value }
+    )}</span>
+            </div>
+        `)), J = L(() => g.dataset.map((e, a) => ({
+      ...e,
+      series: ia({
+        data: va(e.series),
+        threshold: l.value.downsample.threshold
+      }),
+      absoluteIndex: a,
+      color: fl(e.color || Je.value[a] || Z[a] || Z[a % Z.length])
+    })));
+    P(T, (e) => {
+      e && Qe();
+    });
+    const h = L(() => ca(J.value.filter((e, a) => !$.value.includes(e.absoluteIndex))).map((e, a) => ({
+      ...e,
+      series: e.series.slice(u.value.start, u.value.end)
+    })).map((e, a) => {
+      let o = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, s = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
+      o === s && (o = o >= 0 ? s - 1 : o, s = s >= 0 ? s : o + 1), e.series.filter((R) => ![null, void 0].includes(R)).map((R) => (R - o) / (s - o));
+      const i = {
+        valueMin: o,
+        valueMax: s
+      }, x = e.scaleSteps || l.value.style.chart.scale.ticks;
+      let v;
+      e.autoScaling ? v = Oe(i.valueMin, i.valueMax, x) : v = Oe(i.valueMin < 0 ? i.valueMin : 0, i.valueMax <= 0 ? 0 : i.valueMax, x);
+      const f = r.value.stacked ? t.value.height * (1 - e.cumulatedStackRatio) : 0, X = r.value.stacked ? t.value.height / l.value.style.chart.stackGap : 0, z = r.value.stacked ? t.value.height * e.stackRatio - X : t.value.height, N = v.min < 0 ? Math.abs(v.min) : 0;
+      let _;
+      e.autoScaling && r.value.stacked && s <= 0 ? _ = t.value.bottom - f - z : _ = t.value.bottom - f - z * (N / (v.max + N));
+      const ve = v.ticks.map((R, Jl) => ({
+        y: t.value.bottom - f - z * (Jl / (v.ticks.length - 1)),
+        x: t.value.left - 8,
+        value: R
+      })), ce = Ol({
+        hasAutoScale: r.value.stacked && e.autoScaling,
+        series: e.series,
+        min: r.value.stacked ? o : m.value.min,
+        max: r.value.stacked ? s : m.value.max,
+        scale: r.value.stacked ? v : m.value.scale,
+        yOffset: f,
+        individualHeight: z,
+        stackIndex: r.value.stacked ? a : null
+      });
+      return {
+        ...e,
+        coordinatesLine: ce,
+        min: o,
+        max: s,
+        localScale: v,
+        localZero: _,
+        localMin: N,
+        localYLabels: ve,
+        yOffset: f,
+        individualHeight: z
+      };
+    })), u = c({
+      start: 0,
+      end: T.value
+    });
+    function Qe() {
+      ll();
+    }
+    const el = c(null);
+    async function ll() {
+      await cl(), await cl();
+      const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, o = el.value, s = T.value;
+      u.value = { start: 0, end: s }, (e != null || a != null) && o ? (e != null ? o.setStartValue(e) : (u.value.start = 0, o.setStartValue(0)), a != null ? o.setEndValue(Pl(a + 1)) : (u.value.end = s, o.setEndValue(s))) : (u.value = { start: 0, end: s }, Fe.value += 1);
+    }
+    function Pl(e) {
+      const a = T.value;
+      return e > a ? a : e < 0 || l.value.style.chart.zoom.startIndex !== null && e < l.value.style.chart.zoom.startIndex ? l.value.style.chart.zoom.startIndex !== null ? l.value.style.chart.zoom.startIndex + 1 : 1 : e;
+    }
+    const Dl = L(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), w = L(() => h.value.filter((e) => e.type === "bar"));
+    function Fl() {
+      if (!O.value)
+        return;
+      const e = oe.value.offsetWidth, a = oe.value.offsetHeight;
+      O.value.width = e * j.value * 2, O.value.height = a * j.value * 2, y.value = e * j.value * 2, E.value = a * j.value * 2, n.value.scale(j.value, j.value), se();
+    }
+    function El() {
+      if (n.value.clearRect(0, 0, 1e4, 1e4), n.value.fillStyle = l.value.style.chart.backgroundColor, n.value.fillRect(0, 0, t.value.canvasWidth, t.value.canvasHeight), r.value.stacked)
+        l.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < l.value.style.chart.grid.y.verticalLines.hideUnderXLength ? h.value.forEach((e) => {
+          for (let a = 0; a < u.value.end - u.value.start + 1; a += 1)
+            C(
+              n.value,
+              [
+                {
+                  x: t.value.left + t.value.slot * a,
+                  y: t.value.bottom - e.yOffset - e.individualHeight
+                },
+                {
+                  x: t.value.left + t.value.slot * a,
+                  y: t.value.bottom - e.yOffset
+                }
+              ],
+              {
+                color: l.value.style.chart.grid.y.verticalLines.color
+              }
+            );
+        }) : l.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start >= l.value.style.chart.grid.y.verticalLines.hideUnderXLength && h.value.forEach((e) => {
+          for (let a = u.value.start; a < u.value.end; a += 1)
+            a % Math.floor((u.value.end - u.value.start) / l.value.style.chart.grid.y.timeLabels.modulo) === 0 && C(
+              n.value,
+              [
+                {
+                  x: t.value.left + t.value.slot * (a - u.value.start) + t.value.slot / 2,
+                  y: t.value.bottom - e.yOffset - e.individualHeight
+                },
+                {
+                  x: t.value.left + t.value.slot * (a - u.value.start) + t.value.slot / 2,
+                  y: t.value.bottom - e.yOffset
+                }
+              ],
+              {
+                color: l.value.style.chart.grid.y.verticalLines.color
+              }
+            );
+        }), l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? h.value.forEach((e) => {
+          e.localYLabels.forEach((a, o) => {
+            o < e.localYLabels.length - 1 && Re(
+              n.value,
+              [
+                { x: t.value.left, y: a.y },
+                { x: t.value.right, y: a.y },
+                { x: t.value.right, y: e.localYLabels[o + 1].y },
+                { x: t.value.left, y: e.localYLabels[o + 1].y }
+              ],
+              {
+                fillColor: o % 2 === 0 ? "transparent" : he(l.value.style.chart.grid.x.horizontalLines.color, l.value.style.chart.grid.x.horizontalLines.opacity),
+                strokeColor: "transparent"
+              }
+            );
+          });
+        }) : h.value.forEach((e) => {
+          e.localYLabels.slice(u.value.start, u.value.end).forEach((a) => {
+            C(
+              n.value,
+              [
+                { x: t.value.left, y: a.y },
+                { x: t.value.right, y: a.y }
+              ],
+              {
+                color: l.value.style.chart.grid.x.horizontalLines.color
+              }
+            );
+          });
+        })), l.value.style.chart.grid.zeroLine.show && h.value.forEach((e) => {
+          C(
+            n.value,
+            [
+              { x: t.value.left, y: e.localZero },
+              { x: t.value.right, y: e.localZero }
+            ],
+            {
+              color: l.value.style.chart.grid.zeroLine.color,
+              lineDash: l.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+            }
+          );
+        }), l.value.style.chart.grid.y.axisLabels.show && h.value.forEach((e) => {
+          C(
+            n.value,
+            [
+              { x: t.value.left, y: t.value.bottom - e.yOffset },
+              { x: t.value.left, y: t.value.bottom - e.yOffset - e.individualHeight }
+            ],
+            {
+              color: e.color
+            }
+          ), C(
+            n.value,
+            [
+              { x: t.value.right, y: t.value.bottom - e.yOffset },
+              { x: t.value.right, y: t.value.bottom - e.yOffset - e.individualHeight }
+            ],
+            {
+              color: e.color
+            }
+          );
+        }), h.value.forEach((e) => {
+          F(
+            n.value,
+            e.name,
+            y.value / 35,
+            t.value.bottom - e.yOffset - e.individualHeight / 2,
+            {
+              align: "center",
+              rotation: -90,
+              color: e.color,
+              font: `${Math.round(y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`
+            }
+          );
+        });
+      else {
+        if (l.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < l.value.style.chart.grid.y.verticalLines.hideUnderXLength)
+          for (let e = 0; e < u.value.end - u.value.start + 1; e += 1)
+            C(
+              n.value,
+              [
+                { x: t.value.left + t.value.slot * e, y: t.value.top },
+                { x: t.value.left + t.value.slot * e, y: t.value.bottom }
+              ],
+              {
+                color: l.value.style.chart.grid.y.verticalLines.color
+              }
+            );
+        else if (l.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start >= l.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) / l.value.style.chart.grid.y.timeLabels.modulo) === 0 && C(
+              n.value,
+              [
+                { x: t.value.left + t.value.slot * (e - u.value.start) + t.value.slot / 2, y: t.value.top },
+                { x: t.value.left + t.value.slot * (e - u.value.start) + t.value.slot / 2, y: t.value.bottom }
+              ],
+              {
+                color: l.value.style.chart.grid.y.verticalLines.color
+              }
+            );
+        l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? m.value.yLabels.forEach((e, a) => {
+          a < m.value.yLabels.length - 1 && Re(
+            n.value,
+            [
+              { x: t.value.left, y: e.y },
+              { x: t.value.right, y: e.y },
+              { x: t.value.right, y: m.value.yLabels[a + 1].y },
+              { x: t.value.left, y: m.value.yLabels[a + 1].y }
+            ],
+            {
+              fillColor: a % 2 === 0 ? "transparent" : he(l.value.style.chart.grid.x.horizontalLines.color, l.value.style.chart.grid.x.horizontalLines.opacity),
+              strokeColor: "transparent"
+            }
+          );
+        }) : m.value.yLabels.forEach((e) => {
+          C(
+            n.value,
+            [
+              { x: t.value.left, y: e.y },
+              { x: t.value.right, y: e.y }
+            ],
+            {
+              color: l.value.style.chart.grid.x.horizontalLines.color
+            }
+          );
+        })), l.value.style.chart.grid.y.showAxis && C(
+          n.value,
+          [
+            { x: t.value.left, y: t.value.top },
+            { x: t.value.left, y: t.value.bottom }
+          ],
+          {
+            color: l.value.style.chart.grid.y.axisColor,
+            lineWidth: l.value.style.chart.grid.y.axisThickness
+          }
+        ), l.value.style.chart.grid.x.showAxis && C(
+          n.value,
+          [
+            { x: t.value.left, y: t.value.bottom },
+            { x: t.value.right, y: t.value.bottom }
+          ],
+          {
+            color: l.value.style.chart.grid.x.axisColor,
+            lineWidth: l.value.style.chart.grid.x.axisThickness
+          }
+        ), l.value.style.chart.grid.zeroLine.show && C(
+          n.value,
+          [
+            { x: t.value.left, y: m.value.zero },
+            { x: t.value.right, y: m.value.zero }
+          ],
+          {
+            color: l.value.style.chart.grid.zeroLine.color,
+            lineDash: l.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+          }
+        );
+      }
+      l.value.style.chart.grid.y.axisName && F(
+        n.value,
+        l.value.style.chart.grid.y.axisName,
+        y.value - y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2,
+        t.value.bottom - t.value.height / 2,
+        {
+          font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+          color: l.value.style.chart.color,
+          align: "center",
+          rotation: 90
+        }
+      ), l.value.style.chart.grid.x.axisName && F(
+        n.value,
+        l.value.style.chart.grid.x.axisName,
+        y.value / 2,
+        E.value,
+        {
+          font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+          color: l.value.style.chart.color,
+          align: "center"
+        }
+      );
+    }
+    function Al(e) {
+      for (let a = 0; a < e.coordinatesLine.length; a += 1) {
+        const o = (d.value === a ? y.value / 150 : l.value.style.chart.line.plots.show ? y.value / 200 : 0) * l.value.style.chart.line.plots.radiusRatio;
+        pl(
+          n.value,
+          { x: e.coordinatesLine[a].x, y: e.coordinatesLine[a].y },
+          o,
+          {
+            color: l.value.style.chart.backgroundColor,
+            fillStyle: e.color
+          }
+        );
+      }
+    }
+    function Nl() {
+      h.value.forEach((e) => {
+        e.showYMarker && ne(e) && F(
+          n.value,
+          ae(
+            l.value.style.chart.dataLabels.formatter,
+            ne(e).value,
+            te({
+              p: e.prefix || l.value.style.chart.grid.y.axisLabels.prefix || "",
+              v: ne(e).value,
+              s: e.suffix || l.value.style.chart.grid.y.axisLabels.suffix || "",
+              r: e.rounding || l.value.style.chart.grid.y.axisLabels.rounding || 0
+            }),
+            { datapoint: ne(e), seriesIndex: null }
+          ),
+          t.value.left - 8 + l.value.style.chart.grid.y.axisLabels.offsetX,
+          ne(e).y,
+          {
+            align: "right",
+            font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+            color: e.color
+          }
+        );
+      });
+    }
+    function Hl() {
+      l.value.style.chart.grid.y.axisLabels.show && (r.value.stacked ? h.value.forEach((e) => {
+        e.localYLabels.forEach((a, o) => {
+          F(
+            n.value,
+            ae(
+              l.value.style.chart.dataLabels.formatter,
+              a.value,
+              te({
+                p: e.prefix || l.value.style.chart.grid.y.axisLabels.prefix || "",
+                v: a.value,
+                s: e.suffix || l.value.style.chart.grid.y.axisLabels.suffix || "",
+                r: e.rounding || l.value.style.chart.grid.y.axisLabels.rounding || 0
+              }),
+              { datapoint: a, seriesIndex: o }
+            ),
+            a.x + l.value.style.chart.grid.y.axisLabels.offsetX,
+            a.y,
+            {
+              align: "right",
+              font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+              color: e.color,
+              globalAlpha: e.showYMarker && ![null, void 0].includes(d.value) ? 0.2 : 1
+            }
+          );
+        });
+      }) : m.value.yLabels.forEach((e, a) => {
+        F(
+          n.value,
+          ae(
+            l.value.style.chart.dataLabels.formatter,
+            e.value,
+            te({
+              p: l.value.style.chart.grid.y.axisLabels.prefix || "",
+              v: e.value,
+              s: l.value.style.chart.grid.y.axisLabels.suffix || "",
+              r: l.value.style.chart.grid.y.axisLabels.rounding || 0
+            }),
+            { datapoint: e, seriesIndex: a }
+          ),
+          e.x + l.value.style.chart.grid.y.axisLabels.offsetX,
+          e.y,
+          {
+            align: "right",
+            font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+            color: l.value.style.chart.grid.y.axisLabels.color,
+            globalAlpha: h.value.some((o) => o.showYMarker) && ![null, void 0].includes(d.value) ? 0.2 : 1
+          }
+        );
+      }));
+    }
+    function Yl(e) {
+      for (let a = 0; a < e.coordinatesLine.length; a += 1)
+        F(
+          n.value,
+          ae(
+            l.value.style.chart.dataLabels.formatter,
+            e.coordinatesLine[a].value,
+            te({
+              p: e.prefix || "",
+              v: e.coordinatesLine[a].value,
+              s: e.suffix || "",
+              r: e.rounding || 0
+            }),
+            { datapoint: e.coordinatesLine[a], seriesIndex: a }
+          ),
+          e.coordinatesLine[a].x,
+          e.coordinatesLine[a].y + l.value.style.chart.dataLabels.offsetY,
+          {
+            align: "center",
+            font: `${l.value.style.chart.dataLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.dataLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+            color: l.value.style.chart.dataLabels.useSerieColor ? e.color : l.value.style.chart.dataLabels.color
+          }
+        );
+    }
+    const W = L(() => Ia({
+      values: l.value.style.chart.grid.y.timeLabels.values,
+      maxDatapoints: T.value,
+      formatter: l.value.style.chart.grid.y.timeLabels.datetimeFormatter,
+      start: 0,
+      end: l.value.style.chart.grid.y.timeLabels.values.length
+    }));
+    function Bl() {
+      for (let e = u.value.start; e < u.value.end; e += 1)
+        (u.value.end - u.value.start < l.value.style.chart.grid.y.timeLabels.modulo || u.value.end - u.value.start >= l.value.style.chart.grid.y.timeLabels.modulo && (e % Math.floor((u.value.end - u.value.start) / l.value.style.chart.grid.y.timeLabels.modulo) === 0 || e === d.value + u.value.start && l.value.style.chart.grid.y.timeLabels.showMarker)) && F(
+          n.value,
+          W.value[e] ? W.value[e].text : e + 1,
+          t.value.left + t.value.slot * (e - u.value.start) + t.value.slot / 2,
+          t.value.bottom + y.value / l.value.style.chart.grid.y.timeLabels.offsetY,
+          {
+            align: l.value.style.chart.grid.y.timeLabels.rotation === 0 ? "center" : l.value.style.chart.grid.y.timeLabels.rotation > 0 ? "left" : "right",
+            font: `${l.value.style.chart.grid.y.timeLabels.bold ? "bold " : ""}${Math.round(y.value / 40 * l.value.style.chart.grid.y.timeLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+            color: l.value.style.chart.grid.y.timeLabels.showMarker ? he(l.value.style.chart.grid.y.timeLabels.color, d.value !== null ? d.value + u.value.start === e ? 100 : 20 : 100) : l.value.style.chart.grid.y.timeLabels.color,
+            rotation: l.value.style.chart.grid.y.timeLabels.rotation
+          }
+        );
+    }
+    function al() {
+      C(
+        n.value,
+        [
+          { x: t.value.left + t.value.slot * d.value + t.value.slot / 2, y: t.value.top },
+          { x: t.value.left + t.value.slot * d.value + t.value.slot / 2, y: t.value.bottom }
+        ],
+        {
+          color: l.value.style.chart.selector.color,
+          lineDash: l.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+          lineWidth: 2
+        }
+      );
+    }
+    function Ul() {
+      M.value && C(
+        n.value,
+        [
+          { x: t.value.left, y: M.value },
+          { x: t.value.right, y: M.value }
+        ],
+        {
+          color: l.value.style.chart.selector.color,
+          lineDash: l.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+          lineWidth: 2
+        }
+      );
+    }
+    function Wl() {
+      w.value.forEach((e, a) => {
+        for (let o = 0; o < e.coordinatesLine.length; o += 1)
+          Re(
+            n.value,
+            [
+              {
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)),
+                y: r.value.stacked ? e.localZero : m.value.zero
+              },
+              {
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.8 / (r.value.stacked ? 1 : w.value.length),
+                y: r.value.stacked ? e.localZero : m.value.zero
+              },
+              {
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.8 / (r.value.stacked ? 1 : w.value.length),
+                y: e.coordinatesLine[o].y
+              },
+              {
+                x: t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)),
+                y: e.coordinatesLine[o].y
+              }
+            ],
+            {
+              strokeColor: l.value.style.chart.backgroundColor,
+              gradient: {
+                type: "linear",
+                start: {
+                  x: e.coordinatesLine[o].x,
+                  y: e.coordinatesLine[o].y
+                },
+                end: {
+                  x: e.coordinatesLine[o].x,
+                  y: r.value.stacked ? e.localZero : m.value.zero
+                },
+                stops: [
+                  { offset: 0, color: e.color },
+                  { offset: 1, color: l.value.style.chart.bar.gradient.show ? pa(e.color, 0.5) : e.color }
+                ]
+              }
+            }
+          ), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && F(
+            n.value,
+            ae(
+              l.value.style.chart.dataLabels.formatter,
+              e.coordinatesLine[o].value,
+              te({
+                p: e.prefix || "",
+                v: e.coordinatesLine[o].value,
+                s: e.suffix || "",
+                r: e.rounding || 0
+              }),
+              { datapoint: e.coordinatesLine[o], seriesIndex: o }
+            ),
+            t.value.left + t.value.slot * o + t.value.slot / 10 + (r.value.stacked ? 0 : t.value.slot / w.value.length * a - (a === 0 ? 0 : t.value.slot / (5 * w.value.length) * a)) + t.value.slot * 0.4 / (r.value.stacked ? 1 : w.value.length),
+            (e.coordinatesLine[o].value < 0 ? r.value.stacked ? e.localZero : m.value.zero : e.coordinatesLine[o].y) + l.value.style.chart.dataLabels.offsetY,
+            {
+              align: "center",
+              font: `${Math.round(y.value / 40 * l.value.style.chart.dataLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
+              color: l.value.style.chart.dataLabels.useSerieColor ? e.color : l.value.style.chart.dataLabels.color,
+              strokeColor: l.value.style.chart.backgroundColor,
+              lineWidth: 0.8
+            }
+          );
+      });
+    }
+    function Xl(e) {
+      e.useArea ? r.value.stacked ? bl(
+        n.value,
+        [{ x: e.coordinatesLine[0].x, y: e.localZero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: e.localZero }],
+        {
+          fillColor: he(e.color, l.value.style.chart.area.opacity),
+          strokeColor: "transparent"
+        }
+      ) : bl(
+        n.value,
+        [{ x: e.coordinatesLine[0].x, y: m.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: m.value.zero }],
+        {
+          fillColor: he(e.color, l.value.style.chart.area.opacity),
+          strokeColor: "transparent"
+        }
+      ) : C(n.value, e.coordinatesLine, {
+        color: e.color,
+        lineWidth: 3
+      });
+    }
+    function _l() {
+      h.value.forEach((e, a) => {
+        C(
+          n.value,
+          [
+            { x: t.value.left, y: t.value.bottom - e.yOffset },
+            { x: t.value.right, y: t.value.bottom - e.yOffset }
+          ],
+          {
+            color: l.value.style.chart.grid.x.horizontalLines.color,
+            lineWidth: 1
+          }
+        );
+      });
+    }
+    function se() {
+      El(), U.value ? (d.value !== null && l.value.style.chart.selector.show && al(), Wl(), r.value.stacked && l.value.style.chart.grid.x.showAxis && _l(), Dl.value.forEach((e) => {
+        (e.type === "line" || !e.type) && Xl(e), q.value && (Al(e), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Yl(e));
+      }), Le.value = La(O.value)) : (Le.value && (n.value.clearRect(0, 0, 1e4, 1e4), n.value.drawImage(Le.value, 0, 0)), d.value !== null && l.value.style.chart.selector.show && al(), d.value !== null && h.value.forEach((e) => {
+        if (e.type === "line" || !e.type || e.type === "plot") {
+          if (!e.coordinatesLine[d.value]) return;
+          e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && pl(
+            n.value,
+            {
+              x: e.coordinatesLine[d.value].x,
+              y: e.coordinatesLine[d.value].y
+            },
+            y.value / 150 * l.value.style.chart.line.plots.radiusRatio,
+            {
+              color: l.value.style.chart.backgroundColor,
+              fillStyle: e.color
+            }
+          );
+        }
+      })), l.value.style.chart.grid.y.timeLabels.show && Bl(), l.value.style.chart.selector.show && l.value.style.chart.selector.showHorizontalSelector && Ul(), Hl(), Nl(), U.value = !1;
+    }
+    const pe = ba(() => {
+      q.value = !0, Fl();
+    }, T.value > 200 ? 10 : 1, !q.value);
+    function ne(e) {
+      if ([null, void 0].includes(d.value) || !e.coordinatesLine[d.value]) return !1;
+      const { y: a, value: o } = e.coordinatesLine[d.value];
+      return { y: a, value: o };
+    }
+    function Vl(e) {
+      const { left: a, top: o } = O.value.getBoundingClientRect(), s = e.clientX - a;
+      if (M.value = (e.clientY - o) * 2, (M.value < t.value.top || M.value > t.value.bottom) && (M.value = null), s * 2 < t.value.left || s * 2 > t.value.right) {
+        ye.value = !1, d.value = null;
+        return;
+      }
+      const i = s * 2 - t.value.left;
+      if (d.value = Math.floor(i / t.value.slot), ye.value = !0, !q.value) return;
+      let x = "";
+      const v = l.value.style.chart.tooltip.customFormat;
+      gl(v) && ga(() => v({
+        seriesIndex: d.value,
+        datapoint: h.value.map((f) => ({
+          shape: f.shape || null,
+          name: f.name,
+          color: f.color,
+          type: f.type || "line",
+          value: f.series.find((X, z) => z === d.value)
+        })),
+        series: h.value,
+        config: l.value
+      })) ? fe.value = v({
+        seriesIndex: d.value,
+        datapoint: h.value.map((f) => ({
+          shape: f.shape || null,
+          name: f.name,
+          color: f.color,
+          type: f.type || "line",
+          value: f.series.find((X, z) => z === d.value)
+        })),
+        series: h.value,
+        config: l.value
+      }) : (l.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value] && (x += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${l.value.style.chart.tooltip.borderColor}; width:100%">${W.value.slice(u.value.start, u.value.end)[d.value].text}</div>`), x += Rl.value.join(""), fe.value = x), q.value = !1;
+    }
+    P(() => d.value, (e) => {
+      pe();
+    }), P(() => u.value, (e) => {
+      U.value = !0, se();
+    }, {
+      deep: !0
+    }), P(() => r.value.showDataLabels, (e) => {
+      U.value = !0, se();
+    }), P(() => M.value, (e) => {
+      e && se();
+    }), P(() => r.value.stacked, (e) => {
+      U.value = !0, q.value = !0, pe();
+    });
+    function Gl() {
+      ye.value = !1, d.value = null, fe.value = "", M.value = null, se();
+    }
+    const A = Ie(null), K = Ie(null), Q = Ie(null);
+    vl(() => {
+      Be.value = !0, ze();
+    });
+    function ze() {
+      if (da(g.dataset) ? ha({
+        componentName: "VueUiXyCanvas",
+        type: "dataset"
+      }) : O.value && (n.value = O.value.getContext("2d", { willReadFrequently: !0 })), l.value.responsive) {
+        const e = ma(() => {
+          const { width: a, height: o } = xa({
+            chart: I.value,
+            title: l.value.style.chart.title.text ? Ae.value : null,
+            legend: l.value.style.chart.legend.show ? Ne.value : null,
+            slicer: l.value.style.chart.zoom.show && T.value > 1 ? He.value : null,
+            source: Ye.value
+          });
+          requestAnimationFrame(() => {
+            _e.value = `${a} / ${o}`;
+          });
+        });
+        A.value && (K.value && A.value.unobserve(K.value), A.value.disconnect()), A.value = new ResizeObserver(e), K.value = I.value.parentNode, A.value.observe(K.value);
+      }
+      Q.value && Q.value.disconnect(), Q.value = new ResizeObserver((e) => {
+        for (const a of e)
+          a.contentBoxSize && oe.value && (U.value = !0, pe());
+      }), Q.value.observe(oe.value), ll();
+    }
+    Ql(() => {
+      Q.value && Q.value.disconnect(), A.value && (K.value && A.value.unobserve(K.value), A.value.disconnect());
+    });
+    function tl(e) {
+      Il("selectLegend", h.value.find((a) => a.absoluteIndex === e)), $.value.includes(e) ? $.value = $.value.filter((a) => a !== e) : $.value.push(e), U.value = !0, pe();
+    }
+    const ol = L(() => J.value.map((e, a) => ({
+      ...e,
+      name: e.name,
+      color: fl(e.color) || Je.value[a] || Z[a] || Z[a % Z.length],
+      shape: e.shape || "circle",
+      prefix: e.prefix || "",
+      suffix: e.suffix || "",
+      rounding: e.rounding || 0
+    })).map((e) => ({
+      ...e,
+      opacity: $.value.includes(e.absoluteIndex) ? 0.5 : 1,
+      segregate: () => tl(e.absoluteIndex),
+      isSegregated: $.value.includes(e.absoluteIndex)
+    }))), Zl = L(() => ({
+      cy: "donut-div-legend",
+      backgroundColor: l.value.style.chart.legend.backgroundColor,
+      color: l.value.style.chart.legend.color,
+      fontSize: l.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: l.value.style.chart.legend.bold ? "bold" : ""
+    })), be = L(() => {
+      const e = [""].concat(h.value.map((i) => i.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
+      let a = [];
+      for (let i = 0; i < T.value; i += 1) {
+        const x = h.value.map((v) => v.series[i] ?? 0).reduce((v, f) => v + f, 0);
+        a.push([l.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[i] ? W.value.slice(u.value.start, u.value.end)[i].text : i + 1].concat(h.value.map((v) => (v.series[i] ?? 0).toFixed(l.value.table.rounding))).concat((x ?? 0).toFixed(l.value.table.rounding)));
+      }
+      const o = {
+        th: {
+          backgroundColor: l.value.table.th.backgroundColor,
+          color: l.value.table.th.color,
+          outline: l.value.table.th.outline
+        },
+        td: {
+          backgroundColor: l.value.table.td.backgroundColor,
+          color: l.value.table.td.color,
+          outline: l.value.table.td.outline
+        },
+        breakpoint: l.value.table.responsiveBreakpoint
+      }, s = [l.value.table.columnNames.period].concat(h.value.map((i) => i.name)).concat(l.value.table.columnNames.total);
+      return { head: e, body: a.slice(0, u.value.end - u.value.start), config: o, colNames: s };
+    }), ul = L(() => {
+      if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const e = h.value.map((o) => ({
+        label: o.name,
+        color: o.color,
+        type: o.type
+      })), a = [];
+      for (let o = u.value.start; o < u.value.end; o += 1) {
+        const s = [l.value.style.chart.grid.y.timeLabels.values[o] ? W.value[o].text : o + 1];
+        h.value.forEach((i) => {
+          s.push(Number((i.series[o] || 0).toFixed(l.value.table.rounding)));
+        }), a.push(s);
+      }
+      return { head: e, body: a };
+    });
+    function $e(e = null) {
+      const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], o = ["", ...ul.value.head.map((v) => v.label)], s = ul.value.body, i = a.concat([o]).concat(s), x = ya(i);
+      e ? e(x) : fa({ csvContent: x, title: l.value.style.chart.title.text || "vue-ui-xy-canvas" });
+    }
+    function jl() {
+      return h.value;
+    }
+    function rl() {
+      r.value.showTable = !r.value.showTable;
+    }
+    function sl() {
+      r.value.showDataLabels = !r.value.showDataLabels;
+    }
+    function nl() {
+      r.value.stacked = !r.value.stacked;
+    }
+    function il() {
+      r.value.showTooltip = !r.value.showTooltip;
+    }
+    const me = c(!1);
+    function Te() {
+      me.value = !me.value;
+    }
+    async function ql({ scale: e = 2 } = {}) {
+      if (!I.value) return;
+      const { width: a, height: o } = I.value.getBoundingClientRect(), s = a / o, { imageUri: i, base64: x } = await Ma({ domElement: I.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: i,
+        base64: x,
+        title: l.value.style.chart.title.text,
+        width: a,
+        height: o,
+        aspectRatio: s
+      };
+    }
+    const ie = L(() => {
+      const e = l.value.table.useDialog && !l.value.table.show, a = r.value.showTable;
+      return {
+        component: e ? $l : Ta,
+        title: `${l.value.style.chart.title.text}${l.value.style.chart.title.subtitle.text ? `: ${l.value.style.chart.title.subtitle.text}` : ""}`,
+        props: e ? {
+          backgroundColor: l.value.table.th.backgroundColor,
+          color: l.value.table.th.color,
+          headerColor: l.value.table.th.color,
+          headerBg: l.value.table.th.backgroundColor,
+          isFullscreen: ue.value,
+          fullscreenParent: I.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: l.value.style.chart.backgroundColor,
+              color: l.value.style.chart.color
+            },
+            head: {
+              backgroundColor: l.value.style.chart.backgroundColor,
+              color: l.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    return P(() => r.value.showTable, (e) => {
+      l.value.table.show || (e && l.value.table.useDialog && re.value ? re.value.open() : "close" in re.value && re.value.close());
+    }), xl({
+      getData: jl,
+      getImage: ql,
+      generateCsv: $e,
+      generatePdf: Ze,
+      generateImage: je,
+      toggleTable: rl,
+      toggleLabels: sl,
+      toggleStack: nl,
+      toggleTooltip: il,
+      toggleAnnotator: Te,
+      toggleFullscreen: qe
+    }), (e, a) => (S(), de("div", {
+      style: le(`width:100%; position:relative; ${l.value.responsive ? "height: 100%" : ""}`),
+      ref_key: "xy",
+      ref: I,
+      id: `xy_canvas_${B.value}`,
+      class: ea(`vue-ui-donut ${ue.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      onMouseenter: a[7] || (a[7] = () => p(Ue)(!0)),
+      onMouseleave: a[8] || (a[8] = () => p(Ue)(!1))
+    }, [
+      l.value.style.chart.title.text ? (S(), de("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: Ae,
+        style: le(`width:100%;background:${l.value.style.chart.backgroundColor};`)
+      }, [
+        (S(), D(za, {
+          key: `title_${ke.value}`,
+          config: {
+            title: {
+              cy: "xy-canvas-title",
+              ...l.value.style.chart.title
+            },
+            subtitle: {
+              cy: "xy-canvas-subtitle",
+              ...l.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 4)) : H("", !0),
+      Y("div", {
+        id: `legend-top-${B.value}`
+      }, null, 8, Da),
+      l.value.userOptions.show && ge.value && (p(We) || p(Se)) ? (S(), D(p(zl), {
+        ref: "details",
+        key: `user_option_${Ee.value}`,
+        backgroundColor: l.value.style.chart.backgroundColor,
+        color: l.value.style.chart.color,
+        isPrinting: p(Ve),
+        isImaging: p(Ge),
+        uid: B.value,
+        hasTooltip: l.value.userOptions.buttons.tooltip && l.value.style.chart.tooltip.show,
+        hasPdf: l.value.userOptions.buttons.pdf,
+        hasImg: l.value.userOptions.buttons.img,
+        hasXls: l.value.userOptions.buttons.csv,
+        hasLabel: l.value.userOptions.buttons.labels,
+        hasStack: Pe.dataset.length > 1 && l.value.userOptions.buttons.stack,
+        hasFullscreen: l.value.userOptions.buttons.fullscreen,
+        hasTable: u.value.end - u.value.start <= 730 && l.value.userOptions.buttons.table,
+        isFullscreen: ue.value,
+        isTooltip: r.value.showTooltip,
+        isStacked: r.value.stacked,
+        titles: { ...l.value.userOptions.buttonTitles },
+        chartElement: I.value,
+        position: l.value.userOptions.position,
+        hasAnnotator: l.value.userOptions.buttons.annotator,
+        isAnnotation: me.value,
+        callbacks: l.value.userOptions.callbacks,
+        printScale: l.value.userOptions.print.scale,
+        onToggleFullscreen: qe,
+        onGeneratePdf: p(Ze),
+        onGenerateCsv: $e,
+        onGenerateImage: p(je),
+        onToggleTable: rl,
+        onToggleLabels: sl,
+        onToggleStack: nl,
+        onToggleTooltip: il,
+        onToggleAnnotator: Te,
+        style: le({
+          visibility: p(We) ? p(Se) ? "visible" : "hidden" : "visible"
+        })
+      }, dl({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: b(({ isOpen: o, color: s }) => [
+            k(e.$slots, "menuIcon", V(G({ isOpen: o, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: b(() => [
+            k(e.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: b(() => [
+            k(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: b(() => [
+            k(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: b(() => [
+            k(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: b(() => [
+            k(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: b(() => [
+            k(e.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionStack ? {
+          name: "optionStack",
+          fn: b(() => [
+            k(e.$slots, "optionStack", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: b(({ toggleFullscreen: o, isFullscreen: s }) => [
+            k(e.$slots, "optionFullscreen", V(G({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: b(({ toggleAnnotator: o, isAnnotator: s }) => [
+            k(e.$slots, "optionAnnotator", V(G({ toggleAnnotator: o, isAnnotator: s })), 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", "onGeneratePdf", "onGenerateImage", "style"])) : H("", !0),
+      Y("div", {
+        class: "vue-ui-xy-canvas",
+        style: le(`position: relative; aspect-ratio: ${_e.value}`),
+        ref_key: "container",
+        ref: oe
+      }, [
+        ge.value ? (S(), de("canvas", {
+          key: 0,
+          ref_key: "canvas",
+          ref: O,
+          style: { width: "100%", height: "100%" },
+          onMousemove: a[0] || (a[0] = (o) => Vl(o)),
+          onMouseleave: Gl
+        }, null, 544)) : (S(), D(p(wl), {
+          key: 1,
+          config: {
+            type: "line",
+            style: {
+              backgroundColor: l.value.style.chart.backgroundColor,
+              line: {
+                axis: {
+                  color: "#CCCCCC"
+                },
+                path: {
+                  color: "#CCCCCC",
+                  strokeWidth: 0.5
+                }
+              }
+            }
+          }
+        }, null, 8, ["config"])),
+        hl(p(Sl), {
+          show: r.value.showTooltip && ye.value,
+          backgroundColor: l.value.style.chart.tooltip.backgroundColor,
+          color: l.value.style.chart.tooltip.color,
+          fontSize: l.value.style.chart.tooltip.fontSize,
+          borderRadius: l.value.style.chart.tooltip.borderRadius,
+          borderColor: l.value.style.chart.tooltip.borderColor,
+          borderWidth: l.value.style.chart.tooltip.borderWidth,
+          position: l.value.style.chart.tooltip.position,
+          offsetY: l.value.style.chart.tooltip.offsetY,
+          parent: p(O),
+          content: fe.value,
+          isFullscreen: ue.value,
+          backgroundOpacity: l.value.style.chart.tooltip.backgroundOpacity,
+          isCustom: p(gl)(l.value.style.chart.tooltip.customFormat),
+          smooth: l.value.style.chart.tooltip.smooth,
+          backdropFilter: l.value.style.chart.tooltip.backdropFilter
+        }, {
+          "tooltip-before": b(() => [
+            k(e.$slots, "tooltip-before", V(G({ ...De.value })), void 0, !0)
+          ]),
+          "tooltip-after": b(() => [
+            k(e.$slots, "tooltip-after", V(G({ ...De.value })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom", "smooth", "backdropFilter"])
+      ], 4),
+      Y("div", {
+        ref_key: "chartSlicer",
+        ref: He,
+        style: le(`width:100%;background:${l.value.style.chart.backgroundColor}`),
+        "data-dom-to-png-ignore": ""
+      }, [
+        l.value.style.chart.zoom.show && T.value > 1 ? (S(), D($a, {
+          ref_key: "slicerComponent",
+          ref: el,
+          key: `slicer_${Fe.value}`,
+          background: l.value.style.chart.zoom.color,
+          borderColor: l.value.style.chart.backgroundColor,
+          fontSize: l.value.style.chart.zoom.fontSize,
+          useResetSlot: l.value.style.chart.zoom.useResetSlot,
+          labelLeft: l.value.style.chart.grid.y.timeLabels.values[u.value.start] ? W.value[u.value.start].text : "",
+          labelRight: l.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] ? W.value[u.value.end - 1].text : "",
+          textColor: l.value.style.chart.color,
+          inputColor: l.value.style.chart.zoom.color,
+          selectColor: l.value.style.chart.zoom.highlightColor,
+          max: T.value,
+          min: 0,
+          valueStart: u.value.start,
+          valueEnd: u.value.end,
+          start: u.value.start,
+          "onUpdate:start": a[1] || (a[1] = (o) => u.value.start = o),
+          end: u.value.end,
+          "onUpdate:end": a[2] || (a[2] = (o) => u.value.end = o),
+          refreshStartPoint: l.value.style.chart.zoom.startIndex !== null ? l.value.style.chart.zoom.startIndex : 0,
+          refreshEndPoint: l.value.style.chart.zoom.endIndex !== null ? l.value.style.chart.zoom.endIndex + 1 : T.value,
+          enableRangeHandles: l.value.style.chart.zoom.enableRangeHandles,
+          enableSelectionDrag: l.value.style.chart.zoom.enableSelectionDrag,
+          onReset: Qe
+        }, {
+          "reset-action": b(({ reset: o }) => [
+            k(e.$slots, "reset-action", V(G({ reset: o })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"])) : H("", !0)
+      ], 4),
+      Y("div", {
+        id: `legend-bottom-${B.value}`
+      }, null, 8, Fa),
+      Be.value ? (S(), D(la, {
+        key: 2,
+        to: l.value.style.chart.legend.position === "top" ? `#legend-top-${B.value}` : `#legend-bottom-${B.value}`
+      }, [
+        Y("div", {
+          ref_key: "chartLegend",
+          ref: Ne
+        }, [
+          l.value.style.chart.legend.show && ge.value ? (S(), D(Sa, {
+            legendSet: ol.value,
+            config: Zl.value,
+            key: `legend_${we.value}`,
+            onClickMarker: a[3] || (a[3] = ({ i: o }) => tl(o))
+          }, {
+            item: b(({ legend: o, index: s }) => [
+              Y("div", {
+                onClick: (i) => o.segregate(),
+                style: le(`opacity:${$.value.includes(s) ? 0.5 : 1}`)
+              }, Me(o.name), 13, Ea)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : k(e.$slots, "legend", {
+            key: 1,
+            legend: ol.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : H("", !0),
+      e.$slots.watermark ? (S(), de("div", Aa, [
+        k(e.$slots, "watermark", V(G({ isPrinting: p(Ve) || p(Ge) })), void 0, !0)
+      ])) : H("", !0),
+      e.$slots.source ? (S(), de("div", {
+        key: 4,
+        ref_key: "source",
+        ref: Ye,
+        dir: "auto"
+      }, [
+        k(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : H("", !0),
+      ge.value ? (S(), D(aa(ie.value.component), ta({ key: 5 }, ie.value.props, {
+        ref_key: "tableUnit",
+        ref: re,
+        onClose: a[6] || (a[6] = (o) => r.value.showTable = !1)
+      }), dl({
+        content: b(() => [
+          (S(), D(p(kl), {
+            key: `table_${Ce.value}`,
+            colNames: be.value.colNames,
+            head: be.value.head,
+            body: be.value.body,
+            config: be.value.config,
+            title: l.value.table.useDialog ? "" : ie.value.title,
+            withCloseButton: !l.value.table.useDialog,
+            onClose: a[5] || (a[5] = (o) => r.value.showTable = !1)
+          }, {
+            th: b(({ th: o }) => [
+              Y("div", { innerHTML: o }, null, 8, Na)
+            ]),
+            td: b(({ td: o }) => [
+              yl(Me(o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        l.value.table.useDialog ? {
+          name: "title",
+          fn: b(() => [
+            yl(Me(ie.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        l.value.table.useDialog ? {
+          name: "actions",
+          fn: b(() => [
+            Y("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[4] || (a[4] = (o) => $e(l.value.userOptions.callbacks.csv))
+            }, [
+              hl(Oa, {
+                name: "excel",
+                stroke: ie.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : H("", !0),
+      l.value.userOptions.buttons.annotator && h.value.length ? (S(), D(p(Cl), {
+        key: 6,
+        parent: I.value,
+        backgroundColor: l.value.style.chart.backgroundColor,
+        color: l.value.style.chart.color,
+        active: me.value,
+        onClose: Te
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : H("", !0)
+    ], 46, Pa));
+  }
+}, lt = /* @__PURE__ */ Ra(Ha, [["__scopeId", "data-v-7eb0be8b"]]);
+export {
+  lt as default
+};