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