vue-data-ui 3.0.0-next.65 → 3.0.0-next.67

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

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

package/dist/{vue-ui-ridgeline-CNuNfOmr.js → vue-ui-ridgeline-DYi51pwG.js}

@@ -1,17 +1,17 @@
 import { defineAsyncComponent as N, computed as d, ref as u, shallowRef as Je, toRefs as jt, onBeforeUnmount as Qe, watch as Z, nextTick as ke, watchEffect as qt, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as w, normalizeClass as ee, createBlock as _, createCommentVNode as v, renderSlot as m, createElementVNode as y, createSlots as Ze, withCtx as p, normalizeProps as te, guardReactiveProps as ae, createVNode as et, Fragment as g, renderList as k, mergeProps as tt, toDisplayString as B, createTextVNode as at } from "vue";
-import { u as Kt, c as Ae, t as Jt, d as Qt, e as Zt, p as le, ap as lt, ai as ea, U as st, V as ta, W as aa, X as la, F as sa, I as oa, k as se, i as oe, a as ra, b as na, f as Ce, g as ot, o as ia, v as ua, w as ca, K as va } from "./index-D4WnuWyh.js";
+import { u as Kt, c as Ae, t as Jt, d as Qt, e as Zt, p as le, ap as lt, ai as ea, U as st, V as ta, W as aa, X as la, F as sa, I as oa, k as se, i as oe, a as ra, b as na, f as Ce, g as ot, o as ia, v as ua, w as ca, K as va } from "./index-DSzRUkFt.js";
 import { t as rt, u as ha } from "./useResponsive-DfdjqQps.js";
 import { u as da, B as ya } from "./useLoading-D7YHNtLX.js";
-import { u as fa } from "./usePrinter-LIy0Oc_F.js";
-import { u as nt } from "./useNestedProp-DpsQk2zA.js";
+import { u as fa } from "./usePrinter-BVME5tnZ.js";
+import { u as nt } from "./useNestedProp-jGBTZAI0.js";
 import { u as ga } from "./useTimeLabels-DkzmKfZn.js";
 import { u as ma } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as pa } from "./useChartAccessibility-9icAAmYg.js";
 import { u as ba } from "./useTimeLabelCollider-CIsgDrl9.js";
-import xa from "./Legend-DFZdoZrW.js";
-import ka from "./Title-DLzQZPSp.js";
-import { _ as Aa } from "./Shape-CNW2rRJN.js";
-import Ca from "./img-DByXXZOX.js";
+import xa from "./Legend-C8iYgsQ8.js";
+import ka from "./Title-KSMyq3wn.js";
+import { _ as Aa } from "./Shape-BHLKYLy2.js";
+import Ca from "./img-DNh0GOHm.js";
 import { _ as wa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const $a = ["id"], _a = ["xmlns", "viewBox"], Ta = ["id"], Pa = ["stop-color"], Sa = ["stop-color"], Ma = ["stop-color"], La = ["stop-color"], Oa = ["id"], za = ["stop-color"], Ia = ["stop-color"], Na = ["stop-color"], Fa = ["stop-color"], Da = { key: 0 }, Ra = ["fill", "d"], Ea = ["stroke", "stroke-width", "d"], Ha = ["fill", "d"], Xa = ["stroke", "stroke-dasharray", "stroke-width", "d"], Ba = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], Va = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Ua = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], Ga = { key: 0 }, Wa = ["font-size", "fill", "font-weight", "transform", "text-anchor"], Ya = ["font-size", "fill", "font-weight", "transform", "text-anchor", "innerHTML"], ja = ["x", "y", "width", "height", "onMouseenter", "onMouseleave", "onClick"], qa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ka = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Ja = ["x", "y", "text-anchor", "font-size", "fill"], Qa = {
   key: 4,
@@ -34,7 +34,7 @@ const $a = ["id"], _a = ["xmlns", "viewBox"], Ta = ["id"], Pa = ["stop-color"],
   },
   emits: ["selectLegend", "selectDatapoint", "selectX"],
   setup(it, { expose: ut, emit: ct }) {
-    const vt = N(() => import("./vue-ui-accordion-B3qWFvj-.js")), ht = N(() => import("./BaseDraggableDialog-DjdsoIGU.js")), dt = N(() => import("./DataTable-awPoVqrs.js")), yt = N(() => import("./PackageVersion-bvIGp0Wr.js")), ft = N(() => import("./PenAndPaper-CDiJnTx6.js")), gt = N(() => import("./UserOptions-CyxK5Q-5.js")), mt = N(() => import("./vue-ui-xy-DslMfLA-.js")), { vue_ui_ridgeline: pt } = Kt(), F = it, V = d({
+    const vt = N(() => import("./vue-ui-accordion-CC84yjap.js")), ht = N(() => import("./BaseDraggableDialog-BFyxDfXQ.js")), dt = N(() => import("./DataTable-Dm9n_hgl.js")), yt = N(() => import("./PackageVersion-DzLNBusm.js")), ft = N(() => import("./PenAndPaper-BsfhRXyF.js")), gt = N(() => import("./UserOptions-BDt8OYJb.js")), mt = N(() => import("./vue-ui-xy-DMPIrN7g.js")), { vue_ui_ridgeline: pt } = Kt(), F = it, V = d({
       get() {
         return Array.isArray(O.value) && O.value.length > 0;
       },

package/dist/{vue-ui-rings-cYyJqaty.js → vue-ui-rings-C7ObYFMH.js}

@@ -1,15 +1,15 @@
 import { defineAsyncComponent as R, useSlots as rt, ref as r, computed as f, toRefs as it, watch as le, shallowRef as Pe, onMounted as vt, onBeforeUnmount as ct, createElementBlock as d, openBlock as i, unref as s, normalizeStyle as O, normalizeClass as B, createBlock as S, createCommentVNode as b, createElementVNode as A, createVNode as ae, createSlots as Ne, withCtx as g, renderSlot as h, normalizeProps as D, guardReactiveProps as M, Fragment as oe, renderList as se, mergeProps as dt, toDisplayString as E, createTextVNode as ht, nextTick as pt } from "vue";
-import { u as gt, c as Le, t as ft, a as yt, p as P, b as mt, o as Ve, f as ne, g as bt, d as kt, G as wt, e as Re, i as N, X as Ct, s as $t, x as Tt, h as X, k as De, v as _t, w as xt, y as At, z as Ft } from "./index-D4WnuWyh.js";
+import { u as gt, c as Le, t as ft, a as yt, p as P, b as mt, o as Ve, f as ne, g as bt, d as kt, G as wt, e as Re, i as N, X as Ct, s as $t, x as Tt, h as X, k as De, v as _t, w as xt, y as At, z as Ft } from "./index-DSzRUkFt.js";
 import { t as It, u as Ot } from "./useResponsive-DfdjqQps.js";
-import { u as St } from "./usePrinter-LIy0Oc_F.js";
+import { u as St } from "./usePrinter-BVME5tnZ.js";
 import { u as Pt, B as Nt } from "./useLoading-D7YHNtLX.js";
-import { u as Me } from "./useNestedProp-DpsQk2zA.js";
+import { u as Me } from "./useNestedProp-jGBTZAI0.js";
 import { u as Lt } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
-import Rt from "./Legend-DFZdoZrW.js";
-import Dt from "./Title-DLzQZPSp.js";
-import { _ as Mt } from "./Shape-CNW2rRJN.js";
-import zt from "./img-DByXXZOX.js";
+import Rt from "./Legend-C8iYgsQ8.js";
+import Dt from "./Title-KSMyq3wn.js";
+import { _ as Mt } from "./Shape-BHLKYLy2.js";
+import zt from "./img-DNh0GOHm.js";
 import { _ as Bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Et = ["id"], Ut = ["xmlns", "viewBox"], Wt = ["width", "height"], Gt = ["id"], Ht = ["stop-color"], jt = ["stop-color"], Xt = { key: 1 }, Yt = ["stroke", "cx", "cy", "r", "fill"], qt = ["stroke", "stroke-width", "cx", "cy", "r", "fill"], Jt = ["stroke", "stroke-width", "cx", "cy", "r", "fill"], Kt = ["cx", "cy", "r", "onMouseenter", "onMouseleave", "onClick"], Qt = {
   key: 4,
@@ -32,7 +32,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Wt = ["width", "height"], Gt = ["i
   },
   emits: ["selectLegend"],
   setup(ze, { expose: Be, emit: Ee }) {
-    const Ue = R(() => import("./vue-ui-accordion-B3qWFvj-.js")), We = R(() => import("./DataTable-awPoVqrs.js")), Ge = R(() => import("./PackageVersion-bvIGp0Wr.js")), He = R(() => import("./PenAndPaper-CDiJnTx6.js")), je = R(() => import("./Tooltip-DgVlOrus.js")), Xe = R(() => import("./UserOptions-CyxK5Q-5.js")), { vue_ui_rings: Ye } = gt(), qe = rt(), m = ze, F = r(!1), ue = f(() => !!m.dataset && m.dataset.length), C = r(Le()), Je = r(null), U = r(!1), Y = r(""), $ = r(null), re = r(0), T = r(null), ie = r(null), ve = r(null), ce = r(null), de = r(null), he = r(0), pe = r(0), ge = r(0), q = r(!1), e = r(K()), { loading: I, FINAL_DATASET: fe, manualLoading: W } = Pt({
+    const Ue = R(() => import("./vue-ui-accordion-CC84yjap.js")), We = R(() => import("./DataTable-Dm9n_hgl.js")), Ge = R(() => import("./PackageVersion-DzLNBusm.js")), He = R(() => import("./PenAndPaper-BsfhRXyF.js")), je = R(() => import("./Tooltip-DnEIs-sg.js")), Xe = R(() => import("./UserOptions-BDt8OYJb.js")), { vue_ui_rings: Ye } = gt(), qe = rt(), m = ze, F = r(!1), ue = f(() => !!m.dataset && m.dataset.length), C = r(Le()), Je = r(null), U = r(!1), Y = r(""), $ = r(null), re = r(0), T = r(null), ie = r(null), ve = r(null), ce = r(null), de = r(null), he = r(0), pe = r(0), ge = r(0), q = r(!1), e = r(K()), { loading: I, FINAL_DATASET: fe, manualLoading: W } = Pt({
       ...it(m),
       FINAL_CONFIG: e,
       prepareConfig: K,