vue-data-ui 3.0.0-next.7 → 3.0.0-next.70

package/dist/vue-ui-waffle-qfT-wDhI.js

@@ -0,0 +1,910 @@
+import { defineAsyncComponent as G, useSlots as Ct, computed as f, ref as i, toRefs as $t, watch as ee, shallowRef as We, onMounted as It, onBeforeUnmount as _t, createElementBlock as v, openBlock as n, unref as c, normalizeStyle as te, normalizeClass as je, createBlock as N, createCommentVNode as b, createElementVNode as C, createVNode as fe, createSlots as qe, withCtx as g, renderSlot as y, normalizeProps as W, guardReactiveProps as j, Fragment as $, renderList as F, mergeProps as He, toDisplayString as q, createTextVNode as Tt, nextTick as At } from "vue";
+import { u as St, c as Pt, t as Lt, a as Ot, p as V, b as Ft, o as Xe, f as pe, g as Bt, d as zt, k as Y, i as P, X as Nt, s as Vt, x as Mt, F as Dt, e as Rt, v as Et, w as Ut, L as Gt, y as Wt, z as jt } from "./index-CnY41r21.js";
+import { t as qt, u as Ht } from "./useResponsive-DfdjqQps.js";
+import { u as Ye } from "./useNestedProp-DtUATNAU.js";
+import { u as Xt } from "./usePrinter-CJ1uZx0D.js";
+import { u as Yt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Jt } from "./useChartAccessibility-9icAAmYg.js";
+import Kt from "./Title-feqCv0Si.js";
+import Qt from "./Legend-ChXhJNzd.js";
+import { _ as Zt } from "./Shape-C1rNfsMY.js";
+import el from "./img-_RMhslMZ.js";
+import { u as tl, B as ll } from "./useLoading-D7YHNtLX.js";
+import { _ as al } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"], rl = ["stop-color"], il = ["id"], vl = ["x", "y", "height", "width"], cl = ["height", "width"], dl = { key: 0 }, hl = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], fl = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], pl = { key: 1 }, yl = ["rx", "x", "y", "height", "width", "fill", "filter"], gl = ["textContent", "x", "y", "font-size", "fill", "filter"], ml = ["x", "y", "height", "width", "onMouseover", "onMouseleave", "onClick"], bl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, wl = ["onClick"], kl = ["innerHTML"], xl = {
+  __name: "vue-ui-waffle",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(Je, { expose: Ke, emit: Qe }) {
+    const Ze = G(() => import("./DataTable-CKpA_OA_.js")), et = G(() => import("./PenAndPaper-BCcfYvgR.js")), tt = G(() => import("./vue-ui-accordion-CnLY8CrQ.js")), lt = G(() => import("./Tooltip-DQbksria.js")), at = G(() => import("./UserOptions-CGnAZpYs.js")), ot = G(() => import("./PackageVersion-CBHvscRY.js")), { vue_ui_waffle: ut } = St(), m = Je, st = Ct(), le = f(() => !!m.dataset && m.dataset.length), k = i(Pt()), nt = i(null), ae = i(!1), oe = i(""), M = i(null), ye = i(0), L = i(null), ge = i(null), me = i(null), be = i(null), we = i(null), ke = i(0), xe = i(0), Ce = i(0), e = i(ne()), { loading: $e, FINAL_DATASET: J, manualLoading: ue } = tl({
+      ...$t(m),
+      FINAL_CONFIG: e,
+      prepareConfig: ne,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          h.value = re();
+        });
+      },
+      skeletonDataset: [
+        {
+          name: "",
+          values: [1],
+          color: "#AAAAAA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: Lt({
+        defaultConfig: e.value,
+        userConfig: {
+          useCustomCells: !1,
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              layout: {
+                labels: {
+                  captions: { show: !1 }
+                },
+                rect: {
+                  stroke: "#999999"
+                }
+              },
+              legend: {
+                backgroundColor: "transparent",
+                showValue: !1,
+                showPercentage: !1
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: se, setUserOptionsVisibility: Ie, keepUserOptionState: _e } = Yt({ config: e.value }), { svgRef: Te } = Jt({ config: e.value.style.chart.title });
+    function ne() {
+      const t = Ye({
+        userConfig: m.config,
+        defaultConfig: ut
+      });
+      return t.theme ? {
+        ...Ye({
+          userConfig: Ft.vue_ui_waffle[t.theme] || m.config,
+          defaultConfig: t
+        }),
+        customPalette: Ot[t.theme] || V
+      } : t;
+    }
+    ee(() => m.config, (t) => {
+      $e.value || (e.value = ne()), se.value = !e.value.userOptions.showOnChartHover, Se(), ke.value += 1, xe.value += 1, Ce.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const O = We(null), D = We(null), Ae = f(() => !!e.value.debug);
+    function Se() {
+      if (Xe(m.dataset) ? (pe({
+        componentName: "VueUiWaffle",
+        type: "dataset",
+        debug: Ae.value
+      }), le.value = !1, ue.value = !0) : m.dataset.forEach((t, a) => {
+        Bt({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          pe({
+            componentName: "VueUiWaffle",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: Ae.value
+          });
+        });
+      }), Xe(m.dataset) || (ue.value = e.value.loading), e.value.responsive) {
+        const t = qt(() => {
+          const { width: a, height: l } = Ht({
+            chart: L.value,
+            title: e.value.style.chart.title.text ? ge.value : null,
+            legend: e.value.style.chart.legend.show ? me.value : null,
+            source: be.value,
+            noTitle: we.value
+          });
+          requestAnimationFrame(() => {
+            B.value.width = a, B.value.height = l, I.value.width = a, I.value.height = l;
+          });
+        });
+        O.value && (D.value && O.value.unobserve(D.value), O.value.disconnect()), O.value = new ResizeObserver(t), D.value = L.value.parentNode, O.value.observe(D.value);
+      }
+    }
+    It(() => {
+      Se();
+    }), _t(() => {
+      O.value && (D.value && O.value.unobserve(D.value), O.value.disconnect());
+    });
+    const { isPrinting: Pe, isImaging: Le, generatePdf: Oe, generateImage: Fe } = Xt({
+      elementId: `vue-ui-waffle_${k.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-waffle",
+      options: e.value.userOptions.print
+    }), rt = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Be = f(() => zt(e.value.customPalette)), x = i({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    ee(e, () => {
+      x.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const B = i({
+      height: 512,
+      width: 512
+    }), I = i({
+      top: 0,
+      left: 0,
+      height: 512,
+      width: 512
+    }), _ = f(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), T = f(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), it = f(() => Math.max(1e-4, I.value.width / e.value.style.chart.layout.grid.size)), ze = f(() => Math.max(1e-4, I.value.height / e.value.style.chart.layout.grid.size));
+    function Ne(t) {
+      const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((w, he) => w + he, 0), o = t.map((w) => w / l * a), u = o.map(Math.floor), s = o.map((w) => w % 1);
+      let d = a - u.reduce((w, he) => w + he, 0);
+      for (; d > 0; ) {
+        let w = s.indexOf(Math.max(...s));
+        u[w] += 1, s[w] = 0, d -= 1;
+      }
+      return u;
+    }
+    const H = i(!1);
+    function re() {
+      return H.value = J.value.flatMap((t) => t.values.reduce((a, l) => a + l, 0)).reduce((t, a) => t + a, 0) === 0, J.value.map((t, a) => ({
+        ...t,
+        color: Rt(t.color) || Be.value[a] || V[a] || V[a % V.length],
+        uid: `serie_${a}`,
+        absoluteIndex: a
+      }));
+    }
+    const ie = f(() => re()), h = i(ie.value);
+    ee(() => m.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (ue.value = !1);
+    }, { immediate: !0 }), ee(() => m.dataset, (t) => {
+      h.value = re();
+    }, { deep: !0 });
+    const vt = f(() => {
+      const t = h.value.filter((a, l) => !p.value.includes(a.uid)).map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u, 0));
+      return Ne(t);
+    }), ct = f(() => {
+      const t = h.value.map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u));
+      return Ne(t);
+    }), X = f(() => (J.value.forEach((t, a) => {
+      [null, void 0].includes(t.values) && pe({
+        componentName: "VueUiWaffle",
+        type: "datasetSerieAttribute",
+        property: "values (number[])",
+        index: a
+      });
+    }), h.value.filter((t, a) => !p.value.includes(t.uid)).map((t, a) => ({
+      absoluteIndex: t.absoluteIndex,
+      uid: t.uid,
+      name: t.name,
+      color: t.color,
+      value: (t.values || []).reduce((l, o) => l + o, 0),
+      absoluteValues: t.values || [],
+      proportion: vt.value[a]
+    })))), dt = f(() => h.value.map((t, a) => ({
+      absoluteIndex: t.absoluteIndex,
+      uid: t.uid,
+      name: t.name,
+      color: t.color,
+      value: (t.values || []).reduce((l, o) => l + o, 0),
+      absoluteValues: t.values || [],
+      proportion: ct.value[a]
+    })));
+    function ht() {
+      return dt.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        value: t.value,
+        proportion: t.proportion
+      }));
+    }
+    const ft = f(() => {
+      let t = 0;
+      return X.value.map((a, l) => {
+        const o = t, u = o + a.proportion, s = [];
+        for (let d = Math.floor(o); d < Math.floor(u); d += 1)
+          s.push(d);
+        return t = u, {
+          ...a,
+          start: o,
+          rects: s
+        };
+      });
+    }), r = f(() => ft.value.flatMap((t, a) => t.rects.map((l, o) => ({
+      isFirst: o === 0,
+      isLongEnough: l.length > 2,
+      name: t.name,
+      color: t.color,
+      value: t.value,
+      serieIndex: a,
+      absoluteStartIndex: o < 3,
+      serieId: t.uid,
+      ...t
+    }))).map((t, a) => ({
+      ...t,
+      isAbsoluteFirst: a % e.value.style.chart.layout.grid.size === 0
+    }))), R = f(() => {
+      const t = [];
+      for (let a = 0; a < e.value.style.chart.layout.grid.size; a += 1)
+        for (let l = 0; l < e.value.style.chart.layout.grid.size; l += 1)
+          t.push({
+            isStartOfLine: l === 0,
+            position: e.value.style.chart.layout.grid.vertical ? a : l,
+            x: (e.value.style.chart.layout.grid.vertical ? a : l) * (_.value + e.value.style.chart.layout.grid.spaceBetween),
+            y: (e.value.style.chart.layout.grid.vertical ? l : a) * (T.value + e.value.style.chart.layout.grid.spaceBetween) + I.value.top
+          });
+      return t;
+    }), p = i([]), z = i(!1), Ve = i(null), Me = i(null);
+    function De(t) {
+      if (H.value) return;
+      if (!e.value.useAnimation) {
+        p.value.includes(t) ? p.value = p.value.filter((u) => u !== t) : p.value.length < E.value.length - 1 && E.value.length > 1 && p.value.push(t);
+        return;
+      }
+      const a = ie.value.find((u) => u.uid === t).values.reduce((u, s) => u + s, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, s) => u + s, 0);
+      let o = l;
+      if (!(l === 0 && a === 0)) {
+        if (p.value.includes(t)) {
+          let s = function() {
+            o > u ? (cancelAnimationFrame(Ve.value), h.value = h.value.map((d, w) => d.uid === t ? {
+              ...d,
+              values: [u]
+            } : d), z.value = !1) : (z.value = !0, o += u * 0.025, h.value = h.value.map((d, w) => d.uid === t ? {
+              ...d,
+              values: [o]
+            } : d), Ve.value = requestAnimationFrame(s));
+          };
+          p.value = p.value.filter((d) => d !== t);
+          const u = a;
+          s();
+        } else if (p.value.length < E.value.length - 1 && E.value.length > 1) {
+          let u = function() {
+            o < l / 100 ? (cancelAnimationFrame(Me.value), p.value.push(t), h.value = h.value.map((s, d) => s.uid === t ? {
+              ...s,
+              values: [0]
+            } : s), z.value = !1) : (z.value = !0, o /= 1.15, h.value = h.value.map((s) => s.uid === t ? {
+              ...s,
+              values: [o]
+            } : s), Me.value = requestAnimationFrame(u));
+          };
+          u();
+        }
+        bt("selectLegend", X.value.map((u) => ({
+          name: u.name,
+          color: u.color,
+          value: u.value,
+          proportion: u.proportion / Math.pow(e.value.style.chart.layout.grid.size, 2)
+        })));
+      }
+    }
+    const E = f(() => h.value.map((t, a) => ({
+      name: t.name,
+      color: t.color || Be[a] || V[a] || V[a % V.length],
+      value: (t.values || []).reduce((l, o) => l + o, 0),
+      uid: t.uid,
+      shape: "square"
+    })).map((t) => ({
+      ...t,
+      proportion: t.value / h.value.map((a) => (a.values || []).reduce((l, o) => l + o, 0)).reduce((a, l) => a + l, 0),
+      opacity: p.value.includes(t.uid) ? 0.5 : 1,
+      segregate: () => De(t.uid),
+      isSegregated: p.value.includes(t.uid)
+    }))), pt = f(() => ({
+      cy: "waffle-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), A = f(() => X.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ve = i(null), ce = i(null);
+    function yt(t) {
+      const a = r.value[t];
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: a.serieIndex });
+    }
+    function gt(t) {
+      const a = r.value[t];
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: a.serieIndex }), ce.value = null, ae.value = !1, M.value = null;
+    }
+    function mt(t) {
+      if (p.value.length === m.dataset.length) return;
+      const a = r.value[t];
+      ve.value = {
+        datapoint: a,
+        seriesIndex: a.absoluteIndex,
+        series: h.value,
+        config: e.value
+      }, e.value.events.datapointEnter && ce.value !== a.serieIndex && e.value.events.datapointEnter({ datapoint: a, seriesIndex: a.serieIndex }), ce.value = a.serieIndex, ae.value = !0, M.value = r.value[t].serieIndex;
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Wt(l) && jt(() => l({
+        seriesIndex: r.value[t].absoluteIndex,
+        datapoint: a,
+        series: h.value,
+        config: e.value
+      })))
+        oe.value = l({
+          seriesIndex: r.value[t].absoluteIndex,
+          datapoint: a,
+          series: h.value,
+          config: e.value
+        });
+      else {
+        let o = "";
+        if (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${a.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${a.color}" />${st.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${k.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${Y(
+          e.value.style.chart.layout.labels.dataLabels.formatter,
+          a.value,
+          P({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: a.value,
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          {
+            datapoint: a,
+            seriesIndex: r.value[t].absoluteIndex,
+            series: h.value
+          }
+        )}</b>`), e.value.style.chart.tooltip.showPercentage) {
+          const u = P({
+            v: H.value ? 1 / J.value.length * 100 : a.value / A.value * 100,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          });
+          e.value.style.chart.tooltip.showValue ? o += `<span>(${u})</span></div>` : o += `<b>${u}%</b></div>`;
+        }
+        oe.value = o;
+      }
+    }
+    const bt = Qe, S = f(() => {
+      const t = X.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), a = X.value.map((l) => l.value);
+      return { head: t, body: a };
+    });
+    function K(t) {
+      return e.value.useBlurOnHover && ![null, void 0].includes(M.value) && M.value !== t ? `url(#blur_${k.value})` : "";
+    }
+    function wt(t, a) {
+      return e.value.style.chart.layout.labels.captions.show ? r.value.length && !z.value && !e.value.style.chart.layout.grid.vertical && (r.value[t].isFirst && a.position < e.value.style.chart.layout.grid.size - 2 || r.value[t].isAbsoluteFirst && t % e.value.style.chart.layout.grid.size === 0 && r.value[t].absoluteStartIndex) : !1;
+    }
+    function kt(t, a = null) {
+      const l = Y(
+        e.value.style.chart.layout.labels.dataLabels.formatter,
+        r.value[t].value,
+        P({
+          p: e.value.style.chart.layout.labels.dataLabels.prefix,
+          v: r.value[t].value,
+          s: e.value.style.chart.layout.labels.dataLabels.suffix,
+          r: e.value.style.chart.layout.labels.captions.roundingValue
+        }),
+        { datapoint: r.value[t], position: a }
+      ), o = P({ v: r.value[t].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage }), u = (e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? Gt({ source: r.value[t].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : r.value[t].name) + (e.value.style.chart.layout.labels.captions.showPercentage || e.value.style.chart.layout.labels.captions.showValue ? ":" : ""), s = e.value.style.chart.layout.labels.captions.showSerieName ? u : "";
+      let d = "";
+      return e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? d = `${o} (${l})` : e.value.style.chart.layout.labels.captions.showPercentage && !e.value.style.chart.layout.labels.captions.showValue ? d = o : !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue && (d = l), `${s}${d}`;
+    }
+    function Re(t = null) {
+      At(() => {
+        const a = S.value.head.map((u, s) => [[
+          u.name
+        ], [S.value.body[s]], [isNaN(S.value.body[s] / A.value) ? "-" : S.value.body[s] / A.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Et(l);
+        t ? t(o) : Ut({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-waffle" });
+      });
+    }
+    const Q = f(() => {
+      const t = [
+        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
+        Y(
+          e.value.style.chart.layout.labels.dataLabels.formatter,
+          A.value,
+          P({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: A.value,
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        ),
+        "100%"
+      ], a = S.value.head.map((u, s) => [
+        {
+          color: u.color,
+          name: u.name
+        },
+        Y(
+          e.value.style.chart.layout.labels.dataLabels.formatter,
+          S.value.body[s],
+          P({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: S.value.body[s],
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        ),
+        isNaN(S.value.body[s] / A.value) ? "-" : P({
+          v: S.value.body[s] / A.value * 100,
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        })
+      ]), l = {
+        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
+        },
+        shape: "square",
+        breakpoint: e.value.table.responsiveBreakpoint
+      }, o = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ];
+      return {
+        head: t,
+        body: a,
+        config: l,
+        colNames: o
+      };
+    }), U = i(!1);
+    function Ee(t) {
+      U.value = t, ye.value += 1;
+    }
+    function Ue() {
+      x.value.showTable = !x.value.showTable;
+    }
+    function Ge() {
+      x.value.showTooltip = !x.value.showTooltip;
+    }
+    const Z = i(!1);
+    function de() {
+      Z.value = !Z.value;
+    }
+    async function xt({ scale: t = 2 } = {}) {
+      if (!L.value) return;
+      const { width: a, height: l } = L.value.getBoundingClientRect(), o = a / l, { imageUri: u, base64: s } = await el({ domElement: L.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: u,
+        base64: s,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    return Ke({
+      getData: ht,
+      getImage: xt,
+      generatePdf: Oe,
+      generateCsv: Re,
+      generateImage: Fe,
+      toggleTable: Ue,
+      toggleTooltip: Ge,
+      toggleAnnotator: de,
+      toggleFullscreen: Ee
+    }), (t, a) => (n(), v("div", {
+      class: je(`vue-ui-waffle ${U.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref_key: "waffleChart",
+      ref: L,
+      id: `vue-ui-waffle_${k.value}`,
+      style: te(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: a[2] || (a[2] = () => c(Ie)(!0)),
+      onMouseleave: a[3] || (a[3] = () => c(Ie)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), N(c(et), {
+        key: 0,
+        svgRef: c(Te),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Z.value,
+        onClose: de
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
+      rt.value ? (n(), v("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: we,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : b("", !0),
+      e.value.style.chart.title.text ? (n(), v("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ge,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (n(), N(Kt, {
+          key: `title_${ke.value}`,
+          config: {
+            title: {
+              cy: "waffle-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "waffle-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : b("", !0),
+      e.value.userOptions.show && le.value && (c(_e) || c(se)) ? (n(), N(c(at), {
+        ref_key: "details",
+        ref: nt,
+        key: `user_options_${ye.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(Pe),
+        isImaging: c(Le),
+        uid: k.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: U.value,
+        isTooltip: x.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: L.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: Z.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Ee,
+        onGeneratePdf: c(Oe),
+        onGenerateCsv: Re,
+        onGenerateImage: c(Fe),
+        onToggleTable: Ue,
+        onToggleTooltip: Ge,
+        onToggleAnnotator: de,
+        style: te({
+          visibility: c(_e) ? c(se) ? "visible" : "hidden" : "visible"
+        })
+      }, qe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: g(({ isOpen: l, color: o }) => [
+            y(t.$slots, "menuIcon", W(j({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: g(() => [
+            y(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: g(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: g(() => [
+            y(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: g(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: g(() => [
+            y(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: g(({ toggleFullscreen: l, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", W(j({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: g(({ toggleAnnotator: l, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", W(j({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
+      (n(), v("svg", {
+        ref_key: "svgRef",
+        ref: Te,
+        xmlns: c(Nt),
+        class: je({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
+        viewBox: `0 0 ${B.value.width <= 0 ? 10 : B.value.width} ${B.value.height <= 0 ? 10 : B.value.height}`,
+        style: te(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        fe(c(ot)),
+        C("defs", null, [
+          (n(!0), v($, null, F(r.value, (l, o) => (n(), v("radialGradient", {
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%",
+            id: `gradient_${k.value}_${o}`
+          }, [
+            C("stop", {
+              offset: "0%",
+              "stop-color": c(Vt)(c(Mt)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
+            }, null, 8, nl),
+            C("stop", {
+              offset: "100%",
+              "stop-color": l.color
+            }, null, 8, rl)
+          ], 8, sl))), 256))
+        ]),
+        C("defs", null, [
+          C("filter", {
+            id: `blur_${k.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, a[4] || (a[4] = [
+            C("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 2
+            }, null, -1),
+            C("feColorMatrix", {
+              type: "saturate",
+              values: "0"
+            }, null, -1)
+          ]), 8, il)
+        ]),
+        e.value.useCustomCells && r.value.length ? (n(!0), v($, { key: 0 }, F(R.value, (l, o) => (n(), v("foreignObject", {
+          x: l.x,
+          y: l.y,
+          height: T.value <= 0 ? 1e-4 : T.value,
+          width: _.value <= 0 ? 1e-4 : _.value,
+          class: "vue-ui-waffle-custom-cell-foreignObject"
+        }, [
+          y(t.$slots, "cell", He({ ref_for: !0 }, { cell: { ...l, color: r.value[o].color, ...r.value[o] }, isSelected: [null, void 0].includes(M.value) ? !0 : r.value[o].serieIndex === M.value }), void 0, !0)
+        ], 8, vl))), 256)) : b("", !0),
+        !r.value.length && !e.value.useCustomCells ? (n(), v("rect", {
+          key: 1,
+          x: 12,
+          y: 12,
+          height: I.value.height - 24,
+          width: I.value.width - 24,
+          rx: 3,
+          fill: "none",
+          stroke: "black"
+        }, null, 8, cl)) : r.value.length && !e.value.useCustomCells ? (n(), v($, { key: 2 }, [
+          t.$slots.pattern ? (n(), v("g", dl, [
+            (n(!0), v($, null, F(ie.value, (l) => (n(), v("defs", null, [
+              y(t.$slots, "pattern", He({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${k.value}_${l.absoluteIndex}` }), void 0, !0)
+            ]))), 256))
+          ])) : b("", !0),
+          (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+            rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
+            x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
+            y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
+            height: T.value <= 0 ? 1e-4 : T.value,
+            width: _.value <= 0 ? 1e-4 : _.value,
+            fill: "white",
+            stroke: e.value.style.chart.layout.rect.stroke,
+            "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
+            filter: K(r.value[o].serieIndex)
+          }, null, 8, hl))), 256)),
+          (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+            rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
+            x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
+            y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
+            height: T.value <= 0 ? 1e-4 : T.value,
+            width: _.value <= 0 ? 1e-4 : _.value,
+            fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${k.value}_${o})` : r.value[o].color,
+            stroke: e.value.style.chart.layout.rect.stroke,
+            "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
+            filter: K(r.value[o].serieIndex)
+          }, null, 8, fl))), 256)),
+          t.$slots.pattern ? (n(), v("g", pl, [
+            (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+              rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
+              x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
+              y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
+              height: T.value <= 0 ? 1e-4 : T.value,
+              width: _.value <= 0 ? 1e-4 : _.value,
+              fill: `url(#pattern_${k.value}_${r.value[o].absoluteIndex})`,
+              stroke: "none",
+              filter: K(r.value[o].serieIndex)
+            }, null, 8, yl))), 256))
+          ])) : b("", !0)
+        ], 64)) : b("", !0),
+        (n(!0), v($, null, F(R.value, (l, o) => (n(), v($, null, [
+          wt(o, l) ? (n(), v("text", {
+            key: `datalabel_${o}`,
+            textContent: q(kt(o, l)),
+            x: l.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2 + 6,
+            y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2 + ze.value / 2 + e.value.style.chart.layout.labels.captions.fontSize / 3,
+            "font-size": e.value.style.chart.layout.labels.captions.fontSize,
+            fill: c(Dt)(r.value[o].color),
+            filter: K(r.value[o].serieIndex)
+          }, null, 8, gl)) : b("", !0)
+        ], 64))), 256)),
+        (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+          x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
+          y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
+          height: ze.value,
+          width: it.value,
+          fill: "transparent",
+          stroke: "none",
+          onMouseover: (u) => mt(o),
+          onMouseleave: (u) => gt(o),
+          onClick: (u) => yt(o)
+        }, null, 40, ml))), 256)),
+        y(t.$slots, "svg", { svg: B.value }, void 0, !0)
+      ], 14, ul)),
+      t.$slots.watermark ? (n(), v("div", bl, [
+        y(t.$slots, "watermark", W(j({ isPrinting: c(Pe) || c(Le) })), void 0, !0)
+      ])) : b("", !0),
+      C("div", {
+        ref_key: "chartLegend",
+        ref: me
+      }, [
+        e.value.style.chart.legend.show ? (n(), N(Qt, {
+          key: `legend_${Ce.value}`,
+          legendSet: E.value,
+          config: pt.value,
+          onClickMarker: a[0] || (a[0] = ({ legend: l }) => De(l.uid))
+        }, qe({
+          item: g(({ legend: l }) => [
+            C("div", {
+              onClick: (o) => l.segregate(),
+              style: te(`opacity:${p.value.includes(l.uid) ? 0.5 : 1}`)
+            }, q(l.name) + q(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + q(e.value.style.chart.legend.showValue ? c(Y)(
+              e.value.style.chart.layout.labels.dataLabels.formatter,
+              l.value,
+              c(P)({
+                p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                v: l.value,
+                s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                r: e.value.style.chart.legend.roundingValue,
+                isAnimating: z.value
+              }),
+              { datapoint: l }
+            ) : "") + " " + q(e.value.style.chart.legend.showPercentage ? p.value.includes(l.uid) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / A.value) ? "-" : c(P)({ v: l.value / A.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: z.value })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, wl)
+          ]),
+          _: 2
+        }, [
+          t.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: g(({ legend: l, index: o }) => [
+              fe(Zt, {
+                shape: l.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${k.value}_${o})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"])) : y(t.$slots, "legend", {
+          key: 1,
+          legend: E.value
+        }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (n(), v("div", {
+        key: 5,
+        ref_key: "source",
+        ref: be,
+        dir: "auto"
+      }, [
+        y(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : b("", !0),
+      fe(c(lt), {
+        show: x.value.showTooltip && ae.value && p.value.length < m.dataset.length,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: L.value,
+        content: oe.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        isFullscreen: U.value,
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": g(() => [
+          y(t.$slots, "tooltip-before", W(j({ ...ve.value })), void 0, !0)
+        ]),
+        "tooltip-after": g(() => [
+          y(t.$slots, "tooltip-after", W(j({ ...ve.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen", "smooth", "backdropFilter"]),
+      le.value ? (n(), N(c(tt), {
+        key: 6,
+        hideDetails: "",
+        config: {
+          open: x.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            color: e.value.style.chart.color
+          },
+          head: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            color: e.value.style.chart.color
+          }
+        }
+      }, {
+        content: g(() => [
+          (n(), N(c(Ze), {
+            key: `table_${xe.value}`,
+            colNames: Q.value.colNames,
+            head: Q.value.head,
+            body: Q.value.body,
+            config: Q.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: a[1] || (a[1] = (l) => x.value.showTable = !1)
+          }, {
+            th: g(({ th: l }) => [
+              C("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, kl)
+            ]),
+            td: g(({ td: l }) => [
+              Tt(q(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : b("", !0),
+      c($e) ? (n(), N(ll, { key: 7 })) : b("", !0)
+    ], 46, ol));
+  }
+}, Nl = /* @__PURE__ */ al(xl, [["__scopeId", "data-v-b038175e"]]);
+export {
+  Nl as default
+};