vue-data-ui 3.0.1 → 3.0.3

package/dist/{vue-ui-treemap-BgHhRpiV.js → vue-ui-treemap-DqEQgjj-.js}

@@ -1,33 +1,33 @@
-import { defineAsyncComponent as se, useSlots as Lt, onMounted as vt, computed as k, ref as y, shallowRef as E, toRefs as Mt, watch as Se, onBeforeUnmount as Vt, createElementBlock as m, openBlock as p, unref as r, normalizeStyle as V, normalizeClass as Ie, createBlock as Q, createCommentVNode as x, createElementVNode as F, createVNode as Fe, createSlots as Dt, withCtx as _, renderSlot as C, normalizeProps as ee, guardReactiveProps as te, Fragment as ye, renderList as Ne, withKeys as dt, withModifiers as ze, mergeProps as ht, createTextVNode as Pe, toDisplayString as j, nextTick as Bt } from "vue";
-import { u as Et, c as be, t as Ht, a as Ut, p as A, b as Wt, d as Gt, o as pt, f as Xt, e as ce, k as we, i as ve, X as qt, l as ft, F as gt, y as mt, v as Yt, w as jt, z as Zt } from "./index-Dzc2Gi60.js";
-import { t as Kt, u as Jt } from "./useResponsive-DfdjqQps.js";
-import { u as yt } from "./useNestedProp-CjnS13nF.js";
-import { u as Qt } from "./usePrinter-DBRh8ZvS.js";
-import { u as el } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as tl } from "./useChartAccessibility-9icAAmYg.js";
-import ll from "./BaseIcon-DEl03NUZ.js";
-import ol from "./Title-xTWR-Vil.js";
-import al from "./Legend-CMvJ6X5j.js";
-import nl from "./img-Vb4QHAHI.js";
-import { u as sl, B as ul } from "./useLoading-D7YHNtLX.js";
-import { _ as rl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function bt(n, i) {
+import { defineAsyncComponent as se, useSlots as Mt, onMounted as vt, computed as k, ref as y, shallowRef as E, toRefs as Vt, watch as Se, onBeforeUnmount as Dt, createElementBlock as m, openBlock as v, unref as r, normalizeStyle as V, normalizeClass as Ie, createBlock as j, createCommentVNode as x, createElementVNode as O, createVNode as Fe, createSlots as Bt, withCtx as A, renderSlot as C, normalizeProps as ee, guardReactiveProps as te, Fragment as me, renderList as Ne, withKeys as ht, withModifiers as ze, mergeProps as pt, createTextVNode as Pe, toDisplayString as Z, Teleport as Et, nextTick as Ht } from "vue";
+import { u as Ut, c as be, t as Wt, a as Gt, p as I, b as Xt, d as qt, o as ft, f as Yt, e as ce, k as we, i as de, X as jt, l as gt, F as yt, y as mt, v as Zt, w as Kt, z as Jt } from "./index-DrRiscPm.js";
+import { t as Qt, u as el } from "./useResponsive-DfdjqQps.js";
+import { u as bt } from "./useNestedProp-BXhArS-K.js";
+import { u as tl } from "./usePrinter-CZk2ISUm.js";
+import { u as ll } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ol } from "./useChartAccessibility-9icAAmYg.js";
+import al from "./BaseIcon-DLm6QTwr.js";
+import nl from "./Title-CINHji0n.js";
+import sl from "./Legend-CevCqVZ5.js";
+import ul from "./img-CBdOMFyn.js";
+import { u as rl, B as il } from "./useLoading-D7YHNtLX.js";
+import { _ as cl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function wt(n, i) {
   const s = n.length;
   if (s === 0)
     throw new Error(`Max aspect ratio cannot be computed: ${n} is an empty array`);
   {
-    let c = 1 / 0, u = -1 / 0, d = 0;
+    let c = 1 / 0, u = -1 / 0, h = 0;
     for (let g = 0; g < s; g += 1) {
       const f = n[g].normalizedValue;
-      f < c && (c = f), f > u && (u = f), d += f;
+      f < c && (c = f), f > u && (u = f), h += f;
     }
     return Math.max(
-      i ** 2 * u / d ** 2,
-      d ** 2 / (i ** 2 * c)
+      i ** 2 * u / h ** 2,
+      h ** 2 / (i ** 2 * c)
     );
   }
 }
-function wt(n) {
+function kt(n) {
   const { xOffset: i, yOffset: s, width: c, height: u } = n;
   return {
     x0: i,
@@ -36,76 +36,76 @@ function wt(n) {
     y1: s + u
   };
 }
-function il(n, i, s) {
+function dl(n, i, s) {
   if (n.length === 0)
     return !0;
   {
-    const c = n.concat(i), u = bt(
+    const c = n.concat(i), u = wt(
       n,
       s
-    ), d = bt(c, s);
-    return u >= d;
+    ), h = wt(c, s);
+    return u >= h;
   }
 }
-function cl(n) {
+function vl(n) {
   const i = [], s = n.length;
   for (let c = 0; c < s; c += 1) {
-    const u = n[c], d = u.length;
-    for (let v = 0; v < d; v += 1)
-      i.push(u[v]);
+    const u = n[c], h = u.length;
+    for (let d = 0; d < h; d += 1)
+      i.push(u[d]);
   }
   return i;
 }
-function vl(n, i) {
+function hl(n, i) {
   const s = {
     ...i,
     children: n
   };
-  return Ct(s);
+  return $t(s);
 }
-function dl(n) {
+function pl(n) {
   return (n.x1 - n.x0) * (n.y1 - n.y0);
 }
-function kt(n, i) {
-  const { width: s, height: c, xOffset: u, yOffset: d } = Re(i), v = n.length, g = n.map((w) => w.normalizedValue || 0).reduce((w, N) => w + N, 0), f = g / c, H = g / s;
-  let b = u, O = d;
-  const S = [];
+function Ct(n, i) {
+  const { width: s, height: c, xOffset: u, yOffset: h } = Re(i), d = n.length, g = n.map((w) => w.normalizedValue || 0).reduce((w, N) => w + N, 0), f = g / c, H = g / s;
+  let b = u, S = h;
+  const F = [];
   if (s >= c) {
-    for (let w = 0; w < v; w += 1) {
-      const N = n[w], I = O + N.normalizedValue / f, D = {
+    for (let w = 0; w < d; w += 1) {
+      const N = n[w], $ = S + N.normalizedValue / f, D = {
         x0: b,
-        y0: O,
+        y0: S,
         x1: b + f,
-        y1: I
+        y1: $
       }, z = Object.assign({}, N, D);
-      O = I, S.push(z);
+      S = $, F.push(z);
     }
-    return S;
+    return F;
   } else {
-    for (let w = 0; w < v; w += 1) {
-      const N = n[w], I = b + N.normalizedValue / H, D = {
+    for (let w = 0; w < d; w += 1) {
+      const N = n[w], $ = b + N.normalizedValue / H, D = {
         x0: b,
-        y0: O,
-        x1: I,
-        y1: O + H
+        y0: S,
+        x1: $,
+        y1: S + H
       }, z = Object.assign({}, N, D);
-      b = I, S.push(z);
+      b = $, F.push(z);
     }
-    return S;
+    return F;
   }
 }
-function hl(n) {
+function fl(n) {
   const i = Re(n), s = i.width, c = i.height;
   return Math.min(s, c);
 }
-function pl(n, i) {
-  const s = n.length, c = n.map((f) => f.value ?? 0).reduce((f, H) => f + H, 0), u = i / c, d = [];
-  let v, g;
+function gl(n, i) {
+  const s = n.length, c = n.map((f) => f.value ?? 0).reduce((f, H) => f + H, 0), u = i / c, h = [];
+  let d, g;
   for (let f = 0; f < s; f += 1)
-    g = n[f], v = Object.assign({}, g, {
+    g = n[f], d = Object.assign({}, g, {
       normalizedValue: g.value * (u || 0)
-    }), d.push(v);
-  return d;
+    }), h.push(d);
+  return h;
 }
 function Re(n) {
   const { x0: i, y0: s, x1: c, y1: u } = n;
@@ -116,74 +116,74 @@ function Re(n) {
     height: u - s
   };
 }
-function fl(n, i, s, c) {
-  let u = n, d = i, v = s, g = c;
+function yl(n, i, s, c) {
+  let u = n, h = i, d = s, g = c;
   for (; ; ) {
     const f = u.length;
     if (f === 0) {
-      const S = kt(d, v);
-      return g.concat(S);
+      const F = Ct(h, d);
+      return g.concat(F);
     }
-    const H = hl(v), b = u[0], O = u.slice(1, f);
-    if (il(d, b, H)) {
-      const S = d.concat(b);
-      u = O, d = S, v = v, g = g;
+    const H = fl(d), b = u[0], S = u.slice(1, f);
+    if (dl(h, b, H)) {
+      const F = h.concat(b);
+      u = S, h = F, d = d, g = g;
     } else {
-      const S = d.length;
+      const F = h.length;
       let w = 0;
-      for (let z = 0; z < S; z += 1)
-        w += d[z].normalizedValue;
-      const N = gl(v, w), I = kt(d, v), D = g.concat(I);
-      u = u, d = [], v = N, g = D;
+      for (let z = 0; z < F; z += 1)
+        w += h[z].normalizedValue;
+      const N = ml(d, w), $ = Ct(h, d), D = g.concat($);
+      u = u, h = [], d = N, g = D;
     }
   }
 }
-function Ct(n) {
+function $t(n) {
   if (typeof n.children > "u" || !n.children.length)
     return [n];
   {
-    const i = pl(
+    const i = gl(
       n.children,
-      dl(n)
-    ), s = fl(i, [], n, []), c = s.length, u = [];
-    for (let v = 0; v < c; v += 1)
-      u.push(Ct(s[v]));
-    return cl(u);
+      pl(n)
+    ), s = yl(i, [], n, []), c = s.length, u = [];
+    for (let d = 0; d < c; d += 1)
+      u.push($t(s[d]));
+    return vl(u);
   }
 }
-function gl(n, i) {
-  const { width: s, height: c, xOffset: u, yOffset: d } = Re(n);
+function ml(n, i) {
+  const { width: s, height: c, xOffset: u, yOffset: h } = Re(n);
   if (s >= c) {
-    const v = i / c, g = s - v, f = {
-      xOffset: u + v,
-      yOffset: d,
+    const d = i / c, g = s - d, f = {
+      xOffset: u + d,
+      yOffset: h,
       width: g,
       height: c
     };
-    return wt(f);
+    return kt(f);
   } else {
-    const v = i / s, g = c - v, f = {
+    const d = i / s, g = c - d, f = {
       xOffset: u,
-      yOffset: d + v,
+      yOffset: h + d,
       width: s,
       height: g
     };
-    return wt(f);
+    return kt(f);
   }
 }
-const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], bl = { class: "vue-ui-treemap-crumb-unit" }, wl = { class: "vue-ui-treemap-crumb-unit-label" }, kl = {
+const bl = ["id"], wl = ["id"], kl = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], Cl = { class: "vue-ui-treemap-crumb-unit" }, $l = { class: "vue-ui-treemap-crumb-unit-label" }, Tl = {
   key: 0,
   style: { width: "24px", display: "flex", "align-items": "center" }
-}, Cl = {
+}, xl = {
   key: 0,
   class: "vue-ui-treemap-crumb-unit-arrow"
-}, $l = ["xmlns", "viewBox"], Tl = { key: 0 }, xl = ["id"], _l = ["stop-color"], Ol = ["stop-color"], Al = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], Sl = ["x", "y", "height", "width"], Il = {
+}, _l = ["xmlns", "viewBox"], Ol = { key: 0 }, Al = ["id"], Sl = ["stop-color"], Il = ["stop-color"], Fl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], Nl = ["x", "y", "height", "width"], zl = {
   style: { width: "100%", height: "100%" },
   class: "vue-ui-treemap-cell"
-}, Fl = {
+}, Pl = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Nl = ["onClick"], zl = ["innerHTML"], Pl = {
+}, Rl = ["id"], Ll = ["onClick"], Ml = ["innerHTML"], Vl = {
   __name: "vue-ui-treemap",
   props: {
     config: {
@@ -201,12 +201,12 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
   },
   emits: ["selectLegend", "selectDatapoint"],
   setup(n, { expose: i, emit: s }) {
-    const c = se(() => import("./DataTable-ClgCsiJA.js")), u = se(() => import("./PenAndPaper-D3WRn-G2.js")), d = se(() => import("./vue-ui-accordion-CPk8wAuj.js")), v = se(() => import("./Tooltip-BH3CiANh.js")), g = se(() => import("./UserOptions-CKKPgDLV.js")), f = se(() => import("./PackageVersion-CD5VH_Al.js")), { vue_ui_treemap: H } = Et(), b = n, O = s, S = Lt();
+    const c = se(() => import("./DataTable-CWzb1j8d.js")), u = se(() => import("./PenAndPaper-C_R9vJkU.js")), h = se(() => import("./vue-ui-accordion-s_m_NJzJ.js")), d = se(() => import("./Tooltip-hfdFRoLp.js")), g = se(() => import("./UserOptions-r0epwyXR.js")), f = se(() => import("./PackageVersion-n4qokxnx.js")), { vue_ui_treemap: H } = Ut(), b = n, S = s, F = Mt();
     vt(() => {
-      S["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
+      F["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
     });
-    const w = k(() => !!b.dataset && b.dataset.length), N = k(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), I = y(be()), D = y(!1), z = y(""), le = y(!1), Le = y(0), L = y([]), U = E(null), Me = E(null), Ve = E(null), De = E(null), Be = E(null), Ee = y(0), ke = y(0), Ce = y(0), $ = y([]), $e = y(null), e = y(_e()), { loading: ue, FINAL_DATASET: Te, manualLoading: $t } = sl({
-      ...Mt(b),
+    const w = k(() => !!b.dataset && b.dataset.length), N = k(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), $ = y(be()), D = y(!1), z = y(""), le = y(!1), Le = y(0), L = y([]), U = E(null), Me = E(null), Ve = E(null), De = E(null), Be = E(null), Ee = y(0), ke = y(0), Ce = y(0), T = y([]), $e = y(null), He = y(!1), e = y(_e()), { loading: ue, FINAL_DATASET: Te, manualLoading: Tt } = rl({
+      ...Vt(b),
       FINAL_CONFIG: e,
       prepareConfig: _e,
       skeletonDataset: [
@@ -225,7 +225,7 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
           ]
         }
       ],
-      skeletonConfig: Ht({
+      skeletonConfig: Wt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -247,28 +247,28 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
           }
         }
       })
-    }), { userOptionsVisible: xe, setUserOptionsVisibility: He, keepUserOptionState: Ue } = el({ config: e.value }), { svgRef: We } = tl({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: xe, setUserOptionsVisibility: Ue, keepUserOptionState: We } = ll({ config: e.value }), { svgRef: Ge } = ol({ config: e.value.style.chart.title });
     function _e() {
-      const t = yt({
+      const t = bt({
         userConfig: b.config,
         defaultConfig: H
       });
       return t.theme ? {
-        ...yt({
-          userConfig: Wt.vue_ui_treemap[t.theme] || b.config,
+        ...bt({
+          userConfig: Xt.vue_ui_treemap[t.theme] || b.config,
           defaultConfig: t
         }),
-        customPalette: Ut[t.theme] || A
+        customPalette: Gt[t.theme] || I
       } : t;
     }
     Se(() => b.config, (t) => {
       ue.value || (e.value = _e()), xe.value = !e.value.userOptions.showOnChartHover, Ee.value += 1, ke.value += 1, Ce.value += 1, P.value.showTable = e.value.table.show, P.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: Ge, isImaging: Xe, generatePdf: qe, generateImage: Ye } = Qt({
-      elementId: `treemap_${I.value}`,
+    const { isPrinting: Xe, isImaging: qe, generatePdf: Ye, generateImage: je } = tl({
+      elementId: `treemap_${$.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-treemap",
       options: e.value.userOptions.print
-    }), Tt = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), de = k(() => Gt(e.value.customPalette)), P = y({
+    }), xt = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), ve = k(() => qt(e.value.customPalette)), P = y({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
@@ -281,7 +281,7 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
     const W = y({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
-    }), Z = k(() => ({
+    }), K = k(() => ({
       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,
@@ -290,47 +290,47 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       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(Te.value), G = y(R.value), je = E(/* @__PURE__ */ new Map());
-    function Ze(t) {
+    })), R = y(Te.value), G = y(R.value), Ze = E(/* @__PURE__ */ new Map());
+    function Ke(t) {
       Array.isArray(t) && t.forEach((o, l) => {
         o.id || (o.id = be());
-        let a = ce(o.color) || je.value.get(o.id) || de.value[l] || A[l] || A[l % A.length];
-        a = ce(a), je.value.set(o.id, a), o.color = a, Ke(o, a);
+        let a = ce(o.color) || Ze.value.get(o.id) || ve.value[l] || I[l] || I[l % I.length];
+        a = ce(a), Ze.value.set(o.id, a), o.color = a, Je(o, a);
       });
     }
-    function Ke(t, o) {
+    function Je(t, o) {
       Array.isArray(t.children) && t.children.forEach((l) => {
-        l.id || (l.id = be()), l.parentId = t.id, l.color = o, Ke(l, o);
+        l.id || (l.id = be()), l.parentId = t.id, l.color = o, Je(l, o);
       });
     }
-    function xt() {
-      if (!$.value.length)
+    function _t() {
+      if (!T.value.length)
         G.value = R.value.slice();
       else {
-        const t = $.value[$.value.length - 1], o = q(t);
+        const t = T.value[T.value.length - 1], o = q(t);
         G.value = o?.children?.slice() || [];
       }
     }
     Se(
       () => Te.value,
       () => {
-        R.value = Te.value, Ze(R.value), xt(), Ce.value += 1, ke.value += 1;
+        R.value = Te.value, Ke(R.value), _t(), Ce.value += 1, ke.value += 1;
       },
       { deep: !0, immediate: !0, flush: "post" }
     );
     const X = E(null), oe = E(null);
     vt(() => {
-      Ot();
+      He.value = !0, At();
     });
-    const _t = k(() => e.value.debug);
-    function Ot() {
-      if (pt(b.dataset) && Xt({
+    const Ot = k(() => e.value.debug);
+    function At() {
+      if (ft(b.dataset) && Yt({
         componentName: "VueUiTreemap",
         type: "dataset",
-        debug: _t.value
-      }), Ze(R.value), pt(b.dataset) || ($t.value = e.value.loading), e.value.responsive) {
-        const t = Kt(() => {
-          const { width: o, height: l } = Jt({
+        debug: Ot.value
+      }), Ke(R.value), ft(b.dataset) || (Tt.value = e.value.loading), e.value.responsive) {
+        const t = Qt(() => {
+          const { width: o, height: l } = el({
             chart: U.value,
             title: e.value.style.chart.title.text ? Me.value : null,
             legend: e.value.style.chart.legend.show ? Ve.value : null,
@@ -344,13 +344,13 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         X.value && (oe.value && X.value.unobserve(oe.value), X.value.disconnect()), X.value = new ResizeObserver(t), oe.value = U.value.parentNode, X.value.observe(oe.value);
       }
     }
-    Vt(() => {
+    Dt(() => {
       X.value && (oe.value && X.value.unobserve(oe.value), X.value.disconnect());
     });
     const re = k(() => G.value.map((t, o) => ({
       ...t,
-      color: ce(t.color) || de.value[o] || A[o] || A[o % A.length]
-    })).filter((t) => !L.value.includes(t.id))), ae = k(() => R.value.filter((t) => !L.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), Je = k({
+      color: ce(t.color) || ve.value[o] || I[o] || I[o % I.length]
+    })).filter((t) => !L.value.includes(t.id))), ae = k(() => R.value.filter((t) => !L.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), Qe = k({
       get() {
         let t = [...re.value];
         return e.value.style.chart.layout.sorted && (t = [...re.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
@@ -361,49 +361,49 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         return t;
       }
     });
-    function Qe(t, o) {
+    function et(t, o) {
       return t.value / o;
     }
-    function At(t, o, l) {
-      const a = e.value.style.chart.layout.rects.colorRatio - Qe(o, l);
-      return ft(t, a < 0 ? 0 : a);
+    function St(t, o, l) {
+      const a = e.value.style.chart.layout.rects.colorRatio - et(o, l);
+      return gt(t, a < 0 ? 0 : a);
     }
-    function et(t, o, l, a) {
-      return t.map((h, T) => {
-        const me = At(ce(o) || de.value[T] || A[T] || A[T % A.length], h, a), Rt = Qe(h, a);
+    function tt(t, o, l, a) {
+      return t.map((p, _) => {
+        const ye = St(ce(o) || ve.value[_] || I[_] || I[_ % I.length], p, a), Lt = et(p, a);
         return {
-          ...h,
-          color: me,
-          proportion: Rt,
+          ...p,
+          color: ye,
+          proportion: Lt,
           parentName: l,
-          children: h.children ? et(h.children, me, h.name, a) : void 0
+          children: p.children ? tt(p.children, ye, p.name, a) : void 0
         };
       });
     }
-    const ie = k(() => vl(
-      Je.value.map((t, o) => {
-        const l = t.children ? t.children.reduce((a, h) => a + h.value, 0) : t.value;
+    const ie = k(() => hl(
+      Qe.value.map((t, o) => {
+        const l = t.children ? t.children.reduce((a, p) => a + p.value, 0) : t.value;
         return {
           value: t.value,
           id: t.id || be(),
-          children: t.children ? et(t.children.sort((a, h) => h.value - a.value), t.color, t.name, l) : void 0,
+          children: t.children ? tt(t.children.sort((a, p) => p.value - a.value), t.color, t.name, l) : void 0,
           color: t.color,
           name: t.name
         };
       }),
-      { x0: Z.value.left * 2, y0: Z.value.top, x1: Z.value.width, y1: Z.value.height }
+      { x0: K.value.left * 2, y0: K.value.top, x1: K.value.width, y1: K.value.height }
     ));
-    function tt({ y0: t, y1: o }) {
+    function lt({ y0: t, y1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function lt({ x0: t, x1: o }) {
+    function ot({ x0: t, x1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function K(t) {
+    function J(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 ot(t) {
+    function at(t) {
       le.value = t, Le.value += 1;
     }
     const ne = k(() => {
@@ -411,8 +411,8 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       return $e.value && (t = $e.value.getBoundingClientRect().height), {
         startX: 0,
         startY: 0,
-        width: Z.value.vbWidth,
-        height: Z.value.vbHeight - t
+        width: K.value.vbWidth,
+        height: K.value.vbHeight - t
       };
     });
     function q(t, o = R.value) {
@@ -427,39 +427,39 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       }
       return null;
     }
-    const J = k(() => $.value.length > 0);
+    const Q = k(() => T.value.length > 0);
     function he(t, o) {
       if (!t) {
-        G.value = R.value.slice(), O("selectDatapoint", void 0), $.value = [];
+        G.value = R.value.slice(), S("selectDatapoint", void 0), T.value = [];
         return;
       }
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
       const l = q(t.id);
       if (l && l.children?.length)
-        $.value.push(l.id), G.value = l.children.slice(), O("selectDatapoint", t);
+        T.value.push(l.id), G.value = l.children.slice(), S("selectDatapoint", t);
       else if (t.parentId) {
-        $.value.push(t.parentId);
+        T.value.push(t.parentId);
         const a = q(t.parentId);
-        G.value = a.children.slice(), O("selectDatapoint", t);
-      } else if ($.value.length > 0) {
-        $.value.pop();
-        const a = $.value[$.value.length - 1];
+        G.value = a.children.slice(), S("selectDatapoint", t);
+      } else if (T.value.length > 0) {
+        T.value.pop();
+        const a = T.value[T.value.length - 1];
         if (a) {
-          const h = q(a);
-          G.value = h.children.slice();
+          const p = q(a);
+          G.value = p.children.slice();
         } else
-          G.value = R.value.slice(), $.value = [], O("selectDatapoint", void 0);
+          G.value = R.value.slice(), T.value = [], S("selectDatapoint", void 0);
       }
     }
-    function St(t) {
+    function It(t) {
       return !!(q(t.id)?.children?.length || t.parentId);
     }
     const Y = k(() => {
       const t = [
         { id: null, label: "All" }
       ];
-      if ($.value.length > 0) {
-        let o = q($.value[$.value.length - 1]);
+      if (T.value.length > 0) {
+        let o = q(T.value[T.value.length - 1]);
         const l = [];
         for (; o; )
           l.unshift(o), o = o.parentId ? q(o.parentId) : null;
@@ -471,15 +471,15 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
           });
       }
       return t;
-    }), M = E(null), at = k(() => R.value.map((t, o) => ({
+    }), M = E(null), nt = k(() => R.value.map((t, o) => ({
       ...t,
-      color: ce(t.color) || de.value[o] || A[o] || A[o % A.length],
+      color: ce(t.color) || ve.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: L.value.includes(t.id) ? 0.5 : 1
-    }))), It = k(() => ({
+    }))), Ft = k(() => ({
       cy: "treemap-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -487,17 +487,17 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     }));
-    function nt(t) {
-      M.value = null, L.value.includes(t.id) ? L.value = L.value.filter((o) => o !== t.id) : L.value.length < b.dataset.length - 1 && L.value.push(t.id), O("selectLegend", Je.value);
+    function st(t) {
+      M.value = null, L.value.includes(t.id) ? L.value = L.value.filter((o) => o !== t.id) : L.value.length < b.dataset.length - 1 && L.value.push(t.id), S("selectLegend", Qe.value);
     }
-    function Ft({ datapoint: t, seriesIndex: o }) {
+    function Nt({ datapoint: t, seriesIndex: o }) {
       M.value = null, D.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
     const Oe = y(null);
-    function Nt({ datapoint: t, seriesIndex: o }) {
+    function zt({ datapoint: t, seriesIndex: o }) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), M.value = t, Oe.value = { datapoint: t, seriesIndex: o, config: e.value, series: re.value };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (mt(l) && Zt(() => l({
+      if (mt(l) && Jt(() => l({
         seriesIndex: o,
         datapoint: t,
         series: re.value,
@@ -514,7 +514,7 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, a += `<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" fill="${t.color}"/></svg>`, a += `<b>${we(
           e.value.style.chart.layout.labels.formatter,
           t.value,
-          ve({
+          de({
             p: e.value.style.chart.layout.labels.prefix,
             v: t.value,
             s: e.value.style.chart.layout.labels.suffix,
@@ -532,12 +532,12 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       })), o = ie.value.map((l) => l.value);
       return { head: t, body: o };
     });
-    function st(t = null) {
-      Bt(() => {
-        const o = B.value.head.map((h, T) => [[
-          h.name
-        ], [B.value.body[T]], [isNaN(B.value.body[T] / ae.value) ? "-" : B.value.body[T] / ae.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = Yt(l);
-        t ? t(a) : jt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-treemap" });
+    function ut(t = null) {
+      Ht(() => {
+        const o = B.value.head.map((p, _) => [[
+          p.name
+        ], [B.value.body[_]], [isNaN(B.value.body[_] / ae.value) ? "-" : B.value.body[_] / ae.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = Zt(l);
+        t ? t(a) : Kt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-treemap" });
       });
     }
     const pe = k(() => {
@@ -545,26 +545,26 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], o = B.value.head.map((h, T) => {
-        const me = we(
+      ], o = B.value.head.map((p, _) => {
+        const ye = we(
           e.value.style.chart.layout.labels.formatter,
-          B.value.body[T],
-          ve({
+          B.value.body[_],
+          de({
             p: e.value.style.chart.layout.labels.prefix,
-            v: B.value.body[T],
+            v: B.value.body[_],
             s: e.value.style.chart.layout.labels.suffix,
             r: e.value.table.td.roundingValue
           })
         );
         return [
           {
-            color: h.color,
-            name: h.name,
+            color: p.color,
+            name: p.name,
             shape: "square"
           },
-          me,
-          isNaN(B.value.body[T] / ae.value) ? "-" : ve({
-            v: B.value.body[T] / ae.value * 100,
+          ye,
+          isNaN(B.value.body[_] / ae.value) ? "-" : de({
+            v: B.value.body[_] / ae.value * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
@@ -592,13 +592,13 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         config: l
       };
     });
-    function zt() {
+    function Pt() {
       return ie.value;
     }
-    function ut() {
+    function rt() {
       P.value.showTable = !P.value.showTable;
     }
-    function rt() {
+    function it() {
       P.value.showTooltip = !P.value.showTooltip;
     }
     const fe = y(!1);
@@ -606,18 +606,18 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       fe.value = !fe.value;
     }
     const ge = y(null);
-    function it(t) {
+    function ct(t) {
       ge.value = t;
     }
-    function ct() {
+    function dt() {
       ge.value = null;
     }
-    async function Pt({ scale: t = 2 } = {}) {
+    async function Rt({ scale: t = 2 } = {}) {
       if (!U.value) return;
-      const { width: o, height: l } = U.value.getBoundingClientRect(), a = o / l, { imageUri: h, base64: T } = await nl({ domElement: U.value, base64: !0, img: !0, scale: t });
+      const { width: o, height: l } = U.value.getBoundingClientRect(), a = o / l, { imageUri: p, base64: _ } = await ul({ domElement: U.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: h,
-        base64: T,
+        imageUri: p,
+        base64: _,
         title: e.value.style.chart.title.text,
         width: o,
         height: l,
@@ -625,46 +625,46 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
       };
     }
     return i({
-      getData: zt,
-      getImage: Pt,
-      generateCsv: st,
-      generateImage: Ye,
-      generatePdf: qe,
-      toggleTable: ut,
-      toggleTooltip: rt,
+      getData: Pt,
+      getImage: Rt,
+      generateCsv: ut,
+      generateImage: je,
+      generatePdf: Ye,
+      toggleTable: rt,
+      toggleTooltip: it,
       toggleAnnotator: Ae,
-      toggleFullscreen: ot
-    }), (t, o) => (p(), m("div", {
+      toggleFullscreen: at
+    }), (t, o) => (v(), m("div", {
       ref_key: "treemapChart",
       ref: U,
       class: Ie(`vue-ui-treemap ${le.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: V(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `treemap_${I.value}`,
-      onMouseenter: o[2] || (o[2] = () => r(He)(!0)),
-      onMouseleave: o[3] || (o[3] = () => r(He)(!1))
+      id: `treemap_${$.value}`,
+      onMouseenter: o[2] || (o[2] = () => r(Ue)(!0)),
+      onMouseleave: o[3] || (o[3] = () => r(Ue)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (p(), Q(r(u), {
+      e.value.userOptions.buttons.annotator ? (v(), j(r(u), {
         key: 0,
-        svgRef: r(We),
+        svgRef: r(Ge),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: fe.value,
         onClose: Ae
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : x("", !0),
-      Tt.value ? (p(), m("div", {
+      xt.value ? (v(), m("div", {
         key: 1,
         ref_key: "noTitle",
         ref: Be,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : x("", !0),
-      e.value.style.chart.title.text ? (p(), m("div", {
+      e.value.style.chart.title.text ? (v(), m("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: Me,
         style: V(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
       }, [
-        (p(), Q(ol, {
+        (v(), j(nl, {
           key: `title_${Ee.value}`,
           config: {
             title: {
@@ -678,14 +678,17 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
           }
         }, null, 8, ["config"]))
       ], 4)) : x("", !0),
-      e.value.userOptions.show && w.value && (r(Ue) || r(xe)) ? (p(), Q(r(g), {
+      O("div", {
+        id: `legend-top-${$.value}`
+      }, null, 8, wl),
+      e.value.userOptions.show && w.value && (r(We) || r(xe)) ? (v(), j(r(g), {
         ref: "details",
         key: `user_option_${Le.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: r(Ge),
-        isImaging: r(Xe),
-        uid: I.value,
+        isPrinting: r(Xe),
+        isImaging: r(qe),
+        uid: $.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,
@@ -701,197 +704,197 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         isAnnotation: fe.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: ot,
-        onGeneratePdf: r(qe),
-        onGenerateCsv: st,
-        onGenerateImage: r(Ye),
-        onToggleTable: ut,
-        onToggleTooltip: rt,
+        onToggleFullscreen: at,
+        onGeneratePdf: r(Ye),
+        onGenerateCsv: ut,
+        onGenerateImage: r(je),
+        onToggleTable: rt,
+        onToggleTooltip: it,
         onToggleAnnotator: Ae,
         style: V({
-          visibility: r(Ue) ? r(xe) ? "visible" : "hidden" : "visible"
+          visibility: r(We) ? r(xe) ? "visible" : "hidden" : "visible"
         })
-      }, Dt({ _: 2 }, [
+      }, Bt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: _(({ isOpen: l, color: a }) => [
+          fn: A(({ isOpen: l, color: a }) => [
             C(t.$slots, "menuIcon", ee(te({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: _(() => [
+          fn: A(() => [
             C(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: _(() => [
+          fn: A(() => [
             C(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: _(() => [
+          fn: A(() => [
             C(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: _(() => [
+          fn: A(() => [
             C(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: _(() => [
+          fn: A(() => [
             C(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: _(({ toggleFullscreen: l, isFullscreen: a }) => [
+          fn: A(({ toggleFullscreen: l, isFullscreen: a }) => [
             C(t.$slots, "optionFullscreen", ee(te({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: _(({ toggleAnnotator: l, isAnnotator: a }) => [
+          fn: A(({ toggleAnnotator: l, isAnnotator: a }) => [
             C(t.$slots, "optionAnnotator", ee(te({ 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", "onGeneratePdf", "onGenerateImage", "style"])) : x("", !0),
-      Y.value.length > 1 ? (p(), m("nav", {
+      Y.value.length > 1 ? (v(), m("nav", {
         key: 4,
         class: "vue-ui-treemap-breadcrumbs",
         "data-dom-to-png-ignore": "",
         ref_key: "breadcrumbsNav",
         ref: $e
       }, [
-        (p(!0), m(ye, null, Ne(Y.value, (l, a) => (p(), m("span", {
+        (v(!0), m(me, null, Ne(Y.value, (l, a) => (v(), m("span", {
           role: "button",
           tabindex: a < Y.value.length - 1 ? 0 : void 0,
           key: l.id || "root",
-          onClick: (h) => a === Y.value.length - 1 ? () => {
+          onClick: (p) => a === Y.value.length - 1 ? () => {
           } : he(l.node),
           onKeydown: [
-            dt(ze((h) => a === Y.value.length - 1 ? void 0 : he(l.node), ["prevent"]), ["enter"]),
-            dt(ze((h) => a === Y.value.length - 1 ? void 0 : he(l.node), ["prevent"]), ["space"])
+            ht(ze((p) => a === Y.value.length - 1 ? void 0 : he(l.node), ["prevent"]), ["enter"]),
+            ht(ze((p) => a === Y.value.length - 1 ? void 0 : he(l.node), ["prevent"]), ["space"])
           ],
           class: "vue-ui-treemap-crumb",
           "data-last-crumb": a === Y.value.length - 1,
           style: V({
             color: e.value.style.chart.color
           }),
-          onMouseenter: (h) => it(a),
-          onMouseleave: ct,
-          onFocus: (h) => it(a),
-          onBlur: ct
+          onMouseenter: (p) => ct(a),
+          onMouseleave: dt,
+          onFocus: (p) => ct(a),
+          onBlur: dt
         }, [
-          F("span", bl, [
-            F("span", wl, [
-              C(t.$slots, "breadcrumb-label", ht({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: ge.value === a }), () => [
-                a === 0 ? (p(), m("div", kl, [
-                  Fe(ll, {
+          O("span", Cl, [
+            O("span", $l, [
+              C(t.$slots, "breadcrumb-label", pt({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: ge.value === a }), () => [
+                a === 0 ? (v(), m("div", Tl, [
+                  Fe(al, {
                     name: ge.value === 0 ? "homeFilled" : "home",
                     stroke: e.value.style.chart.color
                   }, null, 8, ["name", "stroke"])
-                ])) : (p(), m(ye, { key: 1 }, [
-                  Pe(j(l.label), 1)
+                ])) : (v(), m(me, { key: 1 }, [
+                  Pe(Z(l.label), 1)
                 ], 64))
               ], !0)
             ]),
-            a < Y.value.length - 1 ? (p(), m("span", Cl, [
+            a < Y.value.length - 1 ? (v(), m("span", xl, [
               C(t.$slots, "breadcrumb-arrow", {}, () => [
                 o[4] || (o[4] = Pe(" › ", -1))
               ], !0)
             ])) : x("", !0)
           ])
-        ], 44, yl))), 128))
+        ], 44, kl))), 128))
       ], 512)) : x("", !0),
-      (p(), m("svg", {
+      (v(), m("svg", {
         ref_key: "svgRef",
-        ref: We,
-        xmlns: r(qt),
-        class: Ie({ "vue-data-ui-fullscreen--on": le.value, "vue-data-ui-fulscreen--off": !le.value, "vue-data-ui-zoom-plus": !J.value, "vue-data-ui-zoom-minus": J.value, loading: r(ue) }),
+        ref: Ge,
+        xmlns: r(jt),
+        class: Ie({ "vue-data-ui-fullscreen--on": le.value, "vue-data-ui-fulscreen--off": !le.value, "vue-data-ui-zoom-plus": !Q.value, "vue-data-ui-zoom-minus": Q.value, loading: r(ue) }),
         viewBox: `${ne.value.startX} ${ne.value.startY} ${ne.value.width <= 0 ? 10 : ne.value.width} ${ne.value.height <= 0 ? 10 : ne.value.height}`,
         style: V(`max-width:100%; overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
         Fe(r(f)),
-        (p(!0), m(ye, null, Ne(ie.value, (l, a) => (p(), m("g", {
+        (v(!0), m(me, null, Ne(ie.value, (l, a) => (v(), m("g", {
           key: `tgrad_${l.id}`
         }, [
-          e.value.style.chart.layout.rects.gradient.show ? (p(), m("defs", Tl, [
-            F("radialGradient", {
+          e.value.style.chart.layout.rects.gradient.show ? (v(), m("defs", Ol, [
+            O("radialGradient", {
               id: `tgrad_${l.id}`,
               gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
             }, [
-              F("stop", {
+              O("stop", {
                 offset: "18%",
                 "stop-color": l.color
-              }, null, 8, _l),
-              F("stop", {
+              }, null, 8, Sl),
+              O("stop", {
                 offset: "100%",
-                "stop-color": r(ft)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
-              }, null, 8, Ol)
-            ], 8, xl)
+                "stop-color": r(gt)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
+              }, null, 8, Il)
+            ], 8, Al)
           ])) : x("", !0)
         ]))), 128)),
-        (p(!0), m(ye, null, Ne(ie.value, (l, a) => (p(), m("g", {
+        (v(!0), m(me, null, Ne(ie.value, (l, a) => (v(), m("g", {
           key: `k_${l.id}`
         }, [
-          F("rect", {
+          O("rect", {
             x: l.x0,
             y: l.y0,
-            height: tt(l),
-            width: lt(l),
+            height: lt(l),
+            width: ot(l),
             fill: N.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: M.value && M.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
             "stroke-width": M.value && M.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
-            onClick: ze((h) => he(l, a), ["stop"]),
-            onMouseenter: () => Nt({
+            onClick: ze((p) => he(l, a), ["stop"]),
+            onMouseenter: () => zt({
               datapoint: l,
               seriesIndex: a
             }),
-            onMouseleave: (h) => Ft({ datapoint: l, seriesIndex: a }),
+            onMouseleave: (p) => Nt({ datapoint: l, seriesIndex: a }),
             style: V(`opacity:${M.value ? M.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
             class: Ie([
               "vue-ui-treemap-rect",
-              St(l) ? "vue-data-ui-zoom-plus" : J.value ? "vue-data-ui-zoom-minus" : ""
+              It(l) ? "vue-data-ui-zoom-plus" : Q.value ? "vue-data-ui-zoom-minus" : ""
             ])
-          }, null, 46, Al),
-          (p(), m("foreignObject", {
+          }, null, 46, Fl),
+          (v(), m("foreignObject", {
             x: l.x0,
             y: l.y0,
-            height: tt(l),
-            width: lt(l),
+            height: lt(l),
+            width: ot(l),
             class: "vue-ui-treemap-cell-foreignObject"
           }, [
-            F("div", Il, [
-              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || J.value) ? (p(), m("div", {
+            O("div", zl, [
+              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || Q.value) ? (v(), m("div", {
                 key: 0,
                 class: "vue-ui-treemap-cell-default",
-                style: V(`width:calc(100% - ${K(l) / 1.5}px);text-align:left;line-height:${K(l) < 14 ? 14 : K(l)}px;padding:${K(l) / 3}px; color:${r(gt)(l.color)}`)
+                style: V(`width:calc(100% - ${J(l) / 1.5}px);text-align:left;line-height:${J(l) < 14 ? 14 : J(l)}px;padding:${J(l) / 3}px; color:${r(yt)(l.color)}`)
               }, [
-                F("span", {
-                  style: V(`width:100%;font-size:${K(l)}px;`)
-                }, j(l.name), 5),
-                o[5] || (o[5] = F("br", null, null, -1)),
-                F("span", {
-                  style: V(`width:100%;font-size:${K(l)}px;`)
-                }, j(r(we)(
+                O("span", {
+                  style: V(`width:100%;font-size:${J(l)}px;`)
+                }, Z(l.name), 5),
+                o[5] || (o[5] = O("br", null, null, -1)),
+                O("span", {
+                  style: V(`width:100%;font-size:${J(l)}px;`)
+                }, Z(r(we)(
                   e.value.style.chart.layout.labels.formatter,
                   l.value,
-                  r(ve)({
+                  r(de)({
                     p: e.value.style.chart.layout.labels.prefix,
                     v: l.value,
                     s: e.value.style.chart.layout.labels.suffix,
@@ -900,67 +903,75 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
                   { datapoint: l }
                 )), 5)
               ], 4)) : x("", !0),
-              r(ue) ? x("", !0) : C(t.$slots, "rect", ht({
+              r(ue) ? x("", !0) : C(t.$slots, "rect", pt({
                 key: 1,
                 ref_for: !0
               }, {
                 rect: l,
-                shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || J.value,
-                fontSize: K(l),
-                isZoom: J.value,
-                textColor: r(gt)(l.color)
+                shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || Q.value,
+                fontSize: J(l),
+                isZoom: Q.value,
+                textColor: r(yt)(l.color)
               }), void 0, !0)
             ])
-          ], 8, Sl))
+          ], 8, Nl))
         ]))), 128)),
-        C(t.$slots, "svg", ee(te({ svg: Z.value, isZoom: J.value, rect: M.value, config: e.value })), void 0, !0)
-      ], 14, $l)),
-      t.$slots.watermark ? (p(), m("div", Fl, [
-        C(t.$slots, "watermark", ee(te({ isPrinting: r(Ge) || r(Xe) })), void 0, !0)
+        C(t.$slots, "svg", ee(te({ svg: K.value, isZoom: Q.value, rect: M.value, config: e.value })), void 0, !0)
+      ], 14, _l)),
+      t.$slots.watermark ? (v(), m("div", Pl, [
+        C(t.$slots, "watermark", ee(te({ isPrinting: r(Xe) || r(qe) })), void 0, !0)
       ])) : x("", !0),
-      F("div", {
-        ref_key: "chartLegend",
-        ref: Ve
-      }, [
-        e.value.style.chart.legend.show ? (p(), Q(al, {
-          key: `legend_${Ce.value}`,
-          legendSet: at.value,
-          config: It.value,
-          id: `treemap_legend_${I.value}`,
-          onClickMarker: o[0] || (o[0] = ({ legend: l }) => nt(l))
-        }, {
-          item: _(({ legend: l, index: a }) => [
-            r(ue) ? x("", !0) : (p(), m("div", {
-              key: 0,
-              onClick: (h) => nt(l),
-              style: V(`opacity:${L.value.includes(l.id) ? 0.5 : 1}`)
-            }, j(l.name) + j(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + j(e.value.style.chart.legend.showValue ? r(we)(
-              e.value.style.chart.layout.labels.formatter,
-              l.value,
-              r(ve)({
-                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 }
-            ) : "") + " " + j(e.value.style.chart.legend.showPercentage ? L.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 / ae.value) ? "-" : (l.value / ae.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, Nl))
-          ]),
-          _: 1
-        }, 8, ["legendSet", "config", "id"])) : C(t.$slots, "legend", {
-          key: 1,
-          legend: at.value
-        }, void 0, !0)
-      ], 512),
-      t.$slots.source ? (p(), m("div", {
+      O("div", {
+        id: `legend-bottom-${$.value}`
+      }, null, 8, Rl),
+      He.value ? (v(), j(Et, {
         key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${$.value}` : `#legend-bottom-${$.value}`
+      }, [
+        O("div", {
+          ref_key: "chartLegend",
+          ref: Ve
+        }, [
+          e.value.style.chart.legend.show ? (v(), j(sl, {
+            key: `legend_${Ce.value}`,
+            legendSet: nt.value,
+            config: Ft.value,
+            id: `treemap_legend_${$.value}`,
+            onClickMarker: o[0] || (o[0] = ({ legend: l }) => st(l))
+          }, {
+            item: A(({ legend: l, index: a }) => [
+              r(ue) ? x("", !0) : (v(), m("div", {
+                key: 0,
+                onClick: (p) => st(l),
+                style: V(`opacity:${L.value.includes(l.id) ? 0.5 : 1}`)
+              }, Z(l.name) + Z(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + Z(e.value.style.chart.legend.showValue ? r(we)(
+                e.value.style.chart.layout.labels.formatter,
+                l.value,
+                r(de)({
+                  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 }
+              ) : "") + " " + Z(e.value.style.chart.legend.showPercentage ? L.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 / ae.value) ? "-" : (l.value / ae.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, Ll))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "id"])) : C(t.$slots, "legend", {
+            key: 1,
+            legend: nt.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : x("", !0),
+      t.$slots.source ? (v(), m("div", {
+        key: 7,
         ref_key: "source",
         ref: De,
         dir: "auto"
       }, [
         C(t.$slots, "source", {}, void 0, !0)
       ], 512)) : x("", !0),
-      Fe(r(v), {
+      Fe(r(d), {
         show: P.value.showTooltip && D.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -978,16 +989,16 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter
       }, {
-        "tooltip-before": _(() => [
+        "tooltip-before": A(() => [
           C(t.$slots, "tooltip-before", ee(te({ ...Oe.value })), void 0, !0)
         ]),
-        "tooltip-after": _(() => [
+        "tooltip-after": A(() => [
           C(t.$slots, "tooltip-after", ee(te({ ...Oe.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      w.value ? (p(), Q(r(d), {
-        key: 7,
+      w.value ? (v(), j(r(h), {
+        key: 8,
         hideDetails: "",
         config: {
           open: P.value.showTable,
@@ -1002,8 +1013,8 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
           }
         }
       }, {
-        content: _(() => [
-          (p(), Q(r(c), {
+        content: A(() => [
+          (v(), j(r(c), {
             key: `table_${ke.value}`,
             colNames: pe.value.colNames,
             head: pe.value.head,
@@ -1012,24 +1023,24 @@ const ml = ["id"], yl = ["tabindex", "onClick", "onKeydown", "data-last-crumb",
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
             onClose: o[1] || (o[1] = (l) => P.value.showTable = !1)
           }, {
-            th: _(({ th: l }) => [
-              F("div", {
+            th: A(({ th: l }) => [
+              O("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, zl)
+              }, null, 8, Ml)
             ]),
-            td: _(({ td: l }) => [
-              Pe(j(l.name || l), 1)
+            td: A(({ td: l }) => [
+              Pe(Z(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : x("", !0),
-      r(ue) ? (p(), Q(ul, { key: 8 })) : x("", !0)
-    ], 46, ml));
+      r(ue) ? (v(), j(il, { key: 9 })) : x("", !0)
+    ], 46, bl));
   }
-}, Yl = /* @__PURE__ */ rl(Pl, [["__scopeId", "data-v-3b96c525"]]);
+}, Jl = /* @__PURE__ */ cl(Vl, [["__scopeId", "data-v-adb108e4"]]);
 export {
-  Yl as default
+  Jl as default
 };