vue-data-ui 2.4.40 → 2.4.42

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

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