vue-data-ui 3.17.13 → 3.18.1

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

@@ -1,1457 +0,0 @@
-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-DMzrGQHK.js";
-import { t as Na, u as Ra } from "./useResponsive-DfdjqQps.js";
-import { u as Fa } from "./useConfig-CG4HT3wS.js";
-import { u as za, B as Ua } from "./BaseScanner-C2j3TsSY.js";
-import { u as Va } from "./usePrinter-C4t8DdQ-.js";
-import { u as Xa } from "./useSvgExport-BTG4hVPO.js";
-import { u as Ve } from "./useNestedProp-DH0BEVVS.js";
-import { u as ja } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as Ga } from "./useUserOptionState-B7Ej974k.js";
-import { u as Ya } from "./useChartAccessibility-cp6XQtqi.js";
-import Wa from "./img-CjTQXS0U.js";
-import { _ as qa } from "./Shape-CxJ5_Rre.js";
-import Ka from "./Title-BbKoiBk2.js";
-import Ha from "./vue_ui_chord-Bc1_ocwK.js";
-import Qa from "./Legend-DGN5lY60.js";
-import { A as Za } from "./A11yDataTable-BpmuNomI.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) => ({
-      v19190159: e.slicerColor
-    }));
-    const Dt = ae(() => import("./vue-ui-accordion-DFtpH_16.js")), Xe = ae(() => import("./BaseIcon-DX0hTWa-.js")), Et = ae(() => import("./DataTable-cMnb68Ik.js")), Nt = ae(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), Rt = ae(
-      () => import("./PenAndPaper-CJDoB5H9.js")
-    ), Ft = ae(
-      () => import("./UserOptions-DVduN6X7.js")
-    ), zt = ae(
-      () => import("./BaseDraggableDialog-Di8Hlru3.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 && (a.value.style.chart.legend.show || e.$slots.legend) ? (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
-        }, [
-          p(e.$slots, "legend", { legend: Le.value }, () => [
-            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)
-          ], !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-8c743a20"]]);
-export {
-  Qo as default
-};