vue-data-ui 3.0.15 → 3.0.17

package/dist/{vue-ui-relation-circle-CkJugcvo.js → vue-ui-relation-circle-C-bGpsP0.js}

@@ -1,18 +1,19 @@
-import { useCssVars as nt, computed as h, defineAsyncComponent as Q, ref as o, toRefs as ut, watch as Z, shallowRef as Ce, onMounted as rt, onBeforeUnmount as ot, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as O, createBlock as N, createCommentVNode as f, createSlots as ct, withCtx as M, renderSlot as g, normalizeProps as j, guardReactiveProps as D, normalizeClass as ee, createVNode as vt, createElementVNode as dt, Fragment as $, renderList as z, mergeProps as Le, toDisplayString as U, createTextVNode as Pe } from "vue";
-import { u as ft, c as yt, t as ht, a as gt, p as Oe, b as mt, d as pt, o as ze, f as Ie, g as kt, X as bt, F as Me, k as te, i as le, E as se } from "./index-CjmWQAkv.js";
-import { t as wt, u as xt } from "./useResponsive-DfdjqQps.js";
-import { u as $t, B as At } from "./useLoading-D7YHNtLX.js";
-import { u as _t } from "./usePrinter-BD_X6xEq.js";
-import { u as Se } from "./useNestedProp-DFYUwW_F.js";
-import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Lt } from "./useChartAccessibility-9icAAmYg.js";
-import Pt from "./img-7sjXtnNU.js";
-import Ot from "./Title-Cdu-aDOL.js";
-import { _ as zt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["cx", "cy", "r", "stroke", "stroke-width"], Bt = { key: 1 }, Ft = ["stroke", "d", "stroke-width"], Tt = { style: { "pointer-events": "none" } }, Rt = ["cx", "cy", "fill", "r", "stroke"], Nt = ["x", "y", "fill", "font-size"], jt = { key: 2 }, Dt = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Ut = { style: { "pointer-events": "none" } }, Gt = ["cx", "cy", "fill", "r", "stroke"], Vt = ["x", "y", "fill", "font-size"], Wt = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], Xt = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], Yt = {
+import { useCssVars as ut, computed as h, defineAsyncComponent as Z, ref as r, toRefs as ot, watch as ee, shallowRef as Le, onMounted as rt, onBeforeUnmount as ct, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as z, createBlock as N, createCommentVNode as f, createSlots as vt, withCtx as M, renderSlot as g, normalizeProps as j, guardReactiveProps as D, normalizeClass as te, createVNode as dt, createElementVNode as ft, Fragment as $, renderList as O, mergeProps as Pe, toDisplayString as U, createTextVNode as ze } from "vue";
+import { u as yt, c as ht, t as gt, a as mt, p as Oe, b as pt, d as bt, o as Se, f as Ie, g as kt, X as wt, F as Me, k as le, i as se, E as ae } from "./index-FPxvoief.js";
+import { t as xt, u as $t } from "./useResponsive-DfdjqQps.js";
+import { u as At, B as _t } from "./useLoading-D7YHNtLX.js";
+import { u as Ct } from "./usePrinter-M0JhvX8r.js";
+import { u as Ee } from "./useNestedProp-DzVMdkPE.js";
+import { u as Lt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Pt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as zt } from "./useAutoSizeLabelsInsideViewbox-BOEYVAI_.js";
+import Ot from "./img-CUZp-9tT.js";
+import St from "./Title-D_WUff_Y.js";
+import { _ as It } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["cx", "cy", "r", "stroke", "stroke-width"], Rt = { key: 1 }, Tt = ["stroke", "d", "stroke-width"], Nt = { style: { "pointer-events": "none" } }, jt = ["cx", "cy", "fill", "r", "stroke"], Dt = ["x", "y", "fill", "font-size"], Ut = { key: 2 }, Vt = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Gt = { style: { "pointer-events": "none" } }, Wt = ["cx", "cy", "fill", "r", "stroke"], Xt = ["x", "y", "fill", "font-size"], Yt = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], qt = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], Ht = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, qt = {
+}, Jt = {
   __name: "vue-ui-relation-circle",
   props: {
     dataset: {
@@ -28,16 +29,16 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
       }
     }
   },
-  setup(Ee, { expose: Be }) {
-    nt((e) => ({
-      "3ea1ca4e": Xe.value,
-      "5faa9838": We.value,
-      f74c4bcc: Ye.value
+  setup(Fe, { expose: Be }) {
+    ut((e) => ({
+      "51791a0b": Ye.value,
+      "501dae6a": Xe.value,
+      "2abe5668": qe.value
     }));
-    const Fe = Q(() => import("./PenAndPaper-C5tGS7J9.js")), Te = Q(() => import("./UserOptions-BMoiHEKE.js")), Re = Q(() => import("./PackageVersion-DkN4tXY6.js")), { vue_ui_relation_circle: Ne } = ft(), m = Ee, je = h(() => !!m.dataset && Object.keys(m.dataset).length), I = o(yt()), ae = o(0), A = o(null), ie = o(null), ne = o(null), ue = o(null), re = o(0), l = o(W()), { loading: oe, FINAL_DATASET: De, manualLoading: G } = $t({
-      ...ut(m),
+    const Re = Z(() => import("./PenAndPaper-ByuyUNh2.js")), Te = Z(() => import("./UserOptions-ZcUANK_c.js")), Ne = Z(() => import("./PackageVersion-CvI7dfPE.js")), { vue_ui_relation_circle: je } = yt(), m = Fe, De = h(() => !!m.dataset && Object.keys(m.dataset).length), S = r(ht()), ie = r(0), A = r(null), ne = r(null), ue = r(null), oe = r(null), re = r(0), l = r(X()), { loading: ce, FINAL_DATASET: Ue, manualLoading: V } = At({
+      ...ot(m),
       FINAL_CONFIG: l,
-      prepareConfig: W,
+      prepareConfig: X,
       skeletonDataset: [
         { id: "A", label: "_", relations: ["B", "C", "D", "E", "F", "G"] },
         { id: "B", label: "_", relations: ["A"] },
@@ -47,7 +48,7 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
         { id: "F", label: "_", relations: ["A"] },
         { id: "G", label: "_", relations: ["A"] }
       ],
-      skeletonConfig: ht({
+      skeletonConfig: gt({
         defaultConfig: l.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -61,30 +62,30 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
           }
         }
       })
-    }), { userOptionsVisible: V, setUserOptionsVisibility: ce, keepUserOptionState: ve } = Ct({ config: l.value }), { svgRef: de } = Lt({ config: l.value.style.title });
-    function W() {
-      const e = Se({
+    }), { userOptionsVisible: G, setUserOptionsVisibility: ve, keepUserOptionState: de } = Lt({ config: l.value }), { svgRef: W } = Pt({ config: l.value.style.title });
+    function X() {
+      const e = Ee({
         userConfig: m.config,
-        defaultConfig: Ne
+        defaultConfig: je
       });
       return e.theme ? {
-        ...Se({
-          userConfig: mt.vue_ui_relation_circle[e.theme] || m.config,
+        ...Ee({
+          userConfig: pt.vue_ui_relation_circle[e.theme] || m.config,
           defaultConfig: e
         }),
-        customPalette: gt[e.theme] || Oe
+        customPalette: mt[e.theme] || Oe
       } : e;
     }
-    Z(() => m.config, (e) => {
-      l.value = W(), V.value = !l.value.userOptions.showOnChartHover, _.value = l.value.style.size, y.value = l.value.style.weightLabels.size, E.value = l.value.style.plot.radius, B.value = l.value.style.labels.fontSize, r.value.height = l.value.style.size, r.value.width = l.value.style.size, ke(), re.value += 1;
-    }, { deep: !0 }), Z(() => m.dataset, (e) => {
-      Array.isArray(e) && e.length > 0 && (G.value = !1);
+    ee(() => m.config, (e) => {
+      l.value = X(), G.value = !l.value.userOptions.showOnChartHover, _.value = l.value.style.size, y.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, I.value = l.value.style.labels.fontSize, o.value.height = l.value.style.size, o.value.width = l.value.style.size, be(), re.value += 1;
+    }, { deep: !0 }), ee(() => m.dataset, (e) => {
+      Array.isArray(e) && e.length > 0 && (V.value = !1);
     }, { deep: !0 });
-    const { isPrinting: fe, isImaging: ye, generatePdf: he, generateImage: ge } = _t({
-      elementId: `relation_circle_${I.value}`,
+    const { isPrinting: fe, isImaging: ye, generatePdf: he, generateImage: ge } = Ct({
+      elementId: `relation_circle_${S.value}`,
       fileName: l.value.style.title.text || "vue-ui-relation-circle",
       options: l.value.userOptions.print
-    }), Ue = h(() => l.value.userOptions.show && !l.value.style.title.text), me = h(() => pt(l.value.customPalette)), b = o([]), p = o([]), d = o({}), k = o([]), Ge = o(0), S = h(() => De.value.slice(0, l.value.style.limit).map((e) => {
+    }), Ve = h(() => l.value.userOptions.show && !l.value.style.title.text), me = h(() => bt(l.value.customPalette)), k = r([]), p = r([]), d = r({}), b = r([]), Ge = r(0), E = h(() => Ue.value.slice(0, l.value.style.limit).map((e) => {
       const s = Array.isArray(e.relations) ? e.relations : [];
       return {
         ...e,
@@ -92,10 +93,10 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
         relations: s
       };
     }));
-    Z(S, () => {
-      b.value = [], p.value = [], X(), Y();
+    ee(E, () => {
+      k.value = [], p.value = [], Y(), q();
     });
-    const _ = o(l.value.style.size), y = o(l.value.style.weightLabels.size), E = o(l.value.style.plot.radius), B = o(l.value.style.labels.fontSize), r = o({
+    const _ = r(l.value.style.size), y = r(l.value.style.weightLabels.size), F = r(l.value.style.plot.radius), I = r(l.value.style.labels.fontSize), o = r({
       height: l.value.style.size,
       width: l.value.style.size
     }), C = h({
@@ -105,17 +106,17 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
       set(e) {
         return e;
       }
-    }), Ve = h(() => l.value.style.links.curved), We = h(() => `${l.value.style.animation.speedMs}ms`), Xe = h(() => C.value * 2), Ye = h(() => C.value * 4), w = Ce(null), L = Ce(null);
+    }), We = h(() => l.value.style.links.curved), Xe = h(() => `${l.value.style.animation.speedMs}ms`), Ye = h(() => C.value * 2), qe = h(() => C.value * 4), w = Le(null), L = Le(null);
     rt(() => {
-      ke(), document.getElementById(`relation_circle_${I.value}`).addEventListener("click", be);
+      be(), document.getElementById(`relation_circle_${S.value}`).addEventListener("click", we);
     });
     const pe = h(() => l.value.debug);
-    function ke() {
-      if (ze(m.dataset) ? (Ie({
+    function be() {
+      if (Se(m.dataset) ? (Ie({
         componentName: "VueUiRelationCircle",
         type: "dataset",
         debug: pe.value
-      }), G.value = !0) : m.dataset.forEach((e, s) => {
+      }), V.value = !0) : m.dataset.forEach((e, s) => {
         kt({
           datasetObject: e,
           requiredAttributes: ["id", "label", "relations", "weights"]
@@ -128,62 +129,70 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
             debug: pe.value
           });
         });
-      }), ze(m.dataset) || (G.value = l.value.loading), l.value.responsive) {
-        const e = wt(() => {
-          const { width: s, height: t } = xt({
+      }), Se(m.dataset) || (V.value = l.value.loading), l.value.responsive) {
+        const e = xt(() => {
+          const { width: s, height: t } = $t({
             chart: A.value,
-            title: l.value.style.title.text ? ie.value : null,
-            source: ne.value,
-            noTitle: ue.value
+            title: l.value.style.title.text ? ne.value : null,
+            source: ue.value,
+            noTitle: oe.value
           });
           requestAnimationFrame(() => {
-            _.value = Math.min(s, t), r.value.width = Math.max(0.1, s), r.value.height = Math.max(0.1, t - 12), C.value = _.value * l.value.style.circle.radiusProportion, b.value = [], p.value = [], X(), Y(), l.value.responsiveProportionalSizing ? (y.value = se({
+            _.value = Math.min(s, t), o.value.width = Math.max(0.1, s), o.value.height = Math.max(0.1, t - 12), C.value = _.value * l.value.style.circle.radiusProportion, k.value = [], p.value = [], Y(), q(), ke(), l.value.responsiveProportionalSizing ? (y.value = ae({
               relator: _.value,
               adjuster: l.value.style.size,
               source: l.value.style.weightLabels.size,
               threshold: 6,
               fallback: 6
-            }), E.value = se({
+            }), F.value = ae({
               relator: _.value,
               adjuster: l.value.style.size,
               source: l.value.style.plot.radius,
               threshold: 1,
               fallback: 1
-            }), B.value = se({
+            }), I.value = ae({
               relator: _.value,
               adjuster: l.value.style.size,
               source: l.value.style.labels.fontSize,
               threshold: 6,
               fallback: 6
-            })) : (y.value = l.value.style.weightLabels.size, E.value = l.value.style.plot.radius, B.value = l.value.style.labels.fontSize);
+            })) : (y.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, I.value = l.value.style.labels.fontSize);
           });
         });
         w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect()), w.value = new ResizeObserver(e), L.value = A.value.parentNode, w.value.observe(L.value);
       } else
-        b.value = [], p.value = [], X(), Y();
+        k.value = [], p.value = [], Y(), q();
+      ke();
     }
-    ot(() => {
-      document.getElementById(`relation_circle_${I.value}`).removeEventListener("click", be), w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect());
+    ct(() => {
+      document.getElementById(`relation_circle_${S.value}`).removeEventListener("click", we), w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect());
+    });
+    const { autoSizeLabels: ke } = zt({
+      svgRef: W,
+      fontSize: l.value.style.labels.fontSize,
+      minFontSize: l.value.style.labels.minFontSize,
+      sizeRef: I,
+      labelClass: ".vue-ui-relation-circle-legend"
     });
-    function be(e) {
+    function we(e) {
       const s = e.target;
-      s && Array.from(s.classList).includes("vue-ui-user-options") || s && Array.from(s.classList).includes("vue-ui-user-options-summary") || s && Array.from(s.classList).includes("vue-data-ui-button") || s && Array.from(s.classList).includes("vue-ui-relation-circle-legend") || (d.value = {}, k.value = []);
+      s && Array.from(s.classList).includes("vue-ui-user-options") || s && Array.from(s.classList).includes("vue-ui-user-options-summary") || s && Array.from(s.classList).includes("vue-data-ui-button") || s && Array.from(s.classList).includes("vue-ui-relation-circle-legend") || (d.value = {}, b.value = []);
     }
-    function X() {
-      const e = 6.28319 / S.value.length, s = 360 / S.value.length;
+    function Y() {
+      const e = 6.28319 / E.value.length, s = 360 / E.value.length;
       let t = 0, a = 0;
-      S.value.forEach((c, v) => {
-        const J = c.weights.reduce((at, it) => at + it, 0), K = C.value * Math.cos(t) + r.value.width / 2, st = C.value * Math.sin(t) + r.value.height / 2 + l.value.style.circle.offsetY;
-        b.value.push({ x: K, y: st, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: a, totalWeight: J }), t += e, a += s;
+      E.value.forEach((c, v) => {
+        const K = c.weights.reduce((it, nt) => it + nt, 0), Q = C.value * Math.cos(t) + o.value.width / 2, at = C.value * Math.sin(t) + o.value.height / 2 + l.value.style.circle.offsetY;
+        k.value.push({ x: Q, y: at, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: a, totalWeight: K }), t += e, a += s;
       });
     }
-    function qe(e, s) {
+    function He(e, s) {
       const t = (e.x + s.x) / 2, a = (e.y + s.y) / 2;
       return { x: t, y: a };
     }
-    function Y() {
-      p.value = [], b.value.forEach((e) => {
-        b.value.filter((t) => t.relations.includes(e.id)).forEach((t, a) => {
+    function q() {
+      p.value = [], k.value.forEach((e) => {
+        k.value.filter((t) => t.relations.includes(e.id)).forEach((t, a) => {
           const c = t.relations.indexOf(e.id);
           p.value.push({
             weight: t.weights[c] ? t.weights[c] : 0,
@@ -194,8 +203,8 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
             y2: t.y,
             colorSource: e.color,
             colorTarget: t.color,
-            midPointLine: qe({ x: e.x, y: e.y }, { x: t.x, y: t.y }),
-            midPointBezier: He({
+            midPointLine: He({ x: e.x, y: e.y }, { x: t.x, y: t.y }),
+            midPointBezier: Je({
               x1: e.x,
               x2: t.x,
               y1: e.y,
@@ -206,63 +215,63 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
         });
       });
     }
-    function He(e) {
+    function Je(e) {
       const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, a = { x: e.x1, y: e.y1 }, c = {
-        x: r.value.width / 2,
-        y: r.value.height / 2 + l.value.style.circle.offsetY
-      }, v = 0.5, J = Math.pow(1 - v, 3) * s.x + 3 * Math.pow(1 - v, 2) * v * a.x + 3 * (1 - v) * Math.pow(v, 2) * c.x + Math.pow(v, 3) * t.x, K = Math.pow(1 - v, 3) * s.y + 3 * Math.pow(1 - v, 2) * v * a.y + 3 * (1 - v) * Math.pow(v, 2) * c.y + Math.pow(v, 3) * t.y;
-      return { x: J, y: K };
+        x: o.value.width / 2,
+        y: o.value.height / 2 + l.value.style.circle.offsetY
+      }, v = 0.5, K = Math.pow(1 - v, 3) * s.x + 3 * Math.pow(1 - v, 2) * v * a.x + 3 * (1 - v) * Math.pow(v, 2) * c.x + Math.pow(v, 3) * t.x, Q = Math.pow(1 - v, 3) * s.y + 3 * Math.pow(1 - v, 2) * v * a.y + 3 * (1 - v) * Math.pow(v, 2) * c.y + Math.pow(v, 3) * t.y;
+      return { x: K, y: Q };
     }
-    const Je = h(() => Math.max(...p.value.map((e) => e.weight)));
-    function Ke(e) {
-      return Object.hasOwn(d.value, "x") ? k.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
+    const Ke = h(() => Math.max(...p.value.map((e) => e.weight)));
+    function Qe(e) {
+      return Object.hasOwn(d.value, "x") ? b.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
     }
     function x(e) {
       return e.colorSource;
     }
-    function we(e) {
-      return Object.hasOwn(d.value, "x") ? k.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}` ? `opacity:1;stroke-width:${q(e)}` : "opacity: 0" : "opacity: 1";
+    function xe(e) {
+      return Object.hasOwn(d.value, "x") ? b.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}` ? `opacity:1;stroke-width:${H(e)}` : "opacity: 0" : "opacity: 1";
     }
     function P(e) {
-      return Object.hasOwn(d.value, "x") ? !!(k.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}`) : !1;
-    }
-    function Qe(e) {
-      return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
+      return Object.hasOwn(d.value, "x") ? !!(b.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}`) : !1;
     }
     function Ze(e) {
-      return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
+      return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
     }
     function et(e) {
-      return Object.hasOwn(d.value, "x") ? d.value.id === e.id || k.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
+      return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
     }
     function tt(e) {
-      return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
+      return Object.hasOwn(d.value, "x") ? d.value.id === e.id || b.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
     }
-    const F = o(null);
-    function xe(e, s) {
-      F.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
+    function lt(e) {
+      return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
     }
+    const B = r(null);
     function $e(e, s) {
-      F.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
+      B.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
     }
     function Ae(e, s) {
-      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), Ge.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, k.value = []) : (d.value = e, k.value = [...e.relations]);
+      B.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
     }
-    function q(e) {
-      const s = e.weight / Je.value * l.value.style.links.maxWidth;
+    function _e(e, s) {
+      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), Ge.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, b.value = []) : (d.value = e, b.value = [...e.relations]);
+    }
+    function H(e) {
+      const s = e.weight / Ke.value * l.value.style.links.maxWidth;
       return Math.max(0.3, s);
     }
-    const T = o(!1);
-    function _e(e) {
-      T.value = e, ae.value += 1;
+    const R = r(!1);
+    function Ce(e) {
+      R.value = e, ie.value += 1;
     }
-    const R = o(!1);
-    function H() {
-      R.value = !R.value;
+    const T = r(!1);
+    function J() {
+      T.value = !T.value;
     }
-    async function lt({ scale: e = 2 } = {}) {
+    async function st({ scale: e = 2 } = {}) {
       if (!A.value) return;
-      const { width: s, height: t } = A.value.getBoundingClientRect(), a = s / t, { imageUri: c, base64: v } = await Pt({ domElement: A.value, base64: !0, img: !0, scale: e });
+      const { width: s, height: t } = A.value.getBoundingClientRect(), a = s / t, { imageUri: c, base64: v } = await Ot({ domElement: A.value, base64: !0, img: !0, scale: e });
       return {
         imageUri: c,
         base64: v,
@@ -273,42 +282,42 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
       };
     }
     return Be({
-      getImage: lt,
+      getImage: st,
       generatePdf: he,
       generateImage: ge,
-      toggleAnnotator: H,
-      toggleFullscreen: _e
+      toggleAnnotator: J,
+      toggleFullscreen: Ce
     }), (e, s) => (i(), n("div", {
       ref_key: "relationCircleChart",
       ref: A,
       class: "vue-ui-relation-circle",
-      style: O(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
-      id: `relation_circle_${I.value}`,
-      onMouseenter: s[0] || (s[0] = () => u(ce)(!0)),
-      onMouseleave: s[1] || (s[1] = () => u(ce)(!1))
+      style: z(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
+      id: `relation_circle_${S.value}`,
+      onMouseenter: s[0] || (s[0] = () => u(ve)(!0)),
+      onMouseleave: s[1] || (s[1] = () => u(ve)(!1))
     }, [
-      l.value.userOptions.buttons.annotator ? (i(), N(u(Fe), {
+      l.value.userOptions.buttons.annotator ? (i(), N(u(Re), {
         key: 0,
-        svgRef: u(de),
+        svgRef: u(W),
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
-        active: R.value,
-        onClose: H
+        active: T.value,
+        onClose: J
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      Ue.value ? (i(), n("div", {
+      Ve.value ? (i(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ue,
+        ref: oe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : f("", !0),
       l.value.style.title.text ? (i(), n("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ie,
+        ref: ne,
         style: "width:100%;background:transparent"
       }, [
-        (i(), N(Ot, {
+        (i(), N(St, {
           key: `title_${re.value}`,
           config: {
             title: {
@@ -322,34 +331,34 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
           }
         }, null, 8, ["config"]))
       ], 512)) : f("", !0),
-      l.value.userOptions.show && je.value && (u(ve) || u(V)) ? (i(), N(u(Te), {
+      l.value.userOptions.show && De.value && (u(de) || u(G)) ? (i(), N(u(Te), {
         ref: "details",
-        key: `user_options_${ae.value}`,
+        key: `user_options_${ie.value}`,
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
         isPrinting: u(fe),
         isImaging: u(ye),
-        uid: I.value,
+        uid: S.value,
         hasPdf: l.value.userOptions.buttons.pdf,
         hasImg: l.value.userOptions.buttons.img,
         hasFullscreen: l.value.userOptions.buttons.img,
         hasXls: !1,
-        isFullscreen: T.value,
+        isFullscreen: R.value,
         titles: { ...l.value.userOptions.buttonTitles },
         chartElement: A.value,
         position: l.value.userOptions.position,
         hasAnnotator: l.value.userOptions.buttons.annotator,
-        isAnnotation: R.value,
+        isAnnotation: T.value,
         callbacks: l.value.userOptions.callbacks,
         printScale: l.value.userOptions.print.scale,
-        onToggleFullscreen: _e,
+        onToggleFullscreen: Ce,
         onGeneratePdf: u(he),
         onGenerateImage: u(ge),
-        onToggleAnnotator: H,
-        style: O({
-          visibility: u(ve) ? u(V) ? "visible" : "hidden" : "visible"
+        onToggleAnnotator: J,
+        style: z({
+          visibility: u(de) ? u(G) ? "visible" : "hidden" : "visible"
         })
-      }, ct({ _: 2 }, [
+      }, vt({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
           fn: M(({ isOpen: t, color: a }) => [
@@ -388,48 +397,48 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
       (i(), n("svg", {
         ref_key: "svgRef",
-        ref: de,
-        xmlns: u(bt),
-        class: ee([{ "vue-data-ui-fullscreen--on": T.value, "vue-data-ui-fulscreen--off": !T.value }, "relation-circle"]),
-        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
+        ref: W,
+        xmlns: u(wt),
+        class: te([{ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }, "relation-circle"]),
+        viewBox: `0 0 ${o.value.width <= 0 ? 10 : o.value.width} ${o.value.height <= 0 ? 10 : o.value.height}`,
         width: "100%",
         style: "user-select:none; background:transparent"
       }, [
-        vt(u(Re)),
+        dt(u(Ne)),
         e.$slots["chart-background"] ? (i(), n("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: r.value.width <= 0 ? 10 : r.value.width,
-          height: r.value.height <= 0 ? 10 : r.value.height,
+          width: o.value.width <= 0 ? 10 : o.value.width,
+          height: o.value.height <= 0 ? 10 : o.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
           g(e.$slots, "chart-background", {}, void 0, !0)
-        ], 8, St)) : f("", !0),
-        dt("circle", {
-          cx: (r.value.width <= 0 ? 1e-4 : r.value.width) / 2,
-          cy: (r.value.height <= 0 ? 1e-4 : r.value.height) / 2 + l.value.style.circle.offsetY,
+        ], 8, Ft)) : f("", !0),
+        ft("circle", {
+          cx: (o.value.width <= 0 ? 1e-4 : o.value.width) / 2,
+          cy: (o.value.height <= 0 ? 1e-4 : o.value.height) / 2 + l.value.style.circle.offsetY,
           r: C.value <= 0 ? 1e-4 : C.value,
           stroke: l.value.style.circle.stroke,
           "stroke-width": l.value.style.circle.strokeWidth,
           fill: "transparent",
           class: "main-circle"
-        }, null, 8, Et),
-        Ve.value ? (i(), n("g", Bt, [
-          (i(!0), n($, null, z(p.value, (t, a) => (i(), n("path", {
+        }, null, 8, Bt),
+        We.value ? (i(), n("g", Rt, [
+          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("path", {
             key: `relation_${a}`,
-            style: O(we(t)),
+            style: z(xe(t)),
             stroke: x(t),
-            class: ee(["relation", { "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && k.value.includes(t.id) }]),
-            d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${r.value.width / 2},${r.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
+            class: te(["relation", { "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }]),
+            d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${o.value.width / 2},${o.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
             fill: "none",
-            "stroke-width": q(t),
+            "stroke-width": H(t),
             "stroke-linecap": "round"
-          }, null, 14, Ft))), 128)),
-          (i(!0), n($, null, z(p.value, (t, a) => (i(), n("g", Tt, [
-            P(t) ? g(e.$slots, "dataLabel", Le({
+          }, null, 14, Tt))), 128)),
+          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Nt, [
+            P(t) ? g(e.$slots, "dataLabel", Pe({
               key: 0,
               ref_for: !0
             }, {
@@ -447,7 +456,7 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
               r: y.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, Rt)) : f("", !0),
+            }, null, 8, jt)) : f("", !0),
             P(t) && !e.$slots.dataLabel ? (i(), n("text", {
               key: 2,
               x: t.midPointBezier.x,
@@ -455,33 +464,33 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
               fill: u(Me)(x(t)),
               "text-anchor": "middle",
               "font-size": y.value
-            }, U(u(te)(
+            }, U(u(le)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              u(le)({
+              u(se)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Nt)) : f("", !0)
+            )), 9, Dt)) : f("", !0)
           ]))), 256))
-        ])) : (i(), n("g", jt, [
-          (i(!0), n($, null, z(p.value, (t, a) => (i(), n("line", {
+        ])) : (i(), n("g", Ut, [
+          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("line", {
             key: `relation_${a}`,
             stroke: x(t),
-            "stroke-width": q(t),
-            style: O(we(t)),
+            "stroke-width": H(t),
+            style: z(xe(t)),
             x1: t.x1,
             x2: t.x2,
             y1: t.y1,
             y2: t.y2,
-            class: ee({ "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && k.value.includes(t.id) }),
+            class: te({ "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }),
             "stroke-linecap": "round"
-          }, null, 14, Dt))), 128)),
-          (i(!0), n($, null, z(p.value, (t, a) => (i(), n("g", Ut, [
-            P(t) ? g(e.$slots, "dataLabel", Le({
+          }, null, 14, Vt))), 128)),
+          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Gt, [
+            P(t) ? g(e.$slots, "dataLabel", Pe({
               key: 0,
               ref_for: !0
             }, {
@@ -499,7 +508,7 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
               r: y.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, Gt)) : f("", !0),
+            }, null, 8, Wt)) : f("", !0),
             P(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), n("text", {
               key: 2,
               x: t.midPointLine.x,
@@ -507,43 +516,43 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
               fill: u(Me)(x(t)),
               "text-anchor": "middle",
               "font-size": y.value
-            }, U(u(te)(
+            }, U(u(le)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              u(le)({
+              u(se)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Vt)) : f("", !0)
+            )), 9, Xt)) : f("", !0)
           ]))), 256))
         ])),
-        (i(!0), n($, null, z(b.value, (t, a) => (i(), n("text", {
+        (i(!0), n($, null, O(k.value, (t, a) => (i(), n("text", {
           key: `plot_text_${a}`,
-          "text-anchor": Qe(t),
-          transform: tt(t),
-          x: Ze(t),
+          "text-anchor": Ze(t),
+          transform: lt(t),
+          x: et(t),
           y: t.y + 5,
           class: "vue-ui-relation-circle-legend",
           "transform-origin": "start",
           "font-weight": d.value.id === t.id ? "900" : "400",
-          style: O(`font-family:${l.value.style.fontFamily};${et(t)}`),
-          "font-size": B.value,
+          style: z(`font-family:${l.value.style.fontFamily};${tt(t)}`),
+          "font-size": I.value,
           fill: l.value.style.labels.color,
-          "text-decoration": a === F.value ? "underline" : void 0,
-          onClick: (c) => Ae(t, a),
-          onMouseenter: (c) => xe(t, a),
-          onMouseleave: (c) => $e(t, a)
+          "text-decoration": a === B.value ? "underline" : void 0,
+          onClick: (c) => _e(t, a),
+          onMouseenter: (c) => $e(t, a),
+          onMouseleave: (c) => Ae(t, a)
         }, [
-          u(oe) ? (i(), n($, { key: 0 }, [
-            Pe(" -------- ")
+          u(ce) ? (i(), n($, { key: 0 }, [
+            ze(" -------- ")
           ], 64)) : (i(), n($, { key: 1 }, [
-            Pe(U(t.label) + " (" + U(u(te)(
+            ze(U(t.label) + " (" + U(u(le)(
               l.value.style.weightLabels.formatter,
               t.totalWeight,
-              u(le)({
+              u(se)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.totalWeight,
                 s: l.value.style.weightLabels.suffix,
@@ -552,38 +561,38 @@ const It = ["id"], Mt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["c
               { ...t }
             )) + ") ", 1)
           ], 64))
-        ], 44, Wt))), 128)),
-        (i(!0), n($, null, z(b.value, (t, a) => (i(), n("circle", {
+        ], 44, Yt))), 128)),
+        (i(!0), n($, null, O(k.value, (t, a) => (i(), n("circle", {
           cx: t.x,
           cy: t.y,
           key: `plot_${a}`,
-          style: O(`${Ke(t)}; transition: r 0.2s ease-in-out;`),
+          style: z(`${Qe(t)}; transition: r 0.2s ease-in-out;`),
           class: "vue-ui-relation-circle-plot",
           fill: l.value.style.plot.useSerieColor ? t.color : l.value.style.plot.color,
           stroke: l.value.style.backgroundColor,
           "stroke-width": "1",
-          r: E.value * (a === F.value ? 2 : 1),
-          onClick: (c) => Ae(t, a),
-          onMouseenter: (c) => xe(t, a),
-          onMouseleave: (c) => $e(t, a)
-        }, null, 44, Xt))), 128)),
-        g(e.$slots, "svg", { svg: r.value }, void 0, !0)
-      ], 10, Mt)),
-      e.$slots.watermark ? (i(), n("div", Yt, [
+          r: F.value * (a === B.value ? 2 : 1),
+          onClick: (c) => _e(t, a),
+          onMouseenter: (c) => $e(t, a),
+          onMouseleave: (c) => Ae(t, a)
+        }, null, 44, qt))), 128)),
+        g(e.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 10, Et)),
+      e.$slots.watermark ? (i(), n("div", Ht, [
         g(e.$slots, "watermark", j(D({ isPrinting: u(fe) || u(ye) })), void 0, !0)
       ])) : f("", !0),
       e.$slots.source ? (i(), n("div", {
         key: 5,
         ref_key: "source",
-        ref: ne,
+        ref: ue,
         dir: "auto"
       }, [
         g(e.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      u(oe) ? (i(), N(At, { key: 6 })) : f("", !0)
-    ], 44, It));
+      u(ce) ? (i(), N(_t, { key: 6 })) : f("", !0)
+    ], 44, Mt));
   }
-}, nl = /* @__PURE__ */ zt(qt, [["__scopeId", "data-v-858c05c5"]]);
+}, rl = /* @__PURE__ */ It(Jt, [["__scopeId", "data-v-72b30f4c"]]);
 export {
-  nl as default
+  rl as default
 };