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