vue-data-ui 2.14.2 → 2.14.3-beta.1

package/dist/{vue-ui-quadrant--xMPLV7W.js → vue-ui-quadrant-B3HOf0aF.js}

@@ -1,29 +1,29 @@
-import { defineAsyncComponent as B, computed as g, ref as y, watch as Ie, shallowRef as Ee, onMounted as yt, onBeforeUnmount as bt, createElementBlock as n, openBlock as o, unref as i, normalizeStyle as q, normalizeClass as T, createBlock as O, createCommentVNode as h, createElementVNode as c, createVNode as ce, createSlots as ft, withCtx as m, renderSlot as x, normalizeProps as E, guardReactiveProps as U, Fragment as C, renderList as Y, toDisplayString as L, createTextVNode as pt, nextTick as gt } from "vue";
-import { u as mt, c as Ue, t as xt, p as he, a as $t, o as kt, e as D, b as Lt, d as wt, W as qt, i as R, f as V, X as _t, s as oe, w as Ct, Y as St, G as zt, q as Tt, r as Wt, x as Xt, y as Yt } from "./index-DBYSSUsg.js";
-import { t as At, u as Mt } from "./useResponsive-JZ9xq-JV.js";
-import { u as De } from "./useNestedProp-Cu77c3W4.js";
-import { u as Nt } from "./usePrinter-xF9W73YL.js";
-import { u as Ot } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Rt } from "./useChartAccessibility-9icAAmYg.js";
-import Vt from "./Title-xtSGHclp.js";
-import Pt from "./Legend-DLJ9I-cg.js";
-import { _ as Ge } from "./Shape-DdpwkHh8.js";
-import { _ as Bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "height"], Et = ["id"], Ut = ["stop-color"], Dt = ["stop-color"], Gt = { key: 1 }, Qt = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], Jt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], jt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Zt = { key: 2 }, Kt = ["points", "fill"], el = ["points", "fill"], tl = ["points", "fill"], ll = ["points", "fill"], al = { key: 3 }, ul = ["y", "fill", "font-size"], ol = ["x", "y", "fill", "font-size"], sl = ["x", "y", "fill", "font-size"], rl = ["y", "fill", "font-size"], nl = { key: 4 }, il = ["x", "y", "font-size", "fill"], vl = ["x", "y", "font-size", "fill"], dl = ["x", "y", "font-size", "fill"], cl = ["id", "font-size", "transform", "fill"], hl = ["id", "font-size", "transform", "fill"], yl = ["id", "font-size", "transform", "fill"], bl = { key: 5 }, fl = ["fill", "points"], pl = ["x", "y", "width", "height"], gl = ["x", "y", "width", "height"], ml = ["x", "y", "width", "height"], xl = ["x", "y", "width", "height"], $l = {
+import { defineAsyncComponent as B, computed as g, ref as y, watch as Ie, shallowRef as Ee, onMounted as yt, onBeforeUnmount as bt, createElementBlock as r, openBlock as s, unref as i, normalizeStyle as q, normalizeClass as T, createBlock as O, createCommentVNode as h, createElementVNode as c, createVNode as ce, createSlots as ft, withCtx as m, renderSlot as x, normalizeProps as E, guardReactiveProps as U, Fragment as S, renderList as Y, toDisplayString as L, createTextVNode as pt, nextTick as gt } from "vue";
+import { u as mt, c as Ue, t as xt, p as he, a as $t, o as kt, e as D, b as Lt, d as wt, Y as qt, i as R, f as V, X as _t, s as oe, w as St, Z as Ct, I as zt, G as Tt, q as Xt, r as Wt, x as Yt, y as At } from "./index-DpgjO9No.js";
+import { t as Mt, u as Nt } from "./useResponsive-JZ9xq-JV.js";
+import { u as De } from "./useNestedProp-BS0-lsm3.js";
+import { u as Ot } from "./usePrinter-EqGRLYQ_.js";
+import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
+import Pt from "./Title-Be-4IBib.js";
+import Bt from "./Legend-XakQeDJw.js";
+import { _ as Ge } from "./Shape-D_nY-zV8.js";
+import { _ as Ft } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ht = ["id"], It = ["xmlns", "viewBox", "id"], Et = ["x", "y", "width", "height"], Ut = ["id"], Dt = ["stop-color"], Gt = ["stop-color"], Qt = { key: 1 }, Jt = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], jt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Zt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Kt = { key: 2 }, el = ["points", "fill"], tl = ["points", "fill"], ll = ["points", "fill"], al = ["points", "fill"], ul = { key: 3 }, ol = ["y", "fill", "font-size"], sl = ["x", "y", "fill", "font-size"], rl = ["x", "y", "fill", "font-size"], nl = ["y", "fill", "font-size"], il = { key: 4 }, vl = ["x", "y", "font-size", "fill"], dl = ["x", "y", "font-size", "fill"], cl = ["x", "y", "font-size", "fill"], hl = ["id", "font-size", "transform", "fill"], yl = ["id", "font-size", "transform", "fill"], bl = ["id", "font-size", "transform", "fill"], fl = { key: 5 }, pl = ["fill", "points"], gl = ["x", "y", "width", "height"], ml = ["x", "y", "width", "height"], xl = ["x", "y", "width", "height"], $l = ["x", "y", "width", "height"], kl = {
   key: 0,
   style: { "pointer-events": "none" }
-}, kl = ["x", "y", "font-size", "fill"], Ll = { key: 0 }, wl = ["x", "y", "onMouseover", "onClick"], ql = {
+}, Ll = ["x", "y", "font-size", "fill"], wl = ["x", "y", "font-size", "fill", "innerHTML"], ql = { key: 0 }, _l = ["x", "y", "onMouseover", "onClick"], Sl = {
   key: 8,
   class: "vue-ui-dna"
-}, _l = ["points", "fill"], Cl = ["points", "fill"], Sl = ["points", "fill"], zl = ["points", "fill"], Tl = { key: 9 }, Wl = ["x", "y", "font-size", "fill", "font-weight"], Xl = { key: 10 }, Yl = ["x", "y", "fill"], Al = ["x", "y", "fill"], Ml = ["x", "y", "fill"], Nl = ["x", "y", "fill"], Ol = ["stroke", "d"], Rl = ["stroke", "d"], Vl = {
+}, Cl = ["points", "fill"], zl = ["points", "fill"], Tl = ["points", "fill"], Xl = ["points", "fill"], Wl = { key: 9 }, Yl = ["x", "y", "font-size", "fill", "font-weight"], Al = { key: 10 }, Ml = ["x", "y", "fill"], Nl = ["x", "y", "fill"], Ol = ["x", "y", "fill"], Rl = ["x", "y", "fill"], Vl = ["stroke", "d"], Pl = ["stroke", "d"], Bl = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Pl = ["onClick"], Bl = {
+}, Fl = ["onClick"], Hl = {
   key: 0,
   height: "14",
   width: "14",
   viewBox: "0 0 20 20"
-}, Fl = ["innerHTML"], Hl = {
+}, Il = ["innerHTML"], El = {
   __name: "vue-ui-quadrant",
   props: {
     config: {
@@ -41,32 +41,32 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
   },
   emits: ["selectPlot", "selectSide", "selectLegend"],
   setup(Qe, { expose: Je, emit: je }) {
-    const Ze = B(() => import("./DataTable-DzCoab4C.js")), Ke = B(() => import("./PenAndPaper-BdnVqpO9.js")), et = B(() => import("./vue-ui-accordion-CEZHj_of.js")), tt = B(() => import("./vue-ui-skeleton-BJy7bURO.js")), lt = B(() => import("./Tooltip-D8swCIay.js")), at = B(() => import("./UserOptions-BbJkNcCM.js")), ut = B(() => import("./PackageVersion-DrhYhyQR.js")), { vue_ui_quadrant: ot } = mt(), W = Qe, K = g(() => !!W.dataset && W.dataset.length), z = y(Ue()), se = je, st = y(null), ee = y(!1), re = y(""), ye = y(0), p = y(!1), G = y(null), be = y(null), fe = y(null), pe = y(null), ge = y(null), me = y(0), xe = y(0), $e = y(0), t = g({
+    const Ze = B(() => import("./DataTable-CQHjdD9t.js")), Ke = B(() => import("./PenAndPaper-C49A3fVl.js")), et = B(() => import("./vue-ui-accordion-B7SuIgFc.js")), tt = B(() => import("./vue-ui-skeleton-C-ca3jum.js")), lt = B(() => import("./Tooltip-B4lRAXc3.js")), at = B(() => import("./UserOptions-CZOjPjId.js")), ut = B(() => import("./PackageVersion-mH9eFSdi.js")), { vue_ui_quadrant: ot } = mt(), X = Qe, K = g(() => !!X.dataset && X.dataset.length), z = y(Ue()), se = je, st = y(null), ee = y(!1), re = y(""), ye = y(0), f = y(!1), G = y(null), be = y(null), fe = y(null), pe = y(null), ge = y(null), me = y(0), xe = y(0), $e = y(0), t = g({
       get: () => qe(),
       set: (l) => l
-    }), { userOptionsVisible: ne, setUserOptionsVisibility: ke, keepUserOptionState: Le } = Ot({ config: t.value }), { svgRef: we } = Rt({ config: t.value.style.chart.title });
+    }), { userOptionsVisible: ne, setUserOptionsVisibility: ke, keepUserOptionState: Le } = Rt({ config: t.value }), { svgRef: we } = Vt({ config: t.value.style.chart.title });
     function qe() {
       const l = De({
-        userConfig: W.config,
+        userConfig: X.config,
         defaultConfig: ot
       });
       return l.theme ? {
         ...De({
-          userConfig: $t.vue_ui_quadrant[l.theme] || W.config,
+          userConfig: $t.vue_ui_quadrant[l.theme] || X.config,
           defaultConfig: l
         }),
         customPalette: xt[l.theme] || he
       } : l;
     }
-    Ie(() => W.config, (l) => {
+    Ie(() => X.config, (l) => {
       t.value = qe(), ne.value = !t.value.userOptions.showOnChartHover, _e(), me.value += 1, xe.value += 1, $e.value += 1, $.value.plotLabels.show = t.value.style.chart.layout.labels.plotLabels.show, $.value.showTable = t.value.table.show, $.value.showTooltip = t.value.style.chart.tooltip.show;
     }, { deep: !0 });
     const A = Ee(null), F = Ee(null);
     function _e() {
-      if (kt(W.dataset) ? D({
+      if (kt(X.dataset) ? D({
         componentName: "VueUiQuadrant",
         type: "dataset"
-      }) : W.dataset.forEach((l, u) => {
+      }) : X.dataset.forEach((l, u) => {
         [null, void 0].includes(l.name) && D({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
@@ -77,18 +77,18 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           type: "datasetSerieAttribute",
           property: "series",
           index: u
-        }) : l.series.forEach((a, s) => {
+        }) : l.series.forEach((a, o) => {
           [null, void 0].includes(a.name) && D({
             componentName: "VueUiQuadrant",
             type: "datasetSerieAttribute",
             property: "name",
             key: "series",
-            index: s
+            index: o
           });
         });
       }), t.value.responsive) {
-        const l = At(() => {
-          const { width: u, height: a } = Mt({
+        const l = Mt(() => {
+          const { width: u, height: a } = Nt({
             chart: G.value,
             title: t.value.style.chart.title.text ? be.value : null,
             legend: t.value.style.chart.legend.show ? fe.value : null,
@@ -107,11 +107,11 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
     }), bt(() => {
       A.value && (F.value && A.value.unobserve(F.value), A.value.disconnect());
     });
-    const { isPrinting: Ce, isImaging: Se, generatePdf: ze, generateImage: Te } = Nt({
+    const { isPrinting: Se, isImaging: Ce, generatePdf: ze, generateImage: Te } = Ot({
       elementId: `vue-ui-quadrant_${z.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-quadrant",
       options: t.value.userOptions.print
-    }), rt = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), We = g(() => Lt(t.value.customPalette)), $ = y({
+    }), rt = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), Xe = g(() => Lt(t.value.customPalette)), $ = y({
       plotLabels: {
         show: t.value.style.chart.layout.labels.plotLabels.show
       },
@@ -183,29 +183,29 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
       }
     }), nt = y(null), te = y(!1);
-    function Q({ targetX: l, targetY: u, targetW: a, targetH: s, side: r }) {
-      d.value && Z(r);
+    function Q({ targetX: l, targetY: u, targetW: a, targetH: o, side: n }) {
+      d.value && Z(n);
       const b = {
         x: l - v.value.startX,
         y: u - v.value.startY,
         w: a - v.value.width,
-        h: s - v.value.height
-      }, f = t.value.zoomAnimationFrames;
-      let X = 0;
+        h: o - v.value.height
+      }, p = t.value.zoomAnimationFrames;
+      let W = 0;
       function He() {
-        te.value = !0, v.value.startX += b.x / f, v.value.startY += b.y / f, v.value.width += b.w / f, v.value.height += b.h / f, X += 1, X < f ? nt.value = requestAnimationFrame(He) : te.value = !1;
+        te.value = !0, v.value.startX += b.x / p, v.value.startY += b.y / p, v.value.width += b.w / p, v.value.height += b.h / p, W += 1, W < p ? nt.value = requestAnimationFrame(He) : te.value = !1;
       }
       He();
     }
     function M(l) {
       if (!te.value)
-        if (p.value && d.value === l)
+        if (f.value && d.value === l)
           Q({
             targetX: 0,
             targetY: 0,
             targetW: e.value.width,
             targetH: e.value.height
-          }), d.value = null, p.value = !1;
+          }), d.value = null, f.value = !1;
         else {
           switch (d.value = l, l) {
             case "TL":
@@ -248,46 +248,46 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
               v.value.startX = 0, v.value.startY = 0, v.value.width = e.value.width, v.value.height = e.value.height;
               break;
           }
-          p.value = !0;
+          f.value = !0;
         }
     }
     const it = g(() => {
-      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({
-          x: e.value.padding + u * r,
-          y: a + e.value.usableHeight * (r / l / 2),
-          height: e.value.usableHeight * (1 - r / l),
-          width: e.value.usableWidth * (1 - r / l),
-          opacity: Math.round((r + 1) / l * 20)
+      const l = t.value.style.chart.layout.grid.graduations.steps, u = e.value.usableWidth / (l * 2), a = e.value.top, o = [];
+      for (let n = 0; n < l; n += 1)
+        o.push({
+          x: e.value.padding + u * n,
+          y: a + e.value.usableHeight * (n / l / 2),
+          height: e.value.usableHeight * (1 - n / l),
+          width: e.value.usableWidth * (1 - n / l),
+          opacity: Math.round((n + 1) / l * 20)
         });
-      return s;
+      return o;
     }), _ = g(() => {
-      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(...H.value.flatMap((r) => r.series.map((b) => b.x))), u = Math.min(...H.value.flatMap((r) => r.series.map((b) => b.x)))), t.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...H.value.flatMap((r) => r.series.map((b) => b.y))), s = Math.min(...H.value.flatMap((r) => r.series.map((b) => b.y)))), {
+      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, o = t.value.style.chart.layout.grid.yAxis.min;
+      return t.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...H.value.flatMap((n) => n.series.map((b) => b.x))), u = Math.min(...H.value.flatMap((n) => n.series.map((b) => b.x)))), t.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...H.value.flatMap((n) => n.series.map((b) => b.y))), o = Math.min(...H.value.flatMap((n) => n.series.map((b) => b.y)))), {
         x: {
           max: l,
           min: u
         },
         y: {
           max: a,
-          min: s
+          min: o
         }
       };
-    }), N = y([]), H = g(() => W.dataset.map((l, u) => ({
+    }), N = y([]), H = g(() => X.dataset.map((l, u) => ({
       ...l,
       series: qt({
         data: l.series,
         threshold: t.value.downsample.threshold
       }),
       id: `cat_${u}_${z.value}`,
-      color: wt(l.color) || We.value[u] || he[u]
+      color: wt(l.color) || Xe.value[u] || he[u]
     }))), vt = g(() => H.value.filter((l) => !N.value.includes(l.id))), dt = g(() => H.value.map((l, u) => ({
       ...l,
       shape: l.shape || "circle",
       series: l.series.map((a) => ({
         ...a,
-        x: Xe(a.x),
+        x: We(a.x),
         y: Ye(a.y),
         xValue: a.x,
         yValue: a.y,
@@ -296,29 +296,29 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         shape: l.shape,
         color: l.color
       }))
-    }))), S = g(() => (W.dataset.forEach((l, u) => {
-      l.series.forEach((a, s) => {
+    }))), C = g(() => (X.dataset.forEach((l, u) => {
+      l.series.forEach((a, o) => {
         [null, void 0].includes(a.x) && D({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
           property: "x",
           key: "series",
-          index: s
+          index: o
         }), [null, void 0].includes(a.y) && D({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
           property: "y",
           key: "series",
-          index: s
+          index: o
         });
       });
     }), vt.value.map((l, u) => ({
       ...l,
       shape: l.shape || "circle",
-      color: l.color || We.value[u] || he[u],
+      color: l.color || Xe.value[u] || he[u],
       series: l.series.map((a) => ({
         ...a,
-        x: Xe(a.x),
+        x: We(a.x),
         y: Ye(a.y),
         xValue: a.x,
         yValue: a.y,
@@ -329,7 +329,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         uid: Ue()
       }))
     }))));
-    function Xe(l) {
+    function We(l) {
       if (l >= 0) {
         const u = l / _.value.x.max;
         return e.value.centerX + e.value.usableWidth / 2 * u;
@@ -348,45 +348,45 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
       }
     }
     const le = g(() => {
-      const l = S.value.flatMap((f) => f.series.map((X) => ({
-        x: X.xValue,
-        y: X.yValue,
-        name: X.name,
-        category: X.categoryName,
-        quadrantSide: X.quadrantSide,
-        sideName: t.value.style.chart.layout.labels.quadrantLabels[X.quadrantSide].text,
-        color: f.color,
-        shape: f.shape
-      }))), u = t.value.style.chart.layout.grid.xAxis.name || "x", a = t.value.style.chart.layout.grid.yAxis.name || "y", s = [t.value.translations.category, t.value.translations.item, u, a, t.value.translations.side], r = l.map((f) => [f.category, f.name, f.x, f.y, f.sideName || f.quadrantSide]), b = l.map((f) => ({
-        shape: f.shape,
-        color: f.color
+      const l = C.value.flatMap((p) => p.series.map((W) => ({
+        x: W.xValue,
+        y: W.yValue,
+        name: W.name,
+        category: W.categoryName,
+        quadrantSide: W.quadrantSide,
+        sideName: t.value.style.chart.layout.labels.quadrantLabels[W.quadrantSide].text,
+        color: p.color,
+        shape: p.shape
+      }))), u = t.value.style.chart.layout.grid.xAxis.name || "x", a = t.value.style.chart.layout.grid.yAxis.name || "y", o = [t.value.translations.category, t.value.translations.item, u, a, t.value.translations.side], n = l.map((p) => [p.category, p.name, p.x, p.y, p.sideName || p.quadrantSide]), b = l.map((p) => ({
+        shape: p.shape,
+        color: p.color
       }));
-      return { head: s, body: r, itsShapes: b, tableData: l };
+      return { head: o, body: n, itsShapes: b, tableData: l };
     }), ae = g(() => {
-      const l = le.value.head, u = le.value.tableData.map((s) => [
+      const l = le.value.head, u = le.value.tableData.map((o) => [
         {
-          shape: s.shape,
-          color: s.color,
-          name: s.category
+          shape: o.shape,
+          color: o.color,
+          name: o.category
         },
-        s.name,
+        o.name,
         R(
           t.value.style.chart.layout.labels.plotLabels.x.formatter,
-          s.x,
+          o.x,
           V({
-            v: s.x,
+            v: o.x,
             r: t.value.style.chart.layout.labels.plotLabels.rounding
           })
         ),
         R(
           t.value.style.chart.layout.labels.plotLabels.y.formatter,
-          s.y,
+          o.y,
           V({
-            v: s.y,
+            v: o.y,
             r: t.value.style.chart.layout.labels.plotLabels.rounding
           })
         ),
-        s.sideName || s.quadrantSide
+        o.sideName || o.quadrantSide
       ]), a = {
         th: {
           backgroundColor: t.value.table.th.backgroundColor,
@@ -445,25 +445,25 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
       }, ve.value = {
         datapoint: u,
         seriesIndex: a,
-        series: S.value,
+        series: C.value,
         config: t.value
       }, ee.value = !0;
-      const s = t.value.style.chart.tooltip.customFormat;
-      if (Xt(s) && Yt(() => s({
+      const o = t.value.style.chart.tooltip.customFormat;
+      if (Yt(o) && At(() => o({
         seriesIndex: a,
         datapoint: u,
-        series: S.value,
+        series: C.value,
         config: t.value
       })))
-        re.value = s({
+        re.value = o({
           seriesIndex: a,
           datapoint: u,
-          series: S.value,
+          series: C.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>${R(
+        let n = "";
+        u.quadrantSide && (n += `<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>`), n += `<div>${l.name}</div>`, n += `<div style="padding-bottom:6px;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};margin-bottom:3px">${u.name}</div>`, n += `<div>${t.value.style.chart.layout.grid.xAxis.name ? t.value.style.chart.layout.grid.xAxis.name : "x"}: <b>${R(
           t.value.style.chart.layout.labels.plotLabels.x.formatter,
           u.xValue,
           V({
@@ -471,7 +471,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             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>${R(
+        )}</b></div>`, n += `<div>${t.value.style.chart.layout.grid.yAxis.name ? t.value.style.chart.layout.grid.yAxis.name : "y"}: <b>${R(
           t.value.style.chart.layout.labels.plotLabels.y.formatter,
           u.yValue,
           V({
@@ -479,7 +479,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             r: t.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: u, category: l, categoryIndex: a }
-        )}</b></div>`, re.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${r}</div>`;
+        )}</b></div>`, re.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${n}</div>`;
       }
     }
     function Oe(l, u) {
@@ -496,11 +496,11 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
     }
     function Z(l) {
       if (!l) return;
-      const u = S.value.flatMap((s) => s.series.filter((r) => r.quadrantSide === l).map((r) => ({
-        category: r.categoryName,
-        itemName: r.name,
-        x: r.xValue,
-        y: r.yValue
+      const u = C.value.flatMap((o) => o.series.filter((n) => n.quadrantSide === l).map((n) => ({
+        category: n.categoryName,
+        itemName: n.name,
+        x: n.xValue,
+        y: n.yValue
       }))), a = {
         quadrantSide: l,
         sideName: t.value.style.chart.layout.labels.quadrantLabels[l].text,
@@ -615,7 +615,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
       }
     }));
     function Re() {
-      return S.value.map((l) => ({
+      return C.value.map((l) => ({
         color: l.color,
         name: l.name,
         shape: l.shape,
@@ -630,7 +630,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
     }
     function Ve(l = null) {
       gt(() => {
-        const u = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = le.value.head, s = le.value.body, r = u.concat([a]).concat(s), b = Tt(r);
+        const u = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = le.value.head, o = le.value.body, n = u.concat([a]).concat(o), b = Xt(n);
         l ? l(b) : Wt({ csvContent: b, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
       });
     }
@@ -660,7 +660,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
       toggleLabels: Be,
       toggleTooltip: Fe,
       toggleAnnotator: de
-    }), (l, u) => (o(), n("div", {
+    }), (l, u) => (s(), r("div", {
       class: T(`vue-ui-quadrant ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "quadrantChart",
       ref: G,
@@ -669,7 +669,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
       onMouseenter: u[16] || (u[16] = () => i(ke)(!0)),
       onMouseleave: u[17] || (u[17] = () => i(ke)(!1))
     }, [
-      t.value.userOptions.buttons.annotator ? (o(), O(i(Ke), {
+      t.value.userOptions.buttons.annotator ? (s(), O(i(Ke), {
         key: 0,
         svgRef: i(we),
         backgroundColor: t.value.style.chart.backgroundColor,
@@ -677,20 +677,20 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         active: ue.value,
         onClose: de
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
-      rt.value ? (o(), n("div", {
+      rt.value ? (s(), r("div", {
         key: 1,
         ref_key: "noTitle",
         ref: ge,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : h("", !0),
-      t.value.style.chart.title.text ? (o(), n("div", {
+      t.value.style.chart.title.text ? (s(), r("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: be,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (o(), O(Vt, {
+        (s(), O(Pt, {
           key: `table_${me.value}`,
           config: {
             title: {
@@ -704,14 +704,14 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           }
         }, null, 8, ["config"]))
       ], 512)) : h("", !0),
-      t.value.userOptions.show && K.value && (i(Le) || i(ne)) ? (o(), O(i(at), {
+      t.value.userOptions.show && K.value && (i(Le) || i(ne)) ? (s(), O(i(at), {
         ref_key: "details",
         ref: st,
         key: `user_options_${ye.value}`,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
-        isImaging: i(Se),
-        isPrinting: i(Ce),
+        isImaging: i(Ce),
+        isPrinting: i(Se),
         uid: z.value,
         hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
         hasPdf: t.value.userOptions.buttons.pdf,
@@ -742,8 +742,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
       }, ft({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: m(({ isOpen: a, color: s }) => [
-            x(l.$slots, "menuIcon", E(U({ isOpen: a, color: s })), void 0, !0)
+          fn: m(({ isOpen: a, color: o }) => [
+            x(l.$slots, "menuIcon", E(U({ isOpen: a, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -791,31 +791,31 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: m(({ toggleFullscreen: a, isFullscreen: s }) => [
-            x(l.$slots, "optionFullscreen", E(U({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
+          fn: m(({ toggleFullscreen: a, isFullscreen: o }) => [
+            x(l.$slots, "optionFullscreen", E(U({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: m(({ toggleAnnotator: a, isAnnotator: s }) => [
-            x(l.$slots, "optionAnnotator", E(U({ toggleAnnotator: a, isAnnotator: s })), void 0, !0)
+          fn: m(({ toggleAnnotator: a, isAnnotator: o }) => [
+            x(l.$slots, "optionAnnotator", E(U({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
-      K.value ? (o(), n("svg", {
+      K.value ? (s(), r("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: we,
         xmlns: i(_t),
         class: T({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
         viewBox: `${v.value.startX} ${v.value.startY} ${v.value.width} ${v.value.height}`,
-        style: q(`max-width:100%;overflow:${p.value ? "hidden" : "visible"};background:transparent;color:${t.value.style.chart.color}`),
+        style: q(`max-width:100%;overflow:${f.value ? "hidden" : "visible"};background:transparent;color:${t.value.style.chart.color}`),
         id: `svg_${z.value}`
       }, [
         ce(i(ut)),
-        l.$slots["chart-background"] ? (o(), n("foreignObject", {
+        l.$slots["chart-background"] ? (s(), r("foreignObject", {
           key: 0,
           x: v.value.startX,
           y: v.value.startY,
@@ -826,28 +826,28 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           }
         }, [
           x(l.$slots, "chart-background", {}, void 0, !0)
-        ], 8, It)) : h("", !0),
+        ], 8, Et)) : h("", !0),
         c("defs", null, [
-          (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n("radialGradient", {
+          (s(!0), r(S, null, Y(C.value, (a, o) => (s(), r("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
             fx: "50%",
             fy: "50%",
-            id: `quadrant_gradient_${z.value}_${s}`
+            id: `quadrant_gradient_${z.value}_${o}`
           }, [
             c("stop", {
               offset: "0%",
-              "stop-color": i(oe)(i(Ct)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
-            }, null, 8, Ut),
+              "stop-color": i(oe)(i(St)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
+            }, null, 8, Dt),
             c("stop", {
               offset: "100%",
               "stop-color": i(oe)(a.color, t.value.style.chart.layout.areas.opacity)
-            }, null, 8, Dt)
-          ], 8, Et))), 256))
+            }, null, 8, Gt)
+          ], 8, Ut))), 256))
         ]),
-        t.value.style.chart.layout.grid.graduations.show ? (o(), n("g", Gt, [
-          (o(!0), n(C, null, Y(it.value, (a) => (o(), n("rect", {
+        t.value.style.chart.layout.grid.graduations.show ? (s(), r("g", Qt, [
+          (s(!0), r(S, null, Y(it.value, (a) => (s(), r("rect", {
             fill: t.value.style.chart.layout.grid.graduations.fill ? i(oe)(t.value.style.chart.layout.grid.graduations.color, a.opacity) : "none",
             x: a.x,
             y: a.y,
@@ -856,7 +856,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             "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, Qt))), 256))
+          }, null, 8, Jt))), 256))
         ])) : h("", !0),
         c("line", {
           x1: e.value.left,
@@ -865,7 +865,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           y2: e.value.centerY,
           stroke: t.value.style.chart.layout.grid.stroke,
           "stroke-width": t.value.style.chart.layout.grid.strokeWidth
-        }, null, 8, Jt),
+        }, null, 8, jt),
         c("line", {
           x1: e.value.centerX,
           y1: e.value.top,
@@ -873,31 +873,31 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           y2: e.value.bottom,
           stroke: t.value.style.chart.layout.grid.stroke,
           "stroke-width": t.value.style.chart.layout.grid.strokeWidth
-        }, null, 8, jt),
-        t.value.style.chart.layout.grid.showArrows ? (o(), n("g", Zt, [
+        }, null, 8, Zt),
+        t.value.style.chart.layout.grid.showArrows ? (s(), r("g", Kt, [
           c("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, Kt),
+          }, null, 8, el),
           c("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, el),
+          }, null, 8, tl),
           c("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, tl),
+          }, null, 8, ll),
           c("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, ll)
+          }, null, 8, al)
         ])) : h("", !0),
-        t.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (o(), n("g", al, [
-          t.value.style.chart.layout.labels.quadrantLabels.tl.text ? (o(), n("text", {
+        t.value.style.chart.layout.labels.quadrantLabels.show && !f.value ? (s(), r("g", ul, [
+          t.value.style.chart.layout.labels.quadrantLabels.tl.text ? (s(), r("text", {
             key: 0,
             x: 0,
             y: e.value.top - e.value.padding / 2,
@@ -906,8 +906,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
             style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
             onClick: u[0] || (u[0] = (a) => Z("tl"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, ul)) : h("", !0),
-          t.value.style.chart.layout.labels.quadrantLabels.tr.text ? (o(), n("text", {
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, ol)) : h("", !0),
+          t.value.style.chart.layout.labels.quadrantLabels.tr.text ? (s(), r("text", {
             key: 1,
             x: e.value.width,
             y: e.value.top - e.value.padding / 2,
@@ -916,8 +916,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
             style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
             onClick: u[1] || (u[1] = (a) => Z("tr"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, ol)) : h("", !0),
-          t.value.style.chart.layout.labels.quadrantLabels.br.text ? (o(), n("text", {
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, sl)) : h("", !0),
+          t.value.style.chart.layout.labels.quadrantLabels.br.text ? (s(), r("text", {
             key: 2,
             x: e.value.width,
             y: e.value.bottom + e.value.padding * 0.7,
@@ -926,8 +926,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
             style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
             onClick: u[2] || (u[2] = (a) => Z("br"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, sl)) : h("", !0),
-          t.value.style.chart.layout.labels.quadrantLabels.bl.text ? (o(), n("text", {
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, rl)) : h("", !0),
+          t.value.style.chart.layout.labels.quadrantLabels.bl.text ? (s(), r("text", {
             key: 3,
             x: 0,
             y: e.value.bottom + e.value.padding * 0.7,
@@ -936,9 +936,9 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
             style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
             onClick: u[3] || (u[3] = (a) => Z("bl"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, rl)) : h("", !0)
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, nl)) : h("", !0)
         ])) : h("", !0),
-        t.value.style.chart.layout.labels.axisLabels.show ? (o(), n("g", nl, [
+        t.value.style.chart.layout.labels.axisLabels.show ? (s(), r("g", il, [
           c("text", {
             x: e.value.centerX,
             y: e.value.top - e.value.padding / 6,
@@ -952,14 +952,14 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
               v: _.value.y.max,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, il),
+          )), 9, vl),
           c("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
-          }, L(t.value.style.chart.layout.grid.yAxis.name), 9, vl),
+          }, L(t.value.style.chart.layout.grid.yAxis.name), 9, dl),
           c("text", {
             x: e.value.centerX,
             y: e.value.bottom + e.value.padding * 0.35,
@@ -973,7 +973,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
               v: _.value.y.min,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, dl),
+          )), 9, cl),
           c("text", {
             id: `xLabelMin_${z.value}`,
             "text-anchor": "middle",
@@ -987,7 +987,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
               v: _.value.x.min,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, cl),
+          )), 9, hl),
           c("text", {
             id: `xLabelMax_${z.value}`,
             "text-anchor": "middle",
@@ -1001,23 +1001,23 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
               v: _.value.x.max,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, hl),
+          )), 9, yl),
           c("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
-          }, L(t.value.style.chart.layout.grid.xAxis.name), 9, yl)
+          }, L(t.value.style.chart.layout.grid.xAxis.name), 9, bl)
         ])) : h("", !0),
-        t.value.style.chart.layout.areas.show ? (o(), n("g", bl, [
-          (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n("g", null, [
-            a.series.length > 2 ? (o(), n("polygon", {
+        t.value.style.chart.layout.areas.show ? (s(), r("g", fl, [
+          (s(!0), r(S, null, Y(C.value, (a, o) => (s(), r("g", null, [
+            a.series.length > 2 ? (s(), r("polygon", {
               key: 0,
               "data-cy-quadrant-area": "",
-              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${z.value}_${s})` : i(oe)(a.color, t.value.style.chart.layout.areas.opacity),
-              points: i(St)(a)
-            }, null, 8, fl)) : h("", !0)
+              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${z.value}_${o})` : i(oe)(a.color, t.value.style.chart.layout.areas.opacity),
+              points: i(Ct)(a)
+            }, null, 8, pl)) : h("", !0)
           ]))), 256))
         ])) : h("", !0),
         c("g", null, [
@@ -1028,8 +1028,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             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, pl),
+            class: T({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, gl),
           c("rect", {
             onClick: u[5] || (u[5] = (a) => M("TR")),
             x: e.value.centerX,
@@ -1037,8 +1037,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             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, gl),
+            class: T({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, ml),
           c("rect", {
             onClick: u[6] || (u[6] = (a) => M("BR")),
             x: e.value.centerX,
@@ -1046,8 +1046,8 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             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, ml),
+            class: T({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, xl),
           c("rect", {
             onClick: u[7] || (u[7] = (a) => M("BL")),
             x: e.value.left,
@@ -1055,86 +1055,104 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             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, xl)
+            class: T({ "vue-data-ui-zoom-plus": !f.value, "vue-data-ui-zoom-minus": f.value })
+          }, null, 10, $l)
         ]),
-        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (o(), n(C, { key: 7 }, [
-          $.value.plotLabels.show ? (o(), n("g", Ll, [
-            (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", {
+        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), r(S, { key: 7 }, [
+          $.value.plotLabels.show ? (s(), r("g", ql, [
+            (s(!0), r(S, null, Y(C.value, (a, o) => (s(), r(S, null, [
+              (s(!0), r(S, null, Y(a.series, (n) => (s(), r("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) => Ne(a, r, s),
+                x: n.x - 50,
+                y: n.y - t.value.style.chart.layout.labels.plotLabels.fontSize,
+                onMouseover: (b) => Ne(a, n, o),
                 onMouseleave: u[9] || (u[9] = (b) => {
                   ee.value = !1, J.value = null, j.value = null;
                 }),
-                onClick: (b) => Oe(a, r)
+                onClick: (b) => Oe(a, n)
               }, [
                 c("div", {
-                  style: q(`color:${i(zt)(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`)
-                }, L(r.name), 5)
-              ], 40, wl))), 256))
+                  style: q(`color:${i(Tt)(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: fit-content;`)
+                }, L(n.name), 5)
+              ], 40, _l))), 256))
             ], 64))), 256))
           ])) : h("", !0)
-        ], 64)) : (o(), n(C, { key: 6 }, [
-          (o(!0), n(C, null, Y(S.value, (a, s) => (o(), n("g", null, [
-            (o(!0), n(C, null, Y(a.series, (r) => (o(), O(Ge, {
+        ], 64)) : (s(), r(S, { key: 6 }, [
+          (s(!0), r(S, null, Y(C.value, (a, o) => (s(), r("g", null, [
+            (s(!0), r(S, null, Y(a.series, (n) => (s(), O(Ge, {
               color: a.color,
-              isSelected: J.value && r.uid === J.value,
-              plot: r,
-              radius: t.value.style.chart.layout.plots.radius / (p.value ? 1.5 : 1),
+              isSelected: J.value && n.uid === J.value,
+              plot: n,
+              radius: t.value.style.chart.layout.plots.radius / (f.value ? 1.5 : 1),
               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,
-              onMouseenter: (b) => Ne(a, r, s),
+              onMouseenter: (b) => Ne(a, n, o),
               onMouseleave: u[8] || (u[8] = (b) => {
                 ee.value = !1, J.value = null, j.value = null;
               }),
-              onClick: (b) => Oe(a, r)
+              onClick: (b) => Oe(a, n)
             }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onClick"]))), 256))
           ]))), 256)),
-          $.value.plotLabels.show ? (o(), n("g", $l, [
-            (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
-              }, L(s.name), 9, kl))), 256))
+          $.value.plotLabels.show ? (s(), r("g", kl, [
+            (s(!0), r(S, null, Y(C.value, (a) => (s(), r("g", null, [
+              (s(!0), r(S, null, Y(a.series, (o) => (s(), r("g", null, [
+                String(o.name).includes(`
+`) ? (s(), r("text", {
+                  key: 1,
+                  x: o.x,
+                  y: o.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 / (f.value ? 1.5 : 1),
+                  fill: t.value.style.chart.layout.labels.plotLabels.color,
+                  innerHTML: i(zt)({
+                    content: String(o.name),
+                    fontSize: t.value.style.chart.layout.labels.plotLabels.fontSize / (f.value ? 1.5 : 1),
+                    fill: t.value.style.chart.layout.labels.plotLabels.color,
+                    x: o.x,
+                    y: o.y + t.value.style.chart.layout.labels.plotLabels.offsetY + t.value.style.chart.layout.plots.radius
+                  })
+                }, null, 8, wl)) : (s(), r("text", {
+                  key: 0,
+                  x: o.x,
+                  y: o.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 / (f.value ? 1.5 : 1),
+                  fill: t.value.style.chart.layout.labels.plotLabels.color
+                }, L(o.name), 9, Ll))
+              ]))), 256))
             ]))), 256))
           ])) : h("", !0)
         ], 64)),
-        p.value ? (o(), n("g", ql, [
-          d.value === "TL" ? (o(), n("polygon", {
+        f.value ? (s(), r("g", Sl, [
+          d.value === "TL" ? (s(), r("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, _l)) : h("", !0),
-          d.value === "TR" ? (o(), n("polygon", {
+          }, null, 8, Cl)) : h("", !0),
+          d.value === "TR" ? (s(), r("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, Cl)) : h("", !0),
-          d.value === "BR" ? (o(), n("polygon", {
+          }, null, 8, zl)) : h("", !0),
+          d.value === "BR" ? (s(), r("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, Sl)) : h("", !0),
-          d.value === "BL" ? (o(), n("polygon", {
+          }, null, 8, Tl)) : h("", !0),
+          d.value === "BL" ? (s(), r("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, zl)) : h("", !0)
+          }, null, 8, Xl)) : h("", !0)
         ])) : h("", !0),
-        d.value && !te.value ? (o(), n("g", Tl, [
+        d.value && !te.value ? (s(), r("g", Wl, [
           c("text", {
             x: P.value.x,
             y: P.value.y - P.value.fontSize / 1.5,
@@ -1142,9 +1160,9 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             fill: P.value.fill,
             "text-anchor": "middle",
             "font-weight": P.value.bold ? "bold" : "normal"
-          }, L(P.value.text), 9, Wl)
+          }, L(P.value.text), 9, Yl)
         ])) : h("", !0),
-        p.value && d.value ? (o(), n("g", Xl, [
+        f.value && d.value ? (s(), r("g", Al, [
           c("rect", {
             x: w.value[d.value].tl.x,
             y: w.value[d.value].tl.y,
@@ -1154,7 +1172,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             style: q(`cursor: pointer; opacity: ${d.value === "TL" ? 1 : 0.2}`),
             onClick: u[10] || (u[10] = (a) => M("TL")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "TL" })
-          }, null, 14, Yl),
+          }, null, 14, Ml),
           c("rect", {
             x: w.value[d.value].tr.x,
             y: w.value[d.value].tr.y,
@@ -1164,7 +1182,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             style: q(`cursor: pointer; opacity: ${d.value === "TR" ? 1 : 0.2}`),
             onClick: u[11] || (u[11] = (a) => M("TR")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "TR" })
-          }, null, 14, Al),
+          }, null, 14, Nl),
           c("rect", {
             x: w.value[d.value].br.x,
             y: w.value[d.value].br.y,
@@ -1174,7 +1192,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             style: q(`cursor: pointer; opacity: ${d.value === "BR" ? 1 : 0.2}`),
             onClick: u[12] || (u[12] = (a) => M("BR")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "BR" })
-          }, null, 14, Ml),
+          }, null, 14, Ol),
           c("rect", {
             x: w.value[d.value].bl.x,
             y: w.value[d.value].bl.y,
@@ -1184,26 +1202,26 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             style: q(`cursor: pointer; opacity: ${d.value === "BL" ? 1 : 0.2}`),
             onClick: u[13] || (u[13] = (a) => M("BL")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "BL" })
-          }, null, 14, Nl),
+          }, null, 14, Rl),
           c("path", {
             class: "vue-ui-quadrant-minimap-crosshairs",
             stroke: t.value.style.chart.backgroundColor,
             "stroke-width": 1,
             d: w.value[d.value].crosshairs.horizontal
-          }, null, 8, Ol),
+          }, null, 8, Vl),
           c("path", {
             class: "vue-ui-quadrant-minimap-crosshairs",
             stroke: t.value.style.chart.backgroundColor,
             "stroke-width": 1,
             d: w.value[d.value].crosshairs.vertical
-          }, null, 8, Rl)
+          }, null, 8, Pl)
         ])) : h("", !0),
         x(l.$slots, "svg", { svg: e.value }, void 0, !0)
-      ], 14, Ht)) : h("", !0),
-      l.$slots.watermark ? (o(), n("div", Vl, [
-        x(l.$slots, "watermark", E(U({ isPrinting: i(Ce) || i(Se) })), void 0, !0)
+      ], 14, It)) : h("", !0),
+      l.$slots.watermark ? (s(), r("div", Bl, [
+        x(l.$slots, "watermark", E(U({ isPrinting: i(Se) || i(Ce) })), void 0, !0)
       ])) : h("", !0),
-      K.value ? h("", !0) : (o(), O(i(tt), {
+      K.value ? h("", !0) : (s(), O(i(tt), {
         key: 6,
         config: {
           type: "quadrant",
@@ -1225,7 +1243,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         ref_key: "chartLegend",
         ref: fe
       }, [
-        t.value.style.chart.legend.show ? (o(), O(Pt, {
+        t.value.style.chart.legend.show ? (s(), O(Bt, {
           key: `legend_${$e.value}`,
           legendSet: Ae.value,
           config: ct.value,
@@ -1233,9 +1251,9 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         }, {
           item: m(({ legend: a }) => [
             c("div", {
-              onClick: (s) => ie(a.id),
+              onClick: (o) => ie(a.id),
               style: q(`opacity:${N.value.includes(a.id) ? 0.5 : 1}`)
-            }, L(a.name), 13, Pl)
+            }, L(a.name), 13, Fl)
           ]),
           _: 1
         }, 8, ["legendSet", "config"])) : x(l.$slots, "legend", {
@@ -1243,7 +1261,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           legend: Ae.value
         }, void 0, !0)
       ], 512),
-      l.$slots.source ? (o(), n("div", {
+      l.$slots.source ? (s(), r("div", {
         key: 7,
         ref_key: "source",
         ref: pe,
@@ -1274,7 +1292,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
           x(l.$slots, "tooltip-after", E(U({ ...ve.value })), void 0, !0)
         ]),
         default: m(() => [
-          t.value.style.chart.tooltip.showShape ? (o(), n("svg", Bl, [
+          t.value.style.chart.tooltip.showShape ? (s(), r("svg", Hl, [
             ce(Ge, {
               plot: { x: 10, y: 10 },
               shape: j.value.shape,
@@ -1287,7 +1305,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      K.value ? (o(), O(i(et), {
+      K.value ? (s(), O(i(et), {
         key: 8,
         hideDetails: "",
         config: {
@@ -1304,7 +1322,7 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
         }
       }, {
         content: m(() => [
-          (o(), O(i(Ze), {
+          (s(), O(i(Ze), {
             key: `table_${xe.value}`,
             colNames: ae.value.colNames,
             head: ae.value.head,
@@ -1319,16 +1337,16 @@ const Ft = ["id"], Ht = ["xmlns", "viewBox", "id"], It = ["x", "y", "width", "he
             td: m(({ td: a }) => [
               c("div", {
                 innerHTML: a.name || a
-              }, null, 8, Fl)
+              }, null, 8, Il)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : h("", !0)
-    ], 46, Ft));
+    ], 46, Ht));
   }
-}, ta = /* @__PURE__ */ Bt(Hl, [["__scopeId", "data-v-b0c27f16"]]);
+}, aa = /* @__PURE__ */ Ft(El, [["__scopeId", "data-v-02521ee2"]]);
 export {
-  ta as default
+  aa as default
 };