vue-data-ui 3.2.7 → 3.3.0

package/dist/{vue-ui-treemap-B4-IPDxV.js → vue-ui-treemap-SQ2f5wbN.js}

@@ -1,30 +1,31 @@
-import { defineAsyncComponent as te, useSlots as Wt, onMounted as yt, computed as b, ref as m, shallowRef as U, toRefs as Gt, watch as ke, onBeforeUnmount as Xt, createElementBlock as y, openBlock as d, unref as c, normalizeStyle as M, normalizeClass as Le, createBlock as Z, createCommentVNode as _, createElementVNode as O, createVNode as we, createSlots as bt, withCtx as T, renderSlot as C, normalizeProps as le, guardReactiveProps as oe, Fragment as Ce, renderList as Me, withKeys as kt, withModifiers as Be, mergeProps as Ve, createTextVNode as $e, toDisplayString as H, Teleport as qt, resolveDynamicComponent as Yt, nextTick as jt } from "vue";
-import { c as Te, t as Zt, b as Kt, p as F, e as Jt, o as wt, f as Qt, h as de, a as xe, d as he, X as el, m as Ct, E as $t, z as Tt, x as tl, y as ll, A as ol } from "./lib-BEpWEyMm.js";
-import { t as al, u as nl } from "./useResponsive-DfdjqQps.js";
-import { u as sl, a as xt } from "./useNestedProp-BOk-tPdu.js";
-import { u as ul, B as rl } from "./BaseScanner-BgWxam9d.js";
-import { u as il } from "./usePrinter-w23K-ezx.js";
-import { u as cl } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as vl } from "./useChartAccessibility-9icAAmYg.js";
-import dl from "./img-DjWwQXVS.js";
-import hl from "./Title-DG2nloSB.js";
-import { t as pl } from "./themes-Dw-dDudK.js";
-import fl from "./Legend-BpoFJ8fc.js";
-import _t from "./BaseIcon-Bz-1GQhu.js";
-import { _ as gl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function Ot(n, r) {
+import { defineAsyncComponent as ee, useSlots as Kt, onMounted as bt, computed as m, ref as y, shallowRef as U, toRefs as Jt, watch as ke, onBeforeUnmount as Qt, createElementBlock as b, openBlock as h, unref as d, normalizeStyle as L, normalizeClass as Me, createBlock as Z, createCommentVNode as O, createElementVNode as _, createVNode as we, createSlots as kt, withCtx as T, renderSlot as C, normalizeProps as te, guardReactiveProps as le, Fragment as Ce, renderList as Ve, withKeys as wt, withModifiers as Ee, mergeProps as Ue, createTextVNode as $e, toDisplayString as se, Teleport as el, resolveDynamicComponent as tl, nextTick as ll } from "vue";
+import { c as Te, t as ol, b as al, p as I, e as nl, o as Ct, f as sl, h as de, a as xe, d as he, X as ul, m as $t, E as Tt, z as xt, x as rl, y as il, A as cl } from "./lib-GIYcnm0E.js";
+import { t as vl, u as dl } from "./useResponsive-DfdjqQps.js";
+import { u as hl, a as Ot } from "./useNestedProp-mxyyqd0B.js";
+import { u as pl, B as fl } from "./BaseScanner-BgWxam9d.js";
+import { u as gl } from "./usePrinter-DYRFiw7X.js";
+import { u as ml } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as yl } from "./useChartAccessibility-9icAAmYg.js";
+import bl from "./img-6wPuVVtk.js";
+import kl from "./Title-D17CJXko.js";
+import { t as wl } from "./themes-Dw-dDudK.js";
+import Cl from "./Legend-DsogCeTb.js";
+import _t from "./BaseIcon-CtqN7W_g.js";
+import { u as $l } from "./useSvgExport-B7-Vrjtu.js";
+import { _ as Tl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function St(n, r) {
   const s = n.length;
   if (s === 0)
     throw new Error(`Max aspect ratio cannot be computed: ${n} is an empty array`);
   {
-    let i = 1 / 0, u = -1 / 0, h = 0;
+    let i = 1 / 0, u = -1 / 0, p = 0;
     for (let g = 0; g < s; g += 1) {
       const f = n[g].normalizedValue;
-      f < i && (i = f), f > u && (u = f), h += f;
+      f < i && (i = f), f > u && (u = f), p += f;
     }
     return Math.max(
-      r ** 2 * u / h ** 2,
-      h ** 2 / (r ** 2 * i)
+      r ** 2 * u / p ** 2,
+      p ** 2 / (r ** 2 * i)
     );
   }
 }
@@ -37,78 +38,78 @@ function At(n) {
     y1: s + u
   };
 }
-function ml(n, r, s) {
+function xl(n, r, s) {
   if (n.length === 0)
     return !0;
   {
-    const i = n.concat(r), u = Ot(
+    const i = n.concat(r), u = St(
       n,
       s
-    ), h = Ot(i, s);
-    return u >= h;
+    ), p = St(i, s);
+    return u >= p;
   }
 }
-function yl(n) {
+function Ol(n) {
   const r = [], s = n.length;
   for (let i = 0; i < s; i += 1) {
-    const u = n[i], h = u.length;
-    for (let v = 0; v < h; v += 1)
+    const u = n[i], p = u.length;
+    for (let v = 0; v < p; v += 1)
       r.push(u[v]);
   }
   return r;
 }
-function bl(n, r) {
+function _l(n, r) {
   const s = {
     ...r,
     children: n
   };
   return Ft(s);
 }
-function kl(n) {
+function Sl(n) {
   return (n.x1 - n.x0) * (n.y1 - n.y0);
 }
-function St(n, r) {
-  const { width: s, height: i, xOffset: u, yOffset: h } = Ee(r), v = n.length, g = n.map((w) => w.normalizedValue || 0).reduce((w, I) => w + I, 0), f = g / i, W = g / s;
-  let P = u, k = h;
+function It(n, r) {
+  const { width: s, height: i, xOffset: u, yOffset: p } = He(r), v = n.length, g = n.map((w) => w.normalizedValue || 0).reduce((w, F) => w + F, 0), f = g / i, H = g / s;
+  let P = u, k = p;
   const $ = [];
   if (s >= i) {
     for (let w = 0; w < v; w += 1) {
-      const I = n[w], B = k + I.normalizedValue / f, A = {
+      const F = n[w], M = k + F.normalizedValue / f, S = {
         x0: P,
         y0: k,
         x1: P + f,
-        y1: B
-      }, N = Object.assign({}, I, A);
-      k = B, $.push(N);
+        y1: M
+      }, N = Object.assign({}, F, S);
+      k = M, $.push(N);
     }
     return $;
   } else {
     for (let w = 0; w < v; w += 1) {
-      const I = n[w], B = P + I.normalizedValue / W, A = {
+      const F = n[w], M = P + F.normalizedValue / H, S = {
         x0: P,
         y0: k,
-        x1: B,
-        y1: k + W
-      }, N = Object.assign({}, I, A);
-      P = B, $.push(N);
+        x1: M,
+        y1: k + H
+      }, N = Object.assign({}, F, S);
+      P = M, $.push(N);
     }
     return $;
   }
 }
-function wl(n) {
-  const r = Ee(n), s = r.width, i = r.height;
+function Al(n) {
+  const r = He(n), s = r.width, i = r.height;
   return Math.min(s, i);
 }
-function Cl(n, r) {
-  const s = n.length, i = n.map((f) => f.value ?? 0).reduce((f, W) => f + W, 0), u = r / i, h = [];
+function Il(n, r) {
+  const s = n.length, i = n.map((f) => f.value ?? 0).reduce((f, H) => f + H, 0), u = r / i, p = [];
   let v, g;
   for (let f = 0; f < s; f += 1)
     g = n[f], v = Object.assign({}, g, {
       normalizedValue: g.value * (u || 0)
-    }), h.push(v);
-  return h;
+    }), p.push(v);
+  return p;
 }
-function Ee(n) {
+function He(n) {
   const { x0: r, y0: s, x1: i, y1: u } = n;
   return {
     xOffset: r,
@@ -117,25 +118,25 @@ function Ee(n) {
     height: u - s
   };
 }
-function $l(n, r, s, i) {
-  let u = n, h = r, v = s, g = i;
+function Fl(n, r, s, i) {
+  let u = n, p = r, v = s, g = i;
   for (; ; ) {
     const f = u.length;
     if (f === 0) {
-      const $ = St(h, v);
+      const $ = It(p, v);
       return g.concat($);
     }
-    const W = wl(v), P = u[0], k = u.slice(1, f);
-    if (ml(h, P, W)) {
-      const $ = h.concat(P);
-      u = k, h = $, v = v, g = g;
+    const H = Al(v), P = u[0], k = u.slice(1, f);
+    if (xl(p, P, H)) {
+      const $ = p.concat(P);
+      u = k, p = $, v = v, g = g;
     } else {
-      const $ = h.length;
+      const $ = p.length;
       let w = 0;
       for (let N = 0; N < $; N += 1)
-        w += h[N].normalizedValue;
-      const I = Tl(v, w), B = St(h, v), A = g.concat(B);
-      u = u, h = [], v = I, g = A;
+        w += p[N].normalizedValue;
+      const F = Dl(v, w), M = It(p, v), S = g.concat(M);
+      u = u, p = [], v = F, g = S;
     }
   }
 }
@@ -143,21 +144,21 @@ function Ft(n) {
   if (typeof n.children > "u" || !n.children.length)
     return [n];
   {
-    const r = Cl(
+    const r = Il(
       n.children,
-      kl(n)
-    ), s = $l(r, [], n, []), i = s.length, u = [];
+      Sl(n)
+    ), s = Fl(r, [], n, []), i = s.length, u = [];
     for (let v = 0; v < i; v += 1)
       u.push(Ft(s[v]));
-    return yl(u);
+    return Ol(u);
   }
 }
-function Tl(n, r) {
-  const { width: s, height: i, xOffset: u, yOffset: h } = Ee(n);
+function Dl(n, r) {
+  const { width: s, height: i, xOffset: u, yOffset: p } = He(n);
   if (s >= i) {
     const v = r / i, g = s - v, f = {
       xOffset: u + v,
-      yOffset: h,
+      yOffset: p,
       width: g,
       height: i
     };
@@ -165,26 +166,23 @@ function Tl(n, r) {
   } else {
     const v = r / s, g = i - v, f = {
       xOffset: u,
-      yOffset: h + v,
+      yOffset: p + v,
       width: s,
       height: g
     };
     return At(f);
   }
 }
-const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], Al = { class: "vue-ui-treemap-crumb-unit" }, Sl = { class: "vue-ui-treemap-crumb-unit-label" }, Fl = {
+const Nl = ["id"], Rl = ["id"], Ll = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], Pl = { class: "vue-ui-treemap-crumb-unit" }, zl = { class: "vue-ui-treemap-crumb-unit-label" }, Bl = {
   key: 0,
   style: { width: "24px", display: "flex", "align-items": "center" }
-}, Il = {
+}, Ml = {
   key: 0,
   class: "vue-ui-treemap-crumb-unit-arrow"
-}, Dl = ["xmlns", "viewBox"], Nl = { key: 0 }, Rl = ["id"], Pl = ["stop-color"], zl = ["stop-color"], Ll = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], Ml = ["x", "y", "height", "width"], Bl = {
-  style: { width: "100%", height: "100%" },
-  class: "vue-ui-treemap-cell"
-}, Vl = {
+}, Vl = ["xmlns", "viewBox"], El = { key: 0 }, Ul = ["id"], Hl = ["stop-color"], Wl = ["stop-color"], Gl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], Xl = ["x", "y", "height", "width"], ql = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, El = ["id"], Ul = ["onClick"], Hl = ["innerHTML"], Wl = {
+}, Yl = ["id"], jl = ["onClick"], Zl = ["innerHTML"], Kl = {
   __name: "vue-ui-treemap",
   props: {
     config: {
@@ -202,14 +200,14 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
   },
   emits: ["selectLegend", "selectDatapoint"],
   setup(n, { expose: r, emit: s }) {
-    const i = te(() => import("./DataTable-BvjacRbw.js")), u = te(() => import("./PenAndPaper-CR8q353D.js")), h = te(() => import("./vue-ui-accordion-CeMTgpl0.js")), v = te(() => import("./Tooltip-BOXz8skU.js")), g = te(() => import("./UserOptions-DsTgvAok.js")), f = te(() => import("./PackageVersion-Cwrh45ON.js")), W = te(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_treemap: P } = sl(), k = n, $ = s, w = Wt();
-    yt(() => {
+    const i = ee(() => import("./DataTable-BeI6gYJX.js")), u = ee(() => import("./PenAndPaper-BxbYiPy4.js")), p = ee(() => import("./vue-ui-accordion-Dch9YrCi.js")), v = ee(() => import("./Tooltip-CtVdvbZi.js")), g = ee(() => import("./UserOptions-B3vCIe-u.js")), f = ee(() => import("./PackageVersion-C9oklnuy.js")), H = ee(() => import("./BaseDraggableDialog-q3pgSDTz.js")), { vue_ui_treemap: P } = hl(), k = n, $ = s, w = Kt();
+    bt(() => {
       w["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
     });
-    const I = b(() => !!k.dataset && k.dataset.length), B = b(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), A = m(Te()), N = m(!1), _e = m(""), K = m(!1), Ue = m(0), z = m([]), V = U(null), He = U(null), We = U(null), Ge = U(null), Xe = U(null), qe = m(0), Oe = m(0), Ae = m(0), x = m([]), Se = m(null), Ye = m(!1), ue = m(null), Fe = m(null), e = m(Ne()), { loading: re, FINAL_DATASET: Ie, manualLoading: It } = ul({
-      ...Gt(k),
+    const F = m(() => !!k.dataset && k.dataset.length), M = m(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), S = y(Te()), N = y(!1), Oe = y(""), K = y(!1), We = y(0), z = y([]), V = U(null), Ge = U(null), Xe = U(null), qe = U(null), Ye = U(null), je = y(0), _e = y(0), Se = y(0), x = y([]), Ae = y(null), Ze = y(!1), ue = y(null), Ie = y(null), e = y(Re()), { loading: re, FINAL_DATASET: Fe, manualLoading: Dt } = pl({
+      ...Jt(k),
       FINAL_CONFIG: e,
-      prepareConfig: Ne,
+      prepareConfig: Re,
       skeletonDataset: [
         {
           name: "_",
@@ -226,7 +224,7 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
           ]
         }
       ],
-      skeletonConfig: Zt({
+      skeletonConfig: ol({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -248,28 +246,28 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
           }
         }
       })
-    }), { userOptionsVisible: De, setUserOptionsVisibility: je, keepUserOptionState: Ze } = cl({ config: e.value }), { svgRef: Ke } = vl({ config: e.value.style.chart.title });
-    function Ne() {
-      const t = xt({
+    }), { userOptionsVisible: De, setUserOptionsVisibility: Ke, keepUserOptionState: Je } = ml({ config: e.value }), { svgRef: Ne } = yl({ config: e.value.style.chart.title });
+    function Re() {
+      const t = Ot({
         userConfig: k.config,
         defaultConfig: P
       });
       return t.theme ? {
-        ...xt({
-          userConfig: pl.vue_ui_treemap[t.theme] || k.config,
+        ...Ot({
+          userConfig: wl.vue_ui_treemap[t.theme] || k.config,
           defaultConfig: t
         }),
-        customPalette: Kt[t.theme] || F
+        customPalette: al[t.theme] || I
       } : t;
     }
     ke(() => k.config, (t) => {
-      re.value || (e.value = Ne()), De.value = !e.value.userOptions.showOnChartHover, qe.value += 1, Oe.value += 1, Ae.value += 1, D.value.showTable = e.value.table.show, D.value.showTooltip = e.value.style.chart.tooltip.show;
+      re.value || (e.value = Re()), De.value = !e.value.userOptions.showOnChartHover, je.value += 1, _e.value += 1, Se.value += 1, D.value.showTable = e.value.table.show, D.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: Je, isImaging: Qe, generatePdf: et, generateImage: tt } = il({
-      elementId: `treemap_${A.value}`,
+    const { isPrinting: Qe, isImaging: et, generatePdf: tt, generateImage: lt } = gl({
+      elementId: `treemap_${S.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-treemap",
       options: e.value.userOptions.print
-    }), Dt = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), pe = b(() => Jt(e.value.customPalette)), D = m({
+    }), Nt = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), pe = m(() => nl(e.value.customPalette)), D = y({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
@@ -279,79 +277,79 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         showTooltip: e.value.style.chart.tooltip.show
       };
     }, { immediate: !0 });
-    const G = m({
+    const W = y({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
-    }), J = b(() => ({
-      bottom: G.value.height - e.value.style.chart.padding.bottom,
-      height: G.value.height - e.value.style.chart.padding.top - e.value.style.chart.padding.bottom,
+    }), J = m(() => ({
+      bottom: W.value.height - e.value.style.chart.padding.bottom,
+      height: W.value.height - e.value.style.chart.padding.top - e.value.style.chart.padding.bottom,
       left: e.value.style.chart.padding.left,
-      right: G.value.width - e.value.style.chart.padding.right,
+      right: W.value.width - e.value.style.chart.padding.right,
       top: e.value.style.chart.padding.top,
-      vbHeight: G.value.height,
-      vbWidth: G.value.width,
-      width: G.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right
-    })), R = m(Ie.value), X = m(R.value), lt = U(/* @__PURE__ */ new Map());
-    function ot(t) {
+      vbHeight: W.value.height,
+      vbWidth: W.value.width,
+      width: W.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right
+    })), R = y(Fe.value), G = y(R.value), ot = U(/* @__PURE__ */ new Map());
+    function at(t) {
       Array.isArray(t) && t.forEach((o, l) => {
         o.id || (o.id = Te());
-        let a = de(o.color) || lt.value.get(o.id) || pe.value[l] || F[l] || F[l % F.length];
-        a = de(a), lt.value.set(o.id, a), o.color = a, at(o, a);
+        let a = de(o.color) || ot.value.get(o.id) || pe.value[l] || I[l] || I[l % I.length];
+        a = de(a), ot.value.set(o.id, a), o.color = a, nt(o, a);
       });
     }
-    function at(t, o) {
+    function nt(t, o) {
       Array.isArray(t.children) && t.children.forEach((l) => {
-        l.id || (l.id = Te()), l.parentId = t.id, l.color = o, at(l, o);
+        l.id || (l.id = Te()), l.parentId = t.id, l.color = o, nt(l, o);
       });
     }
-    function Nt() {
+    function Rt() {
       if (!x.value.length)
-        X.value = R.value.slice();
+        G.value = R.value.slice();
       else {
         const t = x.value[x.value.length - 1], o = Y(t);
-        X.value = o?.children?.slice() || [];
+        G.value = o?.children?.slice() || [];
       }
     }
     ke(
-      () => Ie.value,
+      () => Fe.value,
       () => {
-        R.value = Ie.value, ot(R.value), Nt(), Ae.value += 1, Oe.value += 1;
+        R.value = Fe.value, at(R.value), Rt(), Se.value += 1, _e.value += 1;
       },
       { deep: !0, immediate: !0, flush: "post" }
     );
-    const q = U(null), ae = U(null);
-    yt(() => {
-      Ye.value = !0, Pt();
+    const X = U(null), oe = U(null);
+    bt(() => {
+      Ze.value = !0, Pt();
     });
-    const Rt = b(() => e.value.debug);
+    const Lt = m(() => e.value.debug);
     function Pt() {
-      if (wt(k.dataset) && Qt({
+      if (Ct(k.dataset) && sl({
         componentName: "VueUiTreemap",
         type: "dataset",
-        debug: Rt.value
-      }), ot(R.value), wt(k.dataset) || (It.value = e.value.loading), e.value.responsive) {
-        const t = al(() => {
-          const { width: o, height: l } = nl({
+        debug: Lt.value
+      }), at(R.value), Ct(k.dataset) || (Dt.value = e.value.loading), e.value.responsive) {
+        const t = vl(() => {
+          const { width: o, height: l } = dl({
             chart: V.value,
-            title: e.value.style.chart.title.text ? He.value : null,
-            legend: e.value.style.chart.legend.show ? We.value : null,
-            source: Ge.value,
-            noTitle: Xe.value
+            title: e.value.style.chart.title.text ? Ge.value : null,
+            legend: e.value.style.chart.legend.show ? Xe.value : null,
+            source: qe.value,
+            noTitle: Ye.value
           });
           requestAnimationFrame(() => {
-            G.value.width = o, G.value.height = l - 12;
+            W.value.width = o, W.value.height = l - 12;
           });
         });
-        q.value && (ae.value && q.value.unobserve(ae.value), q.value.disconnect()), q.value = new ResizeObserver(t), ae.value = V.value.parentNode, q.value.observe(ae.value);
+        X.value && (oe.value && X.value.unobserve(oe.value), X.value.disconnect()), X.value = new ResizeObserver(t), oe.value = V.value.parentNode, X.value.observe(oe.value);
       }
     }
-    Xt(() => {
-      q.value && (ae.value && q.value.unobserve(ae.value), q.value.disconnect());
+    Qt(() => {
+      X.value && (oe.value && X.value.unobserve(oe.value), X.value.disconnect());
     });
-    const ie = b(() => X.value.map((t, o) => ({
+    const ie = m(() => G.value.map((t, o) => ({
       ...t,
-      color: de(t.color) || pe.value[o] || F[o] || F[o % F.length]
-    })).filter((t) => !z.value.includes(t.id))), ne = b(() => R.value.filter((t) => !z.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), nt = b({
+      color: de(t.color) || pe.value[o] || I[o] || I[o % I.length]
+    })).filter((t) => !z.value.includes(t.id))), ae = m(() => R.value.filter((t) => !z.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), st = m({
       get() {
         let t = [...ie.value];
         return e.value.style.chart.layout.sorted && (t = [...ie.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
@@ -362,54 +360,54 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         return t;
       }
     });
-    function st(t, o) {
+    function ut(t, o) {
       return t.value / o;
     }
     function zt(t, o, l) {
-      const a = e.value.style.chart.layout.rects.colorRatio - st(o, l);
-      return Ct(t, a < 0 ? 0 : a);
+      const a = e.value.style.chart.layout.rects.colorRatio - ut(o, l);
+      return $t(t, a < 0 ? 0 : a);
     }
-    function ut(t, o, l, a) {
-      return t.map((p, S) => {
-        const be = zt(de(o) || pe.value[S] || F[S] || F[S % F.length], p, a), Ht = st(p, a);
+    function rt(t, o, l, a) {
+      return t.map((c, A) => {
+        const be = zt(de(o) || pe.value[A] || I[A] || I[A % I.length], c, a), Zt = ut(c, a);
         return {
-          ...p,
+          ...c,
           color: be,
-          proportion: Ht,
+          proportion: Zt,
           parentName: l,
-          children: p.children ? ut(p.children, be, p.name, a) : void 0
+          children: c.children ? rt(c.children, be, c.name, a) : void 0
         };
       });
     }
-    const ce = b(() => bl(
-      nt.value.map((t, o) => {
-        const l = t.children ? t.children.reduce((a, p) => a + p.value, 0) : t.value;
+    const ce = m(() => _l(
+      st.value.map((t, o) => {
+        const l = t.children ? t.children.reduce((a, c) => a + c.value, 0) : t.value;
         return {
           value: t.value,
           id: t.id || Te(),
-          children: t.children ? ut(t.children.sort((a, p) => p.value - a.value), t.color, t.name, l) : void 0,
+          children: t.children ? rt(t.children.sort((a, c) => c.value - a.value), t.color, t.name, l) : void 0,
           color: t.color,
           name: t.name
         };
       }),
       { x0: J.value.left * 2, y0: J.value.top, x1: J.value.width, y1: J.value.height }
     ));
-    function rt({ y0: t, y1: o }) {
+    function it({ y0: t, y1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function it({ x0: t, x1: o }) {
+    function ct({ x0: t, x1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function Q(t) {
+    function q(t) {
       const o = e.value.style.chart.layout.labels.fontSize * (t.proportion * 2 > 1 ? 1 : t.proportion * 2);
       return o < e.value.style.chart.layout.labels.minFontSize ? e.value.style.chart.layout.labels.minFontSize : o;
     }
-    function ct(t) {
-      K.value = t, Ue.value += 1;
+    function vt(t) {
+      K.value = t, We.value += 1;
     }
-    const se = b(() => {
+    const ne = m(() => {
       let t = 0;
-      return Se.value && (t = Se.value.getBoundingClientRect().height), {
+      return Ae.value && (t = Ae.value.getBoundingClientRect().height), {
         startX: 0,
         startY: 0,
         width: J.value.vbWidth,
@@ -428,34 +426,34 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
       }
       return null;
     }
-    const ee = b(() => x.value.length > 0);
+    const Q = m(() => x.value.length > 0);
     function fe(t, o) {
       if (!t) {
-        X.value = R.value.slice(), $("selectDatapoint", void 0), x.value = [];
+        G.value = R.value.slice(), $("selectDatapoint", void 0), x.value = [];
         return;
       }
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
       const l = Y(t.id);
       if (l && l.children?.length)
-        x.value.push(l.id), X.value = l.children.slice(), $("selectDatapoint", t);
+        x.value.push(l.id), G.value = l.children.slice(), $("selectDatapoint", t);
       else if (t.parentId) {
         x.value.push(t.parentId);
         const a = Y(t.parentId);
-        X.value = a.children.slice(), $("selectDatapoint", t);
+        G.value = a.children.slice(), $("selectDatapoint", t);
       } else if (x.value.length > 0) {
         x.value.pop();
         const a = x.value[x.value.length - 1];
         if (a) {
-          const p = Y(a);
-          X.value = p.children.slice();
+          const c = Y(a);
+          G.value = c.children.slice();
         } else
-          X.value = R.value.slice(), x.value = [], $("selectDatapoint", void 0);
+          G.value = R.value.slice(), x.value = [], $("selectDatapoint", void 0);
       }
     }
-    function Lt(t) {
+    function Bt(t) {
       return !!(Y(t.id)?.children?.length || t.parentId);
     }
-    const j = b(() => {
+    const j = m(() => {
       const t = [
         { id: null, label: "All" }
       ];
@@ -472,15 +470,29 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
           });
       }
       return t;
-    }), L = U(null), vt = b(() => R.value.map((t, o) => ({
+    }), B = U(null), Le = m(() => R.value.map((t, o) => ({
       ...t,
-      color: de(t.color) || pe.value[o] || F[o] || F[o % F.length],
+      color: de(t.color) || pe.value[o] || I[o] || I[o % I.length],
       shape: "square"
-    })).sort((t, o) => o.value - t.value).map((t, o) => ({
-      ...t,
-      proportion: t.value / R.value.map((l) => l.value).reduce((l, a) => l + a, 0),
-      opacity: z.value.includes(t.id) ? 0.5 : 1
-    }))), Mt = b(() => ({
+    })).sort((t, o) => o.value - t.value).map((t, o) => {
+      const l = t.value / R.value.map((a) => a.value).reduce((a, c) => a + c, 0);
+      return {
+        ...t,
+        proportion: l,
+        opacity: z.value.includes(t.id) ? 0.5 : 1,
+        display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? xe(
+          e.value.style.chart.layout.labels.formatter,
+          t.value,
+          he({
+            p: e.value.style.chart.layout.labels.prefix,
+            v: t.value,
+            s: e.value.style.chart.layout.labels.suffix,
+            r: e.value.style.chart.legend.roundingValue
+          }),
+          { datapoint: t }
+        ) : ""}${e.value.style.chart.legend.showPercentage ? z.value.includes(t.id) ? `${e.value.style.chart.legend.showValue ? " (" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / ae.value) ? "-" : (t.value / ae.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
+      };
+    })), Mt = m(() => ({
       cy: "treemap-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -489,22 +501,22 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     }));
     function dt(t) {
-      L.value = null, z.value.includes(t.id) ? z.value = z.value.filter((o) => o !== t.id) : z.value.length < k.dataset.length - 1 && z.value.push(t.id), $("selectLegend", nt.value);
-    }
-    function Bt({ datapoint: t, seriesIndex: o }) {
-      L.value = null, N.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+      B.value = null, z.value.includes(t.id) ? z.value = z.value.filter((o) => o !== t.id) : z.value.length < k.dataset.length - 1 && z.value.push(t.id), $("selectLegend", st.value);
     }
-    const Re = m(null);
     function Vt({ datapoint: t, seriesIndex: o }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), L.value = t, Re.value = { datapoint: t, seriesIndex: o, config: e.value, series: ie.value };
+      B.value = null, N.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+    }
+    const Pe = y(null);
+    function Et({ datapoint: t, seriesIndex: o }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), B.value = t, Pe.value = { datapoint: t, seriesIndex: o, config: e.value, series: ie.value };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Tt(l) && ol(() => l({
+      if (xt(l) && cl(() => l({
         seriesIndex: o,
         datapoint: t,
         series: ie.value,
         config: e.value
       })))
-        _e.value = l({
+        Oe.value = l({
           seriesIndex: o,
           datapoint: t,
           series: ie.value,
@@ -522,50 +534,50 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: t, seriesIndex: o }
-        )}</b>`, _e.value = `<div>${a}</div>`;
+        )}</b>`, Oe.value = `<div>${a}</div>`;
       }
       N.value = !0;
     }
-    const E = b(() => {
+    const E = m(() => {
       const t = ce.value.map((l) => ({
         name: l.name,
         color: l.color
       })), o = ce.value.map((l) => l.value);
       return { head: t, body: o };
     });
-    function Pe(t = null) {
-      jt(() => {
-        const o = E.value.head.map((p, S) => [[
-          p.name
-        ], [E.value.body[S]], [isNaN(E.value.body[S] / ne.value) ? "-" : E.value.body[S] / ne.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = tl(l);
-        t ? t(a) : ll({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-treemap" });
+    function ze(t = null) {
+      ll(() => {
+        const o = E.value.head.map((c, A) => [[
+          c.name
+        ], [E.value.body[A]], [isNaN(E.value.body[A] / ae.value) ? "-" : E.value.body[A] / ae.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = rl(l);
+        t ? t(a) : il({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-treemap" });
       });
     }
-    const ge = b(() => {
+    const ge = m(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], o = E.value.head.map((p, S) => {
+      ], o = E.value.head.map((c, A) => {
         const be = xe(
           e.value.style.chart.layout.labels.formatter,
-          E.value.body[S],
+          E.value.body[A],
           he({
             p: e.value.style.chart.layout.labels.prefix,
-            v: E.value.body[S],
+            v: E.value.body[A],
             s: e.value.style.chart.layout.labels.suffix,
             r: e.value.table.td.roundingValue
           })
         );
         return [
           {
-            color: p.color,
-            name: p.name,
+            color: c.color,
+            name: c.name,
             shape: "square"
           },
           be,
-          isNaN(E.value.body[S] / ne.value) ? "-" : he({
-            v: E.value.body[S] / ne.value * 100,
+          isNaN(E.value.body[A] / ae.value) ? "-" : he({
+            v: E.value.body[A] / ae.value * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
@@ -593,7 +605,7 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         config: l
       };
     });
-    function Et() {
+    function Ut() {
       return ce.value;
     }
     function ht() {
@@ -602,33 +614,33 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
     function pt() {
       D.value.showTooltip = !D.value.showTooltip;
     }
-    const me = m(!1);
-    function ze() {
+    const me = y(!1);
+    function Be() {
       me.value = !me.value;
     }
-    const ye = m(null);
+    const ye = y(null);
     function ft(t) {
       ye.value = t;
     }
     function gt() {
       ye.value = null;
     }
-    async function Ut({ scale: t = 2 } = {}) {
+    async function Ht({ scale: t = 2 } = {}) {
       if (!V.value) return;
-      const { width: o, height: l } = V.value.getBoundingClientRect(), a = o / l, { imageUri: p, base64: S } = await dl({ domElement: V.value, base64: !0, img: !0, scale: t });
+      const { width: o, height: l } = V.value.getBoundingClientRect(), a = o / l, { imageUri: c, base64: A } = await bl({ domElement: V.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: p,
-        base64: S,
+        imageUri: c,
+        base64: A,
         title: e.value.style.chart.title.text,
         width: o,
         height: l,
         aspectRatio: a
       };
     }
-    const ve = b(() => {
+    const ve = m(() => {
       const t = e.value.table.useDialog && !e.value.table.show, o = D.value.showTable;
       return {
-        component: t ? W : h,
+        component: t ? H : p,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -659,50 +671,68 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
       e.value.table.show || (t && e.value.table.useDialog && ue.value ? ue.value.open() : "close" in ue.value && ue.value.close());
     });
     function mt() {
-      D.value.showTable = !1, Fe.value && Fe.value.setTableIconState(!1);
+      D.value.showTable = !1, Ie.value && Ie.value.setTableIconState(!1);
+    }
+    const Wt = m(() => Le.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), Gt = m(() => e.value.style.chart.backgroundColor), Xt = m(() => e.value.style.chart.legend), qt = m(() => e.value.style.chart.title), { exportSvg: Yt, getSvg: jt } = $l({
+      svg: Ne,
+      title: qt,
+      legend: Xt,
+      legendItems: Wt,
+      backgroundColor: Gt
+    });
+    async function yt({ isCb: t }) {
+      if (t) {
+        const { blob: o, url: l, text: a, dataUrl: c } = await jt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: c });
+      } else
+        Yt();
     }
     return r({
-      getData: Et,
-      getImage: Ut,
-      generateCsv: Pe,
-      generateImage: tt,
-      generatePdf: et,
+      getData: Ut,
+      getImage: Ht,
+      generateCsv: ze,
+      generateImage: lt,
+      generateSvg: yt,
+      generatePdf: tt,
       toggleTable: ht,
       toggleTooltip: pt,
-      toggleAnnotator: ze,
-      toggleFullscreen: ct
-    }), (t, o) => (d(), y("div", {
+      toggleAnnotator: Be,
+      toggleFullscreen: vt
+    }), (t, o) => (h(), b("div", {
       ref_key: "treemapChart",
       ref: V,
-      class: Le(`vue-ui-treemap ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: M(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `treemap_${A.value}`,
-      onMouseenter: o[2] || (o[2] = () => c(je)(!0)),
-      onMouseleave: o[3] || (o[3] = () => c(je)(!1))
+      class: Me(`vue-data-ui-component vue-ui-treemap ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: L(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `treemap_${S.value}`,
+      onMouseenter: o[2] || (o[2] = () => d(Ke)(!0)),
+      onMouseleave: o[3] || (o[3] = () => d(Ke)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (d(), Z(c(u), {
+      e.value.userOptions.buttons.annotator ? (h(), Z(d(u), {
         key: 0,
-        svgRef: c(Ke),
+        svgRef: d(Ne),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: me.value,
-        onClose: ze
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
-      Dt.value ? (d(), y("div", {
+        onClose: Be
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : O("", !0),
+      Nt.value ? (h(), b("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Xe,
+        ref: Ye,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : _("", !0),
-      e.value.style.chart.title.text ? (d(), y("div", {
+      }, null, 512)) : O("", !0),
+      e.value.style.chart.title.text ? (h(), b("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: He,
-        style: M(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
+        ref: Ge,
+        style: L(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
       }, [
-        (d(), Z(hl, {
-          key: `title_${qe.value}`,
+        (h(), Z(kl, {
+          key: `title_${je.value}`,
           config: {
             title: {
               cy: "treemap-div-title",
@@ -714,23 +744,24 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
             }
           }
         }, null, 8, ["config"]))
-      ], 4)) : _("", !0),
-      O("div", {
-        id: `legend-top-${A.value}`
-      }, null, 8, _l),
-      e.value.userOptions.show && I.value && (c(Ze) || c(De)) ? (d(), Z(c(g), {
+      ], 4)) : O("", !0),
+      _("div", {
+        id: `legend-top-${S.value}`
+      }, null, 8, Rl),
+      e.value.userOptions.show && F.value && (d(Je) || d(De)) ? (h(), Z(d(g), {
         ref_key: "userOptionsRef",
-        ref: Fe,
-        key: `user_option_${Ue.value}`,
+        ref: Ie,
+        key: `user_option_${We.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: c(Je),
-        isImaging: c(Qe),
-        uid: A.value,
+        isPrinting: d(Qe),
+        isImaging: d(et),
+        uid: S.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: K.value,
@@ -743,21 +774,22 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: ct,
-        onGeneratePdf: c(et),
-        onGenerateCsv: Pe,
-        onGenerateImage: c(tt),
+        onToggleFullscreen: vt,
+        onGeneratePdf: d(tt),
+        onGenerateCsv: ze,
+        onGenerateImage: d(lt),
+        onGenerateSvg: yt,
         onToggleTable: ht,
         onToggleTooltip: pt,
-        onToggleAnnotator: ze,
-        style: M({
-          visibility: c(Ze) ? c(De) ? "visible" : "hidden" : "visible"
+        onToggleAnnotator: Be,
+        style: L({
+          visibility: d(Je) ? d(De) ? "visible" : "hidden" : "visible"
         })
-      }, bt({ _: 2 }, [
+      }, kt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: T(({ isOpen: l, color: a }) => [
-            C(t.$slots, "menuIcon", le(oe({ isOpen: l, color: a })), void 0, !0)
+            C(t.$slots, "menuIcon", te(le({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -799,141 +831,149 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: T(({ toggleFullscreen: l, isFullscreen: a }) => [
-            C(t.$slots, "optionFullscreen", le(oe({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+            C(t.$slots, "optionFullscreen", te(le({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: T(({ toggleAnnotator: l, isAnnotator: a }) => [
-            C(t.$slots, "optionAnnotator", le(oe({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+            C(t.$slots, "optionAnnotator", te(le({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
-      j.value.length > 1 ? (d(), y("nav", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : O("", !0),
+      j.value.length > 1 ? (h(), b("nav", {
         key: 4,
         class: "vue-ui-treemap-breadcrumbs",
         "data-dom-to-png-ignore": "",
         ref_key: "breadcrumbsNav",
-        ref: Se
+        ref: Ae
       }, [
-        (d(!0), y(Ce, null, Me(j.value, (l, a) => (d(), y("span", {
+        (h(!0), b(Ce, null, Ve(j.value, (l, a) => (h(), b("span", {
           role: "button",
           tabindex: a < j.value.length - 1 ? 0 : void 0,
           key: l.id || "root",
-          onClick: (p) => a === j.value.length - 1 ? () => {
+          onClick: (c) => a === j.value.length - 1 ? () => {
           } : fe(l.node),
           onKeydown: [
-            kt(Be((p) => a === j.value.length - 1 ? void 0 : fe(l.node), ["prevent"]), ["enter"]),
-            kt(Be((p) => a === j.value.length - 1 ? void 0 : fe(l.node), ["prevent"]), ["space"])
+            wt(Ee((c) => a === j.value.length - 1 ? void 0 : fe(l.node), ["prevent"]), ["enter"]),
+            wt(Ee((c) => a === j.value.length - 1 ? void 0 : fe(l.node), ["prevent"]), ["space"])
           ],
           class: "vue-ui-treemap-crumb",
           "data-last-crumb": a === j.value.length - 1,
-          style: M({
+          style: L({
             color: e.value.style.chart.color
           }),
-          onMouseenter: (p) => ft(a),
+          onMouseenter: (c) => ft(a),
           onMouseleave: gt,
-          onFocus: (p) => ft(a),
+          onFocus: (c) => ft(a),
           onBlur: gt
         }, [
-          O("span", Al, [
-            O("span", Sl, [
-              C(t.$slots, "breadcrumb-label", Ve({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: ye.value === a }), () => [
-                a === 0 ? (d(), y("div", Fl, [
+          _("span", Pl, [
+            _("span", zl, [
+              C(t.$slots, "breadcrumb-label", Ue({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: ye.value === a }), () => [
+                a === 0 ? (h(), b("div", Bl, [
                   we(_t, {
                     name: ye.value === 0 ? "homeFilled" : "home",
                     stroke: e.value.style.chart.color
                   }, null, 8, ["name", "stroke"])
-                ])) : (d(), y(Ce, { key: 1 }, [
-                  $e(H(l.label), 1)
+                ])) : (h(), b(Ce, { key: 1 }, [
+                  $e(se(l.label), 1)
                 ], 64))
               ], !0)
             ]),
-            a < j.value.length - 1 ? (d(), y("span", Il, [
+            a < j.value.length - 1 ? (h(), b("span", Ml, [
               C(t.$slots, "breadcrumb-arrow", {}, () => [
                 o[4] || (o[4] = $e(" › ", -1))
               ], !0)
-            ])) : _("", !0)
+            ])) : O("", !0)
           ])
-        ], 44, Ol))), 128))
-      ], 512)) : _("", !0),
-      (d(), y("svg", {
+        ], 44, Ll))), 128))
+      ], 512)) : O("", !0),
+      (h(), b("svg", {
         ref_key: "svgRef",
-        ref: Ke,
-        xmlns: c(el),
-        class: Le({ "vue-data-ui-fullscreen--on": K.value, "vue-data-ui-fulscreen--off": !K.value, "vue-data-ui-zoom-plus": !ee.value, "vue-data-ui-zoom-minus": ee.value, loading: c(re) }),
-        viewBox: `${se.value.startX} ${se.value.startY} ${se.value.width <= 0 ? 10 : se.value.width} ${se.value.height <= 0 ? 10 : se.value.height}`,
-        style: M(`max-width:100%; overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+        ref: Ne,
+        xmlns: d(ul),
+        class: Me({ "vue-data-ui-fullscreen--on": K.value, "vue-data-ui-fulscreen--off": !K.value, "vue-data-ui-zoom-plus": !Q.value, "vue-data-ui-zoom-minus": Q.value, loading: d(re) }),
+        viewBox: `${ne.value.startX} ${ne.value.startY} ${ne.value.width <= 0 ? 10 : ne.value.width} ${ne.value.height <= 0 ? 10 : ne.value.height}`,
+        style: L(`max-width:100%; overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        we(c(f)),
-        (d(!0), y(Ce, null, Me(ce.value, (l, a) => (d(), y("g", {
+        we(d(f)),
+        (h(!0), b(Ce, null, Ve(ce.value, (l, a) => (h(), b("g", {
           key: `tgrad_${l.id}`
         }, [
-          e.value.style.chart.layout.rects.gradient.show ? (d(), y("defs", Nl, [
-            O("radialGradient", {
+          e.value.style.chart.layout.rects.gradient.show ? (h(), b("defs", El, [
+            _("radialGradient", {
               id: `tgrad_${l.id}`,
               gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
             }, [
-              O("stop", {
+              _("stop", {
                 offset: "18%",
                 "stop-color": l.color
-              }, null, 8, Pl),
-              O("stop", {
+              }, null, 8, Hl),
+              _("stop", {
                 offset: "100%",
-                "stop-color": c(Ct)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
-              }, null, 8, zl)
-            ], 8, Rl)
-          ])) : _("", !0)
+                "stop-color": d($t)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
+              }, null, 8, Wl)
+            ], 8, Ul)
+          ])) : O("", !0)
         ]))), 128)),
-        (d(!0), y(Ce, null, Me(ce.value, (l, a) => (d(), y("g", {
+        (h(!0), b(Ce, null, Ve(ce.value, (l, a) => (h(), b("g", {
           key: `k_${l.id}`
         }, [
-          O("rect", {
+          _("rect", {
             x: l.x0,
             y: l.y0,
-            height: rt(l),
-            width: it(l),
-            fill: B.value ? l.color : e.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${l.id})` : l.color,
+            height: it(l),
+            width: ct(l),
+            fill: M.value ? l.color : e.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${l.id})` : l.color,
             rx: e.value.style.chart.layout.rects.borderRadius,
-            stroke: L.value && L.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
-            "stroke-width": L.value && L.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
-            onClick: Be((p) => fe(l, a), ["stop"]),
-            onMouseenter: () => Vt({
+            stroke: B.value && B.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
+            "stroke-width": B.value && B.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
+            onClick: Ee((c) => fe(l, a), ["stop"]),
+            onMouseenter: () => Et({
               datapoint: l,
               seriesIndex: a
             }),
-            onMouseleave: (p) => Bt({ datapoint: l, seriesIndex: a }),
-            style: M(`opacity:${L.value ? L.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
-            class: Le([
+            onMouseleave: (c) => Vt({ datapoint: l, seriesIndex: a }),
+            style: L(`opacity:${B.value ? B.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
+            class: Me([
               "vue-ui-treemap-rect",
-              Lt(l) ? "vue-data-ui-zoom-plus" : ee.value ? "vue-data-ui-zoom-minus" : ""
+              Bt(l) ? "vue-data-ui-zoom-plus" : Q.value ? "vue-data-ui-zoom-minus" : ""
             ])
-          }, null, 46, Ll),
-          (d(), y("foreignObject", {
+          }, null, 46, Gl),
+          (h(), b("foreignObject", {
             x: l.x0,
             y: l.y0,
-            height: rt(l),
-            width: it(l),
+            height: it(l),
+            width: ct(l),
             class: "vue-ui-treemap-cell-foreignObject"
           }, [
-            O("div", Bl, [
-              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || ee.value) ? (d(), y("div", {
+            _("div", {
+              style: L({
+                width: `calc(100% - ${q(l) / 1.5}px)`,
+                height: `calc(100% - ${q(l) / 1.5}px)`,
+                padding: `${q(l) / 3}px`,
+                lineHeight: `${q(l)}px`
+              }),
+              class: "vue-ui-treemap-cell"
+            }, [
+              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || Q.value) ? (h(), b("div", {
                 key: 0,
                 class: "vue-ui-treemap-cell-default",
-                style: M(`width:calc(100% - ${Q(l) / 1.5}px);text-align:left;line-height:${Q(l) < 14 ? 14 : Q(l)}px;padding:${Q(l) / 3}px; color:${c($t)(l.color)}`)
+                style: L(`width:calc(100% - ${q(l) / 1.5}px);text-align:left; color:${d(Tt)(l.color)}`)
               }, [
-                O("span", {
-                  style: M(`width:100%;font-size:${Q(l)}px;`)
-                }, H(l.name), 5),
-                o[5] || (o[5] = O("br", null, null, -1)),
-                O("span", {
-                  style: M(`width:100%;font-size:${Q(l)}px;`)
-                }, H(c(xe)(
+                _("span", {
+                  style: L(`width:100%;font-size:${q(l)}px;`)
+                }, se(l.name), 5),
+                o[5] || (o[5] = _("br", null, null, -1)),
+                _("span", {
+                  style: L(`width:100%;font-size:${q(l)}px;`)
+                }, se(d(xe)(
                   e.value.style.chart.layout.labels.formatter,
                   l.value,
-                  c(he)({
+                  d(he)({
                     p: e.value.style.chart.layout.labels.prefix,
                     v: l.value,
                     s: e.value.style.chart.layout.labels.suffix,
@@ -941,76 +981,66 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
                   }),
                   { datapoint: l }
                 )), 5)
-              ], 4)) : _("", !0),
-              c(re) ? _("", !0) : C(t.$slots, "rect", Ve({
+              ], 4)) : O("", !0),
+              d(re) ? O("", !0) : C(t.$slots, "rect", Ue({
                 key: 1,
                 ref_for: !0
               }, {
                 rect: l,
-                shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || ee.value,
-                fontSize: Q(l),
-                isZoom: ee.value,
-                textColor: c($t)(l.color)
+                shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || Q.value,
+                fontSize: q(l),
+                isZoom: Q.value,
+                textColor: d(Tt)(l.color)
               }), void 0, !0)
-            ])
-          ], 8, Ml))
+            ], 4)
+          ], 8, Xl))
         ]))), 128)),
-        C(t.$slots, "svg", le(oe({ svg: J.value, isZoom: ee.value, rect: L.value, config: e.value })), void 0, !0)
-      ], 14, Dl)),
-      t.$slots.watermark ? (d(), y("div", Vl, [
-        C(t.$slots, "watermark", le(oe({ isPrinting: c(Je) || c(Qe) })), void 0, !0)
-      ])) : _("", !0),
-      O("div", {
-        id: `legend-bottom-${A.value}`
-      }, null, 8, El),
-      Ye.value ? (d(), Z(qt, {
+        C(t.$slots, "svg", te(le({ svg: J.value, isZoom: Q.value, rect: B.value, config: e.value })), void 0, !0)
+      ], 14, Vl)),
+      t.$slots.watermark ? (h(), b("div", ql, [
+        C(t.$slots, "watermark", te(le({ isPrinting: d(Qe) || d(et) })), void 0, !0)
+      ])) : O("", !0),
+      _("div", {
+        id: `legend-bottom-${S.value}`
+      }, null, 8, Yl),
+      Ze.value ? (h(), Z(el, {
         key: 6,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${S.value}` : `#legend-bottom-${S.value}`
       }, [
-        O("div", {
+        _("div", {
           ref_key: "chartLegend",
-          ref: We
+          ref: Xe
         }, [
-          e.value.style.chart.legend.show ? (d(), Z(fl, {
-            key: `legend_${Ae.value}`,
-            legendSet: vt.value,
+          e.value.style.chart.legend.show ? (h(), Z(Cl, {
+            key: `legend_${Se.value}`,
+            legendSet: Le.value,
             config: Mt.value,
-            id: `treemap_legend_${A.value}`,
+            id: `treemap_legend_${S.value}`,
             onClickMarker: o[0] || (o[0] = ({ legend: l }) => dt(l))
           }, {
             item: T(({ legend: l, index: a }) => [
-              c(re) ? _("", !0) : (d(), y("div", {
+              d(re) ? O("", !0) : (h(), b("div", {
                 key: 0,
-                onClick: (p) => dt(l),
-                style: M(`opacity:${z.value.includes(l.id) ? 0.5 : 1}`)
-              }, H(l.name) + H(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + H(e.value.style.chart.legend.showValue ? c(xe)(
-                e.value.style.chart.layout.labels.formatter,
-                l.value,
-                c(he)({
-                  p: e.value.style.chart.layout.labels.prefix,
-                  v: l.value,
-                  s: e.value.style.chart.layout.labels.suffix,
-                  r: e.value.style.chart.legend.roundingValue
-                }),
-                { datapoint: l }
-              ) : "") + " " + H(e.value.style.chart.legend.showPercentage ? z.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / ne.value) ? "-" : (l.value / ne.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, Ul))
+                onClick: (c) => dt(l),
+                style: L(`opacity:${z.value.includes(l.id) ? 0.5 : 1}`)
+              }, se(l.display), 13, jl))
             ]),
             _: 1
           }, 8, ["legendSet", "config", "id"])) : C(t.$slots, "legend", {
             key: 1,
-            legend: vt.value
+            legend: Le.value
           }, void 0, !0)
         ], 512)
-      ], 8, ["to"])) : _("", !0),
-      t.$slots.source ? (d(), y("div", {
+      ], 8, ["to"])) : O("", !0),
+      t.$slots.source ? (h(), b("div", {
         key: 7,
         ref_key: "source",
-        ref: Ge,
+        ref: qe,
         dir: "auto"
       }, [
         C(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : _("", !0),
-      we(c(v), {
+      ], 512)) : O("", !0),
+      we(d(v), {
         show: D.value.showTooltip && N.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -1022,30 +1052,30 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: V.value,
-        content: _e.value,
+        content: Oe.value,
         isFullscreen: K.value,
-        isCustom: c(Tt)(e.value.style.chart.tooltip.customFormat),
+        isCustom: d(xt)(e.value.style.chart.tooltip.customFormat),
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": T(() => [
-          C(t.$slots, "tooltip-before", le(oe({ ...Re.value })), void 0, !0)
+          C(t.$slots, "tooltip-before", te(le({ ...Pe.value })), void 0, !0)
         ]),
         "tooltip-after": T(() => [
-          C(t.$slots, "tooltip-after", le(oe({ ...Re.value })), void 0, !0)
+          C(t.$slots, "tooltip-after", te(le({ ...Pe.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      I.value && e.value.userOptions.buttons.table ? (d(), Z(Yt(ve.value.component), Ve({ key: 8 }, ve.value.props, {
+      F.value && e.value.userOptions.buttons.table ? (h(), Z(tl(ve.value.component), Ue({ key: 8 }, ve.value.props, {
         ref_key: "tableUnit",
         ref: ue,
         onClose: mt
-      }), bt({
+      }), kt({
         content: T(() => [
-          (d(), Z(c(i), {
-            key: `table_${Oe.value}`,
+          (h(), Z(d(i), {
+            key: `table_${_e.value}`,
             colNames: ge.value.colNames,
             head: ge.value.head,
             body: ge.value.body,
@@ -1055,13 +1085,13 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
             onClose: mt
           }, {
             th: T(({ th: l }) => [
-              O("div", {
+              _("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Hl)
+              }, null, 8, Zl)
             ]),
             td: T(({ td: l }) => [
-              $e(H(l.name || l), 1)
+              $e(se(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1071,17 +1101,17 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
         e.value.table.useDialog ? {
           name: "title",
           fn: T(() => [
-            $e(H(ve.value.title), 1)
+            $e(se(ve.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
           fn: T(() => [
-            O("button", {
+            _("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[1] || (o[1] = (l) => Pe(e.value.userOptions.callbacks.csv))
+              onClick: o[1] || (o[1] = (l) => ze(e.value.userOptions.callbacks.csv))
             }, [
               we(_t, {
                 name: "excel",
@@ -1091,11 +1121,11 @@ const xl = ["id"], _l = ["id"], Ol = ["tabindex", "onClick", "onKeydown", "data-
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : _("", !0),
-      c(re) ? (d(), Z(rl, { key: 9 })) : _("", !0)
-    ], 46, xl));
+      ]), 1040)) : O("", !0),
+      d(re) ? (h(), Z(fl, { key: 9 })) : O("", !0)
+    ], 46, Nl));
   }
-}, no = /* @__PURE__ */ gl(Wl, [["__scopeId", "data-v-123da83a"]]);
+}, po = /* @__PURE__ */ Tl(Kl, [["__scopeId", "data-v-49f64e31"]]);
 export {
-  no as default
+  po as default
 };