vue-data-ui 3.15.12 → 3.16.1

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

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