vue-data-ui 2.6.19 → 2.6.21

package/dist/{vue-ui-xy-canvas-CTymfSH6.js → vue-ui-xy-canvas-Bl2v7Z3U.js}

@@ -1,22 +1,22 @@
-import { ref as i, computed as I, onMounted as Ze, nextTick as Ie, onBeforeUnmount as bt, watch as te, createElementBlock as X, openBlock as C, Fragment as We, createCommentVNode as le, normalizeClass as de, createElementVNode as U, withDirectives as Ut, normalizeStyle as W, createVNode as ke, vModelText as Wt, withModifiers as dt, unref as D, renderList as Vt, useSlots as _t, createBlock as ue, createSlots as Zt, withCtx as z, renderSlot as O, normalizeProps as pe, guardReactiveProps as me, toDisplayString as ht, createTextVNode as Gt } from "vue";
-import { l as xt, X as jt, u as qt, c as Qt, t as Jt, p as ce, a as Kt, C as Ne, b as el, D as Ve, i as be, f as xe, d as ft, _ as tl, J as ll, aa as al, o as ol, e as rl, x as yt, q as nl, r as sl, y as ul, s as Me } from "./index-DvAaY6OP.js";
-import { d as il, t as vl, u as cl, c as dl, a as gt, l as M, r as _e, b as ee, p as pt } from "./useResponsive-BWapHhVH.js";
-import { _ as hl } from "./Tooltip-DRFQIslg.js";
-import { L as fl } from "./Legend-s9DRKvJo.js";
-import { _ as yl } from "./Title-dsg3PqUg.js";
-import { S as gl } from "./Slicer-BIW17-XH.js";
-import { u as pl, U as ml } from "./usePrinter-D_2jA4x8.js";
-import bl from "./vue-ui-accordion-LbUarYuf.js";
-import { D as xl } from "./DataTable-pNLWbeCL.js";
-import kl from "./vue-ui-skeleton-WoggMoff.js";
-import { u as mt } from "./useNestedProp-CGzX7c5Q.js";
-import Ye from "./BaseIcon-nz-vbP7I.js";
+import { ref as i, computed as T, onMounted as _e, nextTick as Ie, onBeforeUnmount as bt, watch as te, createElementBlock as X, openBlock as C, Fragment as We, createCommentVNode as le, normalizeClass as fe, createElementVNode as U, withDirectives as Ut, normalizeStyle as W, createVNode as ke, vModelText as Wt, withModifiers as dt, unref as D, renderList as Vt, useSlots as Zt, createBlock as ue, createSlots as _t, withCtx as z, renderSlot as M, normalizeProps as ve, guardReactiveProps as de, toDisplayString as ht, createTextVNode as Gt } from "vue";
+import { l as xt, X as jt, u as qt, c as Qt, t as Jt, p as he, a as Kt, C as Ne, b as el, D as Ve, i as be, f as xe, d as ft, _ as tl, J as ll, aa as al, o as ol, e as rl, x as yt, q as nl, r as sl, y as ul, s as Me } from "./index-DUnEDLbc.js";
+import { d as il, t as cl, u as vl, c as dl, a as gt, l as I, r as Ze, b as ee, p as pt } from "./useResponsive-vZgZwV-S.js";
+import { _ as hl } from "./Tooltip-BTO5NGkn.js";
+import { L as fl } from "./Legend-PL8rU0J1.js";
+import { _ as yl } from "./Title-1PWD04Gh.js";
+import { S as gl } from "./Slicer-6F4tHrZR.js";
+import { u as pl, U as ml } from "./usePrinter-Undaynpo.js";
+import bl from "./vue-ui-accordion-C8Couc_G.js";
+import { D as xl } from "./DataTable-DfMqgTjL.js";
+import kl from "./vue-ui-skeleton-DieABKlo.js";
+import { u as mt } from "./useNestedProp-CEMeoM-f.js";
+import Ye from "./BaseIcon-DH34CAFx.js";
 import { _ as kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import { C as Ll } from "./PenAndPaper.vue_vue_type_style_index_0_scoped_c968a401_lang-z17A_S1M.js";
+import { C as Ll } from "./PenAndPaper.vue_vue_type_style_index_0_scoped_3cea7589_lang-AmNwJZI7.js";
 import { u as Cl } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as wl } from "./useChartAccessibility-BWojgys7.js";
 const $l = {
-  class: /* @__PURE__ */ de({
+  class: /* @__PURE__ */ fe({
     "vue-ui-pen-and-paper-action": !0
   }),
   style: { padding: "0 !important" }
@@ -41,22 +41,22 @@ const $l = {
   },
   emits: ["close"],
   setup($, { emit: Xe }) {
-    const q = $, Be = Xe, m = i([]), V = i([]), ae = i("0 0 0 0"), _ = i(q.color), u = i(1), b = I(() => xt(q.color, 0.6));
-    function B({ width: d, height: v }) {
-      ae.value = `0 0 ${d} ${v}`;
+    const q = $, Be = Xe, m = i([]), V = i([]), ae = i("0 0 0 0"), Z = i(q.color), u = i(1), b = T(() => xt(q.color, 0.6));
+    function B({ width: d, height: c }) {
+      ae.value = `0 0 ${d} ${c}`;
     }
     const Q = i(null);
-    Ze(() => {
+    _e(() => {
       Ie(() => {
         if (q.parent) {
           Q.value = new ResizeObserver((n) => {
-            for (const c of n) {
-              const { width: y, height: k } = c.contentRect;
+            for (const v of n) {
+              const { width: y, height: k } = v.contentRect;
               B({ width: y, height: k });
             }
           }), Q.value.observe(q.parent);
-          const { width: d, height: v } = q.parent.getBoundingClientRect();
-          B({ width: d, height: v });
+          const { width: d, height: c } = q.parent.getBoundingClientRect();
+          B({ width: d, height: c });
         }
       });
     }), bt(() => {
@@ -65,89 +65,89 @@ const $l = {
       () => q.parent,
       (d) => {
         if (!d) return;
-        const { width: v, height: n } = q.parent.getBoundingClientRect();
-        B({ width: v, height: n });
+        const { width: c, height: n } = q.parent.getBoundingClientRect();
+        B({ width: c, height: n });
       },
       { immediate: !0 }
     );
-    const h = i(!1), Z = i(""), oe = i(null);
+    const h = i(!1), _ = i(""), oe = i(null);
     function E(d) {
       if (!oe.value) return;
       h.value = !0;
-      const { x: v, y: n } = Ce(d);
-      Z.value = `M ${v} ${n}`;
+      const { x: c, y: n } = Ce(d);
+      _.value = `M ${c} ${n}`;
     }
     function J(d) {
       if (!h.value || !oe.value) return;
-      const { x: v, y: n } = Ce(d);
-      Z.value += ` ${v} ${n}`;
+      const { x: c, y: n } = Ce(d);
+      _.value += ` ${c} ${n}`;
     }
     function G(d) {
-      const v = d.trim().split(/\s+/);
-      if (v.length < 4)
+      const c = d.trim().split(/\s+/);
+      if (c.length < 4)
         return d;
-      const n = v.slice(1).map(Number);
+      const n = c.slice(1).map(Number);
       if (n.length % 2 !== 0)
         return d;
-      const c = re(n), y = [`M ${c[0]} ${c[1]}`];
-      for (let A = 2; A < c.length - 2; A += 2) {
-        const t = c[A - 2], T = c[A - 1], F = c[A], P = c[A + 1], R = (t + F) / 2, ne = (T + P) / 2;
-        y.push(`Q ${t} ${T} ${R} ${ne}`);
+      const v = re(n), y = [`M ${v[0]} ${v[1]}`];
+      for (let A = 2; A < v.length - 2; A += 2) {
+        const t = v[A - 2], F = v[A - 1], P = v[A], R = v[A + 1], O = (t + P) / 2, ne = (F + R) / 2;
+        y.push(`Q ${t} ${F} ${O} ${ne}`);
       }
-      const k = c[c.length - 2], w = c[c.length - 1];
+      const k = v[v.length - 2], w = v[v.length - 1];
       return y.push(`L ${k} ${w}`), y.join(" ");
     }
-    function re(d, v = 1) {
+    function re(d, c = 1) {
       const n = [...d];
-      for (let c = 2; c < d.length - 2; c += 2) {
-        const y = d[c], k = d[c + 1], w = d[c - 2], A = d[c - 1], t = d[c + 2], T = d[c + 3];
-        n[c] = y + v * ((w + t) / 2 - y), n[c + 1] = k + v * ((A + T) / 2 - k);
+      for (let v = 2; v < d.length - 2; v += 2) {
+        const y = d[v], k = d[v + 1], w = d[v - 2], A = d[v - 1], t = d[v + 2], F = d[v + 3];
+        n[v] = y + c * ((w + t) / 2 - y), n[v + 1] = k + c * ((A + F) / 2 - k);
       }
       return n;
     }
     function Le(d) {
-      const v = d.trim().split(/\s+/);
-      let n = "", c = "", y = null, k = null;
-      for (let w = 0; w < v.length; w += 1) {
-        const A = v[w];
+      const c = d.trim().split(/\s+/);
+      let n = "", v = "", y = null, k = null;
+      for (let w = 0; w < c.length; w += 1) {
+        const A = c[w];
         if (isNaN(A)) {
-          if (c = A, c === "M" || c === "L")
-            y = parseFloat(v[++w]), k = parseFloat(v[++w]), n += `${c}${y} ${k}`;
-          else if (c === "Q") {
-            const t = parseFloat(v[++w]), T = parseFloat(v[++w]), F = parseFloat(v[++w]), P = parseFloat(v[++w]);
-            t === y && T === k ? n += `t${F - y} ${P - k}` : n += `q${t - y} ${T - k} ${F - y} ${P - k}`, y = F, k = P;
+          if (v = A, v === "M" || v === "L")
+            y = parseFloat(c[++w]), k = parseFloat(c[++w]), n += `${v}${y} ${k}`;
+          else if (v === "Q") {
+            const t = parseFloat(c[++w]), F = parseFloat(c[++w]), P = parseFloat(c[++w]), R = parseFloat(c[++w]);
+            t === y && F === k ? n += `t${P - y} ${R - k}` : n += `q${t - y} ${F - k} ${P - y} ${R - k}`, y = P, k = R;
           }
         } else {
-          const t = parseFloat(A), T = parseFloat(v[++w]);
-          if (c === "L") {
-            const F = t - y, P = T - k;
-            F === 0 ? n += `v${P}` : P === 0 ? n += `h${F}` : n += `l${F} ${P}`, y = t, k = T;
-          } else if (c === "Q") {
-            const F = t, P = T, R = parseFloat(v[++w]), ne = parseFloat(v[++w]);
-            F === y && P === k ? n += `t${R - y} ${ne - k}` : n += `q${F - y} ${P - k} ${R - y} ${ne - k}`, y = R, k = ne;
+          const t = parseFloat(A), F = parseFloat(c[++w]);
+          if (v === "L") {
+            const P = t - y, R = F - k;
+            P === 0 ? n += `v${R}` : R === 0 ? n += `h${P}` : n += `l${P} ${R}`, y = t, k = F;
+          } else if (v === "Q") {
+            const P = t, R = F, O = parseFloat(c[++w]), ne = parseFloat(c[++w]);
+            P === y && R === k ? n += `t${O - y} ${ne - k}` : n += `q${P - y} ${R - k} ${O - y} ${ne - k}`, y = O, k = ne;
           }
         }
       }
       return n;
     }
-    function he() {
+    function ye() {
       h.value && (m.value.push({
         strokeWidth: u.value,
-        path: Le(G(Z.value)),
-        color: _.value
-      }), V.value = [], Z.value = ""), h.value = !1;
+        path: Le(G(_.value)),
+        color: Z.value
+      }), V.value = [], _.value = ""), h.value = !1;
     }
     function Ce(d) {
       if (!oe.value) return { x: 0, y: 0 };
-      const v = oe.value.getBoundingClientRect();
-      let n, c;
-      return d.touches && d.touches.length ? (n = d.touches[0].clientX, c = d.touches[0].clientY) : (n = d.clientX, c = d.clientY), {
-        x: n - v.left,
-        y: c - v.top
+      const c = oe.value.getBoundingClientRect();
+      let n, v;
+      return d.touches && d.touches.length ? (n = d.touches[0].clientX, v = d.touches[0].clientY) : (n = d.clientX, v = d.clientY), {
+        x: n - c.left,
+        y: v - c.top
       };
     }
     i(!1);
-    function fe() {
+    function ge() {
       if (m.value.length > 0) {
         const d = m.value.pop();
         V.value.push(d);
@@ -163,11 +163,11 @@ const $l = {
       m.value = [], V.value = [];
     }
     const Pe = i(null);
-    return (d, v) => (C(), X(We, null, [
+    return (d, c) => (C(), X(We, null, [
       $.active ? (C(), X("div", {
         key: 0,
         "data-html2canvas-ignore": "",
-        class: de({
+        class: fe({
           "vue-ui-pen-and-paper-actions": !0,
           visible: $.active
         })
@@ -178,7 +178,7 @@ const $l = {
             backgroundColor: $.backgroundColor,
             border: `1px solid ${b.value}`
           }),
-          onClick: v[0] || (v[0] = (n) => Be("close"))
+          onClick: c[0] || (c[0] = (n) => Be("close"))
         }, [
           ke(Ye, {
             name: "close",
@@ -187,14 +187,14 @@ const $l = {
         ], 4),
         U("button", $l, [
           ke(Ll, {
-            value: _.value,
-            "onUpdate:value": v[1] || (v[1] = (n) => _.value = n),
+            value: Z.value,
+            "onUpdate:value": c[1] || (c[1] = (n) => Z.value = n),
             backgroundColor: $.backgroundColor,
             buttonBorderColor: b.value
           }, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
         ]),
         U("button", {
-          class: de({
+          class: fe({
             "vue-ui-pen-and-paper-action": !0,
             "vue-ui-pen-and-paper-action-disabled": !m.value.length
           }),
@@ -203,7 +203,7 @@ const $l = {
             backgroundColor: $.backgroundColor,
             border: `1px solid ${b.value}`
           }),
-          onClick: fe
+          onClick: ge
         }, [
           ke(Ye, {
             name: "restart",
@@ -211,7 +211,7 @@ const $l = {
           }, null, 8, ["stroke"])
         ], 14, Sl),
         U("button", {
-          class: de({
+          class: fe({
             "vue-ui-pen-and-paper-action": !0,
             "vue-ui-pen-and-paper-action-disabled": !V.value.length
           }),
@@ -228,7 +228,7 @@ const $l = {
           }, null, 8, ["stroke"])
         ], 6),
         U("button", {
-          class: de([{
+          class: fe([{
             "vue-ui-pen-and-paper-action": !0,
             "vue-ui-pen-and-paper-action-disabled": !m.value.length
           }, "vue-ui-pen-and-paper-action"]),
@@ -251,7 +251,7 @@ const $l = {
           min: 0.5,
           max: 12,
           step: 0.1,
-          "onUpdate:modelValue": v[2] || (v[2] = (n) => u.value = n),
+          "onUpdate:modelValue": c[2] || (c[2] = (n) => u.value = n),
           style: W({
             accentColor: $.color
           })
@@ -264,17 +264,17 @@ const $l = {
         ref: oe,
         xmlns: D(jt),
         viewBox: ae.value,
-        class: de({
+        class: fe({
           "vue-ui-pen-and-paper": !0,
           inactive: !$.active
         }),
         onMousedown: E,
         onMousemove: J,
-        onMouseup: he,
-        onMouseleave: he,
+        onMouseup: ye,
+        onMouseleave: ye,
         onTouchstart: dt(E, ["prevent"]),
         onTouchmove: dt(J, ["prevent"]),
-        onTouchend: he
+        onTouchend: ye
       }, [
         (C(!0), X(We, null, Vt(m.value, (n) => (C(), X(We, { key: n }, [
           n.path.replace("M", "").split(" ").length === 2 ? (C(), X("circle", {
@@ -295,8 +295,8 @@ const $l = {
         h.value ? (C(), X("path", {
           key: 0,
           class: "vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",
-          d: G(Z.value),
-          stroke: _.value,
+          d: G(_.value),
+          stroke: Z.value,
           "stroke-width": u.value * 1.1,
           fill: "none"
         }, null, 8, Tl)) : le("", !0)
@@ -324,14 +324,14 @@ const $l = {
   },
   emits: ["selectLegend"],
   setup($, { expose: Xe, emit: q }) {
-    const { vue_ui_xy_canvas: Be } = qt(), m = $, V = i(Qt()), ae = i(null), _ = i(null), u = i(null), b = i(1), B = i(1), Q = i(!1), h = i(null), Z = i(""), oe = i(null), E = i([]), J = i(1), G = i(!0), re = i(!0), Le = i(null), he = i(0), Ce = i(0), fe = i(!1), Te = i(null), Fe = i(null), Pe = i(null), d = i(null), v = i(0), n = i(0), c = i(0), y = i(null), k = I(() => !!m.dataset && m.dataset.length), w = q, A = _t();
-    Ze(() => {
+    const { vue_ui_xy_canvas: Be } = qt(), m = $, V = i(Qt()), ae = i(null), Z = i(null), u = i(null), b = i(1), B = i(1), Q = i(!1), h = i(null), _ = i(""), oe = i(null), E = i([]), J = i(1), G = i(!0), re = i(!0), Le = i(null), ye = i(0), Ce = i(0), ge = i(!1), Te = i(null), Fe = i(null), Pe = i(null), d = i(null), c = i(0), n = i(0), v = i(0), y = i(null), k = T(() => !!m.dataset && m.dataset.length), w = q, A = Zt();
+    _e(() => {
       A["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });
-    const t = I({
+    const t = T({
       get: () => ne(),
       set: (e) => e
-    }), { userOptionsVisible: T, setUserOptionsVisibility: F, keepUserOptionState: P } = Cl({ config: t.value }), { svgRef: R } = wl({ config: t.value.style.chart.title });
+    }), { userOptionsVisible: F, setUserOptionsVisibility: P, keepUserOptionState: R } = Cl({ config: t.value }), { svgRef: O } = wl({ config: t.value.style.chart.title });
     function ne() {
       const e = mt({
         userConfig: m.config,
@@ -343,13 +343,13 @@ const $l = {
           userConfig: Kt.vue_ui_xy_canvas[e.theme] || m.config,
           defaultConfig: e
         }),
-        customPalette: Jt[e.theme] || ce
+        customPalette: Jt[e.theme] || he
       } : a = e, m.config && Ne(m.config, "style.chart.scale.min") ? a.style.chart.scale.min = m.config.style.chart.scale.min : a.style.chart.scale.min = null, m.config && Ne(m.config, "style.chart.scale.max") ? a.style.chart.scale.max = m.config.style.chart.scale.max : a.style.chart.scale.max = null, m.config && Ne(m.config, "style.chart.zoom.startIndex") ? a.style.chart.zoom.startIndex = m.config.style.chart.zoom.startIndex : a.style.chart.zoom.startIndex = null, m.config && Ne(m.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = m.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, a;
     }
     te(() => m.config, (e) => {
-      t.value = ne(), T.value = !t.value.userOptions.showOnChartHover, He(), v.value += 1, n.value += 1, c.value += 1, s.value.showTable = t.value.table.show, s.value.showDataLabels = t.value.style.chart.dataLabels.show, s.value.stacked = t.value.style.chart.stacked, s.value.showTooltip = t.value.style.chart.tooltip.show;
+      t.value = ne(), F.value = !t.value.userOptions.showOnChartHover, He(), c.value += 1, n.value += 1, v.value += 1, s.value.showTable = t.value.table.show, s.value.showDataLabels = t.value.style.chart.dataLabels.show, s.value.stacked = t.value.style.chart.stacked, s.value.showTooltip = t.value.style.chart.tooltip.show;
     }, { deep: !0 }), te(() => m.dataset, () => {
-      He(), v.value += 1, n.value += 1, c.value += 1;
+      He(), c.value += 1, n.value += 1, v.value += 1;
     }, { deep: !0 });
     const Ge = i(t.value.style.chart.aspectRatio), { isPrinting: je, isImaging: qe, generatePdf: Qe, generateImage: Je } = pl({
       elementId: `xy_canvas_${V.value}`,
@@ -361,9 +361,9 @@ const $l = {
       showTooltip: t.value.style.chart.tooltip.show
     });
     function Lt(e) {
-      fe.value = e, Ce.value += 1;
+      ge.value = e, Ce.value += 1;
     }
-    const Ke = I(() => el(t.value.customPalette)), j = I(() => ye.value ? Math.max(...ye.value.filter((e, a) => !E.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = I(() => {
+    const Ke = T(() => el(t.value.customPalette)), j = T(() => pe.value ? Math.max(...pe.value.filter((e, a) => !E.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = T(() => {
       const e = b.value - b.value * (t.value.style.chart.paddingProportions.left + t.value.style.chart.paddingProportions.right);
       return {
         canvasWidth: b.value,
@@ -382,19 +382,19 @@ const $l = {
     }
     function Ct({ hasAutoScale: e, series: a, min: o, max: f, scale: p, yOffset: Y, individualHeight: g, stackIndex: L = null }) {
       return a.map((ie, H) => {
-        const se = p.min < 0 ? Math.abs(p.min) : 0, ve = et(ie + se, se + p.max);
+        const se = p.min < 0 ? Math.abs(p.min) : 0, ce = et(ie + se, se + p.max);
         let Se, ze;
         e && (Se = p.min, ze = et(ie - Se, p.max - Se));
         let K = 0;
-        return L === null ? K = l.value.bottom - l.value.height * (e ? ze : ve) : K = l.value.bottom - Y - g * (e ? ze : ve), {
+        return L === null ? K = l.value.bottom - l.value.height * (e ? ze : ce) : K = l.value.bottom - Y - g * (e ? ze : ce), {
           x: l.value.left + l.value.slot * H + l.value.slot / 2,
           y: K,
           value: ie
         };
       });
     }
-    const S = I(() => {
-      const e = t.value.style.chart.scale.min !== null ? t.value.style.chart.scale.min : Math.min(...ye.value.filter((g, L) => !E.value.includes(g.absoluteIndex)).flatMap((g) => g.series.slice(r.value.start, r.value.end))), a = t.value.style.chart.scale.max !== null ? t.value.style.chart.scale.max : Math.max(...ye.value.filter((g, L) => !E.value.includes(g.absoluteIndex)).flatMap((g) => g.series.slice(r.value.start, r.value.end))), o = Ve(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, t.value.style.chart.scale.ticks), f = o.min < 0 ? Math.abs(o.min) : 0, p = l.value.bottom - l.value.height * (f / (o.max + f)), Y = o.ticks.map((g) => ({
+    const S = T(() => {
+      const e = t.value.style.chart.scale.min !== null ? t.value.style.chart.scale.min : Math.min(...pe.value.filter((g, L) => !E.value.includes(g.absoluteIndex)).flatMap((g) => g.series.slice(r.value.start, r.value.end))), a = t.value.style.chart.scale.max !== null ? t.value.style.chart.scale.max : Math.max(...pe.value.filter((g, L) => !E.value.includes(g.absoluteIndex)).flatMap((g) => g.series.slice(r.value.start, r.value.end))), o = Ve(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, t.value.style.chart.scale.ticks), f = o.min < 0 ? Math.abs(o.min) : 0, p = l.value.bottom - l.value.height * (f / (o.max + f)), Y = o.ticks.map((g) => ({
         y: l.value.bottom - l.value.height * ((g + f) / (o.max + f)),
         x: l.value.left - 8,
         value: g
@@ -407,7 +407,7 @@ const $l = {
         yLabels: Y,
         zero: p
       };
-    }), wt = I(() => x.value.map((e) => `
+    }), wt = T(() => x.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}"/>
@@ -425,19 +425,19 @@ const $l = {
       { datapoint: e, seriesIndex: h.value }
     )}</span>
             </div>
-        `)), ye = I(() => m.dataset.map((e, a) => ({
+        `)), pe = T(() => m.dataset.map((e, a) => ({
       ...e,
       series: tl({
         data: ll(e.series),
         threshold: t.value.downsample.threshold
       }),
       absoluteIndex: a,
-      color: ft(e.color || Ke.value[a] || ce[a] || ce[a % ce.length])
+      color: ft(e.color || Ke.value[a] || he[a] || he[a % he.length])
     })));
     te(j, (e) => {
       e && tt();
     });
-    const x = I(() => al(ye.value.filter((e, a) => !E.value.includes(e.absoluteIndex))).map((e, a) => ({
+    const x = T(() => al(pe.value.filter((e, a) => !E.value.includes(e.absoluteIndex))).map((e, a) => ({
       ...e,
       series: e.series.slice(r.value.start, r.value.end)
     })).map((e, a) => {
@@ -450,8 +450,8 @@ const $l = {
       let g;
       e.autoScaling ? g = Ve(p.valueMin, p.valueMax, Y) : g = Ve(p.valueMin < 0 ? p.valueMin : 0, p.valueMax <= 0 ? 0 : p.valueMax, Y);
       const L = s.value.stacked ? l.value.height * (1 - e.cumulatedStackRatio) : 0, ie = s.value.stacked ? l.value.height / t.value.style.chart.stackGap : 0, H = s.value.stacked ? l.value.height * e.stackRatio - ie : l.value.height, se = g.min < 0 ? Math.abs(g.min) : 0;
-      let ve;
-      e.autoScaling && s.value.stacked && f <= 0 ? ve = l.value.bottom - L - H : ve = l.value.bottom - L - H * (se / (g.max + se));
+      let ce;
+      e.autoScaling && s.value.stacked && f <= 0 ? ce = l.value.bottom - L - H : ce = l.value.bottom - L - H * (se / (g.max + se));
       const Se = g.ticks.map((K, Ht) => ({
         y: l.value.bottom - L - H * (Ht / (g.ticks.length - 1)),
         x: l.value.left - 8,
@@ -472,7 +472,7 @@ const $l = {
         min: o,
         max: f,
         localScale: g,
-        localZero: ve,
+        localZero: ce,
         localMin: se,
         localYLabels: Se,
         yOffset: L,
@@ -485,29 +485,29 @@ const $l = {
     function tt() {
       lt();
     }
-    const ge = i(null);
+    const me = i(null);
     async function lt() {
-      (t.value.style.chart.zoom.startIndex !== null || t.value.style.chart.zoom.endIndex !== null) && ge.value ? (t.value.style.chart.zoom.startIndex !== null && (await Ie(), await Ie(), ge.value && ge.value.setStartValue(t.value.style.chart.zoom.startIndex)), t.value.style.chart.zoom.endIndex !== null && (await Ie(), await Ie(), ge.value && ge.value.setEndValue($t(t.value.style.chart.zoom.endIndex + 1)))) : (r.value = {
+      (t.value.style.chart.zoom.startIndex !== null || t.value.style.chart.zoom.endIndex !== null) && me.value ? (t.value.style.chart.zoom.startIndex !== null && (await Ie(), await Ie(), me.value && me.value.setStartValue(t.value.style.chart.zoom.startIndex)), t.value.style.chart.zoom.endIndex !== null && (await Ie(), await Ie(), me.value && me.value.setEndValue($t(t.value.style.chart.zoom.endIndex + 1)))) : (r.value = {
         start: 0,
         end: j.value
-      }, he.value += 1);
+      }, ye.value += 1);
     }
     function $t(e) {
       const a = j.value;
       return e > a ? a : e < 0 || t.value.style.chart.zoom.startIndex !== null && e < t.value.style.chart.zoom.startIndex ? t.value.style.chart.zoom.startIndex !== null ? t.value.style.chart.zoom.startIndex + 1 : 1 : e;
     }
-    const St = I(() => x.value.filter((e) => ["line", "plot", void 0].includes(e.type))), N = I(() => x.value.filter((e) => e.type === "bar"));
+    const St = T(() => x.value.filter((e) => ["line", "plot", void 0].includes(e.type))), N = T(() => x.value.filter((e) => e.type === "bar"));
     function zt() {
-      if (!R.value)
+      if (!O.value)
         return;
-      const e = _.value.offsetWidth, a = _.value.offsetHeight;
-      R.value.width = e * J.value * 2, R.value.height = a * J.value * 2, b.value = e * J.value * 2, B.value = a * J.value * 2, u.value.scale(J.value, J.value), we();
+      const e = Z.value.offsetWidth, a = Z.value.offsetHeight;
+      O.value.width = e * J.value * 2, O.value.height = a * J.value * 2, b.value = e * J.value * 2, B.value = a * J.value * 2, u.value.scale(J.value, J.value), we();
     }
     function Mt() {
       if (u.value.clearRect(0, 0, 1e4, 1e4), u.value.fillStyle = t.value.style.chart.backgroundColor, u.value.fillRect(0, 0, l.value.canvasWidth, l.value.canvasHeight), s.value.stacked)
         t.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start < t.value.style.chart.grid.y.verticalLines.hideUnderXLength ? x.value.forEach((e) => {
           for (let a = 0; a < r.value.end - r.value.start + 1; a += 1)
-            M(
+            I(
               u.value,
               [
                 {
@@ -525,7 +525,7 @@ const $l = {
             );
         }) : t.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start >= t.value.style.chart.grid.y.verticalLines.hideUnderXLength && x.value.forEach((e) => {
           for (let a = r.value.start; a < r.value.end; a += 1)
-            a % Math.floor((r.value.end - r.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 && M(
+            a % Math.floor((r.value.end - r.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 && I(
               u.value,
               [
                 {
@@ -543,7 +543,7 @@ const $l = {
             );
         }), t.value.style.chart.grid.x.horizontalLines.show && (t.value.style.chart.grid.x.horizontalLines.alternate ? x.value.forEach((e) => {
           e.localYLabels.forEach((a, o) => {
-            o < e.localYLabels.length - 1 && _e(
+            o < e.localYLabels.length - 1 && Ze(
               u.value,
               [
                 { x: l.value.left, y: a.y },
@@ -559,7 +559,7 @@ const $l = {
           });
         }) : x.value.forEach((e) => {
           e.localYLabels.slice(r.value.start, r.value.end).forEach((a) => {
-            M(
+            I(
               u.value,
               [
                 { x: l.value.left, y: a.y },
@@ -571,7 +571,7 @@ const $l = {
             );
           });
         })), t.value.style.chart.grid.zeroLine.show && x.value.forEach((e) => {
-          M(
+          I(
             u.value,
             [
               { x: l.value.left, y: e.localZero },
@@ -583,7 +583,7 @@ const $l = {
             }
           );
         }), t.value.style.chart.grid.y.axisLabels.show && x.value.forEach((e) => {
-          M(
+          I(
             u.value,
             [
               { x: l.value.left, y: l.value.bottom - e.yOffset },
@@ -592,7 +592,7 @@ const $l = {
             {
               color: e.color
             }
-          ), M(
+          ), I(
             u.value,
             [
               { x: l.value.right, y: l.value.bottom - e.yOffset },
@@ -619,7 +619,7 @@ const $l = {
       else {
         if (t.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start < t.value.style.chart.grid.y.verticalLines.hideUnderXLength)
           for (let e = 0; e < r.value.end - r.value.start + 1; e += 1)
-            M(
+            I(
               u.value,
               [
                 { x: l.value.left + l.value.slot * e, y: l.value.top },
@@ -631,7 +631,7 @@ const $l = {
             );
         else if (t.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start >= t.value.style.chart.grid.y.verticalLines.hideUnderXLength)
           for (let e = r.value.start; e < r.value.end; e += 1)
-            e % Math.floor((r.value.end - r.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 && M(
+            e % Math.floor((r.value.end - r.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 && I(
               u.value,
               [
                 { x: l.value.left + l.value.slot * (e - r.value.start) + l.value.slot / 2, y: l.value.top },
@@ -642,7 +642,7 @@ const $l = {
               }
             );
         t.value.style.chart.grid.x.horizontalLines.show && (t.value.style.chart.grid.x.horizontalLines.alternate ? S.value.yLabels.forEach((e, a) => {
-          a < S.value.yLabels.length - 1 && _e(
+          a < S.value.yLabels.length - 1 && Ze(
             u.value,
             [
               { x: l.value.left, y: e.y },
@@ -656,7 +656,7 @@ const $l = {
             }
           );
         }) : S.value.yLabels.forEach((e) => {
-          M(
+          I(
             u.value,
             [
               { x: l.value.left, y: e.y },
@@ -666,7 +666,7 @@ const $l = {
               color: t.value.style.chart.grid.x.horizontalLines.color
             }
           );
-        })), t.value.style.chart.grid.y.showAxis && M(
+        })), t.value.style.chart.grid.y.showAxis && I(
           u.value,
           [
             { x: l.value.left, y: l.value.top },
@@ -676,7 +676,7 @@ const $l = {
             color: t.value.style.chart.grid.y.axisColor,
             lineWidth: t.value.style.chart.grid.y.axisThickness
           }
-        ), t.value.style.chart.grid.x.showAxis && M(
+        ), t.value.style.chart.grid.x.showAxis && I(
           u.value,
           [
             { x: l.value.left, y: l.value.bottom },
@@ -686,7 +686,7 @@ const $l = {
             color: t.value.style.chart.grid.x.axisColor,
             lineWidth: t.value.style.chart.grid.x.axisThickness
           }
-        ), t.value.style.chart.grid.zeroLine.show && M(
+        ), t.value.style.chart.grid.zeroLine.show && I(
           u.value,
           [
             { x: l.value.left, y: S.value.zero },
@@ -851,7 +851,7 @@ const $l = {
         );
     }
     function at() {
-      M(
+      I(
         u.value,
         [
           { x: l.value.left + l.value.slot * h.value + l.value.slot / 2, y: l.value.top },
@@ -865,7 +865,7 @@ const $l = {
       );
     }
     function Ot() {
-      y.value && M(
+      y.value && I(
         u.value,
         [
           { x: l.value.left, y: y.value },
@@ -881,7 +881,7 @@ const $l = {
     function Dt() {
       N.value.forEach((e, a) => {
         for (let o = 0; o < e.coordinatesLine.length; o += 1)
-          _e(
+          Ze(
             u.value,
             [
               {
@@ -959,14 +959,14 @@ const $l = {
           fillColor: Me(e.color, t.value.style.chart.area.opacity),
           strokeColor: "transparent"
         }
-      ) : M(u.value, e.coordinatesLine, {
+      ) : I(u.value, e.coordinatesLine, {
         color: e.color,
         lineWidth: 3
       });
     }
     function At() {
       x.value.forEach((e, a) => {
-        M(
+        I(
           u.value,
           [
             { x: l.value.left, y: l.value.bottom - e.yOffset },
@@ -982,7 +982,7 @@ const $l = {
     function we() {
       Mt(), G.value ? (h.value !== null && t.value.style.chart.selector.show && at(), Dt(), s.value.stacked && t.value.style.chart.grid.x.showAxis && At(), St.value.forEach((e) => {
         (e.type === "line" || !e.type) && Et(e), re.value && (It(e), s.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Pt(e));
-      }), Le.value = dl(R.value)) : (Le.value && (u.value.clearRect(0, 0, 1e4, 1e4), u.value.drawImage(Le.value, 0, 0)), h.value !== null && t.value.style.chart.selector.show && at(), h.value !== null && x.value.forEach((e) => {
+      }), Le.value = dl(O.value)) : (Le.value && (u.value.clearRect(0, 0, 1e4, 1e4), u.value.drawImage(Le.value, 0, 0)), h.value !== null && t.value.style.chart.selector.show && at(), h.value !== null && x.value.forEach((e) => {
         if (e.type === "line" || !e.type || e.type === "plot") {
           if (!e.coordinatesLine[h.value]) return;
           e.coordinatesLine[h.value].x !== void 0 && e.coordinatesLine[h.value].y !== void 0 && gt(
@@ -1009,7 +1009,7 @@ const $l = {
       return { y: a, value: o };
     }
     function Nt(e) {
-      const { left: a, top: o } = R.value.getBoundingClientRect(), f = e.clientX - a;
+      const { left: a, top: o } = O.value.getBoundingClientRect(), f = e.clientX - a;
       if (y.value = (e.clientY - o) * 2, (y.value < l.value.top || y.value > l.value.bottom) && (y.value = null), f * 2 < l.value.left || f * 2 > l.value.right) {
         Q.value = !1, h.value = null;
         return;
@@ -1029,7 +1029,7 @@ const $l = {
         })),
         series: x.value,
         config: t.value
-      })) ? Z.value = g({
+      })) ? _.value = g({
         seriesIndex: h.value,
         datapoint: x.value.map((L) => ({
           shape: L.shape || null,
@@ -1040,7 +1040,7 @@ const $l = {
         })),
         series: x.value,
         config: t.value
-      }) : (t.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[h.value] && (Y += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[h.value]}</div>`), Y += wt.value.join(""), Z.value = Y), re.value = !1;
+      }) : (t.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[h.value] && (Y += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.grid.y.timeLabels.values.slice(r.value.start, r.value.end)[h.value]}</div>`), Y += wt.value.join(""), _.value = Y), re.value = !1;
     }
     te(() => h.value, (e) => {
       Re();
@@ -1056,19 +1056,19 @@ const $l = {
       G.value = !0, re.value = !0, Re();
     });
     function Yt() {
-      Q.value = !1, h.value = null, Z.value = "", y.value = null, we();
+      Q.value = !1, h.value = null, _.value = "", y.value = null, we();
     }
     const Oe = i(null), De = i(null);
-    Ze(() => {
+    _e(() => {
       He();
     });
     function He() {
       if (ol(m.dataset) ? rl({
         componentName: "VueUiXyCanvas",
         type: "dataset"
-      }) : R.value && (u.value = R.value.getContext("2d", { willReadFrequently: !0 })), t.value.responsive) {
-        const e = vl(() => {
-          const { width: a, height: o } = cl({
+      }) : O.value && (u.value = O.value.getContext("2d", { willReadFrequently: !0 })), t.value.responsive) {
+        const e = cl(() => {
+          const { width: a, height: o } = vl({
             chart: ae.value,
             title: t.value.style.chart.title.text ? Te.value : null,
             legend: t.value.style.chart.legend.show ? Fe.value : null,
@@ -1083,8 +1083,8 @@ const $l = {
       }
       De.value = new ResizeObserver((e) => {
         for (const a of e)
-          a.contentBoxSize && _.value && (G.value = !0, Re());
-      }), De.value.observe(_.value), lt();
+          a.contentBoxSize && Z.value && (G.value = !0, Re());
+      }), De.value.observe(Z.value), lt();
     }
     bt(() => {
       De.value && De.value.disconnect(), Oe.value && Oe.value.disconnect();
@@ -1092,10 +1092,10 @@ const $l = {
     function ot(e) {
       w("selectLegend", x.value.find((a) => a.absoluteIndex === e)), E.value.includes(e) ? E.value = E.value.filter((a) => a !== e) : E.value.push(e), G.value = !0, Re();
     }
-    const rt = I(() => ye.value.map((e, a) => ({
+    const rt = T(() => pe.value.map((e, a) => ({
       ...e,
       name: e.name,
-      color: ft(e.color) || Ke.value[a] || ce[a] || ce[a % ce.length],
+      color: ft(e.color) || Ke.value[a] || he[a] || he[a % he.length],
       shape: e.shape || "circle",
       prefix: e.prefix || "",
       suffix: e.suffix || "",
@@ -1105,14 +1105,14 @@ const $l = {
       opacity: E.value.includes(e.absoluteIndex) ? 0.5 : 1,
       segregate: () => ot(e.absoluteIndex),
       isSegregated: E.value.includes(e.absoluteIndex)
-    }))), Xt = I(() => ({
+    }))), Xt = T(() => ({
       cy: "donut-div-legend",
       backgroundColor: t.value.style.chart.legend.backgroundColor,
       color: t.value.style.chart.legend.color,
       fontSize: t.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
-    })), Ee = I(() => {
+    })), Ee = T(() => {
       const e = [""].concat(x.value.map((p) => p.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 p = 0; p < j.value; p += 1) {
@@ -1133,7 +1133,7 @@ const $l = {
         breakpoint: t.value.table.responsiveBreakpoint
       }, f = [t.value.table.columnNames.period].concat(x.value.map((p) => p.name)).concat(t.value.table.columnNames.total);
       return { head: e, body: a.slice(0, r.value.end - r.value.start), config: o, colNames: f };
-    }), nt = I(() => {
+    }), nt = T(() => {
       if (x.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
       const e = x.value.map((o) => ({
         label: o.name,
@@ -1161,10 +1161,10 @@ const $l = {
     function it() {
       s.value.showDataLabels = !s.value.showDataLabels;
     }
-    function vt() {
+    function ct() {
       s.value.stacked = !s.value.stacked;
     }
-    function ct() {
+    function vt() {
       s.value.showTooltip = !s.value.showTooltip;
     }
     const Ae = i(!1);
@@ -1178,17 +1178,17 @@ const $l = {
       generateImage: Je,
       toggleTable: ut,
       toggleLabels: it,
-      toggleStack: vt,
-      toggleTooltip: ct,
+      toggleStack: ct,
+      toggleTooltip: vt,
       toggleAnnotator: Ue
     }), (e, a) => (C(), X("div", {
       style: W(`width:100%; position:relative; ${t.value.responsive ? "height: 100%" : ""}`),
       ref_key: "xy",
       ref: ae,
       id: `xy_canvas_${V.value}`,
-      class: de(`vue-ui-donut ${fe.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      onMouseenter: a[5] || (a[5] = () => D(F)(!0)),
-      onMouseleave: a[6] || (a[6] = () => D(F)(!1))
+      class: fe(`vue-ui-donut ${ge.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      onMouseenter: a[5] || (a[5] = () => D(P)(!0)),
+      onMouseleave: a[6] || (a[6] = () => D(P)(!1))
     }, [
       t.value.style.chart.title.text ? (C(), X("div", {
         key: 0,
@@ -1197,7 +1197,7 @@ const $l = {
         style: W(`width:100%;background:${t.value.style.chart.backgroundColor};`)
       }, [
         (C(), ue(yl, {
-          key: `title_${v.value}`,
+          key: `title_${c.value}`,
           config: {
             title: {
               cy: "xy-canvas-title",
@@ -1210,7 +1210,7 @@ const $l = {
           }
         }, null, 8, ["config"]))
       ], 4)) : le("", !0),
-      t.value.userOptions.show && k.value && (D(P) || D(T)) ? (C(), ue(ml, {
+      t.value.userOptions.show && k.value && (D(R) || D(F)) ? (C(), ue(ml, {
         ref: "details",
         key: `user_option_${Ce.value}`,
         backgroundColor: t.value.style.chart.backgroundColor,
@@ -1226,7 +1226,7 @@ const $l = {
         hasStack: $.dataset.length > 1 && t.value.userOptions.buttons.stack,
         hasFullscreen: t.value.userOptions.buttons.fullscreen,
         hasTable: r.value.end - r.value.start < 200 && t.value.userOptions.buttons.table,
-        isFullscreen: fe.value,
+        isFullscreen: ge.value,
         isTooltip: s.value.showTooltip,
         isStacked: s.value.stacked,
         titles: { ...t.value.userOptions.buttonTitles },
@@ -1240,87 +1240,94 @@ const $l = {
         onGenerateImage: D(Je),
         onToggleTable: ut,
         onToggleLabels: it,
-        onToggleStack: vt,
-        onToggleTooltip: ct,
+        onToggleStack: ct,
+        onToggleTooltip: vt,
         onToggleAnnotator: Ue,
         style: W({
-          visibility: D(P) ? D(T) ? "visible" : "hidden" : "visible"
+          visibility: D(R) ? D(F) ? "visible" : "hidden" : "visible"
         })
-      }, Zt({ _: 2 }, [
+      }, _t({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: z(({ isOpen: o, color: f }) => [
+            M(e.$slots, "menuIcon", ve(de({ isOpen: o, color: f })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: z(() => [
-            O(e.$slots, "optionTooltip", {}, void 0, !0)
+            M(e.$slots, "optionTooltip", {}, void 0, !0)
           ]),
-          key: "0"
+          key: "1"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
           fn: z(() => [
-            O(e.$slots, "optionPdf", {}, void 0, !0)
+            M(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
-          key: "1"
+          key: "2"
         } : void 0,
         e.$slots.optionCsv ? {
           name: "optionCsv",
           fn: z(() => [
-            O(e.$slots, "optionCsv", {}, void 0, !0)
+            M(e.$slots, "optionCsv", {}, void 0, !0)
           ]),
-          key: "2"
+          key: "3"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
           fn: z(() => [
-            O(e.$slots, "optionImg", {}, void 0, !0)
+            M(e.$slots, "optionImg", {}, void 0, !0)
           ]),
-          key: "3"
+          key: "4"
         } : void 0,
         e.$slots.optionTable ? {
           name: "optionTable",
           fn: z(() => [
-            O(e.$slots, "optionTable", {}, void 0, !0)
+            M(e.$slots, "optionTable", {}, void 0, !0)
           ]),
-          key: "4"
+          key: "5"
         } : void 0,
         e.$slots.optionLabels ? {
           name: "optionLabels",
           fn: z(() => [
-            O(e.$slots, "optionLabels", {}, void 0, !0)
+            M(e.$slots, "optionLabels", {}, void 0, !0)
           ]),
-          key: "5"
+          key: "6"
         } : void 0,
         e.$slots.optionStack ? {
           name: "optionStack",
           fn: z(() => [
-            O(e.$slots, "optionStack", {}, void 0, !0)
+            M(e.$slots, "optionStack", {}, void 0, !0)
           ]),
-          key: "6"
+          key: "7"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: z(({ toggleFullscreen: o, isFullscreen: f }) => [
-            O(e.$slots, "optionFullscreen", pe(me({ toggleFullscreen: o, isFullscreen: f })), void 0, !0)
+            M(e.$slots, "optionFullscreen", ve(de({ toggleFullscreen: o, isFullscreen: f })), void 0, !0)
           ]),
-          key: "7"
+          key: "8"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: z(({ toggleAnnotator: o, isAnnotator: f }) => [
-            O(e.$slots, "optionAnnotator", pe(me({ toggleAnnotator: o, isAnnotator: f })), void 0, !0)
+            M(e.$slots, "optionAnnotator", ve(de({ toggleAnnotator: o, isAnnotator: f })), void 0, !0)
           ]),
-          key: "8"
+          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", "onGeneratePdf", "onGenerateImage", "style"])) : le("", !0),
       U("div", {
         class: "vue-ui-xy-canvas",
         style: W(`position: relative; aspect-ratio: ${Ge.value}`),
         ref_key: "container",
-        ref: _
+        ref: Z
       }, [
         k.value ? (C(), X("canvas", {
           key: 0,
           ref_key: "canvas",
-          ref: R,
+          ref: O,
           style: { width: "100%", height: "100%" },
           onMousemove: a[0] || (a[0] = (o) => Nt(o)),
           onMouseleave: Yt
@@ -1352,17 +1359,17 @@ const $l = {
           borderWidth: t.value.style.chart.tooltip.borderWidth,
           position: t.value.style.chart.tooltip.position,
           offsetY: t.value.style.chart.tooltip.offsetY,
-          parent: D(R),
-          content: Z.value,
-          isFullscreen: fe.value,
+          parent: D(O),
+          content: _.value,
+          isFullscreen: ge.value,
           backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
           isCustom: D(yt)(t.value.style.chart.tooltip.customFormat)
         }, {
           "tooltip-before": z(() => [
-            O(e.$slots, "tooltip-before", pe(me({ ...oe.value })), void 0, !0)
+            M(e.$slots, "tooltip-before", ve(de({ ...oe.value })), void 0, !0)
           ]),
           "tooltip-after": z(() => [
-            O(e.$slots, "tooltip-after", pe(me({ ...oe.value })), void 0, !0)
+            M(e.$slots, "tooltip-after", ve(de({ ...oe.value })), void 0, !0)
           ]),
           _: 3
         }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom"])
@@ -1375,8 +1382,8 @@ const $l = {
       }, [
         t.value.style.chart.zoom.show && j.value > 1 ? (C(), ue(gl, {
           ref_key: "slicerComponent",
-          ref: ge,
-          key: `slicer_${he.value}`,
+          ref: me,
+          key: `slicer_${ye.value}`,
           background: t.value.style.chart.zoom.color,
           borderColor: t.value.style.chart.backgroundColor,
           fontSize: t.value.style.chart.zoom.fontSize,
@@ -1401,7 +1408,7 @@ const $l = {
           onReset: tt
         }, {
           "reset-action": z(({ reset: o }) => [
-            O(e.$slots, "reset-action", pe(me({ reset: o })), void 0, !0)
+            M(e.$slots, "reset-action", ve(de({ 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"])) : le("", !0)
@@ -1413,7 +1420,7 @@ const $l = {
         t.value.style.chart.legend.show && k.value ? (C(), ue(fl, {
           legendSet: rt.value,
           config: Xt.value,
-          key: `legend_${c.value}`,
+          key: `legend_${v.value}`,
           onClickMarker: a[3] || (a[3] = ({ i: o }) => ot(o))
         }, {
           item: z(({ legend: o, index: f }) => [
@@ -1423,13 +1430,13 @@ const $l = {
             }, ht(o.name), 13, Ol)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : O(e.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : M(e.$slots, "legend", {
           key: 1,
           legend: rt.value
         }, void 0, !0)
       ], 512),
       e.$slots.watermark ? (C(), X("div", Dl, [
-        O(e.$slots, "watermark", pe(me({ isPrinting: D(je) || D(qe) })), void 0, !0)
+        M(e.$slots, "watermark", ve(de({ isPrinting: D(je) || D(qe) })), void 0, !0)
       ])) : le("", !0),
       e.$slots.source ? (C(), X("div", {
         key: 3,
@@ -1437,7 +1444,7 @@ const $l = {
         ref: d,
         dir: "auto"
       }, [
-        O(e.$slots, "source", {}, void 0, !0)
+        M(e.$slots, "source", {}, void 0, !0)
       ], 512)) : le("", !0),
       r.value.end - r.value.start < 200 ? (C(), ue(bl, {
         key: 4,
@@ -1486,7 +1493,7 @@ const $l = {
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : le("", !0)
     ], 46, Rl));
   }
-}, ta = /* @__PURE__ */ kt(Al, [["__scopeId", "data-v-35f76885"]]);
+}, ta = /* @__PURE__ */ kt(Al, [["__scopeId", "data-v-73b06dd8"]]);
 export {
   ta as default
 };