import { toRef as ue, resolveComponent as ce, createElementBlock as c, openBlock as l, Fragment as b, renderList as z, createCommentVNode as g, createBlock as A, createElementVNode as G, withModifiers as Me, renderSlot as w, mergeProps as ke, withCtx as F, toDisplayString as Pe, ref as p, onMounted as Te, onUnmounted as ze, computed as M, watch as He, unref as C, normalizeStyle as ie, normalizeClass as Ce, createVNode as le, createSlots as Be, normalizeProps as X, guardReactiveProps as j, createTextVNode as Ge, nextTick as Ve } from "vue";
import { u as Xe, o as je, e as qe, c as we, t as Ye, p as $e, a as We, b as Ze, X as Qe, l as Je, P as Ke, q as et, r as tt, x as ot, y as lt } from "./index-CjXfhpMA.js";
import { _ as at } from "./Title-BfzkycPl.js";
import { u as st, U as nt } from "./usePrinter-bLtFFBkj.js";
import { D as rt } from "./DataTable-BfXSoPx-.js";
import { _ as it } from "./Tooltip-p85hmQvg.js";
import ut from "./vue-ui-skeleton-B1q5j9VT.js";
import ct from "./vue-ui-accordion-CEdZMQD4.js";
import { u as xe } from "./useNestedProp-CmXi5M93.js";
import { _ as dt } from "./PackageVersion-ChIRiDpv.js";
import { P as vt } from "./PenAndPaper-OV0eQPcd.js";
import { u as ht } from "./useUserOptionState-BIvW1Kz7.js";
import { u as ft } from "./useChartAccessibility-BWojgys7.js";
import { _ as yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], gt = ["x", "y", "height", "width", "onClick", "onMouseover"], mt = {
  __name: "RecursiveCircles",
  props: {
    color: {
      type: String,
      default: "#000000"
    },
    dataset: {
      type: Array,
      default: () => []
    },
    hoveredUid: {
      type: String,
      default: null
    },
    linkColor: {
      type: String,
      default: "#CCCCCC"
    },
    stroke: {
      type: String,
      default: "#FFFFFF"
    },
    strokeHovered: {
      type: String,
      default: "#000000"
    }
  },
  emits: ["click", "hover"],
  setup(n, { emit: H }) {
    const _ = n, h = H;
    function v(a) {
      h("click", a);
    }
    function $(a) {
      h("hover", a);
    }
    return ue(_, "dataset").value.forEach((a) => {
      a.nodes && a.nodes.length > 0 && a.nodes.forEach((k) => {
        k.ancestor = a;
      });
    }), (a, k) => {
      const I = ce("RecursiveCircles", !0);
      return l(!0), c(b, null, z(n.dataset, (i) => (l(), c(b, null, [
        i.polygonPath && i.polygonPath.coordinates ? (l(), c(b, { key: 0 }, [
          (l(!0), c(b, null, z(i.polygonPath.coordinates, (x, D) => (l(), c(b, null, [
            G("circle", {
              cx: x.x,
              cy: x.y,
              r: i.circleRadius,
              fill: `url(#gradient_${i.color})`,
              stroke: n.hoveredUid && n.hoveredUid === i.uid ? n.strokeHovered : n.stroke,
              "stroke-width": n.hoveredUid && n.hoveredUid === i.uid ? i.circleRadius / 6 : i.circleRadius / 12,
              style: { cursor: "pointer" },
              onClick: (U) => v(i),
              onMouseover: (U) => $(i),
              onMouseleave: k[0] || (k[0] = (U) => $(null))
            }, null, 40, pt),
            a.$slots.node ? (l(), c("foreignObject", {
              key: 0,
              x: x.x - i.circleRadius,
              y: x.y - i.circleRadius,
              height: i.circleRadius * 2,
              width: i.circleRadius * 2,
              style: { overflow: "visible" },
              onClick: Me((U) => v(i), ["stop"]),
              onMouseover: (U) => $(i),
              onMouseleave: k[1] || (k[1] = (U) => $(null))
            }, [
              w(a.$slots, "node", ke({ ref_for: !0 }, { node: i }))
            ], 40, gt)) : g("", !0)
          ], 64))), 256)),
          i.nodes && i.nodes.length > 0 ? (l(), A(I, {
            key: 0,
            dataset: i.nodes,
            color: n.color,
            stroke: n.stroke,
            strokeHovered: n.strokeHovered,
            hoveredUid: n.hoveredUid,
            onClick: v,
            onHover: $
          }, {
            node: F(({ node: x }) => [
              w(a.$slots, "node", ke({ ref_for: !0 }, { node: x }))
            ]),
            _: 2
          }, 1032, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : g("", !0)
        ], 64)) : g("", !0)
      ], 64))), 256);
    };
  }
}, bt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], kt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ct = {
  __name: "RecursiveLinks",
  props: {
    dataset: {
      type: Array,
      default: () => []
    },
    color: {
      type: String,
      default: "#DDDDDD"
    },
    backgroundColor: {
      type: String,
      default: "#FFFFFF"
    }
  },
  setup(n) {
    return ue(n, "dataset").value.forEach((h) => {
      h.nodes && h.nodes.length > 0 && h.nodes.forEach((v) => {
        v.ancestor = h;
      });
    }), (h, v) => {
      const $ = ce("RecursiveLinks", !0);
      return l(), c(b, null, [
        (l(!0), c(b, null, z(n.dataset, (r) => (l(), c(b, null, [
          r.polygonPath && r.polygonPath.coordinates ? (l(!0), c(b, { key: 0 }, z(r.polygonPath.coordinates, (a, k) => (l(), c(b, null, [
            r.ancestor && r.ancestor.polygonPath ? (l(), c(b, { key: 0 }, [
              G("line", {
                x1: a.x,
                y1: a.y,
                x2: r.ancestor.polygonPath.coordinates[0].x,
                y2: r.ancestor.polygonPath.coordinates[0].y,
                stroke: n.backgroundColor,
                "stroke-width": r.circleRadius / 1.5
              }, null, 8, bt),
              G("line", {
                x1: a.x,
                y1: a.y,
                x2: r.ancestor.polygonPath.coordinates[0].x,
                y2: r.ancestor.polygonPath.coordinates[0].y,
                stroke: n.color,
                "stroke-width": r.circleRadius / 2
              }, null, 8, kt)
            ], 64)) : g("", !0)
          ], 64))), 256)) : g("", !0)
        ], 64))), 256)),
        (l(!0), c(b, null, z(n.dataset, (r) => (l(), c(b, null, [
          r.polygonPath && r.polygonPath.coordinates ? (l(), c(b, { key: 0 }, [
            r.nodes && r.nodes.length > 0 ? (l(), A($, {
              key: 0,
              dataset: r.nodes,
              color: n.color,
              backgroundColor: n.backgroundColor
            }, null, 8, ["dataset", "color", "backgroundColor"])) : g("", !0)
          ], 64)) : g("", !0)
        ], 64))), 256))
      ], 64);
    };
  }
}, wt = ["x", "y", "fill", "font-size"], $t = {
  __name: "RecursiveLabels",
  props: {
    color: {
      type: String,
      default: "#000000"
    },
    dataset: {
      type: Array,
      default: () => []
    },
    hoveredUid: {
      type: String,
      default: null
    }
  },
  emits: ["zoom", "hover"],
  setup(n, { emit: H }) {
    return ue(n, "dataset").value.forEach((v) => {
      v.nodes && v.nodes.length > 0 && v.nodes.forEach(($) => {
        $.ancestor = v;
      });
    }), (v, $) => {
      const r = ce("RecursiveLabels", !0);
      return l(!0), c(b, null, z(n.dataset, (a) => (l(), c(b, null, [
        a.polygonPath && a.polygonPath.coordinates ? (l(), c(b, { key: 0 }, [
          (l(!0), c(b, null, z(a.polygonPath.coordinates, (k) => (l(), c("text", {
            x: k.x,
            y: k.y + a.circleRadius * 2,
            fill: n.color,
            "font-size": a.circleRadius,
            "text-anchor": "middle",
            style: { opacity: "0.8", "pointer-events": "none" }
          }, Pe(a.name), 9, wt))), 256)),
          a.nodes && a.nodes.length > 0 ? (l(), A(r, {
            key: 0,
            dataset: a.nodes,
            color: n.color,
            hoveredUid: n.hoveredUid
          }, null, 8, ["dataset", "color", "hoveredUid"])) : g("", !0)
        ], 64)) : g("", !0)
      ], 64))), 256);
    };
  }
};
function xt(n, H = { x: 0, y: 0, width: 100, height: 100 }, _ = 1) {
  const h = p({ ...H }), v = p(1), $ = p(!1), r = p({ x: 0, y: 0 });
  let a = { x: 0, y: 0 }, k = null, I = null;
  function i(o) {
    var O;
    const d = n.value;
    if (!d) return { x: 0, y: 0 };
    const m = d.createSVGPoint();
    m.x = o.clientX, m.y = o.clientY;
    const P = (O = d.getScreenCTM()) == null ? void 0 : O.inverse();
    return P ? m.matrixTransform(P) : { x: 0, y: 0 };
  }
  function x(o) {
    $.value = !0;
    const d = i(o.touches ? o.touches[0] : o);
    r.value = { x: d.x, y: d.y }, a = { x: 0, y: 0 };
  }
  function D(o) {
    if (!$.value) return;
    const d = i(o.touches ? o.touches[0] : o);
    let m = d.x - r.value.x, P = d.y - r.value.y;
    Math.abs(m) < 0.3 && Math.abs(P) < 0.3 || (a.x = m * 0.8 + a.x * 0.2, a.y = P * 0.8 + a.y * 0.2, r.value = d, k || (k = requestAnimationFrame(U)));
  }
  function U() {
    h.value.x -= a.x, h.value.y -= a.y, k = null;
  }
  function R() {
    $.value = !1;
  }
  function q(o) {
    o.preventDefault();
    const d = o.deltaY > 0 ? 0.9 : 1.1;
    W(d, i(o));
  }
  function e(o) {
    console.log(_), o.preventDefault();
    const d = i(o), m = 1.02 * (1 + _ / 100);
    Y(m, d);
  }
  function Y(o, d) {
    I && cancelAnimationFrame(I);
    let m = v.value, P = m * o, O = 0;
    const B = () => {
      O += 0.02;
      let Z = m + (P - m) * ee(O);
      if (O >= 1) {
        v.value = P, I = null;
        return;
      }
      W(Z / m, d), I = requestAnimationFrame(B);
    };
    B();
  }
  const ee = (o) => o < 0.5 ? 2 * o * o : -1 + (4 - 2 * o) * o;
  function W(o, d) {
    const m = v.value * o, P = m / v.value, O = h.value.width / P, B = h.value.height / P, Z = (d.x - h.value.x) * (1 - 1 / P), ae = (d.y - h.value.y) * (1 - 1 / P);
    h.value.x += Z, h.value.y += ae, h.value.width = O, h.value.height = B, v.value = m;
  }
  return Te(() => {
    const o = n.value;
    o && (o.addEventListener("mousedown", x), o.addEventListener("mousemove", D), o.addEventListener("mouseup", R), o.addEventListener("mouseleave", R), o.addEventListener("wheel", q, { passive: !1 }), o.addEventListener("dblclick", e), o.addEventListener("touchstart", (d) => {
      d.preventDefault(), x(d);
    }, { passive: !1 }), o.addEventListener("touchmove", (d) => {
      d.preventDefault(), D(d);
    }, { passive: !1 }), o.addEventListener("touchend", R));
  }), ze(() => {
    const o = n.value;
    o && (o.removeEventListener("mousedown", x), o.removeEventListener("mousemove", D), o.removeEventListener("mouseup", R), o.removeEventListener("mouseleave", R), o.removeEventListener("wheel", q), o.removeEventListener("dblclick", e), o.removeEventListener("touchstart", x), o.removeEventListener("touchmove", D), o.removeEventListener("touchend", R));
  }), { viewBox: h };
}
const Pt = ["id"], Tt = {
  key: 1,
  ref: "noTitle",
  class: "vue-data-ui-no-title-space",
  style: "height:36px; width: 100%;background:transparent"
}, Ft = {
  key: 2,
  style: "width:100%;background:transparent;"
}, Lt = ["xmlns", "viewBox"], St = ["width", "height"], Et = ["id"], Ot = ["stop-color"], Dt = ["stop-color"], Ut = {
  key: 5,
  class: "vue-data-ui-watermark"
}, At = {
  key: 7,
  ref: "source",
  dir: "auto"
}, Rt = ["innerHTML"], Nt = {
  __name: "vue-ui-molecule",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectNode"],
  setup(n, { expose: H, emit: _ }) {
    const { vue_ui_molecule: h } = Xe(), v = n, $ = _, r = M(() => !!v.dataset && v.dataset.length);
    Te(() => {
      a();
    });
    function a() {
      je(v.dataset) && qe({
        componentName: "VueUiMolecule",
        type: "dataset"
      });
    }
    const k = p(we()), I = p(null), i = p(!1), x = p(""), D = p(null), U = p(0), R = p(0), q = p(0), e = M({
      get: () => d(),
      set: (t) => t
    }), { userOptionsVisible: Y, setUserOptionsVisibility: ee, keepUserOptionState: W } = ht({ config: e.value }), { svgRef: o } = ft({ config: e.value.style.chart.title });
    function d() {
      const t = xe({
        userConfig: v.config,
        defaultConfig: h
      });
      return t.theme ? {
        ...xe({
          userConfig: We.vue_ui_molecule[t.theme] || v.config,
          defaultConfig: t
        }),
        customPalette: Ye[t.theme] || $e
      } : t;
    }
    He(() => v.config, (t) => {
      e.value = d(), Y.value = !e.value.userOptions.showOnChartHover, a(), R.value += 1, q.value += 1, E.value.showTable = e.value.table.show, E.value.showTooltip = e.value.style.chart.tooltip.show;
    }, { deep: !0 });
    const { isPrinting: m, isImaging: P, generatePdf: O, generateImage: B } = st({
      elementId: `cluster_${k.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-molecule"
    }), Z = M(() => e.value.userOptions.show && !e.value.style.chart.title.text), ae = M(() => Ze(e.value.customPalette)), E = p({
      showTable: e.value.table.show,
      showDataLabels: !0,
      showTooltip: e.value.style.chart.tooltip.show
    });
    function de(t, u = 0) {
      return Array.isArray(t) && t.length > 0 && t[0].nodes ? de(t[0].nodes, u + 1) : u;
    }
    function Fe() {
      const t = de(v.dataset);
      let u = 100, s = u;
      for (let y = 0; y < t; y += 1)
        u /= 1, s += u;
      return {
        height: s,
        width: s
      };
    }
    const L = p(Fe());
    p(`0 0 ${L.value.width} ${L.value.height}`);
    function ve(t, u = { x: -L.value.width / 2.43, y: L.value.height / 2 }, s = L.value.width / 1.1, y = 24, f = 0, T = 0, re = "#BBBBBB") {
      if (t && t.length > 0) {
        const _e = Ke({
          plot: u,
          radius: s,
          sides: t.length,
          rotation: f
        });
        t.forEach((S, me) => {
          const be = _e.coordinates[me];
          let K;
          if (S.ancestor ? S.ancestor.ancestor ? K = S.ancestor.color || re : (K = ae.value[T] || $e[T] || re, T += 1) : K = re, S.polygonPath = {
            coordinates: [be]
          }, S.circleRadius = y, S.color = K, S.uid = we(), S.nodes && S.nodes.length > 0) {
            const Ie = !S.ancestor || !S.ancestor.ancestor ? T : 0;
            S.nodes = ve(
              S.nodes,
              be,
              s / 2.9,
              y / 2.2,
              f + Math.PI * me / S.nodes.length,
              Ie,
              K
            );
          }
        });
      }
      return t;
    }
    function Le(t) {
      const u = /* @__PURE__ */ new Set();
      function s(f) {
        f.forEach((T) => {
          T.color && !u.has(T.color) && u.add(T.color), T.nodes && T.nodes.length > 0 && s(T.nodes);
        });
      }
      s(t);
      const y = {};
      return Array.from(u).forEach((f, T) => {
        y[f] = `gradient_${T}`;
      }), y;
    }
    const Se = M(() => Le(N.value)), N = M(() => ve(v.dataset)), se = p(null);
    function Ee(t) {
      se.value = {
        datapoint: t,
        seriesIndex: -1,
        series: N.value,
        config: e.value
      };
      const u = e.value.style.chart.tooltip.customFormat;
      if (ot(u) && lt(() => u({
        seriesIndex: -1,
        datapoint: t,
        series: N.value,
        config: e.value
      })))
        x.value = u({
          seriesIndex: -1,
          // well, ok
          datapoint: t,
          series: N.value,
          config: e.value
        });
      else {
        let s = "";
        s += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (s += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), x.value = `<div style="font-family:inherit">${s}</div>`;
      }
    }
    const he = p(null), Q = p(null);
    function Oe(t) {
      he.value = t, t ? (i.value = !0, Ee(t), Q.value = t.uid) : (i.value = !1, x.value = "", Q.value = null);
    }
    function De(t) {
      const u = [];
      function s(y) {
        y.forEach((f) => {
          const T = {
            name: f.name,
            details: f.details || "-",
            ancestor: f.ancestor && f.ancestor.name || "-",
            color: f.color || ""
          };
          u.push(T), f.nodes && f.nodes.length > 0 && s(f.nodes, f.name);
        });
      }
      return s(t), u;
    }
    const Ue = M(() => De(N.value)), V = M(() => {
      const t = [
        e.value.table.translations.nodeName,
        e.value.table.translations.details,
        e.value.table.translations.ancestor
      ], u = Ue.value.map((f, T) => [
        {
          color: f.color,
          name: f.name
        },
        f.details,
        f.ancestor || ""
      ]), s = {
        th: {
          backgroundColor: e.value.table.th.backgroundColor,
          color: e.value.table.th.color,
          outline: e.value.table.th.outline
        },
        td: {
          backgroundColor: e.value.table.td.backgroundColor,
          color: e.value.table.td.color,
          outline: e.value.table.td.outline
        },
        breakpoint: e.value.table.responsiveBreakpoint
      }, y = [
        e.value.table.translations.nodeName,
        e.value.table.translations.details,
        e.value.table.translations.ancestor
      ];
      return {
        head: t,
        body: u,
        config: s,
        colNames: y
      };
    });
    function fe() {
      Ve(() => {
        const t = V.value.body.map((y, f) => [[y[0].name], [y[1]], [y[2]]]), u = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...V.value.head]]].concat(t), s = et(u);
        tt({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-molecule" });
      });
    }
    function Ae() {
      return N.value;
    }
    const J = p(!1);
    function Re(t) {
      J.value = t, U.value += 1;
    }
    function ye() {
      E.value.showTable = !E.value.showTable;
    }
    function pe() {
      E.value.showDataLabels = !E.value.showDataLabels;
    }
    function ge() {
      E.value.showTooltip = !E.value.showTooltip;
    }
    const te = p(!1);
    function ne() {
      te.value = !te.value;
    }
    const { viewBox: oe } = xt(o, {
      x: 0,
      y: 0,
      width: L.value.width <= 0 ? 10 : L.value.width,
      height: L.value.height <= 0 ? 10 : L.value.height
    }, e.value.style.chart.zoom.speed);
    function Ne(t) {
      $("selectNode", t);
    }
    return H({
      getData: Ae,
      generatePdf: O,
      generateCsv: fe,
      generateImage: B,
      toggleTable: ye,
      toggleLabels: pe,
      toggleTooltip: ge,
      toggleAnnotator: ne
    }), (t, u) => (l(), c("div", {
      ref_key: "moleculeChart",
      ref: D,
      class: Ce(`vue-ui-molecule ${J.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      style: ie(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
      id: `cluster_${k.value}`,
      onMouseleave: u[1] || (u[1] = (s) => {
        he.value = null, Q.value = null, C(ee)(!1);
      }),
      onMouseenter: u[2] || (u[2] = () => C(ee)(!0))
    }, [
      e.value.userOptions.buttons.annotator ? (l(), A(vt, {
        key: 0,
        parent: D.value,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        active: te.value,
        onClose: ne
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : g("", !0),
      Z.value ? (l(), c("div", Tt, null, 512)) : g("", !0),
      e.value.style.chart.title.text ? (l(), c("div", Ft, [
        (l(), A(at, {
          key: `title_${R.value}`,
          config: {
            title: {
              cy: "molecule-div-title",
              ...e.value.style.chart.title
            },
            subtitle: {
              cy: "molecule-div-subtitle",
              ...e.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ])) : g("", !0),
      e.value.userOptions.show && r.value && (C(W) || C(Y)) ? (l(), A(nt, {
        ref_key: "details",
        ref: I,
        key: `user_options_${U.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: C(m),
        isImaging: C(P),
        uid: k.value,
        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasXls: e.value.userOptions.buttons.csv,
        hasImg: e.value.userOptions.buttons.img,
        hasTable: e.value.userOptions.buttons.table,
        hasLabel: e.value.userOptions.buttons.labels,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isTooltip: E.value.showTooltip,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: D.value,
        position: e.value.userOptions.position,
        hasAnnotator: e.value.userOptions.buttons.annotator,
        isAnnotation: te.value,
        onToggleFullscreen: Re,
        onGeneratePdf: C(O),
        onGenerateCsv: fe,
        onGenerateImage: C(B),
        onToggleTable: ye,
        onToggleLabels: pe,
        onToggleTooltip: ge,
        onToggleAnnotator: ne,
        style: ie({
          visibility: C(W) ? C(Y) ? "visible" : "hidden" : "visible"
        })
      }, Be({ _: 2 }, [
        t.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: F(() => [
            w(t.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: F(() => [
            w(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: F(() => [
            w(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: F(() => [
            w(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: F(() => [
            w(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionLabels ? {
          name: "optionLabels",
          fn: F(() => [
            w(t.$slots, "optionLabels", {}, void 0, !0)
          ]),
          key: "5"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: F(({ toggleFullscreen: s, isFullscreen: y }) => [
            w(t.$slots, "optionFullscreen", X(j({ toggleFullscreen: s, isFullscreen: y })), void 0, !0)
          ]),
          key: "6"
        } : void 0,
        t.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: F(({ toggleAnnotator: s, isAnnotator: y }) => [
            w(t.$slots, "optionAnnotator", X(j({ toggleAnnotator: s, isAnnotator: y })), void 0, !0)
          ]),
          key: "7"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
      r.value ? (l(), c("svg", {
        key: 4,
        ref_key: "svgRef",
        ref: o,
        xmlns: C(Qe),
        viewBox: `${C(oe).x} ${C(oe).y} ${C(oe).width} ${C(oe).height}`,
        class: Ce({ "vue-data-ui-fullscreen--on": J.value, "vue-data-ui-fulscreen--off": !J.value }),
        style: ie(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
      }, [
        le(dt),
        t.$slots["chart-background"] ? (l(), c("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: L.value.width <= 0 ? 10 : L.value.width,
          height: L.value.height <= 0 ? 10 : L.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          w(t.$slots, "chart-background", {}, void 0, !0)
        ], 8, St)) : g("", !0),
        G("defs", null, [
          (l(!0), c(b, null, z(Object.keys(Se.value), (s) => (l(), c("radialGradient", {
            id: `gradient_${s}`,
            cx: "50%",
            cy: "30%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            G("stop", {
              offset: "0%",
              "stop-color": C(Je)(s, 0.5)
            }, null, 8, Ot),
            G("stop", {
              offset: "100%",
              "stop-color": s
            }, null, 8, Dt)
          ], 8, Et))), 256))
        ]),
        le(Ct, {
          dataset: N.value,
          color: e.value.style.chart.links.stroke,
          backgroundColor: e.value.style.chart.backgroundColor
        }, null, 8, ["dataset", "color", "backgroundColor"]),
        le(mt, {
          dataset: N.value,
          hoveredUid: Q.value,
          stroke: e.value.style.chart.nodes.stroke,
          strokeHovered: e.value.style.chart.nodes.strokeHovered,
          onClick: Ne,
          onHover: Oe
        }, {
          node: F(({ node: s }) => [
            w(t.$slots, "node", X(j({ node: s })), void 0, !0)
          ]),
          _: 3
        }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
        E.value.showDataLabels ? (l(), A($t, {
          key: 1,
          dataset: N.value,
          color: e.value.style.chart.color,
          hoveredUid: Q.value
        }, null, 8, ["dataset", "color", "hoveredUid"])) : g("", !0),
        w(t.$slots, "svg", { svg: L.value }, void 0, !0)
      ], 14, Lt)) : g("", !0),
      t.$slots.watermark ? (l(), c("div", Ut, [
        w(t.$slots, "watermark", X(j({ isPrinting: C(m) || C(P) })), void 0, !0)
      ])) : g("", !0),
      r.value ? g("", !0) : (l(), A(ut, {
        key: 6,
        config: {
          type: "molecule",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            molecule: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      t.$slots.source ? (l(), c("div", At, [
        w(t.$slots, "source", {}, void 0, !0)
      ], 512)) : g("", !0),
      le(it, {
        show: E.value.showTooltip && i.value,
        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
        color: e.value.style.chart.tooltip.color,
        borderRadius: e.value.style.chart.tooltip.borderRadius,
        borderColor: e.value.style.chart.tooltip.borderColor,
        borderWidth: e.value.style.chart.tooltip.borderWidth,
        fontSize: e.value.style.chart.tooltip.fontSize,
        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
        position: e.value.style.chart.tooltip.position,
        offsetY: e.value.style.chart.tooltip.offsetY,
        parent: D.value,
        content: x.value,
        isFullscreen: J.value,
        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
      }, {
        "tooltip-before": F(() => [
          w(t.$slots, "tooltip-before", X(j({ ...se.value })), void 0, !0)
        ]),
        "tooltip-after": F(() => [
          w(t.$slots, "tooltip-after", X(j({ ...se.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
      r.value ? (l(), A(ct, {
        key: 8,
        hideDetails: "",
        config: {
          open: E.value.showTable,
          maxHeight: 1e4,
          body: {
            backgroundColor: e.value.style.chart.backgroundColor,
            color: e.value.style.chart.color
          },
          head: {
            backgroundColor: e.value.style.chart.backgroundColor,
            color: e.value.style.chart.color
          }
        }
      }, {
        content: F(() => [
          (l(), A(rt, {
            key: `table_${q.value}`,
            colNames: V.value.colNames,
            head: V.value.head,
            body: V.value.body,
            config: V.value.config,
            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: u[0] || (u[0] = (s) => E.value.showTable = !1)
          }, {
            th: F(({ th: s }) => [
              G("div", {
                innerHTML: s,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, Rt)
            ]),
            td: F(({ td: s }) => [
              Ge(Pe(s.name || s), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"]))
        ]),
        _: 1
      }, 8, ["config"])) : g("", !0)
    ], 46, Pt));
  }
}, Qt = /* @__PURE__ */ yt(Nt, [["__scopeId", "data-v-9343d626"]]);
export {
  Qt as default
};
