vue-data-ui 2.4.67 → 2.4.68

package/dist/{vue-ui-waffle-BmNA6NLx.js → vue-ui-waffle-BfzfWmf5.js}

@@ -1,31 +1,32 @@
-import { useSlots as tt, onMounted as ze, computed as d, ref as c, watch as Ne, onBeforeUnmount as lt, openBlock as s, createElementBlock as n, normalizeClass as Be, normalizeStyle as X, unref as v, createBlock as z, createCommentVNode as y, createSlots as at, withCtx as b, renderSlot as g, normalizeProps as U, guardReactiveProps as G, createVNode as Ve, createElementVNode as k, Fragment as I, renderList as R, toDisplayString as S, createTextVNode as Me, nextTick as ot, pushScopeId as ut, popScopeId as st } from "vue";
-import { u as rt, c as nt, t as it, a as ct, p as N, o as vt, e as re, g as dt, b as ht, i as W, f as x, X as pt, s as ft, w as yt, G as gt, L as bt, d as mt, x as wt, y as kt, q as xt, r as Ct } from "./index-CnwO8xcH.js";
-import { t as _t, u as $t } from "./useResponsive-CoxXLe23.js";
-import { _ as Tt } from "./Title-CEILAOdT.js";
-import { u as It, U as St } from "./usePrinter-BEBjMPUP.js";
-import { _ as Pt } from "./Tooltip-CgY3ZV9q.js";
-import { D as Lt } from "./DataTable-BLV7zzyw.js";
-import { L as Ot } from "./Legend-ynYWBX3Z.js";
-import At from "./vue-ui-skeleton-DyIz4SMi.js";
-import Ft from "./vue-ui-accordion-DDF-Fm2i.js";
-import { u as De } from "./useNestedProp-DPMt3Iiy.js";
-import { _ as zt } from "./PackageVersion-BazXxXqy.js";
-import { P as Nt } from "./PenAndPaper-D4nWibJ3.js";
+import { useSlots as tt, computed as d, ref as v, watch as Ne, onMounted as lt, onBeforeUnmount as at, openBlock as s, createElementBlock as r, normalizeClass as Be, normalizeStyle as X, unref as c, createBlock as N, createCommentVNode as y, createSlots as Ve, withCtx as b, renderSlot as g, normalizeProps as B, guardReactiveProps as V, createVNode as ne, createElementVNode as x, Fragment as _, renderList as O, toDisplayString as A, createTextVNode as Me, nextTick as ot, pushScopeId as ut, popScopeId as st } from "vue";
+import { u as rt, c as nt, t as it, a as vt, p as M, o as ct, e as ie, g as dt, b as ht, i as E, f as C, X as pt, s as yt, w as ft, G as gt, L as bt, d as mt, x as wt, y as kt, q as xt, r as _t } from "./index-3_ulDZ6w.js";
+import { t as Ct, u as $t } from "./useResponsive-CoxXLe23.js";
+import { _ as It } from "./Title-L52l_KMR.js";
+import { u as Tt, U as St } from "./usePrinter-NdwnpHUu.js";
+import { _ as Pt } from "./Tooltip-FYp9ljnj.js";
+import { D as Lt } from "./DataTable-CNH8bChE.js";
+import { L as Ot } from "./Legend-kF7sC1KK.js";
+import At from "./vue-ui-skeleton-uAX1ZH1F.js";
+import Ft from "./vue-ui-accordion-DXlXtAML.js";
+import { u as De } from "./useNestedProp-Bs6ltq3I.js";
+import { _ as zt } from "./PackageVersion-m6HC0skh.js";
+import { P as Nt } from "./PenAndPaper-FOhKSug_.js";
 import { u as Bt } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = ["xmlns", "viewBox"], Ut = ["id"], Gt = ["stop-color"], Rt = ["stop-color"], Wt = ["id"], jt = /* @__PURE__ */ Ue(() => /* @__PURE__ */ k("feGaussianBlur", {
+import { _ as Vt } from "./Shape-CfcWXI5g.js";
+import { _ as Mt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ue = (W) => (ut("data-v-8a0b99ad"), W = W(), st(), W), Dt = ["id"], Ut = ["xmlns", "viewBox"], Gt = ["id"], Rt = ["stop-color"], jt = ["stop-color"], Et = ["id"], Wt = /* @__PURE__ */ Ue(() => /* @__PURE__ */ x("feGaussianBlur", {
   in: "SourceGraphic",
   stdDeviation: 2
-}, null, -1)), Et = /* @__PURE__ */ Ue(() => /* @__PURE__ */ k("feColorMatrix", {
+}, null, -1)), qt = /* @__PURE__ */ Ue(() => /* @__PURE__ */ x("feColorMatrix", {
   type: "saturate",
   values: "0"
-}, null, -1)), qt = [
-  jt,
-  Et
-], Ht = ["x", "y", "height", "width"], Xt = ["height", "width"], Yt = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], Jt = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], Kt = ["x", "y", "height", "width", "filter"], Qt = { key: 0 }, Zt = { key: 1 }, el = { key: 2 }, tl = { key: 3 }, ll = ["onMouseover", "x", "y", "height", "width"], al = {
+}, null, -1)), Ht = [
+  Wt,
+  qt
+], Xt = ["x", "y", "height", "width"], Yt = ["height", "width"], Jt = { key: 0 }, Kt = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], Qt = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], Zt = { key: 1 }, el = ["rx", "x", "y", "height", "width", "fill", "filter"], tl = ["x", "y", "height", "width", "filter"], ll = { key: 0 }, al = { key: 1 }, ol = { key: 2 }, ul = { key: 3 }, sl = ["onMouseover", "x", "y", "height", "width"], rl = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, ol = ["onClick"], ul = { key: 0 }, sl = { key: 1 }, rl = ["innerHTML"], nl = {
+}, nl = ["onClick"], il = { key: 0 }, vl = { key: 1 }, cl = ["innerHTML"], dl = {
   __name: "vue-ui-waffle",
   props: {
     config: {
@@ -42,34 +43,30 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
     }
   },
   emits: ["selectLegend"],
-  setup(j, { expose: Ge, emit: Re }) {
-    const m = j, { vue_ui_waffle: We } = rt(), je = tt();
-    ze(() => {
-      je["chart-background"] && console.warn("VueUiWaffle does not support the #chart-background slot.");
-    });
-    const Y = d(() => !!m.dataset && m.dataset.length), P = c(nt()), Ee = c(null), ee = c(!1), te = c(""), B = c(null), ne = c(0), V = c(null), ie = c(null), ce = c(null), ve = c(null), de = c(null), he = c(0), pe = c(0), fe = c(0), e = d({
-      get: () => be(),
+  setup(W, { expose: Ge, emit: Re }) {
+    const m = W, { vue_ui_waffle: je } = rt(), Ee = tt(), Y = d(() => !!m.dataset && m.dataset.length), k = v(nt()), We = v(null), te = v(!1), le = v(""), D = v(null), ve = v(0), U = v(null), ce = v(null), de = v(null), he = v(null), pe = v(null), ye = v(0), fe = v(0), ge = v(0), e = d({
+      get: () => we(),
       set: (t) => t
-    }), { userOptionsVisible: le, setUserOptionsVisibility: ye, keepUserOptionState: ge } = Bt({ config: e.value });
-    function be() {
+    }), { userOptionsVisible: ae, setUserOptionsVisibility: be, keepUserOptionState: me } = Bt({ config: e.value });
+    function we() {
       const t = De({
         userConfig: m.config,
-        defaultConfig: We
+        defaultConfig: je
       });
       return t.theme ? {
         ...De({
           userConfig: it.vue_ui_waffle[t.theme] || m.config,
           defaultConfig: t
         }),
-        customPalette: ct[t.theme] || N
+        customPalette: vt[t.theme] || M
       } : t;
     }
     Ne(() => m.config, (t) => {
-      e.value = be(), le.value = !e.value.showOnChartHover, me(), he.value += 1, pe.value += 1, fe.value += 1;
+      e.value = we(), ae.value = !e.value.showOnChartHover, ke(), ye.value += 1, fe.value += 1, ge.value += 1;
     }, { deep: !0 });
-    const J = c(null);
-    function me() {
-      if (vt(m.dataset) ? re({
+    const J = v(null);
+    function ke() {
+      if (ct(m.dataset) ? ie({
         componentName: "VueUiWaffle",
         type: "dataset"
       }) : m.dataset.forEach((t, a) => {
@@ -77,7 +74,7 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
           datasetObject: t,
           requiredAttributes: ["name", "values"]
         }).forEach((l) => {
-          re({
+          ie({
             componentName: "VueUiWaffle",
             type: "datasetSerieAttribute",
             property: l,
@@ -85,68 +82,68 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
           });
         });
       }), e.value.responsive) {
-        const t = _t(() => {
+        const t = Ct(() => {
           const { width: a, height: l } = $t({
-            chart: V.value,
-            title: e.value.style.chart.title.text ? ie.value : null,
-            legend: e.value.style.chart.legend.show ? ce.value : null,
-            source: ve.value,
-            noTitle: de.value
+            chart: U.value,
+            title: e.value.style.chart.title.text ? ce.value : null,
+            legend: e.value.style.chart.legend.show ? de.value : null,
+            source: he.value,
+            noTitle: pe.value
           });
-          L.value.width = a, L.value.height = l, C.value.width = a, C.value.height = l;
+          F.value.width = a, F.value.height = l, $.value.width = a, $.value.height = l;
         });
-        J.value = new ResizeObserver(t), J.value.observe(V.value.parentNode);
+        J.value = new ResizeObserver(t), J.value.observe(U.value.parentNode);
       }
     }
-    ze(() => {
-      me();
-    }), lt(() => {
+    lt(() => {
+      ke();
+    }), at(() => {
       J.value && J.value.disconnect();
     });
-    const { isPrinting: we, isImaging: ke, generatePdf: xe, generateImage: Ce } = It({
-      elementId: `vue-ui-waffle_${P.value}`,
+    const { isPrinting: xe, isImaging: _e, generatePdf: Ce, generateImage: $e } = Tt({
+      elementId: `vue-ui-waffle_${k.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-waffle"
-    }), qe = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), _e = d(() => ht(e.value.customPalette)), T = c({
+    }), qe = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ie = d(() => ht(e.value.customPalette)), L = v({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), L = c({
+    }), F = v({
       height: 512,
       width: 512
-    }), C = c({
+    }), $ = v({
       top: 0,
       left: 0,
       height: 512,
       width: 512
-    }), O = d(() => (C.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), A = d(() => (C.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), E = d(() => C.value.width / e.value.style.chart.layout.grid.size), K = d(() => C.value.height / e.value.style.chart.layout.grid.size);
-    function $e(t) {
-      const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((w, se) => w + se, 0), o = t.map((w) => w / l * a), u = o.map(Math.floor), i = o.map((w) => w % 1);
-      let f = a - u.reduce((w, se) => w + se, 0);
+    }), I = d(() => ($.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), T = d(() => ($.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), q = d(() => $.value.width / e.value.style.chart.layout.grid.size), K = d(() => $.value.height / e.value.style.chart.layout.grid.size);
+    function Te(t) {
+      const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((w, re) => w + re, 0), o = t.map((w) => w / l * a), u = o.map(Math.floor), i = o.map((w) => w % 1);
+      let f = a - u.reduce((w, re) => w + re, 0);
       for (; f > 0; ) {
         let w = i.indexOf(Math.max(...i));
         u[w] += 1, i[w] = 0, f -= 1;
       }
       return u;
     }
-    function Te() {
+    function Se() {
       return m.dataset.map((t, a) => ({
         ...t,
-        color: mt(t.color) || _e.value[a] || N[a] || N[a % N.length],
+        color: mt(t.color) || Ie.value[a] || M[a] || M[a % M.length],
         uid: `serie_${a}`,
         absoluteIndex: a
       }));
     }
-    const Ie = d(() => Te()), h = c(Ie.value);
+    const oe = d(() => Se()), h = v(oe.value);
     Ne(() => m.dataset, (t) => {
-      h.value = Te();
+      h.value = Se();
     }, { deep: !0 });
     const He = d(() => {
       const t = h.value.filter((a, l) => !p.value.includes(a.uid)).map((a, l) => (a.values || []).reduce((o, u) => o + u, 0));
-      return $e(t);
+      return Te(t);
     }), Xe = d(() => {
       const t = h.value.map((a, l) => (a.values || []).reduce((o, u) => o + u));
-      return $e(t);
-    }), q = d(() => (m.dataset.forEach((t, a) => {
-      [null, void 0].includes(t.values) && re({
+      return Te(t);
+    }), H = d(() => (m.dataset.forEach((t, a) => {
+      [null, void 0].includes(t.values) && ie({
         componentName: "VueUiWaffle",
         type: "datasetSerieAttribute",
         property: "values (number[])",
@@ -179,7 +176,7 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
     }
     const Ke = d(() => {
       let t = 0;
-      return q.value.map((a, l) => {
+      return H.value.map((a, l) => {
         const o = t, u = o + a.proportion, i = [];
         for (let f = Math.floor(o); f < Math.floor(u); f += 1)
           i.push(f);
@@ -189,7 +186,7 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
           rects: i
         };
       });
-    }), r = d(() => Ke.value.flatMap((t, a) => t.rects.map((l, o) => ({
+    }), n = d(() => Ke.value.flatMap((t, a) => t.rects.map((l, o) => ({
       isFirst: o === 0,
       isLongEnough: l.length > 2,
       name: t.name,
@@ -202,60 +199,60 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
     }))).map((t, a) => ({
       ...t,
       isAbsoluteFirst: a % e.value.style.chart.layout.grid.size === 0
-    }))), H = d(() => {
+    }))), G = d(() => {
       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) * (O.value + e.value.style.chart.layout.grid.spaceBetween),
-            y: (e.value.style.chart.layout.grid.vertical ? l : a) * (A.value + e.value.style.chart.layout.grid.spaceBetween) + C.value.top
+            x: (e.value.style.chart.layout.grid.vertical ? a : l) * (I.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) + $.value.top
           });
       return t;
-    }), p = c([]), F = c(!1), Se = c(null), Pe = c(null);
-    function Le(t) {
+    }), p = v([]), z = v(!1), Pe = v(null), Le = v(null);
+    function Oe(t) {
       if (!e.value.useAnimation) {
-        p.value.includes(t) ? p.value = p.value.filter((u) => u !== t) : p.value.length < M.value.length - 1 && M.value.length > 1 && p.value.push(t);
+        p.value.includes(t) ? p.value = p.value.filter((u) => u !== t) : p.value.length < R.value.length - 1 && R.value.length > 1 && p.value.push(t);
         return;
       }
-      const a = Ie.value.find((u) => u.uid === t).values.reduce((u, i) => u + i, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, i) => u + i, 0);
+      const a = oe.value.find((u) => u.uid === t).values.reduce((u, i) => u + i, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, i) => u + i, 0);
       let o = l;
       if (p.value.includes(t)) {
         let i = function() {
-          o > u ? (cancelAnimationFrame(Se.value), h.value = h.value.map((f, w) => f.uid === t ? {
+          o > u ? (cancelAnimationFrame(Pe.value), h.value = h.value.map((f, w) => f.uid === t ? {
             ...f,
             values: [u]
-          } : f), F.value = !1) : (F.value = !0, o += u * 0.025, h.value = h.value.map((f, w) => f.uid === t ? {
+          } : f), z.value = !1) : (z.value = !0, o += u * 0.025, h.value = h.value.map((f, w) => f.uid === t ? {
             ...f,
             values: [o]
-          } : f), Se.value = requestAnimationFrame(i));
+          } : f), Pe.value = requestAnimationFrame(i));
         };
         p.value = p.value.filter((f) => f !== t);
         const u = a;
         i();
-      } else if (p.value.length < M.value.length - 1 && M.value.length > 1) {
+      } else if (p.value.length < R.value.length - 1 && R.value.length > 1) {
         let u = function() {
-          o < l / 100 ? (cancelAnimationFrame(Pe.value), p.value.push(t), h.value = h.value.map((i, f) => i.uid === t ? {
+          o < l / 100 ? (cancelAnimationFrame(Le.value), p.value.push(t), h.value = h.value.map((i, f) => i.uid === t ? {
             ...i,
             values: [0]
-          } : i), F.value = !1) : (F.value = !0, o /= 1.15, h.value = h.value.map((i) => i.uid === t ? {
+          } : i), z.value = !1) : (z.value = !0, o /= 1.15, h.value = h.value.map((i) => i.uid === t ? {
             ...i,
             values: [o]
-          } : i), Pe.value = requestAnimationFrame(u));
+          } : i), Le.value = requestAnimationFrame(u));
         };
         u();
       }
-      Re("selectLegend", q.value.map((u) => ({
+      Re("selectLegend", H.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 M = d(() => h.value.map((t, a) => ({
+    const R = d(() => h.value.map((t, a) => ({
       name: t.name,
-      color: t.color || _e[a] || N[a] || N[a % N.length],
+      color: t.color || Ie[a] || M[a] || M[a % M.length],
       value: (t.values || []).reduce((l, o) => l + o, 0),
       uid: t.uid,
       shape: "square"
@@ -263,7 +260,7 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
       ...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: () => Le(t.uid),
+      segregate: () => Oe(t.uid),
       isSegregated: p.value.includes(t.uid)
     }))), Qe = d(() => ({
       cy: "waffle-div-legend",
@@ -272,35 +269,35 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), _ = d(() => q.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ae = c(null);
+    })), S = d(() => H.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ue = v(null);
     function Ze(t) {
       if (p.value.length === m.dataset.length) return;
-      const a = r.value[t];
-      ae.value = {
+      const a = n.value[t];
+      ue.value = {
         datapoint: a,
         seriesIndex: a.absoluteIndex,
         series: h.value,
         config: e.value
-      }, ee.value = !0, B.value = r.value[t].serieIndex;
+      }, te.value = !0, D.value = n.value[t].serieIndex;
       const l = e.value.style.chart.tooltip.customFormat;
       if (wt(l) && kt(() => l({
-        seriesIndex: r.value[t].absoluteIndex,
+        seriesIndex: n.value[t].absoluteIndex,
         datapoint: a,
         series: h.value,
         config: e.value
       })))
-        te.value = l({
-          seriesIndex: r.value[t].absoluteIndex,
+        le.value = l({
+          seriesIndex: n.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 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" stroke="none" rx="1" fill="${a.color}" /></svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${W(
+        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}" />${Ee.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>${E(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           a.value,
-          x({
+          C({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
             v: a.value,
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
@@ -308,69 +305,69 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
           }),
           {
             datapoint: a,
-            seriesIndex: r.value[t].absoluteIndex,
+            seriesIndex: n.value[t].absoluteIndex,
             series: h.value
           }
         )}</b>`), e.value.style.chart.tooltip.showPercentage) {
-          const u = x({
-            v: a.value / _.value * 100,
+          const u = C({
+            v: a.value / S.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>`;
         }
-        te.value = o;
+        le.value = o;
       }
     }
-    const $ = d(() => {
-      const t = q.value.map((l) => ({
+    const P = d(() => {
+      const t = H.value.map((l) => ({
         name: l.name,
         color: l.color
-      })), a = q.value.map((l) => l.value);
+      })), a = H.value.map((l) => l.value);
       return { head: t, body: a };
     });
-    function oe(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(B.value) && B.value !== t ? `url(#blur_${P.value})` : "";
+    function Q(t) {
+      return e.value.useBlurOnHover && ![null, void 0].includes(D.value) && D.value !== t ? `url(#blur_${k.value})` : "";
     }
-    function Oe() {
+    function Ae() {
       ot(() => {
-        const t = $.value.head.map((o, u) => [[
+        const t = P.value.head.map((o, u) => [[
           o.name
-        ], [$.value.body[u]], [isNaN($.value.body[u] / _.value) ? "-" : $.value.body[u] / _.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = xt(a);
-        Ct({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-waffle" });
+        ], [P.value.body[u]], [isNaN(P.value.body[u] / S.value) ? "-" : P.value.body[u] / S.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = xt(a);
+        _t({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-waffle" });
       });
     }
-    const Q = d(() => {
+    const Z = d(() => {
       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>',
-        W(
+        E(
           e.value.style.chart.layout.labels.dataLabels.formatter,
-          _.value,
-          x({
+          S.value,
+          C({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
-            v: _.value,
+            v: S.value,
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
             r: e.value.table.td.roundingValue
           })
         ),
         "100%"
-      ], a = $.value.head.map((u, i) => [
+      ], a = P.value.head.map((u, i) => [
         {
           color: u.color,
           name: u.name
         },
-        W(
+        E(
           e.value.style.chart.layout.labels.dataLabels.formatter,
-          $.value.body[i],
-          x({
+          P.value.body[i],
+          C({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
-            v: $.value.body[i],
+            v: P.value.body[i],
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
             r: e.value.table.td.roundingValue
           })
         ),
-        isNaN($.value.body[i] / _.value) ? "-" : x({
-          v: $.value.body[i] / _.value * 100,
+        isNaN(P.value.body[i] / S.value) ? "-" : C({
+          v: P.value.body[i] / S.value * 100,
           s: "%",
           r: e.value.table.td.roundingPercentage
         })
@@ -398,60 +395,60 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
         config: l,
         colNames: o
       };
-    }), D = c(!1);
+    }), j = v(!1);
     function et(t) {
-      D.value = t, ne.value += 1;
-    }
-    function Ae() {
-      T.value.showTable = !T.value.showTable;
+      j.value = t, ve.value += 1;
     }
     function Fe() {
-      T.value.showTooltip = !T.value.showTooltip;
+      L.value.showTable = !L.value.showTable;
     }
-    const Z = c(!1);
-    function ue() {
-      Z.value = !Z.value;
+    function ze() {
+      L.value.showTooltip = !L.value.showTooltip;
+    }
+    const ee = v(!1);
+    function se() {
+      ee.value = !ee.value;
     }
     return Ge({
       getData: Je,
-      generatePdf: xe,
-      generateCsv: Oe,
-      generateImage: Ce,
-      toggleTable: Ae,
-      toggleTooltip: Fe,
-      toggleAnnotator: ue
-    }), (t, a) => (s(), n("div", {
-      class: Be(`vue-ui-waffle ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      generatePdf: Ce,
+      generateCsv: Ae,
+      generateImage: $e,
+      toggleTable: Fe,
+      toggleTooltip: ze,
+      toggleAnnotator: se
+    }), (t, a) => (s(), r("div", {
+      class: Be(`vue-ui-waffle ${j.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "waffleChart",
-      ref: V,
-      id: `vue-ui-waffle_${P.value}`,
+      ref: U,
+      id: `vue-ui-waffle_${k.value}`,
       style: X(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      onMouseenter: a[3] || (a[3] = () => v(ye)(!0)),
-      onMouseleave: a[4] || (a[4] = () => v(ye)(!1))
+      onMouseenter: a[3] || (a[3] = () => c(be)(!0)),
+      onMouseleave: a[4] || (a[4] = () => c(be)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), z(Nt, {
+      e.value.userOptions.buttons.annotator ? (s(), N(Nt, {
         key: 0,
-        parent: V.value,
+        parent: U.value,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: Z.value,
-        onClose: ue
+        active: ee.value,
+        onClose: se
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
-      qe.value ? (s(), n("div", {
+      qe.value ? (s(), r("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: de,
+        ref: pe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : y("", !0),
-      e.value.style.chart.title.text ? (s(), n("div", {
+      e.value.style.chart.title.text ? (s(), r("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ie,
+        ref: ce,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), z(Tt, {
-          key: `title_${he.value}`,
+        (s(), N(It, {
+          key: `title_${ye.value}`,
           config: {
             title: {
               cy: "waffle-title",
@@ -464,39 +461,39 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
           }
         }, null, 8, ["config"]))
       ], 512)) : y("", !0),
-      e.value.userOptions.show && Y.value && (v(ge) || v(le)) ? (s(), z(St, {
+      e.value.userOptions.show && Y.value && (c(me) || c(ae)) ? (s(), N(St, {
         ref_key: "details",
-        ref: Ee,
-        key: `user_options_${ne.value}`,
+        ref: We,
+        key: `user_options_${ve.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: v(we),
-        isImaging: v(ke),
-        uid: P.value,
+        isPrinting: c(xe),
+        isImaging: c(_e),
+        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: D.value,
-        isTooltip: T.value.showTooltip,
+        isFullscreen: j.value,
+        isTooltip: L.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: V.value,
+        chartElement: U.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: Z.value,
+        isAnnotation: ee.value,
         onToggleFullscreen: et,
-        onGeneratePdf: v(xe),
-        onGenerateCsv: Oe,
-        onGenerateImage: v(Ce),
-        onToggleTable: Ae,
-        onToggleTooltip: Fe,
-        onToggleAnnotator: ue,
+        onGeneratePdf: c(Ce),
+        onGenerateCsv: Ae,
+        onGenerateImage: c($e),
+        onToggleTable: Fe,
+        onToggleTooltip: ze,
+        onToggleAnnotator: se,
         style: X({
-          visibility: v(ge) ? v(le) ? "visible" : "hidden" : "visible"
+          visibility: c(me) ? c(ae) ? "visible" : "hidden" : "visible"
         })
-      }, at({ _: 2 }, [
+      }, Ve({ _: 2 }, [
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: b(() => [
@@ -535,154 +532,171 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
-            g(t.$slots, "optionFullscreen", U(G({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+            g(t.$slots, "optionFullscreen", B(V({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
-            g(t.$slots, "optionAnnotator", U(G({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+            g(t.$slots, "optionAnnotator", B(V({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "6"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
-      Y.value ? (s(), n("svg", {
+      Y.value ? (s(), r("svg", {
         key: 4,
-        xmlns: v(pt),
-        class: Be({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
-        viewBox: `0 0 ${L.value.width <= 0 ? 10 : L.value.width} ${L.value.height <= 0 ? 10 : L.value.height}`,
+        xmlns: c(pt),
+        class: Be({ "vue-data-ui-fullscreen--on": j.value, "vue-data-ui-fulscreen--off": !j.value }),
+        viewBox: `0 0 ${F.value.width <= 0 ? 10 : F.value.width} ${F.value.height <= 0 ? 10 : F.value.height}`,
         style: X(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Ve(zt),
-        k("defs", null, [
-          (s(!0), n(I, null, R(r.value, (l, o) => (s(), n("radialGradient", {
+        ne(zt),
+        x("defs", null, [
+          (s(!0), r(_, null, O(n.value, (l, o) => (s(), r("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
             fx: "50%",
             fy: "50%",
-            id: `gradient_${P.value}_${o}`
+            id: `gradient_${k.value}_${o}`
           }, [
-            k("stop", {
+            x("stop", {
               offset: "0%",
-              "stop-color": v(ft)(v(yt)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
-            }, null, 8, Gt),
-            k("stop", {
+              "stop-color": c(yt)(c(ft)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
+            }, null, 8, Rt),
+            x("stop", {
               offset: "100%",
               "stop-color": l.color
-            }, null, 8, Rt)
-          ], 8, Ut))), 256))
+            }, null, 8, jt)
+          ], 8, Gt))), 256))
         ]),
-        k("defs", null, [
-          k("filter", {
-            id: `blur_${P.value}`,
+        x("defs", null, [
+          x("filter", {
+            id: `blur_${k.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
-          }, qt, 8, Wt)
+          }, Ht, 8, Et)
         ]),
-        e.value.useCustomCells && r.value.length ? (s(!0), n(I, { key: 0 }, R(H.value, (l, o) => (s(), n("foreignObject", {
+        e.value.useCustomCells && n.value.length ? (s(!0), r(_, { key: 0 }, O(G.value, (l, o) => (s(), r("foreignObject", {
           x: l.x,
           y: l.y,
-          height: A.value <= 0 ? 1e-4 : A.value,
-          width: O.value <= 0 ? 1e-4 : O.value,
+          height: T.value <= 0 ? 1e-4 : T.value,
+          width: I.value <= 0 ? 1e-4 : I.value,
           class: "vue-ui-waffle-custom-cell-foreignObject"
         }, [
-          g(t.$slots, "cell", U(G({ cell: { ...l, color: r.value[o].color, ...r.value[o] }, isSelected: [null, void 0].includes(B.value) ? !0 : r.value[o].serieIndex === B.value })), void 0, !0)
-        ], 8, Ht))), 256)) : y("", !0),
-        !r.value.length && !e.value.useCustomCells ? (s(), n("rect", {
+          g(t.$slots, "cell", B(V({ cell: { ...l, color: n.value[o].color, ...n.value[o] }, isSelected: [null, void 0].includes(D.value) ? !0 : n.value[o].serieIndex === D.value })), void 0, !0)
+        ], 8, Xt))), 256)) : y("", !0),
+        !n.value.length && !e.value.useCustomCells ? (s(), r("rect", {
           key: 1,
           x: 12,
           y: 12,
-          height: C.value.height - 24,
-          width: C.value.width - 24,
+          height: $.value.height - 24,
+          width: $.value.width - 24,
           rx: 3,
           fill: "none",
           stroke: "black"
-        }, null, 8, Xt)) : r.value.length && !e.value.useCustomCells ? (s(), n(I, { key: 2 }, [
-          (s(!0), n(I, null, R(H.value, (l, o) => (s(), n("rect", {
+        }, null, 8, Yt)) : n.value.length && !e.value.useCustomCells ? (s(), r(_, { key: 2 }, [
+          t.$slots.pattern ? (s(), r("g", Jt, [
+            (s(!0), r(_, null, O(oe.value, (l) => (s(), r("defs", null, [
+              g(t.$slots, "pattern", B(V({ seriesIndex: l.absoluteIndex, patternId: `pattern_${k.value}_${l.absoluteIndex}` })), void 0, !0)
+            ]))), 256))
+          ])) : y("", !0),
+          (s(!0), r(_, null, O(G.value, (l, o) => (s(), r("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: A.value <= 0 ? 1e-4 : A.value,
-            width: O.value <= 0 ? 1e-4 : O.value,
+            height: T.value <= 0 ? 1e-4 : T.value,
+            width: I.value <= 0 ? 1e-4 : I.value,
             fill: "white",
             stroke: e.value.style.chart.layout.rect.stroke,
             "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
-            filter: oe(r.value[o].serieIndex)
-          }, null, 8, Yt))), 256)),
-          (s(!0), n(I, null, R(H.value, (l, o) => (s(), n("rect", {
+            filter: Q(n.value[o].serieIndex)
+          }, null, 8, Kt))), 256)),
+          (s(!0), r(_, null, O(G.value, (l, o) => (s(), r("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: A.value <= 0 ? 1e-4 : A.value,
-            width: O.value <= 0 ? 1e-4 : O.value,
-            fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${P.value}_${o})` : r.value[o].color,
+            height: T.value <= 0 ? 1e-4 : T.value,
+            width: I.value <= 0 ? 1e-4 : I.value,
+            fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${k.value}_${o})` : n.value[o].color,
             stroke: e.value.style.chart.layout.rect.stroke,
             "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
-            filter: oe(r.value[o].serieIndex)
-          }, null, 8, Jt))), 256))
+            filter: Q(n.value[o].serieIndex)
+          }, null, 8, Qt))), 256)),
+          t.$slots.pattern ? (s(), r("g", Zt, [
+            (s(!0), r(_, null, O(G.value, (l, o) => (s(), r("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: I.value <= 0 ? 1e-4 : I.value,
+              fill: `url(#pattern_${k.value}_${n.value[o].absoluteIndex})`,
+              stroke: "none",
+              filter: Q(n.value[o].serieIndex)
+            }, null, 8, el))), 256))
+          ])) : y("", !0)
         ], 64)) : y("", !0),
-        (s(!0), n(I, null, R(H.value, (l, o) => (s(), n(I, null, [
-          r.value.length && !F.value && !e.value.style.chart.layout.grid.vertical && e.value.style.chart.layout.labels.captions.show && (r.value[o].isFirst && l.position < e.value.style.chart.layout.grid.size - 2 || r.value[o].isAbsoluteFirst && o % e.value.style.chart.layout.grid.size === 0 && r.value[o].absoluteStartIndex) ? (s(), n("foreignObject", {
+        (s(!0), r(_, null, O(G.value, (l, o) => (s(), r(_, null, [
+          n.value.length && !z.value && !e.value.style.chart.layout.grid.vertical && e.value.style.chart.layout.labels.captions.show && (n.value[o].isFirst && l.position < e.value.style.chart.layout.grid.size - 2 || n.value[o].isAbsoluteFirst && o % e.value.style.chart.layout.grid.size === 0 && n.value[o].absoluteStartIndex) ? (s(), r("foreignObject", {
             key: 0,
             x: l.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2,
             y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2,
             height: K.value <= 0 ? 1e-4 : K.value,
-            width: E.value * e.value.style.chart.layout.grid.size <= 0 ? 1e-4 : E.value * e.value.style.chart.layout.grid.size,
-            filter: oe(r.value[o].serieIndex)
+            width: q.value * e.value.style.chart.layout.grid.size <= 0 ? 1e-4 : q.value * e.value.style.chart.layout.grid.size,
+            filter: Q(n.value[o].serieIndex)
           }, [
-            k("div", {
+            x("div", {
               class: "vue-ui-waffle-caption",
-              style: X(`height: 100%; width: 100%; font-size:${e.value.style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${E.value / 12}px;color:${v(gt)(r.value[o].color)};gap:2px`)
+              style: X(`height: 100%; width: 100%; font-size:${e.value.style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${q.value / 12}px;color:${c(gt)(n.value[o].color)};gap:2px`)
             }, [
-              e.value.style.chart.layout.labels.captions.showSerieName ? (s(), n("span", Qt, S(e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? v(bt)({ source: r.value[o].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : r.value[o].name) + ": ", 1)) : y("", !0),
-              e.value.style.chart.layout.labels.captions.showPercentage ? (s(), n("span", Zt, S(v(x)({ v: r.value[o].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage })), 1)) : y("", !0),
-              e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), n("span", el, " (" + S(v(W)(
+              e.value.style.chart.layout.labels.captions.showSerieName ? (s(), r("span", ll, A(e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? c(bt)({ source: n.value[o].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : n.value[o].name) + ": ", 1)) : y("", !0),
+              e.value.style.chart.layout.labels.captions.showPercentage ? (s(), r("span", al, A(c(C)({ v: n.value[o].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage })), 1)) : y("", !0),
+              e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), r("span", ol, " (" + A(c(E)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
-                r.value[o].value,
-                v(x)({
+                n.value[o].value,
+                c(C)({
                   p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                  v: r.value[o].value,
+                  v: n.value[o].value,
                   s: e.value.style.chart.layout.labels.dataLabels.suffix,
                   r: e.value.style.chart.layout.labels.captions.roundingValue
                 }),
-                { datapoint: r.value[o], position: l }
+                { datapoint: n.value[o], position: l }
               )) + ") ", 1)) : y("", !0),
-              !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), n("span", tl, S(v(W)(
+              !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), r("span", ul, A(c(E)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
-                r.value[o].value,
-                v(x)({
+                n.value[o].value,
+                c(C)({
                   p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                  v: r.value[o].value,
+                  v: n.value[o].value,
                   s: e.value.style.chart.layout.labels.dataLabels.suffix,
                   r: e.value.style.chart.layout.labels.captions.roundingValue
                 }),
-                { datapoint: r.value[o], position: l }
+                { datapoint: n.value[o], position: l }
               )), 1)) : y("", !0)
             ], 4)
-          ], 8, Kt)) : y("", !0)
+          ], 8, tl)) : y("", !0)
         ], 64))), 256)),
-        (s(!0), n(I, null, R(H.value, (l, o) => (s(), n("rect", {
+        (s(!0), r(_, null, O(G.value, (l, o) => (s(), r("rect", {
           onMouseover: (u) => Ze(o),
           onMouseleave: a[0] || (a[0] = (u) => {
-            ee.value = !1, B.value = null;
+            te.value = !1, D.value = null;
           }),
           x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
           y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
           height: K.value <= 0 ? 1e-4 : K.value,
-          width: E.value <= 0 ? 1e-4 : E.value,
+          width: q.value <= 0 ? 1e-4 : q.value,
           fill: "transparent",
           stroke: "none"
-        }, null, 40, ll))), 256)),
-        g(t.$slots, "svg", { svg: L.value }, void 0, !0)
-      ], 14, Dt)) : y("", !0),
-      t.$slots.watermark ? (s(), n("div", al, [
-        g(t.$slots, "watermark", U(G({ isPrinting: v(we) || v(ke) })), void 0, !0)
+        }, null, 40, sl))), 256)),
+        g(t.$slots, "svg", { svg: F.value }, void 0, !0)
+      ], 14, Ut)) : y("", !0),
+      t.$slots.watermark ? (s(), r("div", rl, [
+        g(t.$slots, "watermark", B(V({ isPrinting: c(xe) || c(_e) })), void 0, !0)
       ])) : y("", !0),
-      Y.value ? y("", !0) : (s(), z(At, {
+      Y.value ? y("", !0) : (s(), N(At, {
         key: 6,
         config: {
           type: "waffle",
@@ -694,52 +708,66 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
           }
         }
       }, null, 8, ["config"])),
-      k("div", {
+      x("div", {
         ref_key: "chartLegend",
-        ref: ce
+        ref: de
       }, [
-        e.value.style.chart.legend.show ? (s(), z(Ot, {
-          key: `legend_${fe.value}`,
-          legendSet: M.value,
+        e.value.style.chart.legend.show ? (s(), N(Ot, {
+          key: `legend_${ge.value}`,
+          legendSet: R.value,
           config: Qe.value,
-          onClickMarker: a[1] || (a[1] = ({ legend: l }) => Le(l.uid))
-        }, {
+          onClickMarker: a[1] || (a[1] = ({ legend: l }) => Oe(l.uid))
+        }, Ve({
           item: b(({ legend: l }) => [
-            k("div", {
+            x("div", {
               onClick: (o) => l.segregate(),
               style: X(`opacity:${p.value.includes(l.uid) ? 0.5 : 1}`)
             }, [
-              Me(S(l.name) + ": " + S(v(W)(
+              Me(A(l.name) + ": " + A(c(E)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
                 l.value,
-                v(x)({
+                c(C)({
                   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: F.value
+                  isAnimating: z.value
                 }),
                 { datapoint: l }
               )) + " ", 1),
-              p.value.includes(l.uid) ? (s(), n("span", sl, " ( - % ) ")) : (s(), n("span", ul, " (" + S(isNaN(l.value / _.value) ? "-" : v(x)({ v: l.value / _.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: F.value })) + ") ", 1))
-            ], 12, ol)
+              p.value.includes(l.uid) ? (s(), r("span", vl, " ( - % ) ")) : (s(), r("span", il, " (" + A(isNaN(l.value / S.value) ? "-" : c(C)({ v: l.value / S.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: z.value })) + ") ", 1))
+            ], 12, nl)
           ]),
-          _: 1
-        }, 8, ["legendSet", "config"])) : g(t.$slots, "legend", {
+          _: 2
+        }, [
+          t.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: b(({ legend: l, index: o }) => [
+              ne(Vt, {
+                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"])) : g(t.$slots, "legend", {
           key: 1,
-          legend: M.value
+          legend: R.value
         }, void 0, !0)
       ], 512),
-      t.$slots.source ? (s(), n("div", {
+      t.$slots.source ? (s(), r("div", {
         key: 7,
         ref_key: "source",
-        ref: ve,
+        ref: he,
         dir: "auto"
       }, [
         g(t.$slots, "source", {}, void 0, !0)
       ], 512)) : y("", !0),
-      Ve(Pt, {
-        show: T.value.showTooltip && ee.value && p.value.length < m.dataset.length,
+      ne(Pt, {
+        show: L.value.showTooltip && te.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,
@@ -748,25 +776,25 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: V.value,
-        content: te.value,
+        parent: U.value,
+        content: le.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         fontSize: e.value.style.chart.tooltip.fontSize,
-        isFullscreen: D.value
+        isFullscreen: j.value
       }, {
         "tooltip-before": b(() => [
-          g(t.$slots, "tooltip-before", U(G({ ...ae.value })), void 0, !0)
+          g(t.$slots, "tooltip-before", B(V({ ...ue.value })), void 0, !0)
         ]),
         "tooltip-after": b(() => [
-          g(t.$slots, "tooltip-after", U(G({ ...ae.value })), void 0, !0)
+          g(t.$slots, "tooltip-after", B(V({ ...ue.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen"]),
-      Y.value ? (s(), z(Ft, {
+      Y.value ? (s(), N(Ft, {
         key: 8,
         hideDetails: "",
         config: {
-          open: T.value.showTable,
+          open: L.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -779,32 +807,32 @@ const Ue = (j) => (ut("data-v-a0b27ef9"), j = j(), st(), j), Mt = ["id"], Dt = [
         }
       }, {
         content: b(() => [
-          (s(), z(Lt, {
-            key: `table_${pe.value}`,
-            colNames: Q.value.colNames,
-            head: Q.value.head,
-            body: Q.value.body,
-            config: Q.value.config,
+          (s(), N(Lt, {
+            key: `table_${fe.value}`,
+            colNames: Z.value.colNames,
+            head: Z.value.head,
+            body: Z.value.body,
+            config: Z.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[2] || (a[2] = (l) => T.value.showTable = !1)
+            onClose: a[2] || (a[2] = (l) => L.value.showTable = !1)
           }, {
             th: b(({ th: l }) => [
-              k("div", {
+              x("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, rl)
+              }, null, 8, cl)
             ]),
             td: b(({ td: l }) => [
-              Me(S(l.name || l), 1)
+              Me(A(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : y("", !0)
-    ], 46, Mt));
+    ], 46, Dt));
   }
-}, _l = /* @__PURE__ */ Vt(nl, [["__scopeId", "data-v-a0b27ef9"]]);
+}, Pl = /* @__PURE__ */ Mt(dl, [["__scopeId", "data-v-8a0b99ad"]]);
 export {
-  _l as default
+  Pl as default
 };