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