import { useSlots as pt, onMounted as je, computed as C, ref as g, watch as gt, onBeforeUnmount as mt, createElementBlock as y, openBlock as v, unref as m, normalizeStyle as L, normalizeClass as me, createBlock as X, createCommentVNode as _, createElementVNode as O, createVNode as ye, createSlots as yt, withCtx as x, renderSlot as $, normalizeProps as j, guardReactiveProps as Y, Fragment as ce, renderList as be, withKeys as Ye, withModifiers as ke, mergeProps as Ke, createTextVNode as de, toDisplayString as K, nextTick as bt } from "vue";
import { u as kt, c as Ze, t as wt, p as S, a as Ct, b as $t, o as xt, e as Tt, d as ve, i as he, f as le, X as _t, l as Je, G as Qe, x as et, q as Ot, r as St, y as It } from "./index-BdV23M_4.js";
import { _ as Nt } from "./Title-Dr0O3Ohb.js";
import { u as zt, U as Ft } from "./usePrinter-TFomTfxX.js";
import { _ as At } from "./Tooltip-C8mLFDBp.js";
import { L as Pt } from "./Legend-BCngKEVr.js";
import Rt from "./vue-ui-skeleton-CVnkLuNk.js";
import { D as Lt } from "./DataTable-D9wdDVT6.js";
import Dt from "./vue-ui-accordion-2_hSAOvX.js";
import { t as Mt, u as Vt } from "./useResponsive-vZgZwV-S.js";
import { u as tt } from "./useNestedProp-DyW-iWus.js";
import { _ as Bt } from "./PackageVersion-DR6SOSy8.js";
import { P as Ht } from "./PenAndPaper-DxsKkGjV.js";
import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Wt } from "./useChartAccessibility-BWojgys7.js";
import Et from "./BaseIcon-Dx5FJt-N.js";
import { _ as Gt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function lt(n, r) {
  const u = n.length;
  if (u === 0)
    throw new Error(`Max aspect ratio cannot be computed: ${n} is an empty array`);
  {
    let i = 1 / 0, s = -1 / 0, c = 0;
    for (let f = 0; f < u; f += 1) {
      const p = n[f].normalizedValue;
      p < i && (i = p), p > s && (s = p), c += p;
    }
    return Math.max(
      r ** 2 * s / c ** 2,
      c ** 2 / (r ** 2 * i)
    );
  }
}
function ot(n) {
  const { xOffset: r, yOffset: u, width: i, height: s } = n;
  return {
    x0: r,
    y0: u,
    x1: r + i,
    y1: u + s
  };
}
function qt(n, r, u) {
  if (n.length === 0)
    return !0;
  {
    const i = n.concat(r), s = lt(
      n,
      u
    ), c = lt(i, u);
    return s >= c;
  }
}
function Xt(n) {
  const r = [], u = n.length;
  for (let i = 0; i < u; i += 1) {
    const s = n[i], c = s.length;
    for (let d = 0; d < c; d += 1)
      r.push(s[d]);
  }
  return r;
}
function jt(n, r) {
  const u = {
    ...r,
    children: n
  };
  return nt(u);
}
function Yt(n) {
  return (n.x1 - n.x0) * (n.y1 - n.y0);
}
function at(n, r) {
  const { width: u, height: i, xOffset: s, yOffset: c } = we(r), d = n.length, f = n.map((k) => k.normalizedValue || 0).reduce((k, b) => k + b, 0), p = f / i, z = f / u;
  let I = s, F = c;
  const w = [];
  if (u >= i) {
    for (let k = 0; k < d; k += 1) {
      const b = n[k], T = F + b.normalizedValue / p, M = {
        x0: I,
        y0: F,
        x1: I + p,
        y1: T
      }, A = Object.assign({}, b, M);
      F = T, w.push(A);
    }
    return w;
  } else {
    for (let k = 0; k < d; k += 1) {
      const b = n[k], T = I + b.normalizedValue / z, M = {
        x0: I,
        y0: F,
        x1: T,
        y1: F + z
      }, A = Object.assign({}, b, M);
      I = T, w.push(A);
    }
    return w;
  }
}
function Kt(n) {
  const r = we(n), u = r.width, i = r.height;
  return Math.min(u, i);
}
function Zt(n, r) {
  const u = n.length, i = n.map((p) => p.value ?? 0).reduce((p, z) => p + z, 0), s = r / i, c = [];
  let d, f;
  for (let p = 0; p < u; p += 1)
    f = n[p], d = Object.assign({}, f, {
      normalizedValue: f.value * (s || 0)
    }), c.push(d);
  return c;
}
function we(n) {
  const { x0: r, y0: u, x1: i, y1: s } = n;
  return {
    xOffset: r,
    yOffset: u,
    width: i - r,
    height: s - u
  };
}
function Jt(n, r, u, i) {
  let s = n, c = r, d = u, f = i;
  for (; ; ) {
    const p = s.length;
    if (p === 0) {
      const w = at(c, d);
      return f.concat(w);
    }
    const z = Kt(d), I = s[0], F = s.slice(1, p);
    if (qt(c, I, z)) {
      const w = c.concat(I);
      s = F, c = w, d = d, f = f;
    } else {
      const w = c.length;
      let k = 0;
      for (let A = 0; A < w; A += 1)
        k += c[A].normalizedValue;
      const b = Qt(d, k), T = at(c, d), M = f.concat(T);
      s = s, c = [], d = b, f = M;
    }
  }
}
function nt(n) {
  if (typeof n.children > "u" || !n.children.length)
    return [n];
  {
    const r = Zt(
      n.children,
      Yt(n)
    ), u = Jt(r, [], n, []), i = u.length, s = [];
    for (let d = 0; d < i; d += 1)
      s.push(nt(u[d]));
    return Xt(s);
  }
}
function Qt(n, r) {
  const { width: u, height: i, xOffset: s, yOffset: c } = we(n);
  if (u >= i) {
    const d = r / i, f = u - d, p = {
      xOffset: s + d,
      yOffset: c,
      width: f,
      height: i
    };
    return ot(p);
  } else {
    const d = r / u, f = i - d, p = {
      xOffset: s,
      yOffset: c + d,
      width: u,
      height: f
    };
    return ot(p);
  }
}
const el = ["id"], tl = {
  key: 4,
  class: "vue-ui-treemap-breadcrumbs",
  "data-html2canvas-ignore": ""
}, ll = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], ol = { class: "vue-ui-treemap-crumb-unit" }, al = { class: "vue-ui-treemap-crumb-unit-label" }, nl = {
  key: 0,
  style: { width: "24px", display: "flex", "align-items": "center" }
}, sl = {
  key: 0,
  class: "vue-ui-treemap-crumb-unit-arrow"
}, ul = ["xmlns", "viewBox"], rl = { key: 0 }, il = ["id"], cl = ["stop-color"], dl = ["stop-color"], vl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], hl = ["x", "y", "height", "width"], fl = {
  style: { width: "100%", height: "100%" },
  class: "vue-ui-treemap-cell"
}, pl = {
  key: 6,
  class: "vue-data-ui-watermark"
}, gl = ["onClick"], ml = { key: 0 }, yl = { key: 1 }, bl = ["innerHTML"], kl = {
  __name: "vue-ui-treemap",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectLegend", "selectDatapoint"],
  setup(n, { expose: r, emit: u }) {
    const { vue_ui_treemap: i } = kt(), s = n, c = u, d = pt();
    je(() => {
      d["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
    });
    const f = C(() => !!s.dataset && s.dataset.length), p = C(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), z = g(Ze()), I = g(!1), F = g(""), w = g(!1), k = g(0), b = g([]), T = g(null), M = g(null), A = g(null), Ce = g(null), $e = g(null), xe = g(0), Te = g(0), _e = g(0), t = C({
      get: () => Ne(),
      set: (e) => e
    }), { userOptionsVisible: fe, setUserOptionsVisibility: Oe, keepUserOptionState: Se } = Ut({ config: t.value }), { svgRef: Ie } = Wt({ config: t.value.style.chart.title });
    function Ne() {
      const e = tt({
        userConfig: s.config,
        defaultConfig: i
      });
      return e.theme ? {
        ...tt({
          userConfig: Ct.vue_ui_treemap[e.theme] || s.config,
          defaultConfig: e
        }),
        customPalette: wt[e.theme] || S
      } : e;
    }
    gt(() => s.config, (e) => {
      t.value = Ne(), fe.value = !t.value.userOptions.showOnChartHover, xe.value += 1, Te.value += 1, _e.value += 1, P.value.showTable = t.value.table.show, P.value.showTooltip = t.value.style.chart.tooltip.show;
    }, { deep: !0 });
    const { isPrinting: ze, isImaging: Fe, generatePdf: Ae, generateImage: Pe } = zt({
      elementId: `treemap_${z.value}`,
      fileName: t.value.style.chart.title.text || "vue-ui-treemap",
      options: t.value.userOptions.print
    }), st = C(() => t.value.userOptions.show && !t.value.style.chart.title.text), oe = C(() => $t(t.value.customPalette)), P = g({
      showTable: t.value.table.show,
      showTooltip: t.value.style.chart.tooltip.show
    }), V = g({
      height: t.value.style.chart.height,
      width: t.value.style.chart.width
    }), E = C(() => ({
      bottom: V.value.height - t.value.style.chart.padding.bottom,
      height: V.value.height - t.value.style.chart.padding.top - t.value.style.chart.padding.bottom,
      left: t.value.style.chart.padding.left,
      right: V.value.width - t.value.style.chart.padding.right,
      top: t.value.style.chart.padding.top,
      vbHeight: V.value.height,
      vbWidth: V.value.width,
      width: V.value.width - t.value.style.chart.padding.left - t.value.style.chart.padding.right
    }));
    function Re(e) {
      e.forEach((o, l) => {
        o.id = Ze(), o.color = ve(o.color) || oe.value[l] || S[l] || S[l % S.length], o.children && (o.children.forEach((a) => {
          a.parentId = o.id, a.color = o.color;
        }), Re(o.children));
      });
    }
    const B = g(s.dataset), ae = g(null);
    je(() => {
      ut();
    });
    function ut() {
      if (xt(s.dataset) && Tt({
        componentName: "VueUiTreemap",
        type: "dataset"
      }), Re(B.value), t.value.responsive) {
        const e = Mt(() => {
          const { width: o, height: l } = Vt({
            chart: T.value,
            title: t.value.style.chart.title.text ? M.value : null,
            legend: t.value.style.chart.legend.show ? A.value : null,
            source: Ce.value,
            noTitle: $e.value
          });
          requestAnimationFrame(() => {
            V.value.width = o, V.value.height = l;
          });
        });
        ae.value = new ResizeObserver(e), ae.value.observe(T.value.parentNode);
      }
    }
    mt(() => {
      ae.value && ae.value.disconnect();
    });
    const Z = g(B.value), ee = C(() => Z.value.map((e, o) => ({
      ...e,
      color: ve(e.color) || oe.value[o] || S[o] || S[o % S.length]
    })).filter((e) => !b.value.includes(e.id))), J = C(() => B.value.filter((e) => !b.value.includes(e.id)).map((e) => e.value || 0).reduce((e, o) => e + o, 0)), Le = C({
      get() {
        let e = [...ee.value];
        return t.value.style.chart.layout.sorted && (e = [...ee.value].sort((o, l) => l.value - o.value)), e.map((o) => ({
          ...o
        }));
      },
      set(e) {
        return e;
      }
    });
    function De(e, o) {
      return e.value / o;
    }
    function rt(e, o, l) {
      const a = t.value.style.chart.layout.rects.colorRatio - De(o, l);
      return Je(e, a < 0 ? 0 : a);
    }
    function Me(e, o, l, a) {
      return e.map((h, W) => {
        const ie = rt(ve(o) || oe.value[W] || S[W] || S[W % S.length], h, a), ft = De(h, a);
        return {
          ...h,
          color: ie,
          proportion: ft,
          parentName: l,
          children: h.children ? Me(h.children, ie, h.name, a) : void 0
        };
      });
    }
    const te = C(() => jt(
      Le.value.map((e, o) => {
        const l = e.children ? e.children.reduce((a, h) => a + h.value, 0) : e.value;
        return {
          value: e.value,
          id: e.id,
          children: e.children ? Me(e.children.sort((a, h) => h.value - a.value), e.color, e.name, l) : void 0,
          color: e.color,
          name: e.name
        };
      }),
      { x0: E.value.left * 2, y0: E.value.top, x1: E.value.width, y1: E.value.height }
    ));
    function Ve({ y0: e, y1: o }) {
      return o - e <= 0 ? 1e-4 : o - e;
    }
    function Be({ x0: e, x1: o }) {
      return o - e <= 0 ? 1e-4 : o - e;
    }
    function G(e) {
      const o = t.value.style.chart.layout.labels.fontSize * (e.proportion * 2 > 1 ? 1 : e.proportion * 2);
      return o < t.value.style.chart.layout.labels.minFontSize ? t.value.style.chart.layout.labels.minFontSize : o;
    }
    function it(e) {
      w.value = e, k.value += 1;
    }
    const Q = C(() => ({
      startX: 0,
      startY: 0,
      width: E.value.vbWidth,
      height: E.value.vbHeight
    }));
    function q(e, o = B.value) {
      for (const l of o) {
        if (l.id === e)
          return l;
        if (l.children) {
          const a = q(e, l.children);
          if (a)
            return a;
        }
      }
      return null;
    }
    const N = g([]), H = C(() => N.value.length > 0);
    function ne(e) {
      var l;
      if (!e) {
        Z.value = B.value.slice(), c("selectDatapoint", void 0), N.value = [];
        return;
      }
      const o = q(e.id);
      if (o && ((l = o.children) != null && l.length))
        N.value.push(o.id), Z.value = o.children.slice(), c("selectDatapoint", e);
      else if (e.parentId) {
        N.value.push(e.parentId);
        const a = q(e.parentId);
        Z.value = a.children.slice(), c("selectDatapoint", e);
      } else if (N.value.length > 0) {
        N.value.pop();
        const a = N.value[N.value.length - 1];
        if (a) {
          const h = q(a);
          Z.value = h.children.slice();
        } else
          Z.value = B.value.slice(), N.value = [], c("selectDatapoint", void 0);
      }
    }
    function ct(e) {
      var l;
      const o = q(e.id);
      return !!((l = o == null ? void 0 : o.children) != null && l.length || e.parentId);
    }
    const U = C(() => {
      const e = [
        { id: null, label: "All" }
      ];
      if (N.value.length > 0) {
        let o = q(N.value[N.value.length - 1]);
        const l = [];
        for (; o; )
          l.unshift(o), o = o.parentId ? q(o.parentId) : null;
        for (const a of l)
          e.push({
            id: a.id,
            label: a.name,
            node: a
          });
      }
      return e;
    }), R = g(null), He = C(() => B.value.map((e, o) => ({
      ...e,
      color: ve(e.color) || oe.value[o] || S[o] || S[o % S.length],
      shape: "square"
    })).sort((e, o) => o.value - e.value).map((e, o) => ({
      ...e,
      proportion: e.value / B.value.map((l) => l.value).reduce((l, a) => l + a, 0),
      opacity: b.value.includes(e.id) ? 0.5 : 1
    }))), dt = C(() => ({
      cy: "treemap-div-legend",
      backgroundColor: t.value.style.chart.legend.backgroundColor,
      color: t.value.style.chart.legend.color,
      fontSize: t.value.style.chart.legend.fontSize,
      paddingBottom: 12,
      fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
    }));
    function Ue(e) {
      H.value = !1, R.value = null, b.value.includes(e.id) ? b.value = b.value.filter((o) => o !== e.id) : b.value.length < s.dataset.length - 1 && b.value.push(e.id), c("selectLegend", Le.value);
    }
    const pe = g(null);
    function vt({ datapoint: e, seriesIndex: o }) {
      R.value = e, pe.value = { datapoint: e, seriesIndex: o, config: t.value, series: ee.value };
      const l = t.value.style.chart.tooltip.customFormat;
      if (et(l) && It(() => l({
        seriesIndex: o,
        datapoint: e,
        series: ee.value,
        config: t.value
      })))
        F.value = l({
          seriesIndex: o,
          datapoint: e,
          series: ee.value,
          config: t.value
        });
      else {
        let a = "";
        a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.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="${e.color}"/></svg>`, a += `<b>${he(
          t.value.style.chart.layout.labels.formatter,
          e.value,
          le({
            p: t.value.style.chart.layout.labels.prefix,
            v: e.value,
            s: t.value.style.chart.layout.labels.suffix,
            r: t.value.style.chart.tooltip.roundingValue
          }),
          { datapoint: e, seriesIndex: o }
        )}</b>`, F.value = `<div>${a}</div>`;
      }
      I.value = !0;
    }
    const D = C(() => {
      const e = te.value.map((l) => ({
        name: l.name,
        color: l.color
      })), o = te.value.map((l) => l.value);
      return { head: e, body: o };
    });
    function We() {
      bt(() => {
        const e = D.value.head.map((a, h) => [[
          a.name
        ], [D.value.body[h]], [isNaN(D.value.body[h] / J.value) ? "-" : D.value.body[h] / J.value * 100]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(e), l = Ot(o);
        St({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-treemap" });
      });
    }
    const se = C(() => {
      const e = [
        t.value.table.columnNames.series,
        t.value.table.columnNames.value,
        t.value.table.columnNames.percentage
      ], o = D.value.head.map((h, W) => {
        const ie = he(
          t.value.style.chart.layout.labels.formatter,
          D.value.body[W],
          le({
            p: t.value.style.chart.layout.labels.prefix,
            v: D.value.body[W],
            s: t.value.style.chart.layout.labels.suffix,
            r: t.value.table.td.roundingValue
          })
        );
        return [
          {
            color: h.color,
            name: h.name,
            shape: "square"
          },
          ie,
          isNaN(D.value.body[W] / J.value) ? "-" : le({
            v: D.value.body[W] / J.value * 100,
            s: "%",
            r: t.value.table.td.roundingPercentage
          })
        ];
      }), l = {
        th: {
          backgroundColor: t.value.table.th.backgroundColor,
          color: t.value.table.th.color,
          outline: t.value.table.th.outline
        },
        td: {
          backgroundColor: t.value.table.td.backgroundColor,
          color: t.value.table.td.color,
          outline: t.value.table.td.outline
        },
        breakpoint: t.value.table.responsiveBreakpoint
      };
      return {
        colNames: [
          t.value.table.columnNames.series,
          t.value.table.columnNames.value
        ],
        head: e,
        body: o,
        config: l
      };
    });
    function ht() {
      return te.value;
    }
    function Ee() {
      P.value.showTable = !P.value.showTable;
    }
    function Ge() {
      P.value.showTooltip = !P.value.showTooltip;
    }
    const ue = g(!1);
    function ge() {
      ue.value = !ue.value;
    }
    const re = g(null);
    function qe(e) {
      re.value = e;
    }
    function Xe() {
      re.value = null;
    }
    return r({
      getData: ht,
      generateCsv: We,
      generateImage: Pe,
      generatePdf: Ae,
      toggleTable: Ee,
      toggleTooltip: Ge,
      toggleAnnotator: ge
    }), (e, o) => (v(), y("div", {
      ref_key: "treemapChart",
      ref: T,
      class: me(`vue-ui-treemap ${w.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
      style: L(`font-family:${t.value.style.fontFamily};width:100%; ${t.value.responsive ? "height: 100%;" : ""} text-align:center;background:${t.value.style.chart.backgroundColor}`),
      id: `treemap_${z.value}`,
      onMouseenter: o[3] || (o[3] = () => m(Oe)(!0)),
      onMouseleave: o[4] || (o[4] = () => m(Oe)(!1))
    }, [
      t.value.userOptions.buttons.annotator ? (v(), X(Ht, {
        key: 0,
        svgRef: m(Ie),
        backgroundColor: t.value.style.chart.backgroundColor,
        color: t.value.style.chart.color,
        active: ue.value,
        onClose: ge
      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
      st.value ? (v(), y("div", {
        key: 1,
        ref_key: "noTitle",
        ref: $e,
        class: "vue-data-ui-no-title-space",
        style: "height:36px; width: 100%;background:transparent"
      }, null, 512)) : _("", !0),
      t.value.style.chart.title.text ? (v(), y("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: M,
        style: L(`width:100%;background:${t.value.style.chart.backgroundColor};padding-bottom:6px`)
      }, [
        (v(), X(Nt, {
          key: `title_${xe.value}`,
          config: {
            title: {
              cy: "treemap-div-title",
              ...t.value.style.chart.title
            },
            subtitle: {
              cy: "treemap-div-subtitle",
              ...t.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 4)) : _("", !0),
      t.value.userOptions.show && f.value && (m(Se) || m(fe)) ? (v(), X(Ft, {
        ref: "details",
        key: `user_option_${k.value}`,
        backgroundColor: t.value.style.chart.backgroundColor,
        color: t.value.style.chart.color,
        isPrinting: m(ze),
        isImaging: m(Fe),
        uid: z.value,
        hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
        hasPdf: t.value.userOptions.buttons.pdf,
        hasXls: t.value.userOptions.buttons.csv,
        hasImg: t.value.userOptions.buttons.img,
        hasTable: t.value.userOptions.buttons.table,
        hasFullscreen: t.value.userOptions.buttons.fullscreen,
        isFullscreen: w.value,
        isTooltip: P.value.showTooltip,
        titles: { ...t.value.userOptions.buttonTitles },
        chartElement: T.value,
        position: t.value.userOptions.position,
        hasAnnotator: t.value.userOptions.buttons.annotator,
        isAnnotation: ue.value,
        onToggleFullscreen: it,
        onGeneratePdf: m(Ae),
        onGenerateCsv: We,
        onGenerateImage: m(Pe),
        onToggleTable: Ee,
        onToggleTooltip: Ge,
        onToggleAnnotator: ge,
        style: L({
          visibility: m(Se) ? m(fe) ? "visible" : "hidden" : "visible"
        })
      }, yt({ _: 2 }, [
        e.$slots.menuIcon ? {
          name: "menuIcon",
          fn: x(({ isOpen: l, color: a }) => [
            $(e.$slots, "menuIcon", j(Y({ isOpen: l, color: a })), void 0, !0)
          ]),
          key: "0"
        } : void 0,
        e.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: x(() => [
            $(e.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        e.$slots.optionPdf ? {
          name: "optionPdf",
          fn: x(() => [
            $(e.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        e.$slots.optionCsv ? {
          name: "optionCsv",
          fn: x(() => [
            $(e.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        e.$slots.optionImg ? {
          name: "optionImg",
          fn: x(() => [
            $(e.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        e.$slots.optionTable ? {
          name: "optionTable",
          fn: x(() => [
            $(e.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "5"
        } : void 0,
        e.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: x(({ toggleFullscreen: l, isFullscreen: a }) => [
            $(e.$slots, "optionFullscreen", j(Y({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
          ]),
          key: "6"
        } : void 0,
        e.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: x(({ toggleAnnotator: l, isAnnotator: a }) => [
            $(e.$slots, "optionAnnotator", j(Y({ 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", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
      U.value.length > 1 ? (v(), y("nav", tl, [
        (v(!0), y(ce, null, be(U.value, (l, a) => (v(), y("span", {
          role: "button",
          tabindex: a < U.value.length - 1 ? 0 : void 0,
          key: l.id || "root",
          onClick: (h) => a === U.value.length - 1 ? () => {
          } : ne(l.node),
          onKeydown: [
            Ye(ke((h) => a === U.value.length - 1 ? void 0 : ne(l.node), ["prevent"]), ["enter"]),
            Ye(ke((h) => a === U.value.length - 1 ? void 0 : ne(l.node), ["prevent"]), ["space"])
          ],
          class: "vue-ui-treemap-crumb",
          "data-last-crumb": a === U.value.length - 1,
          style: L({
            color: t.value.style.chart.color
          }),
          onMouseenter: (h) => qe(a),
          onMouseleave: Xe,
          onFocus: (h) => qe(a),
          onBlur: Xe
        }, [
          O("span", ol, [
            O("span", al, [
              $(e.$slots, "breadcrumb-label", Ke({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: re.value === a }), () => [
                a === 0 ? (v(), y("div", nl, [
                  ye(Et, {
                    name: re.value === 0 ? "homeFilled" : "home",
                    stroke: t.value.style.chart.color
                  }, null, 8, ["name", "stroke"])
                ])) : (v(), y(ce, { key: 1 }, [
                  de(K(l.label), 1)
                ], 64))
              ], !0)
            ]),
            a < U.value.length - 1 ? (v(), y("span", sl, [
              $(e.$slots, "breadcrumb-arrow", {}, () => [
                o[5] || (o[5] = de(" › "))
              ], !0)
            ])) : _("", !0)
          ])
        ], 44, ll))), 128))
      ])) : _("", !0),
      f.value ? (v(), y("svg", {
        key: 5,
        ref_key: "svgRef",
        ref: Ie,
        xmlns: m(_t),
        class: me({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value, "vue-data-ui-zoom-plus": !H.value, "vue-data-ui-zoom-minus": H.value }),
        viewBox: `${Q.value.startX} ${Q.value.startY} ${Q.value.width <= 0 ? 10 : Q.value.width} ${Q.value.height <= 0 ? 10 : Q.value.height}`,
        style: L(`max-width:100%; overflow: hidden; background:transparent;color:${t.value.style.chart.color}`)
      }, [
        ye(Bt),
        (v(!0), y(ce, null, be(te.value, (l, a) => (v(), y("g", null, [
          t.value.style.chart.layout.rects.gradient.show ? (v(), y("defs", rl, [
            O("radialGradient", {
              id: `tgrad_${l.id}`,
              gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
            }, [
              O("stop", {
                offset: "18%",
                "stop-color": l.color
              }, null, 8, cl),
              O("stop", {
                offset: "100%",
                "stop-color": m(Je)(l.color, t.value.style.chart.layout.rects.gradient.intensity / 100)
              }, null, 8, dl)
            ], 8, il)
          ])) : _("", !0)
        ]))), 256)),
        (v(!0), y(ce, null, be(te.value, (l, a) => (v(), y("g", null, [
          O("rect", {
            x: l.x0,
            y: l.y0,
            height: Ve(l),
            width: Be(l),
            fill: p.value ? l.color : t.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${l.id})` : l.color,
            rx: t.value.style.chart.layout.rects.borderRadius,
            stroke: R.value && R.value.id === l.id ? t.value.style.chart.layout.rects.selected.stroke : t.value.style.chart.layout.rects.stroke,
            "stroke-width": R.value && R.value.id === l.id ? t.value.style.chart.layout.rects.selected.strokeWidth : t.value.style.chart.layout.rects.strokeWidth,
            onClick: ke((h) => ne(l), ["stop"]),
            onMouseenter: () => vt({
              datapoint: l,
              seriesIndex: a
            }),
            onMouseleave: o[0] || (o[0] = (h) => {
              R.value = null, I.value = !1;
            }),
            style: L(`opacity:${R.value ? R.value.id === l.id ? 1 : t.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
            class: me([
              "vue-ui-treemap-rect",
              ct(l) ? "vue-data-ui-zoom-plus" : H.value ? "vue-data-ui-zoom-minus" : ""
            ])
          }, null, 46, vl),
          (v(), y("foreignObject", {
            x: l.x0,
            y: l.y0,
            height: Ve(l),
            width: Be(l),
            class: "vue-ui-treemap-cell-foreignObject"
          }, [
            O("div", fl, [
              t.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > t.value.style.chart.layout.labels.hideUnderProportion || H.value) ? (v(), y("div", {
                key: 0,
                class: "vue-ui-treemap-cell-default",
                style: L(`width:calc(100% - ${G(l) / 1.5}px);text-align:left;line-height:${G(l) < 14 ? 14 : G(l)}px;padding:${G(l) / 3}px; color:${m(Qe)(l.color)}`)
              }, [
                O("span", {
                  style: L(`width:100%;font-size:${G(l)}px;`)
                }, K(l.name), 5),
                o[6] || (o[6] = O("br", null, null, -1)),
                O("span", {
                  style: L(`width:100%;font-size:${G(l)}px;`)
                }, K(m(he)(
                  t.value.style.chart.layout.labels.formatter,
                  l.value,
                  m(le)({
                    p: t.value.style.chart.layout.labels.prefix,
                    v: l.value,
                    s: t.value.style.chart.layout.labels.suffix,
                    r: t.value.style.chart.layout.labels.rounding
                  }),
                  { datapoint: l }
                )), 5)
              ], 4)) : _("", !0),
              $(e.$slots, "rect", Ke({ ref_for: !0 }, {
                rect: l,
                shouldShow: l.proportion > t.value.style.chart.layout.labels.hideUnderProportion || H.value,
                fontSize: G(l),
                isZoom: H.value,
                textColor: m(Qe)(l.color)
              }), void 0, !0)
            ])
          ], 8, hl))
        ]))), 256)),
        $(e.$slots, "svg", j(Y({ svg: E.value, isZoom: H.value, rect: R.value, config: t.value })), void 0, !0)
      ], 14, ul)) : _("", !0),
      e.$slots.watermark ? (v(), y("div", pl, [
        $(e.$slots, "watermark", j(Y({ isPrinting: m(ze) || m(Fe) })), void 0, !0)
      ])) : _("", !0),
      f.value ? _("", !0) : (v(), X(Rt, {
        key: 7,
        config: {
          type: "treemap",
          style: {
            backgroundColor: t.value.style.chart.backgroundColor,
            treemap: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      O("div", {
        ref_key: "chartLegend",
        ref: A
      }, [
        t.value.style.chart.legend.show ? (v(), X(Pt, {
          key: `legend_${_e.value}`,
          legendSet: He.value,
          config: dt.value,
          id: `treemap_legend_${z.value}`,
          onClickMarker: o[1] || (o[1] = ({ legend: l }) => Ue(l))
        }, {
          item: x(({ legend: l, index: a }) => [
            O("div", {
              onClick: (h) => Ue(l),
              style: L(`opacity:${b.value.includes(l.id) ? 0.5 : 1}`)
            }, [
              de(K(l.name) + ": " + K(m(he)(
                t.value.style.chart.layout.labels.formatter,
                l.value,
                m(le)({
                  p: t.value.style.chart.layout.labels.prefix,
                  v: l.value,
                  s: t.value.style.chart.layout.labels.suffix,
                  r: t.value.style.chart.legend.roundingValue
                }),
                { datapoint: l }
              )) + " ", 1),
              b.value.includes(l.id) ? (v(), y("span", yl, " ( - % ) ")) : (v(), y("span", ml, " (" + K(isNaN(l.value / J.value) ? "-" : (l.value / J.value * 100).toFixed(t.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
            ], 12, gl)
          ]),
          _: 1
        }, 8, ["legendSet", "config", "id"])) : $(e.$slots, "legend", {
          key: 1,
          legend: He.value
        }, void 0, !0)
      ], 512),
      e.$slots.source ? (v(), y("div", {
        key: 8,
        ref_key: "source",
        ref: Ce,
        dir: "auto"
      }, [
        $(e.$slots, "source", {}, void 0, !0)
      ], 512)) : _("", !0),
      ye(At, {
        show: P.value.showTooltip && I.value,
        backgroundColor: t.value.style.chart.tooltip.backgroundColor,
        color: t.value.style.chart.tooltip.color,
        fontSize: t.value.style.chart.tooltip.fontSize,
        borderRadius: t.value.style.chart.tooltip.borderRadius,
        borderColor: t.value.style.chart.tooltip.borderColor,
        borderWidth: t.value.style.chart.tooltip.borderWidth,
        backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
        position: t.value.style.chart.tooltip.position,
        offsetY: t.value.style.chart.tooltip.offsetY,
        parent: T.value,
        content: F.value,
        isFullscreen: w.value,
        isCustom: m(et)(t.value.style.chart.tooltip.customFormat)
      }, {
        "tooltip-before": x(() => [
          $(e.$slots, "tooltip-before", j(Y({ ...pe.value })), void 0, !0)
        ]),
        "tooltip-after": x(() => [
          $(e.$slots, "tooltip-after", j(Y({ ...pe.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
      f.value ? (v(), X(Dt, {
        key: 9,
        hideDetails: "",
        config: {
          open: P.value.showTable,
          maxHeight: 1e4,
          body: {
            backgroundColor: t.value.style.chart.backgroundColor,
            color: t.value.style.chart.color
          },
          head: {
            backgroundColor: t.value.style.chart.backgroundColor,
            color: t.value.style.chart.color
          }
        }
      }, {
        content: x(() => [
          (v(), X(Lt, {
            key: `table_${Te.value}`,
            colNames: se.value.colNames,
            head: se.value.head,
            body: se.value.body,
            config: se.value.config,
            title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: o[2] || (o[2] = (l) => P.value.showTable = !1)
          }, {
            th: x(({ th: l }) => [
              O("div", {
                innerHTML: l,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, bl)
            ]),
            td: x(({ td: l }) => [
              de(K(l.name || l), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"]))
        ]),
        _: 1
      }, 8, ["config"])) : _("", !0)
    ], 46, el));
  }
}, Ml = /* @__PURE__ */ Gt(kl, [["__scopeId", "data-v-3119d5fd"]]);
export {
  Ml as default
};
