vue-data-ui 3.6.0 → 3.7.1

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

@@ -0,0 +1,743 @@
+import { useCssVars as rt, computed as v, defineAsyncComponent as F, ref as f, shallowRef as $e, onMounted as nt, onBeforeUnmount as ut, watch as Le, createElementBlock as d, openBlock as r, unref as s, normalizeStyle as x, normalizeClass as z, createBlock as N, createCommentVNode as m, withCtx as n, renderSlot as i, normalizeProps as k, guardReactiveProps as A, createSlots as Fe, createVNode as De, createElementVNode as w, mergeProps as H, Fragment as X, renderList as W, toDisplayString as V, resolveDynamicComponent as it, createTextVNode as _e, nextTick as ct } from "vue";
+import { c as vt, o as dt, g as xe, k as ft, l as ht, n as bt, a as Y, d as q, X as gt, w as mt, Y as ae, u as pt, q as yt } from "./lib-C5BH09_g.js";
+import { t as Ct, u as kt } from "./useResponsive-DfdjqQps.js";
+import { u as At, a as le } from "./useNestedProp-CWo6bftQ.js";
+import { u as wt } from "./usePrinter-DCJzEiS8.js";
+import { u as $t } from "./useSvgExport-DrjCWun4.js";
+import { u as Lt } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Dt } from "./useChartAccessibility-9icAAmYg.js";
+import _t from "./img-DUzJeMlr.js";
+import xt from "./Title-DfFUb9hd.js";
+import { _ as St } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", area: { color: "#3A3A3A" }, bars: { stroke: "#1A1A1A", dataLabels: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#3A3A3A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Te = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#FFF8E1", dataLabels: { name: { color: "#424242" }, value: { color: "#424242" } } }, circles: { stroke: "#FFF8E1" }, circleLinks: { color: "#D32F2F40" }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Oe = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#1E1E1E", dataLabels: { name: { color: "#BDBDBD" }, value: { color: "#BDBDBD" } } }, circles: { stroke: "#1E1E1E" }, circleLinks: { color: "#D32F2F60" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, Be = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", area: { color: "#66CC6620" }, bars: { defaultColor: "#66CC66", stroke: "#1A1A1A", dataLabels: { name: { color: "#99AA99" }, value: { color: "#99AA99" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#66CC6620" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ee = { table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", area: { color: "#8F837A20" }, bars: { defaultColor: "#8F837A", stroke: "#fbfafa", dataLabels: { name: { color: "#8A9892" }, value: { color: "#8A9892" } } }, circles: { stroke: "#fbfafa" }, circleLinks: { color: "#8F837A20" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, ze = { table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", area: { color: "#8A989230" }, bars: { defaultColor: "#61747E", stroke: "#50606C", dataLabels: { name: { color: "#50606C" }, value: { color: "#50606C" } } }, circles: { stroke: "#50606C" }, circleLinks: { color: "#8A989230" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ne = {
+  default: {},
+  dark: Se,
+  celebration: Te,
+  celebrationNight: Oe,
+  hack: Be,
+  zen: Ee,
+  concrete: ze
+}, na = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Te,
+  celebrationNight: Oe,
+  concrete: ze,
+  dark: Se,
+  default: Ne,
+  hack: Be,
+  zen: Ee
+}, Symbol.toStringTag, { value: "Module" })), Tt = ["id"], Ot = ["xmlns", "viewBox"], Bt = ["width", "height"], Et = ["id"], zt = ["stop-color"], Nt = ["stop-color"], Pt = ["stop-color"], It = ["stroke", "stroke-width"], Rt = ["stroke", "stroke-width"], Mt = ["x", "y", "font-size", "fill", "font-weight"], Ut = ["points", "fill"], Vt = ["stroke", "stroke-width", "rx"], jt = ["x", "y", "font-size", "fill", "font-weight"], Gt = ["x", "y", "font-size", "fill", "font-weight"], Ht = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Xt = ["innerHTML"], Wt = {
+  __name: "vue-ui-funnel",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(Pe, { expose: Ie }) {
+    rt((t) => ({
+      v1175b36b: Ze.value
+    }));
+    const Re = F(() => import("./BaseIcon-CofSxalQ.js")), Me = F(() => import("./vue-ui-skeleton-DdXq2gl1.js")), Ue = F(() => import("./vue-ui-accordion-DSdZUn2C.js")), Ve = F(() => import("./DataTable-CHaOCmsE.js")), je = F(() => import("./UserOptions-B3I-s3Lw.js")), Ge = F(() => import("./PenAndPaper-HCZQTkqi.js")), He = F(() => import("./PackageVersion-C82JCJOX.js")), Xe = F(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_funnel: We } = At(), { isThemeValid: Ye, warnInvalidTheme: qe } = Lt(), p = Pe, $ = f(null), P = f(vt()), oe = f(0), se = f(0), re = f(0), ne = f(null), ue = f(null), ie = f(null), L = $e(null), S = $e(null), D = f(!1), I = f(null), J = f(null), T = v(() => !!p.dataset && p.dataset.length);
+    nt(ce);
+    function ce() {
+      if (dt(p.dataset) ? xe({
+        componentName: "VueUiFunnel",
+        type: "dataset"
+      }) : p.dataset.forEach((t, l) => {
+        ft({
+          datasetObject: t,
+          requiredAttributes: ["name", "value"]
+        }).forEach((a) => {
+          T.value = !1, xe({
+            componentName: "VueUiFunnel",
+            type: "datasetSerieAttribute",
+            property: a,
+            index: l
+          });
+        });
+      }), e.value.responsive) {
+        const t = Ct(() => {
+          const { width: l, height: a } = kt({
+            chart: $.value,
+            title: e.value.style.chart.title.text ? ie.value : null,
+            source: ue.value,
+            noTitle: ne.value
+          });
+          requestAnimationFrame(() => {
+            b.value.height = a, b.value.width = l, C.value = pe(), e.value.responsiveProportionalSizing ? (h.value.circles = ae({
+              relator: Math.min(l, a),
+              adjuster: 600,
+              source: e.value.style.chart.circles.dataLabels.fontSize,
+              threshold: 10,
+              fallback: 10
+            }), h.value.names = ae({
+              relator: Math.min(l, a),
+              adjuster: 600,
+              source: e.value.style.chart.bars.dataLabels.name.fontSize,
+              threshold: 10,
+              fallback: 10
+            }), h.value.values = ae({
+              relator: Math.min(l, a),
+              adjuster: 600,
+              source: e.value.style.chart.bars.dataLabels.value.fontSize,
+              threshold: 10,
+              fallback: 10
+            })) : (h.value.circles = e.value.style.chart.circles.dataLabels.fontSize, h.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, h.value.values = e.value.style.chart.bars.dataLabels.value.fontSize);
+          });
+        });
+        L.value && (S.value && L.value.unobserve(S.value), L.value.disconnect()), L.value = new ResizeObserver(t), S.value = $.value.parentNode, L.value.observe(S.value);
+      }
+    }
+    ut(() => {
+      L.value && (S.value && L.value.unobserve(S.value), L.value.disconnect());
+    });
+    function ve() {
+      const t = le({
+        userConfig: p.config,
+        defaultConfig: We
+      }), l = t.theme;
+      if (!l) return t;
+      if (!Ye.value(t))
+        return qe(t), t;
+      const a = le({
+        userConfig: Ne[l] || p.config,
+        defaultConfig: t
+      });
+      return le({
+        userConfig: p.config,
+        defaultConfig: a
+      });
+    }
+    const e = v({
+      get: () => ve(),
+      set: (t) => t
+    }), { userOptionsVisible: K, setUserOptionsVisibility: de, keepUserOptionState: fe } = Ft({ config: e.value }), { svgRef: Q } = Dt({ config: e.value.style.chart.title });
+    Le(() => p.config, (t) => {
+      e.value = ve(), K.value = !e.value.userOptions.showOnChartHover, ce(), se.value += 1, re.value += 1, h.value.circles = e.value.style.chart.circles.dataLabels.fontSize, h.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, h.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, O.value.showTable = e.value.table.show;
+    }, { deep: !0 });
+    const { isPrinting: he, isImaging: be, generatePdf: ge, generateImage: me } = wt({
+      elementId: `funnel_${P.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), O = f({
+      showTable: e.value.table.show
+    }), h = f({
+      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(() => T.value ? p.dataset.map((t, l) => ({
+      ...t,
+      color: t.color ? ht(t.color) : bt(e.value.style.chart.bars.defaultColor, l / p.dataset.length)
+    })) : []);
+    setTimeout(() => {
+      D.value = !0;
+    }, y.value.length * 150);
+    function pe() {
+      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 C = f(pe()), B = v(() => C.value.height / p.dataset.length), _ = v(() => B.value * e.value.style.chart.bars.gapRatio), ye = v(() => C.value.width * e.value.style.chart.barCircleSpacingRatio), u = v(() => y.value.map((t, l) => {
+      const a = B.value - _.value, o = C.value.top + _.value / 2 * l + (B.value - _.value / 2) * l + _.value / 2, g = t.value / y.value[0].value, c = (C.value.width - a - ye.value) * (t.value / y.value[0].value);
+      return {
+        ...t,
+        cx: C.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: C.value.left + a + ye.value,
+        y: o
+      };
+    })), Ke = v(() => {
+      const t = u.value.map((l) => `${l.x + l.width},${l.y + (B.value - _.value) / 2}`);
+      return `${u.value[0].x},${u.value[0].y + (B.value - _.value) / 2} ${t.toString()} ${u.value.at(-1).x},${u.value.at(-1).y + (B.value - _.value) / 2}`;
+    }), Qe = v(() => ({
+      x1: u.value[0].cx,
+      y1: u.value[0].cy,
+      x2: u.value.at(-1).cx,
+      y2: u.value.at(-1).cy
+    })), E = f(!1);
+    function Ce(t) {
+      E.value = t, oe.value += 1;
+    }
+    const Ze = v(() => `${y.value.length * 150}ms`), j = f(!1);
+    function Z() {
+      j.value = !j.value;
+    }
+    function ke() {
+      O.value.showTable = !O.value.showTable;
+    }
+    const R = 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 };
+    }), G = v(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], l = R.value.head.map((g, c) => {
+        const U = Y(
+          e.value.style.chart.bars.dataLabels.value.formatter,
+          R.value.body[c],
+          q({
+            p: e.value.style.chart.bars.dataLabels.value.prefix,
+            v: R.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 },
+          U,
+          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) {
+      ct(() => {
+        const l = R.value.head.map((g, c) => [[
+          g.name
+        ], [R.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 = 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 (!$.value) return;
+      const { width: l, height: a } = $.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: c } = await _t({ domElement: $.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 M = v(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = O.value.showTable;
+      return {
+        component: t ? Xe : Ue,
+        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: E.value,
+          fullscreenParent: $.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(() => O.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && I.value ? I.value.open() : "close" in I.value && I.value.close());
+    });
+    function Ae() {
+      O.value.showTable = !1, J.value && J.value.setTableIconState(!1);
+    }
+    const at = v(() => e.value.style.chart.backgroundColor), lt = v(() => e.value.style.chart.title), { exportSvg: ot, getSvg: st } = $t({
+      svg: Q,
+      title: lt,
+      backgroundColor: at
+    });
+    async function we({ isCb: t }) {
+      if (t) {
+        const { blob: l, url: a, text: o, dataUrl: g } = await st();
+        e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: g });
+      } else
+        ot();
+    }
+    return Ie({
+      getData: et,
+      getImage: tt,
+      generatePdf: ge,
+      generateCsv: ee,
+      generateImage: me,
+      generateSvg: we,
+      toggleTable: ke,
+      toggleAnnotator: Z,
+      toggleFullscreen: Ce
+    }), (t, l) => (r(), d("div", {
+      ref_key: "funnelChart",
+      ref: $,
+      class: z(`vue-data-ui-component vue-ui-funnel ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: x(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `funnel_${P.value}`,
+      onMouseenter: l[1] || (l[1] = () => s(de)(!0)),
+      onMouseleave: l[2] || (l[2] = () => s(de)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), N(s(Ge), {
+        key: 0,
+        svgRef: s(Q),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: j.value,
+        onClose: Z
+      }, {
+        "annotator-action-close": n(() => [
+          i(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": n(({ color: a }) => [
+          i(t.$slots, "annotator-action-color", k(A({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": n(({ mode: a }) => [
+          i(t.$slots, "annotator-action-draw", k(A({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": n(({ disabled: a }) => [
+          i(t.$slots, "annotator-action-undo", k(A({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": n(({ disabled: a }) => [
+          i(t.$slots, "annotator-action-redo", k(A({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": n(({ disabled: a }) => [
+          i(t.$slots, "annotator-action-delete", k(A({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
+      Je.value ? (r(), 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 ? (r(), d("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ie,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), N(xt, {
+          key: `title_${se.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 && T.value && (s(fe) || s(K)) ? (r(), N(s(je), {
+        ref_key: "userOptionsRef",
+        ref: J,
+        key: `user_option_${oe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: s(he),
+        isImaging: s(be),
+        uid: P.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: E.value,
+        chartElement: $.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: j.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleAnnotator: Z,
+        onToggleFullscreen: Ce,
+        onGeneratePdf: s(ge),
+        onGenerateImage: s(me),
+        onGenerateSvg: we,
+        onToggleTable: ke,
+        onGenerateCsv: ee,
+        style: x({
+          visibility: s(fe) ? s(K) ? "visible" : "hidden" : "visible"
+        })
+      }, Fe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: n(({ isOpen: a, color: o }) => [
+            i(t.$slots, "menuIcon", k(A({ isOpen: a, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: n(() => [
+            i(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: n(() => [
+            i(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: n(() => [
+            i(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: n(() => [
+            i(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: n(() => [
+            i(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: n(({ toggleFullscreen: a, isFullscreen: o }) => [
+            i(t.$slots, "optionFullscreen", k(A({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: n(({ toggleAnnotator: a, isAnnotator: o }) => [
+            i(t.$slots, "optionAnnotator", k(A({ 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),
+      T.value ? (r(), d("svg", {
+        key: 4,
+        ref_key: "svgRef",
+        ref: Q,
+        xmlns: s(gt),
+        class: z({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
+        viewBox: `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`,
+        style: x(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        De(s(He)),
+        t.$slots["chart-background"] ? (r(), 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, Bt)) : m("", !0),
+        w("defs", null, [
+          w("linearGradient", {
+            id: `funnel_area_${P.value}`,
+            x1: "0%",
+            x2: "100%",
+            y1: "0%",
+            y2: "0%"
+          }, [
+            w("stop", {
+              offset: "0%",
+              "stop-color": e.value.style.chart.backgroundColor,
+              "stop-opacity": 0
+            }, null, 8, zt),
+            w("stop", {
+              offset: "20%",
+              "stop-color": e.value.style.chart.area.color
+            }, null, 8, Nt),
+            w("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.area.color
+            }, null, 8, Pt)
+          ], 8, Et)
+        ]),
+        e.value.style.chart.circleLinks.show ? (r(), d("line", H({ 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 ? C.value.height : 0,
+            strokeDashoffset: e.value.useCssAnimation ? C.value.height : 0
+          }
+        }), null, 16, It)) : m("", !0),
+        (r(!0), d(X, null, W(u.value, ({ cx: a, cy: o, r: g, fill: c }, U) => (r(), 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 && !D.value
+          },
+          style: {
+            animationDelay: `${150 * U}ms`
+          }
+        }), null, 16, Rt))), 256)),
+        (r(!0), d(X, null, W(u.value, (a, o) => (r(), d("text", {
+          x: a.cx,
+          y: a.cy + h.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
+          "text-anchor": "middle",
+          "font-size": h.value.circles,
+          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(mt)(a.color) : e.value.style.chart.circles.dataLabels.color,
+          "font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
+          class: z({
+            animated: e.value.useCssAnimation && !D.value
+          }),
+          style: x({
+            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, Mt))), 256)),
+        e.value.style.chart.area.show ? (r(), d("polygon", {
+          key: 2,
+          points: Ke.value,
+          fill: `url(#funnel_area_${P.value})`,
+          class: z({
+            animated: e.value.useCssAnimation && !D.value
+          }),
+          style: x({
+            transition: e.value.useCssAnimation ? `all ${150 * y.value.length}ms ease-in` : "none"
+          })
+        }, null, 14, Ut)) : m("", !0),
+        (r(!0), d(X, null, W(u.value, ({ x: a, y: o, height: g, width: c, fill: U }, te) => (r(), d("rect", H({ ref_for: !0 }, { x: a, y: o, height: g, width: c, fill: U }, {
+          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 && !D.value
+          },
+          style: {
+            animationDelay: `${150 * te}ms`
+          }
+        }), null, 16, Vt))), 256)),
+        (r(!0), d(X, null, W(u.value, (a, o) => (r(), d("g", null, [
+          w("text", {
+            x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
+            y: a.cy - h.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
+            "text-anchor": "start",
+            "font-size": h.value.names,
+            fill: e.value.style.chart.bars.dataLabels.name.color,
+            "font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
+            class: z({
+              animated: e.value.useCssAnimation && !D.value
+            }),
+            style: x({
+              animationDelay: `${150 * o}ms`
+            })
+          }, V(a.name), 15, jt),
+          w("text", {
+            x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
+            y: a.cy + h.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
+            "text-anchor": "start",
+            "font-size": h.value.values,
+            fill: e.value.style.chart.bars.dataLabels.value.color,
+            "font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
+            class: z({
+              animated: e.value.useCssAnimation && !D.value
+            }),
+            style: x({
+              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, Gt)
+        ]))), 256)),
+        i(t.$slots, "svg", { svg: b.value }, void 0, !0)
+      ], 14, Ot)) : m("", !0),
+      t.$slots.watermark ? (r(), d("div", Ht, [
+        i(t.$slots, "watermark", k(A({ isPrinting: s(he) || s(be) })), void 0, !0)
+      ])) : m("", !0),
+      T.value ? m("", !0) : (r(), N(s(Me), {
+        key: 6,
+        config: {
+          type: "verticalBar",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            verticalBar: {
+              axis: {
+                color: "#CCCCCC"
+              },
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      t.$slots.source ? (r(), d("div", {
+        key: 7,
+        ref_key: "source",
+        ref: ue,
+        dir: "auto"
+      }, [
+        i(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : m("", !0),
+      T.value && e.value.userOptions.buttons.table ? (r(), N(it(M.value.component), H({ key: 8 }, M.value.props, {
+        ref_key: "tableUnit",
+        ref: I,
+        onClose: Ae
+      }), Fe({
+        content: n(() => [
+          (r(), N(s(Ve), {
+            key: `table_${re.value}`,
+            colNames: G.value.colNames,
+            head: G.value.head,
+            body: G.value.body,
+            config: G.value.config,
+            title: e.value.table.useDialog ? "" : M.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Ae
+          }, {
+            th: n(({ th: a }) => [
+              w("div", {
+                innerHTML: a,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Xt)
+            ]),
+            td: n(({ 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: n(() => [
+            _e(V(M.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: n(() => [
+            w("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[0] || (l[0] = (a) => ee(e.value.userOptions.callbacks.csv))
+            }, [
+              De(s(Re), {
+                name: "excel",
+                stroke: M.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : m("", !0)
+    ], 46, Tt));
+  }
+}, Yt = /* @__PURE__ */ St(Wt, [["__scopeId", "data-v-fb155766"]]), ua = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Yt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  na as a,
+  ua as b,
+  Yt as v
+};