vue-data-ui 2.4.0 → 2.4.2

package/dist/{vue-ui-quadrant-IAIp5IZq.js → vue-ui-quadrant-DKVVFufb.js}

@@ -1,29 +1,30 @@
-import { computed as m, ref as h, watch as Me, onMounted as Ge, onBeforeUnmount as Qe, openBlock as o, createElementBlock as n, normalizeClass as T, normalizeStyle as _, createBlock as P, createCommentVNode as c, unref as y, createSlots as Je, withCtx as k, renderSlot as q, normalizeProps as ee, guardReactiveProps as te, createVNode as re, createElementVNode as v, Fragment as S, renderList as Y, toDisplayString as x, createTextVNode as je, nextTick as Ze } from "vue";
-import { u as Ke, c as Ne, t as et, a as tt, p as ne, o as lt, e as F, b as at, d as ut, i as A, f as V, X as ot, s as le, w as st, T as rt, F as nt, x as it, y as vt, q as dt, r as ct } from "./index-B0CpCD8z.js";
-import { t as ht, u as yt } from "./useResponsive-NZB-WLRF.js";
-import { _ as bt } from "./Title-DlVZnHjs.js";
-import { u as ft, U as pt } from "./usePrinter-Dr30K4cu.js";
-import { _ as gt } from "./Tooltip-CveCRFgK.js";
-import { _ as Ae } from "./Shape-CQVJz33T.js";
-import { L as mt } from "./Legend-DBhpIX2x.js";
-import { D as xt } from "./DataTable-DAgyf9zN.js";
-import $t from "./vue-ui-skeleton-DEv_1TFa.js";
-import kt from "./vue-ui-accordion-CmENcGVW.js";
-import { u as Ve } from "./useNestedProp-DGWP4D-K.js";
-import { _ as Lt } from "./PackageVersion-wB6dCDZw.js";
-import { _ as wt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-color"], zt = ["stop-color"], Tt = { key: 0 }, Wt = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], Xt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Yt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Mt = { key: 1 }, Nt = ["points", "fill"], At = ["points", "fill"], Vt = ["points", "fill"], Bt = ["points", "fill"], Pt = { key: 2 }, Rt = ["y", "fill", "font-size"], Ft = ["x", "y", "fill", "font-size"], Ot = ["x", "y", "fill", "font-size"], Ht = ["y", "fill", "font-size"], It = { key: 3 }, Dt = ["x", "y", "font-size", "fill"], Et = ["x", "y", "font-size", "fill"], Ut = ["x", "y", "font-size", "fill"], Gt = ["id", "font-size", "transform", "fill"], Qt = ["id", "font-size", "transform", "fill"], Jt = ["id", "font-size", "transform", "fill"], jt = { key: 4 }, Zt = ["fill", "points"], Kt = ["x", "y", "width", "height"], el = ["x", "y", "width", "height"], tl = ["x", "y", "width", "height"], ll = ["x", "y", "width", "height"], al = { key: 0 }, ul = ["x", "y", "font-size", "fill"], ol = { key: 0 }, sl = ["x", "y", "onMouseover", "onClick"], rl = {
+import { computed as m, ref as h, watch as Ne, onMounted as Je, onBeforeUnmount as je, openBlock as o, createElementBlock as n, normalizeClass as T, normalizeStyle as q, createBlock as N, createCommentVNode as c, unref as y, createSlots as Ze, withCtx as x, renderSlot as L, normalizeProps as G, guardReactiveProps as Q, createVNode as ie, createElementVNode as v, Fragment as C, renderList as Y, toDisplayString as $, createTextVNode as Ke, nextTick as et } from "vue";
+import { u as tt, c as Pe, t as lt, a as at, p as ve, o as ut, e as F, b as ot, d as st, i as P, f as V, X as rt, s as ae, w as nt, T as it, F as vt, x as dt, y as ct, q as ht, r as yt } from "./index-DnVHQ2xI.js";
+import { t as bt, u as ft } from "./useResponsive-NZB-WLRF.js";
+import { _ as pt } from "./Title-5VmBwT4i.js";
+import { u as gt, U as mt } from "./usePrinter-BEeNAqS5.js";
+import { _ as xt } from "./Tooltip-Cj4EF7v1.js";
+import { _ as Ve } from "./Shape-BpPn4eWR.js";
+import { L as $t } from "./Legend-CYF2gpXG.js";
+import { D as kt } from "./DataTable-DTk7C4Pr.js";
+import Lt from "./vue-ui-skeleton-aZmkNzAe.js";
+import wt from "./vue-ui-accordion-DspS4q3f.js";
+import { u as Be } from "./useNestedProp-Cox0K0Y5.js";
+import { _ as _t } from "./PackageVersion-CvCRsT5_.js";
+import { P as qt } from "./PenAndPaper-Jb0pLt3G.js";
+import { _ as Ct } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const St = ["id"], zt = ["xmlns", "viewBox", "id"], Tt = ["id"], Wt = ["stop-color"], Xt = ["stop-color"], Yt = { key: 0 }, At = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], Mt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Nt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Pt = { key: 1 }, Vt = ["points", "fill"], Bt = ["points", "fill"], Ot = ["points", "fill"], Rt = ["points", "fill"], Ft = { key: 2 }, Ht = ["y", "fill", "font-size"], It = ["x", "y", "fill", "font-size"], Dt = ["x", "y", "fill", "font-size"], Et = ["y", "fill", "font-size"], Ut = { key: 3 }, Gt = ["x", "y", "font-size", "fill"], Qt = ["x", "y", "font-size", "fill"], Jt = ["x", "y", "font-size", "fill"], jt = ["id", "font-size", "transform", "fill"], Zt = ["id", "font-size", "transform", "fill"], Kt = ["id", "font-size", "transform", "fill"], el = { key: 4 }, tl = ["fill", "points"], ll = ["x", "y", "width", "height"], al = ["x", "y", "width", "height"], ul = ["x", "y", "width", "height"], ol = ["x", "y", "width", "height"], sl = { key: 0 }, rl = ["x", "y", "font-size", "fill"], nl = { key: 0 }, il = ["x", "y", "onMouseover", "onClick"], vl = {
   key: 7,
   class: "vue-ui-dna"
-}, nl = ["points", "fill"], il = ["points", "fill"], vl = ["points", "fill"], dl = ["points", "fill"], cl = { key: 8 }, hl = ["x", "y", "font-size", "fill", "font-weight"], yl = { key: 9 }, bl = ["x", "y", "fill"], fl = ["x", "y", "fill"], pl = ["x", "y", "fill"], gl = ["x", "y", "fill"], ml = ["stroke", "d"], xl = ["stroke", "d"], $l = {
-  key: 3,
+}, dl = ["points", "fill"], cl = ["points", "fill"], hl = ["points", "fill"], yl = ["points", "fill"], bl = { key: 8 }, fl = ["x", "y", "font-size", "fill", "font-weight"], pl = { key: 9 }, gl = ["x", "y", "fill"], ml = ["x", "y", "fill"], xl = ["x", "y", "fill"], $l = ["x", "y", "fill"], kl = ["stroke", "d"], Ll = ["stroke", "d"], wl = {
+  key: 4,
   class: "vue-data-ui-watermark"
-}, kl = ["onClick"], Ll = {
+}, _l = ["onClick"], ql = {
   key: 0,
   height: "14",
   width: "14",
   viewBox: "0 0 20 20"
-}, wl = ["innerHTML"], _l = {
+}, Cl = ["innerHTML"], Sl = {
   __name: "vue-ui-quadrant",
   props: {
     config: {
@@ -40,30 +41,30 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
     }
   },
   emits: ["selectPlot", "selectSide", "selectLegend"],
-  setup(Be, { expose: Pe, emit: ae }) {
-    const W = Be, { vue_ui_quadrant: Re } = Ke(), G = m(() => !!W.dataset && W.dataset.length), z = h(Ne()), Fe = h(null), Q = h(!1), ue = h(""), ie = h(0), p = h(!1), O = h(null), ve = h(null), de = h(null), ce = h(0), he = h(0), ye = h(0), t = m({
-      get: () => be(),
+  setup(Oe, { expose: Re, emit: ue }) {
+    const W = Oe, { vue_ui_quadrant: Fe } = tt(), J = m(() => !!W.dataset && W.dataset.length), z = h(Pe()), He = h(null), j = h(!1), oe = h(""), de = h(0), p = h(!1), O = h(null), ce = h(null), he = h(null), ye = h(0), be = h(0), fe = h(0), t = m({
+      get: () => pe(),
       set: (l) => l
     });
-    function be() {
-      const l = Ve({
+    function pe() {
+      const l = Be({
         userConfig: W.config,
-        defaultConfig: Re
+        defaultConfig: Fe
       });
       return l.theme ? {
-        ...Ve({
-          userConfig: et.vue_ui_quadrant[l.theme] || W.config,
+        ...Be({
+          userConfig: lt.vue_ui_quadrant[l.theme] || W.config,
           defaultConfig: l
         }),
-        customPalette: tt[l.theme] || ne
+        customPalette: at[l.theme] || ve
       } : l;
     }
-    Me(() => W.config, (l) => {
-      t.value = be(), fe(), ce.value += 1, he.value += 1, ye.value += 1;
+    Ne(() => W.config, (l) => {
+      t.value = pe(), ge(), ye.value += 1, be.value += 1, fe.value += 1;
     }, { deep: !0 });
-    const J = h(null);
-    function fe() {
-      if (lt(W.dataset) ? F({
+    const Z = h(null);
+    function ge() {
+      if (ut(W.dataset) ? F({
         componentName: "VueUiQuadrant",
         type: "dataset"
       }) : W.dataset.forEach((l, u) => {
@@ -87,26 +88,26 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           });
         });
       }), t.value.responsive) {
-        const l = ht(() => {
-          const { width: u, height: a } = yt({
+        const l = bt(() => {
+          const { width: u, height: a } = ft({
             chart: O.value,
-            title: t.value.style.chart.title.text ? ve.value : null,
-            legend: t.value.style.chart.legend.show ? de.value : null
+            title: t.value.style.chart.title.text ? ce.value : null,
+            legend: t.value.style.chart.legend.show ? he.value : null
           });
           g.value = 48, e.value.height = a, e.value.usableHeight = a - g.value * 2, e.value.width = u, e.value.usableWidth = u - g.value * 2, e.value.top = g.value, e.value.left = g.value, e.value.right = u - g.value, e.value.bottom = a - g.value, e.value.centerX = u / 2, e.value.centerY = a - a / 2, e.value.padding = g.value;
         });
-        J.value = new ResizeObserver(l), J.value.observe(O.value.parentNode);
+        Z.value = new ResizeObserver(l), Z.value.observe(O.value.parentNode);
       }
     }
-    Ge(() => {
-      fe();
-    }), Qe(() => {
-      J.value && J.value.disconnect();
+    Je(() => {
+      ge();
+    }), je(() => {
+      Z.value && Z.value.disconnect();
     });
-    const { isPrinting: pe, isImaging: ge, generatePdf: me, generateImage: xe } = ft({
+    const { isPrinting: me, isImaging: xe, generatePdf: $e, generateImage: ke } = gt({
       elementId: `vue-ui-quadrant_${z.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-quadrant"
-    }), $e = m(() => at(t.value.customPalette)), L = h({
+    }), Le = m(() => ot(t.value.customPalette)), w = h({
       plotLabels: {
         show: t.value.style.chart.layout.labels.plotLabels.show
       },
@@ -129,7 +130,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
       startX: 0,
       startY: 0
     });
-    Me(() => e.value, (l) => {
+    Ne(() => e.value, (l) => {
       l && (d.value = {
         ...JSON.parse(JSON.stringify(e.value)),
         startX: 0,
@@ -177,7 +178,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         default:
           return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
       }
-    }), Oe = h(null), j = h(!1);
+    }), Ie = h(null), K = h(!1);
     function H({ targetX: l, targetY: u, targetW: a, targetH: s, side: r }) {
       i.value && E(r);
       const b = {
@@ -187,13 +188,13 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         h: s - d.value.height
       }, f = t.value.zoomAnimationFrames;
       let X = 0;
-      function Ye() {
-        j.value = !0, d.value.startX += b.x / f, d.value.startY += b.y / f, d.value.width += b.w / f, d.value.height += b.h / f, X += 1, X < f ? Oe.value = requestAnimationFrame(Ye) : j.value = !1;
+      function Me() {
+        K.value = !0, d.value.startX += b.x / f, d.value.startY += b.y / f, d.value.width += b.w / f, d.value.height += b.h / f, X += 1, X < f ? Ie.value = requestAnimationFrame(Me) : K.value = !1;
       }
-      Ye();
+      Me();
     }
-    function M(l) {
-      if (!j.value)
+    function A(l) {
+      if (!K.value)
         if (p.value && i.value === l)
           H({
             targetX: 0,
@@ -246,7 +247,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           p.value = !0;
         }
     }
-    const He = m(() => {
+    const De = m(() => {
       const l = t.value.style.chart.layout.grid.graduations.steps, u = e.value.usableWidth / (l * 2), a = e.value.top, s = [];
       for (let r = 0; r < l; r += 1)
         s.push({
@@ -257,7 +258,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           opacity: Math.round((r + 1) / l * 20)
         });
       return s;
-    }), w = m(() => {
+    }), _ = m(() => {
       let l = t.value.style.chart.layout.grid.xAxis.max, u = t.value.style.chart.layout.grid.xAxis.min, a = t.value.style.chart.layout.grid.yAxis.max, s = t.value.style.chart.layout.grid.yAxis.min;
       return t.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...R.value.flatMap((r) => r.series.map((b) => b.x))), u = Math.min(...R.value.flatMap((r) => r.series.map((b) => b.x)))), t.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...R.value.flatMap((r) => r.series.map((b) => b.y))), s = Math.min(...R.value.flatMap((r) => r.series.map((b) => b.y)))), {
         x: {
@@ -269,25 +270,25 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           min: s
         }
       };
-    }), N = h([]), R = m(() => W.dataset.map((l, u) => ({
+    }), M = h([]), R = m(() => W.dataset.map((l, u) => ({
       ...l,
       id: `cat_${u}_${z.value}`,
-      color: ut(l.color) || $e.value[u] || ne[u]
-    }))), Ie = m(() => R.value.filter((l) => !N.value.includes(l.id))), De = m(() => R.value.map((l, u) => ({
+      color: st(l.color) || Le.value[u] || ve[u]
+    }))), Ee = m(() => R.value.filter((l) => !M.value.includes(l.id))), Ue = m(() => R.value.map((l, u) => ({
       ...l,
       shape: l.shape || "circle",
       series: l.series.map((a) => ({
         ...a,
-        x: ke(a.x),
-        y: Le(a.y),
+        x: we(a.x),
+        y: _e(a.y),
         xValue: a.x,
         yValue: a.y,
-        quadrantSide: _e({ x: a.x, y: a.y }),
+        quadrantSide: Ce({ x: a.x, y: a.y }),
         categoryName: l.name,
         shape: l.shape,
         color: l.color
       }))
-    }))), C = m(() => (W.dataset.forEach((l, u) => {
+    }))), S = m(() => (W.dataset.forEach((l, u) => {
       l.series.forEach((a, s) => {
         [null, void 0].includes(a.x) && F({
           componentName: "VueUiQuadrant",
@@ -303,43 +304,43 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           index: s
         });
       });
-    }), Ie.value.map((l, u) => ({
+    }), Ee.value.map((l, u) => ({
       ...l,
       shape: l.shape || "circle",
-      color: l.color || $e.value[u] || ne[u],
+      color: l.color || Le.value[u] || ve[u],
       series: l.series.map((a) => ({
         ...a,
-        x: ke(a.x),
-        y: Le(a.y),
+        x: we(a.x),
+        y: _e(a.y),
         xValue: a.x,
         yValue: a.y,
-        quadrantSide: _e({ x: a.x, y: a.y }),
+        quadrantSide: Ce({ x: a.x, y: a.y }),
         categoryName: l.name,
         shape: l.shape,
         color: l.color,
-        uid: Ne()
+        uid: Pe()
       }))
     }))));
-    function ke(l) {
+    function we(l) {
       if (l >= 0) {
-        const u = l / w.value.x.max;
+        const u = l / _.value.x.max;
         return e.value.centerX + e.value.usableWidth / 2 * u;
       } else {
-        const u = Math.abs(l) / Math.abs(w.value.x.min);
+        const u = Math.abs(l) / Math.abs(_.value.x.min);
         return e.value.centerX - e.value.usableWidth / 2 * u;
       }
     }
-    function Le(l) {
+    function _e(l) {
       if (l >= 0) {
-        const u = l / w.value.y.max;
+        const u = l / _.value.y.max;
         return e.value.centerY + (1 - e.value.usableHeight / 2 * u);
       } else {
-        const u = Math.abs(l) / Math.abs(w.value.y.min);
+        const u = Math.abs(l) / Math.abs(_.value.y.min);
         return e.value.centerY - (1 - e.value.usableHeight / 2 * u);
       }
     }
-    const Z = m(() => {
-      const l = C.value.flatMap((f) => f.series.map((X) => ({
+    const ee = m(() => {
+      const l = S.value.flatMap((f) => f.series.map((X) => ({
         x: X.xValue,
         y: X.yValue,
         name: X.name,
@@ -353,15 +354,15 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         color: f.color
       }));
       return { head: s, body: r, itsShapes: b, tableData: l };
-    }), K = m(() => {
-      const l = Z.value.head, u = Z.value.tableData.map((s) => [
+    }), te = m(() => {
+      const l = ee.value.head, u = ee.value.tableData.map((s) => [
         {
           shape: s.shape,
           color: s.color,
           name: s.category
         },
         s.name,
-        A(
+        P(
           t.value.style.chart.layout.labels.plotLabels.x.formatter,
           s.x,
           V({
@@ -369,7 +370,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             r: t.value.style.chart.layout.labels.plotLabels.rounding
           })
         ),
-        A(
+        P(
           t.value.style.chart.layout.labels.plotLabels.y.formatter,
           s.y,
           V({
@@ -393,20 +394,20 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
       };
       return { head: l, body: u, config: a, colNames: l };
     });
-    function oe(l) {
-      N.value.includes(l) ? N.value = N.value.filter((a) => a !== l) : N.value.push(l);
-      const u = Ce();
-      ae("selectLegend", u);
+    function se(l) {
+      M.value.includes(l) ? M.value = M.value.filter((a) => a !== l) : M.value.push(l);
+      const u = Te();
+      ue("selectLegend", u);
     }
-    const we = m(() => De.value.map((l) => ({
+    const qe = m(() => Ue.value.map((l) => ({
       name: l.name,
       shape: l.shape,
       color: l.color,
       id: l.id,
-      opacity: N.value.includes(l.id) ? 0.5 : 1,
-      segregate: () => oe(l.id),
-      isSegregated: N.value.includes(l.id)
-    }))), Ee = m(() => ({
+      opacity: M.value.includes(l.id) ? 0.5 : 1,
+      segregate: () => se(l.id),
+      isSegregated: M.value.includes(l.id)
+    }))), Ge = m(() => ({
       cy: "quadrant-div-legend",
       backgroundColor: t.value.style.chart.legend.backgroundColor,
       color: t.value.style.chart.legend.color,
@@ -414,7 +415,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
       paddingBottom: 12,
       fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
     }));
-    function _e(l) {
+    function Ce(l) {
       switch (!0) {
         case (l.x >= 0 && l.y >= 0):
           return "tr";
@@ -428,33 +429,33 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           return "";
       }
     }
-    const I = h(null), D = h(null), se = h(null);
-    function qe(l, u, a) {
+    const I = h(null), D = h(null), re = h(null);
+    function Se(l, u, a) {
       I.value = u.uid, D.value = {
         color: l.color,
         shape: l.shape
-      }, se.value = {
+      }, re.value = {
         datapoint: u,
         seriesIndex: a,
-        series: C.value,
+        series: S.value,
         config: t.value
-      }, Q.value = !0;
+      }, j.value = !0;
       const s = t.value.style.chart.tooltip.customFormat;
-      if (it(s) && vt(() => s({
+      if (dt(s) && ct(() => s({
         seriesIndex: a,
         datapoint: u,
-        series: C.value,
+        series: S.value,
         config: t.value
       })))
-        ue.value = s({
+        oe.value = s({
           seriesIndex: a,
           datapoint: u,
-          series: C.value,
+          series: S.value,
           config: t.value
         });
       else {
         let r = "";
-        u.quadrantSide && (r += `<div style="color:${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].color};font-weight:${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].bold ? "bold" : "400"}">${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text}</div>`), r += `<div>${l.name}</div>`, r += `<div style="padding-bottom:6px;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};margin-bottom:3px">${u.name}</div>`, r += `<div>${t.value.style.chart.layout.grid.xAxis.name ? t.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${A(
+        u.quadrantSide && (r += `<div style="color:${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].color};font-weight:${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].bold ? "bold" : "400"}">${t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text}</div>`), r += `<div>${l.name}</div>`, r += `<div style="padding-bottom:6px;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};margin-bottom:3px">${u.name}</div>`, r += `<div>${t.value.style.chart.layout.grid.xAxis.name ? t.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${P(
           t.value.style.chart.layout.labels.plotLabels.x.formatter,
           u.xValue,
           V({
@@ -462,7 +463,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             r: t.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: u, category: l, categoryIndex: a }
-        )}</b></div>`, r += `<div>${t.value.style.chart.layout.grid.yAxis.name ? t.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${A(
+        )}</b></div>`, r += `<div>${t.value.style.chart.layout.grid.yAxis.name ? t.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${P(
           t.value.style.chart.layout.labels.plotLabels.y.formatter,
           u.yValue,
           V({
@@ -470,10 +471,10 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             r: t.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: u, category: l, categoryIndex: a }
-        )}</b></div>`, ue.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${r}</div>`;
+        )}</b></div>`, oe.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${r}</div>`;
       }
     }
-    function Se(l, u) {
+    function ze(l, u) {
       const a = {
         category: l.name,
         shape: l.shape,
@@ -483,11 +484,11 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         quadrantSide: u.quadrantSide,
         sideName: t.value.style.chart.layout.labels.quadrantLabels[u.quadrantSide].text
       };
-      ae("selectPlot", a);
+      ue("selectPlot", a);
     }
     function E(l) {
       if (!l) return;
-      const u = C.value.flatMap((s) => s.series.filter((r) => r.quadrantSide === l).map((r) => ({
+      const u = S.value.flatMap((s) => s.series.filter((r) => r.quadrantSide === l).map((r) => ({
         category: r.categoryName,
         itemName: r.name,
         x: r.xValue,
@@ -497,9 +498,9 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         sideName: t.value.style.chart.layout.labels.quadrantLabels[l].text,
         items: [...u]
       };
-      ae("selectSide", a);
+      ue("selectSide", a);
     }
-    const $ = m(() => ({
+    const k = m(() => ({
       TL: {
         tl: {
           x: e.value.left + e.value.usableWidth / 4 - 20,
@@ -605,8 +606,8 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         }
       }
     }));
-    function Ce() {
-      return C.value.map((l) => ({
+    function Te() {
+      return S.value.map((l) => ({
         color: l.color,
         name: l.name,
         shape: l.shape,
@@ -619,48 +620,61 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         }))
       }));
     }
-    function ze() {
-      Ze(() => {
-        const l = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], u = Z.value.head, a = Z.value.body, s = l.concat([u]).concat(a), r = dt(s);
-        ct({ csvContent: r, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
+    function We() {
+      et(() => {
+        const l = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], u = ee.value.head, a = ee.value.body, s = l.concat([u]).concat(a), r = ht(s);
+        yt({ csvContent: r, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
       });
     }
     const U = h(!1);
-    function Ue(l) {
-      U.value = l, ie.value += 1;
+    function Qe(l) {
+      U.value = l, de.value += 1;
     }
-    function Te() {
-      L.value.showTable = !L.value.showTable;
+    function Xe() {
+      w.value.showTable = !w.value.showTable;
     }
-    function We() {
-      L.value.plotLabels.show = !L.value.plotLabels.show;
+    function Ye() {
+      w.value.plotLabels.show = !w.value.plotLabels.show;
     }
-    function Xe() {
-      L.value.showTooltip = !L.value.showTooltip;
+    function Ae() {
+      w.value.showTooltip = !w.value.showTooltip;
+    }
+    const le = h(!1);
+    function ne() {
+      le.value = !le.value;
     }
-    return Pe({
-      getData: Ce,
-      generatePdf: me,
-      generateCsv: ze,
-      generateImage: xe,
-      toggleTable: Te,
-      toggleLabels: We,
-      toggleTooltip: Xe
+    return Re({
+      getData: Te,
+      generatePdf: $e,
+      generateCsv: We,
+      generateImage: ke,
+      toggleTable: Xe,
+      toggleLabels: Ye,
+      toggleTooltip: Ae,
+      toggleAnnotator: ne
     }), (l, u) => (o(), n("div", {
       class: T(`vue-ui-quadrant ${U.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "quadrantChart",
       ref: O,
       id: `vue-ui-quadrant_${z.value}`,
-      style: _(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;${t.value.style.chart.title.text ? "" : "padding-top: 36px"};background:${t.value.style.chart.backgroundColor};${t.value.responsive ? "height: 100%" : ""}`)
+      style: q(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;${t.value.style.chart.title.text ? "" : "padding-top: 36px"};background:${t.value.style.chart.backgroundColor};${t.value.responsive ? "height: 100%" : ""}`)
     }, [
-      t.value.style.chart.title.text ? (o(), n("div", {
+      t.value.userOptions.buttons.annotator ? (o(), N(qt, {
         key: 0,
+        parent: O.value,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        active: le.value,
+        onClose: ne
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : c("", !0),
+      t.value.style.chart.title.text ? (o(), n("div", {
+        key: 1,
         ref_key: "chartTitle",
-        ref: ve,
+        ref: ce,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (o(), P(bt, {
-          key: `table_${ce.value}`,
+        (o(), N(pt, {
+          key: `table_${ye.value}`,
           config: {
             title: {
               cy: "quadrant-title",
@@ -673,14 +687,14 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           }
         }, null, 8, ["config"]))
       ], 512)) : c("", !0),
-      t.value.userOptions.show && G.value ? (o(), P(pt, {
+      t.value.userOptions.show && J.value ? (o(), N(mt, {
         ref_key: "details",
-        ref: Fe,
-        key: `user_options_${ie.value}`,
+        ref: He,
+        key: `user_options_${de.value}`,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
-        isImaging: y(ge),
-        isPrinting: y(pe),
+        isImaging: y(xe),
+        isPrinting: y(me),
         uid: z.value,
         hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
         hasPdf: t.value.userOptions.buttons.pdf,
@@ -690,79 +704,89 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         hasLabel: t.value.userOptions.buttons.labels,
         hasFullscreen: t.value.userOptions.buttons.fullscreen,
         isFullscreen: U.value,
-        isTooltip: L.value.showTooltip,
+        isTooltip: w.value.showTooltip,
         titles: { ...t.value.userOptions.buttonTitles },
         chartElement: O.value,
         position: t.value.userOptions.position,
-        onToggleFullscreen: Ue,
-        onGeneratePdf: y(me),
-        onGenerateCsv: ze,
-        onGenerateImage: y(xe),
-        onToggleTable: Te,
-        onToggleLabels: We,
-        onToggleTooltip: Xe
-      }, Je({ _: 2 }, [
+        hasAnnotator: t.value.userOptions.buttons.annotator,
+        isAnnotation: le.value,
+        onToggleFullscreen: Qe,
+        onGeneratePdf: y($e),
+        onGenerateCsv: We,
+        onGenerateImage: y(ke),
+        onToggleTable: Xe,
+        onToggleLabels: Ye,
+        onToggleTooltip: Ae,
+        onToggleAnnotator: ne
+      }, Ze({ _: 2 }, [
         l.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: k(() => [
-            q(l.$slots, "optionTooltip", {}, void 0, !0)
+          fn: x(() => [
+            L(l.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         l.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: k(() => [
-            q(l.$slots, "optionPdf", {}, void 0, !0)
+          fn: x(() => [
+            L(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         l.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: k(() => [
-            q(l.$slots, "optionCsv", {}, void 0, !0)
+          fn: x(() => [
+            L(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         l.$slots.optionImg ? {
           name: "optionImg",
-          fn: k(() => [
-            q(l.$slots, "optionImg", {}, void 0, !0)
+          fn: x(() => [
+            L(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         l.$slots.optionTable ? {
           name: "optionTable",
-          fn: k(() => [
-            q(l.$slots, "optionTable", {}, void 0, !0)
+          fn: x(() => [
+            L(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         l.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: k(() => [
-            q(l.$slots, "optionLabels", {}, void 0, !0)
+          fn: x(() => [
+            L(l.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: k(({ toggleFullscreen: a, isFullscreen: s }) => [
-            q(l.$slots, "optionFullscreen", ee(te({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
+          fn: x(({ toggleFullscreen: a, isFullscreen: s }) => [
+            L(l.$slots, "optionFullscreen", G(Q({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
           ]),
           key: "6"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: x(({ toggleAnnotator: a, isAnnotator: s }) => [
+            L(l.$slots, "optionAnnotator", G(Q({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "7"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "onGeneratePdf", "onGenerateImage"])) : c("", !0),
-      G.value ? (o(), n("svg", {
-        key: 2,
-        xmlns: y(ot),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : c("", !0),
+      J.value ? (o(), n("svg", {
+        key: 3,
+        xmlns: y(rt),
         class: T({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
         viewBox: `${d.value.startX} ${d.value.startY} ${d.value.width} ${d.value.height}`,
-        style: _(`max-width:100%;overflow:${p.value ? "hidden" : "visible"};background:transparent;color:${t.value.style.chart.color}`),
+        style: q(`max-width:100%;overflow:${p.value ? "hidden" : "visible"};background:transparent;color:${t.value.style.chart.color}`),
         id: `svg_${z.value}`
       }, [
-        re(Lt),
+        ie(_t),
         v("defs", null, [
-          (o(!0), n(S, null, Y(C.value, (a, s) => (o(), n("radialGradient", {
+          (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
@@ -772,17 +796,17 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           }, [
             v("stop", {
               offset: "0%",
-              "stop-color": y(le)(y(st)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
-            }, null, 8, Ct),
+              "stop-color": y(ae)(y(nt)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
+            }, null, 8, Wt),
             v("stop", {
               offset: "100%",
-              "stop-color": y(le)(a.color, t.value.style.chart.layout.areas.opacity)
-            }, null, 8, zt)
-          ], 8, St))), 256))
+              "stop-color": y(ae)(a.color, t.value.style.chart.layout.areas.opacity)
+            }, null, 8, Xt)
+          ], 8, Tt))), 256))
         ]),
-        t.value.style.chart.layout.grid.graduations.show ? (o(), n("g", Tt, [
-          (o(!0), n(S, null, Y(He.value, (a) => (o(), n("rect", {
-            fill: t.value.style.chart.layout.grid.graduations.fill ? y(le)(t.value.style.chart.layout.grid.graduations.color, a.opacity) : "none",
+        t.value.style.chart.layout.grid.graduations.show ? (o(), n("g", Yt, [
+          (o(!0), n(C, null, Y(De.value, (a) => (o(), n("rect", {
+            fill: t.value.style.chart.layout.grid.graduations.fill ? y(ae)(t.value.style.chart.layout.grid.graduations.color, a.opacity) : "none",
             x: a.x,
             y: a.y,
             height: a.height <= 0 ? 1e-3 : a.height,
@@ -790,7 +814,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             "stroke-width": t.value.style.chart.layout.grid.graduations.strokeWidth,
             stroke: t.value.style.chart.layout.grid.graduations.stroke,
             rx: t.value.style.chart.layout.grid.graduations.roundingForce
-          }, null, 8, Wt))), 256))
+          }, null, 8, At))), 256))
         ])) : c("", !0),
         v("line", {
           x1: e.value.left,
@@ -799,7 +823,7 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           y2: e.value.centerY,
           stroke: t.value.style.chart.layout.grid.stroke,
           "stroke-width": t.value.style.chart.layout.grid.strokeWidth
-        }, null, 8, Xt),
+        }, null, 8, Mt),
         v("line", {
           x1: e.value.centerX,
           y1: e.value.top,
@@ -807,30 +831,30 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           y2: e.value.bottom,
           stroke: t.value.style.chart.layout.grid.stroke,
           "stroke-width": t.value.style.chart.layout.grid.strokeWidth
-        }, null, 8, Yt),
-        t.value.style.chart.layout.grid.showArrows ? (o(), n("g", Mt, [
+        }, null, 8, Nt),
+        t.value.style.chart.layout.grid.showArrows ? (o(), n("g", Pt, [
           v("polygon", {
             points: `${e.value.right - 8},${e.value.centerY - 6} ${e.value.right},${e.value.centerY} ${e.value.right - 8},${e.value.centerY + 6}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, Nt),
+          }, null, 8, Vt),
           v("polygon", {
             points: `${e.value.left + 8},${e.value.centerY - 6} ${e.value.left},${e.value.centerY} ${e.value.left + 8},${e.value.centerY + 6}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, At),
+          }, null, 8, Bt),
           v("polygon", {
             points: `${e.value.centerX - 6},${e.value.top + 8} ${e.value.centerX},${e.value.top} ${e.value.centerX + 6},${e.value.top + 8}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, Vt),
+          }, null, 8, Ot),
           v("polygon", {
             points: `${e.value.centerX - 6},${e.value.bottom - 8} ${e.value.centerX},${e.value.bottom} ${e.value.centerX + 6},${e.value.bottom - 8}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, Bt)
+          }, null, 8, Rt)
         ])) : c("", !0),
-        t.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (o(), n("g", Pt, [
+        t.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (o(), n("g", Ft, [
           t.value.style.chart.layout.labels.quadrantLabels.tl.text ? (o(), n("text", {
             key: 0,
             x: 0,
@@ -838,9 +862,9 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             "text-anchor": "start",
             fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
             onClick: u[0] || (u[0] = (a) => E("tl"))
-          }, x(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, Rt)) : c("", !0),
+          }, $(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, Ht)) : c("", !0),
           t.value.style.chart.layout.labels.quadrantLabels.tr.text ? (o(), n("text", {
             key: 1,
             x: e.value.width,
@@ -848,9 +872,9 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             "text-anchor": "end",
             fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
             onClick: u[1] || (u[1] = (a) => E("tr"))
-          }, x(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, Ft)) : c("", !0),
+          }, $(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, It)) : c("", !0),
           t.value.style.chart.layout.labels.quadrantLabels.br.text ? (o(), n("text", {
             key: 2,
             x: e.value.width,
@@ -858,9 +882,9 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             "text-anchor": "end",
             fill: t.value.style.chart.layout.labels.quadrantLabels.br.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
             onClick: u[2] || (u[2] = (a) => E("br"))
-          }, x(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, Ot)) : c("", !0),
+          }, $(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, Dt)) : c("", !0),
           t.value.style.chart.layout.labels.quadrantLabels.bl.text ? (o(), n("text", {
             key: 3,
             x: 0,
@@ -868,154 +892,154 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             "text-anchor": "start",
             fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
             onClick: u[3] || (u[3] = (a) => E("bl"))
-          }, x(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, Ht)) : c("", !0)
+          }, $(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, Et)) : c("", !0)
         ])) : c("", !0),
-        t.value.style.chart.layout.labels.axisLabels.show ? (o(), n("g", It, [
+        t.value.style.chart.layout.labels.axisLabels.show ? (o(), n("g", Ut, [
           v("text", {
             x: e.value.centerX,
             y: e.value.top - e.value.padding / 6,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
-          }, x(y(A)(
+          }, $(y(P)(
             t.value.style.chart.layout.labels.plotLabels.y.formatter,
-            w.value.y.max,
+            _.value.y.max,
             y(V)({
-              v: w.value.y.max,
+              v: _.value.y.max,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, Dt),
+          )), 9, Gt),
           v("text", {
             x: e.value.centerX,
             y: e.value.top - e.value.padding / 2,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
-          }, x(t.value.style.chart.layout.grid.yAxis.name), 9, Et),
+          }, $(t.value.style.chart.layout.grid.yAxis.name), 9, Qt),
           v("text", {
             x: e.value.centerX,
             y: e.value.bottom + e.value.padding * 0.35,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             fill: t.value.style.chart.layout.labels.axisLabels.color.negative
-          }, x(y(A)(
+          }, $(y(P)(
             t.value.style.chart.layout.labels.plotLabels.y.formatter,
-            w.value.y.min,
+            _.value.y.min,
             y(V)({
-              v: w.value.y.min,
+              v: _.value.y.min,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, Ut),
+          )), 9, Jt),
           v("text", {
             id: `xLabelMin_${z.value}`,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             transform: `translate(${e.value.padding - t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(-90)`,
             fill: t.value.style.chart.layout.labels.axisLabels.color.negative
-          }, x(y(A)(
+          }, $(y(P)(
             t.value.style.chart.layout.labels.plotLabels.x.formatter,
-            w.value.x.min,
+            _.value.x.min,
             y(V)({
-              v: w.value.x.min,
+              v: _.value.x.min,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, Gt),
+          )), 9, jt),
           v("text", {
             id: `xLabelMax_${z.value}`,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             transform: `translate(${e.value.width - e.value.padding + t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(90)`,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
-          }, x(y(A)(
+          }, $(y(P)(
             t.value.style.chart.layout.labels.plotLabels.x.formatter,
-            w.value.x.max,
+            _.value.x.max,
             y(V)({
-              v: w.value.x.max,
+              v: _.value.x.max,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, Qt),
+          )), 9, Zt),
           v("text", {
             id: `xLabelMaxName_${z.value}`,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             transform: `translate(${e.value.width - t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(90)`,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
-          }, x(t.value.style.chart.layout.grid.xAxis.name), 9, Jt)
+          }, $(t.value.style.chart.layout.grid.xAxis.name), 9, Kt)
         ])) : c("", !0),
-        t.value.style.chart.layout.areas.show ? (o(), n("g", jt, [
-          (o(!0), n(S, null, Y(C.value, (a, s) => (o(), n("g", null, [
+        t.value.style.chart.layout.areas.show ? (o(), n("g", el, [
+          (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n("g", null, [
             a.series.length > 2 ? (o(), n("polygon", {
               key: 0,
               "data-cy-quadrant-area": "",
-              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${z.value}_${s})` : y(le)(a.color, t.value.style.chart.layout.areas.opacity),
-              points: y(rt)(a)
-            }, null, 8, Zt)) : c("", !0)
+              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${z.value}_${s})` : y(ae)(a.color, t.value.style.chart.layout.areas.opacity),
+              points: y(it)(a)
+            }, null, 8, tl)) : c("", !0)
           ]))), 256))
         ])) : c("", !0),
         v("g", null, [
           v("rect", {
-            onClick: u[4] || (u[4] = (a) => M("TL")),
+            onClick: u[4] || (u[4] = (a) => A("TL")),
             x: e.value.left,
             y: e.value.top,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, Kt),
+          }, null, 10, ll),
           v("rect", {
-            onClick: u[5] || (u[5] = (a) => M("TR")),
+            onClick: u[5] || (u[5] = (a) => A("TR")),
             x: e.value.centerX,
             y: e.value.top,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, el),
+          }, null, 10, al),
           v("rect", {
-            onClick: u[6] || (u[6] = (a) => M("BR")),
+            onClick: u[6] || (u[6] = (a) => A("BR")),
             x: e.value.centerX,
             y: e.value.centerY,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, tl),
+          }, null, 10, ul),
           v("rect", {
-            onClick: u[7] || (u[7] = (a) => M("BL")),
+            onClick: u[7] || (u[7] = (a) => A("BL")),
             x: e.value.left,
             y: e.value.centerY,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, ll)
+          }, null, 10, ol)
         ]),
-        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (o(), n(S, { key: 6 }, [
-          L.value.plotLabels.show ? (o(), n("g", ol, [
-            (o(!0), n(S, null, Y(C.value, (a, s) => (o(), n(S, null, [
-              (o(!0), n(S, null, Y(a.series, (r) => (o(), n("foreignObject", {
+        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (o(), n(C, { key: 6 }, [
+          w.value.plotLabels.show ? (o(), n("g", nl, [
+            (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n(C, null, [
+              (o(!0), n(C, null, Y(a.series, (r) => (o(), n("foreignObject", {
                 style: { overflow: "visible" },
                 height: "10",
                 width: "100",
                 x: r.x - 50,
                 y: r.y - t.value.style.chart.layout.labels.plotLabels.fontSize,
-                onMouseover: (b) => qe(a, r, s),
+                onMouseover: (b) => Se(a, r, s),
                 onMouseleave: u[9] || (u[9] = (b) => {
-                  Q.value = !1, I.value = null, D.value = null;
+                  j.value = !1, I.value = null, D.value = null;
                 }),
-                onClick: (b) => Se(a, r)
+                onClick: (b) => ze(a, r)
               }, [
                 v("div", {
-                  style: _(`color:${y(nt)(a.color)};margin: 0 auto; font-size:${t.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: ${t.value.style.chart.layout.labels.plotLabels.fontSize * 1.5}px`)
-                }, x(r.name), 5)
-              ], 40, sl))), 256))
+                  style: q(`color:${y(vt)(a.color)};margin: 0 auto; font-size:${t.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: ${t.value.style.chart.layout.labels.plotLabels.fontSize * 1.5}px`)
+                }, $(r.name), 5)
+              ], 40, il))), 256))
             ], 64))), 256))
           ])) : c("", !0)
-        ], 64)) : (o(), n(S, { key: 5 }, [
-          (o(!0), n(S, null, Y(C.value, (a, s) => (o(), n("g", null, [
-            (o(!0), n(S, null, Y(a.series, (r) => (o(), P(Ae, {
+        ], 64)) : (o(), n(C, { key: 5 }, [
+          (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n("g", null, [
+            (o(!0), n(C, null, Y(a.series, (r) => (o(), N(Ve, {
               color: a.color,
               isSelected: I.value && r.uid === I.value,
               plot: r,
@@ -1023,52 +1047,52 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
               shape: a.shape,
               stroke: t.value.style.chart.layout.plots.outline ? t.value.style.chart.layout.plots.outlineColor : "none",
               strokeWidth: t.value.style.chart.layout.plots.outlineWidth,
-              onMouseover: (b) => qe(a, r, s),
+              onMouseover: (b) => Se(a, r, s),
               onMouseleave: u[8] || (u[8] = (b) => {
-                Q.value = !1, I.value = null, D.value = null;
+                j.value = !1, I.value = null, D.value = null;
               }),
-              onClick: (b) => Se(a, r)
+              onClick: (b) => ze(a, r)
             }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseover", "onClick"]))), 256))
           ]))), 256)),
-          L.value.plotLabels.show ? (o(), n("g", al, [
-            (o(!0), n(S, null, Y(C.value, (a) => (o(), n("g", null, [
-              (o(!0), n(S, null, Y(a.series, (s) => (o(), n("text", {
+          w.value.plotLabels.show ? (o(), n("g", sl, [
+            (o(!0), n(C, null, Y(S.value, (a) => (o(), n("g", null, [
+              (o(!0), n(C, null, Y(a.series, (s) => (o(), n("text", {
                 x: s.x,
                 y: s.y + t.value.style.chart.layout.labels.plotLabels.offsetY + t.value.style.chart.layout.plots.radius,
                 "text-anchor": "middle",
                 "font-size": t.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
                 fill: t.value.style.chart.layout.labels.plotLabels.color
-              }, x(s.name), 9, ul))), 256))
+              }, $(s.name), 9, rl))), 256))
             ]))), 256))
           ])) : c("", !0)
         ], 64)),
-        p.value ? (o(), n("g", rl, [
+        p.value ? (o(), n("g", vl, [
           i.value === "TL" ? (o(), n("polygon", {
             key: 0,
             points: `${e.value.left - 1},${e.value.centerY} ${e.value.centerX},${e.value.centerY} ${e.value.centerX},${e.value.top - 1} ${e.value.right},${e.value.top - 1} ${e.value.right},${e.value.bottom} ${e.value.left - 1},${e.value.bottom} ${e.value.left - 1},${e.value.centerY}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, nl)) : c("", !0),
+          }, null, 8, dl)) : c("", !0),
           i.value === "TR" ? (o(), n("polygon", {
             key: 1,
             points: `${e.value.left},${e.value.top - 1} ${e.value.centerX},${e.value.top - 1} ${e.value.centerX},${e.value.centerY} ${e.value.right + 1},${e.value.centerY} ${e.value.right + 1},${e.value.bottom} ${e.value.left},${e.value.bottom} ${e.value.left},${e.value.top - 1}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, il)) : c("", !0),
+          }, null, 8, cl)) : c("", !0),
           i.value === "BR" ? (o(), n("polygon", {
             key: 2,
             points: `${e.value.left},${e.value.top} ${e.value.right + 1},${e.value.top} ${e.value.right + 1},${e.value.centerY} ${e.value.centerX},${e.value.centerY} ${e.value.centerX},${e.value.bottom + 1} ${e.value.left},${e.value.bottom + 1} ${e.value.left},${e.value.top}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, vl)) : c("", !0),
+          }, null, 8, hl)) : c("", !0),
           i.value === "BL" ? (o(), n("polygon", {
             key: 3,
             points: `${e.value.left - 1},${e.value.top} ${e.value.right},${e.value.top} ${e.value.right},${e.value.bottom + 1} ${e.value.centerX},${e.value.bottom + 1} ${e.value.centerX},${e.value.centerY} ${e.value.left - 1},${e.value.centerY} ${e.value.left - 1},${e.value.top}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, dl)) : c("", !0)
+          }, null, 8, yl)) : c("", !0)
         ])) : c("", !0),
-        i.value && !j.value ? (o(), n("g", cl, [
+        i.value && !K.value ? (o(), n("g", bl, [
           v("text", {
             x: B.value.x,
             y: B.value.y - B.value.fontSize / 1.5,
@@ -1076,69 +1100,69 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
             fill: B.value.fill,
             "text-anchor": "middle",
             "font-weight": B.value.bold ? "bold" : "normal"
-          }, x(B.value.text), 9, hl)
+          }, $(B.value.text), 9, fl)
         ])) : c("", !0),
-        p.value && i.value ? (o(), n("g", yl, [
+        p.value && i.value ? (o(), n("g", pl, [
           v("rect", {
-            x: $.value[i.value].tl.x,
-            y: $.value[i.value].tl.y,
+            x: k.value[i.value].tl.x,
+            y: k.value[i.value].tl.y,
             height: "20",
             width: "20",
-            fill: $.value[i.value].tl.fill,
-            style: _(`cursor: pointer; opacity: ${i.value === "TL" ? 1 : 0.2}`),
-            onClick: u[10] || (u[10] = (a) => M("TL")),
+            fill: k.value[i.value].tl.fill,
+            style: q(`cursor: pointer; opacity: ${i.value === "TL" ? 1 : 0.2}`),
+            onClick: u[10] || (u[10] = (a) => A("TL")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": i.value !== "TL" })
-          }, null, 14, bl),
+          }, null, 14, gl),
           v("rect", {
-            x: $.value[i.value].tr.x,
-            y: $.value[i.value].tr.y,
+            x: k.value[i.value].tr.x,
+            y: k.value[i.value].tr.y,
             height: "20",
             width: "20",
-            fill: $.value[i.value].tr.fill,
-            style: _(`cursor: pointer; opacity: ${i.value === "TR" ? 1 : 0.2}`),
-            onClick: u[11] || (u[11] = (a) => M("TR")),
+            fill: k.value[i.value].tr.fill,
+            style: q(`cursor: pointer; opacity: ${i.value === "TR" ? 1 : 0.2}`),
+            onClick: u[11] || (u[11] = (a) => A("TR")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": i.value !== "TR" })
-          }, null, 14, fl),
+          }, null, 14, ml),
           v("rect", {
-            x: $.value[i.value].br.x,
-            y: $.value[i.value].br.y,
+            x: k.value[i.value].br.x,
+            y: k.value[i.value].br.y,
             height: "20",
             width: "20",
-            fill: $.value[i.value].br.fill,
-            style: _(`cursor: pointer; opacity: ${i.value === "BR" ? 1 : 0.2}`),
-            onClick: u[12] || (u[12] = (a) => M("BR")),
+            fill: k.value[i.value].br.fill,
+            style: q(`cursor: pointer; opacity: ${i.value === "BR" ? 1 : 0.2}`),
+            onClick: u[12] || (u[12] = (a) => A("BR")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": i.value !== "BR" })
-          }, null, 14, pl),
+          }, null, 14, xl),
           v("rect", {
-            x: $.value[i.value].bl.x,
-            y: $.value[i.value].bl.y,
+            x: k.value[i.value].bl.x,
+            y: k.value[i.value].bl.y,
             height: "20",
             width: "20",
-            fill: $.value[i.value].bl.fill,
-            style: _(`cursor: pointer; opacity: ${i.value === "BL" ? 1 : 0.2}`),
-            onClick: u[13] || (u[13] = (a) => M("BL")),
+            fill: k.value[i.value].bl.fill,
+            style: q(`cursor: pointer; opacity: ${i.value === "BL" ? 1 : 0.2}`),
+            onClick: u[13] || (u[13] = (a) => A("BL")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": i.value !== "BL" })
-          }, null, 14, gl),
+          }, null, 14, $l),
           v("path", {
             class: "vue-ui-quadrant-minimap-crosshairs",
             stroke: t.value.style.chart.backgroundColor,
             "stroke-width": 1,
-            d: $.value[i.value].crosshairs.horizontal
-          }, null, 8, ml),
+            d: k.value[i.value].crosshairs.horizontal
+          }, null, 8, kl),
           v("path", {
             class: "vue-ui-quadrant-minimap-crosshairs",
             stroke: t.value.style.chart.backgroundColor,
             "stroke-width": 1,
-            d: $.value[i.value].crosshairs.vertical
-          }, null, 8, xl)
+            d: k.value[i.value].crosshairs.vertical
+          }, null, 8, Ll)
         ])) : c("", !0),
-        q(l.$slots, "svg", { svg: e.value }, void 0, !0)
-      ], 14, qt)) : c("", !0),
-      l.$slots.watermark ? (o(), n("div", $l, [
-        q(l.$slots, "watermark", ee(te({ isPrinting: y(pe) || y(ge) })), void 0, !0)
+        L(l.$slots, "svg", { svg: e.value }, void 0, !0)
+      ], 14, zt)) : c("", !0),
+      l.$slots.watermark ? (o(), n("div", wl, [
+        L(l.$slots, "watermark", G(Q({ isPrinting: y(me) || y(xe) })), void 0, !0)
       ])) : c("", !0),
-      G.value ? c("", !0) : (o(), P($t, {
-        key: 4,
+      J.value ? c("", !0) : (o(), N(Lt, {
+        key: 5,
         config: {
           type: "quadrant",
           style: {
@@ -1157,29 +1181,29 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
       }, null, 8, ["config"])),
       v("div", {
         ref_key: "chartLegend",
-        ref: de
+        ref: he
       }, [
-        t.value.style.chart.legend.show ? (o(), P(mt, {
-          key: `legend_${ye.value}`,
-          legendSet: we.value,
-          config: Ee.value,
-          onClickMarker: u[14] || (u[14] = ({ legend: a }) => oe(a.id))
+        t.value.style.chart.legend.show ? (o(), N($t, {
+          key: `legend_${fe.value}`,
+          legendSet: qe.value,
+          config: Ge.value,
+          onClickMarker: u[14] || (u[14] = ({ legend: a }) => se(a.id))
         }, {
-          item: k(({ legend: a }) => [
+          item: x(({ legend: a }) => [
             v("div", {
               "data-cy-legend-item": "",
-              onClick: (s) => oe(a.id),
-              style: _(`opacity:${N.value.includes(a.id) ? 0.5 : 1}`)
-            }, x(a.name), 13, kl)
+              onClick: (s) => se(a.id),
+              style: q(`opacity:${M.value.includes(a.id) ? 0.5 : 1}`)
+            }, $(a.name), 13, _l)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : q(l.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : L(l.$slots, "legend", {
           key: 1,
-          legend: we.value
+          legend: qe.value
         }, void 0, !0)
       ], 512),
-      re(gt, {
-        show: L.value.showTooltip && Q.value,
+      ie(xt, {
+        show: w.value.showTooltip && j.value,
         backgroundColor: t.value.style.chart.tooltip.backgroundColor,
         color: t.value.style.chart.tooltip.color,
         borderRadius: t.value.style.chart.tooltip.borderRadius,
@@ -1190,18 +1214,18 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         position: t.value.style.chart.tooltip.position,
         offsetY: t.value.style.chart.tooltip.offsetY,
         parent: O.value,
-        content: ue.value,
+        content: oe.value,
         isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function"
       }, {
-        "tooltip-before": k(() => [
-          q(l.$slots, "tooltip-before", ee(te({ ...se.value })), void 0, !0)
+        "tooltip-before": x(() => [
+          L(l.$slots, "tooltip-before", G(Q({ ...re.value })), void 0, !0)
         ]),
-        "tooltip-after": k(() => [
-          q(l.$slots, "tooltip-after", ee(te({ ...se.value })), void 0, !0)
+        "tooltip-after": x(() => [
+          L(l.$slots, "tooltip-after", G(Q({ ...re.value })), void 0, !0)
         ]),
-        default: k(() => [
-          t.value.style.chart.tooltip.showShape ? (o(), n("svg", Ll, [
-            re(Ae, {
+        default: x(() => [
+          t.value.style.chart.tooltip.showShape ? (o(), n("svg", ql, [
+            ie(Ve, {
               plot: { x: 10, y: 10 },
               shape: D.value.shape,
               color: D.value.color,
@@ -1213,11 +1237,11 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      G.value ? (o(), P(kt, {
-        key: 5,
+      J.value ? (o(), N(wt, {
+        key: 6,
         hideDetails: "",
         config: {
-          open: L.value.showTable,
+          open: w.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: t.value.style.chart.backgroundColor,
@@ -1229,32 +1253,32 @@ const _t = ["id"], qt = ["xmlns", "viewBox", "id"], St = ["id"], Ct = ["stop-col
           }
         }
       }, {
-        content: k(() => [
-          (o(), P(xt, {
-            key: `table_${he.value}`,
-            colNames: K.value.colNames,
-            head: K.value.head,
-            body: K.value.body,
-            config: K.value.config,
+        content: x(() => [
+          (o(), N(kt, {
+            key: `table_${be.value}`,
+            colNames: te.value.colNames,
+            head: te.value.head,
+            body: te.value.body,
+            config: te.value.config,
             title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: u[15] || (u[15] = (a) => L.value.showTable = !1)
+            onClose: u[15] || (u[15] = (a) => w.value.showTable = !1)
           }, {
-            th: k(({ th: a }) => [
-              je(x(a), 1)
+            th: x(({ th: a }) => [
+              Ke($(a), 1)
             ]),
-            td: k(({ td: a }) => [
+            td: x(({ td: a }) => [
               v("div", {
                 innerHTML: a.name || a
-              }, null, 8, wl)
+              }, null, 8, Cl)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : c("", !0)
-    ], 14, _t));
+    ], 14, St));
   }
-}, Rl = /* @__PURE__ */ wt(_l, [["__scopeId", "data-v-5ecb2dd2"]]);
+}, Il = /* @__PURE__ */ Ct(Sl, [["__scopeId", "data-v-cf6ceba3"]]);
 export {
-  Rl as default
+  Il as default
 };