vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-chord-CaX_IUVs.js

@@ -0,0 +1,1326 @@
+import { useCssVars as $a, defineAsyncComponent as ae, ref as v, shallowRef as At, computed as m, toRefs as Ca, watch as Ne, onMounted as Mt, onBeforeUnmount as Pt, openBlock as r, createElementBlock as i, unref as h, normalizeStyle as z, normalizeClass as j, createElementVNode as x, toDisplayString as H, createBlock as G, createCommentVNode as f, withCtx as y, renderSlot as p, normalizeProps as L, guardReactiveProps as D, createSlots as Re, withModifiers as It, createVNode as ke, Fragment as Y, renderList as oe, mergeProps as xt, Teleport as wa, resolveDynamicComponent as Aa, createTextVNode as _t, nextTick as Fe } from "vue";
+import { j as ze, t as St, m as Ma, p as $e, o as Pa, q as Tt, r as Ia, n as xa, s as _a, X as Sa, W as Ta, l as Ue, as as Oa, au as Ba, k as La, a0 as Da, a1 as Ea } from "./lib-DBptbyyI.js";
+import { t as Na, u as Ra } from "./useResponsive-DfdjqQps.js";
+import { u as Fa } from "./useConfig-DO94Aj5s.js";
+import { u as za, B as Ua } from "./BaseScanner-BhhkKVoj.js";
+import { u as Va } from "./usePrinter-CEpYU3r5.js";
+import { u as Xa } from "./useSvgExport-ByUukOZt.js";
+import { u as Ve } from "./useNestedProp-Bf5XFbs8.js";
+import { u as ja } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Ga } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ya } from "./useChartAccessibility-9icAAmYg.js";
+import Wa from "./img-LXxMLmCg.js";
+import { _ as qa } from "./Shape-BKRUOeKk.js";
+import Ka from "./Title-BeMKE1cj.js";
+import Ha from "./vue_ui_chord-Bc1_ocwK.js";
+import Qa from "./Legend-CS7Xo5LK.js";
+import { A as Za } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as Ja } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const eo = ["id"], to = ["id"], ao = ["id"], oo = ["xmlns", "viewBox", "aria-describedby"], lo = ["width", "height"], no = { key: 1 }, so = ["id", "d"], ro = { key: 2 }, uo = ["transform"], io = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], co = ["d", "fill", "stroke", "stroke-width"], vo = ["d", "fill"], ho = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick", "onMouseleave"], fo = ["d", "fill", "stroke", "stroke-width"], go = ["d", "fill", "stroke", "stroke-width"], po = ["d", "fill", "stroke", "stroke-width"], bo = { key: 0 }, mo = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], yo = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ko = ["cx", "cy", "r", "stroke", "stroke-width", "fill"], $o = ["transform", "fill", "text-anchor", "font-size", "font-weight"], Co = { key: 1 }, wo = ["font-size", "font-weight", "fill"], Ao = ["href"], Mo = ["transform", "text-anchor", "font-size", "font-weight", "fill", "innerHTML"], Po = {
+  key: 5,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Io = {
+  key: 6,
+  class: "vue-data-ui-watermark"
+}, xo = ["id"], _o = ["onClick"], So = {
+  key: 9,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, To = { style: { "text-align": "right", width: "100%" } }, Oo = {
+  __name: "vue-ui-chord",
+  props: {
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend", "selectGroup", "selectRibbon", "copyAlt"],
+  setup(Ot, { expose: Bt, emit: Lt }) {
+    $a((e) => ({
+      v05685234: e.slicerColor
+    }));
+    const Dt = ae(() => import("./vue-ui-accordion-nvggWcGN.js")), Xe = ae(() => import("./BaseIcon-Cb3zzG6s.js")), Et = ae(() => import("./DataTable-DT2kIdQ6.js")), Nt = ae(() => import("./PackageVersion-DPO-OOVI.js")), Rt = ae(() => import("./PenAndPaper-Ct3qJ4lA.js")), Ft = ae(() => import("./UserOptions-rW2fRf3V.js")), zt = ae(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_chord: Ut } = Fa(), { isThemeValid: Vt, warnInvalidTheme: Xt } = ja(), S = Ot, re = Lt, U = v(!!S.dataset && Object.hasOwn(S.dataset, "matrix")), M = v(ze()), w = v(null), k = v(null), b = v(null), je = v(0), E = v(null), Ge = v(null), Ye = v(null), We = v(null), qe = v(null), Ce = v(0), we = v(0), Ae = v(0), le = v(!1), W = At(null), ne = At(null), Ke = v(!1), ue = v(null), Me = v(null), fe = v(!1), ge = v(!1), V = v("group"), B = v(null), Pe = v(!1), a = v(Se()), Q = m(() => a.value.userOptions.useCursorPointer), jt = m(() => St({
+      defaultConfig: {
+        useCssAnimation: !1,
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            legend: {
+              backgroundColor: "transparent"
+            },
+            arcs: {
+              stroke: "#6A6A6A",
+              labels: {
+                show: !1
+              }
+            },
+            ribbons: {
+              stroke: "#6A6A6A",
+              underlayerOpacity: 0,
+              labels: {
+                show: !1
+              }
+            }
+          }
+        }
+      },
+      userConfig: a.value.skeletonConfig ?? {}
+    })), { loading: He, FINAL_DATASET: _, manualLoading: ie } = za({
+      ...Ca(S),
+      FINAL_CONFIG: a,
+      prepareConfig: Se,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Fe(), Z.value.showTable = a.value.table.show;
+        });
+      },
+      skeletonDataset: S.config?.skeletonDataset ?? {
+        matrix: [
+          [12e3, 6e3, 9e3, 3e3],
+          [2e3, 1e4, 2e3, 6001],
+          [8e3, 1600, 8e3, 8001],
+          [1e3, 1e3, 1e3, 7001]
+        ],
+        labels: [],
+        colors: ["#DBDBDB", "#C4C4C4", "#ADADAD", "#969696"]
+      },
+      skeletonConfig: St({
+        defaultConfig: a.value,
+        userConfig: jt.value
+      })
+    }), { userOptionsVisible: Ie, setUserOptionsVisibility: Qe, keepUserOptionState: Ze } = Ga({ config: a.value }), { svgRef: q } = Ya({ config: a.value.style.chart.title }), { isPrinting: xe, isImaging: _e, generatePdf: Je, generateImage: et } = Va({
+      elementId: `chord_${M.value}`,
+      fileName: a.value.style.chart.title.text || "vue-ui-chord",
+      options: a.value.userOptions.print
+    }), Z = v({
+      showTable: a.value.table.show
+    });
+    function Se() {
+      const e = Ve({
+        userConfig: S.config,
+        defaultConfig: Ut
+      }), o = e.theme;
+      if (!o) return e;
+      if (!Vt.value(e))
+        return Xt(e), e;
+      const t = Ve({
+        userConfig: Ha[o] || S.config,
+        defaultConfig: e
+      }), l = Ve({
+        userConfig: S.config,
+        defaultConfig: t
+      });
+      return {
+        ...l,
+        customPalette: l.customPalette.length ? l.customPalette : Ma[o] || $e
+      };
+    }
+    Ne(() => S.config, (e) => {
+      He.value || (a.value = Se()), Ie.value = !a.value.userOptions.showOnChartHover, Te(), Ce.value += 1, we.value += 1, Ae.value += 1, T.value = a.value.initialRotation, Z.value.showTable = a.value.table.show;
+    }, { deep: !0 });
+    const tt = m(() => a.value.debug);
+    Ne(() => S.dataset, () => {
+      at(), Te(), Ce.value += 1, we.value += 1, Ae.value += 1;
+    });
+    function at() {
+      if (Pa(S.dataset)) {
+        Tt({
+          componentName: "VueUiChord",
+          type: "dataset",
+          debug: tt.value
+        }), U.value = !1, ie.value = !0;
+        return;
+      }
+      const e = Ia({
+        datasetObject: S.dataset,
+        requiredAttributes: ["matrix"]
+      });
+      if (e.length) {
+        e.forEach((s) => {
+          Tt({
+            componentName: "VueUiChord",
+            type: "datasetAttribute",
+            property: s,
+            debug: tt.value
+          });
+        }), U.value = !1, ie.value = !0;
+        return;
+      }
+      const o = S.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]
+]`), U.value = !1, ie.value = !0;
+        return;
+      }
+      const t = o.length, l = o.findIndex((s) => !Array.isArray(s) || s.length !== t);
+      if (l !== -1) {
+        console.warn(
+          `VueUiChord - Invalid matrix: dataset.matrix at index ${l} has ${Array.isArray(o[l]) ? o[l].length : "NaN"} elements instead of the required ${t}
+
+dataset.matrix[${l}] = [${Array.isArray(o[l]) ? o[l].toString() : "invalid"}]`
+        ), U.value = !1, ie.value = !0;
+        return;
+      }
+      U.value = !0, ie.value = !1;
+    }
+    function Te() {
+      if (at(), a.value.responsive) {
+        const e = Na(() => {
+          const { width: o, height: t, heightNoTitle: l, heightSource: s, heightTitle: n, heightLegend: u } = Ra({
+            chart: E.value,
+            title: a.value.style.chart.title.text ? Ge.value : null,
+            legend: a.value.style.chart.legend.show ? Ye.value : null,
+            source: We.value,
+            noTitle: qe.value
+          }), d = n + u + s + l;
+          o < t ? E.value.style.width = "100%" : (E.value.style.height = "100%", q.value.style.height = `calc(100% - ${d}px)`);
+        }, 100);
+        W.value && (ne.value && W.value.unobserve(ne.value), W.value.disconnect()), W.value = new ResizeObserver(e), ne.value = E.value.parentNode, W.value.observe(ne.value), e();
+      }
+      ot.value = setTimeout(() => {
+        le.value = !0;
+      }, 500);
+    }
+    function Gt() {
+      if (!_.value || !Object.hasOwn(_.value, "matrix") || _.value.matrix.length < 2) {
+        console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
+
+matrix:[
+  [1, 1],
+  [1, 1]
+]`), U.value = !1;
+        return;
+      }
+      _.value.matrix.forEach((e, o) => {
+        e.length !== _.value.matrix.length && (console.warn(`VueUiChord - Invalid matrix: dataset.matrix at index ${o} has ${e.length} elements instead of the required ${_.value.matrix.length}
+
+dataset.matrix[${o}] = [${e.toString()}] has a length of ${e.length} but should have the same length as the matrix itself (${_.value.matrix.length})`), U.value = !1);
+      });
+    }
+    const ot = v(null);
+    Mt(() => {
+      Ke.value = !0, Te();
+    });
+    const N = v({
+      height: 600,
+      width: 600
+    }), Yt = m(() => a.value.userOptions.show && !a.value.style.chart.title.text), Wt = m(() => xa(a.value.customPalette)), A = m(() => ({
+      inner: N.value.width * 0.3 * a.value.style.chart.arcs.innerRadiusRatio,
+      outer: N.value.width * 0.34 * a.value.style.chart.arcs.outerRadiusRatio
+    })), qt = m(() => a.value.style.chart.arcs.padAngle / 100), $ = m(() => ({
+      matrix: _.value.matrix ?? [[0]],
+      labels: _.value.labels ?? [""],
+      colors: _.value.colors && Array.isArray(_.value.colors) && _.value.colors.length ? _.value.colors.map((e) => _a(e)) : _.value.matrix.map((e, o) => Wt.value[o] || $e[o] || $e[o % $e.length])
+    }));
+    function Kt(e, o) {
+      const t = e.length, l = A.value.inner, s = new Array(t).fill(0);
+      let n = 0;
+      for (let c = 0; c < t; c += 1)
+        for (let I = 0; I < t; I += 1)
+          s[c] += e[c][I], n += e[c][I];
+      const u = (2 * Math.PI - o * t) / n, d = [];
+      let g = 0;
+      for (let c = 0; c < t; c += 1) {
+        const I = g, O = I + s[c] * u;
+        d.push({
+          index: c,
+          pattern: `pattern_${M.value}_${c}`,
+          startAngle: I,
+          endAngle: O,
+          name: $.value.labels[c],
+          id: ze(),
+          color: $.value.colors[c],
+          proportion: s[c] / n
+        }), g = O + o;
+      }
+      const C = [];
+      for (let c = 0; c < t; c += 1) {
+        const I = e[c].map((F, K) => ({ j: K, v: F }));
+        I.sort((F, K) => K.v - F.v);
+        let O = d[c].startAngle;
+        for (const { j: F, v: K } of I) {
+          const te = O, he = te + K * u;
+          C.push({
+            index: c,
+            subIndex: F,
+            pattern: `pattern_${M.value}_${c}`,
+            startAngle: te,
+            endAngle: he,
+            value: K,
+            groupName: $.value.labels[c],
+            groupId: d[c].id,
+            groupColor: $.value.colors[c],
+            midAngle: (te + he) / 2,
+            midBaseX: Math.cos((te + he) / 2 - Math.PI / 2) * l,
+            midBaseY: Math.sin((te + he) / 2 - Math.PI / 2) * l
+          }), O = he;
+        }
+      }
+      const X = [];
+      for (const c of C) {
+        const I = C.find(
+          (O) => O.index === c.subIndex && O.subIndex === c.index
+        );
+        X.push({ source: c, target: I, id: ze() });
+      }
+      return { groups: d, chords: X };
+    }
+    const P = m(() => {
+      const e = Kt($.value.matrix, qt.value);
+      return Gt(), e.chords.sort(
+        (o, t) => Math.max(t.source.value, t.target.value) - Math.max(o.source.value, o.target.value)
+      ), e;
+    }), Ht = m(() => {
+      const e = A.value.outer + a.value.style.chart.ribbons.labels.offset + 12, t = a.value.style.chart.ribbons.labels.fontSize * 0.6, l = [];
+      if (k.value) {
+        const n = k.value;
+        if (n.source.value) {
+          const u = String(n.source.value);
+          l.push({
+            id: n.id + "-src",
+            theta: n.source.midAngle,
+            w: u.length * t / e,
+            midBaseX: n.source.midBaseX,
+            midBaseY: n.source.midBaseY,
+            groupColor: n.source.groupColor,
+            value: n.source.value
+          });
+        }
+        if (n.target && n.target.value && n.target.value !== n.source.value) {
+          const u = String(n.target.value);
+          l.push({
+            id: n.id + "-tgt",
+            theta: n.target.midAngle,
+            w: u.length * t / e,
+            midBaseX: n.target.midBaseX,
+            midBaseY: n.target.midBaseY,
+            groupColor: n.target.groupColor,
+            value: n.target.value
+          });
+        }
+        return l;
+      }
+      function s(n) {
+        P.value.chords.filter((u) => u.source.groupId === n && u.source.value).forEach((u) => {
+          {
+            const d = String(u.source.value);
+            l.push({
+              id: u.id + "-src",
+              theta: u.source.midAngle,
+              w: d.length * t / e,
+              midBaseX: u.source.midBaseX,
+              midBaseY: u.source.midBaseY,
+              groupColor: u.source.groupColor,
+              value: u.source.value
+            });
+          }
+          if (u.target && u.target.value && u.target.value !== u.source.value) {
+            const d = String(u.target.value);
+            l.push({
+              id: u.id + "-tgt",
+              theta: u.target.midAngle,
+              w: d.length * t / e,
+              midBaseX: u.target.midBaseX,
+              midBaseY: u.target.midBaseY,
+              groupColor: u.target.groupColor,
+              value: u.target.value
+            });
+          }
+        });
+      }
+      return b.value && s(b.value), w.value && s(w.value.id), l;
+    }), Qt = m(() => {
+      const e = Ht.value.map((s) => ({ ...s })).sort((s, n) => s.theta - n.theta), o = a.value.style.chart.ribbons.labels.minSeparationDeg * Math.PI / 180;
+      let t = !0, l = 0;
+      for (; t && l++ < 10; ) {
+        t = !1;
+        for (let d = 1; d < e.length; d += 1) {
+          const g = e[d - 1], C = e[d], X = g.theta + g.w + o;
+          C.theta < X && (C.theta = X, t = !0);
+        }
+        const s = e[0], n = e[e.length - 1], u = n.theta + n.w + o - 2 * Math.PI;
+        s.theta < u && (s.theta = u, t = !0);
+      }
+      return e;
+    });
+    function lt(e, o, t, l) {
+      const s = e - Math.PI / 2, n = o - Math.PI / 2, u = Math.cos(s) * t, d = Math.sin(s) * t, g = Math.cos(n) * t, C = Math.sin(n) * t, X = Math.cos(n) * l, c = Math.sin(n) * l, I = Math.cos(s) * l, O = Math.sin(s) * l, F = o - e > Math.PI ? 1 : 0;
+      return `M${u},${d} A${t},${t} 0 ${F} 1 ${g},${C} L${X},${c} A${l},${l} 0 ${F} 0 ${I},${O} Z`;
+    }
+    function ce(e, o) {
+      const t = A.value.inner, l = e.startAngle - Math.PI / 2, s = e.endAngle - Math.PI / 2, n = o.startAngle - Math.PI / 2, u = o.endAngle - Math.PI / 2, d = Math.cos(l) * t, g = Math.sin(l) * t, C = Math.cos(s) * t, X = Math.sin(s) * t, c = Math.cos(n) * t, I = Math.sin(n) * t, O = Math.cos(u) * t, F = Math.sin(u) * t, K = e.endAngle - e.startAngle > Math.PI ? 1 : 0, te = o.endAngle - o.startAngle > Math.PI ? 1 : 0;
+      return `M${d},${g}A${t},${t} 0 ${K} 1 ${C},${X}Q0,0 ${c},${I}A${t},${t} 0 ${te} 1 ${O},${F}Q0,0 ${d},${g}Z`;
+    }
+    const nt = m(() => T.value * Math.PI / 180);
+    function Zt(e) {
+      return (e.startAngle + e.endAngle) / 2;
+    }
+    function Jt(e) {
+      return ((Zt(e) + nt.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+    }
+    function ea(e) {
+      let o = e + nt.value;
+      return o = (o % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), o > Math.PI ? "end" : "start";
+    }
+    function ta(e) {
+      const o = e - Math.PI / 2, t = Math.cos(o) * (A.value.outer + a.value.style.chart.arcs.labels.offset + 24), l = Math.sin(o) * (A.value.outer + a.value.style.chart.arcs.labels.offset + 24);
+      return `translate(${t},${l})`;
+    }
+    function aa(e, o, t) {
+      const l = e - Math.PI / 2, s = o - Math.PI / 2, n = Math.cos(l) * t, u = Math.sin(l) * t, d = Math.cos(s) * t, g = Math.sin(s) * t, C = o - e > Math.PI ? 1 : 0;
+      return `M${n},${u} A${t},${t} 0 ${C} 1 ${d},${g}`;
+    }
+    const T = v(a.value.initialRotation), ve = v(!1);
+    let st = 0, rt = 0;
+    function ut(e) {
+      const o = q.value.getBoundingClientRect(), t = o.left + o.width / 2, l = o.top + o.height / 2, s = e.clientX ?? e.touches[0].clientX, n = e.clientY ?? e.touches[0].clientY;
+      return Math.atan2(n - l, s - t);
+    }
+    function it(e) {
+      !a.value.enableRotation || se.value || (e.preventDefault(), ve.value = !0, st = T.value, rt = ut(e));
+    }
+    function pe(e) {
+      if (!ve.value) return;
+      const o = ut(e);
+      T.value = st + (o - rt) * 180 / Math.PI;
+    }
+    function be() {
+      ve.value = !1;
+    }
+    function Oe(e) {
+      return La(
+        a.value.style.chart.ribbons.labels.formatter,
+        e,
+        Ue({
+          p: a.value.style.chart.ribbons.labels.prefix,
+          v: e,
+          s: a.value.style.chart.ribbons.labels.suffix,
+          r: a.value.style.chart.ribbons.labels.rounding
+        })
+      );
+    }
+    Mt(() => {
+      window.addEventListener("mousemove", pe), window.addEventListener("mouseup", be), window.addEventListener("touchmove", pe, { passive: !1 }), window.addEventListener("touchend", be);
+    }), Pt(() => {
+      window.removeEventListener("mousemove", pe), window.removeEventListener("mouseup", be), window.removeEventListener("touchmove", pe), window.removeEventListener("touchend", be), clearTimeout(ot.value), W.value && (ne.value && W.value.unobserve(ne.value), W.value.disconnect());
+    });
+    const me = v(!1);
+    function ct(e) {
+      me.value = e, je.value += 1;
+    }
+    function oa(e, o) {
+      a.value.events.datapointEnter && a.value.events.datapointEnter({ datapoint: e, seriesIndex: o }), !b.value && (w.value = e);
+    }
+    function la(e, o) {
+      w.value = null, a.value.events.datapointLeave && a.value.events.datapointLeave({ datapoint: e, seriesIndex: o });
+    }
+    function vt(e, o) {
+      re("selectGroup", e), a.value.events.datapointClick && a.value.events.datapointClick({ datapoint: e, seriesIndex: o });
+    }
+    function na(e, o) {
+      a.value.events.datapointEnter && a.value.events.datapointEnter({ datapoint: e, seriesIndex: o }), !b.value && (k.value = e);
+    }
+    function sa(e, o) {
+      k.value = null, a.value.events.datapointLeave && a.value.events.datapointLeave({ datapoint: e, seriesIndex: o });
+    }
+    function dt(e, o) {
+      re("selectRibbon", e), a.value.events.datapointClick && a.value.events.datapointClick({ datapoint: e, seriesIndex: o });
+    }
+    function ht(e) {
+      return !b.value && !w.value && !k.value ? 0.8 : (b.value ? b.value === e.source.groupId : w.value ? w.value.id === e.source.groupId : k.value?.id === e.id) ? 1 : 0.1;
+    }
+    function ft(e) {
+      return !b.value && !w.value && !k.value || (b.value ? b.value === e.id : w.value ? w.value.id === e.id : [k.value?.source.groupId, k.value?.target.groupId].includes(e.id)) ? 1 : 0.3;
+    }
+    const se = v(!1);
+    function Be() {
+      se.value = !se.value;
+    }
+    function gt() {
+      Z.value.showTable = !Z.value.showTable;
+    }
+    function ra() {
+      return P.value;
+    }
+    const J = v(null);
+    function pt() {
+      const e = a.value.initialRotation;
+      J.value !== null && cancelAnimationFrame(J.value);
+      const o = () => {
+        T.value += (e - T.value) * 0.05, Math.abs(T.value - e) < 0.1 ? (T.value = e, J.value = null) : J.value = requestAnimationFrame(o);
+      };
+      J.value = requestAnimationFrame(o);
+    }
+    Pt(() => {
+      J.value !== null && cancelAnimationFrame(J.value);
+    });
+    function bt(e) {
+      e === b.value ? (b.value = null, re("selectLegend", null)) : (b.value = e, re("selectLegend", P.value.groups.find((o) => o.id === e)));
+    }
+    const Le = m(() => P.value.groups.map((e, o) => ({
+      name: e.name,
+      color: e.color,
+      shape: "circle",
+      patternIndex: o,
+      pattern: `pattern_${M.value}_${o}`,
+      id: e.id,
+      select: () => bt(e.id),
+      opacity: b.value ? b.value === e.id ? 1 : 0.3 : 1
+    }))), ua = m(() => ({
+      cy: "chord-div-legend",
+      backgroundColor: a.value.style.chart.legend.backgroundColor,
+      color: a.value.style.chart.legend.color,
+      fontSize: a.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: a.value.style.chart.legend.bold ? "bold" : ""
+    })), ee = m(() => {
+      const e = P.value.groups.map((t, l) => ({
+        name: t.name || l,
+        color: t.color
+      })), o = $.value.matrix;
+      return { head: e, body: o };
+    }), ye = m(() => {
+      const e = [{ name: "", color: null }, ...ee.value.head], o = ee.value.body.map((s, n) => [
+        ee.value.head[n],
+        ...ee.value.body[n]
+      ]), t = {
+        th: {
+          backgroundColor: a.value.table.th.backgroundColor,
+          color: a.value.table.th.color,
+          outline: a.value.table.th.outline
+        },
+        td: {
+          backgroundColor: a.value.table.td.backgroundColor,
+          color: a.value.table.td.color,
+          outline: a.value.table.td.outline
+        },
+        breakpoint: a.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: e,
+        head: e,
+        body: o,
+        config: t
+      };
+    });
+    function De(e = null) {
+      Fe(() => {
+        const o = $.value.matrix.map((s, n) => [
+          [$.value.labels[n] || n],
+          s
+        ]), t = [
+          [a.value.style.chart.title.text],
+          [a.value.style.chart.title.subtitle.text],
+          [
+            [""],
+            ...$.value.labels.map((s, n) => [s || n])
+          ]
+        ].concat(o), l = Da(t);
+        e ? e(l) : Ea({ csvContent: l, title: a.value.style.chart.title.text || "vue-ui-chord" });
+      });
+    }
+    async function ia({ scale: e = 2 } = {}) {
+      if (!E.value) return;
+      const { width: o, height: t } = E.value.getBoundingClientRect(), l = o / t, { imageUri: s, base64: n } = await Wa({ domElement: E.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: s,
+        base64: n,
+        title: a.value.style.chart.title.text,
+        width: o,
+        height: t,
+        aspectRatio: l
+      };
+    }
+    function ca(e, o) {
+      return `${$.value.labels[o]}${a.value.style.chart.arcs.labels.showPercentage ? Ue({
+        p: " (",
+        v: isNaN(e.proportion) ? 0 : e.proportion * 100,
+        s: "%)",
+        r: a.value.style.chart.arcs.labels.roundingPercentage
+      }) : ""}`;
+    }
+    const de = m(() => {
+      const e = a.value.table.useDialog && !a.value.table.show, o = Z.value.showTable;
+      return {
+        component: e ? zt : Dt,
+        title: `${a.value.style.chart.title.text}${a.value.style.chart.title.subtitle.text ? `: ${a.value.style.chart.title.subtitle.text}` : ""}`,
+        props: e ? {
+          backgroundColor: a.value.table.th.backgroundColor,
+          color: a.value.table.th.color,
+          headerColor: a.value.table.th.color,
+          headerBg: a.value.table.th.backgroundColor,
+          isFullscreen: me.value,
+          fullscreenParent: E.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: Q.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: o,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: a.value.style.chart.backgroundColor,
+              color: a.value.style.chart.color
+            },
+            head: {
+              backgroundColor: a.value.style.chart.backgroundColor,
+              color: a.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    Ne(() => Z.value.showTable, (e) => {
+      a.value.table.show || (e && a.value.table.useDialog && ue.value ? ue.value.open() : "close" in ue.value && ue.value.close());
+    });
+    function mt() {
+      Z.value.showTable = !1, Me.value && Me.value.setTableIconState(!1);
+    }
+    const va = m(() => a.value.style.chart.backgroundColor), da = m(() => a.value.style.chart.legend), ha = m(() => a.value.style.chart.title), { exportSvg: fa, getSvg: ga } = Xa({
+      svg: q,
+      title: ha,
+      legend: da,
+      legendItems: Le,
+      backgroundColor: va
+    });
+    async function yt({ isCb: e }) {
+      ge.value = !0, await Fe();
+      try {
+        if (e) {
+          const { blob: o, url: t, text: l, dataUrl: s } = await ga();
+          await Promise.resolve(a.value.userOptions.callbacks.svg({ blob: o, url: t, text: l, dataUrl: s }));
+        } else
+          await Promise.resolve(fa());
+      } finally {
+        ge.value = !1;
+      }
+    }
+    function pa(e) {
+      if (e?.stage === "start") {
+        fe.value = !0;
+        return;
+      }
+      if (e?.stage === "end") {
+        fe.value = !1;
+        return;
+      }
+      et();
+    }
+    async function kt() {
+      if (re("copyAlt", {
+        config: a.value,
+        dataset: $.value
+      }), !a.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(a.value.userOptions.callbacks.altCopy({
+        config: a.value,
+        dataset: $.value
+      }));
+    }
+    const ba = m(() => (w.value ? P.value.chords.filter((e) => e.source.groupId === w.value.id) : b.value ? P.value.chords.filter((e) => e.source.groupId === b.value) : P.value.chords).filter((e) => e.source.value)), R = m(() => {
+      const e = P.value.groups.map((t, l) => ({
+        type: "group",
+        index: l,
+        item: t
+      })), o = ba.value.map((t, l) => ({
+        type: "ribbon",
+        index: l,
+        item: {
+          ...t,
+          path: ce(t.source, t.target),
+          color: $.value.colors[t.source.index]
+        }
+      }));
+      return { groups: e, ribbons: o };
+    }), Ee = m(() => {
+      const e = [
+        "",
+        ...ee.value.head.map((t) => t.name)
+      ], o = ee.value.body.map((t, l) => [
+        ee.value.head[l]?.name ?? `${l}`,
+        ...t.map((s) => Oe(s))
+      ]);
+      return { headers: e, rows: o };
+    });
+    function $t(e) {
+      const o = R.value.groups[e];
+      o && (V.value = "group", B.value = e, k.value = null, w.value = o.item);
+    }
+    function Ct(e) {
+      const o = R.value.ribbons[e];
+      o && (V.value = "ribbon", B.value = e, w.value = null, k.value = o.item);
+    }
+    function wt() {
+      B.value = null, V.value = "group", w.value = null, k.value = null;
+    }
+    function ma() {
+      Pe.value = !0, V.value = "group", B.value = null;
+    }
+    function ya() {
+      Pe.value = !1, wt();
+    }
+    function ka(e) {
+      if (!q.value || se.value || document.activeElement !== q.value) return;
+      const o = e.key === "ArrowLeft", t = e.key === "ArrowRight", l = e.key === "ArrowUp", s = e.key === "ArrowDown", n = e.key === "Enter" || e.key === " ", u = e.key === "Escape";
+      if (!o && !t && !l && !s && !n && !u) return;
+      if (e.preventDefault(), e.stopPropagation(), u) {
+        wt();
+        return;
+      }
+      if (l) {
+        V.value = "group", R.value.groups.length && $t(
+          B.value === null ? 0 : Math.min(B.value, R.value.groups.length - 1)
+        );
+        return;
+      }
+      if (s) {
+        if (!R.value.ribbons.length) return;
+        V.value = "ribbon", Ct(
+          B.value === null ? 0 : Math.min(B.value, R.value.ribbons.length - 1)
+        );
+        return;
+      }
+      if (n) {
+        if (V.value === "group") {
+          const C = R.value.groups[B.value];
+          C && vt(C.item, C.index);
+        } else {
+          const C = R.value.ribbons[B.value];
+          C && dt(C.item, C.index);
+        }
+        return;
+      }
+      const d = V.value === "group" ? R.value.groups : R.value.ribbons;
+      if (!d.length) return;
+      let g = B.value;
+      g === null || g < 0 || g >= d.length ? g = t ? 0 : d.length - 1 : t ? (g += 1, g >= d.length && (g = 0)) : o && (g -= 1, g < 0 && (g = d.length - 1)), V.value === "group" ? $t(g) : Ct(g);
+    }
+    return Bt({
+      getData: ra,
+      getImage: ia,
+      generateCsv: De,
+      generateImage: et,
+      generateSvg: yt,
+      generatePdf: Je,
+      toggleAnnotator: Be,
+      toggleTable: gt,
+      toggleFullscreen: ct,
+      copyAlt: kt
+    }), (e, o) => (r(), i("div", {
+      ref_key: "chordChart",
+      ref: E,
+      class: j({
+        "vue-data-ui-component": !0,
+        "vue-ui-chord": !0,
+        "vue-data-ui-wrapper-fullscreen": me.value,
+        "vue-data-ui-responsive": a.value.responsive
+      }),
+      style: z(`font-family:${a.value.style.fontFamily};width:100%; text-align:center;background:${a.value.style.chart.backgroundColor}`),
+      id: `chord_${M.value}`,
+      onMouseenter: o[2] || (o[2] = () => h(Qe)(!0)),
+      onMouseleave: o[3] || (o[3] = () => h(Qe)(!1))
+    }, [
+      x("div", {
+        id: `chart-instructions-${M.value}`,
+        class: "sr-only"
+      }, [
+        x("p", null, H(a.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, to),
+      Ee.value?.rows?.length ? (r(), G(Za, {
+        key: 0,
+        uid: M.value,
+        head: Ee.value.headers,
+        body: Ee.value.rows,
+        notice: a.value.a11y.translations.tableAvailable,
+        caption: a.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : f("", !0),
+      a.value.userOptions.buttons.annotator && h(q) ? (r(), G(h(Rt), {
+        key: 1,
+        color: a.value.style.chart.color,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        active: se.value,
+        svgRef: h(q),
+        isCursorPointer: Q.value,
+        onClose: Be
+      }, {
+        "annotator-action-close": y(() => [
+          p(e.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": y(({ color: t }) => [
+          p(e.$slots, "annotator-action-color", L(D({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": y(({ mode: t }) => [
+          p(e.$slots, "annotator-action-draw", L(D({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": y(({ disabled: t }) => [
+          p(e.$slots, "annotator-action-undo", L(D({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": y(({ disabled: t }) => [
+          p(e.$slots, "annotator-action-redo", L(D({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": y(({ disabled: t }) => [
+          p(e.$slots, "annotator-action-delete", L(D({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["color", "backgroundColor", "active", "svgRef", "isCursorPointer"])) : f("", !0),
+      p(e.$slots, "userConfig", {}, void 0, !0),
+      Yt.value ? (r(), i("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: qe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : f("", !0),
+      a.value.style.chart.title.text ? (r(), i("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: Ge,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), G(Ka, {
+          key: `title_${Ce.value}`,
+          config: {
+            title: {
+              cy: "chord-div-title",
+              ...a.value.style.chart.title
+            },
+            subtitle: {
+              cy: "chord-div-subtitle",
+              ...a.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : f("", !0),
+      x("div", {
+        id: `legend-top-${M.value}`
+      }, null, 8, ao),
+      a.value.userOptions.show && U.value && (h(Ze) || h(Ie)) ? (r(), G(h(Ft), {
+        ref_key: "userOptionsRef",
+        ref: Me,
+        key: `user_option_${je.value}`,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        color: a.value.style.chart.color,
+        isPrinting: h(xe),
+        isImaging: h(_e),
+        uid: M.value,
+        hasTooltip: !1,
+        hasPdf: a.value.userOptions.buttons.pdf,
+        hasImg: a.value.userOptions.buttons.img,
+        hasSvg: a.value.userOptions.buttons.svg,
+        hasXls: a.value.userOptions.buttons.csv,
+        hasTable: a.value.userOptions.buttons.table,
+        hasLabel: !1,
+        hasFullscreen: a.value.userOptions.buttons.fullscreen,
+        hasAltCopy: a.value.userOptions.buttons.altCopy,
+        isFullscreen: me.value,
+        chartElement: E.value,
+        position: a.value.userOptions.position,
+        titles: { ...a.value.userOptions.buttonTitles },
+        hasAnnotator: a.value.userOptions.buttons.annotator,
+        isAnnotation: se.value,
+        callbacks: a.value.userOptions.callbacks,
+        printScale: a.value.userOptions.print.scale,
+        tableDialog: a.value.table.useDialog,
+        isCursorPointer: Q.value,
+        onToggleFullscreen: ct,
+        onGeneratePdf: h(Je),
+        onGenerateCsv: De,
+        onGenerateImage: pa,
+        onGenerateSvg: yt,
+        onToggleTable: gt,
+        onToggleAnnotator: Be,
+        onCopyAlt: kt,
+        style: z({
+          visibility: h(Ze) ? h(Ie) ? "visible" : "hidden" : "visible"
+        })
+      }, Re({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: y(({ isOpen: t, color: l }) => [
+            p(e.$slots, "menuIcon", L(D({ isOpen: t, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: y(() => [
+            p(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: y(() => [
+            p(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: y(() => [
+            p(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: y(() => [
+            p(e.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: y(() => [
+            p(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: y(({ toggleFullscreen: t, isFullscreen: l }) => [
+            p(e.$slots, "optionFullscreen", L(D({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: y(({ toggleAnnotator: t, isAnnotator: l }) => [
+            p(e.$slots, "optionAnnotator", L(D({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        e.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: y(({ altCopy: t }) => [
+            p(e.$slots, "optionAltCopy", L(D({ altCopy: t })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : f("", !0),
+      (r(), i("svg", {
+        xmlns: h(Sa),
+        ref_key: "svgRef",
+        ref: q,
+        viewBox: `0 0 ${N.value.width} ${N.value.height}`,
+        "aria-describedby": `chart-instructions-${M.value}`,
+        tabindex: "0",
+        preserveAspectRatio: "xMidYMid meet",
+        style: {
+          overflow: "visible"
+        },
+        class: j({ "vue-ui-chord-rotating": ve.value, "vue-ui-chord-idle": !ve.value }),
+        onMousedown: It(it, ["prevent"]),
+        onTouchstart: It(it, ["prevent"]),
+        onFocus: ma,
+        onBlur: ya,
+        onKeydown: ka
+      }, [
+        ke(h(Nt)),
+        e.$slots["chart-background"] ? (r(), i("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: N.value.width <= 0 ? 10 : N.value.width,
+          height: N.value.height <= 0 ? 10 : N.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          p(e.$slots, "chart-background", {}, void 0, !0)
+        ], 8, lo)) : f("", !0),
+        a.value.style.chart.arcs.labels.curved ? (r(), i("defs", no, [
+          (r(!0), i(Y, null, oe(P.value.groups, (t, l) => (r(), i("path", {
+            key: `labelPath-${l}`,
+            id: `labelPath-${l}_${M.value}`,
+            d: aa(
+              t.startAngle,
+              t.endAngle,
+              (A.value.inner + A.value.outer) / 2 + a.value.style.chart.arcs.labels.offset
+            ),
+            fill: "none"
+          }, null, 8, so))), 128))
+        ])) : f("", !0),
+        e.$slots.pattern ? (r(), i("g", ro, [
+          (r(!0), i(Y, null, oe(P.value.groups, (t, l) => (r(), i("defs", null, [
+            p(e.$slots, "pattern", xt({ ref_for: !0 }, { seriesIndex: t.index, patternId: `pattern_${M.value}_${l}` }), void 0, !0)
+          ]))), 256))
+        ])) : f("", !0),
+        x("g", {
+          transform: `translate(${N.value.width / 2}, ${N.value.height / 2}) rotate(${T.value})`
+        }, [
+          (r(!0), i(Y, null, oe(P.value.groups, (t, l) => (r(), i("g", null, [
+            (r(), i("path", {
+              class: j({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": a.value.useCssAnimation && !le.value }),
+              key: `arc-${l}`,
+              d: lt(
+                t.startAngle,
+                t.endAngle,
+                A.value.outer,
+                A.value.inner
+              ),
+              fill: $.value.colors[l],
+              stroke: a.value.style.chart.arcs.stroke,
+              "stroke-width": a.value.style.chart.arcs.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: z({
+                opacity: ft(t)
+              }),
+              onMouseenter: (s) => oa(t, l),
+              onMouseleave: (s) => la(t, l),
+              onClick: (s) => vt(t, l)
+            }, null, 46, io)),
+            e.$slots.pattern ? (r(), i("path", {
+              class: j({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": a.value.useCssAnimation && !le.value }),
+              key: `arc-${l}`,
+              d: lt(
+                t.startAngle,
+                t.endAngle,
+                A.value.outer,
+                A.value.inner
+              ),
+              fill: `url(#${t.pattern})`,
+              stroke: a.value.style.chart.arcs.stroke,
+              "stroke-width": a.value.style.chart.arcs.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: z({
+                opacity: ft(t),
+                pointerEvents: "none"
+              })
+            }, null, 14, co)) : f("", !0)
+          ]))), 256)),
+          x("g", null, [
+            (r(!0), i(Y, null, oe(w.value ? P.value.chords.filter((t) => t.source.groupId === w.value.id) : b.value ? P.value.chords.filter((t) => t.source.groupId === b.value) : P.value.chords, (t, l) => (r(), i(Y, {
+              key: `ribbon-${t.id}`
+            }, [
+              t.source.value ? (r(), i("path", {
+                key: 0,
+                class: j({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": a.value.useCssAnimation && !le.value }),
+                d: ce(t.source, t.target),
+                fill: a.value.style.chart.backgroundColor,
+                style: z({ opacity: a.value.style.chart.ribbons.underlayerOpacity })
+              }, null, 14, vo)) : f("", !0),
+              t.source.value ? (r(), i("path", {
+                key: 1,
+                class: j({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": a.value.useCssAnimation && !le.value }),
+                d: ce(t.source, t.target),
+                fill: $.value.colors[t.source.index],
+                stroke: a.value.style.chart.ribbons.stroke,
+                "stroke-width": a.value.style.chart.ribbons.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                style: z({ opacity: ht(t) }),
+                onMouseenter: (s) => na({
+                  ...t,
+                  path: ce(t.source, t.target),
+                  color: $.value.colors[t.source.index]
+                }, l),
+                onClick: (s) => dt({
+                  ...t,
+                  color: $.value.colors[t.source.index]
+                }, l),
+                onMouseleave: (s) => sa({
+                  ...t,
+                  color: $.value.colors[t.source.index]
+                }, l)
+              }, null, 46, ho)) : f("", !0),
+              t.source.value && e.$slots.pattern ? (r(), i("path", {
+                key: 2,
+                class: j({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": a.value.useCssAnimation && !le.value }),
+                d: ce(t.source, t.target),
+                fill: `url(#pattern_${M.value}_${t.source.index})`,
+                stroke: a.value.style.chart.ribbons.stroke,
+                "stroke-width": a.value.style.chart.ribbons.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                style: z({
+                  opacity: ht(t),
+                  pointerEvents: "none"
+                })
+              }, null, 14, fo)) : f("", !0)
+            ], 64))), 128)),
+            k.value ? (r(), i("path", {
+              key: 0,
+              d: k.value.path,
+              fill: k.value.color,
+              stroke: a.value.style.chart.ribbons.stroke,
+              "stroke-width": a.value.style.chart.ribbons.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: j({ "vue-ui-chord-ribbon": !0 }),
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, go)) : f("", !0),
+            k.value && e.$slots.pattern ? (r(), i("path", {
+              key: 1,
+              d: k.value.path,
+              fill: `url(#${k.value.source.pattern})`,
+              stroke: a.value.style.chart.ribbons.stroke,
+              "stroke-width": a.value.style.chart.ribbons.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: j({ "vue-ui-chord-ribbon": !0 }),
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, po)) : f("", !0)
+          ]),
+          (w.value || k.value || b.value) && a.value.style.chart.ribbons.labels.show ? (r(), i("g", bo, [
+            (r(!0), i(Y, null, oe(Qt.value, (t) => (r(), i(Y, {
+              key: t.id
+            }, [
+              x("line", {
+                x1: t.midBaseX,
+                y1: t.midBaseY,
+                x2: Math.cos(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                y2: Math.sin(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                stroke: a.value.style.chart.backgroundColor,
+                "stroke-width": a.value.style.chart.ribbons.labels.connector.strokeWidth * 3,
+                "pointer-events": "none"
+              }, null, 8, mo),
+              x("line", {
+                x1: t.midBaseX,
+                y1: t.midBaseY,
+                x2: Math.cos(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                y2: Math.sin(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                stroke: a.value.style.chart.ribbons.labels.connector.stroke,
+                "stroke-width": a.value.style.chart.ribbons.labels.connector.strokeWidth,
+                "pointer-events": "none"
+              }, null, 8, yo),
+              a.value.style.chart.ribbons.labels.marker.show ? (r(), i("circle", {
+                key: 0,
+                cx: Math.cos(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                cy: Math.sin(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                r: a.value.style.chart.ribbons.labels.marker.radius,
+                stroke: a.value.style.chart.ribbons.labels.marker.stroke,
+                "stroke-width": a.value.style.chart.ribbons.labels.marker.strokeWidth,
+                fill: t.groupColor,
+                "pointer-events": "none"
+              }, null, 8, ko)) : f("", !0),
+              x("text", {
+                transform: `
+                            translate(
+                                ${Math.cos(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 24)},
+                                ${Math.sin(t.theta - Math.PI / 2) * (A.value.outer + a.value.style.chart.ribbons.labels.offset + 24)}
+                            ) rotate(${-T.value})
+                            `,
+                fill: a.value.style.chart.ribbons.labels.useSerieColor ? t.groupColor : a.value.style.chart.ribbons.labels.color,
+                "text-anchor": ea(t.theta),
+                "font-size": a.value.style.chart.ribbons.labels.fontSize,
+                "font-weight": a.value.style.chart.ribbons.labels.bold ? "bold" : "normal",
+                dy: ".35em",
+                "pointer-events": "none"
+              }, H(Oe(t.value)), 9, $o)
+            ], 64))), 128))
+          ])) : f("", !0),
+          a.value.style.chart.arcs.labels.show ? (r(), i("g", Co, [
+            a.value.style.chart.arcs.labels.curved ? (r(!0), i(Y, { key: 0 }, oe(P.value.groups, (t, l) => (r(), i("text", {
+              class: "vue-ui-chord-label-curved",
+              key: `curved-label-${l}`,
+              "font-size": a.value.style.chart.arcs.labels.fontSize,
+              "font-weight": a.value.style.chart.arcs.labels.bold ? "bold" : "normal",
+              fill: a.value.style.chart.arcs.labels.adaptColorToBackground ? h(Ta)($.value.colors[l]) : a.value.style.chart.arcs.labels.color
+            }, [
+              x("textPath", {
+                href: `#labelPath-${l}_${M.value}`,
+                startOffset: "50%",
+                "text-anchor": "middle"
+              }, H($.value.labels[l]) + H(a.value.style.chart.arcs.labels.showPercentage ? h(Ue)({
+                p: " (",
+                v: isNaN(t.proportion) ? 0 : t.proportion * 100,
+                s: "%)",
+                r: a.value.style.chart.arcs.labels.roundingPercentage
+              }) : ""), 9, Ao)
+            ], 8, wo))), 128)) : !w.value && !k.value && !b.value ? (r(!0), i(Y, { key: 1 }, oe(P.value.groups, (t, l) => (r(), i("text", {
+              class: "vue-ui-chord-label-straight",
+              key: `label-${l}`,
+              transform: `
+                                ${ta((t.startAngle + t.endAngle) / 2)}
+                                rotate(${-T.value})
+                            `,
+              dy: ".35em",
+              "text-anchor": Jt(t) > Math.PI ? "end" : "start",
+              "font-size": a.value.style.chart.arcs.labels.fontSize,
+              "font-weight": a.value.style.chart.arcs.labels.bold ? "bold" : "normal",
+              fill: a.value.style.chart.arcs.labels.color,
+              innerHTML: h(Oa)({
+                content: h(Ba)(ca(t, l)),
+                fontSize: a.value.style.chart.arcs.labels.fontSize,
+                fill: a.value.style.chart.arcs.labels.color,
+                x: 0,
+                y: 0
+              })
+            }, null, 8, Mo))), 128)) : f("", !0)
+          ])) : f("", !0)
+        ], 8, uo),
+        p(e.$slots, "svg", {
+          svg: {
+            height: 600,
+            width: 600,
+            isPrintingImg: h(xe) | h(_e) | fe.value,
+            isPrintingSvg: ge.value
+          }
+        }, void 0, !0)
+      ], 42, oo)),
+      e.$slots.hint ? (r(), i("div", Po, [
+        p(e.$slots, "hint", L(D({ hint: a.value.a11y.translations.keyboardNavigation, isVisible: Pe.value })), void 0, !0)
+      ])) : f("", !0),
+      e.$slots.watermark ? (r(), i("div", Io, [
+        p(e.$slots, "watermark", L(D({ isPrinting: h(xe) || h(_e) || fe.value || ge.value })), void 0, !0)
+      ])) : f("", !0),
+      x("div", {
+        id: `legend-bottom-${M.value}`
+      }, null, 8, xo),
+      Ke.value ? (r(), G(wa, {
+        key: 7,
+        to: a.value.style.chart.legend.position === "top" ? `#legend-top-${M.value}` : `#legend-bottom-${M.value}`
+      }, [
+        x("div", {
+          ref_key: "chartLegend",
+          ref: Ye
+        }, [
+          a.value.style.chart.legend.show ? (r(), G(Qa, {
+            key: `legend_${Ae.value}`,
+            legendSet: Le.value,
+            config: ua.value,
+            isCursorPointer: Q.value,
+            onClickMarker: o[0] || (o[0] = ({ legend: t }) => bt(t.id))
+          }, Re({
+            item: y(({ legend: t }) => [
+              x("div", {
+                style: z({
+                  opacity: b.value ? b.value === t.id ? 1 : 0.3 : 1
+                }),
+                onClick: (l) => t.select()
+              }, H(t.name), 13, _o)
+            ]),
+            _: 2
+          }, [
+            e.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: y(({ legend: t, index: l }) => [
+                ke(qa, {
+                  shape: t.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${M.value}_${l})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config", "isCursorPointer"])) : f("", !0),
+          p(e.$slots, "legend", { legend: Le.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : f("", !0),
+      e.$slots.source ? (r(), i("div", {
+        key: 8,
+        ref_key: "source",
+        ref: We,
+        dir: "auto"
+      }, [
+        p(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      T.value !== a.value.initialRotation ? (r(), i("div", So, [
+        p(e.$slots, "reset-action", { reset: pt }, () => [
+          x("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: z({
+              background: a.value.style.chart.backgroundColor,
+              cursor: Q.value ? "pointer" : "default"
+            }),
+            onClick: pt
+          }, [
+            ke(h(Xe), {
+              name: "refresh",
+              stroke: a.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : f("", !0),
+      U.value && a.value.userOptions.buttons.table ? (r(), G(Aa(de.value.component), xt({ key: 10 }, de.value.props, {
+        ref_key: "tableUnit",
+        ref: ue,
+        onClose: mt
+      }), Re({
+        content: y(() => [
+          (r(), G(h(Et), {
+            key: `table_${we.value}`,
+            colNames: ye.value.colNames,
+            head: ye.value.head,
+            body: ye.value.body,
+            config: ye.value.config,
+            title: a.value.table.useDialog ? "" : de.value.title,
+            withCloseButton: !a.value.table.useDialog,
+            isCursorPointer: Q.value,
+            onClose: mt
+          }, {
+            th: y(({ th: t }) => [
+              _t(H(t.name), 1)
+            ]),
+            td: y(({ td: t }) => [
+              x("div", To, H(t.name ? t.name : Oe(t)), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        a.value.table.useDialog ? {
+          name: "title",
+          fn: y(() => [
+            _t(H(de.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        a.value.table.useDialog ? {
+          name: "actions",
+          fn: y(() => [
+            x("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[1] || (o[1] = (t) => De(a.value.userOptions.callbacks.csv)),
+              style: z({ cursor: Q.value ? "pointer" : "default" })
+            }, [
+              ke(h(Xe), {
+                name: "fileCsv",
+                stroke: de.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : f("", !0),
+      p(e.$slots, "skeleton", {}, () => [
+        h(He) ? (r(), G(Ua, { key: 0 })) : f("", !0)
+      ], !0)
+    ], 46, eo));
+  }
+}, Qo = /* @__PURE__ */ Ja(Oo, [["__scopeId", "data-v-d590b66a"]]);
+export {
+  Qo as default
+};