vue-data-ui 3.0.22 → 3.1.0

package/dist/vue-ui-molecule-Dlu0hjSg.js

@@ -0,0 +1,702 @@
+import { useCssVars as dt, defineAsyncComponent as p, computed as b, onMounted as pt, ref as r, toRefs as ht, watch as R, nextTick as U, createElementBlock as C, openBlock as u, unref as a, normalizeStyle as M, normalizeClass as $e, createBlock as w, createCommentVNode as g, createVNode as I, createSlots as Te, withCtx as c, renderSlot as v, normalizeProps as $, guardReactiveProps as T, createElementVNode as D, Fragment as ft, renderList as mt, resolveDynamicComponent as gt, mergeProps as bt, createTextVNode as _e, toDisplayString as Oe } from "vue";
+import { u as Ct, o as yt, f as At, c as Pe, t as kt, a as wt, p as Ie, b as $t, d as Tt, Q as _t, X as Ot, l as Pt, R as It, e as De, v as Dt, w as Ft, y as Nt, z as Lt } from "./index-CDQbCd41.js";
+import { u as St, B as Bt } from "./BaseScanner-BgWxam9d.js";
+import { u as xt } from "./usePrinter-Bnl1YeUU.js";
+import { u as Fe } from "./useNestedProp-BPEHGiYX.js";
+import { u as Et } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Rt } from "./useChartAccessibility-9icAAmYg.js";
+import Ut from "./img-JOqdlnUs.js";
+import { u as Mt } from "./usePanZoom-BVca3eMk.js";
+import { _ as zt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ht = ["id"], Vt = {
+  key: 1,
+  ref: "noTitle",
+  class: "vue-data-ui-no-title-space",
+  style: "height:36px; width: 100%;background:transparent"
+}, Gt = {
+  key: 2,
+  style: "width:100%;background:transparent;"
+}, Wt = ["xmlns", "viewBox"], Xt = ["width", "height"], jt = ["id"], Yt = ["stop-color"], Zt = ["stop-color"], Qt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, qt = {
+  key: 5,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, Jt = {
+  key: 6,
+  ref: "source",
+  dir: "auto"
+}, Kt = ["innerHTML"], eo = {
+  __name: "vue-ui-molecule",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectNode"],
+  setup(Ne, { expose: Le, emit: Se }) {
+    dt((t) => ({
+      "4eb94a90": t.slicerColor
+    }));
+    const Be = p(() => import("./Title-Dq2_Z9kR.js")), xe = p(() => import("./Tooltip-Y219DXZO.js")), ee = p(() => import("./BaseIcon-DHtro8us.js")), Ee = p(() => import("./vue-ui-accordion-Bf_LHFFX.js")), Re = p(() => import("./DataTable-DJjA2_wf.js")), Ue = p(() => import("./PenAndPaper-B7QEDgx4.js")), Me = p(() => import("./UserOptions-BuGfCdAY.js")), ze = p(() => import("./PackageVersion-DU12WH3O.js")), He = p(() => import("./RecursiveLinks-00zGWPf9.js")), Ve = p(() => import("./RecursiveLabels-Bgcv0pzu.js")), Ge = p(() => import("./RecursiveCircles-BcLb1aRS.js")), We = p(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_molecule: Xe } = Ct(), A = Ne, je = Se, te = b(() => !!A.dataset && A.dataset.length);
+    pt(() => {
+      oe();
+    });
+    const Ye = b(() => e.value.debug);
+    function oe() {
+      yt(A.dataset) && At({
+        componentName: "VueUiMolecule",
+        type: "dataset",
+        debug: Ye.value
+      });
+    }
+    const z = r(Pe()), Ze = r(null), H = r(!1), B = r(""), k = r(null), le = r(0), ae = r(0), se = r(0), F = r(null), e = r(j()), { loading: V, FINAL_DATASET: G } = St({
+      ...ht(A),
+      FINAL_CONFIG: e,
+      prepareConfig: j,
+      skeletonDataset: [
+        {
+          name: "_",
+          color: "#CACACA",
+          nodes: [
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] }
+          ]
+        }
+      ],
+      skeletonConfig: kt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              nodes: { stroke: "#6A6A6A" },
+              links: { stroke: "#6A6A6A80" }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: W, setUserOptionsVisibility: ne, keepUserOptionState: re } = Et({ config: e.value }), { svgRef: X } = Rt({ config: e.value.style.chart.title });
+    function j() {
+      const t = Fe({
+        userConfig: A.config,
+        defaultConfig: Xe
+      });
+      return t.theme ? {
+        ...Fe({
+          userConfig: $t.vue_ui_molecule[t.theme] || A.config,
+          defaultConfig: t
+        }),
+        customPalette: wt[t.theme] || Ie
+      } : t;
+    }
+    R(() => A.config, (t) => {
+      e.value = j(), W.value = !e.value.userOptions.showOnChartHover, oe(), ae.value += 1, se.value += 1, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const ie = r(0), Qe = () => {
+      ie.value += 1;
+    };
+    R([() => V.value, () => G.value], async ([t]) => {
+      t || (await U(), h.value = he(), await U(), Qe(), await U(), it({ x: 0, y: 0, width: 400, height: 400 }), q(!1));
+    }, { flush: "post", deep: !1 });
+    const { isPrinting: ue, isImaging: ce, generatePdf: ve, generateImage: de } = xt({
+      elementId: `cluster_${z.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-molecule",
+      options: e.value.userOptions.print
+    }), qe = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), Je = b(() => Tt(e.value.customPalette)), d = r({
+      showTable: e.value.table.show,
+      showDataLabels: !0,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    R(e, () => {
+      d.value = {
+        showTable: e.value.table.show,
+        showDataLabels: !0,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    function pe(t, l = 0) {
+      return Array.isArray(t) && t.length > 0 && t[0].nodes ? pe(t[0].nodes, l + 1) : l;
+    }
+    function he() {
+      const t = pe(G.value);
+      let l = 100, o = l;
+      for (let n = 0; n < t; n += 1)
+        l /= 1, o += l;
+      return {
+        height: o,
+        width: o
+      };
+    }
+    const h = r(he());
+    function fe(t, l = { x: -h.value.width / 2.43, y: h.value.height / 2 }, o = h.value.width / 1.1, n = 24, s = 0, i = 0, f = "#BBBBBB", J = 0) {
+      if (!Array.isArray(t) || t.length === 0) return t;
+      const vt = It({
+        plot: l,
+        radius: o,
+        sides: t.length,
+        rotation: s
+      });
+      return t.forEach((m, Ae) => {
+        const ke = vt.coordinates[Ae], we = m.color ? (() => {
+          let K = De(m.color);
+          return K.startsWith("#") ? K : `#${K}`;
+        })() : null;
+        let P;
+        we ? P = we : J === 0 ? P = f : J === 1 ? (P = Je.value[i] || Ie[i] || f, i += 1) : P = f, m.polygonPath = { coordinates: [ke] }, m.circleRadius = n, m.color = P, m.uid = Pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = fe(
+          m.nodes,
+          ke,
+          o / 2.9,
+          n / 2.2,
+          s + Math.PI * Ae / m.nodes.length,
+          i,
+          P,
+          J + 1
+        ));
+      }), t;
+    }
+    function Ke(t) {
+      const l = /* @__PURE__ */ new Set();
+      function o(s) {
+        s.forEach((i) => {
+          if (!i.color) return;
+          let f = i.color;
+          /^#?[0-9A-F]{6}$/i.test(f) || (f = De(f)), f.startsWith("#") || (f = `#${f}`), l.add(f), Array.isArray(i.nodes) && i.nodes.length && o(i.nodes);
+        });
+      }
+      o(t);
+      const n = {};
+      return Array.from(l).forEach((s) => {
+        const i = s.slice(1);
+        n[s] = `gradient_${i}`;
+      }), n;
+    }
+    const et = b(() => Ke(y.value)), y = b(() => {
+      const t = _t(G.value);
+      return fe(t);
+    }), Y = r(null);
+    function tt(t) {
+      Y.value = {
+        datapoint: t,
+        seriesIndex: -1,
+        series: y.value,
+        config: e.value
+      };
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Nt(l) && Lt(() => l({
+        seriesIndex: -1,
+        datapoint: t,
+        series: y.value,
+        config: e.value
+      })))
+        B.value = l({
+          seriesIndex: -1,
+          // well, ok
+          datapoint: t,
+          series: y.value,
+          config: e.value
+        });
+      else {
+        let o = "";
+        o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (o += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), B.value = `<div style="font-family:inherit">${o}</div>`;
+      }
+    }
+    const x = r(null), N = r(null), me = r(null);
+    function ot(t) {
+      me.value = x.value, x.value = t, t ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: me.value || x.value, seriesIndex: -1 }), t ? (H.value = !0, tt(t), N.value = t.uid) : (H.value = !1, B.value = "", N.value = null);
+    }
+    function lt(t) {
+      const l = [];
+      function o(n) {
+        n.forEach((s) => {
+          const i = {
+            name: s.name,
+            details: s.details || "-",
+            ancestor: s.ancestor && s.ancestor.name || "-",
+            color: s.color || ""
+          };
+          l.push(i), s.nodes && s.nodes.length > 0 && o(s.nodes, s.name);
+        });
+      }
+      return o(t), l;
+    }
+    const at = b(() => lt(y.value)), _ = b(() => {
+      const t = [
+        e.value.table.translations.nodeName,
+        e.value.table.translations.details,
+        e.value.table.translations.ancestor
+      ], l = at.value.map((s, i) => [
+        {
+          color: s.color,
+          name: s.name
+        },
+        s.details,
+        s.ancestor || ""
+      ]), o = {
+        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
+      }, n = [
+        e.value.table.translations.nodeName,
+        e.value.table.translations.details,
+        e.value.table.translations.ancestor
+      ];
+      return {
+        head: t,
+        body: l,
+        config: o,
+        colNames: n
+      };
+    });
+    function Z(t = null) {
+      U(() => {
+        const l = _.value.body.map((s, i) => [[s[0].name], [s[1]], [s[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[..._.value.head]]].concat(l), n = Dt(o);
+        t ? t(n) : Ft({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      });
+    }
+    function st() {
+      return y.value;
+    }
+    const O = r(!1);
+    function ge(t) {
+      O.value = t, le.value += 1;
+    }
+    function be() {
+      d.value.showTable = !d.value.showTable;
+    }
+    function Ce() {
+      d.value.showDataLabels = !d.value.showDataLabels;
+    }
+    function ye() {
+      d.value.showTooltip = !d.value.showTooltip;
+    }
+    const L = r(!1);
+    function Q() {
+      L.value = !L.value;
+    }
+    const nt = b(() => !L.value), { viewBox: E, resetZoom: q, isZoom: rt, setInitialViewBox: it } = Mt(X, {
+      x: 0,
+      y: 0,
+      width: Math.max(10, h.value.width),
+      height: Math.max(10, h.value.height)
+    }, e.value.style.chart.zoom.speed, nt);
+    function ut(t) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: -1 }), je("selectNode", t);
+    }
+    async function ct({ scale: t = 2 } = {}) {
+      if (!k.value) return;
+      const { width: l, height: o } = k.value.getBoundingClientRect(), n = l / o, { imageUri: s, base64: i } = await Ut({ domElement: k.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: s,
+        base64: i,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: o,
+        aspectRatio: n
+      };
+    }
+    const S = b(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = d.value.showTable;
+      return {
+        component: t ? We : Ee,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: O.value,
+          fullscreenParent: k.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            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
+            }
+          }
+        }
+      };
+    });
+    return R(() => d.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && F.value ? F.value.open() : "close" in F.value && F.value.close());
+    }), Le({
+      getData: st,
+      getImage: ct,
+      generatePdf: ve,
+      generateCsv: Z,
+      generateImage: de,
+      toggleTable: be,
+      toggleLabels: Ce,
+      toggleTooltip: ye,
+      toggleAnnotator: Q,
+      toggleFullscreen: ge
+    }), (t, l) => (u(), C("div", {
+      ref_key: "moleculeChart",
+      ref: k,
+      class: $e(`vue-ui-molecule ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: M(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `cluster_${z.value}`,
+      onMouseleave: l[4] || (l[4] = (o) => {
+        x.value = null, N.value = null, a(ne)(!1);
+      }),
+      onMouseenter: l[5] || (l[5] = () => a(ne)(!0))
+    }, [
+      e.value.userOptions.buttons.annotator ? (u(), w(a(Ue), {
+        key: 0,
+        svgRef: a(X),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: L.value,
+        onClose: Q
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
+      qe.value ? (u(), C("div", Vt, null, 512)) : g("", !0),
+      e.value.style.chart.title.text ? (u(), C("div", Gt, [
+        (u(), w(a(Be), {
+          key: `title_${ae.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 && te.value && (a(re) || a(W)) ? (u(), w(a(Me), {
+        ref_key: "details",
+        ref: Ze,
+        key: `user_options_${le.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: a(ue),
+        isImaging: a(ce),
+        uid: z.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: d.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: k.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: L.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: ge,
+        onGeneratePdf: a(ve),
+        onGenerateCsv: Z,
+        onGenerateImage: a(de),
+        onToggleTable: be,
+        onToggleLabels: Ce,
+        onToggleTooltip: ye,
+        onToggleAnnotator: Q,
+        style: M({
+          visibility: a(re) ? a(W) ? "visible" : "hidden" : "visible"
+        })
+      }, Te({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: c(({ isOpen: o, color: n }) => [
+            v(t.$slots, "menuIcon", $(T({ isOpen: o, color: n })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: c(() => [
+            v(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: c(() => [
+            v(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: c(() => [
+            v(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: c(() => [
+            v(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: c(() => [
+            v(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: c(() => [
+            v(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: c(({ toggleFullscreen: o, isFullscreen: n }) => [
+            v(t.$slots, "optionFullscreen", $(T({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: c(({ toggleAnnotator: o, isAnnotator: n }) => [
+            v(t.$slots, "optionAnnotator", $(T({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
+      (u(), C("svg", {
+        ref_key: "svgRef",
+        ref: X,
+        key: `svg_${ie.value}`,
+        xmlns: a(Ot),
+        viewBox: `${a(E).x} ${a(E).y} ${a(E).width} ${a(E).height}`,
+        class: $e({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        style: M(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        I(a(ze)),
+        t.$slots["chart-background"] ? (u(), C("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: h.value.width <= 0 ? 10 : h.value.width,
+          height: h.value.height <= 0 ? 10 : h.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          v(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Xt)) : g("", !0),
+        D("defs", null, [
+          (u(!0), C(ft, null, mt(Object.keys(et.value), (o) => (u(), C("radialGradient", {
+            id: `gradient_${o}`,
+            cx: "50%",
+            cy: "30%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            D("stop", {
+              offset: "0%",
+              "stop-color": a(Pt)(o, 0.5)
+            }, null, 8, Yt),
+            D("stop", {
+              offset: "100%",
+              "stop-color": o
+            }, null, 8, Zt)
+          ], 8, jt))), 256))
+        ]),
+        I(a(He), {
+          dataset: y.value,
+          color: e.value.style.chart.links.stroke,
+          backgroundColor: e.value.style.chart.backgroundColor
+        }, null, 8, ["dataset", "color", "backgroundColor"]),
+        I(a(Ge), {
+          dataset: y.value,
+          hoveredUid: N.value,
+          stroke: e.value.style.chart.nodes.stroke,
+          strokeHovered: e.value.style.chart.nodes.strokeHovered,
+          onClick: ut,
+          onHover: ot
+        }, {
+          node: c(({ node: o }) => [
+            v(t.$slots, "node", $(T({ node: o })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
+        d.value.showDataLabels && !a(V) ? (u(), w(a(Ve), {
+          key: 1,
+          dataset: y.value,
+          color: e.value.style.chart.color,
+          hoveredUid: N.value
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : g("", !0),
+        v(t.$slots, "svg", { svg: h.value }, void 0, !0)
+      ], 14, Wt)),
+      t.$slots.watermark ? (u(), C("div", Qt, [
+        v(t.$slots, "watermark", $(T({ isPrinting: a(ue) || a(ce) })), void 0, !0)
+      ])) : g("", !0),
+      a(rt) ? (u(), C("div", qt, [
+        v(t.$slots, "reset-action", { reset: a(q) }, () => [
+          D("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: M({
+              background: e.value.style.chart.backgroundColor
+            }),
+            onClick: l[0] || (l[0] = (o) => a(q)(!0))
+          }, [
+            I(a(ee), {
+              name: "refresh",
+              stroke: e.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : g("", !0),
+      t.$slots.source ? (u(), C("div", Jt, [
+        v(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      I(a(xe), {
+        show: d.value.showTooltip && H.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: k.value,
+        content: B.value,
+        isFullscreen: O.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": c(() => [
+          v(t.$slots, "tooltip-before", $(T({ ...Y.value })), void 0, !0)
+        ]),
+        "tooltip-after": c(() => [
+          v(t.$slots, "tooltip-after", $(T({ ...Y.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      te.value ? (u(), w(gt(S.value.component), bt({ key: 7 }, S.value.props, {
+        ref_key: "tableUnit",
+        ref: F,
+        onClose: l[3] || (l[3] = (o) => d.value.showTable = !1)
+      }), Te({
+        content: c(() => [
+          (u(), w(a(Re), {
+            key: `table_${se.value}`,
+            colNames: _.value.colNames,
+            head: _.value.head,
+            body: _.value.body,
+            config: _.value.config,
+            title: e.value.table.useDialog ? "" : S.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: l[2] || (l[2] = (o) => d.value.showTable = !1)
+          }, {
+            th: c(({ th: o }) => [
+              D("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Kt)
+            ]),
+            td: c(({ td: o }) => [
+              _e(Oe(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: c(() => [
+            _e(Oe(S.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: c(() => [
+            D("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[1] || (l[1] = (o) => Z(e.value.userOptions.callbacks.csv))
+            }, [
+              I(a(ee), {
+                name: "excel",
+                stroke: S.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : g("", !0),
+      a(V) ? (u(), w(Bt, { key: 8 })) : g("", !0)
+    ], 46, Ht));
+  }
+}, vo = /* @__PURE__ */ zt(eo, [["__scopeId", "data-v-e1c0d48d"]]);
+export {
+  vo as default
+};