import { useCssVars as _e, computed as c, ref as u, watch as ke, onMounted as $e, onBeforeUnmount as xe, openBlock as s, createElementBlock as o, normalizeStyle as _, createBlock as E, createCommentVNode as k, unref as h, createSlots as Ce, withCtx as z, renderSlot as $, normalizeProps as K, guardReactiveProps as Q, normalizeClass as L, createVNode as we, createElementVNode as be, Fragment as b, renderList as O, toDisplayString as Oe } from "vue";
import { u as Pe, c as Ae, t as Ie, a as Fe, p as Z, b as Ee, o as ze, e as ee, g as Le, X as Ne } from "./index-DK7qqHGP.js";
import { t as Se, u as Re } from "./useResponsive-NZB-WLRF.js";
import { _ as Te } from "./Title-Cxlu3Etv.js";
import { u as Me, U as je } from "./usePrinter-Cza87yNE.js";
import Be from "./vue-ui-skeleton-CQnYuosp.js";
import { u as te } from "./useNestedProp-0nRX_rTi.js";
import { _ as Ge } from "./PackageVersion-I1_4jcn_.js";
import { _ as Ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const De = ["id"], Ve = ["xmlns", "viewBox"], We = ["cx", "cy", "r", "stroke", "stroke-width"], Xe = { key: 0 }, Ye = ["stroke", "d", "stroke-width"], qe = { key: 1 }, He = ["stroke", "x1", "x2", "y1", "y2"], Je = ["text-anchor", "transform", "x", "y", "onClick", "font-weight", "font-size", "fill"], Ke = ["cx", "cy", "fill", "onClick", "r"], Qe = {
  key: 3,
  class: "vue-data-ui-watermark"
}, Ze = {
  __name: "vue-ui-relation-circle",
  props: {
    dataset: {
      type: Array,
      default() {
        return [];
      }
    },
    config: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(le, { expose: re }) {
    const d = le;
    _e((e) => ({
      db99e4e4: ue.value,
      "1847af26": ae.value,
      "36a818e2": oe.value
    }));
    const { vue_ui_relation_circle: se } = Pe(), P = c(() => !!d.dataset && Object.keys(d.dataset).length), m = u(Ae()), N = u(0), x = u(null), S = u(null), R = u(0), l = c({
      get: () => T(),
      set: (e) => e
    });
    function T() {
      const e = te({
        userConfig: d.config,
        defaultConfig: se
      });
      return e.theme ? {
        ...te({
          userConfig: Ie.vue_ui_relation_circle[e.theme] || d.config,
          defaultConfig: e
        }),
        customPalette: Fe[e.theme] || Z
      } : e;
    }
    ke(() => d.config, (e) => {
      l.value = T(), D(), R.value += 1;
    }, { deep: !0 });
    const { isPrinting: M, isImaging: j, generatePdf: B, generateImage: G } = Me({
      elementId: `relation_circle_${m.value}`,
      fileName: l.value.style.title.text || "vue-ui-relation-circle"
    }), U = c(() => Ee(l.value.customPalette)), f = u([]), y = u([]), n = u({}), v = u([]), ne = u(0), A = c(() => d.dataset.slice(0, l.value.style.limit)), I = u(l.value.style.size), i = u({
      height: l.value.style.size,
      width: l.value.style.size
    }), g = c({
      get() {
        return I.value * l.value.style.circle.radiusProportion;
      },
      set(e) {
        return e;
      }
    }), ie = c(() => l.value.style.links.curved), ae = c(() => `${l.value.style.animation.speedMs}ms`), ue = c(() => g.value * 2), oe = c(() => g.value * 4), C = u(null);
    $e(() => {
      D(), document.getElementById(`relation_circle_${m.value}`).addEventListener("click", V);
    });
    function D() {
      if (ze(d.dataset) ? ee({
        componentName: "VueUiRelationCircle",
        type: "dataset"
      }) : d.dataset.forEach((e, r) => {
        Le({
          datasetObject: e,
          requiredAttributes: ["id", "label", "relations", "weights"]
        }).forEach((t) => {
          ee({
            componentName: "VueUiRelationCircle",
            type: "datasetSerieAttribute",
            property: t,
            index: r
          });
        });
      }), l.value.responsive) {
        const e = Se(() => {
          const { width: r, height: t } = Re({
            chart: x.value,
            title: l.value.style.title.text ? S.value : null
          });
          I.value = Math.min(r, t), i.value.width = r, i.value.height = t, g.value = I.value * l.value.style.circle.radiusProportion, f.value = [], y.value = [], W(), X();
        });
        C.value = new ResizeObserver(e), C.value.observe(x.value.parentNode);
      } else
        f.value = [], y.value = [], W(), X();
    }
    xe(() => {
      document.getElementById(`relation_circle_${m.value}`).removeEventListener("click", V), C.value && C.value.disconnect();
    });
    function V(e) {
      const r = e.target;
      r && Array.from(r.classList).includes("vue-ui-user-options") || r && Array.from(r.classList).includes("vue-ui-user-options-summary") || r && Array.from(r.classList).includes("vue-data-ui-button") || r && Array.from(r.classList).includes("vue-ui-relation-circle-legend") || (n.value = {}, v.value = []);
    }
    function W() {
      const e = 6.28319 / A.value.length, r = 360 / A.value.length;
      let t = 0, a = 0;
      A.value.forEach((p, F) => {
        const me = g.value * Math.cos(t) + i.value.width / 2, pe = g.value * Math.sin(t) + i.value.height / 2 + l.value.style.circle.offsetY;
        f.value.push({ x: me, y: pe, ...p, color: p.color ? p.color : U.value[F] ? U.value[F] : Z[F], regAngle: a }), t += e, a += r;
      });
    }
    function X() {
      f.value.forEach((e) => {
        f.value.filter((t) => t.relations.includes(e.id)).forEach((t, a) => {
          y.value.push({
            weight: e.weights && e.weights[a] ? e.weights[a] : 1,
            relationId: `${e.id}_${t.id}`,
            x1: e.x,
            y1: e.y,
            x2: t.x,
            y2: t.y,
            colorSource: e.color,
            colorTarget: t.color,
            ...e
          });
        });
      });
    }
    const ce = c(() => Math.max(...y.value.map((e) => e.weight)));
    function de(e) {
      return Object.hasOwn(n.value, "x") ? v.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
    }
    function Y(e) {
      return Object.hasOwn(n.value, "x") ? e.colorTarget : e.colorSource;
    }
    function q(e) {
      return Object.hasOwn(n.value, "x") ? v.value.includes(e.id) && e.relationId === `${e.id}_${n.value.id}` || e.relationId === `${n.value.id}_${e.id}` ? `opacity:1;stroke-width:${J(e)}` : "opacity: 0" : "opacity: 1";
    }
    function ve(e) {
      return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
    }
    function fe(e) {
      return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
    }
    function ge(e) {
      return Object.hasOwn(n.value, "x") ? n.value.id === e.id || v.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
    }
    function he(e) {
      return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
    }
    function H(e) {
      ne.value = 360 - e.regAngle, n.value.id && e.id === n.value.id ? (n.value = {}, v.value = []) : (n.value = e, v.value = [...e.relations]);
    }
    function J(e) {
      return e.weight / ce.value * l.value.style.links.maxWidth;
    }
    const w = u(!1);
    function ye(e) {
      w.value = e, N.value += 1;
    }
    return re({
      generatePdf: B,
      generateImage: G
    }), (e, r) => (s(), o("div", {
      ref_key: "relationCircleChart",
      ref: x,
      class: "vue-ui-relation-circle",
      style: _(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
      id: `relation_circle_${m.value}`
    }, [
      l.value.style.title.text ? (s(), o("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: S,
        style: "width:100%;background:transparent"
      }, [
        (s(), E(Te, {
          key: `title_${R.value}`,
          config: {
            title: {
              cy: "relation-div-title",
              ...l.value.style.title
            },
            subtitle: {
              cy: "relation-div-subtitle",
              ...l.value.style.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : k("", !0),
      l.value.userOptions.show && P.value ? (s(), E(je, {
        ref: "details",
        key: `user_options_${N.value}`,
        backgroundColor: l.value.style.backgroundColor,
        color: l.value.style.color,
        isPrinting: h(M),
        isImaging: h(j),
        uid: m.value,
        hasPdf: l.value.userOptions.buttons.pdf,
        hasImg: l.value.userOptions.buttons.img,
        hasFullscreen: l.value.userOptions.buttons.img,
        hasXls: !1,
        isFullscreen: w.value,
        titles: { ...l.value.userOptions.buttonTitles },
        chartElement: x.value,
        position: l.value.userOptions.position,
        onToggleFullscreen: ye,
        onGeneratePdf: h(B),
        onGenerateImage: h(G)
      }, Ce({ _: 2 }, [
        e.$slots.optionPdf ? {
          name: "optionPdf",
          fn: z(() => [
            $(e.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        e.$slots.optionImg ? {
          name: "optionImg",
          fn: z(() => [
            $(e.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        e.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: z(({ toggleFullscreen: t, isFullscreen: a }) => [
            $(e.$slots, "optionFullscreen", K(Q({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
          ]),
          key: "2"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "onGeneratePdf", "onGenerateImage"])) : k("", !0),
      P.value ? (s(), o("svg", {
        key: 2,
        xmlns: h(Ne),
        class: L([{ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value }, "relation-circle"]),
        viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
        width: "100%",
        style: "user-select:none; background:transparent"
      }, [
        we(Ge),
        be("circle", {
          cx: (i.value.width <= 0 ? 1e-4 : i.value.width) / 2,
          cy: (i.value.height <= 0 ? 1e-4 : i.value.height) / 2 + l.value.style.circle.offsetY,
          r: g.value <= 0 ? 1e-4 : g.value,
          stroke: l.value.style.circle.stroke,
          "stroke-width": l.value.style.circle.strokeWidth,
          fill: "transparent",
          class: "main-circle"
        }, null, 8, We),
        ie.value ? (s(), o("g", Xe, [
          (s(!0), o(b, null, O(y.value, (t, a) => (s(), o("path", {
            key: `relation_${a}`,
            style: _(q(t)),
            stroke: Y(t),
            class: L(["relation", { "vue-ui-relation-circle-selected": n.value.hasOwnProperty("id") && v.value.includes(t.id) }]),
            d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${i.value.width / 2},${i.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
            fill: "none",
            "stroke-width": J(t),
            "stroke-linecap": "round"
          }, null, 14, Ye))), 128))
        ])) : (s(), o("g", qe, [
          (s(!0), o(b, null, O(y.value, (t, a) => (s(), o("line", {
            key: `relation_${a}`,
            stroke: Y(t),
            style: _(q(t)),
            x1: t.x1,
            x2: t.x2,
            y1: t.y1,
            y2: t.y2,
            class: L({ "vue-ui-relation-circle-selected": n.value.hasOwnProperty("id") && v.value.includes(t.id) }),
            "stroke-linecap": "round"
          }, null, 14, He))), 128))
        ])),
        (s(!0), o(b, null, O(f.value, (t, a) => (s(), o("text", {
          key: `plot_text_${a}`,
          "text-anchor": ve(t),
          transform: he(t),
          x: fe(t),
          y: t.y + 5,
          onClick: (p) => H(t),
          class: "vue-ui-relation-circle-legend",
          "transform-origin": "start",
          "font-weight": n.value.id === t.id ? "900" : "400",
          style: _(`font-family:${l.value.style.fontFamily};${ge(t)}`),
          "font-size": l.value.style.labels.fontSize,
          fill: l.value.style.labels.color
        }, Oe(t.label), 13, Je))), 128)),
        (s(!0), o(b, null, O(f.value, (t, a) => (s(), o("circle", {
          cx: t.x,
          cy: t.y,
          key: `plot_${a}`,
          style: _(de(t)),
          class: "vue-ui-relation-circle-plot",
          fill: l.value.style.plot.color,
          onClick: (p) => H(t),
          r: l.value.style.plot.radius
        }, null, 12, Ke))), 128)),
        $(e.$slots, "svg", { svg: i.value }, void 0, !0)
      ], 10, Ve)) : k("", !0),
      e.$slots.watermark ? (s(), o("div", Qe, [
        $(e.$slots, "watermark", K(Q({ isPrinting: h(M) || h(j) })), void 0, !0)
      ])) : k("", !0),
      P.value ? k("", !0) : (s(), E(Be, {
        key: 4,
        config: {
          type: "relationCircle",
          style: {
            backgroundColor: l.value.style.backgroundColor,
            relationCircle: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 12, De));
  }
}, ot = /* @__PURE__ */ Ue(Ze, [["__scopeId", "data-v-0d6438fc"]]);
export {
  ot as default
};
