vue-data-ui 3.2.7 → 3.3.0

package/dist/{vue-ui-chord-bIihB6Qf.js → vue-ui-chord-BFW9nnNh.js}

@@ -1,25 +1,26 @@
-import { useCssVars as Ht, defineAsyncComponent as W, ref as v, shallowRef as rt, toRefs as qt, watch as xe, computed as $, onMounted as ut, onBeforeUnmount as it, createElementBlock as i, openBlock as r, unref as d, normalizeStyle as R, normalizeClass as F, createBlock as V, createCommentVNode as h, renderSlot as w, createElementVNode as I, createSlots as Ae, withCtx as x, normalizeProps as de, guardReactiveProps as he, withModifiers as ct, createVNode as fe, Fragment as z, renderList as H, mergeProps as vt, toDisplayString as q, Teleport as Qt, resolveDynamicComponent as Zt, createTextVNode as dt, nextTick as ht } from "vue";
-import { c as Ie, t as Jt, b as Kt, p as ge, o as ea, f as ft, g as ta, e as aa, h as oa, X as la, E as na, d as _e, H as sa, ac as ra, x as ua, y as ia, a as ca } from "./lib-BEpWEyMm.js";
-import { t as va, u as da } from "./useResponsive-DfdjqQps.js";
-import { u as ha, a as gt } from "./useNestedProp-BOk-tPdu.js";
-import { u as fa, B as ga } from "./BaseScanner-BgWxam9d.js";
-import { u as ba } from "./usePrinter-w23K-ezx.js";
-import { u as pa } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ma } from "./useChartAccessibility-9icAAmYg.js";
-import ya from "./img-DjWwQXVS.js";
-import { _ as ka } from "./Shape-C_C_OmqR.js";
-import $a from "./Title-DG2nloSB.js";
-import { t as wa } from "./themes-Dw-dDudK.js";
-import Ca from "./Legend-BpoFJ8fc.js";
-import { _ as Ma } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const xa = ["id"], Aa = ["id"], Ia = ["xmlns", "viewBox"], _a = ["width", "height"], Pa = { key: 1 }, Ta = ["id", "d"], Ba = { key: 2 }, Sa = ["transform"], Oa = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], La = ["d", "fill", "stroke", "stroke-width"], Da = ["d", "fill"], Ea = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick", "onMouseleave"], Na = ["d", "fill", "stroke", "stroke-width"], Ra = ["d", "fill", "stroke", "stroke-width"], Fa = ["d", "fill", "stroke", "stroke-width"], za = { key: 0 }, Ua = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Xa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Va = ["cx", "cy", "r", "stroke", "stroke-width", "fill"], ja = ["transform", "fill", "text-anchor", "font-size", "font-weight"], Ya = { key: 1 }, Ga = ["font-size", "font-weight", "fill"], Wa = ["href"], Ha = ["transform", "text-anchor", "font-size", "font-weight", "fill", "innerHTML"], qa = {
+import { useCssVars as ea, defineAsyncComponent as W, ref as v, shallowRef as ut, toRefs as ta, watch as Ae, computed as p, onMounted as it, onBeforeUnmount as ct, createElementBlock as i, openBlock as r, unref as d, normalizeStyle as R, normalizeClass as F, createBlock as V, createCommentVNode as h, renderSlot as w, createElementVNode as I, createSlots as Ie, withCtx as x, normalizeProps as de, guardReactiveProps as he, withModifiers as vt, createVNode as fe, Fragment as z, renderList as H, mergeProps as dt, toDisplayString as q, Teleport as aa, resolveDynamicComponent as oa, createTextVNode as ht, nextTick as ft } from "vue";
+import { c as _e, t as la, b as na, p as ge, o as sa, f as gt, g as ra, e as ua, h as ia, X as ca, E as va, d as Pe, H as da, ac as ha, x as fa, y as ga, a as ba } from "./lib-GIYcnm0E.js";
+import { t as pa, u as ma } from "./useResponsive-DfdjqQps.js";
+import { u as ya, a as bt } from "./useNestedProp-mxyyqd0B.js";
+import { u as ka, B as $a } from "./BaseScanner-BgWxam9d.js";
+import { u as wa } from "./usePrinter-DYRFiw7X.js";
+import { u as Ca } from "./useSvgExport-B7-Vrjtu.js";
+import { u as Ma } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as xa } from "./useChartAccessibility-9icAAmYg.js";
+import Aa from "./img-6wPuVVtk.js";
+import { _ as Ia } from "./Shape-DJG2zW7b.js";
+import _a from "./Title-D17CJXko.js";
+import { t as Pa } from "./themes-Dw-dDudK.js";
+import Sa from "./Legend-DsogCeTb.js";
+import { _ as Ta } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ba = ["id"], Oa = ["id"], La = ["xmlns", "viewBox"], Da = ["width", "height"], Ea = { key: 1 }, Na = ["id", "d"], Ra = { key: 2 }, Fa = ["transform"], za = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Ua = ["d", "fill", "stroke", "stroke-width"], Xa = ["d", "fill"], Va = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick", "onMouseleave"], ja = ["d", "fill", "stroke", "stroke-width"], Ga = ["d", "fill", "stroke", "stroke-width"], Ya = ["d", "fill", "stroke", "stroke-width"], Wa = { key: 0 }, Ha = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], qa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Qa = ["cx", "cy", "r", "stroke", "stroke-width", "fill"], Za = ["transform", "fill", "text-anchor", "font-size", "font-weight"], Ja = { key: 1 }, Ka = ["font-size", "font-weight", "fill"], eo = ["href"], to = ["transform", "text-anchor", "font-size", "font-weight", "fill", "innerHTML"], ao = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Qa = ["id"], Za = ["onClick"], Ja = {
+}, oo = ["id"], lo = ["onClick"], no = {
   key: 7,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, Ka = { style: { "text-align": "right", width: "100%" } }, eo = {
+}, so = { style: { "text-align": "right", width: "100%" } }, ro = {
   __name: "vue-ui-chord",
   props: {
     dataset: {
@@ -36,17 +37,17 @@ const xa = ["id"], Aa = ["id"], Ia = ["xmlns", "viewBox"], _a = ["width", "heigh
     }
   },
   emits: ["selectLegend", "selectGroup", "selectRibbon"],
-  setup(bt, { expose: pt, emit: mt }) {
-    Ht((t) => ({
-      v9b041f44: t.slicerColor
+  setup(pt, { expose: mt, emit: yt }) {
+    ea((t) => ({
+      dd6a513c: t.slicerColor
     }));
-    const yt = W(() => import("./vue-ui-accordion-CeMTgpl0.js")), Pe = W(() => import("./BaseIcon-Bz-1GQhu.js")), kt = W(() => import("./DataTable-BvjacRbw.js")), $t = W(() => import("./PackageVersion-Cwrh45ON.js")), wt = W(() => import("./PenAndPaper-CR8q353D.js")), Ct = W(() => import("./UserOptions-DsTgvAok.js")), Mt = W(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_chord: xt } = ha(), S = bt, ne = mt, E = v(!!S.dataset && Object.hasOwn(S.dataset, "matrix")), k = v(Ie()), C = v(null), p = v(null), g = v(null), Te = v(0), O = v(null), Be = v(null), Se = v(null), Oe = v(null), Le = v(null), be = v(0), pe = v(0), me = v(0), Q = v(!1), U = rt(null), Z = rt(null), De = v(!1), J = v(null), ye = v(null), e = v($e()), { loading: Ee, FINAL_DATASET: M, manualLoading: K } = fa({
-      ...qt(S),
+    const kt = W(() => import("./vue-ui-accordion-Dch9YrCi.js")), Se = W(() => import("./BaseIcon-CtqN7W_g.js")), $t = W(() => import("./DataTable-BeI6gYJX.js")), wt = W(() => import("./PackageVersion-C9oklnuy.js")), Ct = W(() => import("./PenAndPaper-BxbYiPy4.js")), Mt = W(() => import("./UserOptions-B3vCIe-u.js")), xt = W(() => import("./BaseDraggableDialog-q3pgSDTz.js")), { vue_ui_chord: At } = ya(), B = pt, ne = yt, E = v(!!B.dataset && Object.hasOwn(B.dataset, "matrix")), $ = v(_e()), C = v(null), m = v(null), g = v(null), Te = v(0), O = v(null), Be = v(null), Oe = v(null), Le = v(null), De = v(null), be = v(0), pe = v(0), me = v(0), Q = v(!1), U = ut(null), Z = ut(null), Ee = v(!1), K = v(null), ye = v(null), e = v($e()), { loading: Ne, FINAL_DATASET: M, manualLoading: ee } = ka({
+      ...ta(B),
       FINAL_CONFIG: e,
       prepareConfig: $e,
       callback: () => {
         Promise.resolve().then(async () => {
-          await ht(), j.value.showTable = e.value.table.show;
+          await ft(), j.value.showTable = e.value.table.show;
         });
       },
       skeletonDataset: {
@@ -59,7 +60,7 @@ const xa = ["id"], Aa = ["id"], Ia = ["xmlns", "viewBox"], _a = ["width", "heigh
         labels: [],
         colors: ["#DBDBDB", "#C4C4C4", "#ADADAD", "#969696"]
       },
-      skeletonConfig: Jt({
+      skeletonConfig: la({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -88,65 +89,65 @@ const xa = ["id"], Aa = ["id"], Ia = ["xmlns", "viewBox"], _a = ["width", "heigh
           }
         }
       })
-    }), { userOptionsVisible: ke, setUserOptionsVisibility: Ne, keepUserOptionState: Re } = pa({ config: e.value }), { svgRef: ee } = ma({ config: e.value.style.chart.title }), { isPrinting: Fe, isImaging: ze, generatePdf: Ue, generateImage: Xe } = ba({
-      elementId: `chord_${k.value}`,
+    }), { userOptionsVisible: ke, setUserOptionsVisibility: Re, keepUserOptionState: Fe } = Ma({ config: e.value }), { svgRef: J } = xa({ config: e.value.style.chart.title }), { isPrinting: ze, isImaging: Ue, generatePdf: Xe, generateImage: Ve } = wa({
+      elementId: `chord_${$.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-chord",
       options: e.value.userOptions.print
     }), j = v({
       showTable: e.value.table.show
     });
     function $e() {
-      const t = gt({
-        userConfig: S.config,
-        defaultConfig: xt
+      const t = bt({
+        userConfig: B.config,
+        defaultConfig: At
       });
       return t.theme ? {
-        ...gt({
-          userConfig: wa.vue_ui_chord[t.theme] || S.config,
+        ...bt({
+          userConfig: Pa.vue_ui_chord[t.theme] || B.config,
           defaultConfig: t
         }),
-        customPalette: Kt[t.theme] || ge
+        customPalette: na[t.theme] || ge
       } : t;
     }
-    xe(() => S.config, (t) => {
-      Ee.value || (e.value = $e()), ke.value = !e.value.userOptions.showOnChartHover, we(), be.value += 1, pe.value += 1, me.value += 1, _.value = e.value.initialRotation, j.value.showTable = e.value.table.show;
+    Ae(() => B.config, (t) => {
+      Ne.value || (e.value = $e()), ke.value = !e.value.userOptions.showOnChartHover, we(), be.value += 1, pe.value += 1, me.value += 1, _.value = e.value.initialRotation, j.value.showTable = e.value.table.show;
     }, { deep: !0 });
-    const Ve = $(() => e.value.debug);
-    xe(() => S.dataset, () => {
-      je(), we(), be.value += 1, pe.value += 1, me.value += 1;
+    const je = p(() => e.value.debug);
+    Ae(() => B.dataset, () => {
+      Ge(), we(), be.value += 1, pe.value += 1, me.value += 1;
     });
-    function je() {
-      if (ea(S.dataset)) {
-        ft({
+    function Ge() {
+      if (sa(B.dataset)) {
+        gt({
           componentName: "VueUiChord",
           type: "dataset",
-          debug: Ve.value
-        }), E.value = !1, K.value = !0;
+          debug: je.value
+        }), E.value = !1, ee.value = !0;
         return;
       }
-      const t = ta({
-        datasetObject: S.dataset,
+      const t = ra({
+        datasetObject: B.dataset,
         requiredAttributes: ["matrix"]
       });
       if (t.length) {
         t.forEach((s) => {
-          ft({
+          gt({
             componentName: "VueUiChord",
             type: "datasetAttribute",
             property: s,
-            debug: Ve.value
+            debug: je.value
           });
-        }), E.value = !1, K.value = !0;
+        }), E.value = !1, ee.value = !0;
         return;
       }
-      const o = S.dataset.matrix;
+      const o = B.dataset.matrix;
       if (!Array.isArray(o) || o.length < 2) {
         console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
         
 matrix:[
     [1, 1],
     [1, 1]
-]`), E.value = !1, K.value = !0;
+]`), E.value = !1, ee.value = !0;
         return;
       }
       const a = o.length, l = o.findIndex((s) => !Array.isArray(s) || s.length !== a);
@@ -155,22 +156,22 @@ matrix:[
           `VueUiChord - Invalid matrix: dataset.matrix at index ${l} has ${Array.isArray(o[l]) ? o[l].length : "NaN"} elements instead of the required ${a}
 
 dataset.matrix[${l}] = [${Array.isArray(o[l]) ? o[l].toString() : "invalid"}]`
-        ), E.value = !1, K.value = !0;
+        ), E.value = !1, ee.value = !0;
         return;
       }
-      E.value = !0, K.value = !1;
+      E.value = !0, ee.value = !1;
     }
     function we() {
-      if (je(), e.value.responsive) {
-        const t = va(() => {
-          const { width: o, height: a, heightNoTitle: l, heightSource: s, heightTitle: n, heightLegend: u } = da({
+      if (Ge(), e.value.responsive) {
+        const t = pa(() => {
+          const { width: o, height: a, heightNoTitle: l, heightSource: s, heightTitle: n, heightLegend: u } = ma({
             chart: O.value,
             title: e.value.style.chart.title.text ? Be.value : null,
-            legend: e.value.style.chart.legend.show ? Se.value : null,
-            source: Oe.value,
-            noTitle: Le.value
+            legend: e.value.style.chart.legend.show ? Oe.value : null,
+            source: Le.value,
+            noTitle: De.value
           }), f = n + u + s + l;
-          o < a ? O.value.style.width = "100%" : (O.value.style.height = "100%", ee.value.style.height = `calc(100% - ${f}px)`);
+          o < a ? O.value.style.width = "100%" : (O.value.style.height = "100%", J.value.style.height = `calc(100% - ${f}px)`);
         }, 100);
         U.value && (Z.value && U.value.unobserve(Z.value), U.value.disconnect()), U.value = new ResizeObserver(t), Z.value = O.value.parentNode, U.value.observe(Z.value), t();
       }
@@ -178,7 +179,7 @@ dataset.matrix[${l}] = [${Array.isArray(o[l]) ? o[l].toString() : "invalid"}]`
         Q.value = !0;
       }, 500);
     }
-    function At() {
+    function It() {
       if (!M.value || !Object.hasOwn(M.value, "matrix") || M.value.matrix.length < 2) {
         console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
 
@@ -195,82 +196,82 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
       });
     }
     const Ye = v(null);
-    ut(() => {
-      De.value = !0, we();
+    it(() => {
+      Ee.value = !0, we();
     });
     const L = v({
       height: 600,
       width: 600
-    }), It = $(() => e.value.userOptions.show && !e.value.style.chart.title.text), _t = $(() => aa(e.value.customPalette)), b = $(() => ({
+    }), _t = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Pt = p(() => ua(e.value.customPalette)), b = p(() => ({
       inner: L.value.width * 0.3 * e.value.style.chart.arcs.innerRadiusRatio,
       outer: L.value.width * 0.34 * e.value.style.chart.arcs.outerRadiusRatio
-    })), Pt = $(() => e.value.style.chart.arcs.padAngle / 100), m = $(() => ({
+    })), St = p(() => e.value.style.chart.arcs.padAngle / 100), y = p(() => ({
       matrix: M.value.matrix ?? [[0]],
       labels: M.value.labels ?? [""],
-      colors: M.value.colors && Array.isArray(M.value.colors) && M.value.colors.length ? M.value.colors.map((t) => oa(t)) : M.value.matrix.map((t, o) => _t.value[o] || ge[o] || ge[o % ge.length])
+      colors: M.value.colors && Array.isArray(M.value.colors) && M.value.colors.length ? M.value.colors.map((t) => ia(t)) : M.value.matrix.map((t, o) => Pt.value[o] || ge[o] || ge[o % ge.length])
     }));
     function Tt(t, o) {
       const a = t.length, l = b.value.inner, s = new Array(a).fill(0);
       let n = 0;
       for (let c = 0; c < a; c += 1)
-        for (let y = 0; y < a; y += 1)
-          s[c] += t[c][y], n += t[c][y];
+        for (let k = 0; k < a; k += 1)
+          s[c] += t[c][k], n += t[c][k];
       const u = (2 * Math.PI - o * a) / n, f = [];
       let P = 0;
       for (let c = 0; c < a; c += 1) {
-        const y = P, B = y + s[c] * u;
+        const k = P, T = k + s[c] * u;
         f.push({
           index: c,
-          pattern: `pattern_${k.value}_${c}`,
-          startAngle: y,
-          endAngle: B,
-          name: m.value.labels[c],
-          id: Ie(),
-          color: m.value.colors[c],
+          pattern: `pattern_${$.value}_${c}`,
+          startAngle: k,
+          endAngle: T,
+          name: y.value.labels[c],
+          id: _e(),
+          color: y.value.colors[c],
           proportion: s[c] / n
-        }), P = B + o;
+        }), P = T + o;
       }
-      const T = [];
+      const S = [];
       for (let c = 0; c < a; c += 1) {
-        const y = t[c].map((D, X) => ({ j: X, v: D }));
-        y.sort((D, X) => X.v - D.v);
-        let B = f[c].startAngle;
-        for (const { j: D, v: X } of y) {
-          const G = B, le = G + X * u;
-          T.push({
+        const k = t[c].map((D, X) => ({ j: X, v: D }));
+        k.sort((D, X) => X.v - D.v);
+        let T = f[c].startAngle;
+        for (const { j: D, v: X } of k) {
+          const Y = T, le = Y + X * u;
+          S.push({
             index: c,
             subIndex: D,
-            pattern: `pattern_${k.value}_${c}`,
-            startAngle: G,
+            pattern: `pattern_${$.value}_${c}`,
+            startAngle: Y,
             endAngle: le,
             value: X,
-            groupName: m.value.labels[c],
+            groupName: y.value.labels[c],
             groupId: f[c].id,
-            groupColor: m.value.colors[c],
-            midAngle: (G + le) / 2,
-            midBaseX: Math.cos((G + le) / 2 - Math.PI / 2) * l,
-            midBaseY: Math.sin((G + le) / 2 - Math.PI / 2) * l
-          }), B = le;
+            groupColor: y.value.colors[c],
+            midAngle: (Y + le) / 2,
+            midBaseX: Math.cos((Y + le) / 2 - Math.PI / 2) * l,
+            midBaseY: Math.sin((Y + le) / 2 - Math.PI / 2) * l
+          }), T = le;
         }
       }
       const N = [];
-      for (const c of T) {
-        const y = T.find(
-          (B) => B.index === c.subIndex && B.subIndex === c.index
+      for (const c of S) {
+        const k = S.find(
+          (T) => T.index === c.subIndex && T.subIndex === c.index
         );
-        N.push({ source: c, target: y, id: Ie() });
+        N.push({ source: c, target: k, id: _e() });
       }
       return { groups: f, chords: N };
     }
-    const A = $(() => {
-      const t = Tt(m.value.matrix, Pt.value);
-      return At(), t.chords.sort(
+    const A = p(() => {
+      const t = Tt(y.value.matrix, St.value);
+      return It(), t.chords.sort(
         (o, a) => Math.max(a.source.value, a.target.value) - Math.max(o.source.value, o.target.value)
       ), t;
-    }), Bt = $(() => {
+    }), Bt = p(() => {
       const t = b.value.outer + e.value.style.chart.ribbons.labels.offset + 12, a = e.value.style.chart.ribbons.labels.fontSize * 0.6, l = [];
-      if (p.value) {
-        const n = p.value;
+      if (m.value) {
+        const n = m.value;
         if (n.source.value) {
           const u = String(n.source.value);
           l.push({
@@ -326,69 +327,69 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         });
       }
       return g.value && s(g.value), C.value && s(C.value.id), l;
-    }), St = $(() => {
+    }), Ot = p(() => {
       const t = Bt.value.map((s) => ({ ...s })).sort((s, n) => s.theta - n.theta), o = e.value.style.chart.ribbons.labels.minSeparationDeg * Math.PI / 180;
       let a = !0, l = 0;
       for (; a && l++ < 10; ) {
         a = !1;
         for (let f = 1; f < t.length; f += 1) {
-          const P = t[f - 1], T = t[f], N = P.theta + P.w + o;
-          T.theta < N && (T.theta = N, a = !0);
+          const P = t[f - 1], S = t[f], N = P.theta + P.w + o;
+          S.theta < N && (S.theta = N, a = !0);
         }
         const s = t[0], n = t[t.length - 1], u = n.theta + n.w + o - 2 * Math.PI;
         s.theta < u && (s.theta = u, a = !0);
       }
       return t;
     });
-    function Ge(t, o, a, l) {
-      const s = t - Math.PI / 2, n = o - Math.PI / 2, u = Math.cos(s) * a, f = Math.sin(s) * a, P = Math.cos(n) * a, T = Math.sin(n) * a, N = Math.cos(n) * l, c = Math.sin(n) * l, y = Math.cos(s) * l, B = Math.sin(s) * l, D = o - t > Math.PI ? 1 : 0;
-      return `M${u},${f} A${a},${a} 0 ${D} 1 ${P},${T} L${N},${c} A${l},${l} 0 ${D} 0 ${y},${B} Z`;
+    function We(t, o, a, l) {
+      const s = t - Math.PI / 2, n = o - Math.PI / 2, u = Math.cos(s) * a, f = Math.sin(s) * a, P = Math.cos(n) * a, S = Math.sin(n) * a, N = Math.cos(n) * l, c = Math.sin(n) * l, k = Math.cos(s) * l, T = Math.sin(s) * l, D = o - t > Math.PI ? 1 : 0;
+      return `M${u},${f} A${a},${a} 0 ${D} 1 ${P},${S} L${N},${c} A${l},${l} 0 ${D} 0 ${k},${T} Z`;
     }
     function se(t, o) {
-      const a = b.value.inner, l = t.startAngle - Math.PI / 2, s = t.endAngle - Math.PI / 2, n = o.startAngle - Math.PI / 2, u = o.endAngle - Math.PI / 2, f = Math.cos(l) * a, P = Math.sin(l) * a, T = Math.cos(s) * a, N = Math.sin(s) * a, c = Math.cos(n) * a, y = Math.sin(n) * a, B = Math.cos(u) * a, D = Math.sin(u) * a, X = t.endAngle - t.startAngle > Math.PI ? 1 : 0, G = o.endAngle - o.startAngle > Math.PI ? 1 : 0;
-      return `M${f},${P}A${a},${a} 0 ${X} 1 ${T},${N}Q0,0 ${c},${y}A${a},${a} 0 ${G} 1 ${B},${D}Q0,0 ${f},${P}Z`;
-    }
-    const We = $(() => _.value * Math.PI / 180);
-    function Ot(t) {
-      return (t.startAngle + t.endAngle) / 2;
+      const a = b.value.inner, l = t.startAngle - Math.PI / 2, s = t.endAngle - Math.PI / 2, n = o.startAngle - Math.PI / 2, u = o.endAngle - Math.PI / 2, f = Math.cos(l) * a, P = Math.sin(l) * a, S = Math.cos(s) * a, N = Math.sin(s) * a, c = Math.cos(n) * a, k = Math.sin(n) * a, T = Math.cos(u) * a, D = Math.sin(u) * a, X = t.endAngle - t.startAngle > Math.PI ? 1 : 0, Y = o.endAngle - o.startAngle > Math.PI ? 1 : 0;
+      return `M${f},${P}A${a},${a} 0 ${X} 1 ${S},${N}Q0,0 ${c},${k}A${a},${a} 0 ${Y} 1 ${T},${D}Q0,0 ${f},${P}Z`;
     }
+    const He = p(() => _.value * Math.PI / 180);
     function Lt(t) {
-      return ((Ot(t) + We.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+      return (t.startAngle + t.endAngle) / 2;
     }
     function Dt(t) {
-      let o = t + We.value;
-      return o = (o % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), o > Math.PI ? "end" : "start";
+      return ((Lt(t) + He.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
     }
     function Et(t) {
+      let o = t + He.value;
+      return o = (o % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), o > Math.PI ? "end" : "start";
+    }
+    function Nt(t) {
       const o = t - Math.PI / 2, a = Math.cos(o) * (b.value.outer + e.value.style.chart.arcs.labels.offset + 24), l = Math.sin(o) * (b.value.outer + e.value.style.chart.arcs.labels.offset + 24);
       return `translate(${a},${l})`;
     }
-    function Nt(t, o, a) {
-      const l = t - Math.PI / 2, s = o - Math.PI / 2, n = Math.cos(l) * a, u = Math.sin(l) * a, f = Math.cos(s) * a, P = Math.sin(s) * a, T = o - t > Math.PI ? 1 : 0;
-      return `M${n},${u} A${a},${a} 0 ${T} 1 ${f},${P}`;
+    function Rt(t, o, a) {
+      const l = t - Math.PI / 2, s = o - Math.PI / 2, n = Math.cos(l) * a, u = Math.sin(l) * a, f = Math.cos(s) * a, P = Math.sin(s) * a, S = o - t > Math.PI ? 1 : 0;
+      return `M${n},${u} A${a},${a} 0 ${S} 1 ${f},${P}`;
     }
     const _ = v(e.value.initialRotation), te = v(!1);
-    let He = 0, qe = 0;
-    function Qe(t) {
-      const o = ee.value.getBoundingClientRect(), a = o.left + o.width / 2, l = o.top + o.height / 2, s = t.clientX ?? t.touches[0].clientX, n = t.clientY ?? t.touches[0].clientY;
+    let qe = 0, Qe = 0;
+    function Ze(t) {
+      const o = J.value.getBoundingClientRect(), a = o.left + o.width / 2, l = o.top + o.height / 2, s = t.clientX ?? t.touches[0].clientX, n = t.clientY ?? t.touches[0].clientY;
       return Math.atan2(n - l, s - a);
     }
-    function Ze(t) {
-      !e.value.enableRotation || ae.value || (t.preventDefault(), te.value = !0, He = _.value, qe = Qe(t));
+    function Je(t) {
+      !e.value.enableRotation || ae.value || (t.preventDefault(), te.value = !0, qe = _.value, Qe = Ze(t));
     }
     function re(t) {
       if (!te.value) return;
-      const o = Qe(t);
-      _.value = He + (o - qe) * 180 / Math.PI;
+      const o = Ze(t);
+      _.value = qe + (o - Qe) * 180 / Math.PI;
     }
     function ue() {
       te.value = !1;
     }
-    function Je(t) {
-      return ca(
+    function Ke(t) {
+      return ba(
         e.value.style.chart.ribbons.labels.formatter,
         t,
-        _e({
+        Pe({
           p: e.value.style.chart.ribbons.labels.prefix,
           v: t,
           s: e.value.style.chart.ribbons.labels.suffix,
@@ -396,87 +397,87 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         })
       );
     }
-    ut(() => {
+    it(() => {
       window.addEventListener("mousemove", re), window.addEventListener("mouseup", ue), window.addEventListener("touchmove", re, { passive: !1 }), window.addEventListener("touchend", ue);
-    }), it(() => {
+    }), ct(() => {
       window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", ue), window.removeEventListener("touchmove", re), window.removeEventListener("touchend", ue), clearTimeout(Ye.value), U.value && (Z.value && U.value.unobserve(Z.value), U.value.disconnect());
     });
     const ie = v(!1);
-    function Ke(t) {
+    function et(t) {
       ie.value = t, Te.value += 1;
     }
-    function Rt(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (C.value = t);
-    }
     function Ft(t, o) {
-      C.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (C.value = t);
     }
     function zt(t, o) {
-      ne("selectGroup", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+      C.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
     function Ut(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (p.value = t);
+      ne("selectGroup", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
     }
     function Xt(t, o) {
-      p.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (m.value = t);
     }
     function Vt(t, o) {
-      ne("selectRibbon", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+      m.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
-    function et(t) {
-      return !g.value && !C.value && !p.value ? 0.8 : (g.value ? g.value === t.source.groupId : C.value ? C.value.id === t.source.groupId : p.value?.id === t.id) ? 1 : 0.1;
+    function jt(t, o) {
+      ne("selectRibbon", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
     }
     function tt(t) {
-      return !g.value && !C.value && !p.value || (g.value ? g.value === t.id : C.value ? C.value.id === t.id : [p.value?.source.groupId, p.value?.target.groupId].includes(t.id)) ? 1 : 0.3;
+      return !g.value && !C.value && !m.value ? 0.8 : (g.value ? g.value === t.source.groupId : C.value ? C.value.id === t.source.groupId : m.value?.id === t.id) ? 1 : 0.1;
+    }
+    function at(t) {
+      return !g.value && !C.value && !m.value || (g.value ? g.value === t.id : C.value ? C.value.id === t.id : [m.value?.source.groupId, m.value?.target.groupId].includes(t.id)) ? 1 : 0.3;
     }
     const ae = v(!1);
     function Ce() {
       ae.value = !ae.value;
     }
-    function at() {
+    function ot() {
       j.value.showTable = !j.value.showTable;
     }
-    function jt() {
+    function Gt() {
       return A.value;
     }
-    const Y = v(null);
-    function ot() {
+    const G = v(null);
+    function lt() {
       const t = e.value.initialRotation;
-      Y.value !== null && cancelAnimationFrame(Y.value);
+      G.value !== null && cancelAnimationFrame(G.value);
       const o = () => {
-        _.value += (t - _.value) * 0.05, Math.abs(_.value - t) < 0.1 ? (_.value = t, Y.value = null) : Y.value = requestAnimationFrame(o);
+        _.value += (t - _.value) * 0.05, Math.abs(_.value - t) < 0.1 ? (_.value = t, G.value = null) : G.value = requestAnimationFrame(o);
       };
-      Y.value = requestAnimationFrame(o);
+      G.value = requestAnimationFrame(o);
     }
-    it(() => {
-      Y.value !== null && cancelAnimationFrame(Y.value);
+    ct(() => {
+      G.value !== null && cancelAnimationFrame(G.value);
     });
-    function lt(t) {
+    function nt(t) {
       t === g.value ? (g.value = null, ne("selectLegend", null)) : (g.value = t, ne("selectLegend", A.value.groups.find((o) => o.id === t)));
     }
-    const nt = $(() => A.value.groups.map((t, o) => ({
+    const Me = p(() => A.value.groups.map((t, o) => ({
       name: t.name,
       color: t.color,
       shape: "circle",
       patternIndex: o,
-      pattern: `pattern_${k.value}_${o}`,
+      pattern: `pattern_${$.value}_${o}`,
       id: t.id,
-      select: () => lt(t.id),
+      select: () => nt(t.id),
       opacity: g.value ? g.value === t.id ? 1 : 0.3 : 1
-    }))), Yt = $(() => ({
+    }))), Yt = p(() => ({
       cy: "chord-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), ce = $(() => {
+    })), ce = p(() => {
       const t = A.value.groups.map((a, l) => ({
         name: a.name || l,
         color: a.color
-      })), o = m.value.matrix;
+      })), o = y.value.matrix;
       return { head: t, body: o };
-    }), ve = $(() => {
+    }), ve = p(() => {
       const t = [{ name: "", color: null }, ...ce.value.head], o = ce.value.body.map((s, n) => [
         ce.value.head[n],
         ...ce.value.body[n]
@@ -500,25 +501,25 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         config: a
       };
     });
-    function Me(t = null) {
-      ht(() => {
-        const o = m.value.matrix.map((s, n) => [
-          [m.value.labels[n] || n],
+    function xe(t = null) {
+      ft(() => {
+        const o = y.value.matrix.map((s, n) => [
+          [y.value.labels[n] || n],
           s
         ]), a = [
           [e.value.style.chart.title.text],
           [e.value.style.chart.title.subtitle.text],
           [
             [""],
-            ...m.value.labels.map((s, n) => [s || n])
+            ...y.value.labels.map((s, n) => [s || n])
           ]
-        ].concat(o), l = ua(a);
-        t ? t(l) : ia({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-chord" });
+        ].concat(o), l = fa(a);
+        t ? t(l) : ga({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-chord" });
       });
     }
-    async function Gt({ scale: t = 2 } = {}) {
+    async function Wt({ scale: t = 2 } = {}) {
       if (!O.value) return;
-      const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: s, base64: n } = await ya({ domElement: O.value, base64: !0, img: !0, scale: t });
+      const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: s, base64: n } = await Aa({ domElement: O.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: s,
         base64: n,
@@ -528,18 +529,18 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         aspectRatio: l
       };
     }
-    function Wt(t, o) {
-      return `${m.value.labels[o]}${e.value.style.chart.arcs.labels.showPercentage ? _e({
+    function Ht(t, o) {
+      return `${y.value.labels[o]}${e.value.style.chart.arcs.labels.showPercentage ? Pe({
         p: " (",
         v: isNaN(t.proportion) ? 0 : t.proportion * 100,
         s: "%)",
         r: e.value.style.chart.arcs.labels.roundingPercentage
       }) : ""}`;
     }
-    const oe = $(() => {
+    const oe = p(() => {
       const t = e.value.table.useDialog && !e.value.table.show, o = j.value.showTable;
       return {
-        component: t ? Mt : yt,
+        component: t ? xt : kt,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -566,47 +567,63 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         }
       };
     });
-    xe(() => j.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && J.value ? J.value.open() : "close" in J.value && J.value.close());
+    Ae(() => j.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && K.value ? K.value.open() : "close" in K.value && K.value.close());
     });
     function st() {
       j.value.showTable = !1, ye.value && ye.value.setTableIconState(!1);
     }
-    return pt({
-      getData: jt,
-      getImage: Gt,
-      generateCsv: Me,
-      generateImage: Xe,
-      generatePdf: Ue,
+    const qt = p(() => e.value.style.chart.backgroundColor), Qt = p(() => e.value.style.chart.legend), Zt = p(() => e.value.style.chart.title), { exportSvg: Jt, getSvg: Kt } = Ca({
+      svg: J,
+      title: Zt,
+      legend: Qt,
+      legendItems: Me,
+      backgroundColor: qt
+    });
+    async function rt({ isCb: t }) {
+      if (t) {
+        const { blob: o, url: a, text: l, dataUrl: s } = await Kt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: s });
+      } else
+        Jt();
+    }
+    return mt({
+      getData: Gt,
+      getImage: Wt,
+      generateCsv: xe,
+      generateImage: Ve,
+      generateSvg: rt,
+      generatePdf: Xe,
       toggleAnnotator: Ce,
-      toggleTable: at,
-      toggleFullscreen: Ke
+      toggleTable: ot,
+      toggleFullscreen: et
     }), (t, o) => (r(), i("div", {
       ref_key: "chordChart",
       ref: O,
       class: F({
+        "vue-data-ui-component": !0,
         "vue-ui-chord": !0,
         "vue-data-ui-wrapper-fullscreen": ie.value,
         "vue-data-ui-responsive": e.value.responsive
       }),
       style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `chord_${k.value}`,
-      onMouseenter: o[2] || (o[2] = () => d(Ne)(!0)),
-      onMouseleave: o[3] || (o[3] = () => d(Ne)(!1))
+      id: `chord_${$.value}`,
+      onMouseenter: o[2] || (o[2] = () => d(Re)(!0)),
+      onMouseleave: o[3] || (o[3] = () => d(Re)(!1))
     }, [
-      e.value.userOptions.buttons.annotator && d(ee) ? (r(), V(d(wt), {
+      e.value.userOptions.buttons.annotator && d(J) ? (r(), V(d(Ct), {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
         active: ae.value,
-        svgRef: d(ee),
+        svgRef: d(J),
         onClose: Ce
       }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : h("", !0),
       w(t.$slots, "userConfig", {}, void 0, !0),
-      It.value ? (r(), i("div", {
+      _t.value ? (r(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Le,
+        ref: De,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : h("", !0),
@@ -616,7 +633,7 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         ref: Be,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), V($a, {
+        (r(), V(_a, {
           key: `title_${be.value}`,
           config: {
             title: {
@@ -631,20 +648,21 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         }, null, 8, ["config"]))
       ], 512)) : h("", !0),
       I("div", {
-        id: `legend-top-${k.value}`
-      }, null, 8, Aa),
-      e.value.userOptions.show && E.value && (d(Re) || d(ke)) ? (r(), V(d(Ct), {
+        id: `legend-top-${$.value}`
+      }, null, 8, Oa),
+      e.value.userOptions.show && E.value && (d(Fe) || d(ke)) ? (r(), V(d(Mt), {
         ref_key: "userOptionsRef",
         ref: ye,
         key: `user_option_${Te.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: d(Fe),
-        isImaging: d(ze),
-        uid: k.value,
+        isPrinting: d(ze),
+        isImaging: d(Ue),
+        uid: $.value,
         hasTooltip: !1,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: !1,
@@ -658,16 +676,17 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Ke,
-        onGeneratePdf: d(Ue),
-        onGenerateCsv: Me,
-        onGenerateImage: d(Xe),
-        onToggleTable: at,
+        onToggleFullscreen: et,
+        onGeneratePdf: d(Xe),
+        onGenerateCsv: xe,
+        onGenerateImage: d(Ve),
+        onGenerateSvg: rt,
+        onToggleTable: ot,
         onToggleAnnotator: Ce,
         style: R({
-          visibility: d(Re) ? d(ke) ? "visible" : "hidden" : "visible"
+          visibility: d(Fe) ? d(ke) ? "visible" : "hidden" : "visible"
         })
-      }, Ae({ _: 2 }, [
+      }, Ie({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: x(({ isOpen: a, color: l }) => [
@@ -717,21 +736,21 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
       (r(), i("svg", {
-        xmlns: d(la),
+        xmlns: d(ca),
         ref_key: "svgRef",
-        ref: ee,
+        ref: J,
         viewBox: `0 0 ${L.value.width} ${L.value.height}`,
         preserveAspectRatio: "xMidYMid meet",
         style: {
           overflow: "visible"
         },
         class: F({ "vue-ui-chord-rotating": te.value, "vue-ui-chord-idle": !te.value }),
-        onMousedown: ct(Ze, ["prevent"]),
-        onTouchstart: ct(Ze, ["prevent"])
+        onMousedown: vt(Je, ["prevent"]),
+        onTouchstart: vt(Je, ["prevent"])
       }, [
-        fe(d($t)),
+        fe(d(wt)),
         t.$slots["chart-background"] ? (r(), i("foreignObject", {
           key: 0,
           x: 0,
@@ -743,22 +762,22 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
           }
         }, [
           w(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, _a)) : h("", !0),
-        e.value.style.chart.arcs.labels.curved ? (r(), i("defs", Pa, [
+        ], 8, Da)) : h("", !0),
+        e.value.style.chart.arcs.labels.curved ? (r(), i("defs", Ea, [
           (r(!0), i(z, null, H(A.value.groups, (a, l) => (r(), i("path", {
             key: `labelPath-${l}`,
-            id: `labelPath-${l}_${k.value}`,
-            d: Nt(
+            id: `labelPath-${l}_${$.value}`,
+            d: Rt(
               a.startAngle,
               a.endAngle,
               (b.value.inner + b.value.outer) / 2 + e.value.style.chart.arcs.labels.offset
             ),
             fill: "none"
-          }, null, 8, Ta))), 128))
+          }, null, 8, Na))), 128))
         ])) : h("", !0),
-        t.$slots.pattern ? (r(), i("g", Ba, [
+        t.$slots.pattern ? (r(), i("g", Ra, [
           (r(!0), i(z, null, H(A.value.groups, (a, l) => (r(), i("defs", null, [
-            w(t.$slots, "pattern", vt({ ref_for: !0 }, { seriesIndex: a.index, patternId: `pattern_${k.value}_${l}` }), void 0, !0)
+            w(t.$slots, "pattern", dt({ ref_for: !0 }, { seriesIndex: a.index, patternId: `pattern_${$.value}_${l}` }), void 0, !0)
           ]))), 256))
         ])) : h("", !0),
         I("g", {
@@ -768,28 +787,28 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
             (r(), i("path", {
               class: F({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": e.value.useCssAnimation && !Q.value }),
               key: `arc-${l}`,
-              d: Ge(
+              d: We(
                 a.startAngle,
                 a.endAngle,
                 b.value.outer,
                 b.value.inner
               ),
-              fill: m.value.colors[l],
+              fill: y.value.colors[l],
               stroke: e.value.style.chart.arcs.stroke,
               "stroke-width": e.value.style.chart.arcs.strokeWidth,
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               style: R({
-                opacity: tt(a)
+                opacity: at(a)
               }),
-              onMouseenter: (s) => Rt(a, l),
-              onMouseleave: (s) => Ft(a, l),
-              onClick: (s) => zt(a, l)
-            }, null, 46, Oa)),
+              onMouseenter: (s) => Ft(a, l),
+              onMouseleave: (s) => zt(a, l),
+              onClick: (s) => Ut(a, l)
+            }, null, 46, za)),
             t.$slots.pattern ? (r(), i("path", {
               class: F({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": e.value.useCssAnimation && !Q.value }),
               key: `arc-${l}`,
-              d: Ge(
+              d: We(
                 a.startAngle,
                 a.endAngle,
                 b.value.outer,
@@ -801,10 +820,10 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               style: R({
-                opacity: tt(a),
+                opacity: at(a),
                 pointerEvents: "none"
               })
-            }, null, 14, La)) : h("", !0)
+            }, null, 14, Ua)) : h("", !0)
           ]))), 256)),
           I("g", null, [
             (r(!0), i(z, null, H(C.value ? A.value.chords.filter((a) => a.source.groupId === C.value.id) : g.value ? A.value.chords.filter((a) => a.source.groupId === g.value) : A.value.chords, (a, l) => (r(), i(z, {
@@ -816,50 +835,50 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
                 d: se(a.source, a.target),
                 fill: e.value.style.chart.backgroundColor,
                 style: R({ opacity: e.value.style.chart.ribbons.underlayerOpacity })
-              }, null, 14, Da)) : h("", !0),
+              }, null, 14, Xa)) : h("", !0),
               a.source.value ? (r(), i("path", {
                 key: 1,
                 class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
                 d: se(a.source, a.target),
-                fill: m.value.colors[a.source.index],
+                fill: y.value.colors[a.source.index],
                 stroke: e.value.style.chart.ribbons.stroke,
                 "stroke-width": e.value.style.chart.ribbons.strokeWidth,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
-                style: R({ opacity: et(a) }),
-                onMouseenter: (s) => Ut({
+                style: R({ opacity: tt(a) }),
+                onMouseenter: (s) => Xt({
                   ...a,
                   path: se(a.source, a.target),
-                  color: m.value.colors[a.source.index]
+                  color: y.value.colors[a.source.index]
                 }, l),
-                onClick: (s) => Vt({
+                onClick: (s) => jt({
                   ...a,
-                  color: m.value.colors[a.source.index]
+                  color: y.value.colors[a.source.index]
                 }, l),
-                onMouseleave: (s) => Xt({
+                onMouseleave: (s) => Vt({
                   ...a,
-                  color: m.value.colors[a.source.index]
+                  color: y.value.colors[a.source.index]
                 }, l)
-              }, null, 46, Ea)) : h("", !0),
+              }, null, 46, Va)) : h("", !0),
               a.source.value && t.$slots.pattern ? (r(), i("path", {
                 key: 2,
                 class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
                 d: se(a.source, a.target),
-                fill: `url(#pattern_${k.value}_${a.source.index})`,
+                fill: `url(#pattern_${$.value}_${a.source.index})`,
                 stroke: e.value.style.chart.ribbons.stroke,
                 "stroke-width": e.value.style.chart.ribbons.strokeWidth,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 style: R({
-                  opacity: et(a),
+                  opacity: tt(a),
                   pointerEvents: "none"
                 })
-              }, null, 14, Na)) : h("", !0)
+              }, null, 14, ja)) : h("", !0)
             ], 64))), 128)),
-            p.value ? (r(), i("path", {
+            m.value ? (r(), i("path", {
               key: 0,
-              d: p.value.path,
-              fill: p.value.color,
+              d: m.value.path,
+              fill: m.value.color,
               stroke: e.value.style.chart.ribbons.stroke,
               "stroke-width": e.value.style.chart.ribbons.strokeWidth,
               "stroke-linecap": "round",
@@ -868,11 +887,11 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
               style: {
                 pointerEvents: "none"
               }
-            }, null, 8, Ra)) : h("", !0),
-            p.value && t.$slots.pattern ? (r(), i("path", {
+            }, null, 8, Ga)) : h("", !0),
+            m.value && t.$slots.pattern ? (r(), i("path", {
               key: 1,
-              d: p.value.path,
-              fill: `url(#${p.value.source.pattern})`,
+              d: m.value.path,
+              fill: `url(#${m.value.source.pattern})`,
               stroke: e.value.style.chart.ribbons.stroke,
               "stroke-width": e.value.style.chart.ribbons.strokeWidth,
               "stroke-linecap": "round",
@@ -881,10 +900,10 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
               style: {
                 pointerEvents: "none"
               }
-            }, null, 8, Fa)) : h("", !0)
+            }, null, 8, Ya)) : h("", !0)
           ]),
-          (C.value || p.value || g.value) && e.value.style.chart.ribbons.labels.show ? (r(), i("g", za, [
-            (r(!0), i(z, null, H(St.value, (a) => (r(), i(z, {
+          (C.value || m.value || g.value) && e.value.style.chart.ribbons.labels.show ? (r(), i("g", Wa, [
+            (r(!0), i(z, null, H(Ot.value, (a) => (r(), i(z, {
               key: a.id
             }, [
               I("line", {
@@ -895,7 +914,7 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.ribbons.labels.connector.strokeWidth * 3,
                 "pointer-events": "none"
-              }, null, 8, Ua),
+              }, null, 8, Ha),
               I("line", {
                 x1: a.midBaseX,
                 y1: a.midBaseY,
@@ -904,7 +923,7 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
                 stroke: e.value.style.chart.ribbons.labels.connector.stroke,
                 "stroke-width": e.value.style.chart.ribbons.labels.connector.strokeWidth,
                 "pointer-events": "none"
-              }, null, 8, Xa),
+              }, null, 8, qa),
               e.value.style.chart.ribbons.labels.marker.show ? (r(), i("circle", {
                 key: 0,
                 cx: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
@@ -914,7 +933,7 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
                 "stroke-width": e.value.style.chart.ribbons.labels.marker.strokeWidth,
                 fill: a.groupColor,
                 "pointer-events": "none"
-              }, null, 8, Va)) : h("", !0),
+              }, null, 8, Qa)) : h("", !0),
               I("text", {
                 transform: `
                             translate(
@@ -923,113 +942,113 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
                             ) rotate(${-_.value})
                             `,
                 fill: e.value.style.chart.ribbons.labels.useSerieColor ? a.groupColor : e.value.style.chart.ribbons.labels.color,
-                "text-anchor": Dt(a.theta),
+                "text-anchor": Et(a.theta),
                 "font-size": e.value.style.chart.ribbons.labels.fontSize,
                 "font-weight": e.value.style.chart.ribbons.labels.bold ? "bold" : "normal",
                 dy: ".35em",
                 "pointer-events": "none"
-              }, q(Je(a.value)), 9, ja)
+              }, q(Ke(a.value)), 9, Za)
             ], 64))), 128))
           ])) : h("", !0),
-          e.value.style.chart.arcs.labels.show ? (r(), i("g", Ya, [
+          e.value.style.chart.arcs.labels.show ? (r(), i("g", Ja, [
             e.value.style.chart.arcs.labels.curved ? (r(!0), i(z, { key: 0 }, H(A.value.groups, (a, l) => (r(), i("text", {
               class: "vue-ui-chord-label-curved",
               key: `curved-label-${l}`,
               "font-size": e.value.style.chart.arcs.labels.fontSize,
               "font-weight": e.value.style.chart.arcs.labels.bold ? "bold" : "normal",
-              fill: e.value.style.chart.arcs.labels.adaptColorToBackground ? d(na)(m.value.colors[l]) : e.value.style.chart.arcs.labels.color
+              fill: e.value.style.chart.arcs.labels.adaptColorToBackground ? d(va)(y.value.colors[l]) : e.value.style.chart.arcs.labels.color
             }, [
               I("textPath", {
-                href: `#labelPath-${l}_${k.value}`,
+                href: `#labelPath-${l}_${$.value}`,
                 startOffset: "50%",
                 "text-anchor": "middle"
-              }, q(m.value.labels[l]) + q(e.value.style.chart.arcs.labels.showPercentage ? d(_e)({
+              }, q(y.value.labels[l]) + q(e.value.style.chart.arcs.labels.showPercentage ? d(Pe)({
                 p: " (",
                 v: isNaN(a.proportion) ? 0 : a.proportion * 100,
                 s: "%)",
                 r: e.value.style.chart.arcs.labels.roundingPercentage
-              }) : ""), 9, Wa)
-            ], 8, Ga))), 128)) : !C.value && !p.value && !g.value ? (r(!0), i(z, { key: 1 }, H(A.value.groups, (a, l) => (r(), i("text", {
+              }) : ""), 9, eo)
+            ], 8, Ka))), 128)) : !C.value && !m.value && !g.value ? (r(!0), i(z, { key: 1 }, H(A.value.groups, (a, l) => (r(), i("text", {
               class: "vue-ui-chord-label-straight",
               key: `label-${l}`,
               transform: `
-                                ${Et((a.startAngle + a.endAngle) / 2)}
+                                ${Nt((a.startAngle + a.endAngle) / 2)}
                                 rotate(${-_.value})
                             `,
               dy: ".35em",
-              "text-anchor": Lt(a) > Math.PI ? "end" : "start",
+              "text-anchor": Dt(a) > Math.PI ? "end" : "start",
               "font-size": e.value.style.chart.arcs.labels.fontSize,
               "font-weight": e.value.style.chart.arcs.labels.bold ? "bold" : "normal",
               fill: e.value.style.chart.arcs.labels.color,
-              innerHTML: d(sa)({
-                content: d(ra)(Wt(a, l)),
+              innerHTML: d(da)({
+                content: d(ha)(Ht(a, l)),
                 fontSize: e.value.style.chart.arcs.labels.fontSize,
                 fill: e.value.style.chart.arcs.labels.color,
                 x: 0,
                 y: 0
               })
-            }, null, 8, Ha))), 128)) : h("", !0)
+            }, null, 8, to))), 128)) : h("", !0)
           ])) : h("", !0)
-        ], 8, Sa),
+        ], 8, Fa),
         w(t.$slots, "svg", { svg: { height: 600, width: 600 } }, void 0, !0)
-      ], 42, Ia)),
-      t.$slots.watermark ? (r(), i("div", qa, [
-        w(t.$slots, "watermark", de(he({ isPrinting: d(Fe) || d(ze) })), void 0, !0)
+      ], 42, La)),
+      t.$slots.watermark ? (r(), i("div", ao, [
+        w(t.$slots, "watermark", de(he({ isPrinting: d(ze) || d(Ue) })), void 0, !0)
       ])) : h("", !0),
       I("div", {
-        id: `legend-bottom-${k.value}`
-      }, null, 8, Qa),
-      De.value ? (r(), V(Qt, {
+        id: `legend-bottom-${$.value}`
+      }, null, 8, oo),
+      Ee.value ? (r(), V(aa, {
         key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${$.value}` : `#legend-bottom-${$.value}`
       }, [
         I("div", {
           ref_key: "chartLegend",
-          ref: Se
+          ref: Oe
         }, [
-          e.value.style.chart.legend.show ? (r(), V(Ca, {
+          e.value.style.chart.legend.show ? (r(), V(Sa, {
             key: `legend_${me.value}`,
-            legendSet: nt.value,
+            legendSet: Me.value,
             config: Yt.value,
-            onClickMarker: o[0] || (o[0] = ({ legend: a }) => lt(a.id))
-          }, Ae({
+            onClickMarker: o[0] || (o[0] = ({ legend: a }) => nt(a.id))
+          }, Ie({
             item: x(({ legend: a }) => [
               I("div", {
                 style: R({
                   opacity: g.value ? g.value === a.id ? 1 : 0.3 : 1
                 }),
                 onClick: (l) => a.select()
-              }, q(a.name), 13, Za)
+              }, q(a.name), 13, lo)
             ]),
             _: 2
           }, [
             t.$slots.pattern ? {
               name: "legend-pattern",
               fn: x(({ legend: a, index: l }) => [
-                fe(ka, {
+                fe(Ia, {
                   shape: a.shape,
                   radius: 30,
                   stroke: "none",
                   plot: { x: 30, y: 30 },
-                  fill: `url(#pattern_${k.value}_${l})`
+                  fill: `url(#pattern_${$.value}_${l})`
                 }, null, 8, ["shape", "fill"])
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["legendSet", "config"])) : h("", !0),
-          w(t.$slots, "legend", { legend: nt.value }, void 0, !0)
+          w(t.$slots, "legend", { legend: Me.value }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : h("", !0),
       t.$slots.source ? (r(), i("div", {
         key: 6,
         ref_key: "source",
-        ref: Oe,
+        ref: Le,
         dir: "auto"
       }, [
         w(t.$slots, "source", {}, void 0, !0)
       ], 512)) : h("", !0),
-      _.value !== e.value.initialRotation ? (r(), i("div", Ja, [
-        w(t.$slots, "reset-action", { reset: ot }, () => [
+      _.value !== e.value.initialRotation ? (r(), i("div", no, [
+        w(t.$slots, "reset-action", { reset: lt }, () => [
           I("button", {
             "data-cy-reset": "",
             tabindex: "0",
@@ -1038,22 +1057,22 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
             style: R({
               background: e.value.style.chart.backgroundColor
             }),
-            onClick: ot
+            onClick: lt
           }, [
-            fe(d(Pe), {
+            fe(d(Se), {
               name: "refresh",
               stroke: e.value.style.chart.color
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
       ])) : h("", !0),
-      E.value && e.value.userOptions.buttons.table ? (r(), V(Zt(oe.value.component), vt({ key: 8 }, oe.value.props, {
+      E.value && e.value.userOptions.buttons.table ? (r(), V(oa(oe.value.component), dt({ key: 8 }, oe.value.props, {
         ref_key: "tableUnit",
-        ref: J,
+        ref: K,
         onClose: st
-      }), Ae({
+      }), Ie({
         content: x(() => [
-          (r(), V(d(kt), {
+          (r(), V(d($t), {
             key: `table_${pe.value}`,
             colNames: ve.value.colNames,
             head: ve.value.head,
@@ -1064,10 +1083,10 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
             onClose: st
           }, {
             th: x(({ th: a }) => [
-              dt(q(a.name), 1)
+              ht(q(a.name), 1)
             ]),
             td: x(({ td: a }) => [
-              I("div", Ka, q(a.name ? a.name : Je(a)), 1)
+              I("div", so, q(a.name ? a.name : Ke(a)), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1077,7 +1096,7 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
         e.value.table.useDialog ? {
           name: "title",
           fn: x(() => [
-            dt(q(oe.value.title), 1)
+            ht(q(oe.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1087,9 +1106,9 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
             I("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[1] || (o[1] = (a) => Me(e.value.userOptions.callbacks.csv))
+              onClick: o[1] || (o[1] = (a) => xe(e.value.userOptions.callbacks.csv))
             }, [
-              fe(d(Pe), {
+              fe(d(Se), {
                 name: "excel",
                 stroke: oe.value.props.color
               }, null, 8, ["stroke"])
@@ -1098,10 +1117,10 @@ dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should
           key: "1"
         } : void 0
       ]), 1040)) : h("", !0),
-      d(Ee) ? (r(), V(ga, { key: 9 })) : h("", !0)
-    ], 46, xa));
+      d(Ne) ? (r(), V($a, { key: 9 })) : h("", !0)
+    ], 46, Ba));
   }
-}, bo = /* @__PURE__ */ Ma(eo, [["__scopeId", "data-v-8fbd9d0d"]]);
+}, Mo = /* @__PURE__ */ Ta(ro, [["__scopeId", "data-v-84d34aa4"]]);
 export {
-  bo as default
+  Mo as default
 };