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