vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,591 lines • 61.3 kB
JavaScript
import { defineAsyncComponent as Oe, useSlots as kl, onMounted as xo, computed as A, ref as $, shallowRef as me, toRefs as wl, watch as _e, onBeforeUnmount as Al, createElementBlock as T, openBlock as f, unref as m, normalizeStyle as be, normalizeClass as Ht, createBlock as Te, createCommentVNode as I, createElementVNode as U, createVNode as lt, withCtx as F, renderSlot as x, normalizeProps as Z, guardReactiveProps as J, createSlots as $o, Fragment as je, renderList as at, withKeys as To, withModifiers as Vt, mergeProps as nt, createTextVNode as st, toDisplayString as rt, Teleport as xl, resolveDynamicComponent as $l, nextTick as Tl } from "vue";
import { c as ut, t as Sl, i as Fl, j, k as Ml, o as So, g as Ol, m as Ye, a as it, d as Xe, X as Wt, q as ct, x as dt, y as Fo, v as _l, r as Bl, aw as vt, ax as Ut, _ as Dl } from "./lib-BwysEpWI.js";
import { t as El, u as Ll } from "./useResponsive-DfdjqQps.js";
import { u as Il, a as jt } from "./useNestedProp-OFRiX4kU.js";
import { u as Pl, B as Rl } from "./BaseScanner-BMpwQAfz.js";
import { u as Nl } from "./usePrinter-BJzHDpYF.js";
import { u as zl } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Hl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Vl } from "./useChartAccessibility-9icAAmYg.js";
import Wl from "./img-DKigoPDs.js";
import Ul from "./Title-DGnfNZuO.js";
import jl from "./Legend-D6z73edh.js";
import Mo from "./BaseIcon-4i3dd7Ty.js";
import { u as Yl } from "./useSvgExport-ByUukOZt.js";
import { _ as Xl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function Oo(r, p) {
const d = r.length;
if (d === 0)
throw new Error(`Max aspect ratio cannot be computed: ${r} is an empty array`);
{
let g = 1 / 0, v = -1 / 0, b = 0;
for (let M = 0; M < d; M += 1) {
const k = r[M].normalizedValue;
k < g && (g = k), k > v && (v = k), b += k;
}
return Math.max(
p ** 2 * v / b ** 2,
b ** 2 / (p ** 2 * g)
);
}
}
function _o(r) {
const { xOffset: p, yOffset: d, width: g, height: v } = r;
return {
x0: p,
y0: d,
x1: p + g,
y1: d + v
};
}
function ql(r, p, d) {
if (r.length === 0)
return !0;
{
const g = r.concat(p), v = Oo(
r,
d
), b = Oo(g, d);
return v >= b;
}
}
function Gl(r) {
const p = [], d = r.length;
for (let g = 0; g < d; g += 1) {
const v = r[g], b = v.length;
for (let y = 0; y < b; y += 1)
p.push(v[y]);
}
return p;
}
function Bo(r, p) {
const d = {
...p,
children: r
};
return Eo(d);
}
function Kl(r) {
return (r.x1 - r.x0) * (r.y1 - r.y0);
}
function Do(r, p) {
const { width: d, height: g, xOffset: v, yOffset: b } = Yt(p), y = r.length, M = r.map((C) => C.normalizedValue || 0).reduce((C, P) => C + P, 0), k = M / g, Ce = M / d;
let le = v, ce = b;
const Y = [];
if (d >= g) {
for (let C = 0; C < y; C += 1) {
const P = r[C], de = ce + P.normalizedValue / k, ke = {
x0: le,
y0: ce,
x1: le + k,
y1: de
}, ve = Object.assign({}, P, ke);
ce = de, Y.push(ve);
}
return Y;
} else {
for (let C = 0; C < y; C += 1) {
const P = r[C], de = le + P.normalizedValue / Ce, ke = {
x0: le,
y0: ce,
x1: de,
y1: ce + Ce
}, ve = Object.assign({}, P, ke);
le = de, Y.push(ve);
}
return Y;
}
}
function Zl(r) {
const p = Yt(r), d = p.width, g = p.height;
return Math.min(d, g);
}
function Jl(r, p) {
const d = r.length, g = r.map((k) => k.value ?? 0).reduce((k, Ce) => k + Ce, 0), v = p / g, b = [];
let y, M;
for (let k = 0; k < d; k += 1)
M = r[k], y = Object.assign({}, M, {
normalizedValue: M.value * (v || 0)
}), b.push(y);
return b;
}
function Yt(r) {
const { x0: p, y0: d, x1: g, y1: v } = r;
return {
xOffset: p,
yOffset: d,
width: g - p,
height: v - d
};
}
function Ql(r, p, d, g) {
let v = r, b = p, y = d, M = g;
for (; ; ) {
const k = v.length;
if (k === 0) {
const Y = Do(b, y);
return M.concat(Y);
}
const Ce = Zl(y), le = v[0], ce = v.slice(1, k);
if (ql(b, le, Ce)) {
const Y = b.concat(le);
v = ce, b = Y, y = y, M = M;
} else {
const Y = b.length;
let C = 0;
for (let ve = 0; ve < Y; ve += 1)
C += b[ve].normalizedValue;
const P = ea(y, C), de = Do(b, y), ke = M.concat(de);
v = v, b = [], y = P, M = ke;
}
}
}
function Eo(r) {
if (typeof r.children > "u" || !r.children.length)
return [r];
{
const p = Jl(
r.children,
Kl(r)
), d = Ql(p, [], r, []), g = d.length, v = [];
for (let y = 0; y < g; y += 1)
v.push(Eo(d[y]));
return Gl(v);
}
}
function ea(r, p) {
const { width: d, height: g, xOffset: v, yOffset: b } = Yt(r);
if (d >= g) {
const y = p / g, M = d - y, k = {
xOffset: v + y,
yOffset: b,
width: M,
height: g
};
return _o(k);
} else {
const y = p / d, M = g - y, k = {
xOffset: v,
yOffset: b + y,
width: d,
height: M
};
return _o(k);
}
}
const Lo = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { rects: { stroke: "#1A1A1A", selected: { stroke: "#5A5A5A" }, group: { stroke: "#8A8A8A", label: { adaptColorToBackground: !1, color: "#CCCCCC" } } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Io = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { rects: { stroke: "#FFF8E1", selected: { stroke: "#FFF8E1" }, group: { stroke: "#424242", label: { adaptColorToBackground: !1, color: "#424242" } } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Po = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { rects: { stroke: "#1E1E1E", selected: { stroke: "#1E1E1E" }, group: { stroke: "#8A8A8A", label: { adaptColorToBackground: !1, color: "#BDBDBD" } } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ro = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { rects: { stroke: "#1A1A1A", selected: { stroke: "#1A1A1A" }, group: { stroke: "#99AA99", label: { adaptColorToBackground: !1, color: "#99AA99" } } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, No = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { rects: { stroke: "#fbfafa", strokeWidth: 2, borderRadius: 12, selected: { stroke: "#fbfafa" } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, zo = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { rects: { stroke: "#1A1A1A", selected: { stroke: "#1A1A1A" }, group: { stroke: "#50606C", label: { adaptColorToBackground: !1, color: "#50606C" } } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Ho = {
default: {},
dark: Lo,
celebration: Io,
celebrationNight: Po,
hack: Ro,
zen: No,
concrete: zo
}, za = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Io,
celebrationNight: Po,
concrete: zo,
dark: Lo,
default: Ho,
hack: Ro,
zen: No
}, Symbol.toStringTag, { value: "Module" })), ta = ["id"], oa = ["id"], la = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], aa = { class: "vue-ui-treemap-crumb-unit" }, na = { class: "vue-ui-treemap-crumb-unit-label" }, sa = {
key: 0,
style: { width: "24px", display: "flex", "align-items": "center" }
}, ra = {
key: 0,
class: "vue-ui-treemap-crumb-unit-arrow"
}, ua = ["xmlns", "viewBox"], ia = { key: 0 }, ca = ["id"], da = ["stop-color"], va = ["stop-color"], ha = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], fa = ["width", "height", "x", "y"], pa = ["innerHTML"], ga = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], ya = ["innerHTML"], ma = ["x", "y", "height", "width"], ba = {
key: 5,
class: "vue-data-ui-watermark"
}, Ca = ["id"], ka = ["onClick"], wa = ["innerHTML"], Aa = {
__name: "vue-ui-treemap",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(r, { expose: p, emit: d }) {
const g = Oe(() => import("./DataTable-WrXCJkfE.js")), v = Oe(() => import("./PenAndPaper-DxIUvoQ8.js")), b = Oe(() => import("./vue-ui-accordion-DUuwVsuJ.js")), y = Oe(() => import("./Tooltip-TDyKgLB6.js")), M = Oe(() => import("./UserOptions-CzJWRC4s.js")), k = Oe(() => import("./PackageVersion-BLzm8l_I.js")), Ce = Oe(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_treemap: le } = Il(), { isThemeValid: ce, warnInvalidTheme: Y } = zl(), C = r, P = d, de = kl();
xo(() => {
de["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
});
const ke = A(() => !!C.dataset && C.dataset.length), ve = A(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), we = $(ut()), ht = $(!1), ft = $(""), Se = $(!1), Xt = $(0), V = $([]), ae = me(null), qt = me(null), Gt = me(null), Kt = me(null), Zt = me(null), Jt = $(0), pt = $(0), gt = $(0), B = $([]), yt = $(null), Qt = $(!1), Pe = $(null), mt = $(null), Re = $(null), W = $(/* @__PURE__ */ new Map()), t = $(wt()), { loading: Fe, FINAL_DATASET: bt, manualLoading: Vo } = Pl({
...wl(C),
FINAL_CONFIG: t,
prepareConfig: wt,
skeletonDataset: [
{
name: "_",
value: 53,
color: "#CACACA90",
children: [
{ name: "_", value: 21 },
{ name: "_", value: 13 },
{ name: "_", value: 8 },
{ name: "_", value: 5 },
{ name: "_", value: 3 },
{ name: "_", value: 2 },
{ name: "_", value: 1 }
]
}
],
skeletonConfig: Sl({
defaultConfig: t.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#999999",
layout: {
labels: {
showDefaultLabels: !1
},
rects: {
stroke: "#6A6A6A"
}
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
}), { userOptionsVisible: Ct, setUserOptionsVisibility: eo, keepUserOptionState: to } = Hl({ config: t.value }), { svgRef: kt } = Vl({ config: t.value.style.chart.title });
function wt() {
const e = jt({
userConfig: C.config,
defaultConfig: le
}), l = e.theme;
if (!l) return e;
if (!ce.value(e))
return Y(e), e;
const o = jt({
userConfig: Ho[l] || C.config,
defaultConfig: e
}), a = jt({
userConfig: C.config,
defaultConfig: o
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : Fl[l] || j
};
}
_e(() => C.config, (e) => {
Fe.value || (t.value = wt()), Ct.value = !t.value.userOptions.showOnChartHover, Jt.value += 1, pt.value += 1, gt.value += 1, X.value.showTable = t.value.table.show, X.value.showTooltip = t.value.style.chart.tooltip.show;
}, { deep: !0 });
const { isPrinting: oo, isImaging: lo, generatePdf: ao, generateImage: no } = Nl({
elementId: `treemap_${we.value}`,
fileName: t.value.style.chart.title.text || "vue-ui-treemap",
options: t.value.userOptions.print
}), Wo = A(() => t.value.userOptions.show && !t.value.style.chart.title.text), qe = A(() => Ml(t.value.customPalette)), X = $({
showTable: t.value.table.show,
showTooltip: t.value.style.chart.tooltip.show
});
_e(t, () => {
X.value = {
showTable: t.value.table.show,
showTooltip: t.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const Me = $({
height: t.value.style.chart.height,
width: t.value.style.chart.width
});
function Uo(e) {
const l = ae.value, o = Me.value.height;
if (!l || !o) return e;
const a = l.getBoundingClientRect();
return e * (o / a.height);
}
function jo() {
if (!yt.value || fe.value.length <= 1) return 0;
const e = yt.value, l = getComputedStyle(e), o = e.offsetHeight + parseFloat(l.marginTop || "0") + parseFloat(l.marginBottom || "0") + parseFloat(l.paddingTop || "0") + parseFloat(l.paddingBottom || "0");
return Uo(o);
}
const E = A(() => {
const e = t.value.style.chart.padding, l = Me.value.width, o = Me.value.height, a = jo(), n = e.left, u = l - e.right, s = e.top, i = o - e.bottom - a;
return {
left: n,
top: s,
right: u,
bottom: i,
width: u - n,
height: Math.max(0, i - s),
vbWidth: l,
vbHeight: o - a,
offsetY: a
};
}), z = $(bt.value), Ae = $(z.value), so = me(/* @__PURE__ */ new Map());
_e(
[z, () => t.value],
() => {
Re.value = null, W.value = /* @__PURE__ */ new Map();
},
{ deep: !0 }
), _e(
() => V.value,
() => {
Re.value = null, W.value = /* @__PURE__ */ new Map();
},
{ deep: !0 }
), _e(
[() => Me.value.width, () => Me.value.height],
() => {
W.value = /* @__PURE__ */ new Map();
}
);
function ro(e) {
Array.isArray(e) && e.forEach((l, o) => {
l.id || (l.id = ut());
let a = Ye(l.color) || so.value.get(l.id) || qe.value[o] || j[o] || j[o % j.length];
a = Ye(a), so.value.set(l.id, a), l.color = a, uo(l, a);
});
}
function uo(e, l) {
Array.isArray(e.children) && e.children.forEach((o) => {
o.id || (o.id = ut()), o.parentId = e.id, o.color = l, uo(o, l);
});
}
function Yo() {
if (!B.value.length)
Ae.value = z.value.slice();
else {
const e = B.value[B.value.length - 1], l = q(e);
Ae.value = l?.children?.slice() || [];
}
}
_e(
() => bt.value,
() => {
z.value = bt.value, ro(z.value), Yo(), gt.value += 1, pt.value += 1;
},
{ deep: !0, immediate: !0, flush: "post" }
);
const xe = me(null), Be = me(null);
xo(() => {
Qt.value = !0, qo();
});
const Xo = A(() => t.value.debug);
function qo() {
if (So(C.dataset) && Ol({
componentName: "VueUiTreemap",
type: "dataset",
debug: Xo.value
}), ro(z.value), So(C.dataset) || (Vo.value = t.value.loading), t.value.responsive) {
const e = El(() => {
const { width: l, height: o } = Ll({
chart: ae.value,
title: t.value.style.chart.title.text ? qt.value : null,
legend: t.value.style.chart.legend.show ? Gt.value : null,
source: Kt.value,
noTitle: Zt.value
});
requestAnimationFrame(() => {
Me.value.width = l, Me.value.height = o - 12;
});
});
xe.value && (Be.value && xe.value.unobserve(Be.value), xe.value.disconnect()), xe.value = new ResizeObserver(e), Be.value = ae.value.parentNode, xe.value.observe(Be.value);
}
}
Al(() => {
xe.value && (Be.value && xe.value.unobserve(Be.value), xe.value.disconnect());
});
const Ne = A(() => Ae.value.map((e, l) => ({
...e,
color: Ye(e.color) || qe.value[l] || j[l] || j[l % j.length]
})).filter((e) => !V.value.includes(e.id))), De = A(() => z.value.filter((e) => !V.value.includes(e.id)).map((e) => e.value || 0).reduce((e, l) => e + l, 0)), At = A({
get() {
let e = [...Ne.value];
return t.value.style.chart.layout.sorted && (e = [...Ne.value].sort((l, o) => o.value - l.value)), e.map((l) => ({
...l
}));
},
set(e) {
return e;
}
});
function io(e, l) {
return e.value / l;
}
function Go(e, l, o) {
const a = t.value.style.chart.layout.rects.colorRatio - io(l, o);
return ct(e, a < 0 ? 0 : a);
}
function co(e) {
return Array.isArray(e.children) && e.children.length > 0;
}
function Ko(e) {
return [...e].sort((l, o) => {
const a = co(l), n = co(o);
if (a !== n)
return a - n;
const u = Number(l.value) || 0;
return (Number(o.value) || 0) - u;
});
}
function vo(e, l, o, a, n) {
return Ko(e).map((s, i) => {
const c = Go(
Ye(l) || qe.value[i] || j[i] || j[i % j.length],
s,
a
), h = io(s, a), S = n ?? s.parentId ?? s.id;
return {
...s,
color: c,
proportion: h,
parentName: o,
rootId: S,
children: Array.isArray(s.children) && s.children.length ? vo(
s.children,
c,
s.name,
a,
S
) : void 0
};
});
}
const ho = A(() => {
const e = At.value.map((n) => Number(n.value) || 0).reduce((n, u) => n + u, 0) || 1, l = At.value.map((n) => {
const u = n.children ? n.children.reduce((s, i) => s + (Number(i.value) || 0), 0) : n.value;
return {
value: n.value,
id: n.id || ut(),
proportion: (Number(n.value) || 0) / e,
children: n.children ? vo(
n.children,
n.color,
n.name,
u || 1
) : void 0,
color: n.color,
name: n.name
};
});
if (B.value.length === 0) {
if (!Re.value) {
const i = { x0: 0, y0: 0, x1: 1, y1: 1 };
Re.value = Bo(l, i);
}
const n = {
x0: E.value.left,
y0: E.value.top,
x1: E.value.left + E.value.width,
y1: E.value.top + E.value.height
}, u = n.x1 - n.x0, s = n.y1 - n.y0;
return Re.value.map((i) => ({
...i,
x0: n.x0 + i.x0 * u,
x1: n.x0 + i.x1 * u,
y0: n.y0 + i.y0 * s,
y1: n.y0 + i.y1 * s
}));
}
const a = {
x0: E.value.left,
y0: E.value.top,
x1: E.value.left + E.value.width,
y1: E.value.top + E.value.height
};
return Bo(l, a);
});
function Zo(e) {
const l = B.value.length ? B.value[B.value.length - 1] : null, o = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
for (const i of e) {
let c = tl(i.id);
if (l) {
const h = c.indexOf(l);
if (h >= 0)
c = c.slice(h);
else
continue;
}
c = c.filter((h) => {
const S = q(h);
return S && Array.isArray(S.children) && S.children.length;
}), c.length && (c.forEach((h, S) => {
const L = q(h);
if (!L) return;
let w = o.get(h);
w ? (w.x0 = Math.min(w.x0, i.x0), w.y0 = Math.min(w.y0, i.y0), w.x1 = Math.max(w.x1, i.x1), w.y1 = Math.max(w.y1, i.y1), w.depth = Math.min(w.depth, S)) : (w = {
id: h,
name: L.name,
value: L.value,
color: L.color,
x0: i.x0,
y0: i.y0,
x1: i.x1,
y1: i.y1,
depth: S
// depth from visible root
}, o.set(h, w));
let H = n.get(h);
H || (H = /* @__PURE__ */ new Set(), n.set(h, H)), H.add(i.id);
const Q = u.get(h);
(Q == null || S < Q) && u.set(h, S);
}), a.set(i.id, c));
}
return {
wrappers: Array.from(o.values()).map((i) => ({
...i,
depth: u.get(i.id) ?? i.depth ?? 0,
childrenIds: Array.from(n.get(i.id) || [])
})),
ancestorsByLeaf: a
};
}
const xt = A(() => Zo(ho.value)), Jo = A(() => {
const e = xt.value.wrappers;
return e.length ? e.filter((l) => Qo(l)) : [];
});
function $t(e) {
return he(e) * 1.2;
}
function Qo(e) {
const l = $t(e);
return ne(e) < l * 1.1 ? !1 : (e.labelY0 = e.y0, !0);
}
const ze = A(() => el({
rects: ho.value,
wrappers: xt.value.wrappers,
ancestorsByLeaf: xt.value.ancestorsByLeaf
}));
function el({ rects: e, wrappers: l, ancestorsByLeaf: o }) {
if (!l.length || !o) return e;
const a = new Map(l.map((n) => [n.id, n]));
return e.map((n) => {
const u = o.get(n.id);
if (!u || !u.length) return n;
let s = { ...n };
for (const i of u) {
const c = a.get(i);
if (!c) continue;
const h = ne(c), S = $t(c);
if (h < S * 1.1) continue;
const L = he(c), w = L * 1.2, H = L * 0.5, Q = L * 0.5, Ie = w * 0.5, Ve = se(c) / 3, We = Math.min(H, Ve), $e = h * 0.25, _t = Math.min(Q, $e), Dt = (typeof c.labelY0 == "number" ? c.labelY0 : c.y0) + S, re = Math.max(s.x0, c.x0 + We), ge = Math.min(s.x1, c.x1 - We), ye = Math.max(s.y0, Dt + Ie), Et = Math.min(s.y1, c.y1 - _t);
if (ge <= re || Et <= ye)
break;
s = {
...s,
x0: re,
y0: ye,
x1: ge,
y1: Et
};
}
return s;
});
}
function ne({ y0: e, y1: l }) {
return l - e <= 0 ? 1e-4 : l - e;
}
function se({ x0: e, x1: l }) {
return l - e <= 0 ? 1e-4 : l - e;
}
function he(e) {
const l = t.value.style.chart.layout.labels, o = l.fontSize, a = l.minFontSize, n = l.fontSize * 2, u = 0.5, s = 0.6, i = 1, c = 0.9;
let h = e.proportion;
if (!(typeof h == "number" && isFinite(h))) {
const Q = Math.max(1e-6, se(e) * ne(e)), Ie = Math.max(1e-6, E.value.width * E.value.height);
h = Q / Ie;
}
const S = Math.pow(Math.min(1, Math.max(0, h)), u), L = s + (i - s) * S;
let w = o * L;
const H = Math.max(1e-4, Math.min(se(e), ne(e)));
return w = Math.min(w, H * c), w = Math.max(a, Math.min(n, w)), w;
}
function fo(e) {
Se.value = e, Xt.value += 1;
}
const Ee = A(() => ({
startX: 0,
startY: 0,
width: E.value.vbWidth,
height: E.value.vbHeight
}));
function q(e, l = z.value) {
for (const o of l) {
if (o.id === e)
return o;
if (o.children) {
const a = q(e, o.children);
if (a)
return a;
}
}
return null;
}
function tl(e) {
const l = [];
let o = q(e);
for (; o && o.parentId; ) {
const a = q(o.parentId);
if (!a) break;
l.unshift(a.id), o = a;
}
return l;
}
const Le = A(() => B.value.length > 0);
function Ge(e, l) {
if (!e) {
Ae.value = z.value.slice(), P("selectDatapoint", void 0), B.value = [];
return;
}
t.value.events.datapointClick && t.value.events.datapointClick({ datapoint: e, seriesIndex: l });
const o = q(e.id);
if (o && o.children?.length)
B.value.push(o.id), Ae.value = o.children.slice(), P("selectDatapoint", e);
else if (e.parentId) {
B.value.push(e.parentId);
const a = q(e.parentId);
Ae.value = a.children.slice(), P("selectDatapoint", e);
} else if (B.value.length > 0) {
B.value.pop();
const a = B.value[B.value.length - 1];
if (a) {
const n = q(a);
Ae.value = n.children.slice();
} else
Ae.value = z.value.slice(), B.value = [], P("selectDatapoint", void 0);
}
}
function ol(e) {
return !!(q(e.id)?.children?.length || e.parentId);
}
const fe = A(() => {
const e = [
{ id: null, label: "All" }
];
if (B.value.length > 0) {
let l = q(B.value[B.value.length - 1]);
const o = [];
for (; l; )
o.unshift(l), l = l.parentId ? q(l.parentId) : null;
for (const a of o)
e.push({
id: a.id,
label: a.name,
node: a
});
}
return e;
}), G = me(null), Tt = A(() => z.value.map((e, l) => ({
...e,
color: Ye(e.color) || qe.value[l] || j[l] || j[l % j.length],
shape: "square"
})).sort((e, l) => l.value - e.value).map((e, l) => {
const o = e.value / z.value.map((a) => a.value).reduce((a, n) => a + n, 0);
return {
...e,
proportion: o,
opacity: V.value.includes(e.id) ? 0.5 : 1,
display: `${e.name}${t.value.style.chart.legend.showPercentage || t.value.style.chart.legend.showValue ? ": " : ""}${t.value.style.chart.legend.showValue ? it(
t.value.style.chart.layout.labels.formatter,
e.value,
Xe({
p: t.value.style.chart.layout.labels.prefix,
v: e.value,
s: t.value.style.chart.layout.labels.suffix,
r: t.value.style.chart.legend.roundingValue
}),
{ datapoint: e }
) : ""}${t.value.style.chart.legend.showPercentage ? V.value.includes(e.id) ? `${t.value.style.chart.legend.showValue ? " (" : ""}- %${t.value.style.chart.legend.showValue ? ")" : ""}` : `${t.value.style.chart.legend.showValue ? " (" : ""}${isNaN(e.value / De.value) ? "-" : (e.value / De.value * 100).toFixed(t.value.style.chart.legend.roundingPercentage)}%${t.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
};
})), ll = A(() => ({
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 Ke(e) {
G.value = null, V.value.includes(e.id) ? V.value = V.value.filter((l) => l !== e.id) : V.value.length < C.dataset.length - 1 && V.value.push(e.id), P("selectLegend", At.value);
}
function po(e) {
if (!z.value.length)
return t.value.debug && console.warn("VueUiTreemap - There are no series to show."), null;
const l = z.value.find((o) => o.name === e);
return l || (t.value.debug && console.warn(`VueUiTreemap - Series name not found "${e}"`), null);
}
function al(e) {
const l = po(e);
l !== null && V.value.includes(l.id) && Ke({ id: l.id });
}
function nl(e) {
const l = po(e);
l !== null && (V.value.includes(l.id) || Ke({ id: l.id }));
}
function sl({ datapoint: e, seriesIndex: l }) {
G.value = null, ht.value = !1, t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: e, seriesIndex: l });
}
const St = $(null);
function rl({ datapoint: e, seriesIndex: l }) {
t.value.events.datapointEnter && t.value.events.datapointEnter({ datapoint: e, seriesIndex: l }), G.value = e, St.value = { datapoint: e, seriesIndex: l, config: t.value, series: Ne.value };
const o = t.value.style.chart.tooltip.customFormat;
if (Fo(o) && Dl(() => o({
seriesIndex: l,
datapoint: e,
series: Ne.value,
config: t.value
})))
ft.value = o({
seriesIndex: l,
datapoint: e,
series: Ne.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>${it(
t.value.style.chart.layout.labels.formatter,
e.value,
Xe({
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: l }
)}</b>`, ft.value = `<div>${a}</div>`;
}
ht.value = !0;
}
const pe = A(() => {
const e = ze.value.map((o) => ({
name: o.name,
color: o.color
})), l = ze.value.map((o) => o.value);
return { head: e, body: l };
});
function Ft(e = null) {
Tl(() => {
const l = pe.value.head.map((n, u) => [[
n.name
], [pe.value.body[u]], [isNaN(pe.value.body[u] / De.value) ? "-" : pe.value.body[u] / De.value * 100]]), o = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), a = _l(o);
e ? e(a) : Bl({ csvContent: a, title: t.value.style.chart.title.text || "vue-ui-treemap" });
});
}
const Ze = A(() => {
const e = [
t.value.table.columnNames.series,
t.value.table.columnNames.value,
t.value.table.columnNames.percentage
], l = pe.value.head.map((n, u) => {
const s = it(
t.value.style.chart.layout.labels.formatter,
pe.value.body[u],
Xe({
p: t.value.style.chart.layout.labels.prefix,
v: pe.value.body[u],
s: t.value.style.chart.layout.labels.suffix,
r: t.value.table.td.roundingValue
})
);
return [
{
color: n.color,
name: n.name,
shape: "square"
},
s,
isNaN(pe.value.body[u] / De.value) ? "-" : Xe({
v: pe.value.body[u] / De.value * 100,
s: "%",
r: t.value.table.td.roundingPercentage
})
];
}), o = {
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: l,
config: o
};
});
function ul() {
return ze.value;
}
function go() {
X.value.showTable = !X.value.showTable;
}
function yo() {
X.value.showTooltip = !X.value.showTooltip;
}
const Je = $(!1);
function Mt() {
Je.value = !Je.value;
}
const Qe = $(null);
function mo(e) {
Qe.value = e;
}
function bo() {
Qe.value = null;
}
async function il({ scale: e = 2 } = {}) {
if (!ae.value) return;
const { width: l, height: o } = ae.value.getBoundingClientRect(), a = l / o, { imageUri: n, base64: u } = await Wl({ domElement: ae.value, base64: !0, img: !0, scale: e });
return {
imageUri: n,
base64: u,
title: t.value.style.chart.title.text,
width: l,
height: o,
aspectRatio: a
};
}
const He = A(() => {
const e = t.value.table.useDialog && !t.value.table.show, l = X.value.showTable;
return {
component: e ? Ce : b,
title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? `: ${t.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: t.value.table.th.backgroundColor,
color: t.value.table.th.color,
headerColor: t.value.table.th.color,
headerBg: t.value.table.th.backgroundColor,
isFullscreen: Se.value,
fullscreenParent: ae.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
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
}
}
}
};
});
_e(() => X.value.showTable, (e) => {
t.value.table.show || (e && t.value.table.useDialog && Pe.value ? Pe.value.open() : "close" in Pe.value && Pe.value.close());
});
function Co() {
X.value.showTable = !1, mt.value && mt.value.setTableIconState(!1);
}
const cl = A(() => Tt.value.map((e) => ({
...e,
name: e.display
}))), dl = A(() => t.value.style.chart.backgroundColor), vl = A(() => t.value.style.chart.legend), hl = A(() => t.value.style.chart.title), { exportSvg: fl, getSvg: pl } = Yl({
svg: kt,
title: hl,
legend: vl,
legendItems: cl,
backgroundColor: dl
});
async function ko({ isCb: e }) {
if (e) {
const { blob: l, url: o, text: a, dataUrl: n } = await pl();
t.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: n });
} else
fl();
}
function gl(e) {
const o = he(e) * 0.6;
return Math.max(0, se(e) - 2 * o);
}
function wo({ rect: e, seriesIndex: l, isTitle: o = !1 }) {
const a = t.value.style.chart.layout.labels.name.show, n = t.value.style.chart.layout.labels.value.show;
if (!a && !n) return "";
const u = B.value.length === 0, s = u ? `${e.id}:${o ? "title" : "rect"}` : null;
if (u && W.value.has(s))
return W.value.get(s);
const i = Math.max(2, he(e) / 3), c = Math.max(8, he(e)), h = c * 1.2, S = Math.max(0, se(e) - i * 2), L = Math.max(0, ne(e) - i * 2);
if (S <= 2 || L <= c * 0.8)
return u && s && W.value.set(s, ""), "";
const w = t.value.style.fontFamily, H = t.value.style.chart.layout.labels.name.bold ? "600" : "400", Q = t.value.style.chart.layout.labels.value.bold ? "600" : "400", Ie = o ? t.value.style.chart.layout.rects.group.label.adaptColorToBackground ? t.value.style.chart.layout.rects.group.useSeriesBackgroundColor ? dt(ct(e.color, 0.4)) : dt(t.value.style.chart.backgroundColor) : t.value.style.chart.layout.rects.group.label.color : dt(e.color), Ot = a ? String(e.name ?? "") : "", Ve = n ? it(
t.value.style.chart.layout.labels.formatter,
e.value,
Xe({
p: t.value.style.chart.layout.labels.prefix,
v: e.value,
s: t.value.style.chart.layout.labels.suffix,
r: t.value.style.chart.layout.labels.rounding
}),
{ datapoint: e, seriesIndex: l }
) : "", We = o ? gl(e) : S;
function $e(D, ee = c, Ue = "400") {
const K = document.createElementNS(Wt, "svg");
K.setAttribute("width", "0"), K.setAttribute("height", "0"), K.style.position = "absolute", K.style.visibility = "hidden", K.style.pointerEvents = "none";
const te = document.createElementNS(Wt, "text");
te.setAttribute("font-size", String(ee)), te.setAttribute("font-family", w), te.setAttribute("font-weight", String(Ue)), te.textContent = D || "", K.appendChild(te), document.body.appendChild(K);
const et = te.getComputedTextLength();
return document.body.removeChild(K), et;
}
if (o) {
let D = "";
if (a && (D = Ot), n && (D = D ? `${D} (${Ve})` : Ve), !D)
return u && s && W.value.set(s, ""), "";
let ee = D;
if ($e(ee, c, H) > We) {
let N = ee;
for (; N.length && $e(N + "…", c, H) > We; )
N = N.slice(0, -1);
ee = N ? N + "…" : "";
}
if (!ee)
return u && s && W.value.set(s, ""), "";
const Ue = $t(e), K = typeof e.depth == "number" ? e.depth : 0, te = Ue * 1.4, et = typeof e.labelY0 == "number" ? e.labelY0 : e.y0 + K * te, Pt = e.x0 + i + c / 2, R = et + i + c, oe = `<text
x="${Pt}"
y="${R}"
font-size="${c}"
font-family="${vt(w)}"
font-weight="${H}"
fill="${vt(Ie)}"
paint-order="stroke"
stroke="transparent"
stroke-width="0"
style="transition: all 0.2s ease-in-out;"
>
${Ut(ee)}
</text>`;
return u && s && W.value.set(s, oe), oe;
}
const _t = n ? 1 : 0, Bt = Math.max(0, Math.floor(L / h) - _t);
if (Bt <= 0 && !n)
return u && s && W.value.set(s, ""), "";
function Dt(D, ee, Ue, K, te, et) {
const Pt = String(D).split(/\s+/).filter(Boolean), R = [];
let oe = "";
function N(_) {
return $e(_, Ue, K) <= ee;
}
function bl(_) {
if (N(_)) return [_];
const ue = [];
let O = 0;
for (; O < _.length; ) {
let ie = 1, Nt = _.length - O, zt = 1;
for (; ie <= Nt; ) {
const ot = ie + Nt >> 1, Cl = _.slice(O, O + ot);
N(Cl) ? (zt = ot, ie = ot + 1) : Nt = ot - 1;
}
ue.push(_.slice(O, O + zt)), O += zt;
}
return ue;
}
const tt = Pt.flatMap((_) => bl(_));
let Rt = !1;
for (let _ = 0; _ < tt.length; _ += 1) {
const ue = tt[_], O = oe ? oe + " " + ue : ue;
if (N(O))
oe = O;
else {
if (oe)
R.push(oe);
else {
let ie = ue;
for (; ie.length && !N(ie); ) ie = ie.slice(0, -1);
ie && R.push(ie);
}
if (oe = "", R.length === te) {
Rt = !0;
break;
}
}
_ === tt.length - 1 && oe && R.length < te && R.push(oe);
}
if (R.length && R.join(" ") !== tt.join(" ") && (Rt = !0), Rt && R.length > 0) {
let _ = R[R.length - 1];
if (!N(_)) {
let O = _;
for (; O.length && !N(O); ) O = O.slice(0, -1);
_ = O;
}
let ue = _ + "…";
if (!N(ue)) {
let O = _;
for (; O.length && !N(O + "…"); )
O = O.slice(0, -1);
ue = O + "…";
}
R[R.length - 1] = ue;
}
return R;
}
const re = a ? Dt(
Ot,
S,
c,
H,
Bt
) : [];
let ge = c, ye = String(Ve);
if (n) {
for (; $e(ye, ge, Q) > S && ge > Math.max(8, c * 0.75); )
ge -= 1;
if ($e(ye, ge, Q) > S) {
let D = ye;
for (; D.length && $e(D + "…", ge, Q) > S; )
D = D.slice(0, -1);
if (ye = D ? D + "…" : "", !ye.length)
return u && s && W.value.set(s, ""), "";
}
}
if (re.length * h + (n ? h : 0) > L) {
for (; re.length && re.length * h + (n ? h : 0) > L; )
re.pop();
if (!re.length && (!n || h > L))
return u && s && W.value.set(s, ""), "";
}
const Lt = e.x0 + i, ml = e.y0 + i + c, It = [];
a && re.forEach((D, ee) => {
It.push(`
<tspan
x="${Lt}"
dy="${ee === 0 ? 0 : h}"
font-weight="${H}"
>
${Ut(D)}
</tspan>`);
}), n && It.push(`
<tspan
x="${Lt}"
dy="${re.length ? h : 0}"
font-weight="${Q}"
font-size="${ge}"
>
${Ut(ye)}
</tspan>`);
const Ao = `<text
x="${Lt}"
y="${ml}"
font-size="${c}"
font-family="${vt(w)}"
fill="${vt(Ie)}"
paint-order="stroke"
stroke="transparent"
stroke-width="0"
style="transition: all 0.2s ease-in-out;"
>
${It.join("")}
</text>`;
return u && s && W.value.set(s, Ao), Ao;
}
function yl(e) {
const l = t.value.style.chart.layout.rects.borderRadius, o = se(e), a = ne(e);
return Math.min(l, Math.min(o, a) / 6);
}
return p({
getData: ul,
getImage: il,
generateCsv: Ft,
generateImage: no,
generateSvg: ko,
generatePdf: ao,
hideSeries: nl,
showSeries: al,
toggleTable: go,
toggleTooltip: yo,
toggleAnnotator: Mt,
toggleFullscreen: fo
}), (e, l) => (f(), T("div", {
ref_key: "treemapChart",
ref: ae,
class: Ht(`vue-data-ui-component vue-ui-treemap ${Se.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: be(`font-family:${t.value.style.fontFamily};width:100%; ${t.value.responsive ? "height: 100%;" : ""} text-align:center;background:${t.value.style.chart.backgroundColor}`),
id: `treemap_${we.value}`,
onMouseenter: l[2] || (l[2] = () => m(eo)(!0)),
onMouseleave: l[3] || (l[3] = () => m(eo)(!1))
}, [
t.value.userOptions.buttons.annotator ? (f(), Te(m(v), {
key: 0,
svgRef: m(kt),
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color,
active: Je.value,
onClose: Mt
}, {
"annotator-action-close": F(() => [
x(e.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": F(({ color: o }) => [
x(e.$slots, "annotator-action-color", Z(J({ color: o })), void 0, !0)
]),
"annotator-action-draw": F(({ mode: o }) => [
x(e.$slots, "annotator-action-draw", Z(J({ mode: o })), void 0, !0)
]),
"annotator-action-undo": F(({ disabled: o }) => [
x(e.$slots, "annotator-action-undo", Z(J({ disabled: o })), void 0, !0)
]),
"annotator-action-redo": F(({ disabled: o }) => [
x(e.$slots, "annotator-action-redo", Z(J({ disabled: o })), void 0, !0)
]),
"annotator-action-delete": F(({ disabled: o }) => [
x(e.$slots, "annotator-action-delete", Z(J({ disabled: o })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : I("", !0),
Wo.value ? (f(), T("div", {
key: 1,
ref_key: "noTitle",
ref: Zt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : I("", !0),
t.value.style.chart.title.text ? (f(), T("div", {
key: 2,
ref_key: "chartTitle",
ref: qt,
style: be(`width:100%;background:${t.value.style.chart.backgroundColor};padding-bottom:6px`)
}, [
(f(), Te(Ul, {
key: `title_${Jt.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)) : I("", !0),
U("div", {
id: `legend-top-${we.value}`
}, null, 8, oa),
t.value.userOptions.show && ke.value && (m(to) || m(Ct)) ? (f(), Te(m(M), {
ref_key: "userOptionsRef",
ref: mt,
key: `user_option_${Xt.value}`,
backgroundColor: t.value.style.chart.backgroundColor,
color: t.value.style.chart.color,
isPrinting: m(oo),
isImaging: m(lo),
uid: we.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,
hasSvg: t.value.userOptions.buttons.svg,
hasTable: t.value.userOptions.buttons.table,
hasFullscreen: t.value.userOptions.buttons.fullscreen,
isFullscreen: Se.value,
isTooltip: X.value.showTooltip,
titles: { ...t.value.userOptions.buttonTitles },
chartElement: ae.value,
position: t.value.userOptions.position,
hasAnnotator: t.value.userOptions.buttons.annotator,
isAnnotation: Je.value,
callbacks: t.value.userOptions.callbacks,
printScale: t.value.userOptions.print.scale,
tableDialog: t.value.table.useDialog,
onToggleFullscreen: fo,
onGeneratePdf: m(ao),
onGenerateCsv: Ft,
onGenerateImage: m(no),
onGenerateSvg: ko,
onToggleTable: go,
onToggleTooltip: yo,
onToggleAnnotator: Mt,
style: be({
visibility: m(to) ? m(Ct) ? "visible" : "hidden" : "visible"
})
}, $o({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: F(({ isOpen: o, color: a }) => [
x(e.$slots, "menuIcon", Z(J({ isOpen: o, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: F(() => [
x(e.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: F(() => [
x(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: F(() => [
x(e.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: F(() => [
x(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: F(() => [
x(e.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: F(() => [
x(e.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: F(({ toggleFullscreen: o, isFullscreen: a }) => [
x(e.$slots, "optionFullscreen", Z(J({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
]),
key: "7"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: F(({ toggleAnnotator: o, isAnnotator: a }) => [
x(e.$slots, "optionAnnotator", Z(J({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : I("", !0),
fe.value.length > 1 ? (f(), T("nav", {
key: 4,
class: "vue-ui-treemap-breadcrumbs",
"data-dom-to-png-ignore": "",
ref_key: "breadcrumbsNav",
ref: yt
}, [
(f(!0), T(je, null, at(fe.value, (o, a) => (f(), T("span", {
role: "button",
tabindex: a < fe.value.length - 1 ? 0 : void 0,
key: o.id || "root",
onClick: (n) => a === fe.value.length - 1 ? () => {
} : Ge(o.node),
onKeydown: [
To(Vt((n) => a === fe.value.length - 1 ? void 0 : Ge(o.node), ["prevent"]), ["enter"]),
To(Vt((n) => a === fe.value.length - 1 ? void 0 : Ge(o.node), ["prevent"]), ["space"])
],
class: "vue-ui-treemap-crumb",
"data-last-crumb": a === fe.value.length - 1,
style: be({
color: t.value.style.chart.color
}),
onMouseenter: (n) => mo(a),
onMouseleave: bo,
onFocus: (n) => mo(a),
onBlur: bo
}, [
U("span", aa, [
U("span", na, [
x(e.$slots, "breadcrumb-label", nt({ ref_for: !0 }, { crumb: o, isRoot: a === 0, isFocus: Qe.value === a }), () => [
a === 0 ? (f(), T("div", sa, [
lt(Mo, {
name: Qe.value === 0 ? "homeFilled" : "home",
stroke: t.value.style.chart.color
}, null, 8, ["name", "stroke"])
])) : (f(), T(je, { key: 1 }, [
st(rt(o.label), 1)
], 64))
], !0)
]),
a < fe.value.length - 1 ? (f(), T("span", ra, [
x(e.$slots, "breadcrumb-arrow", {}, () => [
l[4] || (l[4] = st(" › ", -1))
], !0)
])) : I("", !0)
])
], 44, la))), 128))
], 512)) : I("", !0),
(f(), T("svg", {
ref_key: "svgRef",
ref: kt,
xmlns: m(Wt),
class: Ht({ "vue-data-ui-fullscreen--on": Se.value, "vue-data-ui-fulscreen--off": !Se.value, "vue-data-ui-zoom-plus": !Le.value, "vue-data-ui-zoom-minus": Le.value, loading: m(Fe) }),
viewBox: `${Ee.value.startX} ${Ee.value.startY} ${Ee.value.width <= 0 ? 10 : Ee.value.width} ${Ee.value.height <= 0 ? 10 : Ee.value.height}`,
style: be(`max-width:100%; overflow: hidden; background:transparent;color:${t.value.style.chart.color}`)
}, [
lt(m(k)),
(f(!0), T(je, null, at(ze.value, (o, a) => (f(), T("g", {
key: `tgrad_${o.id}`
}, [
t.value.style.chart.layout.rects.gradient.show ? (f(), T("defs", ia, [
U("radialGradient", {
id: `tgrad_${o.id}`,
gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
}, [
U("stop", {
offset: "18%",
"stop-color": o.color
}, null, 8, da),
U("stop", {
offset: "100%",
"stop-color": m(ct)(o.color, t.value.style.chart.layout.rects.gradient.intensity / 100)
}, null, 8, va)
], 8, ca)
])) : I("", !0)
]))), 128)),
(f(!0), T(je, null, at(Jo.value, (o, a) => (f(), T("g", {
key: `parent_${o.id}`,
class: "vue-ui-treemap-parent-wrapper"
}, [
U("rect", {
x: o.x0,
y: o.y0,
height: ne(o),
width: se(o),
fill: t.value.style.chart.layout.rects.group.useSeriesBackgroundColor ? m(ct)(o.color, t.value.style.chart.layout.rects.group.backgroundLighterRatio) : t.value.style.chart.backgroundColor,
rx: 0,
stroke: t.value.style.chart.layout.rects.group.stroke,
"stroke-width": t.value.style.chart.layout.rects.group.strokeWidth,
class: "vue-data-ui-cursor-default vue-ui-treemap-rect"
}, null, 8, ha),
e.$slots["group-label"] ? (f(), T("foreignObject", {
key: 0,
width: se(o),
height: ne(o),
x: o.x0,
y: o.y0
}, [
x(e.$slots, "group-label", nt({ ref_for: !0 }, { group: o }), void 0, !0)
], 8, fa)) : !m(Fe) && t.value.style.chart.layout.labels.showDefaultLabels ? (f(), T("g", {
key: 1,
style: { "pointer-events": "none" },
innerHTML: wo({ rect: o, seriesIndex: 0, isTitle: !0 }),
class: "vue-data-ui-cursor-default"
}, null, 8, pa)) : I("", !0)
]))), 128)),
(f(!0), T(je, null, at(ze.value, (o, a) => (f(), T("g", {
key: `k_${o.id}`
}, [
U("rect", {
x: o.x0,
y: o.y0,
height: ne(o),
width: se(o),
fill: ve.value ? o.color : t.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${o.id})` : o.color,
rx: yl(o),
stroke: G.value && G.value.id === o.id ? t.value.style.chart.layout.rects.selected.stroke : t.value.style.chart.layout.rects.stroke,
"stroke-width": G.value && G.value.id === o.id ? t.value.style.chart.layout.rects.selected.strokeWidth : t.value.style.chart.layout.rects.strokeWidth,
onClick: Vt((n) => Ge(o, a), ["stop"]),
onMouseenter: () => rl({
datapoint: o,
seriesIndex: a
}),
onMouseleave: (n) => sl({ datapoint: o, seriesIndex: a }),
style: be(`opacity:${G.value ? G.value.id === o.id ? 1 : t.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
class: Ht([
"vue-ui-treemap-rect",
ol(o) ? "vue-data-ui-zoom-plus" : Le.value ? "vue-data-ui-zoom-minus" : ""
])
}, null, 46, ga),
!e.$slots.rect && !m(Fe) && t.value.style.chart.layout.labels.showDefaultLabels ? (f(), T("g", {
key: 0,
style: be(`pointer-events:none; opacity:${G.value ? G.value.id === o.id ? 1 : t.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
innerHTML: wo({ rect: o, seriesIndex: a })
}, null, 12, ya)) : I("", !0),
(f(), T("foreignObject", {
x: o.x0,
y: o.y0,
height: ne(o),
width: se(o),
class: "vue-ui-treemap-cell-foreignObject"
}, [
U("div", {
style: be({
width: `calc(100% - ${he(o) / 1.5}px)`,
height: `calc(100% - ${he(o) / 1.5}px)`,
padding: `${he(o) / 3}px`
}),
class: "vue-ui-treemap-cell"
}, [
m(Fe) ? I("", !0) : x(e.$slots, "rect", nt({
key: 0,
ref_for: !0
}, {
rect: o,
shouldShow: o.proportion > t.value.style.chart.layout.labels.hideUnderProportion || Le.value,
fontSize: he(o),
isZoom: Le.value,
textColor: m(dt)(o.color)
}), void 0, !0)
], 4)
], 8, ma))
]))), 128)),
x(e.$slots, "svg", Z(J({ svg: E.value, isZoom: Le.value, rect: G.value, config: t.value })), void 0, !0)
], 14, ua)),
e.$slots.watermark ? (f(), T("div", ba, [
x(e.$slots, "watermark", Z(J({ isPrinting: m(oo) || m(lo) })), void 0, !0)
])) : I("", !0),
U("div", {
id: `legend-bottom-${we.value}`
}, null, 8, Ca),
Qt.value ? (f(), Te(xl, {
key: 6,
to: t.value.style.chart.legend.position === "top" ? `#legend-top-${we.value}` : `#legend-bottom-${we.value}`
}, [
U("div", {
ref_key: "chartLegend",
ref: Gt
}, [
t.value.style.chart.legend.show ? (f(), Te(jl, {
key: `legend_${gt.value}`,
legendSet: Tt.value,
config: ll.value,
id: `treemap_legend_${we.value}`,
onClickMarker: l[0] || (l[0] = ({ legend: o }) => Ke(o))
}, {
item: F(({ legend: o, index: a }) => [
m(Fe) ? I("", !0) : (f(), T("div", {
key: 0,
onClick: (n) => Ke(o),
style: be(`opacity:${V.value.includes(o.id) ? 0.5 : 1}`)
}, rt(o.display), 13, ka))
]),
_: 1
}, 8, ["legendSet", "config", "id"])) : x(e.$slots, "legend", {
key: 1,
legend: Tt.value
}, void 0, !0)
], 512)
], 8, ["to"])) : I("", !0),
e.$slots.source ? (f(), T("div", {
key: 7,
ref_key: "source",
ref: Kt,
dir: "auto"
}, [
x(e.$slots, "source", {}, void 0, !0)
], 512)) : I("", !0),
lt(m(y), {
show: X.value.showTooltip && ht.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: ae.value,
content: ft.value,
isFullscreen: Se.value,
isCustom: m(Fo)(t.value.style.chart.tooltip.customFormat),
smooth: t.value.style.chart.tooltip.smooth,
backdropFilter: t.value.style.chart.tooltip.backdropFilter,
smoothForce: t.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: t.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": F(() => [
x(e.$slots, "tooltip-before", Z(J({ ...St.value })), void 0, !0)
]),
"tooltip-after": F(() => [
x(e.$slots, "tooltip-after", Z(J({ ...St.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
ke.value && t.value.userOptions.buttons.table ? (f(), Te($l(He.value.component), nt({ key: 8 }, He.value.props, {
ref_key: "tableUnit",
ref: Pe,
onClose: Co
}), $o({
content: F(() => [
(f(), Te(m(g), {
key: `table_${pt.value}`,
colNames: Ze.value.colNames,
head: Ze.value.head,
body: Ze.value.body,
config: Ze.value.config,
title: t.value.table.useDialog ? "" : He.value.title,
withCloseButton: !t.value.table.useDialog,
onClose: Co
}, {
th: F(({ th: o }) => [
U("div", {
innerHTML: o,
style: { display: "flex", "align-items": "center" }
}, null, 8, wa)
]),
td: F(({ td: o }) => [
st(rt(o.name || o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
t.value.table.useDialog ? {
name: "title",
fn: F(() => [
st(rt(He.value.title), 1)
]),
key: "0"
} : void 0,
t.value.table.useDialog ? {
name: "actions",
fn: F(() => [
U("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (o) => Ft(t.value.userOptions.callbacks.csv))
}, [
lt(Mo, {
name: "excel",
stroke: He.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : I("", !0),
m(Fe) ? (f(), Te(Rl, { key: 9 })) : I("", !0)
], 46, ta));
}
}, xa = /* @__PURE__ */ Xl(Aa, [["__scopeId", "data-v-176708ac"]]), Ha = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: xa
}, Symbol.toStringTag, { value: "Module" }));
export {
za as a,
Ha as b,
xa as v
};