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