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