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