vue-data-ui 2.10.11 → 2.11.0

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

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