vue-data-ui 3.17.13 → 3.18.1

package/dist/vue-ui-funnel-Pl2sEOZs.js

@@ -1,823 +0,0 @@
-import { useCssVars as rt, defineAsyncComponent as x, ref as c, shallowRef as Te, computed as v, onMounted as ut, onBeforeUnmount as it, watch as Oe, openBlock as n, createElementBlock as h, unref as s, normalizeStyle as O, normalizeClass as N, createBlock as F, withCtx as r, renderSlot as u, normalizeProps as C, guardReactiveProps as k, createCommentVNode as g, createSlots as _e, createVNode as Pe, createElementVNode as $, mergeProps as W, Fragment as q, renderList as Y, toDisplayString as E, resolveDynamicComponent as ct, createTextVNode as De, nextTick as ze } from "vue";
-import { j as vt, o as dt, q as Ie, r as ht, s as ft, x as bt, k as J, l as K, X as mt, W as gt, a2 as ne, a0 as pt, a1 as yt } from "./lib-DMzrGQHK.js";
-import { t as Ct, u as kt } from "./useResponsive-DfdjqQps.js";
-import { u as wt } from "./useConfig-CG4HT3wS.js";
-import { u as $t } from "./usePrinter-C4t8DdQ-.js";
-import { u as Lt } from "./useSvgExport-BTG4hVPO.js";
-import { u as re } from "./useNestedProp-DH0BEVVS.js";
-import { u as At } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as xt } from "./useUserOptionState-B7Ej974k.js";
-import { u as St } from "./useChartAccessibility-cp6XQtqi.js";
-import Tt from "./img-CjTQXS0U.js";
-import Ot from "./Title-BbKoiBk2.js";
-import _t from "./vue_ui_funnel-yuaMZ-yb.js";
-import { _ as Pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Dt = ["id"], zt = ["xmlns", "viewBox"], It = ["width", "height"], Nt = ["id"], Ft = ["stop-color"], Bt = ["stop-color"], Rt = ["stop-color"], Ut = ["stroke", "stroke-width"], Mt = ["stroke", "stroke-width"], Vt = ["x", "y", "font-size", "fill", "font-weight"], Et = ["points", "fill"], Gt = ["stroke", "stroke-width", "rx"], jt = ["x", "y", "font-size", "fill", "font-weight"], Ht = ["x", "y", "font-size", "fill", "font-weight"], Xt = {
-  key: 5,
-  class: "vue-data-ui-watermark"
-}, Wt = ["innerHTML"], qt = {
-  __name: "vue-ui-funnel",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["copyAlt"],
-  setup(Ne, { expose: Fe, emit: Be }) {
-    rt((t) => ({
-      v3170e5db: Ze.value
-    }));
-    const Re = x(() => import("./BaseIcon-DX0hTWa-.js")), Ue = x(() => import("./vue-ui-skeleton-YD6rZjY_.js")), Me = x(() => import("./vue-ui-accordion-DFtpH_16.js")), Ve = x(() => import("./DataTable-cMnb68Ik.js")), Ee = x(
-      () => import("./UserOptions-DVduN6X7.js")
-    ), Ge = x(
-      () => import("./PenAndPaper-CJDoB5H9.js")
-    ), je = x(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), He = x(
-      () => import("./BaseDraggableDialog-Di8Hlru3.js")
-    ), { vue_ui_funnel: Xe } = wt(), { isThemeValid: We, warnInvalidTheme: qe } = At(), p = Ne, Ye = Be, L = c(null), B = c(vt()), ue = c(0), ie = c(0), ce = c(0), ve = c(null), de = c(null), he = c(null), A = Te(null), _ = Te(null), S = c(!1), R = c(null), Q = c(null), G = c(!1), j = c(!1), P = v(() => !!p.dataset && p.dataset.length);
-    ut(fe);
-    function fe() {
-      if (dt(p.dataset) ? Ie({
-        componentName: "VueUiFunnel",
-        type: "dataset"
-      }) : p.dataset.forEach((t, l) => {
-        ht({
-          datasetObject: t,
-          requiredAttributes: ["name", "value"]
-        }).forEach((a) => {
-          P.value = !1, Ie({
-            componentName: "VueUiFunnel",
-            type: "datasetSerieAttribute",
-            property: a,
-            index: l
-          });
-        });
-      }), e.value.responsive) {
-        const t = Ct(() => {
-          const { width: l, height: a } = kt({
-            chart: L.value,
-            title: e.value.style.chart.title.text ? he.value : null,
-            source: de.value,
-            noTitle: ve.value
-          });
-          requestAnimationFrame(() => {
-            b.value.height = a, b.value.width = l, w.value = ke(), e.value.responsiveProportionalSizing ? (f.value.circles = ne({
-              relator: Math.min(l, a),
-              adjuster: 600,
-              source: e.value.style.chart.circles.dataLabels.fontSize,
-              threshold: 10,
-              fallback: 10
-            }), f.value.names = ne({
-              relator: Math.min(l, a),
-              adjuster: 600,
-              source: e.value.style.chart.bars.dataLabels.name.fontSize,
-              threshold: 10,
-              fallback: 10
-            }), f.value.values = ne({
-              relator: Math.min(l, a),
-              adjuster: 600,
-              source: e.value.style.chart.bars.dataLabels.value.fontSize,
-              threshold: 10,
-              fallback: 10
-            })) : (f.value.circles = e.value.style.chart.circles.dataLabels.fontSize, f.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, f.value.values = e.value.style.chart.bars.dataLabels.value.fontSize);
-          });
-        });
-        A.value && (_.value && A.value.unobserve(_.value), A.value.disconnect()), A.value = new ResizeObserver(t), _.value = L.value.parentNode, A.value.observe(_.value);
-      }
-    }
-    it(() => {
-      A.value && (_.value && A.value.unobserve(_.value), A.value.disconnect());
-    });
-    function be() {
-      const t = re({
-        userConfig: p.config,
-        defaultConfig: Xe
-      }), l = t.theme;
-      if (!l) return t;
-      if (!We.value(t))
-        return qe(t), t;
-      const a = re({
-        userConfig: _t[l] || p.config,
-        defaultConfig: t
-      });
-      return re({
-        userConfig: p.config,
-        defaultConfig: a
-      });
-    }
-    const e = v({
-      get: () => be(),
-      set: (t) => t
-    }), me = v(
-      () => e.value.userOptions.useCursorPointer
-    ), { userOptionsVisible: Z, setUserOptionsVisibility: ge, keepUserOptionState: pe } = xt({ config: e.value }), { svgRef: ee } = St({
-      config: e.value.style.chart.title
-    });
-    Oe(
-      () => p.config,
-      (t) => {
-        e.value = be(), Z.value = !e.value.userOptions.showOnChartHover, fe(), ie.value += 1, ce.value += 1, f.value.circles = e.value.style.chart.circles.dataLabels.fontSize, f.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, f.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, D.value.showTable = e.value.table.show;
-      },
-      { deep: !0 }
-    );
-    const { isPrinting: te, isImaging: ae, generatePdf: ye, generateImage: Ce } = $t({
-      elementId: `funnel_${B.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-funnel",
-      options: e.value.userOptions.print
-    }), Je = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), D = c({
-      showTable: e.value.table.show
-    }), f = c({
-      circles: e.value.style.chart.circles.dataLabels.fontSize,
-      names: e.value.style.chart.bars.dataLabels.name.fontSize,
-      values: e.value.style.chart.bars.dataLabels.value.fontSize
-    }), b = v({
-      get: () => ({
-        height: e.value.style.chart.height,
-        width: e.value.style.chart.width
-      }),
-      set: (t) => t
-    }), y = v(() => P.value ? p.dataset.map((t, l) => ({
-      ...t,
-      color: t.color ? ft(t.color) : bt(
-        e.value.style.chart.bars.defaultColor,
-        l / p.dataset.length
-      )
-    })) : []);
-    setTimeout(() => {
-      S.value = !0;
-    }, y.value.length * 150);
-    function ke() {
-      const t = e.value.style.chart.padding.left, l = e.value.style.chart.padding.top;
-      return {
-        left: t,
-        top: l,
-        right: b.value.width - e.value.style.chart.padding.right,
-        bottom: b.value.height - e.value.style.chart.padding.bottom,
-        width: b.value.width - t - e.value.style.chart.padding.right,
-        height: b.value.height - l - e.value.style.chart.padding.bottom
-      };
-    }
-    const w = c(ke()), z = v(() => w.value.height / p.dataset.length), T = v(() => z.value * e.value.style.chart.bars.gapRatio), we = v(() => w.value.width * e.value.style.chart.barCircleSpacingRatio), i = v(() => y.value.map((t, l) => {
-      const a = z.value - T.value, o = w.value.top + T.value / 2 * l + (z.value - T.value / 2) * l + T.value / 2, m = t.value / y.value[0].value, d = (w.value.width - a - we.value) * (t.value / y.value[0].value);
-      return {
-        ...t,
-        cx: w.value.left + a / 2,
-        cy: o + a / 2,
-        datapointIndex: l,
-        fill: t.color,
-        height: Math.max(a, 0),
-        proportion: m,
-        r: Math.max(a / 2, 0),
-        width: Math.max(d, 0),
-        x: w.value.left + a + we.value,
-        y: o
-      };
-    })), Ke = v(() => {
-      const t = i.value.map((l) => `${l.x + l.width},${l.y + (z.value - T.value) / 2}`);
-      return `${i.value[0].x},${i.value[0].y + (z.value - T.value) / 2} ${t.toString()} ${i.value.at(-1).x},${i.value.at(-1).y + (z.value - T.value) / 2}`;
-    }), Qe = v(() => ({
-      x1: i.value[0].cx,
-      y1: i.value[0].cy,
-      x2: i.value.at(-1).cx,
-      y2: i.value.at(-1).cy
-    })), I = c(!1);
-    function $e(t) {
-      I.value = t, ue.value += 1;
-    }
-    const Ze = v(() => `${y.value.length * 150}ms`), H = c(!1);
-    function le() {
-      H.value = !H.value;
-    }
-    function Le() {
-      D.value.showTable = !D.value.showTable;
-    }
-    const U = v(() => {
-      const t = y.value.map((a) => ({
-        name: a.name,
-        color: a.color
-      })), l = y.value.map((a) => a.value);
-      return { head: t, body: l };
-    }), X = v(() => {
-      const t = [
-        e.value.table.columnNames.series,
-        e.value.table.columnNames.value,
-        e.value.table.columnNames.percentage
-      ], l = U.value.head.map((m, d) => {
-        const V = J(
-          e.value.style.chart.bars.dataLabels.value.formatter,
-          U.value.body[d],
-          K({
-            p: e.value.style.chart.bars.dataLabels.value.prefix,
-            v: U.value.body[d],
-            s: e.value.style.chart.bars.dataLabels.value.suffix,
-            r: e.value.table.td.roundingValue
-          }),
-          { datapoint: i.value[d] }
-        ), se = J(
-          e.value.style.chart.circles.dataLabels.formatter,
-          i.value[d].proportion * 100,
-          K({
-            v: i.value[d].proportion * 100,
-            s: "%",
-            r: e.value.table.td.roundingPercentage
-          }),
-          { datapoint: i.value[d] }
-        );
-        return [{ color: m.color, name: m.name }, V, se];
-      }), a = {
-        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
-      };
-      return {
-        colNames: [
-          e.value.table.columnNames.series,
-          e.value.table.columnNames.value,
-          e.value.table.columnNames.percentage
-        ],
-        head: t,
-        body: l,
-        config: a
-      };
-    });
-    function oe(t = null) {
-      ze(() => {
-        const l = U.value.head.map((m, d) => [
-          [m.name],
-          [U.value.body[d]],
-          [i.value[d].proportion * 100]
-        ]), a = [
-          [e.value.style.chart.title.text],
-          [e.value.style.chart.title.subtitle.text],
-          [
-            [e.value.table.columnNames.series],
-            [e.value.table.columnNames.value],
-            ["%"]
-          ]
-        ].concat(l), o = pt(a);
-        t ? t(o) : yt({
-          csvContent: o,
-          title: e.value.style.chart.title.text || "vue-ui-funnel"
-        });
-      });
-    }
-    function et() {
-      return y.value;
-    }
-    async function tt({ scale: t = 2 } = {}) {
-      if (!L.value) return;
-      const { width: l, height: a } = L.value.getBoundingClientRect(), o = l / a, { imageUri: m, base64: d } = await Tt({
-        domElement: L.value,
-        base64: !0,
-        img: !0,
-        scale: t
-      });
-      return {
-        imageUri: m,
-        base64: d,
-        title: e.value.style.chart.title.text,
-        width: l,
-        height: a,
-        aspectRatio: o
-      };
-    }
-    const M = v(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, l = D.value.showTable;
-      return {
-        component: t ? He : Me,
-        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: I.value,
-          fullscreenParent: L.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
-            }
-          }
-        }
-      };
-    });
-    Oe(
-      () => D.value.showTable,
-      (t) => {
-        e.value.table.show || (t && e.value.table.useDialog && R.value ? R.value.open() : "close" in R.value && R.value.close());
-      }
-    );
-    function Ae() {
-      D.value.showTable = !1, Q.value && Q.value.setTableIconState(!1);
-    }
-    const at = v(() => e.value.style.chart.backgroundColor), lt = v(() => e.value.style.chart.title), { exportSvg: ot, getSvg: st } = Lt({
-      svg: ee,
-      title: lt,
-      backgroundColor: at
-    });
-    async function xe({ isCb: t }) {
-      j.value = !0, await ze();
-      try {
-        if (t) {
-          const { blob: l, url: a, text: o, dataUrl: m } = await st();
-          await Promise.resolve(
-            e.value.userOptions.callbacks.svg({
-              blob: l,
-              url: a,
-              text: o,
-              dataUrl: m
-            })
-          );
-        } else
-          await Promise.resolve(ot());
-      } finally {
-        j.value = !1;
-      }
-    }
-    function nt(t) {
-      if (t?.stage === "start") {
-        G.value = !0;
-        return;
-      }
-      if (t?.stage === "end") {
-        G.value = !1;
-        return;
-      }
-      Ce();
-    }
-    async function Se() {
-      if (Ye("copyAlt", {
-        config: e.value,
-        dataset: y.value
-      }), !e.value.userOptions.callbacks.altCopy) {
-        console.warn(
-          "Vue Data UI - A callback must be set for `altCopy` in userOptions."
-        );
-        return;
-      }
-      await Promise.resolve(
-        e.value.userOptions.callbacks.altCopy({
-          config: e.value,
-          dataset: y.value
-        })
-      );
-    }
-    return Fe({
-      getData: et,
-      getImage: tt,
-      generatePdf: ye,
-      generateCsv: oe,
-      generateImage: Ce,
-      generateSvg: xe,
-      toggleTable: Le,
-      toggleAnnotator: le,
-      toggleFullscreen: $e,
-      copyAlt: Se
-    }), (t, l) => (n(), h("div", {
-      ref_key: "funnelChart",
-      ref: L,
-      class: N(`vue-data-ui-component vue-ui-funnel ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: O(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `funnel_${B.value}`,
-      onMouseenter: l[1] || (l[1] = () => s(ge)(!0)),
-      onMouseleave: l[2] || (l[2] = () => s(ge)(!1))
-    }, [
-      e.value.userOptions.buttons.annotator ? (n(), F(s(Ge), {
-        key: 0,
-        svgRef: s(ee),
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        active: H.value,
-        isCursorPointer: me.value,
-        onClose: le
-      }, {
-        "annotator-action-close": r(() => [
-          u(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": r(({ color: a }) => [
-          u(t.$slots, "annotator-action-color", C(k({ color: a })), void 0, !0)
-        ]),
-        "annotator-action-draw": r(({ mode: a }) => [
-          u(t.$slots, "annotator-action-draw", C(k({ mode: a })), void 0, !0)
-        ]),
-        "annotator-action-undo": r(({ disabled: a }) => [
-          u(t.$slots, "annotator-action-undo", C(k({ disabled: a })), void 0, !0)
-        ]),
-        "annotator-action-redo": r(({ disabled: a }) => [
-          u(t.$slots, "annotator-action-redo", C(k({ disabled: a })), void 0, !0)
-        ]),
-        "annotator-action-delete": r(({ disabled: a }) => [
-          u(t.$slots, "annotator-action-delete", C(k({ disabled: a })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : g("", !0),
-      Je.value ? (n(), h("div", {
-        key: 1,
-        ref_key: "noTitle",
-        ref: ve,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : g("", !0),
-      e.value.style.chart.title.text ? (n(), h("div", {
-        key: 2,
-        ref_key: "chartTitle",
-        ref: he,
-        style: "width:100%;background:transparent;padding-bottom:24px"
-      }, [
-        (n(), F(Ot, {
-          key: `title_${ie.value}`,
-          config: {
-            title: {
-              cy: "funnel-div-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "funnel-div-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"]))
-      ], 512)) : g("", !0),
-      e.value.userOptions.show && P.value && (s(pe) || s(Z)) ? (n(), F(s(Ee), {
-        ref_key: "userOptionsRef",
-        ref: Q,
-        key: `user_option_${ue.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: s(te),
-        isImaging: s(ae),
-        uid: B.value,
-        hasTooltip: !1,
-        hasPdf: e.value.userOptions.buttons.pdf,
-        hasImg: e.value.userOptions.buttons.img,
-        hasSvg: e.value.userOptions.buttons.svg,
-        hasXls: e.value.userOptions.buttons.csv,
-        hasTable: e.value.userOptions.buttons.table,
-        hasLabel: !1,
-        hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        hasAltCopy: e.value.userOptions.buttons.altCopy,
-        isFullscreen: I.value,
-        chartElement: L.value,
-        position: e.value.userOptions.position,
-        titles: { ...e.value.userOptions.buttonTitles },
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: H.value,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        isCursorPointer: me.value,
-        onToggleAnnotator: le,
-        onToggleFullscreen: $e,
-        onGeneratePdf: s(ye),
-        onGenerateImage: nt,
-        onGenerateSvg: xe,
-        onToggleTable: Le,
-        onGenerateCsv: oe,
-        onCopyAlt: Se,
-        style: O({
-          visibility: s(pe) ? s(Z) ? "visible" : "hidden" : "visible"
-        })
-      }, _e({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: r(({ isOpen: a, color: o }) => [
-            u(t.$slots, "menuIcon", C(k({ isOpen: a, color: o })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: r(() => [
-            u(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: r(() => [
-            u(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: r(() => [
-            u(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: r(() => [
-            u(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: r(() => [
-            u(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: r(({ toggleFullscreen: a, isFullscreen: o }) => [
-            u(t.$slots, "optionFullscreen", C(k({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: r(({ toggleAnnotator: a, isAnnotator: o }) => [
-            u(t.$slots, "optionAnnotator", C(k({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionAltCopy ? {
-          name: "optionAltCopy",
-          fn: r(({ altCopy: a }) => [
-            u(t.$slots, "optionAltCopy", C(k({ altCopy: a })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : g("", !0),
-      P.value ? (n(), h("svg", {
-        key: 4,
-        ref_key: "svgRef",
-        ref: ee,
-        xmlns: s(mt),
-        class: N({
-          "vue-data-ui-fullscreen--on": I.value,
-          "vue-data-ui-fulscreen--off": !I.value
-        }),
-        viewBox: `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`,
-        style: O(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
-      }, [
-        Pe(s(je)),
-        t.$slots["chart-background"] ? (n(), h("foreignObject", {
-          key: 0,
-          x: 0,
-          y: 0,
-          width: b.value.width <= 0 ? 10 : b.value.width,
-          height: b.value.height <= 0 ? 10 : b.value.height,
-          style: {
-            pointerEvents: "none"
-          }
-        }, [
-          u(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, It)) : g("", !0),
-        $("defs", null, [
-          $("linearGradient", {
-            id: `funnel_area_${B.value}`,
-            x1: "0%",
-            x2: "100%",
-            y1: "0%",
-            y2: "0%"
-          }, [
-            $("stop", {
-              offset: "0%",
-              "stop-color": e.value.style.chart.backgroundColor,
-              "stop-opacity": 0
-            }, null, 8, Ft),
-            $("stop", {
-              offset: "20%",
-              "stop-color": e.value.style.chart.area.color
-            }, null, 8, Bt),
-            $("stop", {
-              offset: "100%",
-              "stop-color": e.value.style.chart.area.color
-            }, null, 8, Rt)
-          ], 8, Nt)
-        ]),
-        e.value.style.chart.circleLinks.show ? (n(), h("line", W({ key: 1 }, Qe.value, {
-          stroke: e.value.style.chart.circleLinks.color,
-          "stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
-          "stroke-linecap": "round",
-          class: {
-            animated: e.value.useCssAnimation
-          },
-          style: {
-            strokeDasharray: e.value.useCssAnimation ? w.value.height : 0,
-            strokeDashoffset: e.value.useCssAnimation ? w.value.height : 0
-          }
-        }), null, 16, Ut)) : g("", !0),
-        (n(!0), h(q, null, Y(i.value, ({ cx: a, cy: o, r: m, fill: d }, V) => (n(), h("circle", W({ ref_for: !0 }, { cx: a, cy: o, r: m, fill: d }, {
-          stroke: e.value.style.chart.circles.stroke,
-          "stroke-width": e.value.style.chart.circles.strokeWidth,
-          class: {
-            animated: e.value.useCssAnimation && !S.value
-          },
-          style: {
-            animationDelay: `${150 * V}ms`
-          }
-        }), null, 16, Mt))), 256)),
-        (n(!0), h(q, null, Y(i.value, (a, o) => (n(), h("text", {
-          x: a.cx,
-          y: a.cy + f.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
-          "text-anchor": "middle",
-          "font-size": f.value.circles,
-          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(gt)(a.color) : e.value.style.chart.circles.dataLabels.color,
-          "font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
-          class: N({
-            animated: e.value.useCssAnimation && !S.value
-          }),
-          style: O({
-            animationDelay: `${150 * o}ms`
-          })
-        }, E(s(J)(
-          e.value.style.chart.circles.dataLabels.formatter,
-          a.proportion * 100,
-          s(K)({
-            v: a.proportion * 100,
-            s: "%",
-            r: e.value.style.chart.circles.dataLabels.rounding
-          }),
-          { datapoint: a }
-        )), 15, Vt))), 256)),
-        e.value.style.chart.area.show ? (n(), h("polygon", {
-          key: 2,
-          points: Ke.value,
-          fill: `url(#funnel_area_${B.value})`,
-          class: N({
-            animated: e.value.useCssAnimation && !S.value
-          }),
-          style: O({
-            transition: e.value.useCssAnimation ? `all ${150 * y.value.length}ms ease-in` : "none"
-          })
-        }, null, 14, Et)) : g("", !0),
-        (n(!0), h(q, null, Y(i.value, ({ x: a, y: o, height: m, width: d, fill: V }, se) => (n(), h("rect", W({ ref_for: !0 }, { x: a, y: o, height: m, width: d, fill: V }, {
-          stroke: e.value.style.chart.bars.stroke,
-          "stroke-width": e.value.style.chart.bars.strokeWidth,
-          rx: e.value.style.chart.bars.borderRadius,
-          class: {
-            animated: e.value.useCssAnimation && !S.value
-          },
-          style: {
-            animationDelay: `${150 * se}ms`
-          }
-        }), null, 16, Gt))), 256)),
-        (n(!0), h(q, null, Y(i.value, (a, o) => (n(), h("g", null, [
-          $("text", {
-            x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
-            y: a.cy - f.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
-            "text-anchor": "start",
-            "font-size": f.value.names,
-            fill: e.value.style.chart.bars.dataLabels.name.color,
-            "font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
-            class: N({
-              animated: e.value.useCssAnimation && !S.value
-            }),
-            style: O({
-              animationDelay: `${150 * o}ms`
-            })
-          }, E(a.name), 15, jt),
-          $("text", {
-            x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
-            y: a.cy + f.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
-            "text-anchor": "start",
-            "font-size": f.value.values,
-            fill: e.value.style.chart.bars.dataLabels.value.color,
-            "font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
-            class: N({
-              animated: e.value.useCssAnimation && !S.value
-            }),
-            style: O({
-              animationDelay: `${150 * o}ms`
-            })
-          }, E(s(J)(
-            e.value.style.chart.bars.dataLabels.value.formatter,
-            a.value,
-            s(K)({
-              p: e.value.style.chart.bars.dataLabels.value.prefix,
-              v: a.value,
-              s: e.value.style.chart.bars.dataLabels.value.suffix,
-              r: e.value.style.chart.bars.dataLabels.value.rounding
-            }),
-            { datapoint: a }
-          )), 15, Ht)
-        ]))), 256)),
-        u(t.$slots, "svg", {
-          svg: {
-            ...b.value,
-            isPrintingImg: s(te) | s(ae) | G.value,
-            isPrintingSvg: j.value
-          }
-        }, void 0, !0)
-      ], 14, zt)) : g("", !0),
-      t.$slots.watermark ? (n(), h("div", Xt, [
-        u(t.$slots, "watermark", C(k({
-          isPrinting: s(te) || s(ae) || G.value || j.value
-        })), void 0, !0)
-      ])) : g("", !0),
-      P.value ? g("", !0) : (n(), F(s(Ue), {
-        key: 6,
-        config: {
-          type: "verticalBar",
-          style: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            verticalBar: {
-              axis: {
-                color: "#CCCCCC"
-              },
-              color: "#CCCCCC"
-            }
-          }
-        }
-      }, null, 8, ["config"])),
-      t.$slots.source ? (n(), h("div", {
-        key: 7,
-        ref_key: "source",
-        ref: de,
-        dir: "auto"
-      }, [
-        u(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : g("", !0),
-      P.value && e.value.userOptions.buttons.table ? (n(), F(ct(M.value.component), W({ key: 8 }, M.value.props, {
-        ref_key: "tableUnit",
-        ref: R,
-        onClose: Ae
-      }), _e({
-        content: r(() => [
-          (n(), F(s(Ve), {
-            key: `table_${ce.value}`,
-            colNames: X.value.colNames,
-            head: X.value.head,
-            body: X.value.body,
-            config: X.value.config,
-            title: e.value.table.useDialog ? "" : M.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            onClose: Ae
-          }, {
-            th: r(({ th: a }) => [
-              $("div", {
-                innerHTML: a,
-                style: { display: "flex", "align-items": "center" }
-              }, null, 8, Wt)
-            ]),
-            td: r(({ td: a }) => [
-              De(E(a.name ? a.name : a), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: r(() => [
-            De(E(M.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: r(() => [
-            $("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: l[0] || (l[0] = (a) => oe(e.value.userOptions.callbacks.csv))
-            }, [
-              Pe(s(Re), {
-                name: "fileCsv",
-                stroke: M.value.props.color
-              }, null, 8, ["stroke"])
-            ])
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : g("", !0)
-    ], 46, Dt));
-  }
-}, ia = /* @__PURE__ */ Pt(qt, [["__scopeId", "data-v-d310d5f9"]]);
-export {
-  ia as default
-};