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