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