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