vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,079 lines (1,078 loc) • 47.8 kB
JavaScript
import { useCssVars as Bt, defineAsyncComponent as ve, computed as g, ref as c, shallowRef as nt, toRefs as Ut, watch as Re, onBeforeUnmount as Fe, onMounted as Yt, watchEffect as Ne, reactive as rt, createElementBlock as n, openBlock as u, normalizeStyle as k, normalizeClass as ce, createBlock as de, createCommentVNode as p, createElementVNode as h, createVNode as He, unref as i, createSlots as Gt, withCtx as O, renderSlot as T, normalizeProps as Z, guardReactiveProps as ee, Fragment as L, renderList as R, withDirectives as vt, createTextVNode as ct, toDisplayString as z, vShow as Wt, withKeys as jt, nextTick as qt } from "vue";
import { u as Kt, c as Xe, t as Jt, b as Qt, C as Zt, o as dt, f as yt, P as ye, g as el, X as tl, F as xe, k as E, i as H, h as D, v as ll, w as al, y as ol, z as sl } from "./index-q-LPw2IT.js";
import { u as ht } from "./useNestedProp-04aFeUYu.js";
import { u as ul } from "./usePrinter-DX7efa1s.js";
import { u as il } from "./useUserOptionState-BIvW1Kz7.js";
import { u as nl } from "./useChartAccessibility-9icAAmYg.js";
import rl from "./vue-ui-accordion-D46i_gkB.js";
import vl from "./Title-B55R8CAZ.js";
import cl from "./img-Ctts6JQb.js";
import { t as we, u as dl } from "./useResponsive-DfdjqQps.js";
import { u as ft } from "./useTimeLabelCollider-CIsgDrl9.js";
import { u as pt } from "./useTimeLabels-DkzmKfZn.js";
import { u as yl, B as hl } from "./useLoading-D7YHNtLX.js";
import { _ as fl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const pl = {
mounted(b, X) {
gt(b, X.value);
},
updated(b, X) {
gt(b, X.value);
}
};
function gt(b, {
cellWidth: X,
cellHeight: he,
maxFontSize: Y,
minFontSize: fe,
index: $,
reportRotation: te,
reportHide: P,
rotateAll: ke,
hideAll: C
}) {
b.removeAttribute("transform"), b.removeAttribute("visibility");
let le = !1, G = !1;
b.setAttribute("font-size", Y);
const W = b.getComputedTextLength();
if (W <= X)
te($, !1), P($, !1);
else {
const w = Math.floor(Y * X / W);
w >= fe ? (b.setAttribute("font-size", w), te($, !1), P($, !1)) : (te($, !0), P($, !1), le = !0);
}
if (ke && (le = !0), le) {
b.setAttribute("font-size", Y);
const w = b.getBBox(), Ae = w.x + w.width / 2, ae = w.y + w.height / 2;
b.setAttribute("transform", `rotate(-90 ${Ae} ${ae})`);
const j = b.getBBox().width;
if (j <= he)
P($, !1);
else {
const oe = Math.floor(Y * he / j);
oe >= fe ? (b.setAttribute("font-size", oe), P($, !1)) : (G = !0, P($, !0));
}
}
(C || G) && b.setAttribute("visibility", "hidden");
}
const gl = ["id"], bl = ["xmlns", "viewBox"], ml = ["x", "y", "width", "height"], xl = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], wl = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], kl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], Al = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "onMouseover", "onMouseout", "onClick"], Ll = ["font-size", "font-weight", "fill", "x", "y"], Cl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], Tl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], _l = ["font-size", "fill", "x", "y", "font-weight"], zl = ["font-size", "fill", "x", "y", "font-weight"], Sl = ["text-anchor", "font-size", "fill", "font-weight", "transform"], $l = ["text-anchor", "font-size", "fill", "font-weight", "transform"], Ml = { key: 6 }, Ol = ["x", "y", "width", "height", "stroke", "stroke-width"], Rl = { class: "vue-ui-heatmap-legend-gauge-right" }, Fl = ["data-value"], Nl = { class: "vue-ui-heatmap-gauge-indicator-value" }, Hl = {
key: 4,
class: "vue-data-ui-watermark"
}, Xl = { class: "vue-ui-data-table" }, Pl = { key: 0 }, Il = ["data-cell"], Vl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, El = ["data-cell"], Dl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Bl = {
__name: "vue-ui-heatmap",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(b, { expose: X, emit: he }) {
Bt((t) => ({
"6eaf1725": t.tdo
}));
const Y = ve(() => import("./BaseIcon-CCivwZUq.js")), fe = ve(() => import("./PackageVersion-5ZjKSIei.js")), $ = ve(() => import("./PenAndPaper-BJ0hcgsa.js")), te = ve(() => import("./Tooltip-BMOddG-M.js")), P = ve(() => import("./UserOptions-DVzyjG-W.js")), { vue_ui_heatmap: ke } = Kt(), C = b, le = he, G = g({
get() {
return !!C.dataset && C.dataset.length;
},
set(t) {
return t;
}
}), W = c(Xe()), w = c(null), Ae = c(null), ae = c(!1), j = c(""), oe = c(void 0), se = c(null), Pe = c(0), Le = c(null), Ie = c(!1), Ve = c(0), bt = c(null), Ee = c(null), De = c(null), mt = c(null), Be = c(null), xt = c(null), Ce = c(null), Te = c(null), wt = c(null), Ue = c(null), q = nt(null), e = c(Se());
function kt() {
const t = Array(7).fill("_"), a = [], o = 14, s = t.length;
for (let d = 0; d < s; d += 1) {
const v = [];
for (let x = 0; x < o; x += 1)
v.push(d + x * 2);
a.push({
name: `${t[d]}`,
values: v
});
}
return a;
}
const { loading: pe, FINAL_DATASET: m, manualLoading: _e } = yl({
...Ut(C),
FINAL_CONFIG: e,
prepareConfig: Se,
skeletonDataset: kt(),
skeletonConfig: Jt({
defaultConfig: e.value,
userConfig: {
table: { show: !1 },
userOptions: { show: !1 },
style: {
backgroundColor: "#99999930",
layout: {
cells: {
colors: {
hot: "#999999",
cold: "#CACACA"
},
columnTotal: { value: { show: !1 } },
rowTotal: { value: { show: !1 } },
value: { show: !1 }
},
dataLabels: {
xAxis: { show: !1 },
yAxis: { show: !1 }
}
}
}
}
})
}), { userOptionsVisible: ze, setUserOptionsVisibility: At, keepUserOptionState: Ye } = il({ config: e.value }), { svgRef: Ge } = nl({ config: e.value.style.title });
function We(t) {
At(t);
}
function Se() {
const t = ht({
userConfig: C.config,
defaultConfig: ke
});
let a = {};
return t.theme ? a = {
...ht({
userConfig: Qt.vue_ui_heatmap[t.theme] || C.config,
defaultConfig: t
})
} : a = t, C.config && Zt(C.config, "style.layout.dataLabels.xAxis.showOnlyAtModulo") ? a.style.layout.dataLabels.xAxis.showOnlyAtModulo = C.config.style.layout.dataLabels.xAxis.showOnlyAtModulo : a.style.layout.dataLabels.xAxis.showOnlyAtModulo = null, a;
}
Re(() => C.config, (t) => {
pe.value || (e.value = Se()), ze.value = !e.value.userOptions.showOnChartHover, $e(), Ve.value += 1, S.value.showTable = e.value.table.show, S.value.showTooltip = e.value.style.tooltip.show, ue.value = e.value.style.layout.width, ie.value = e.value.style.layout.height;
}, { deep: !0 }), Re(() => C.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (_e.value = !1), $e();
}, { deep: !0 });
const { isPrinting: je, isImaging: qe, generatePdf: Ke, generateImage: Je } = ul({
elementId: `heatmap__${W.value}`,
fileName: e.value.style.title.text || "vue-ui-heatmap",
options: e.value.userOptions.print
}), Lt = g(() => e.value.userOptions.show && !e.value.style.title.text), S = c({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
});
Re(e, () => {
S.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
};
}, { immediate: !0 });
const Ct = g(() => e.value.table.responsiveBreakpoint), K = nt(null);
function Tt() {
K.value && K.value.disconnect(), K.value = new ResizeObserver((t) => {
t.forEach((a) => {
Ie.value = a.contentRect.width < Ct.value;
});
}), Le.value && K.value.observe(Le.value);
}
Fe(() => {
K.value && K.value.disconnect();
});
const I = c(null), Qe = g(() => !!e.value.debug);
function $e() {
if (dt(C.dataset) && (yt({
componentName: "VueUiHeatmap",
type: "dataset",
debug: Qe.value
}), G.value = !1, _e.value = !0), dt(C.dataset) || (_e.value = e.value.loading), e.value.responsive) {
const t = we(() => {
const { width: a, height: o } = dl({
chart: w.value,
title: e.value.style.title.text ? Ee.value : null,
// add legend hirizontal in legend attr
// add legend vertical in some other attr and modify composable to subtract width
source: Ue.value,
noTitle: De.value
});
requestAnimationFrame(() => {
ue.value = a, ie.value = o;
});
});
I.value && (q.value && I.value.unobserve(q.value), I.value.disconnect()), I.value = new ResizeObserver(t), q.value = w.value.parentNode, I.value.observe(q.value);
}
Tt();
}
Fe(() => {
I.value && (q.value && I.value.unobserve(q.value), I.value.disconnect());
}), Yt(() => {
$e();
});
const F = g(() => Math.max(...m.value.flatMap((t) => (t.values || []).length))), ue = c(e.value.style.layout.width), ie = c(e.value.style.layout.height), _ = g(() => ({
width: Math.max(10, ue.value),
height: Math.max(10, ie.value)
})), ne = c(0), _t = we((t) => {
ne.value = t;
}, 100);
Ne((t) => {
const a = Ce.value;
if (!a) return;
const o = new ResizeObserver((s) => {
_t(s[0].contentRect.height);
});
o.observe(a), t(() => o.disconnect());
});
const J = c(0), zt = we((t) => {
J.value = t;
}, 100);
Ne((t) => {
const a = Be.value;
if (!a) return;
const o = new ResizeObserver((s) => {
zt(s[0].contentRect.width);
});
o.observe(a), t(() => o.disconnect());
});
const ge = c(0), St = we((t) => {
ge.value = t;
}, 100);
Ne((t) => {
const a = Te.value;
if (!a) return;
const o = new ResizeObserver((s) => {
St(s[0].contentRect.height);
});
o.observe(a), t(() => o.disconnect());
}), Fe(() => {
ne.value = 0, J.value = 0, ge.value = 0;
});
const r = g(() => Math.min(_.value.height, _.value.width) / 1e3 * e.value.style.layout.cells.spacing), l = g(() => {
let t = 0;
e.value.style.legend.show && (t = e.value.style.legend.width);
const a = e.value.style.layout.padding, o = e.value.style.layout.dataLabels.xAxis.fontSize / 3, s = e.value.style.layout.dataLabels.xAxis.fontSize / 2, d = _.value.height - a.top - a.bottom - ne.value - o, v = _.value.width / 60, x = {
x: r.value * F.value,
y: r.value * ((m.value || []).length + 1)
}, N = _.value.width - a.left - a.right - x.x - v * 2 - 2 - t - J.value, y = d - v - x.y - ge.value - s - e.value.style.layout.cells.columnTotal.value.offsetY, A = {
width: Math.max(3, N / F.value),
height: Math.max(3, y / (m.value.length ?? 1))
};
return {
top: a.top + ne.value + v + o,
topLabelsHeight: ne.value,
sumCellXHeight: v,
height: y,
left: a.left + J.value + v / 2,
right: a.right - t,
bottom: _.value.height - a.bottom - ge.value,
width: N,
cellSize: A
};
}), V = g(() => Math.max(...m.value.flatMap((t) => t.values))), re = g(() => Math.min(...m.value.flatMap((t) => t.values))), B = g(() => {
const t = m.value.flatMap((o) => o.values);
return t.reduce((o, s) => o + s, 0) / t.length;
}), $t = g(() => pt({
values: e.value.style.layout.dataLabels.yAxis.values.length ? e.value.style.layout.dataLabels.yAxis.values : m.value.map((t) => t.name),
maxDatapoints: m.value.length,
formatter: e.value.style.layout.dataLabels.yAxis.datetimeFormatter,
start: 0,
end: m.value.length
})), Mt = g(() => pt({
values: e.value.style.layout.dataLabels.xAxis.values,
maxDatapoints: F.value,
formatter: e.value.style.layout.dataLabels.xAxis.datetimeFormatter,
start: 0,
end: F.value
})), f = g(() => {
const t = $t.value.map((y) => y.text), a = Mt.value.map((y) => y.text), o = m.value.map((y) => y.values.reduce((A, Oe) => A + Oe, 0)), s = Math.max(...o), d = Math.min(...o), v = [];
for (let y = 0; y < F.value; y += 1)
v.push(m.value.map((A) => A.values[y] || 0).reduce((A, Oe) => A + Oe, 0));
const x = Math.max(...v), N = Math.min(...v);
return {
yTotals: o.map((y) => {
const A = isNaN(y / s) ? 0 : y / s;
return {
total: y,
proportion: A,
color: ye(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, d, s, y)
};
}),
xTotals: v.map((y) => {
const A = isNaN(y / x) ? 0 : y / x;
return {
total: y,
proportion: A,
color: ye(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, N, x, y)
};
}),
yLabels: t,
xLabels: a.slice(0, F.value)
};
}), U = g(() => (m.value.forEach((t, a) => {
el({
datasetObject: t,
requiredAttributes: ["values"]
}).forEach((o) => {
yt({
componentName: "VueUiHeatmap",
type: "datasetSerieAttribute",
property: "values",
index: a,
debug: Qe.value
});
});
}), m.value.map((t, a) => ({
...t,
temperatures: (t.values || []).map((o, s) => o >= B.value ? {
side: "up",
color: ye(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, re.value, V.value, o),
ratio: Math.abs(Math.abs(o - B.value) / Math.abs(V.value - B.value)) > 1 ? 1 : Math.abs(Math.abs(o - B.value) / Math.abs(V.value - B.value)),
value: o,
yAxisName: f.value.yLabels[a],
xAxisName: f.value.xLabels[s],
id: `vue-data-ui-heatmap-cell-${Xe()}`
} : {
side: "down",
ratio: Math.abs(1 - Math.abs(o) / Math.abs(B.value)) > 1 ? 1 : Math.abs(1 - Math.abs(o) / Math.abs(B.value)),
color: ye(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, re.value, V.value, o),
value: o,
yAxisName: f.value.yLabels[a],
xAxisName: f.value.xLabels[s],
id: `vue-data-ui-heatmap-cell-${Xe()}`
})
})))), Ze = g(() => m.value.length), et = rt(Array(Ze.value * F.value || 1).fill(!1)), Ot = g(() => et.some((t) => t));
function Rt(t, a) {
et[t] = a;
}
const tt = rt(Array(Ze.value * F.value || 1).fill(!1)), Ft = g(() => tt.some((t) => t));
function Nt(t, a) {
tt[t] = a;
}
const M = c(null), be = c(null);
function Ht(t, a, o, s) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), se.value = { x: o, y: s };
const { value: d, yAxisName: v, xAxisName: x, id: N } = t;
oe.value = N, M.value = d, be.value = {
datapoint: t,
seriesIndex: a,
series: U.value,
config: e.value
}, ae.value = !0;
let y = "";
const A = e.value.style.tooltip.customFormat;
ol(A) && sl(() => A({
datapoint: t,
seriesIndex: a,
series: U.value,
config: e.value
})) ? j.value = A({
datapoint: t,
seriesIndex: a,
series: U.value,
config: e.value
}) : (y += `<div>${v} ${x ? v ? ` - ${x}` : `${x}` : ""}</div>`, y += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor};font-weight:bold;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center"><span style="color:${ye(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, re.value, V.value, d)}">⬤</span><span>${isNaN(d) ? "-" : E(
e.value.style.layout.cells.value.formatter,
d,
H({
p: e.value.style.layout.dataLabels.prefix,
v: d,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: a }
)}</span></div>`, j.value = `<div style="font-size:${e.value.style.tooltip.fontSize}px">${y}</div>`);
}
function Xt({ datapoint: t, seriesIndex: a }) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), ae.value = !1, oe.value = void 0, M.value = null, se.value = null;
}
function Pt(t) {
return E(
e.value.style.layout.cells.value.formatter,
f.value.yTotals[t].total,
H({
p: e.value.style.layout.dataLabels.prefix,
v: f.value.yTotals[t].total,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.layout.cells.value.roundingValue
}),
{ datapoint: f.value.yTotals[t], rowIndex: t }
);
}
function It(t) {
return E(
e.value.style.layout.cells.value.formatter,
f.value.xTotals[t].total,
H({
p: e.value.style.layout.dataLabels.prefix,
v: f.value.xTotals[t].total,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.layout.cells.value.roundingValue
}),
{ datapoint: f.value.xTotals[t], colIndex: t }
);
}
g(() => {
const t = m.value.map((o) => ({
name: o.name
})), a = m.value.map((o) => o.values);
return { head: t, body: a };
});
function lt(t = null) {
qt(() => {
const a = ["", ...m.value.map((v, x) => v.name)], o = [];
for (let v = 0; v < f.value.xLabels.length; v += 1) {
const x = [f.value.xLabels[v]];
for (let N = 0; N < m.value.length; N += 1)
x.push([m.value[N].values[v]]);
o.push(x);
}
const s = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(o), d = ll(s);
t ? t(d) : al({ csvContent: d, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const Q = c(!1);
function at(t) {
Q.value = t, Pe.value += 1;
}
function ot() {
S.value.showTable = !S.value.showTable;
}
function st() {
S.value.showTooltip = !S.value.showTooltip;
}
const me = c(!1);
function Me() {
me.value = !me.value;
}
function Vt(t, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a }), le("selectDatapoint", t);
}
function Et() {
return U.value;
}
async function Dt({ scale: t = 2 } = {}) {
if (!w.value) return;
const { width: a, height: o } = w.value.getBoundingClientRect(), s = a / o, { imageUri: d, base64: v } = await cl({ domElement: w.value, base64: !0, img: !0, scale: t });
return {
imageUri: d,
base64: v,
title: e.value.style.title.text,
width: a,
height: o,
aspectRatio: s
};
}
const ut = g(() => ({
start: 0,
end: F.value
})), it = g(() => f.value.xLabels);
return ft({
timeLabelsEls: Ce,
timeLabels: it,
slicer: ut,
configRef: e,
rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
isAutoSize: !1,
targetClass: ".vue-ui-heatmap-col-name",
rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle,
width: ue,
height: ie
}), ft({
timeLabelsEls: Te,
timeLabels: it,
slicer: ut,
configRef: e,
rotationPath: ["style", "layout", "cells", "columnTotal", "value", "rotation"],
autoRotatePath: ["style", "layout", "cells", "columnTotal", "value", "autoRotate", "enable"],
isAutoSize: !1,
targetClass: ".vue-ui-heatmap-col-total",
rotation: e.value.style.layout.cells.columnTotal.value.autoRotate.angle,
width: ue,
height: ie
}), X({
getData: Et,
getImage: Dt,
generatePdf: Ke,
generateCsv: lt,
generateImage: Je,
toggleTable: ot,
toggleTooltip: st,
toggleAnnotator: Me,
toggleFullscreen: at
}), (t, a) => (u(), n("div", {
ref_key: "heatmapChart",
ref: w,
class: ce(`vue-ui-heatmap ${Q.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: k(`font-family:${e.value.style.fontFamily};width:100%;${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.backgroundColor}`),
id: `heatmap__${W.value}`,
onMouseenter: a[2] || (a[2] = () => We(!0)),
onMouseleave: a[3] || (a[3] = () => We(!1))
}, [
e.value.userOptions.buttons.annotator ? (u(), de(i($), {
key: 0,
svgRef: i(Ge),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: me.value,
onClose: Me
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
Lt.value ? (u(), n("div", {
key: 1,
ref_key: "noTitle",
ref: De,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : p("", !0),
e.value.style.title.text ? (u(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: Ee,
style: "width:100%;background:transparent"
}, [
(u(), de(vl, {
key: `title_${Ve.value}`,
config: {
title: {
cy: "heatmap-div-title",
...e.value.style.title
},
subtitle: {
cy: "heatmap-div-subtitle",
...e.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : p("", !0),
e.value.userOptions.show && G.value && (i(Ye) || i(ze)) ? (u(), de(i(P), {
ref_key: "details",
ref: Ae,
key: `user_options_${Pe.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: i(qe),
isPrinting: i(je),
uid: W.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: Q.value,
isTooltip: S.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: w.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: me.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: at,
onGeneratePdf: i(Ke),
onGenerateCsv: lt,
onGenerateImage: i(Je),
onToggleTable: ot,
onToggleTooltip: st,
onToggleAnnotator: Me,
style: k({
visibility: i(Ye) ? i(ze) ? "visible" : "hidden" : "visible"
})
}, Gt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: o, color: s }) => [
T(t.$slots, "menuIcon", Z(ee({ isOpen: o, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: O(() => [
T(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [
T(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: O(() => [
T(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [
T(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: O(() => [
T(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: o, isFullscreen: s }) => [
T(t.$slots, "optionFullscreen", Z(ee({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: o, isAnnotator: s }) => [
T(t.$slots, "optionAnnotator", Z(ee({ toggleAnnotator: o, isAnnotator: s })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
h("div", {
class: ce({
"vue-ui-heatmap-chart-wrapper": !0,
"vue-ui-heatmap-chart-wrapper-legend-right": e.value.style.legend.show
})
}, [
(u(), n("svg", {
ref_key: "svgRef",
ref: Ge,
xmlns: i(tl),
class: ce({ "vue-data-ui-fullscreen--on": Q.value, "vue-data-ui-fulscreen--off": !Q.value }),
viewBox: `0 0 ${_.value.width} ${_.value.height}`,
width: "100%",
style: k(`overflow: visible; background:transparent;color:${e.value.style.color}`),
"aria-live": "polite",
role: "img",
preserveAspectRatio: "xMidYMid"
}, [
He(i(fe)),
t.$slots["chart-background"] ? (u(), n("foreignObject", {
key: 0,
x: l.value.left,
y: l.value.top,
width: l.value.width,
height: l.value.height,
style: {
pointerEvents: "none"
}
}, [
T(t.$slots, "chart-background", {}, void 0, !0)
], 8, ml)) : p("", !0),
e.value.style.layout.cells.columnTotal.color.show ? (u(), n("g", {
key: 1,
ref_key: "xAxisSumRects",
ref: wt
}, [
(u(!0), n(L, null, R(f.value.xTotals, (o, s) => (u(), n("rect", {
x: l.value.left + l.value.cellSize.width * s + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top - l.value.sumCellXHeight + r.value * (_.value.height / _.value.width),
height: l.value.sumCellXHeight,
width: l.value.cellSize.width - r.value,
fill: e.value.style.layout.cells.colors.underlayer,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, xl))), 256)),
(u(!0), n(L, null, R(f.value.xTotals, (o, s) => (u(), n("rect", {
x: l.value.left + l.value.cellSize.width * s + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top - l.value.sumCellXHeight + r.value * (_.value.height / _.value.width),
height: l.value.sumCellXHeight,
width: l.value.cellSize.width - r.value,
fill: o.color,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, wl))), 256))
], 512)) : p("", !0),
h("g", {
ref_key: "datapoints",
ref: bt
}, [
(u(!0), n(L, null, R(U.value, (o, s) => (u(), n(L, null, [
(u(!0), n(L, null, R(o.temperatures, (d, v) => (u(), n("g", null, [
h("rect", {
x: l.value.left + l.value.cellSize.width * v + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top + l.value.cellSize.height * s + r.value / 2,
width: l.value.cellSize.width - r.value,
height: l.value.cellSize.height - r.value,
fill: e.value.style.layout.cells.colors.underlayer,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, kl),
h("rect", {
x: l.value.left + l.value.cellSize.width * v + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top + l.value.cellSize.height * s + r.value / 2,
width: l.value.cellSize.width - r.value,
height: l.value.cellSize.height - r.value,
fill: d.color,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value,
onMouseover: (x) => Ht(d, s, l.value.left + l.value.cellSize.width * v, l.value.top + l.value.cellSize.height * s),
onMouseout: () => Xt({ datapoint: d, seriesIndex: s }),
onClick: () => Vt(d, s)
}, null, 40, Al),
e.value.style.layout.cells.value.show ? vt((u(), n("text", {
key: 0,
"text-anchor": "middle",
"font-size": e.value.style.layout.cells.value.fontSize,
"font-weight": e.value.style.layout.cells.value.bold ? "bold" : "normal",
fill: i(xe)(d.color),
x: l.value.left + l.value.cellSize.width * v + l.value.cellSize.width / 2 + l.value.sumCellXHeight,
y: l.value.top + l.value.cellSize.height * s + l.value.cellSize.height / 2 + e.value.style.layout.cells.value.fontSize / 3,
style: { pointerEvents: "none", userSelect: "none" }
}, [
ct(z(i(E)(
e.value.style.layout.cells.value.formatter,
d.value,
i(H)({
p: e.value.style.layout.dataLabels.prefix,
v: d.value,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.layout.cells.value.roundingValue
}),
{ datapoint: d }
)), 1)
], 8, Ll)), [
[i(pl), {
cellWidth: l.value.cellSize.width - r.value,
cellHeight: l.value.cellSize.height - r.value,
maxFontSize: e.value.style.layout.cells.value.fontSize,
minFontSize: 10,
index: s * F.value + v,
reportHide: Nt,
reportRotation: Rt,
hideAll: Ft.value,
rotateAll: Ot.value
}]
]) : p("", !0)
]))), 256))
], 64))), 256))
], 512),
e.value.style.layout.cells.rowTotal.color.show ? (u(), n("g", {
key: 2,
ref_key: "yAxisSumRects",
ref: xt
}, [
(u(!0), n(L, null, R(U.value, (o, s) => (u(), n(L, null, [
h("rect", {
x: l.value.left,
y: l.value.top + l.value.cellSize.height * s,
width: l.value.sumCellXHeight,
height: l.value.cellSize.height - r.value,
fill: e.value.style.layout.cells.colors.underlayer,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, Cl),
h("rect", {
x: l.value.left,
y: l.value.top + l.value.cellSize.height * s + r.value / 2,
width: l.value.sumCellXHeight,
height: l.value.cellSize.height - r.value,
fill: f.value.yTotals[s].color,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, Tl)
], 64))), 256))
], 512)) : p("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (u(), n("g", {
key: 3,
ref_key: "yAxisLabels",
ref: Be
}, [
(u(!0), n(L, null, R(U.value, (o, s) => (u(), n(L, null, [
h("text", {
class: "vue-ui-heatmap-row-name",
"font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
fill: e.value.style.layout.dataLabels.yAxis.color,
x: J.value,
y: l.value.top + l.value.cellSize.height * s + l.value.cellSize.height / 2 + e.value.style.layout.dataLabels.yAxis.fontSize / 3 + e.value.style.layout.dataLabels.yAxis.offsetY - (e.value.style.layout.cells.rowTotal.value.show ? e.value.style.layout.dataLabels.yAxis.fontSize / 1.5 : 0),
"text-anchor": "end",
"font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
}, z(f.value.yLabels[s]), 9, _l),
e.value.style.layout.cells.rowTotal.value.show ? (u(), n("text", {
key: 0,
class: "vue-ui-heatmap-row-total",
"font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
fill: e.value.style.layout.dataLabels.yAxis.color,
x: J.value,
y: l.value.top + l.value.cellSize.height * s + l.value.cellSize.height / 2 + e.value.style.layout.dataLabels.yAxis.fontSize + e.value.style.layout.dataLabels.yAxis.offsetY,
"text-anchor": "end",
"font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
}, z(Pt(s)), 9, zl)) : p("", !0)
], 64))), 256))
], 512)) : p("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (u(), n("g", {
key: 4,
ref_key: "xAxisLabels",
ref: Ce
}, [
(u(!0), n(L, null, R(f.value.xLabels, (o, s) => (u(), n(L, null, [
!e.value.style.layout.dataLabels.xAxis.showOnlyAtModulo || e.value.style.layout.dataLabels.xAxis.showOnlyAtModulo && s % e.value.style.layout.dataLabels.xAxis.showOnlyAtModulo === 0 ? (u(), n("text", {
key: 0,
class: "vue-ui-heatmap-col-name",
"text-anchor": e.value.style.layout.dataLabels.xAxis.rotation === 0 ? "middle" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "start" : "end",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
transform: `translate(${l.value.left + l.value.cellSize.width / 2 + l.value.width / f.value.xLabels.length * s + e.value.style.layout.dataLabels.xAxis.offsetX + l.value.sumCellXHeight}, ${l.value.topLabelsHeight}), rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
}, z(o), 9, Sl)) : p("", !0)
], 64))), 256))
], 512)) : p("", !0),
e.value.style.layout.cells.columnTotal.value.show ? (u(), n("g", {
key: 5,
ref_key: "xAxisSums",
ref: Te
}, [
(u(!0), n(L, null, R(f.value.xLabels, (o, s) => (u(), n("text", {
class: "vue-ui-heatmap-col-total",
"text-anchor": e.value.style.layout.cells.columnTotal.value.rotation === 0 ? "middle" : e.value.style.layout.cells.columnTotal.value.rotation < 0 ? "end" : "start",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color,
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
transform: `translate(${l.value.left + l.value.cellSize.width / 2 + l.value.width / f.value.xLabels.length * s + e.value.style.layout.dataLabels.xAxis.offsetX + e.value.style.layout.cells.columnTotal.value.offsetX + l.value.sumCellXHeight}, ${l.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2}), rotate(${e.value.style.layout.cells.columnTotal.value.rotation})`
}, z(It(s)), 9, $l))), 256))
], 512)) : p("", !0),
se.value ? (u(), n("g", Ml, [
h("rect", {
style: { "pointer-events": "none" },
x: se.value.x - e.value.style.layout.cells.selected.border / 2 + r.value + l.value.sumCellXHeight,
y: se.value.y - e.value.style.layout.cells.selected.border / 2 + r.value,
width: l.value.cellSize.width - r.value + e.value.style.layout.cells.selected.border - r.value,
height: l.value.cellSize.height - r.value + e.value.style.layout.cells.selected.border - r.value,
fill: "transparent",
stroke: e.value.style.layout.cells.selected.color,
"stroke-width": e.value.style.layout.cells.selected.border,
rx: 1
}, null, 8, Ol)
])) : p("", !0),
T(t.$slots, "svg", { svg: _.value }, void 0, !0)
], 14, bl)),
e.value.style.legend.show ? (u(), n("div", {
key: 0,
ref_key: "legendRight",
ref: mt,
class: "vue-ui-heatmap-legend-right",
style: k({
"--legend-width": e.value.style.legend.width + "px"
})
}, [
i(pe) ? p("", !0) : (u(), n("div", {
key: 0,
class: "vue-ui-heatmap-legend-label-max",
style: k({
fontSize: e.value.style.legend.fontSize + "px",
color: e.value.style.legend.color
})
}, z(i(E)(
e.value.style.layout.cells.value.formatter,
i(D)(V.value),
i(H)({
p: e.value.style.layout.dataLabels.prefix,
v: i(D)(V.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
)), 5)),
h("div", Rl, [
h("div", {
class: "vue-ui-heatmap-gauge",
style: k({
background: `linear-gradient(to bottom, ${e.value.style.layout.cells.colors.hot}, ${e.value.style.layout.cells.colors.cold})`
})
}, [
vt(h("div", {
class: "vue-ui-heatmap-gauge-indicator",
"data-value": i(E)(
e.value.style.layout.cells.value.formatter,
i(D)(M.value),
i(H)({
p: e.value.style.layout.dataLabels.prefix,
v: i(D)(M.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
),
style: k({
position: "absolute",
width: "100%",
height: "2px",
background: [void 0, null].includes(M.value) ? "transparent" : i(xe)(be.value.datapoint.color),
top: `${[void 0, null].includes(M.value) ? 0 : (1 - M.value / V.value) * 100}%`,
transition: "all 0.2s ease-in-out",
"--background-color": e.value.style.backgroundColor,
"--gauge-arrow-color": i(xe)(e.value.style.backgroundColor),
"--gauge-arrow-text-color": i(xe)(e.value.style.backgroundColor),
"--gauge-arrow-value": M.value,
"--gauge-arrow-font-size": e.value.style.legend.fontSize + "px"
})
}, [
h("div", Nl, z(i(E)(
e.value.style.layout.cells.value.formatter,
i(D)(M.value),
i(H)({
p: e.value.style.layout.dataLabels.prefix,
v: i(D)(M.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
)), 1)
], 12, Fl), [
[Wt, ![void 0, null].includes(M.value)]
])
], 4)
]),
i(pe) ? p("", !0) : (u(), n("div", {
key: 1,
class: "vue-ui-heatmap-legend-label-min",
style: k({
fontSize: e.value.style.legend.fontSize + "px",
color: e.value.style.legend.color
})
}, z(i(E)(
e.value.style.layout.cells.value.formatter,
i(D)(re.value),
i(H)({
p: e.value.style.layout.dataLabels.prefix,
v: i(D)(re.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
)), 5))
], 4)) : p("", !0)
], 2),
t.$slots.watermark ? (u(), n("div", Hl, [
T(t.$slots, "watermark", Z(ee({ isPrinting: i(je) || i(qe) })), void 0, !0)
])) : p("", !0),
t.$slots.source ? (u(), n("div", {
key: 5,
ref_key: "source",
ref: Ue,
dir: "auto"
}, [
T(t.$slots, "source", {}, void 0, !0)
], 512)) : p("", !0),
He(i(te), {
show: S.value.showTooltip && ae.value,
backgroundColor: e.value.style.tooltip.backgroundColor,
color: e.value.style.tooltip.color,
borderRadius: e.value.style.tooltip.borderRadius,
borderColor: e.value.style.tooltip.borderColor,
borderWidth: e.value.style.tooltip.borderWidth,
fontSize: e.value.style.tooltip.fontSize,
backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
position: e.value.style.tooltip.position,
offsetY: e.value.style.tooltip.offsetY,
parent: w.value,
content: j.value,
isFullscreen: Q.value,
isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
smooth: e.value.style.tooltip.smooth,
backdropFilter: e.value.style.tooltip.backdropFilter
}, {
"tooltip-before": O(() => [
T(t.$slots, "tooltip-before", Z(ee({ ...be.value })), void 0, !0)
]),
"tooltip-after": O(() => [
T(t.$slots, "tooltip-after", Z(ee({ ...be.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
G.value ? (u(), de(rl, {
key: 6,
hideDetails: "",
config: {
open: S.value.showTable,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
},
head: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
}
}
}, {
content: O(() => [
h("div", {
ref_key: "tableContainer",
ref: Le,
class: "vue-ui-heatmap-table atom-data-table"
}, [
h("div", {
style: "width:100%;overflow-x:auto;padding-top:36px;position:relative",
class: ce({ "vue-ui-responsive": Ie.value })
}, [
h("div", {
role: "button",
tabindex: "0",
style: k(`width:32px; position: absolute; top: 0; left:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.value.table.th.backgroundColor};`),
onClick: a[0] || (a[0] = (o) => S.value.showTable = !1),
onKeypress: a[1] || (a[1] = jt((o) => S.value.showTable = !1, ["enter"]))
}, [
He(i(Y), {
name: "close",
stroke: e.value.table.th.color,
"stroke-width": 2
}, null, 8, ["stroke"])
], 36),
h("table", Xl, [
h("caption", {
style: k(`backgroundColor:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, [
ct(z(e.value.style.title.text) + " ", 1),
e.value.style.title.subtitle.text ? (u(), n("span", Pl, z(e.value.style.title.subtitle.text), 1)) : p("", !0)
], 4),
h("thead", null, [
h("tr", {
role: "row",
style: k(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
}, [
h("th", {
style: k(`outline:${e.value.table.th.outline};padding-right:6px`)
}, null, 4),
(u(!0), n(L, null, R(b.dataset, (o, s) => (u(), n("th", {
align: "right",
style: k(`outline:${e.value.table.th.outline};padding-right:6px`)
}, z(o.name), 5))), 256))
], 4)
]),
h("tbody", null, [
(u(!0), n(L, null, R(f.value.xLabels, (o, s) => (u(), n("tr", {
role: "row",
class: ce({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": s % 2 === 0, "vue-ui-data-table__tbody__row-odd": s % 2 !== 0 }),
style: k(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
}, [
h("td", {
"data-cell": e.value.table.colNames.xAxis,
class: "vue-ui-data-table__tbody__td",
style: k(`outline:${e.value.table.td.outline}`)
}, [
h("div", Vl, z(o), 1)
], 12, Il),
(u(!0), n(L, null, R(b.dataset, (d, v) => (u(), n("td", {
class: "vue-ui-data-table__tbody__td",
"data-cell": b.dataset[v].name,
style: k(`outline:${e.value.table.td.outline}`)
}, [
h("div", Dl, z(isNaN(d.values[s]) ? "-" : i(H)({ p: e.value.style.layout.dataLabels.prefix, v: d.values[s], s: e.value.style.layout.dataLabels.suffix, r: e.value.table.td.roundingValue })), 1)
], 12, El))), 256))
], 6))), 256))
])
])
], 2)
], 512)
]),
_: 1
}, 8, ["config"])) : p("", !0),
i(pe) ? (u(), de(hl, { key: 7 })) : p("", !0)
], 46, gl));
}
}, oa = /* @__PURE__ */ fl(Bl, [["__scopeId", "data-v-926264d5"]]);
export {
oa as default
};