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-lwwgkcGL.js";
import { u as Et } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Qe } from "./useNestedProp-TXT2IHSL.js";
import { u as Nt } from "./useChartAccessibility-BWojgys7.js";
import { _ as zt } from "./Title-C9AEelQ1.js";
import { _ as Ft } from "./PackageVersion-C-ytTlJe.js";
import { _ as Xt } from "./PenAndPaper-__UJ-k8q.js";
import Rt from "./BaseIcon-Cxzy5vMD.js";
import { u as Dt, U as jt } from "./usePrinter-BCTMiyK9.js";
import { L as Ut } from "./Legend-0b4003Zt.js";
import { _ as Yt } from "./Shape-C0Zlk88G.js";
import { D as Gt } from "./DataTable-C0D_esqj.js";
import Vt from "./vue-ui-accordion-CJnR6fHi.js";
import Wt from "./vue-ui-skeleton-BufuSja5.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
};
