vue-data-ui 2.6.6 → 2.6.8

package/dist/{vue-ui-molecule-CJ05ddhf.js → vue-ui-molecule--G2QIMak.js}

@@ -1,18 +1,19 @@
-import { toRef as ce, resolveComponent as de, createElementBlock as n, openBlock as a, Fragment as m, renderList as D, createCommentVNode as f, createBlock as S, withModifiers as z, createElementVNode as F, toDisplayString as Ie, normalizeStyle as _, createVNode as A, computed as U, onMounted as tt, ref as v, watch as ot, unref as C, normalizeClass as Oe, createSlots as lt, withCtx as x, renderSlot as $, normalizeProps as q, guardReactiveProps as Z, createTextVNode as at, nextTick as Ae } from "vue";
-import { u as st, o as nt, e as rt, c as Le, t as it, p as Ue, a as ut, b as ct, X as dt, l as vt, P as ht, q as ft, r as pt, x as gt, y as yt } from "./index-B9qF6XbP.js";
-import { _ as mt } from "./Title-D6h1gTvZ.js";
-import { u as bt, U as kt } from "./usePrinter-DsiBLAy1.js";
-import { D as Ct } from "./DataTable-CJN0sipt.js";
-import { _ as $t } from "./Tooltip-BonEVaob.js";
-import J from "./BaseIcon-t20JEZNG.js";
-import wt from "./vue-ui-skeleton-CHEZlRpn.js";
-import xt from "./vue-ui-accordion-DBmchkva.js";
-import { u as De } from "./useNestedProp-g5oKzlVy.js";
-import { _ as Pt } from "./PackageVersion-DqmHcoqz.js";
-import { P as Tt } from "./PenAndPaper-6UYizrkQ.js";
-import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as Rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], Ot = {
+import { toRef as ce, resolveComponent as de, createElementBlock as n, openBlock as s, Fragment as m, renderList as D, createCommentVNode as f, createBlock as S, withModifiers as z, createElementVNode as F, toDisplayString as Ie, normalizeStyle as _, createVNode as A, computed as U, onMounted as ot, ref as v, watch as lt, unref as C, normalizeClass as Oe, createSlots as st, withCtx as x, renderSlot as $, normalizeProps as q, guardReactiveProps as Z, createTextVNode as at, nextTick as Ae } from "vue";
+import { u as nt, o as rt, e as it, c as Le, t as ut, p as Ue, a as ct, b as dt, X as vt, l as ht, P as ft, q as pt, r as gt, x as yt, y as mt } from "./index-CZlI7PiS.js";
+import { _ as bt } from "./Title-DePxeqVl.js";
+import { u as kt, U as Ct } from "./usePrinter-D-sSdR2l.js";
+import { D as $t } from "./DataTable-D0-zzsJg.js";
+import { _ as wt } from "./Tooltip-DRw9RoFp.js";
+import J from "./BaseIcon-dThl5uNa.js";
+import xt from "./vue-ui-skeleton-D8r-yAkW.js";
+import Pt from "./vue-ui-accordion-DVtmOO3I.js";
+import { u as De } from "./useNestedProp-Cg0NIwr6.js";
+import { _ as Tt } from "./PackageVersion-J_USnljf.js";
+import { P as Ft } from "./PenAndPaper-CoEXEMcN.js";
+import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as St } from "./useChartAccessibility-BWojgys7.js";
+import { _ as Ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const At = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], Lt = {
   __name: "RecursiveCircles",
   props: {
     color: {
@@ -41,8 +42,8 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(s, { emit: I }) {
-    const R = s, p = I;
+  setup(a, { emit: I }) {
+    const R = a, p = I;
     function r(i) {
       p("zoom", i);
     }
@@ -55,27 +56,27 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       });
     }), (i, P) => {
       const B = de("RecursiveCircles", !0);
-      return a(!0), n(m, null, D(s.dataset, (h) => (a(), n(m, null, [
-        h.polygonPath && h.polygonPath.coordinates ? (a(), n(m, { key: 0 }, [
-          (a(!0), n(m, null, D(h.polygonPath.coordinates, (M, H) => (a(), n("circle", {
+      return s(!0), n(m, null, D(a.dataset, (h) => (s(), n(m, null, [
+        h.polygonPath && h.polygonPath.coordinates ? (s(), n(m, { key: 0 }, [
+          (s(!0), n(m, null, D(h.polygonPath.coordinates, (M, H) => (s(), n("circle", {
             cx: M.x,
             cy: M.y,
             r: h.circleRadius,
             fill: `url(#gradient_${h.color})`,
-            stroke: s.hoveredUid && s.hoveredUid === h.uid ? s.strokeHovered : s.stroke,
-            "stroke-width": s.hoveredUid && s.hoveredUid === h.uid ? h.circleRadius / 6 : h.circleRadius / 12,
+            stroke: a.hoveredUid && a.hoveredUid === h.uid ? a.strokeHovered : a.stroke,
+            "stroke-width": a.hoveredUid && a.hoveredUid === h.uid ? h.circleRadius / 6 : h.circleRadius / 12,
             style: { cursor: "pointer" },
             onClick: z((k) => r(h), ["stop"]),
             onMouseover: (k) => b(h),
             onMouseleave: P[0] || (P[0] = (k) => b(null))
-          }, null, 40, St))), 256)),
-          h.nodes && h.nodes.length > 0 ? (a(), S(B, {
+          }, null, 40, At))), 256)),
+          h.nodes && h.nodes.length > 0 ? (s(), S(B, {
             key: 0,
             dataset: h.nodes,
-            color: s.color,
-            stroke: s.stroke,
-            strokeHovered: s.strokeHovered,
-            hoveredUid: s.hoveredUid,
+            color: a.color,
+            stroke: a.stroke,
+            strokeHovered: a.strokeHovered,
+            hoveredUid: a.hoveredUid,
             onZoom: r,
             onHover: b
           }, null, 8, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : f("", !0)
@@ -83,7 +84,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ], 64))), 256);
     };
   }
-}, At = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Lt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ut = {
+}, Ut = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Dt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], It = {
   __name: "RecursiveLinks",
   props: {
     dataset: {
@@ -99,50 +100,50 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       default: "#FFFFFF"
     }
   },
-  setup(s) {
-    return ce(s, "dataset").value.forEach((p) => {
+  setup(a) {
+    return ce(a, "dataset").value.forEach((p) => {
       p.nodes && p.nodes.length > 0 && p.nodes.forEach((r) => {
         r.ancestor = p;
       });
     }), (p, r) => {
       const b = de("RecursiveLinks", !0);
-      return a(), n(m, null, [
-        (a(!0), n(m, null, D(s.dataset, (c) => (a(), n(m, null, [
-          c.polygonPath && c.polygonPath.coordinates ? (a(!0), n(m, { key: 0 }, D(c.polygonPath.coordinates, (i, P) => (a(), n(m, null, [
-            c.ancestor && c.ancestor.polygonPath ? (a(), n(m, { key: 0 }, [
+      return s(), n(m, null, [
+        (s(!0), n(m, null, D(a.dataset, (c) => (s(), n(m, null, [
+          c.polygonPath && c.polygonPath.coordinates ? (s(!0), n(m, { key: 0 }, D(c.polygonPath.coordinates, (i, P) => (s(), n(m, null, [
+            c.ancestor && c.ancestor.polygonPath ? (s(), n(m, { key: 0 }, [
               F("line", {
                 x1: i.x,
                 y1: i.y,
                 x2: c.ancestor.polygonPath.coordinates[0].x,
                 y2: c.ancestor.polygonPath.coordinates[0].y,
-                stroke: s.backgroundColor,
+                stroke: a.backgroundColor,
                 "stroke-width": c.circleRadius / 1.5
-              }, null, 8, At),
+              }, null, 8, Ut),
               F("line", {
                 x1: i.x,
                 y1: i.y,
                 x2: c.ancestor.polygonPath.coordinates[0].x,
                 y2: c.ancestor.polygonPath.coordinates[0].y,
-                stroke: s.color,
+                stroke: a.color,
                 "stroke-width": c.circleRadius / 2
-              }, null, 8, Lt)
+              }, null, 8, Dt)
             ], 64)) : f("", !0)
           ], 64))), 256)) : f("", !0)
         ], 64))), 256)),
-        (a(!0), n(m, null, D(s.dataset, (c) => (a(), n(m, null, [
-          c.polygonPath && c.polygonPath.coordinates ? (a(), n(m, { key: 0 }, [
-            c.nodes && c.nodes.length > 0 ? (a(), S(b, {
+        (s(!0), n(m, null, D(a.dataset, (c) => (s(), n(m, null, [
+          c.polygonPath && c.polygonPath.coordinates ? (s(), n(m, { key: 0 }, [
+            c.nodes && c.nodes.length > 0 ? (s(), S(b, {
               key: 0,
               dataset: c.nodes,
-              color: s.color,
-              backgroundColor: s.backgroundColor
+              color: a.color,
+              backgroundColor: a.backgroundColor
             }, null, 8, ["dataset", "color", "backgroundColor"])) : f("", !0)
           ], 64)) : f("", !0)
         ], 64))), 256))
       ], 64);
     };
   }
-}, Dt = ["x", "y", "fill", "font-size"], It = {
+}, Nt = ["x", "y", "fill", "font-size"], zt = {
   __name: "RecursiveLabels",
   props: {
     color: {
@@ -159,34 +160,34 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["zoom", "hover"],
-  setup(s, { emit: I }) {
-    return ce(s, "dataset").value.forEach((r) => {
+  setup(a, { emit: I }) {
+    return ce(a, "dataset").value.forEach((r) => {
       r.nodes && r.nodes.length > 0 && r.nodes.forEach((b) => {
         b.ancestor = r;
       });
     }), (r, b) => {
       const c = de("RecursiveLabels", !0);
-      return a(!0), n(m, null, D(s.dataset, (i) => (a(), n(m, null, [
-        i.polygonPath && i.polygonPath.coordinates ? (a(), n(m, { key: 0 }, [
-          (a(!0), n(m, null, D(i.polygonPath.coordinates, (P) => (a(), n("text", {
+      return s(!0), n(m, null, D(a.dataset, (i) => (s(), n(m, null, [
+        i.polygonPath && i.polygonPath.coordinates ? (s(), n(m, { key: 0 }, [
+          (s(!0), n(m, null, D(i.polygonPath.coordinates, (P) => (s(), n("text", {
             x: P.x,
             y: P.y + i.circleRadius * 2,
-            fill: s.color,
+            fill: a.color,
             "font-size": i.circleRadius,
             "text-anchor": "middle",
             style: { opacity: "0.8", "pointer-events": "none" }
-          }, Ie(i.name), 9, Dt))), 256)),
-          i.nodes && i.nodes.length > 0 ? (a(), S(c, {
+          }, Ie(i.name), 9, Nt))), 256)),
+          i.nodes && i.nodes.length > 0 ? (s(), S(c, {
             key: 0,
             dataset: i.nodes,
-            color: s.color,
-            hoveredUid: s.hoveredUid
+            color: a.color,
+            hoveredUid: a.hoveredUid
           }, null, 8, ["dataset", "color", "hoveredUid"])) : f("", !0)
         ], 64)) : f("", !0)
       ], 64))), 256);
     };
   }
-}, Nt = { style: { position: "relative", height: "100%", width: "100%" } }, zt = {
+}, Bt = { style: { position: "relative", height: "100%", width: "100%" } }, Mt = {
   __name: "BaseDirectionPad",
   props: {
     color: {
@@ -199,19 +200,19 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     }
   },
   emits: ["moveLeft", "moveTop", "moveRight", "moveBottom", "reset"],
-  setup(s, { emit: I }) {
+  setup(a, { emit: I }) {
     const R = I;
-    return (p, r) => (a(), n("div", {
-      style: _(`position: ${s.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${s.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
+    return (p, r) => (s(), n("div", {
+      style: _(`position: ${a.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${a.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
       "data-html2canvas-ignore": ""
     }, [
-      F("div", Nt, [
+      F("div", Bt, [
         F("button", {
           onClick: r[0] || (r[0] = z((b) => R("moveLeft"), ["stop"])),
           style: { position: "absolute", left: "0", top: "50%", transform: "translateY(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
           A(J, {
-            stroke: s.color,
+            stroke: a.color,
             name: "arrowLeft",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
@@ -221,7 +222,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           style: { position: "absolute", top: "0", left: "50%", transform: "translateX(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
           A(J, {
-            stroke: s.color,
+            stroke: a.color,
             name: "arrowTop",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
@@ -231,7 +232,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           style: { position: "absolute", right: "0", top: "50%", transform: "translateY(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
           A(J, {
-            stroke: s.color,
+            stroke: a.color,
             name: "arrowRight",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
@@ -241,7 +242,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           style: { position: "absolute", bottom: "0", left: "50%", transform: "translateX(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
           A(J, {
-            stroke: s.color,
+            stroke: a.color,
             name: "arrowBottom",
             style: { cursor: "pointer" }
           }, null, 8, ["stroke"])
@@ -251,7 +252,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
         }, [
           A(J, {
-            stroke: s.color,
+            stroke: a.color,
             name: "close",
             style: { cursor: "pointer" },
             strokeWidth: 2
@@ -260,22 +261,22 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       ])
     ], 4));
   }
-}, Bt = ["id"], Mt = {
+}, Ht = ["id"], Et = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, Ht = {
+}, Vt = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, Et = ["xmlns", "viewBox"], Vt = ["width", "height"], Xt = ["id"], jt = ["stop-color"], Gt = ["stop-color"], Yt = {
+}, Xt = ["xmlns", "viewBox"], jt = ["width", "height"], Gt = ["id"], Yt = ["stop-color"], Wt = ["stop-color"], qt = {
   key: 6,
   class: "vue-data-ui-watermark"
-}, Wt = {
+}, Zt = {
   key: 8,
   ref: "source",
   dir: "auto"
-}, qt = ["innerHTML"], Zt = {
+}, Jt = ["innerHTML"], Kt = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -291,13 +292,13 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
     }
   },
-  setup(s, { expose: I }) {
-    const { vue_ui_molecule: R } = st(), p = s, r = U(() => !!p.dataset && p.dataset.length);
-    tt(() => {
+  setup(a, { expose: I }) {
+    const { vue_ui_molecule: R } = nt(), p = a, r = U(() => !!p.dataset && p.dataset.length);
+    ot(() => {
       b();
     });
     function b() {
-      nt(p.dataset) && rt({
+      rt(p.dataset) && it({
         componentName: "VueUiMolecule",
         type: "dataset"
       });
@@ -305,7 +306,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     const c = v(Le()), i = v(null), P = v(!1), B = v(""), h = v(null), M = v(null), H = v(!1), k = v(null), ve = v(null), ee = v(0), he = v(0), fe = v(0), t = U({
       get: () => ye(),
       set: (e) => e
-    }), { userOptionsVisible: te, setUserOptionsVisibility: pe, keepUserOptionState: ge } = Ft({ config: t.value });
+    }), { userOptionsVisible: te, setUserOptionsVisibility: pe, keepUserOptionState: ge } = Rt({ config: t.value }), { svgRef: Ne } = St({ config: t.value.style.chart.title });
     function ye() {
       const e = De({
         userConfig: p.config,
@@ -313,19 +314,19 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       });
       return e.theme ? {
         ...De({
-          userConfig: ut.vue_ui_molecule[e.theme] || p.config,
+          userConfig: ct.vue_ui_molecule[e.theme] || p.config,
           defaultConfig: e
         }),
-        customPalette: it[e.theme] || Ue
+        customPalette: ut[e.theme] || Ue
       } : e;
     }
-    ot(() => p.config, (e) => {
+    lt(() => p.config, (e) => {
       t.value = ye(), te.value = !t.value.userOptions.showOnChartHover, b(), he.value += 1, fe.value += 1, w.value.showTable = t.value.table.show, w.value.showTooltip = t.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: me, isImaging: be, generatePdf: ke, generateImage: Ce } = bt({
+    const { isPrinting: me, isImaging: be, generatePdf: ke, generateImage: Ce } = kt({
       elementId: `cluster_${c.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-molecule"
-    }), Ne = U(() => t.value.userOptions.show && !t.value.style.chart.title.text), ze = U(() => ct(t.value.customPalette)), w = v({
+    }), ze = U(() => t.value.userOptions.show && !t.value.style.chart.title.text), Be = U(() => dt(t.value.customPalette)), w = v({
       showTable: t.value.table.show,
       showDataLabels: !0,
       showTooltip: t.value.style.chart.tooltip.show
@@ -333,7 +334,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     function $e(e, o = 0) {
       return Array.isArray(e) && e.length > 0 && e[0].nodes ? $e(e[0].nodes, o + 1) : o;
     }
-    function Be() {
+    function Me() {
       const e = $e(p.dataset);
       let o = 100, l = o;
       for (let d = 0; d < e; d += 1)
@@ -343,10 +344,10 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         width: l
       };
     }
-    const T = v(Be()), oe = v(`0 0 ${T.value.width} ${T.value.height}`);
+    const T = v(Me()), oe = v(`0 0 ${T.value.width} ${T.value.height}`);
     function we(e, o = { x: -T.value.width / 2.43, y: T.value.height / 2 }, l = T.value.width / 1.1, d = 24, u = 0, g = 0, G = "#BBBBBB") {
       if (e && e.length > 0) {
-        const ie = ht({
+        const ie = ft({
           plot: o,
           radius: l,
           sides: e.length,
@@ -355,7 +356,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         e.forEach((y, N) => {
           const Y = ie.coordinates[N];
           let L;
-          if (y.ancestor ? y.ancestor.ancestor ? L = y.ancestor.color || G : (L = ze.value[g] || Ue[g] || G, g += 1) : L = G, y.polygonPath = {
+          if (y.ancestor ? y.ancestor.ancestor ? L = y.ancestor.color || G : (L = Be.value[g] || Ue[g] || G, g += 1) : L = G, y.polygonPath = {
             coordinates: [Y]
           }, y.circleRadius = d, y.color = L, y.uid = Le(), y.nodes && y.nodes.length > 0) {
             const ue = !y.ancestor || !y.ancestor.ancestor ? g : 0;
@@ -373,7 +374,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
       return e;
     }
-    function Me(e) {
+    function He(e) {
       const o = /* @__PURE__ */ new Set();
       function l(u) {
         u.forEach((g) => {
@@ -386,43 +387,43 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         d[u] = `gradient_${g}`;
       }), d;
     }
-    const He = U(() => Me(O.value)), O = U(() => we(p.dataset));
+    const Ee = U(() => He(O.value)), O = U(() => we(p.dataset));
     function le() {
-      H.value = !1, M.value = null, ve.value = null, k.value = null, se({
+      H.value = !1, M.value = null, ve.value = null, k.value = null, ae({
         polygonPath: {
           coordinates: [{ x: T.value.width / 2, y: T.value.height / 2 }]
         },
         circleRadius: 24
       });
     }
-    const ae = v(null);
-    function se(e) {
+    const se = v(null);
+    function ae(e) {
       h.value.focus(), Ae(() => {
-        ae.value && cancelAnimationFrame(ae.value);
-        const o = oe.value.split(" "), l = parseFloat(o[0]), d = parseFloat(o[1]), u = parseFloat(o[2]), g = parseFloat(o[3]), { x: G, y: ie } = e.polygonPath.coordinates[0], { circleRadius: y } = e, N = 8.34, Y = G - y * N, L = ie - y * N, ue = y * N * 2, Ze = y * N * 2, Je = Math.sqrt((Y - l) ** 2 + (L - d) ** 2), W = Math.min(1200, Math.max(20, Math.floor(Je / 10))), Ke = (Y - l) / W, Qe = (L - d) / W, _e = (ue - u) / W, et = (Ze - g) / W;
+        se.value && cancelAnimationFrame(se.value);
+        const o = oe.value.split(" "), l = parseFloat(o[0]), d = parseFloat(o[1]), u = parseFloat(o[2]), g = parseFloat(o[3]), { x: G, y: ie } = e.polygonPath.coordinates[0], { circleRadius: y } = e, N = 8.34, Y = G - y * N, L = ie - y * N, ue = y * N * 2, Je = y * N * 2, Ke = Math.sqrt((Y - l) ** 2 + (L - d) ** 2), W = Math.min(1200, Math.max(20, Math.floor(Ke / 10))), Qe = (Y - l) / W, _e = (L - d) / W, et = (ue - u) / W, tt = (Je - g) / W;
         let X = 0;
         function Se() {
-          oe.value = `${l + Ke * X} ${d + Qe * X} ${u + _e * X} ${g + et * X}`, X += t.value.style.chart.zoom.speed, X <= W && (ae.value = requestAnimationFrame(Se));
+          oe.value = `${l + Qe * X} ${d + _e * X} ${u + et * X} ${g + tt * X}`, X += t.value.style.chart.zoom.speed, X <= W && (se.value = requestAnimationFrame(Se));
         }
         Se();
       });
     }
-    function Ee(e) {
+    function Ve(e) {
       M.value === e.uid ? le() : (M.value = e.uid, ve.value = e, k.value = {
         circleRadius: e.circleRadius,
         polygonPath: {
           coordinates: [{ x: e.polygonPath.coordinates[0].x, y: e.polygonPath.coordinates[0].y }]
         }
-      }, se(e), H.value = e.uid !== O.value[0].uid);
+      }, ae(e), H.value = e.uid !== O.value[0].uid);
     }
-    function Ve(e) {
+    function Xe(e) {
       if (e.target.nodeName !== "circle")
         le(), H.value = !1;
       else
         return;
     }
     const ne = v(null);
-    function Xe(e) {
+    function je(e) {
       ne.value = {
         datapoint: e,
         seriesIndex: -1,
@@ -430,7 +431,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         config: t.value
       };
       const o = t.value.style.chart.tooltip.customFormat;
-      if (gt(o) && yt(() => o({
+      if (yt(o) && mt(() => o({
         seriesIndex: -1,
         datapoint: e,
         series: O.value,
@@ -449,13 +450,13 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
     }
     const xe = v(null), j = v(null);
-    function je(e) {
-      xe.value = e, e ? (P.value = !0, Xe(e), j.value = e.uid) : (P.value = !1, B.value = "", j.value = null);
+    function Ge(e) {
+      xe.value = e, e ? (P.value = !0, je(e), j.value = e.uid) : (P.value = !1, B.value = "", j.value = null);
     }
     function K(e) {
-      e === "right" && (k.value.polygonPath.coordinates[0].x += k.value.circleRadius), e === "left" && (k.value.polygonPath.coordinates[0].x -= k.value.circleRadius), e === "top" && (k.value.polygonPath.coordinates[0].y -= k.value.circleRadius), e === "bottom" && (k.value.polygonPath.coordinates[0].y += k.value.circleRadius), se(k.value);
+      e === "right" && (k.value.polygonPath.coordinates[0].x += k.value.circleRadius), e === "left" && (k.value.polygonPath.coordinates[0].x -= k.value.circleRadius), e === "top" && (k.value.polygonPath.coordinates[0].y -= k.value.circleRadius), e === "bottom" && (k.value.polygonPath.coordinates[0].y += k.value.circleRadius), ae(k.value);
     }
-    function Ge(e) {
+    function Ye(e) {
       const o = [];
       function l(d) {
         d.forEach((u) => {
@@ -470,12 +471,12 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }
       return l(e), o;
     }
-    const Ye = U(() => Ge(O.value)), E = U(() => {
+    const We = U(() => Ye(O.value)), E = U(() => {
       const e = [
         t.value.table.translations.nodeName,
         t.value.table.translations.details,
         t.value.table.translations.ancestor
-      ], o = Ye.value.map((u, g) => [
+      ], o = We.value.map((u, g) => [
         {
           color: u.color,
           name: u.name
@@ -508,15 +509,15 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
     });
     function Pe() {
       Ae(() => {
-        const e = E.value.body.map((d, u) => [[d[0].name], [d[1]], [d[2]]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[...E.value.head]]].concat(e), l = ft(o);
-        pt({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-molecule" });
+        const e = E.value.body.map((d, u) => [[d[0].name], [d[1]], [d[2]]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[...E.value.head]]].concat(e), l = pt(o);
+        gt({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
-    function We() {
+    function qe() {
       return O.value;
     }
     const V = v(!1);
-    function qe(e) {
+    function Ze(e) {
       V.value = e, ee.value += 1;
     }
     function Te() {
@@ -533,7 +534,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       Q.value = !Q.value;
     }
     return I({
-      getData: We,
+      getData: qe,
       generatePdf: ke,
       generateCsv: Pe,
       generateImage: Ce,
@@ -541,7 +542,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       toggleLabels: Fe,
       toggleTooltip: Re,
       toggleAnnotator: re
-    }), (e, o) => (a(), n("div", {
+    }), (e, o) => (s(), n("div", {
       ref_key: "moleculeChart",
       ref: h,
       class: Oe(`vue-ui-molecule ${V.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
@@ -552,7 +553,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
       }),
       onMouseenter: o[8] || (o[8] = () => C(pe)(!0))
     }, [
-      t.value.userOptions.buttons.annotator ? (a(), S(Tt, {
+      t.value.userOptions.buttons.annotator ? (s(), S(Ft, {
         key: 0,
         parent: h.value,
         backgroundColor: t.value.style.chart.backgroundColor,
@@ -560,9 +561,9 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         active: Q.value,
         onClose: re
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : f("", !0),
-      Ne.value ? (a(), n("div", Mt, null, 512)) : f("", !0),
-      t.value.style.chart.title.text ? (a(), n("div", Ht, [
-        (a(), S(mt, {
+      ze.value ? (s(), n("div", Et, null, 512)) : f("", !0),
+      t.value.style.chart.title.text ? (s(), n("div", Vt, [
+        (s(), S(bt, {
           key: `title_${he.value}`,
           config: {
             title: {
@@ -576,7 +577,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }, null, 8, ["config"]))
       ])) : f("", !0),
-      t.value.userOptions.show && r.value && (C(ge) || C(te)) ? (a(), S(kt, {
+      t.value.userOptions.show && r.value && (C(ge) || C(te)) ? (s(), S(Ct, {
         ref_key: "details",
         ref: i,
         key: `user_options_${ee.value}`,
@@ -598,7 +599,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         position: t.value.userOptions.position,
         hasAnnotator: t.value.userOptions.buttons.annotator,
         isAnnotation: Q.value,
-        onToggleFullscreen: qe,
+        onToggleFullscreen: Ze,
         onGeneratePdf: C(ke),
         onGenerateCsv: Pe,
         onGenerateImage: C(Ce),
@@ -609,7 +610,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         style: _({
           visibility: C(ge) ? C(te) ? "visible" : "hidden" : "visible"
         })
-      }, lt({ _: 2 }, [
+      }, st({ _: 2 }, [
         e.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: x(() => [
@@ -667,16 +668,18 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
-      r.value ? (a(), n("svg", {
+      r.value ? (s(), n("svg", {
         key: 4,
-        xmlns: C(dt),
+        ref_key: "svgRef",
+        ref: Ne,
+        xmlns: C(vt),
         viewBox: oe.value,
         class: Oe({ "vue-data-ui-fullscreen--on": V.value, "vue-data-ui-fulscreen--off": !V.value }),
         style: _(`overflow: hidden; background:transparent;color:${t.value.style.chart.color}`),
-        onClick: o[0] || (o[0] = z((l) => Ve(l), ["stop"]))
+        onClick: o[0] || (o[0] = z((l) => Xe(l), ["stop"]))
       }, [
-        A(Pt),
-        e.$slots["chart-background"] ? (a(), n("foreignObject", {
+        A(Tt),
+        e.$slots["chart-background"] ? (s(), n("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -687,9 +690,9 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }, [
           $(e.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Vt)) : f("", !0),
+        ], 8, jt)) : f("", !0),
         F("defs", null, [
-          (a(!0), n(m, null, D(Object.keys(He.value), (l) => (a(), n("radialGradient", {
+          (s(!0), n(m, null, D(Object.keys(Ee.value), (l) => (s(), n("radialGradient", {
             id: `gradient_${l}`,
             cx: "50%",
             cy: "30%",
@@ -699,36 +702,36 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }, [
             F("stop", {
               offset: "0%",
-              "stop-color": C(vt)(l, 0.5)
-            }, null, 8, jt),
+              "stop-color": C(ht)(l, 0.5)
+            }, null, 8, Yt),
             F("stop", {
               offset: "100%",
               "stop-color": l
-            }, null, 8, Gt)
-          ], 8, Xt))), 256))
+            }, null, 8, Wt)
+          ], 8, Gt))), 256))
         ]),
-        A(Ut, {
+        A(It, {
           dataset: O.value,
           color: t.value.style.chart.links.stroke,
           backgroundColor: t.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        A(Ot, {
+        A(Lt, {
           dataset: O.value,
           hoveredUid: j.value,
           stroke: t.value.style.chart.nodes.stroke,
           strokeHovered: t.value.style.chart.nodes.strokeHovered,
-          onZoom: Ee,
-          onHover: je
+          onZoom: Ve,
+          onHover: Ge
         }, null, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        w.value.showDataLabels ? (a(), S(It, {
+        w.value.showDataLabels ? (s(), S(zt, {
           key: 1,
           dataset: O.value,
           color: t.value.style.chart.color,
           hoveredUid: j.value
         }, null, 8, ["dataset", "color", "hoveredUid"])) : f("", !0),
         $(e.$slots, "svg", { svg: T.value }, void 0, !0)
-      ], 14, Et)) : f("", !0),
-      H.value ? (a(), S(zt, {
+      ], 14, Xt)) : f("", !0),
+      H.value ? (s(), S(Mt, {
         key: `direction_pad_${ee.value}`,
         color: t.value.style.chart.color,
         isFullscreen: V.value,
@@ -740,10 +743,10 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           le(), H.value = !1;
         })
       }, null, 8, ["color", "isFullscreen"])) : f("", !0),
-      e.$slots.watermark ? (a(), n("div", Yt, [
+      e.$slots.watermark ? (s(), n("div", qt, [
         $(e.$slots, "watermark", q(Z({ isPrinting: C(me) || C(be) })), void 0, !0)
       ])) : f("", !0),
-      r.value ? f("", !0) : (a(), S(wt, {
+      r.value ? f("", !0) : (s(), S(xt, {
         key: 7,
         config: {
           type: "molecule",
@@ -755,10 +758,10 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
           }
         }
       }, null, 8, ["config"])),
-      e.$slots.source ? (a(), n("div", Wt, [
+      e.$slots.source ? (s(), n("div", Zt, [
         $(e.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      A($t, {
+      A(wt, {
         show: w.value.showTooltip && P.value,
         backgroundColor: t.value.style.chart.tooltip.backgroundColor,
         color: t.value.style.chart.tooltip.color,
@@ -782,7 +785,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      r.value ? (a(), S(xt, {
+      r.value ? (s(), S(Pt, {
         key: 9,
         hideDetails: "",
         config: {
@@ -799,7 +802,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         }
       }, {
         content: x(() => [
-          (a(), S(Ct, {
+          (s(), S($t, {
             key: `table_${fe.value}`,
             colNames: E.value.colNames,
             head: E.value.head,
@@ -812,7 +815,7 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
               F("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, qt)
+              }, null, 8, Jt)
             ]),
             td: x(({ td: l }) => [
               at(Ie(l.name || l), 1)
@@ -822,9 +825,9 @@ const St = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMou
         ]),
         _: 1
       }, 8, ["config"])) : f("", !0)
-    ], 46, Bt));
+    ], 46, Ht));
   }
-}, co = /* @__PURE__ */ Rt(Zt, [["__scopeId", "data-v-c9ee14bc"]]);
+}, fo = /* @__PURE__ */ Ot(Kt, [["__scopeId", "data-v-52f81e11"]]);
 export {
-  co as default
+  fo as default
 };