vue-data-ui 3.4.9 → 3.5.1

package/dist/{vue-ui-relation-circle-Dj1jhcsl.js → vue-ui-relation-circle-XHbE-ZUX.js}

@@ -1,7 +1,7 @@
-import { useCssVars as dt, computed as g, defineAsyncComponent as Z, ref as r, toRefs as ft, watch as ee, shallowRef as Le, onMounted as gt, onBeforeUnmount as yt, createElementBlock as i, openBlock as n, unref as o, normalizeStyle as z, createBlock as j, createCommentVNode as f, createSlots as ht, withCtx as O, renderSlot as y, normalizeProps as U, guardReactiveProps as D, normalizeClass as te, createVNode as mt, createElementVNode as pt, Fragment as $, renderList as S, mergeProps as Pe, toDisplayString as G, createTextVNode as ze } from "vue";
-import { c as bt, t as kt, b as wt, p as Oe, e as xt, o as Se, f as Ie, g as $t, X as At, J as Me, a as le, d as se, R as ae } from "./lib-C_mNZmhD.js";
+import { useCssVars as dt, computed as y, defineAsyncComponent as Z, ref as u, toRefs as ft, watch as ee, shallowRef as Le, onMounted as gt, onBeforeUnmount as yt, createElementBlock as i, openBlock as n, unref as o, normalizeStyle as I, createBlock as D, createCommentVNode as g, withCtx as h, renderSlot as d, normalizeProps as w, guardReactiveProps as x, createSlots as ht, normalizeClass as te, createVNode as mt, createElementVNode as pt, Fragment as _, renderList as M, mergeProps as Pe, toDisplayString as G, createTextVNode as ze } from "vue";
+import { c as bt, t as kt, b as wt, p as Oe, e as xt, o as Se, f as Ie, g as $t, X as At, J as Me, a as le, d as ae, R as se } from "./lib-C_mNZmhD.js";
 import { t as Ct, u as _t } from "./useResponsive-DfdjqQps.js";
-import { u as Lt, a as Ee } from "./useNestedProp-BjZe1Y85.js";
+import { u as Lt, a as Ee } from "./useNestedProp-DjGXw6S9.js";
 import { u as Pt, B as zt } from "./BaseScanner-BgWxam9d.js";
 import { u as Ot } from "./usePrinter-DTzqpYKF.js";
 import { u as St } from "./useSvgExport-DrjCWun4.js";
@@ -9,7 +9,7 @@ import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Mt } from "./useChartAccessibility-9icAAmYg.js";
 import { u as Et } from "./useAutoSizeLabelsInsideViewbox-BhzfwQ_k.js";
 import Bt from "./img-BecE5qXd.js";
-import Ft from "./Title-l36lOBMx.js";
+import Ft from "./Title-isbiM8i8.js";
 import { t as Rt } from "./themes-AUNCOb2G.js";
 import { _ as Tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["cx", "cy", "r", "stroke", "stroke-width"], Gt = { key: 1 }, Vt = ["stroke", "d", "stroke-width"], Wt = { style: { "pointer-events": "none" } }, Xt = ["cx", "cy", "fill", "r", "stroke"], Yt = ["x", "y", "fill", "font-size"], qt = { key: 2 }, Ht = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Jt = { style: { "pointer-events": "none" } }, Kt = ["cx", "cy", "fill", "r", "stroke"], Qt = ["x", "y", "fill", "font-size"], Zt = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], el = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], tl = {
@@ -33,12 +33,12 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
   },
   setup(Be, { expose: Fe }) {
     dt((e) => ({
-      c0ba409a: Ye.value,
-      v431c6012: Xe.value,
-      v556fd074: qe.value
+      v09389e9a: Ye.value,
+      v5c5a5379: Xe.value,
+      v9edd1cca: qe.value
     }));
-    const Re = Z(() => import("./PenAndPaper-DSvu9dwa.js")), Te = Z(() => import("./UserOptions-CGnQt6Fd.js")), Ne = Z(() => import("./PackageVersion-CTUqGqWV.js")), { vue_ui_relation_circle: je } = Lt(), m = Be, Ue = g(() => !!m.dataset && Object.keys(m.dataset).length), I = r(bt()), ne = r(0), A = r(null), ie = r(null), oe = r(null), ue = r(null), re = r(0), l = r(X()), { loading: ce, FINAL_DATASET: De, manualLoading: V } = Pt({
-      ...ft(m),
+    const Re = Z(() => import("./PenAndPaper-SZQIAgkg.js")), Te = Z(() => import("./UserOptions-CGnQt6Fd.js")), Ne = Z(() => import("./PackageVersion-DQvyATVa.js")), { vue_ui_relation_circle: je } = Lt(), p = Be, Ue = y(() => !!p.dataset && Object.keys(p.dataset).length), E = u(bt()), ne = u(0), L = u(null), ie = u(null), oe = u(null), re = u(null), ue = u(0), l = u(X()), { loading: ce, FINAL_DATASET: De, manualLoading: V } = Pt({
+      ...ft(p),
       FINAL_CONFIG: l,
       prepareConfig: X,
       skeletonDataset: [
@@ -64,61 +64,61 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
           }
         }
       })
-    }), { userOptionsVisible: W, setUserOptionsVisibility: ve, keepUserOptionState: de } = It({ config: l.value }), { svgRef: E } = Mt({ config: l.value.style.title });
+    }), { userOptionsVisible: W, setUserOptionsVisibility: ve, keepUserOptionState: de } = It({ config: l.value }), { svgRef: F } = Mt({ config: l.value.style.title });
     function X() {
       const e = Ee({
-        userConfig: m.config,
+        userConfig: p.config,
         defaultConfig: je
       });
       return e.theme ? {
         ...Ee({
-          userConfig: Rt.vue_ui_relation_circle[e.theme] || m.config,
+          userConfig: Rt.vue_ui_relation_circle[e.theme] || p.config,
           defaultConfig: e
         }),
         customPalette: wt[e.theme] || Oe
       } : e;
     }
-    ee(() => m.config, (e) => {
-      l.value = X(), W.value = !l.value.userOptions.showOnChartHover, C.value = l.value.style.size, h.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, M.value = l.value.style.labels.fontSize, u.value.height = l.value.style.size, u.value.width = l.value.style.size, be(), re.value += 1;
-    }, { deep: !0 }), ee(() => m.dataset, (e) => {
+    ee(() => p.config, (e) => {
+      l.value = X(), W.value = !l.value.userOptions.showOnChartHover, P.value = l.value.style.size, m.value = l.value.style.weightLabels.size, T.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, be(), ue.value += 1;
+    }, { deep: !0 }), ee(() => p.dataset, (e) => {
       Array.isArray(e) && e.length > 0 && (V.value = !1);
     }, { deep: !0 });
     const { isPrinting: fe, isImaging: ge, generatePdf: ye, generateImage: he } = Ot({
-      elementId: `relation_circle_${I.value}`,
+      elementId: `relation_circle_${E.value}`,
       fileName: l.value.style.title.text || "vue-ui-relation-circle",
       options: l.value.userOptions.print
-    }), Ge = g(() => l.value.userOptions.show && !l.value.style.title.text), me = g(() => xt(l.value.customPalette)), k = r([]), p = r([]), d = r({}), b = r([]), Ve = r(0), B = g(() => De.value.slice(0, l.value.style.limit).map((e) => {
-      const s = Array.isArray(e.relations) ? e.relations : [];
+    }), Ge = y(() => l.value.userOptions.show && !l.value.style.title.text), me = y(() => xt(l.value.customPalette)), $ = u([]), b = u([]), f = u({}), k = u([]), Ve = u(0), R = y(() => De.value.slice(0, l.value.style.limit).map((e) => {
+      const a = Array.isArray(e.relations) ? e.relations : [];
       return {
         ...e,
-        weights: Array.isArray(e.weights) ? e.weights : new Array(s.length).fill(1),
-        relations: s
+        weights: Array.isArray(e.weights) ? e.weights : new Array(a.length).fill(1),
+        relations: a
       };
     }));
-    ee(B, () => {
-      k.value = [], p.value = [], Y(), q();
+    ee(R, () => {
+      $.value = [], b.value = [], Y(), q();
     });
-    const C = r(l.value.style.size), h = r(l.value.style.weightLabels.size), F = r(l.value.style.plot.radius), M = r(l.value.style.labels.fontSize), u = r({
+    const P = u(l.value.style.size), m = u(l.value.style.weightLabels.size), T = u(l.value.style.plot.radius), B = u(l.value.style.labels.fontSize), r = u({
       height: l.value.style.size,
       width: l.value.style.size
-    }), _ = g({
+    }), z = y({
       get() {
-        return C.value * l.value.style.circle.radiusProportion;
+        return P.value * l.value.style.circle.radiusProportion;
       },
       set(e) {
         return e;
       }
-    }), We = g(() => l.value.style.links.curved), Xe = g(() => `${l.value.style.animation.speedMs}ms`), Ye = g(() => _.value * 2), qe = g(() => _.value * 4), w = Le(null), L = Le(null);
+    }), We = y(() => l.value.style.links.curved), Xe = y(() => `${l.value.style.animation.speedMs}ms`), Ye = y(() => z.value * 2), qe = y(() => z.value * 4), A = Le(null), O = Le(null);
     gt(() => {
-      be(), document.getElementById(`relation_circle_${I.value}`).addEventListener("click", we);
+      be(), document.getElementById(`relation_circle_${E.value}`).addEventListener("click", we);
     });
-    const pe = g(() => l.value.debug);
+    const pe = y(() => l.value.debug);
     function be() {
-      if (Se(m.dataset) ? (Ie({
+      if (Se(p.dataset) ? (Ie({
         componentName: "VueUiRelationCircle",
         type: "dataset",
         debug: pe.value
-      }), V.value = !0) : m.dataset.forEach((e, s) => {
+      }), V.value = !0) : p.dataset.forEach((e, a) => {
         $t({
           datasetObject: e,
           requiredAttributes: ["id", "label", "relations", "weights"]
@@ -127,76 +127,76 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
             componentName: "VueUiRelationCircle",
             type: "datasetSerieAttribute",
             property: t,
-            index: s,
+            index: a,
             debug: pe.value
           });
         });
-      }), Se(m.dataset) || (V.value = l.value.loading), l.value.responsive) {
+      }), Se(p.dataset) || (V.value = l.value.loading), l.value.responsive) {
         const e = Ct(() => {
-          const { width: s, height: t } = _t({
-            chart: A.value,
+          const { width: a, height: t } = _t({
+            chart: L.value,
             title: l.value.style.title.text ? ie.value : null,
             source: oe.value,
-            noTitle: ue.value
+            noTitle: re.value
           });
           requestAnimationFrame(() => {
-            C.value = Math.min(s, t), u.value.width = Math.max(0.1, s), u.value.height = Math.max(0.1, t - 12), _.value = C.value * l.value.style.circle.radiusProportion, k.value = [], p.value = [], Y(), q(), ke(), l.value.responsiveProportionalSizing ? (h.value = ae({
-              relator: C.value,
+            P.value = Math.min(a, t), r.value.width = Math.max(0.1, a), r.value.height = Math.max(0.1, t - 12), z.value = P.value * l.value.style.circle.radiusProportion, $.value = [], b.value = [], Y(), q(), ke(), l.value.responsiveProportionalSizing ? (m.value = se({
+              relator: P.value,
               adjuster: l.value.style.size,
               source: l.value.style.weightLabels.size,
               threshold: 6,
               fallback: 6
-            }), F.value = ae({
-              relator: C.value,
+            }), T.value = se({
+              relator: P.value,
               adjuster: l.value.style.size,
               source: l.value.style.plot.radius,
               threshold: 1,
               fallback: 1
-            }), M.value = ae({
-              relator: C.value,
+            }), B.value = se({
+              relator: P.value,
               adjuster: l.value.style.size,
               source: l.value.style.labels.fontSize,
               threshold: 6,
               fallback: 6
-            })) : (h.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, M.value = l.value.style.labels.fontSize);
+            })) : (m.value = l.value.style.weightLabels.size, T.value = l.value.style.plot.radius, B.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);
+        A.value && (O.value && A.value.unobserve(O.value), A.value.disconnect()), A.value = new ResizeObserver(e), O.value = L.value.parentNode, A.value.observe(O.value);
       } else
-        k.value = [], p.value = [], Y(), q();
+        $.value = [], b.value = [], Y(), q();
       ke();
     }
     yt(() => {
-      document.getElementById(`relation_circle_${I.value}`).removeEventListener("click", we), w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect());
+      document.getElementById(`relation_circle_${E.value}`).removeEventListener("click", we), A.value && (O.value && A.value.unobserve(O.value), A.value.disconnect());
     });
     const { autoSizeLabels: ke } = Et({
-      svgRef: E,
+      svgRef: F,
       fontSize: l.value.style.labels.fontSize,
       minFontSize: l.value.style.labels.minFontSize,
-      sizeRef: M,
+      sizeRef: B,
       labelClass: ".vue-ui-relation-circle-legend"
     });
     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 = {}, b.value = []);
+      const a = e.target;
+      a && Array.from(a.classList).includes("vue-ui-user-options") || a && Array.from(a.classList).includes("vue-ui-user-options-summary") || a && Array.from(a.classList).includes("vue-data-ui-button") || a && Array.from(a.classList).includes("vue-ui-relation-circle-legend") || (f.value = {}, k.value = []);
     }
     function Y() {
-      const e = 6.28319 / B.value.length, s = 360 / B.value.length;
-      let t = 0, a = 0;
-      B.value.forEach((c, v) => {
-        const K = c.weights.reduce((ct, vt) => ct + vt, 0), Q = _.value * Math.cos(t) + u.value.width / 2, rt = _.value * Math.sin(t) + u.value.height / 2 + l.value.style.circle.offsetY;
-        k.value.push({ x: Q, y: rt, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: a, totalWeight: K }), t += e, a += s;
+      const e = 6.28319 / R.value.length, a = 360 / R.value.length;
+      let t = 0, s = 0;
+      R.value.forEach((c, v) => {
+        const K = c.weights.reduce((ct, vt) => ct + vt, 0), Q = z.value * Math.cos(t) + r.value.width / 2, ut = z.value * Math.sin(t) + r.value.height / 2 + l.value.style.circle.offsetY;
+        $.value.push({ x: Q, y: ut, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: s, totalWeight: K }), t += e, s += a;
       });
     }
-    function He(e, s) {
-      const t = (e.x + s.x) / 2, a = (e.y + s.y) / 2;
-      return { x: t, y: a };
+    function He(e, a) {
+      const t = (e.x + a.x) / 2, s = (e.y + a.y) / 2;
+      return { x: t, y: s };
     }
     function q() {
-      p.value = [], k.value.forEach((e) => {
-        k.value.filter((t) => t.relations.includes(e.id)).forEach((t, a) => {
+      b.value = [], $.value.forEach((e) => {
+        $.value.filter((t) => t.relations.includes(e.id)).forEach((t, s) => {
           const c = t.relations.indexOf(e.id);
-          p.value.push({
+          b.value.push({
             weight: t.weights[c] ? t.weights[c] : 0,
             relationId: `${e.id}_${t.id}`,
             x1: e.x,
@@ -218,24 +218,24 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
       });
     }
     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: u.value.width / 2,
-        y: u.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;
+      const a = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, s = { 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, K = Math.pow(1 - v, 3) * a.x + 3 * Math.pow(1 - v, 2) * v * s.x + 3 * (1 - v) * Math.pow(v, 2) * c.x + Math.pow(v, 3) * t.x, Q = Math.pow(1 - v, 3) * a.y + 3 * Math.pow(1 - v, 2) * v * s.y + 3 * (1 - v) * Math.pow(v, 2) * c.y + Math.pow(v, 3) * t.y;
       return { x: K, y: Q };
     }
-    const Ke = g(() => Math.max(...p.value.map((e) => e.weight)));
+    const Ke = y(() => Math.max(...b.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";
+      return Object.hasOwn(f.value, "x") ? k.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
     }
-    function x(e) {
+    function C(e) {
       return e.colorSource;
     }
     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";
+      return Object.hasOwn(f.value, "x") ? k.value.includes(e.id) && e.relationId === `${e.id}_${f.value.id}` || e.relationId === `${f.value.id}_${e.id}` ? `opacity:1;stroke-width:${H(e)}` : "opacity: 0" : "opacity: 1";
     }
-    function P(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}`) : !1;
+    function S(e) {
+      return Object.hasOwn(f.value, "x") ? !!(k.value.includes(e.id) && e.relationId === `${e.id}_${f.value.id}` || e.relationId === `${f.value.id}_${e.id}`) : !1;
     }
     function Ze(e) {
       return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
@@ -244,95 +244,115 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
       return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
     }
     function tt(e) {
-      return Object.hasOwn(d.value, "x") ? d.value.id === e.id || b.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
+      return Object.hasOwn(f.value, "x") ? f.value.id === e.id || k.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
     }
     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 R = r(null);
-    function $e(e, s) {
-      R.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
+    const N = u(null);
+    function $e(e, a) {
+      N.value = a, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: a });
     }
-    function Ae(e, s) {
-      R.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
+    function Ae(e, a) {
+      N.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: a });
     }
-    function Ce(e, s) {
-      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), Ve.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, b.value = []) : (d.value = e, b.value = [...e.relations]);
+    function Ce(e, a) {
+      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: a }), Ve.value = 360 - e.regAngle, f.value.id && e.id === f.value.id ? (f.value = {}, k.value = []) : (f.value = e, k.value = [...e.relations]);
     }
     function H(e) {
-      const s = e.weight / Ke.value * l.value.style.links.maxWidth;
-      return Math.max(0.3, s);
+      const a = e.weight / Ke.value * l.value.style.links.maxWidth;
+      return Math.max(0.3, a);
     }
-    const T = r(!1);
+    const j = u(!1);
     function _e(e) {
-      T.value = e, ne.value += 1;
+      j.value = e, ne.value += 1;
     }
-    const N = r(!1);
+    const U = u(!1);
     function J() {
-      N.value = !N.value;
+      U.value = !U.value;
     }
-    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 Bt({ domElement: A.value, base64: !0, img: !0, scale: e });
+    async function at({ scale: e = 2 } = {}) {
+      if (!L.value) return;
+      const { width: a, height: t } = L.value.getBoundingClientRect(), s = a / t, { imageUri: c, base64: v } = await Bt({ domElement: L.value, base64: !0, img: !0, scale: e });
       return {
         imageUri: c,
         base64: v,
         title: l.value.style.title.text,
-        width: s,
+        width: a,
         height: t,
-        aspectRatio: a
+        aspectRatio: s
       };
     }
-    const at = g(() => l.value.style.backgroundColor), nt = g(() => l.value.style.title), { exportSvg: it, getSvg: ot } = St({
-      svg: E,
+    const st = y(() => l.value.style.backgroundColor), nt = y(() => l.value.style.title), { exportSvg: it, getSvg: ot } = St({
+      svg: F,
       title: nt,
-      backgroundColor: at
+      backgroundColor: st
     });
-    async function ut({ isCb: e }) {
+    async function rt({ isCb: e }) {
       if (e) {
-        const { blob: s, url: t, text: a, dataUrl: c } = await ot();
-        l.value.userOptions.callbacks.svg({ blob: s, url: t, text: a, dataUrl: c });
+        const { blob: a, url: t, text: s, dataUrl: c } = await ot();
+        l.value.userOptions.callbacks.svg({ blob: a, url: t, text: s, dataUrl: c });
       } else
         it();
     }
     return Fe({
-      getImage: st,
+      getImage: at,
       generatePdf: ye,
       generateImage: he,
       toggleAnnotator: J,
       toggleFullscreen: _e
-    }), (e, s) => (n(), i("div", {
+    }), (e, a) => (n(), i("div", {
       ref_key: "relationCircleChart",
-      ref: A,
+      ref: L,
       class: "vue-data-ui-component vue-ui-relation-circle",
-      style: z(`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] = () => o(ve)(!0)),
-      onMouseleave: s[1] || (s[1] = () => o(ve)(!1))
+      style: I(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
+      id: `relation_circle_${E.value}`,
+      onMouseenter: a[0] || (a[0] = () => o(ve)(!0)),
+      onMouseleave: a[1] || (a[1] = () => o(ve)(!1))
     }, [
-      l.value.userOptions.buttons.annotator ? (n(), j(o(Re), {
+      l.value.userOptions.buttons.annotator ? (n(), D(o(Re), {
         key: 0,
-        svgRef: o(E),
+        svgRef: o(F),
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
-        active: N.value,
+        active: U.value,
         onClose: J
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
+      }, {
+        "annotator-action-close": h(() => [
+          d(e.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": h(({ color: t }) => [
+          d(e.$slots, "annotator-action-color", w(x({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": h(({ mode: t }) => [
+          d(e.$slots, "annotator-action-draw", w(x({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": h(({ disabled: t }) => [
+          d(e.$slots, "annotator-action-undo", w(x({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": h(({ disabled: t }) => [
+          d(e.$slots, "annotator-action-redo", w(x({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": h(({ disabled: t }) => [
+          d(e.$slots, "annotator-action-delete", w(x({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
       Ge.value ? (n(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ue,
+        ref: re,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : f("", !0),
+      }, null, 512)) : g("", !0),
       l.value.style.title.text ? (n(), i("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: ie,
         style: "width:100%;background:transparent"
       }, [
-        (n(), j(Ft, {
-          key: `title_${re.value}`,
+        (n(), D(Ft, {
+          key: `title_${ue.value}`,
           config: {
             title: {
               cy: "relation-div-title",
@@ -344,86 +364,86 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : f("", !0),
-      l.value.userOptions.show && Ue.value && (o(de) || o(W)) ? (n(), j(o(Te), {
+      ], 512)) : g("", !0),
+      l.value.userOptions.show && Ue.value && (o(de) || o(W)) ? (n(), D(o(Te), {
         ref: "details",
         key: `user_options_${ne.value}`,
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
         isPrinting: o(fe),
         isImaging: o(ge),
-        uid: I.value,
+        uid: E.value,
         hasPdf: l.value.userOptions.buttons.pdf,
         hasImg: l.value.userOptions.buttons.img,
         hasSvg: l.value.userOptions.buttons.svg,
         hasFullscreen: l.value.userOptions.buttons.img,
         hasXls: !1,
-        isFullscreen: T.value,
+        isFullscreen: j.value,
         titles: { ...l.value.userOptions.buttonTitles },
-        chartElement: A.value,
+        chartElement: L.value,
         position: l.value.userOptions.position,
         hasAnnotator: l.value.userOptions.buttons.annotator,
-        isAnnotation: N.value,
+        isAnnotation: U.value,
         callbacks: l.value.userOptions.callbacks,
         printScale: l.value.userOptions.print.scale,
         onToggleFullscreen: _e,
         onGeneratePdf: o(ye),
         onGenerateImage: o(he),
-        onGenerateSvg: ut,
+        onGenerateSvg: rt,
         onToggleAnnotator: J,
-        style: z({
+        style: I({
           visibility: o(de) ? o(W) ? "visible" : "hidden" : "visible"
         })
       }, ht({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: O(({ isOpen: t, color: a }) => [
-            y(e.$slots, "menuIcon", U(D({ isOpen: t, color: a })), void 0, !0)
+          fn: h(({ isOpen: t, color: s }) => [
+            d(e.$slots, "menuIcon", w(x({ isOpen: t, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: O(() => [
-            y(e.$slots, "optionPdf", {}, void 0, !0)
+          fn: h(() => [
+            d(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
-          fn: O(() => [
-            y(e.$slots, "optionImg", {}, void 0, !0)
+          fn: h(() => [
+            d(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: O(() => [
-            y(e.$slots, "optionSvg", {}, void 0, !0)
+          fn: h(() => [
+            d(e.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: O(({ toggleFullscreen: t, isFullscreen: a }) => [
-            y(e.$slots, "optionFullscreen", U(D({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+          fn: h(({ toggleFullscreen: t, isFullscreen: s }) => [
+            d(e.$slots, "optionFullscreen", w(x({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: O(({ toggleAnnotator: t, isAnnotator: a }) => [
-            y(e.$slots, "optionAnnotator", U(D({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+          fn: h(({ toggleAnnotator: t, isAnnotator: s }) => [
+            d(e.$slots, "optionAnnotator", w(x({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
       (n(), i("svg", {
         ref_key: "svgRef",
-        ref: E,
+        ref: F,
         xmlns: o(At),
-        class: te([{ "vue-data-ui-fullscreen--on": T.value, "vue-data-ui-fulscreen--off": !T.value }, "relation-circle"]),
-        viewBox: `0 0 ${u.value.width <= 0 ? 10 : u.value.width} ${u.value.height <= 0 ? 10 : u.value.height}`,
+        class: te([{ "vue-data-ui-fullscreen--on": j.value, "vue-data-ui-fulscreen--off": !j.value }, "relation-circle"]),
+        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
         width: "100%",
         style: "user-select:none; background:transparent"
       }, [
@@ -432,150 +452,150 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
           key: 0,
           x: 0,
           y: 0,
-          width: u.value.width <= 0 ? 10 : u.value.width,
-          height: u.value.height <= 0 ? 10 : u.value.height,
+          width: r.value.width <= 0 ? 10 : r.value.width,
+          height: r.value.height <= 0 ? 10 : r.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
-          y(e.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ut)) : f("", !0),
+          d(e.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ut)) : g("", !0),
         pt("circle", {
-          cx: (u.value.width <= 0 ? 1e-4 : u.value.width) / 2,
-          cy: (u.value.height <= 0 ? 1e-4 : u.value.height) / 2 + l.value.style.circle.offsetY,
-          r: _.value <= 0 ? 1e-4 : _.value,
+          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,
+          r: z.value <= 0 ? 1e-4 : z.value,
           stroke: l.value.style.circle.stroke,
           "stroke-width": l.value.style.circle.strokeWidth,
           fill: "transparent",
           class: "main-circle"
         }, null, 8, Dt),
         We.value ? (n(), i("g", Gt, [
-          (n(!0), i($, null, S(p.value, (t, a) => (n(), i("path", {
-            key: `relation_${a}`,
-            style: z(xe(t)),
-            stroke: x(t),
-            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} ${u.value.width / 2},${u.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
+          (n(!0), i(_, null, M(b.value, (t, s) => (n(), i("path", {
+            key: `relation_${s}`,
+            style: I(xe(t)),
+            stroke: C(t),
+            class: te(["relation", { "vue-ui-relation-circle-selected": f.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}`,
             fill: "none",
             "stroke-width": H(t),
             "stroke-linecap": "round"
           }, null, 14, Vt))), 128)),
-          (n(!0), i($, null, S(p.value, (t, a) => (n(), i("g", Wt, [
-            P(t) ? y(e.$slots, "dataLabel", Pe({
+          (n(!0), i(_, null, M(b.value, (t, s) => (n(), i("g", Wt, [
+            S(t) ? d(e.$slots, "dataLabel", Pe({
               key: 0,
               ref_for: !0
             }, {
               x: t.midPointBezier.x,
               y: t.midPointBezier.y,
-              color: x(t),
+              color: C(t),
               weight: t.weight,
-              fontSize: h.value
-            }), void 0, !0) : f("", !0),
-            P(t) && !e.$slots.dataLabel ? (n(), i("circle", {
+              fontSize: m.value
+            }), void 0, !0) : g("", !0),
+            S(t) && !e.$slots.dataLabel ? (n(), i("circle", {
               key: 1,
               cx: t.midPointBezier.x,
               cy: t.midPointBezier.y,
-              fill: x(t),
-              r: h.value,
+              fill: C(t),
+              r: m.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, Xt)) : f("", !0),
-            P(t) && !e.$slots.dataLabel ? (n(), i("text", {
+            }, null, 8, Xt)) : g("", !0),
+            S(t) && !e.$slots.dataLabel ? (n(), i("text", {
               key: 2,
               x: t.midPointBezier.x,
-              y: t.midPointBezier.y + h.value / 3,
-              fill: o(Me)(x(t)),
+              y: t.midPointBezier.y + m.value / 3,
+              fill: o(Me)(C(t)),
               "text-anchor": "middle",
-              "font-size": h.value
+              "font-size": m.value
             }, G(o(le)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              o(se)({
+              o(ae)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Yt)) : f("", !0)
+            )), 9, Yt)) : g("", !0)
           ]))), 256))
         ])) : (n(), i("g", qt, [
-          (n(!0), i($, null, S(p.value, (t, a) => (n(), i("line", {
-            key: `relation_${a}`,
-            stroke: x(t),
+          (n(!0), i(_, null, M(b.value, (t, s) => (n(), i("line", {
+            key: `relation_${s}`,
+            stroke: C(t),
             "stroke-width": H(t),
-            style: z(xe(t)),
+            style: I(xe(t)),
             x1: t.x1,
             x2: t.x2,
             y1: t.y1,
             y2: t.y2,
-            class: te({ "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }),
+            class: te({ "vue-ui-relation-circle-selected": f.value.hasOwnProperty("id") && k.value.includes(t.id) }),
             "stroke-linecap": "round"
           }, null, 14, Ht))), 128)),
-          (n(!0), i($, null, S(p.value, (t, a) => (n(), i("g", Jt, [
-            P(t) ? y(e.$slots, "dataLabel", Pe({
+          (n(!0), i(_, null, M(b.value, (t, s) => (n(), i("g", Jt, [
+            S(t) ? d(e.$slots, "dataLabel", Pe({
               key: 0,
               ref_for: !0
             }, {
               x: t.midPointLine.x,
               y: t.midPointLine.y,
-              color: x(t),
+              color: C(t),
               weight: t.weight,
-              fontSize: h.value
-            }), void 0, !0) : f("", !0),
-            P(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (n(), i("circle", {
+              fontSize: m.value
+            }), void 0, !0) : g("", !0),
+            S(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (n(), i("circle", {
               key: 1,
               cx: t.midPointLine.x,
               cy: t.midPointLine.y,
-              fill: x(t),
-              r: h.value,
+              fill: C(t),
+              r: m.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, Kt)) : f("", !0),
-            P(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (n(), i("text", {
+            }, null, 8, Kt)) : g("", !0),
+            S(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (n(), i("text", {
               key: 2,
               x: t.midPointLine.x,
-              y: t.midPointLine.y + h.value / 3,
-              fill: o(Me)(x(t)),
+              y: t.midPointLine.y + m.value / 3,
+              fill: o(Me)(C(t)),
               "text-anchor": "middle",
-              "font-size": h.value
+              "font-size": m.value
             }, G(o(le)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              o(se)({
+              o(ae)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Qt)) : f("", !0)
+            )), 9, Qt)) : g("", !0)
           ]))), 256))
         ])),
-        (n(!0), i($, null, S(k.value, (t, a) => (n(), i("text", {
-          key: `plot_text_${a}`,
+        (n(!0), i(_, null, M($.value, (t, s) => (n(), i("text", {
+          key: `plot_text_${s}`,
           "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: z(`font-family:${l.value.style.fontFamily};${tt(t)}`),
-          "font-size": M.value,
+          "font-weight": f.value.id === t.id ? "900" : "400",
+          style: I(`font-family:${l.value.style.fontFamily};${tt(t)}`),
+          "font-size": B.value,
           fill: l.value.style.labels.color,
-          "text-decoration": a === R.value ? "underline" : void 0,
-          onClick: (c) => Ce(t, a),
-          onMouseenter: (c) => $e(t, a),
-          onMouseleave: (c) => Ae(t, a)
+          "text-decoration": s === N.value ? "underline" : void 0,
+          onClick: (c) => Ce(t, s),
+          onMouseenter: (c) => $e(t, s),
+          onMouseleave: (c) => Ae(t, s)
         }, [
-          o(ce) ? (n(), i($, { key: 0 }, [
+          o(ce) ? (n(), i(_, { key: 0 }, [
             ze(" -------- ")
-          ], 64)) : (n(), i($, { key: 1 }, [
+          ], 64)) : (n(), i(_, { key: 1 }, [
             ze(G(t.label) + " (" + G(o(le)(
               l.value.style.weightLabels.formatter,
               t.totalWeight,
-              o(se)({
+              o(ae)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.totalWeight,
                 s: l.value.style.weightLabels.suffix,
@@ -585,37 +605,37 @@ const Nt = ["id"], jt = ["xmlns", "viewBox"], Ut = ["width", "height"], Dt = ["c
             )) + ") ", 1)
           ], 64))
         ], 44, Zt))), 128)),
-        (n(!0), i($, null, S(k.value, (t, a) => (n(), i("circle", {
+        (n(!0), i(_, null, M($.value, (t, s) => (n(), i("circle", {
           cx: t.x,
           cy: t.y,
-          key: `plot_${a}`,
-          style: z(`${Qe(t)}; transition: r 0.2s ease-in-out;`),
+          key: `plot_${s}`,
+          style: I(`${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: F.value * (a === R.value ? 2 : 1),
-          onClick: (c) => Ce(t, a),
-          onMouseenter: (c) => $e(t, a),
-          onMouseleave: (c) => Ae(t, a)
+          r: T.value * (s === N.value ? 2 : 1),
+          onClick: (c) => Ce(t, s),
+          onMouseenter: (c) => $e(t, s),
+          onMouseleave: (c) => Ae(t, s)
         }, null, 44, el))), 128)),
-        y(e.$slots, "svg", { svg: u.value }, void 0, !0)
+        d(e.$slots, "svg", { svg: r.value }, void 0, !0)
       ], 10, jt)),
       e.$slots.watermark ? (n(), i("div", tl, [
-        y(e.$slots, "watermark", U(D({ isPrinting: o(fe) || o(ge) })), void 0, !0)
-      ])) : f("", !0),
+        d(e.$slots, "watermark", w(x({ isPrinting: o(fe) || o(ge) })), void 0, !0)
+      ])) : g("", !0),
       e.$slots.source ? (n(), i("div", {
         key: 5,
         ref_key: "source",
         ref: oe,
         dir: "auto"
       }, [
-        y(e.$slots, "source", {}, void 0, !0)
-      ], 512)) : f("", !0),
-      o(ce) ? (n(), j(zt, { key: 6 })) : f("", !0)
+        d(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      o(ce) ? (n(), D(zt, { key: 6 })) : g("", !0)
     ], 44, Nt));
   }
-}, ml = /* @__PURE__ */ Tt(ll, [["__scopeId", "data-v-81f56cbf"]]);
+}, ml = /* @__PURE__ */ Tt(ll, [["__scopeId", "data-v-7d3425c2"]]);
 export {
   ml as default
 };