vue-data-ui 3.6.0 → 3.7.1

package/dist/vue-ui-relation-circle-DbYE9UHq.js

@@ -0,0 +1,671 @@
+import { useCssVars as wt, computed as y, defineAsyncComponent as Z, ref as u, toRefs as Ct, watch as ee, shallowRef as ze, onMounted as At, onBeforeUnmount as xt, createElementBlock as n, openBlock as a, unref as i, normalizeStyle as I, createBlock as U, createCommentVNode as g, withCtx as h, renderSlot as v, normalizeProps as w, guardReactiveProps as C, createSlots as $t, normalizeClass as te, createVNode as _t, createElementVNode as Lt, Fragment as _, renderList as M, mergeProps as Oe, toDisplayString as V, createTextVNode as Se } from "vue";
+import { c as Pt, t as zt, i as Ot, p as Ie, j as St, o as Me, g as Be, k as It, X as Mt, w as Ee, a as le, d as se, Y as oe } from "./lib-C5BH09_g.js";
+import { t as Bt, u as Et } from "./useResponsive-DfdjqQps.js";
+import { u as Ft, a as ae } from "./useNestedProp-CWo6bftQ.js";
+import { u as Tt, B as Dt } from "./BaseScanner-BgWxam9d.js";
+import { u as Rt } from "./usePrinter-DCJzEiS8.js";
+import { u as jt } from "./useSvgExport-DrjCWun4.js";
+import { u as Nt } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Gt } from "./useAutoSizeLabelsInsideViewbox-DOALwU4q.js";
+import Wt from "./img-DUzJeMlr.js";
+import Yt from "./Title-DfFUb9hd.js";
+import { _ as Xt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Fe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", labels: { color: "#CCCCCC" }, circle: { stroke: "#5A5A5A" }, plot: { color: "#1A1A1A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, Te = { style: { backgroundColor: "#FFF8E1", color: "#424242", labels: { color: "#424242" }, circle: { stroke: "#5D403780" }, plot: { color: "#5D4037" }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, De = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", labels: { color: "#BDBDBD" }, circle: { stroke: "#5D403780" }, plot: { color: "#5D4037" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, Re = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", labels: { color: "#AACCAA" }, circle: { stroke: "#333333" }, plot: { color: "#66CC66" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, je = { style: { backgroundColor: "#fbfafa", color: "#8A9892", labels: { color: "#A0AC94" }, circle: { stroke: "transparent" }, plot: { color: "#C09E85" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, Ne = { style: { backgroundColor: "#f6f6fb", color: "#50606C", labels: { color: "#61747E" }, circle: { stroke: "#D2D7E0" }, plot: { color: "#97ACB7" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, Ue = {
+  default: {},
+  dark: Fe,
+  celebration: Te,
+  celebrationNight: De,
+  hack: Re,
+  zen: je,
+  concrete: Ne
+}, Ll = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Te,
+  celebrationNight: De,
+  concrete: Ne,
+  dark: Fe,
+  default: Ue,
+  hack: Re,
+  zen: je
+}, Symbol.toStringTag, { value: "Module" })), qt = ["id"], Ht = ["xmlns", "viewBox"], Jt = ["width", "height"], Kt = ["cx", "cy", "r", "stroke", "stroke-width"], Qt = { key: 1 }, Zt = ["stroke", "d", "stroke-width"], el = { style: { "pointer-events": "none" } }, tl = ["cx", "cy", "fill", "r", "stroke"], ll = ["x", "y", "fill", "font-size"], sl = { key: 2 }, ol = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], al = { style: { "pointer-events": "none" } }, nl = ["cx", "cy", "fill", "r", "stroke"], il = ["x", "y", "fill", "font-size"], rl = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], ul = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], cl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, dl = {
+  __name: "vue-ui-relation-circle",
+  props: {
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(Ve, { expose: Ge }) {
+    wt((e) => ({
+      v0ccf0e06: st.value,
+      v0ab0445c: lt.value,
+      v08643f3e: ot.value
+    }));
+    const We = Z(() => import("./PenAndPaper-HCZQTkqi.js")), Ye = Z(() => import("./UserOptions-B3I-s3Lw.js")), Xe = Z(() => import("./PackageVersion-C82JCJOX.js")), { vue_ui_relation_circle: qe } = Ft(), { isThemeValid: He, warnInvalidTheme: Je } = Nt(), m = Ve, Ke = y(() => !!m.dataset && Object.keys(m.dataset).length), B = u(Pt()), ne = u(0), L = u(null), ie = u(null), re = u(null), ue = u(null), ce = u(0), l = u(Y()), { loading: de, FINAL_DATASET: Qe, manualLoading: G } = Tt({
+      ...Ct(m),
+      FINAL_CONFIG: l,
+      prepareConfig: Y,
+      skeletonDataset: [
+        { id: "A", label: "_", relations: ["B", "C", "D", "E", "F", "G"] },
+        { id: "B", label: "_", relations: ["A"] },
+        { id: "C", label: "_", relations: ["A"] },
+        { id: "D", label: "_", relations: ["A"] },
+        { id: "E", label: "_", relations: ["A"] },
+        { id: "F", label: "_", relations: ["A"] },
+        { id: "G", label: "_", relations: ["A"] }
+      ],
+      skeletonConfig: zt({
+        defaultConfig: l.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          customPalette: new Array(7).fill("#CACACA"),
+          style: {
+            backgroundColor: "#99999930",
+            labels: { color: "#6A6A6A" },
+            circle: { stroke: "#6A6A6A" },
+            plot: { color: "#6A6A6A", useSerieColor: !0 },
+            links: { maxWidth: 2 }
+          }
+        }
+      })
+    }), { userOptionsVisible: W, setUserOptionsVisibility: ve, keepUserOptionState: fe } = Ut({ config: l.value }), { svgRef: F } = Vt({ config: l.value.style.title });
+    function Y() {
+      const e = ae({
+        userConfig: m.config,
+        defaultConfig: qe
+      }), s = e.theme;
+      if (!s) return e;
+      if (!He.value(e))
+        return Je(e), e;
+      const t = ae({
+        userConfig: Ue[s] || m.config,
+        defaultConfig: e
+      }), o = ae({
+        userConfig: m.config,
+        defaultConfig: t
+      });
+      return {
+        ...o,
+        customPalette: o.customPalette.length ? o.customPalette : Ot[s] || Ie
+      };
+    }
+    ee(() => m.config, (e) => {
+      l.value = Y(), W.value = !l.value.userOptions.showOnChartHover, P.value = l.value.style.size, b.value = l.value.style.weightLabels.size, D.value = l.value.style.plot.radius, E.value = l.value.style.labels.fontSize, r.value.height = l.value.style.size, r.value.width = l.value.style.size, ke(), ce.value += 1;
+    }, { deep: !0 }), ee(() => m.dataset, (e) => {
+      Array.isArray(e) && e.length > 0 && (G.value = !1);
+    }, { deep: !0 });
+    const { isPrinting: ge, isImaging: ye, generatePdf: he, generateImage: me } = Rt({
+      elementId: `relation_circle_${B.value}`,
+      fileName: l.value.style.title.text || "vue-ui-relation-circle",
+      options: l.value.userOptions.print
+    }), Ze = y(() => l.value.userOptions.show && !l.value.style.title.text), be = y(() => St(l.value.customPalette)), A = u([]), p = u([]), f = u({}), k = u([]), et = u(0), T = y(() => Qe.value.slice(0, l.value.style.limit).map((e) => {
+      const s = Array.isArray(e.relations) ? e.relations : [];
+      return {
+        ...e,
+        weights: Array.isArray(e.weights) ? e.weights : new Array(s.length).fill(1),
+        relations: s
+      };
+    }));
+    ee(T, () => {
+      A.value = [], p.value = [], X(), q();
+    });
+    const P = u(l.value.style.size), b = u(l.value.style.weightLabels.size), D = u(l.value.style.plot.radius), E = u(l.value.style.labels.fontSize), r = u({
+      height: l.value.style.size,
+      width: l.value.style.size
+    }), z = y({
+      get() {
+        return P.value * l.value.style.circle.radiusProportion;
+      },
+      set(e) {
+        return e;
+      }
+    }), tt = y(() => l.value.style.links.curved), lt = y(() => `${l.value.style.animation.speedMs}ms`), st = y(() => z.value * 2), ot = y(() => z.value * 4), x = ze(null), O = ze(null);
+    At(() => {
+      ke(), document.getElementById(`relation_circle_${B.value}`).addEventListener("click", Ce);
+    });
+    const pe = y(() => l.value.debug);
+    function ke() {
+      if (Me(m.dataset) ? (Be({
+        componentName: "VueUiRelationCircle",
+        type: "dataset",
+        debug: pe.value
+      }), G.value = !0) : m.dataset.forEach((e, s) => {
+        It({
+          datasetObject: e,
+          requiredAttributes: ["id", "label", "relations", "weights"]
+        }).forEach((t) => {
+          Be({
+            componentName: "VueUiRelationCircle",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: s,
+            debug: pe.value
+          });
+        });
+      }), Me(m.dataset) || (G.value = l.value.loading), l.value.responsive) {
+        const e = Bt(() => {
+          const { width: s, height: t } = Et({
+            chart: L.value,
+            title: l.value.style.title.text ? ie.value : null,
+            source: re.value,
+            noTitle: ue.value
+          });
+          requestAnimationFrame(() => {
+            P.value = Math.min(s, t), r.value.width = Math.max(0.1, s), r.value.height = Math.max(0.1, t - 12), z.value = P.value * l.value.style.circle.radiusProportion, A.value = [], p.value = [], X(), q(), we(), l.value.responsiveProportionalSizing ? (b.value = oe({
+              relator: P.value,
+              adjuster: l.value.style.size,
+              source: l.value.style.weightLabels.size,
+              threshold: 6,
+              fallback: 6
+            }), D.value = oe({
+              relator: P.value,
+              adjuster: l.value.style.size,
+              source: l.value.style.plot.radius,
+              threshold: 1,
+              fallback: 1
+            }), E.value = oe({
+              relator: P.value,
+              adjuster: l.value.style.size,
+              source: l.value.style.labels.fontSize,
+              threshold: 6,
+              fallback: 6
+            })) : (b.value = l.value.style.weightLabels.size, D.value = l.value.style.plot.radius, E.value = l.value.style.labels.fontSize);
+          });
+        });
+        x.value && (O.value && x.value.unobserve(O.value), x.value.disconnect()), x.value = new ResizeObserver(e), O.value = L.value.parentNode, x.value.observe(O.value);
+      } else
+        A.value = [], p.value = [], X(), q();
+      we();
+    }
+    xt(() => {
+      document.getElementById(`relation_circle_${B.value}`).removeEventListener("click", Ce), x.value && (O.value && x.value.unobserve(O.value), x.value.disconnect());
+    });
+    const { autoSizeLabels: we } = Gt({
+      svgRef: F,
+      fontSize: l.value.style.labels.fontSize,
+      minFontSize: l.value.style.labels.minFontSize,
+      sizeRef: E,
+      labelClass: ".vue-ui-relation-circle-legend"
+    });
+    function Ce(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") || (f.value = {}, k.value = []);
+    }
+    function X() {
+      const e = 6.28319 / T.value.length, s = 360 / T.value.length;
+      let t = 0, o = 0;
+      T.value.forEach((c, d) => {
+        const K = c.weights.reduce((pt, kt) => pt + kt, 0), Q = z.value * Math.cos(t) + r.value.width / 2, bt = z.value * Math.sin(t) + r.value.height / 2 + l.value.style.circle.offsetY;
+        A.value.push({ x: Q, y: bt, ...c, color: c.color ? c.color : be.value[d] ? be.value[d] : Ie[d], regAngle: o, totalWeight: K }), t += e, o += s;
+      });
+    }
+    function at(e, s) {
+      const t = (e.x + s.x) / 2, o = (e.y + s.y) / 2;
+      return { x: t, y: o };
+    }
+    function q() {
+      p.value = [], A.value.forEach((e) => {
+        A.value.filter((t) => t.relations.includes(e.id)).forEach((t, o) => {
+          const c = t.relations.indexOf(e.id);
+          p.value.push({
+            weight: t.weights[c] ? t.weights[c] : 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: at({ x: e.x, y: e.y }, { x: t.x, y: t.y }),
+            midPointBezier: nt({
+              x1: e.x,
+              x2: t.x,
+              y1: e.y,
+              y2: t.y
+            }),
+            ...e
+          });
+        });
+      });
+    }
+    function nt(e) {
+      const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, o = { x: e.x1, y: e.y1 }, c = {
+        x: r.value.width / 2,
+        y: r.value.height / 2 + l.value.style.circle.offsetY
+      }, d = 0.5, K = Math.pow(1 - d, 3) * s.x + 3 * Math.pow(1 - d, 2) * d * o.x + 3 * (1 - d) * Math.pow(d, 2) * c.x + Math.pow(d, 3) * t.x, Q = Math.pow(1 - d, 3) * s.y + 3 * Math.pow(1 - d, 2) * d * o.y + 3 * (1 - d) * Math.pow(d, 2) * c.y + Math.pow(d, 3) * t.y;
+      return { x: K, y: Q };
+    }
+    const it = y(() => Math.max(...p.value.map((e) => e.weight)));
+    function rt(e) {
+      return Object.hasOwn(f.value, "x") ? k.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
+    }
+    function $(e) {
+      return e.colorSource;
+    }
+    function Ae(e) {
+      return Object.hasOwn(f.value, "x") ? k.value.includes(e.id) && e.relationId === `${e.id}_${f.value.id}` || e.relationId === `${f.value.id}_${e.id}` ? `opacity:1;stroke-width:${H(e)}` : "opacity: 0" : "opacity: 1";
+    }
+    function S(e) {
+      return Object.hasOwn(f.value, "x") ? !!(k.value.includes(e.id) && e.relationId === `${e.id}_${f.value.id}` || e.relationId === `${f.value.id}_${e.id}`) : !1;
+    }
+    function ut(e) {
+      return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
+    }
+    function ct(e) {
+      return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
+    }
+    function dt(e) {
+      return Object.hasOwn(f.value, "x") ? f.value.id === e.id || k.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
+    }
+    function vt(e) {
+      return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
+    }
+    const R = u(null);
+    function xe(e, s) {
+      R.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
+    }
+    function $e(e, s) {
+      R.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
+    }
+    function _e(e, s) {
+      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), et.value = 360 - e.regAngle, f.value.id && e.id === f.value.id ? (f.value = {}, k.value = []) : (f.value = e, k.value = [...e.relations]);
+    }
+    function H(e) {
+      const s = e.weight / it.value * l.value.style.links.maxWidth;
+      return Math.max(0.3, s);
+    }
+    const j = u(!1);
+    function Le(e) {
+      j.value = e, ne.value += 1;
+    }
+    const N = u(!1);
+    function J() {
+      N.value = !N.value;
+    }
+    async function ft({ scale: e = 2 } = {}) {
+      if (!L.value) return;
+      const { width: s, height: t } = L.value.getBoundingClientRect(), o = s / t, { imageUri: c, base64: d } = await Wt({ domElement: L.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: c,
+        base64: d,
+        title: l.value.style.title.text,
+        width: s,
+        height: t,
+        aspectRatio: o
+      };
+    }
+    const gt = y(() => l.value.style.backgroundColor), yt = y(() => l.value.style.title), { exportSvg: ht, getSvg: mt } = jt({
+      svg: F,
+      title: yt,
+      backgroundColor: gt
+    });
+    async function Pe({ isCb: e }) {
+      if (e) {
+        const { blob: s, url: t, text: o, dataUrl: c } = await mt();
+        l.value.userOptions.callbacks.svg({ blob: s, url: t, text: o, dataUrl: c });
+      } else
+        ht();
+    }
+    return Ge({
+      getImage: ft,
+      generatePdf: he,
+      generateSvg: Pe,
+      generateImage: me,
+      toggleAnnotator: J,
+      toggleFullscreen: Le
+    }), (e, s) => (a(), n("div", {
+      ref_key: "relationCircleChart",
+      ref: L,
+      class: "vue-data-ui-component vue-ui-relation-circle",
+      style: I(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
+      id: `relation_circle_${B.value}`,
+      onMouseenter: s[0] || (s[0] = () => i(ve)(!0)),
+      onMouseleave: s[1] || (s[1] = () => i(ve)(!1))
+    }, [
+      l.value.userOptions.buttons.annotator ? (a(), U(i(We), {
+        key: 0,
+        svgRef: i(F),
+        backgroundColor: l.value.style.backgroundColor,
+        color: l.value.style.color,
+        active: N.value,
+        onClose: J
+      }, {
+        "annotator-action-close": h(() => [
+          v(e.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": h(({ color: t }) => [
+          v(e.$slots, "annotator-action-color", w(C({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": h(({ mode: t }) => [
+          v(e.$slots, "annotator-action-draw", w(C({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": h(({ disabled: t }) => [
+          v(e.$slots, "annotator-action-undo", w(C({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": h(({ disabled: t }) => [
+          v(e.$slots, "annotator-action-redo", w(C({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": h(({ disabled: t }) => [
+          v(e.$slots, "annotator-action-delete", w(C({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
+      Ze.value ? (a(), n("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: ue,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : g("", !0),
+      l.value.style.title.text ? (a(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ie,
+        style: "width:100%;background:transparent"
+      }, [
+        (a(), U(Yt, {
+          key: `title_${ce.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)) : g("", !0),
+      l.value.userOptions.show && Ke.value && (i(fe) || i(W)) ? (a(), U(i(Ye), {
+        ref: "details",
+        key: `user_options_${ne.value}`,
+        backgroundColor: l.value.style.backgroundColor,
+        color: l.value.style.color,
+        isPrinting: i(ge),
+        isImaging: i(ye),
+        uid: B.value,
+        hasPdf: l.value.userOptions.buttons.pdf,
+        hasImg: l.value.userOptions.buttons.img,
+        hasSvg: l.value.userOptions.buttons.svg,
+        hasFullscreen: l.value.userOptions.buttons.img,
+        hasXls: !1,
+        isFullscreen: j.value,
+        titles: { ...l.value.userOptions.buttonTitles },
+        chartElement: L.value,
+        position: l.value.userOptions.position,
+        hasAnnotator: l.value.userOptions.buttons.annotator,
+        isAnnotation: N.value,
+        callbacks: l.value.userOptions.callbacks,
+        printScale: l.value.userOptions.print.scale,
+        onToggleFullscreen: Le,
+        onGeneratePdf: i(he),
+        onGenerateImage: i(me),
+        onGenerateSvg: Pe,
+        onToggleAnnotator: J,
+        style: I({
+          visibility: i(fe) ? i(W) ? "visible" : "hidden" : "visible"
+        })
+      }, $t({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: h(({ isOpen: t, color: o }) => [
+            v(e.$slots, "menuIcon", w(C({ isOpen: t, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: h(() => [
+            v(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: h(() => [
+            v(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: h(() => [
+            v(e.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: h(({ toggleFullscreen: t, isFullscreen: o }) => [
+            v(e.$slots, "optionFullscreen", w(C({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: h(({ toggleAnnotator: t, isAnnotator: o }) => [
+            v(e.$slots, "optionAnnotator", w(C({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
+      (a(), n("svg", {
+        ref_key: "svgRef",
+        ref: F,
+        xmlns: i(Mt),
+        class: te([{ "vue-data-ui-fullscreen--on": j.value, "vue-data-ui-fulscreen--off": !j.value }, "relation-circle"]),
+        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
+        width: "100%",
+        style: "user-select:none; background:transparent"
+      }, [
+        _t(i(Xe)),
+        e.$slots["chart-background"] ? (a(), n("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: r.value.width <= 0 ? 10 : r.value.width,
+          height: r.value.height <= 0 ? 10 : r.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          v(e.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Jt)) : g("", !0),
+        Lt("circle", {
+          cx: (r.value.width <= 0 ? 1e-4 : r.value.width) / 2,
+          cy: (r.value.height <= 0 ? 1e-4 : r.value.height) / 2 + l.value.style.circle.offsetY,
+          r: z.value <= 0 ? 1e-4 : z.value,
+          stroke: l.value.style.circle.stroke,
+          "stroke-width": l.value.style.circle.strokeWidth,
+          fill: "transparent",
+          class: "main-circle"
+        }, null, 8, Kt),
+        tt.value ? (a(), n("g", Qt, [
+          (a(!0), n(_, null, M(p.value, (t, o) => (a(), n("path", {
+            key: `relation_${o}`,
+            style: I(Ae(t)),
+            stroke: $(t),
+            class: te(["relation", { "vue-ui-relation-circle-selected": f.value.hasOwnProperty("id") && k.value.includes(t.id) }]),
+            d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${r.value.width / 2},${r.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
+            fill: "none",
+            "stroke-width": H(t),
+            "stroke-linecap": "round"
+          }, null, 14, Zt))), 128)),
+          (a(!0), n(_, null, M(p.value, (t, o) => (a(), n("g", el, [
+            S(t) ? v(e.$slots, "dataLabel", Oe({
+              key: 0,
+              ref_for: !0
+            }, {
+              x: t.midPointBezier.x,
+              y: t.midPointBezier.y,
+              color: $(t),
+              weight: t.weight,
+              fontSize: b.value
+            }), void 0, !0) : g("", !0),
+            S(t) && !e.$slots.dataLabel ? (a(), n("circle", {
+              key: 1,
+              cx: t.midPointBezier.x,
+              cy: t.midPointBezier.y,
+              fill: $(t),
+              r: b.value,
+              stroke: l.value.style.backgroundColor,
+              "stroke-width": "1"
+            }, null, 8, tl)) : g("", !0),
+            S(t) && !e.$slots.dataLabel ? (a(), n("text", {
+              key: 2,
+              x: t.midPointBezier.x,
+              y: t.midPointBezier.y + b.value / 3,
+              fill: i(Ee)($(t)),
+              "text-anchor": "middle",
+              "font-size": b.value
+            }, V(i(le)(
+              l.value.style.weightLabels.formatter,
+              t.weight,
+              i(se)({
+                p: l.value.style.weightLabels.prefix,
+                v: t.weight,
+                s: l.value.style.weightLabels.suffix,
+                r: l.value.style.weightLabels.rounding
+              }),
+              { ...t }
+            )), 9, ll)) : g("", !0)
+          ]))), 256))
+        ])) : (a(), n("g", sl, [
+          (a(!0), n(_, null, M(p.value, (t, o) => (a(), n("line", {
+            key: `relation_${o}`,
+            stroke: $(t),
+            "stroke-width": H(t),
+            style: I(Ae(t)),
+            x1: t.x1,
+            x2: t.x2,
+            y1: t.y1,
+            y2: t.y2,
+            class: te({ "vue-ui-relation-circle-selected": f.value.hasOwnProperty("id") && k.value.includes(t.id) }),
+            "stroke-linecap": "round"
+          }, null, 14, ol))), 128)),
+          (a(!0), n(_, null, M(p.value, (t, o) => (a(), n("g", al, [
+            S(t) ? v(e.$slots, "dataLabel", Oe({
+              key: 0,
+              ref_for: !0
+            }, {
+              x: t.midPointLine.x,
+              y: t.midPointLine.y,
+              color: $(t),
+              weight: t.weight,
+              fontSize: b.value
+            }), void 0, !0) : g("", !0),
+            S(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (a(), n("circle", {
+              key: 1,
+              cx: t.midPointLine.x,
+              cy: t.midPointLine.y,
+              fill: $(t),
+              r: b.value,
+              stroke: l.value.style.backgroundColor,
+              "stroke-width": "1"
+            }, null, 8, nl)) : g("", !0),
+            S(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (a(), n("text", {
+              key: 2,
+              x: t.midPointLine.x,
+              y: t.midPointLine.y + b.value / 3,
+              fill: i(Ee)($(t)),
+              "text-anchor": "middle",
+              "font-size": b.value
+            }, V(i(le)(
+              l.value.style.weightLabels.formatter,
+              t.weight,
+              i(se)({
+                p: l.value.style.weightLabels.prefix,
+                v: t.weight,
+                s: l.value.style.weightLabels.suffix,
+                r: l.value.style.weightLabels.rounding
+              }),
+              { ...t }
+            )), 9, il)) : g("", !0)
+          ]))), 256))
+        ])),
+        (a(!0), n(_, null, M(A.value, (t, o) => (a(), n("text", {
+          key: `plot_text_${o}`,
+          "text-anchor": ut(t),
+          transform: vt(t),
+          x: ct(t),
+          y: t.y + 5,
+          class: "vue-ui-relation-circle-legend",
+          "transform-origin": "start",
+          "font-weight": f.value.id === t.id ? "900" : "400",
+          style: I(`font-family:${l.value.style.fontFamily};${dt(t)}`),
+          "font-size": E.value,
+          fill: l.value.style.labels.color,
+          "text-decoration": o === R.value ? "underline" : void 0,
+          onClick: (c) => _e(t, o),
+          onMouseenter: (c) => xe(t, o),
+          onMouseleave: (c) => $e(t, o)
+        }, [
+          i(de) ? (a(), n(_, { key: 0 }, [
+            Se(" -------- ")
+          ], 64)) : (a(), n(_, { key: 1 }, [
+            Se(V(t.label) + " (" + V(i(le)(
+              l.value.style.weightLabels.formatter,
+              t.totalWeight,
+              i(se)({
+                p: l.value.style.weightLabels.prefix,
+                v: t.totalWeight,
+                s: l.value.style.weightLabels.suffix,
+                r: l.value.style.weightLabels.rounding
+              }),
+              { ...t }
+            )) + ") ", 1)
+          ], 64))
+        ], 44, rl))), 128)),
+        (a(!0), n(_, null, M(A.value, (t, o) => (a(), n("circle", {
+          cx: t.x,
+          cy: t.y,
+          key: `plot_${o}`,
+          style: I(`${rt(t)}; transition: r 0.2s ease-in-out;`),
+          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",
+          r: D.value * (o === R.value ? 2 : 1),
+          onClick: (c) => _e(t, o),
+          onMouseenter: (c) => xe(t, o),
+          onMouseleave: (c) => $e(t, o)
+        }, null, 44, ul))), 128)),
+        v(e.$slots, "svg", { svg: r.value }, void 0, !0)
+      ], 10, Ht)),
+      e.$slots.watermark ? (a(), n("div", cl, [
+        v(e.$slots, "watermark", w(C({ isPrinting: i(ge) || i(ye) })), void 0, !0)
+      ])) : g("", !0),
+      e.$slots.source ? (a(), n("div", {
+        key: 5,
+        ref_key: "source",
+        ref: re,
+        dir: "auto"
+      }, [
+        v(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      i(de) ? (a(), U(Dt, { key: 6 })) : g("", !0)
+    ], 44, qt));
+  }
+}, vl = /* @__PURE__ */ Xt(dl, [["__scopeId", "data-v-f336b6ba"]]), Pl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: vl
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Ll as a,
+  Pl as b,
+  vl as v
+};