vue-data-ui 3.6.0 → 3.7.1

package/dist/vue-ui-funnel-3fRlMBzq.js

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