vue-data-ui 3.0.0-next.7 → 3.0.0-next.70

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

@@ -0,0 +1,1038 @@
+import { useCssVars as Ft, defineAsyncComponent as H, ref as d, shallowRef as Ke, toRefs as zt, watch as et, computed as C, onMounted as tt, onBeforeUnmount as at, createElementBlock as i, openBlock as r, unref as v, normalizeStyle as D, normalizeClass as F, createBlock as Y, createCommentVNode as h, renderSlot as k, createElementVNode as O, createSlots as ot, withCtx as P, normalizeProps as ie, guardReactiveProps as ce, withModifiers as lt, createVNode as ke, Fragment as z, renderList as G, mergeProps as Xt, toDisplayString as Q, createTextVNode as Ut, nextTick as Vt } from "vue";
+import { u as jt, c as $e, t as Yt, a as Gt, p as ve, b as Wt, o as qt, f as st, g as Ht, d as Qt, e as Zt, X as Jt, F as Kt, i as we, a0 as ea, ac as ta, v as aa, w as oa, k as la } from "./index-CnY41r21.js";
+import { u as sa } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as nt } from "./useNestedProp-DtUATNAU.js";
+import { u as na } from "./useChartAccessibility-9icAAmYg.js";
+import { u as ra } from "./usePrinter-CJ1uZx0D.js";
+import { t as ua, u as ia } from "./useResponsive-DfdjqQps.js";
+import ca from "./Legend-ChXhJNzd.js";
+import va from "./Title-feqCv0Si.js";
+import { _ as da } from "./Shape-C1rNfsMY.js";
+import ha from "./img-_RMhslMZ.js";
+import { u as fa, B as ga } from "./useLoading-D7YHNtLX.js";
+import { _ as pa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ba = ["id"], ma = ["xmlns", "viewBox"], ya = ["width", "height"], ka = { key: 1 }, $a = ["id", "d"], wa = { key: 2 }, Ca = ["transform"], Ma = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], xa = ["d", "fill", "stroke", "stroke-width"], Aa = ["d", "fill"], Ia = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick", "onMouseleave"], _a = ["d", "fill", "stroke", "stroke-width"], Pa = ["d", "fill", "stroke", "stroke-width"], Sa = ["d", "fill", "stroke", "stroke-width"], Ta = { key: 0 }, Ba = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], La = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Oa = ["cx", "cy", "r", "stroke", "stroke-width", "fill"], Ea = ["transform", "fill", "text-anchor", "font-size", "font-weight"], Na = { key: 1 }, Ra = ["font-size", "font-weight", "fill"], Da = ["href"], Fa = ["transform", "text-anchor", "font-size", "font-weight", "fill", "innerHTML"], za = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Xa = ["onClick"], Ua = {
+  key: 6,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, Va = { style: { "text-align": "right", width: "100%" } }, ja = {
+  __name: "vue-ui-chord",
+  props: {
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend", "selectGroup", "selectRibbon"],
+  setup(rt, { expose: ut, emit: it }) {
+    Ft((e) => ({
+      "3d3f80fa": e.slicerColor
+    }));
+    const ct = H(() => import("./vue-ui-accordion-CnLY8CrQ.js")), vt = H(() => import("./BaseIcon-BnbvQjs5.js")), dt = H(() => import("./DataTable-CKpA_OA_.js")), ht = H(() => import("./PackageVersion-CBHvscRY.js")), ft = H(() => import("./PenAndPaper-BCcfYvgR.js")), gt = H(() => import("./UserOptions-CGnAZpYs.js")), { vue_ui_chord: pt } = jt(), T = rt, oe = it, E = d(!!T.dataset && Object.hasOwn(T.dataset, "matrix")), S = d($e()), $ = d(null), b = d(null), g = d(null), Ce = d(0), N = d(null), Me = d(null), xe = d(null), Ae = d(null), Ie = d(null), de = d(0), he = d(0), fe = d(0), W = d(!1), X = Ke(null), q = Ke(null), a = d(pe()), { loading: _e, FINAL_DATASET: w, manualLoading: Z } = fa({
+      ...zt(T),
+      FINAL_CONFIG: a,
+      prepareConfig: pe,
+      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: Yt({
+        defaultConfig: a.value,
+        userConfig: {
+          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
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: ge, setUserOptionsVisibility: Pe, keepUserOptionState: Se } = sa({ config: a.value }), { svgRef: J } = na({ config: a.value.style.chart.title }), { isPrinting: Te, isImaging: Be, generatePdf: Le, generateImage: Oe } = ra({
+      elementId: `chord_${S.value}`,
+      fileName: a.value.style.chart.title.text || "vue-ui-chord",
+      options: a.value.userOptions.print
+    }), K = d({
+      showTable: a.value.table.show
+    });
+    function pe() {
+      const e = nt({
+        userConfig: T.config,
+        defaultConfig: pt
+      });
+      return e.theme ? {
+        ...nt({
+          userConfig: Wt.vue_ui_chord[e.theme] || T.config,
+          defaultConfig: e
+        }),
+        customPalette: Gt[e.theme] || ve
+      } : e;
+    }
+    et(() => T.config, (e) => {
+      _e.value || (a.value = pe()), ge.value = !a.value.userOptions.showOnChartHover, be(), de.value += 1, he.value += 1, fe.value += 1, x.value = a.value.initialRotation, K.value.showTable = a.value.table.show;
+    }, { deep: !0 });
+    const Ee = C(() => a.value.debug);
+    et(() => T.dataset, () => {
+      Ne(), be(), de.value += 1, he.value += 1, fe.value += 1;
+    });
+    function Ne() {
+      if (qt(T.dataset)) {
+        st({
+          componentName: "VueUiChord",
+          type: "dataset",
+          debug: Ee.value
+        }), E.value = !1, Z.value = !0;
+        return;
+      }
+      const e = Ht({
+        datasetObject: T.dataset,
+        requiredAttributes: ["matrix"]
+      });
+      if (e.length) {
+        e.forEach((n) => {
+          st({
+            componentName: "VueUiChord",
+            type: "datasetAttribute",
+            property: n,
+            debug: Ee.value
+          });
+        }), E.value = !1, Z.value = !0;
+        return;
+      }
+      const o = T.dataset.matrix;
+      if (!Array.isArray(o) || o.length < 2) {
+        console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
+        
+matrix:[
+    [1, 1],
+    [1, 1]
+]`), E.value = !1, Z.value = !0;
+        return;
+      }
+      const t = o.length, l = o.findIndex((n) => !Array.isArray(n) || n.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"}]`
+        ), E.value = !1, Z.value = !0;
+        return;
+      }
+      E.value = !0, Z.value = !1;
+    }
+    function be() {
+      if (Ne(), a.value.responsive) {
+        const e = ua(() => {
+          const { width: o, height: t, heightNoTitle: l, heightSource: n, heightTitle: s, heightLegend: u } = ia({
+            chart: N.value,
+            title: a.value.style.chart.title.text ? Me.value : null,
+            legend: a.value.style.chart.legend.show ? xe.value : null,
+            source: Ae.value,
+            noTitle: Ie.value
+          }), f = s + u + n + l;
+          o < t ? N.value.style.width = "100%" : (N.value.style.height = "100%", J.value.style.height = `calc(100% - ${f}px)`);
+        }, 100);
+        X.value && (q.value && X.value.unobserve(q.value), X.value.disconnect()), X.value = new ResizeObserver(e), q.value = N.value.parentNode, X.value.observe(q.value), e();
+      }
+      Re.value = setTimeout(() => {
+        W.value = !0;
+      }, 500);
+    }
+    function bt() {
+      if (!w.value || !Object.hasOwn(w.value, "matrix") || w.value.matrix.length < 2) {
+        console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
+
+matrix:[
+  [1, 1],
+  [1, 1]
+]`), E.value = !1;
+        return;
+      }
+      w.value.matrix.forEach((e, o) => {
+        e.length !== w.value.matrix.length && (console.warn(`VueUiChord - Invalid matrix: dataset.matrix at index ${o} has ${e.length} elements instead of the required ${w.value.matrix.length}
+
+dataset.matrix[${o}] = [${e.toString()}] has a length of ${e.length} but should have the same length as the matrix itself (${w.value.matrix.length})`), E.value = !1);
+      });
+    }
+    const Re = d(null);
+    tt(() => {
+      be();
+    });
+    const B = d({
+      height: 600,
+      width: 600
+    }), mt = C(() => a.value.userOptions.show && !a.value.style.chart.title.text), yt = C(() => Qt(a.value.customPalette)), p = C(() => ({
+      inner: B.value.width * 0.3 * a.value.style.chart.arcs.innerRadiusRatio,
+      outer: B.value.width * 0.34 * a.value.style.chart.arcs.outerRadiusRatio
+    })), kt = C(() => a.value.style.chart.arcs.padAngle / 100), m = C(() => ({
+      matrix: w.value.matrix ?? [[0]],
+      labels: w.value.labels ?? [""],
+      colors: w.value.colors && Array.isArray(w.value.colors) && w.value.colors.length ? w.value.colors.map((e) => Zt(e)) : w.value.matrix.map((e, o) => yt.value[o] || ve[o] || ve[o % ve.length])
+    }));
+    function $t(e, o) {
+      const t = e.length, l = p.value.inner, n = new Array(t).fill(0);
+      let s = 0;
+      for (let c = 0; c < t; c += 1)
+        for (let y = 0; y < t; y += 1)
+          n[c] += e[c][y], s += e[c][y];
+      const u = (2 * Math.PI - o * t) / s, f = [];
+      let A = 0;
+      for (let c = 0; c < t; c += 1) {
+        const y = A, _ = y + n[c] * u;
+        f.push({
+          index: c,
+          pattern: `pattern_${S.value}_${c}`,
+          startAngle: y,
+          endAngle: _,
+          name: m.value.labels[c],
+          id: $e(),
+          color: m.value.colors[c],
+          proportion: n[c] / s
+        }), A = _ + o;
+      }
+      const I = [];
+      for (let c = 0; c < t; c += 1) {
+        const y = e[c].map((L, U) => ({ j: U, v: L }));
+        y.sort((L, U) => U.v - L.v);
+        let _ = f[c].startAngle;
+        for (const { j: L, v: U } of y) {
+          const j = _, ae = j + U * u;
+          I.push({
+            index: c,
+            subIndex: L,
+            pattern: `pattern_${S.value}_${c}`,
+            startAngle: j,
+            endAngle: ae,
+            value: U,
+            groupName: m.value.labels[c],
+            groupId: f[c].id,
+            groupColor: m.value.colors[c],
+            midAngle: (j + ae) / 2,
+            midBaseX: Math.cos((j + ae) / 2 - Math.PI / 2) * l,
+            midBaseY: Math.sin((j + ae) / 2 - Math.PI / 2) * l
+          }), _ = ae;
+        }
+      }
+      const R = [];
+      for (const c of I) {
+        const y = I.find(
+          (_) => _.index === c.subIndex && _.subIndex === c.index
+        );
+        R.push({ source: c, target: y, id: $e() });
+      }
+      return { groups: f, chords: R };
+    }
+    const M = C(() => {
+      const e = $t(m.value.matrix, kt.value);
+      return bt(), e.chords.sort(
+        (o, t) => Math.max(t.source.value, t.target.value) - Math.max(o.source.value, o.target.value)
+      ), e;
+    }), wt = C(() => {
+      const e = p.value.outer + a.value.style.chart.ribbons.labels.offset + 12, t = a.value.style.chart.ribbons.labels.fontSize * 0.6, l = [];
+      if (b.value) {
+        const s = b.value;
+        if (s.source.value) {
+          const u = String(s.source.value);
+          l.push({
+            id: s.id + "-src",
+            theta: s.source.midAngle,
+            w: u.length * t / e,
+            midBaseX: s.source.midBaseX,
+            midBaseY: s.source.midBaseY,
+            groupColor: s.source.groupColor,
+            value: s.source.value
+          });
+        }
+        if (s.target && s.target.value && s.target.value !== s.source.value) {
+          const u = String(s.target.value);
+          l.push({
+            id: s.id + "-tgt",
+            theta: s.target.midAngle,
+            w: u.length * t / e,
+            midBaseX: s.target.midBaseX,
+            midBaseY: s.target.midBaseY,
+            groupColor: s.target.groupColor,
+            value: s.target.value
+          });
+        }
+        return l;
+      }
+      function n(s) {
+        M.value.chords.filter((u) => u.source.groupId === s && u.source.value).forEach((u) => {
+          {
+            const f = String(u.source.value);
+            l.push({
+              id: u.id + "-src",
+              theta: u.source.midAngle,
+              w: f.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 f = String(u.target.value);
+            l.push({
+              id: u.id + "-tgt",
+              theta: u.target.midAngle,
+              w: f.length * t / e,
+              midBaseX: u.target.midBaseX,
+              midBaseY: u.target.midBaseY,
+              groupColor: u.target.groupColor,
+              value: u.target.value
+            });
+          }
+        });
+      }
+      return g.value && n(g.value), $.value && n($.value.id), l;
+    }), Ct = C(() => {
+      const e = wt.value.map((n) => ({ ...n })).sort((n, s) => n.theta - s.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 f = 1; f < e.length; f += 1) {
+          const A = e[f - 1], I = e[f], R = A.theta + A.w + o;
+          I.theta < R && (I.theta = R, t = !0);
+        }
+        const n = e[0], s = e[e.length - 1], u = s.theta + s.w + o - 2 * Math.PI;
+        n.theta < u && (n.theta = u, t = !0);
+      }
+      return e;
+    });
+    function De(e, o, t, l) {
+      const n = e - Math.PI / 2, s = o - Math.PI / 2, u = Math.cos(n) * t, f = Math.sin(n) * t, A = Math.cos(s) * t, I = Math.sin(s) * t, R = Math.cos(s) * l, c = Math.sin(s) * l, y = Math.cos(n) * l, _ = Math.sin(n) * l, L = o - e > Math.PI ? 1 : 0;
+      return `M${u},${f} A${t},${t} 0 ${L} 1 ${A},${I} L${R},${c} A${l},${l} 0 ${L} 0 ${y},${_} Z`;
+    }
+    function le(e, o) {
+      const t = p.value.inner, l = e.startAngle - Math.PI / 2, n = e.endAngle - Math.PI / 2, s = o.startAngle - Math.PI / 2, u = o.endAngle - Math.PI / 2, f = Math.cos(l) * t, A = Math.sin(l) * t, I = Math.cos(n) * t, R = Math.sin(n) * t, c = Math.cos(s) * t, y = Math.sin(s) * t, _ = Math.cos(u) * t, L = Math.sin(u) * t, U = e.endAngle - e.startAngle > Math.PI ? 1 : 0, j = o.endAngle - o.startAngle > Math.PI ? 1 : 0;
+      return `M${f},${A}A${t},${t} 0 ${U} 1 ${I},${R}Q0,0 ${c},${y}A${t},${t} 0 ${j} 1 ${_},${L}Q0,0 ${f},${A}Z`;
+    }
+    const Fe = C(() => x.value * Math.PI / 180);
+    function Mt(e) {
+      return (e.startAngle + e.endAngle) / 2;
+    }
+    function xt(e) {
+      return ((Mt(e) + Fe.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+    }
+    function At(e) {
+      let o = e + Fe.value;
+      return o = (o % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), o > Math.PI ? "end" : "start";
+    }
+    function It(e) {
+      const o = e - Math.PI / 2, t = Math.cos(o) * (p.value.outer + a.value.style.chart.arcs.labels.offset + 24), l = Math.sin(o) * (p.value.outer + a.value.style.chart.arcs.labels.offset + 24);
+      return `translate(${t},${l})`;
+    }
+    function _t(e, o, t) {
+      const l = e - Math.PI / 2, n = o - Math.PI / 2, s = Math.cos(l) * t, u = Math.sin(l) * t, f = Math.cos(n) * t, A = Math.sin(n) * t, I = o - e > Math.PI ? 1 : 0;
+      return `M${s},${u} A${t},${t} 0 ${I} 1 ${f},${A}`;
+    }
+    const x = d(a.value.initialRotation), ee = d(!1);
+    let ze = 0, Xe = 0;
+    function Ue(e) {
+      const o = J.value.getBoundingClientRect(), t = o.left + o.width / 2, l = o.top + o.height / 2, n = e.clientX ?? e.touches[0].clientX, s = e.clientY ?? e.touches[0].clientY;
+      return Math.atan2(s - l, n - t);
+    }
+    function Ve(e) {
+      !a.value.enableRotation || te.value || (e.preventDefault(), ee.value = !0, ze = x.value, Xe = Ue(e));
+    }
+    function se(e) {
+      if (!ee.value) return;
+      const o = Ue(e);
+      x.value = ze + (o - Xe) * 180 / Math.PI;
+    }
+    function ne() {
+      ee.value = !1;
+    }
+    function je(e) {
+      return la(
+        a.value.style.chart.ribbons.labels.formatter,
+        e,
+        we({
+          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
+        })
+      );
+    }
+    tt(() => {
+      window.addEventListener("mousemove", se), window.addEventListener("mouseup", ne), window.addEventListener("touchmove", se, { passive: !1 }), window.addEventListener("touchend", ne);
+    }), at(() => {
+      window.removeEventListener("mousemove", se), window.removeEventListener("mouseup", ne), window.removeEventListener("touchmove", se), window.removeEventListener("touchend", ne), clearTimeout(Re.value), X.value && (q.value && X.value.unobserve(q.value), X.value.disconnect());
+    });
+    const me = d(!1);
+    function Ye(e) {
+      me.value = e, Ce.value += 1;
+    }
+    function Pt(e, o) {
+      a.value.events.datapointEnter && a.value.events.datapointEnter({ datapoint: e, seriesIndex: o }), !g.value && ($.value = e);
+    }
+    function St(e, o) {
+      $.value = null, a.value.events.datapointLeave && a.value.events.datapointLeave({ datapoint: e, seriesIndex: o });
+    }
+    function Tt(e, o) {
+      oe("selectGroup", e), a.value.events.datapointClick && a.value.events.datapointClick({ datapoint: e, seriesIndex: o });
+    }
+    function Bt(e, o) {
+      a.value.events.datapointEnter && a.value.events.datapointEnter({ datapoint: e, seriesIndex: o }), !g.value && (b.value = e);
+    }
+    function Lt(e, o) {
+      b.value = null, a.value.events.datapointLeave && a.value.events.datapointLeave({ datapoint: e, seriesIndex: o });
+    }
+    function Ot(e, o) {
+      oe("selectRibbon", e), a.value.events.datapointClick && a.value.events.datapointClick({ datapoint: e, seriesIndex: o });
+    }
+    function Ge(e) {
+      return !g.value && !$.value && !b.value ? 0.8 : (g.value ? g.value === e.source.groupId : $.value ? $.value.id === e.source.groupId : b.value?.id === e.id) ? 1 : 0.1;
+    }
+    function We(e) {
+      return !g.value && !$.value && !b.value || (g.value ? g.value === e.id : $.value ? $.value.id === e.id : [b.value?.source.groupId, b.value?.target.groupId].includes(e.id)) ? 1 : 0.3;
+    }
+    const te = d(!1);
+    function ye() {
+      te.value = !te.value;
+    }
+    function qe() {
+      K.value.showTable = !K.value.showTable;
+    }
+    function Et() {
+      return M.value;
+    }
+    const V = d(null);
+    function He() {
+      const e = a.value.initialRotation;
+      V.value !== null && cancelAnimationFrame(V.value);
+      const o = () => {
+        x.value += (e - x.value) * 0.05, Math.abs(x.value - e) < 0.1 ? (x.value = e, V.value = null) : V.value = requestAnimationFrame(o);
+      };
+      V.value = requestAnimationFrame(o);
+    }
+    at(() => {
+      V.value !== null && cancelAnimationFrame(V.value);
+    });
+    function Qe(e) {
+      e === g.value ? (g.value = null, oe("selectLegend", null)) : (g.value = e, oe("selectLegend", M.value.groups.find((o) => o.id === e)));
+    }
+    const Ze = C(() => M.value.groups.map((e, o) => ({
+      name: e.name,
+      color: e.color,
+      shape: "circle",
+      patternIndex: o,
+      pattern: `pattern_${S.value}_${o}`,
+      id: e.id,
+      select: () => Qe(e.id),
+      opacity: g.value ? g.value === e.id ? 1 : 0.3 : 1
+    }))), Nt = C(() => ({
+      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" : ""
+    })), re = C(() => {
+      const e = M.value.groups.map((t, l) => ({
+        name: t.name || l,
+        color: t.color
+      })), o = m.value.matrix;
+      return { head: e, body: o };
+    }), ue = C(() => {
+      const e = [{ name: "", color: null }, ...re.value.head], o = re.value.body.map((n, s) => [
+        re.value.head[s],
+        ...re.value.body[s]
+      ]), 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 Je(e = null) {
+      Vt(() => {
+        const o = m.value.matrix.map((n, s) => [
+          [m.value.labels[s] || s],
+          n
+        ]), t = [
+          [a.value.style.chart.title.text],
+          [a.value.style.chart.title.subtitle.text],
+          [
+            [""],
+            ...m.value.labels.map((n, s) => [n || s])
+          ]
+        ].concat(o), l = aa(t);
+        e ? e(l) : oa({ csvContent: l, title: a.value.style.chart.title.text || "vue-ui-chord" });
+      });
+    }
+    async function Rt({ scale: e = 2 } = {}) {
+      if (!N.value) return;
+      const { width: o, height: t } = N.value.getBoundingClientRect(), l = o / t, { imageUri: n, base64: s } = await ha({ domElement: N.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: n,
+        base64: s,
+        title: a.value.style.chart.title.text,
+        width: o,
+        height: t,
+        aspectRatio: l
+      };
+    }
+    function Dt(e, o) {
+      return `${m.value.labels[o]}${a.value.style.chart.arcs.labels.showPercentage ? we({
+        p: " (",
+        v: isNaN(e.proportion) ? 0 : e.proportion * 100,
+        s: "%)",
+        r: a.value.style.chart.arcs.labels.roundingPercentage
+      }) : ""}`;
+    }
+    return ut({
+      getData: Et,
+      getImage: Rt,
+      generateCsv: Je,
+      generateImage: Oe,
+      generatePdf: Le,
+      toggleAnnotator: ye,
+      toggleTable: qe,
+      toggleFullscreen: Ye
+    }), (e, o) => (r(), i("div", {
+      ref_key: "chordChart",
+      ref: N,
+      class: F({
+        "vue-ui-chord": !0,
+        "vue-data-ui-wrapper-fullscreen": me.value,
+        "vue-data-ui-responsive": a.value.responsive
+      }),
+      style: D(`font-family:${a.value.style.fontFamily};width:100%; text-align:center;background:${a.value.style.chart.backgroundColor}`),
+      id: `chord_${S.value}`,
+      onMouseenter: o[2] || (o[2] = () => v(Pe)(!0)),
+      onMouseleave: o[3] || (o[3] = () => v(Pe)(!1))
+    }, [
+      a.value.userOptions.buttons.annotator && v(J) ? (r(), Y(v(ft), {
+        key: 0,
+        color: a.value.style.chart.color,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        active: te.value,
+        svgRef: v(J),
+        onClose: ye
+      }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : h("", !0),
+      k(e.$slots, "userConfig", {}, void 0, !0),
+      mt.value ? (r(), i("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Ie,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      a.value.style.chart.title.text ? (r(), i("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Me,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), Y(va, {
+          key: `title_${de.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)) : h("", !0),
+      a.value.userOptions.show && E.value && (v(Se) || v(ge)) ? (r(), Y(v(gt), {
+        ref: "details",
+        key: `user_option_${Ce.value}`,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        color: a.value.style.chart.color,
+        isPrinting: v(Te),
+        isImaging: v(Be),
+        uid: S.value,
+        hasTooltip: !1,
+        hasPdf: a.value.userOptions.buttons.pdf,
+        hasImg: a.value.userOptions.buttons.img,
+        hasXls: a.value.userOptions.buttons.csv,
+        hasTable: a.value.userOptions.buttons.table,
+        hasLabel: !1,
+        hasFullscreen: a.value.userOptions.buttons.fullscreen,
+        isFullscreen: me.value,
+        chartElement: N.value,
+        position: a.value.userOptions.position,
+        titles: { ...a.value.userOptions.buttonTitles },
+        hasAnnotator: a.value.userOptions.buttons.annotator,
+        isAnnotation: te.value,
+        callbacks: a.value.userOptions.callbacks,
+        printScale: a.value.userOptions.print.scale,
+        onToggleFullscreen: Ye,
+        onGeneratePdf: v(Le),
+        onGenerateCsv: Je,
+        onGenerateImage: v(Oe),
+        onToggleTable: qe,
+        onToggleAnnotator: ye,
+        style: D({
+          visibility: v(Se) ? v(ge) ? "visible" : "hidden" : "visible"
+        })
+      }, ot({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: P(({ isOpen: t, color: l }) => [
+            k(e.$slots, "menuIcon", ie(ce({ isOpen: t, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: P(() => [
+            k(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: P(() => [
+            k(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: P(() => [
+            k(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: P(() => [
+            k(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: P(({ toggleFullscreen: t, isFullscreen: l }) => [
+            k(e.$slots, "optionFullscreen", ie(ce({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: P(({ toggleAnnotator: t, isAnnotator: l }) => [
+            k(e.$slots, "optionAnnotator", ie(ce({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      (r(), i("svg", {
+        xmlns: v(Jt),
+        ref_key: "svgRef",
+        ref: J,
+        viewBox: `0 0 ${B.value.width} ${B.value.height}`,
+        preserveAspectRatio: "xMidYMid meet",
+        style: {
+          overflow: "visible"
+        },
+        class: F({ "vue-ui-chord-rotating": ee.value, "vue-ui-chord-idle": !ee.value }),
+        onMousedown: lt(Ve, ["prevent"]),
+        onTouchstart: lt(Ve, ["prevent"])
+      }, [
+        ke(v(ht)),
+        e.$slots["chart-background"] ? (r(), i("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: B.value.width <= 0 ? 10 : B.value.width,
+          height: B.value.height <= 0 ? 10 : B.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          k(e.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ya)) : h("", !0),
+        a.value.style.chart.arcs.labels.curved ? (r(), i("defs", ka, [
+          (r(!0), i(z, null, G(M.value.groups, (t, l) => (r(), i("path", {
+            key: `labelPath-${l}`,
+            id: `labelPath-${l}_${S.value}`,
+            d: _t(
+              t.startAngle,
+              t.endAngle,
+              (p.value.inner + p.value.outer) / 2 + a.value.style.chart.arcs.labels.offset
+            ),
+            fill: "none"
+          }, null, 8, $a))), 128))
+        ])) : h("", !0),
+        e.$slots.pattern ? (r(), i("g", wa, [
+          (r(!0), i(z, null, G(M.value.groups, (t, l) => (r(), i("defs", null, [
+            k(e.$slots, "pattern", Xt({ ref_for: !0 }, { seriesIndex: t.index, patternId: `pattern_${S.value}_${l}` }), void 0, !0)
+          ]))), 256))
+        ])) : h("", !0),
+        O("g", {
+          transform: `translate(${B.value.width / 2}, ${B.value.height / 2}) rotate(${x.value})`
+        }, [
+          (r(!0), i(z, null, G(M.value.groups, (t, l) => (r(), i("g", null, [
+            (r(), i("path", {
+              class: F({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": a.value.useCssAnimation && !W.value }),
+              key: `arc-${l}`,
+              d: De(
+                t.startAngle,
+                t.endAngle,
+                p.value.outer,
+                p.value.inner
+              ),
+              fill: m.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: D({
+                opacity: We(t)
+              }),
+              onMouseenter: (n) => Pt(t, l),
+              onMouseleave: (n) => St(t, l),
+              onClick: (n) => Tt(t, l)
+            }, null, 46, Ma)),
+            e.$slots.pattern ? (r(), i("path", {
+              class: F({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": a.value.useCssAnimation && !W.value }),
+              key: `arc-${l}`,
+              d: De(
+                t.startAngle,
+                t.endAngle,
+                p.value.outer,
+                p.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: D({
+                opacity: We(t),
+                pointerEvents: "none"
+              })
+            }, null, 14, xa)) : h("", !0)
+          ]))), 256)),
+          O("g", null, [
+            (r(!0), i(z, null, G($.value ? M.value.chords.filter((t) => t.source.groupId === $.value.id) : g.value ? M.value.chords.filter((t) => t.source.groupId === g.value) : M.value.chords, (t, l) => (r(), i(z, {
+              key: `ribbon-${t.id}`
+            }, [
+              t.source.value ? (r(), i("path", {
+                key: 0,
+                class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": a.value.useCssAnimation && !W.value }),
+                d: le(t.source, t.target),
+                fill: a.value.style.chart.backgroundColor,
+                style: D({ opacity: a.value.style.chart.ribbons.underlayerOpacity })
+              }, null, 14, Aa)) : h("", !0),
+              t.source.value ? (r(), i("path", {
+                key: 1,
+                class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": a.value.useCssAnimation && !W.value }),
+                d: le(t.source, t.target),
+                fill: m.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: D({ opacity: Ge(t) }),
+                onMouseenter: (n) => Bt({
+                  ...t,
+                  path: le(t.source, t.target),
+                  color: m.value.colors[t.source.index]
+                }, l),
+                onClick: (n) => Ot({
+                  ...t,
+                  color: m.value.colors[t.source.index]
+                }, l),
+                onMouseleave: (n) => Lt({
+                  ...t,
+                  color: m.value.colors[t.source.index]
+                }, l)
+              }, null, 46, Ia)) : h("", !0),
+              t.source.value && e.$slots.pattern ? (r(), i("path", {
+                key: 2,
+                class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": a.value.useCssAnimation && !W.value }),
+                d: le(t.source, t.target),
+                fill: `url(#pattern_${S.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: D({
+                  opacity: Ge(t),
+                  pointerEvents: "none"
+                })
+              }, null, 14, _a)) : h("", !0)
+            ], 64))), 128)),
+            b.value ? (r(), i("path", {
+              key: 0,
+              d: b.value.path,
+              fill: b.value.color,
+              stroke: a.value.style.chart.ribbons.stroke,
+              "stroke-width": a.value.style.chart.ribbons.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: F({ "vue-ui-chord-ribbon": !0 }),
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, Pa)) : h("", !0),
+            b.value && e.$slots.pattern ? (r(), i("path", {
+              key: 1,
+              d: b.value.path,
+              fill: `url(#${b.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: F({ "vue-ui-chord-ribbon": !0 }),
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, Sa)) : h("", !0)
+          ]),
+          ($.value || b.value || g.value) && a.value.style.chart.ribbons.labels.show ? (r(), i("g", Ta, [
+            (r(!0), i(z, null, G(Ct.value, (t) => (r(), i(z, {
+              key: t.id
+            }, [
+              O("line", {
+                x1: t.midBaseX,
+                y1: t.midBaseY,
+                x2: Math.cos(t.theta - Math.PI / 2) * (p.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                y2: Math.sin(t.theta - Math.PI / 2) * (p.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, Ba),
+              O("line", {
+                x1: t.midBaseX,
+                y1: t.midBaseY,
+                x2: Math.cos(t.theta - Math.PI / 2) * (p.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                y2: Math.sin(t.theta - Math.PI / 2) * (p.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, La),
+              a.value.style.chart.ribbons.labels.marker.show ? (r(), i("circle", {
+                key: 0,
+                cx: Math.cos(t.theta - Math.PI / 2) * (p.value.outer + a.value.style.chart.ribbons.labels.offset + 12),
+                cy: Math.sin(t.theta - Math.PI / 2) * (p.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, Oa)) : h("", !0),
+              O("text", {
+                transform: `
+                            translate(
+                                ${Math.cos(t.theta - Math.PI / 2) * (p.value.outer + a.value.style.chart.ribbons.labels.offset + 24)},
+                                ${Math.sin(t.theta - Math.PI / 2) * (p.value.outer + a.value.style.chart.ribbons.labels.offset + 24)}
+                            ) rotate(${-x.value})
+                            `,
+                fill: a.value.style.chart.ribbons.labels.useSerieColor ? t.groupColor : a.value.style.chart.ribbons.labels.color,
+                "text-anchor": At(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"
+              }, Q(je(t.value)), 9, Ea)
+            ], 64))), 128))
+          ])) : h("", !0),
+          a.value.style.chart.arcs.labels.show ? (r(), i("g", Na, [
+            a.value.style.chart.arcs.labels.curved ? (r(!0), i(z, { key: 0 }, G(M.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 ? v(Kt)(m.value.colors[l]) : a.value.style.chart.arcs.labels.color
+            }, [
+              O("textPath", {
+                href: `#labelPath-${l}_${S.value}`,
+                startOffset: "50%",
+                "text-anchor": "middle"
+              }, Q(m.value.labels[l]) + Q(a.value.style.chart.arcs.labels.showPercentage ? v(we)({
+                p: " (",
+                v: isNaN(t.proportion) ? 0 : t.proportion * 100,
+                s: "%)",
+                r: a.value.style.chart.arcs.labels.roundingPercentage
+              }) : ""), 9, Da)
+            ], 8, Ra))), 128)) : !$.value && !b.value && !g.value ? (r(!0), i(z, { key: 1 }, G(M.value.groups, (t, l) => (r(), i("text", {
+              class: "vue-ui-chord-label-straight",
+              key: `label-${l}`,
+              transform: `
+                                ${It((t.startAngle + t.endAngle) / 2)}
+                                rotate(${-x.value})
+                            `,
+              dy: ".35em",
+              "text-anchor": xt(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: v(ea)({
+                content: v(ta)(Dt(t, l)),
+                fontSize: a.value.style.chart.arcs.labels.fontSize,
+                fill: a.value.style.chart.arcs.labels.color,
+                x: 0,
+                y: 0
+              })
+            }, null, 8, Fa))), 128)) : h("", !0)
+          ])) : h("", !0)
+        ], 8, Ca),
+        k(e.$slots, "svg", { svg: { height: 600, width: 600 } }, void 0, !0)
+      ], 42, ma)),
+      e.$slots.watermark ? (r(), i("div", za, [
+        k(e.$slots, "watermark", ie(ce({ isPrinting: v(Te) || v(Be) })), void 0, !0)
+      ])) : h("", !0),
+      O("div", {
+        ref_key: "chartLegend",
+        ref: xe
+      }, [
+        a.value.style.chart.legend.show ? (r(), Y(ca, {
+          key: `legend_${fe.value}`,
+          legendSet: Ze.value,
+          config: Nt.value,
+          onClickMarker: o[0] || (o[0] = ({ legend: t }) => Qe(t.id))
+        }, ot({
+          item: P(({ legend: t }) => [
+            O("div", {
+              style: D({
+                opacity: g.value ? g.value === t.id ? 1 : 0.3 : 1
+              }),
+              onClick: (l) => t.select()
+            }, Q(t.name), 13, Xa)
+          ]),
+          _: 2
+        }, [
+          e.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: P(({ legend: t, index: l }) => [
+              ke(da, {
+                shape: t.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${S.value}_${l})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"])) : h("", !0),
+        k(e.$slots, "legend", { legend: Ze.value }, void 0, !0)
+      ], 512),
+      e.$slots.source ? (r(), i("div", {
+        key: 5,
+        ref_key: "source",
+        ref: Ae,
+        dir: "auto"
+      }, [
+        k(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      x.value !== a.value.initialRotation ? (r(), i("div", Ua, [
+        k(e.$slots, "reset-action", { reset: He }, () => [
+          O("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: D({
+              background: a.value.style.chart.backgroundColor
+            }),
+            onClick: He
+          }, [
+            ke(v(vt), {
+              name: "refresh",
+              stroke: a.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : h("", !0),
+      E.value ? (r(), Y(v(ct), {
+        key: 7,
+        hideDetails: "",
+        config: {
+          open: K.value.showTable,
+          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
+          }
+        }
+      }, {
+        content: P(() => [
+          (r(), Y(v(dt), {
+            key: `table_${he.value}`,
+            colNames: ue.value.colNames,
+            head: ue.value.head,
+            body: ue.value.body,
+            config: ue.value.config,
+            title: `${a.value.style.chart.title.text}${a.value.style.chart.title.subtitle.text ? ` : ${a.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: o[1] || (o[1] = (t) => K.value.showTable = !1)
+          }, {
+            th: P(({ th: t }) => [
+              Ut(Q(t.name), 1)
+            ]),
+            td: P(({ td: t }) => [
+              O("div", Va, Q(t.name ? t.name : je(t)), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : h("", !0),
+      v(_e) ? (r(), Y(ga, { key: 8 })) : h("", !0)
+    ], 46, ba));
+  }
+}, lo = /* @__PURE__ */ pa(ja, [["__scopeId", "data-v-cea95e88"]]);
+export {
+  lo as default
+};