vue-data-ui 3.15.12 → 3.16.1

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

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