vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,283 lines • 59 kB
JavaScript
import { watchEffect as ul, nextTick as Te, useCssVars as nl, defineAsyncComponent as ve, computed as b, ref as d, shallowRef as il, toRefs as rl, watch as we, onBeforeUnmount as ft, onMounted as vl, reactive as gt, createElementBlock as i, openBlock as u, normalizeStyle as L, normalizeClass as ge, createBlock as be, createCommentVNode as f, createElementVNode as g, createVNode as Ae, unref as n, withCtx as C, renderSlot as x, normalizeProps as H, guardReactiveProps as X, createSlots as bt, Fragment as z, renderList as P, withDirectives as pt, createTextVNode as Pe, toDisplayString as F, vShow as cl, resolveDynamicComponent as dl, mergeProps as yl, withKeys as hl } from "vue";
import { c as Ie, t as fl, a1 as gl, o as mt, g as xt, am as pe, l as bl, X as pl, x as Le, a as K, d as W, U as J, az as ml, v as xl, r as Cl, y as kl, _ as wl } from "./lib-2iaAPQ_c.js";
import { t as Se, u as Al } from "./useResponsive-DfdjqQps.js";
import { u as Ll, a as Ve } from "./useNestedProp-2p4Tjzc8.js";
import { u as Sl } from "./usePrinter-ChVMpU2f.js";
import { u as Tl, B as _l } from "./BaseScanner-BMpwQAfz.js";
import { u as zl } from "./useSvgExport-ByUukOZt.js";
import { u as Ct } from "./useTimeLabels-DKoynYae.js";
import { u as $l } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Fl } from "./useTableResponsive-Cbx-ACcP.js";
import { u as Dl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as kt } from "./useTimeLabelCollider-CIsgDrl9.js";
import { u as Ol } from "./useChartAccessibility-9icAAmYg.js";
import Bl from "./img-CqYIrJ8I.js";
import Ml from "./Title-DSOZzIrU.js";
import El from "./vue-ui-accordion-Dm0mNNKQ.js";
import { _ as Nl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function Ue({
elementRef: y,
callback: I,
attr: Q,
earlyReturn: Y = !1,
retryFrames: Z = 12,
alsoAfterFontsReady: D = !0
}) {
if (Y) return;
const V = (S) => {
if (!S) return;
let A;
if (typeof S.getBBox == "function")
try {
const O = S.getBBox();
A = Q === "width" ? O.width : O.height;
} catch {
}
if (typeof A != "number" || Number.isNaN(A))
try {
const O = S.getBoundingClientRect();
A = Q === "width" ? O.width : O.height;
} catch {
A = void 0;
}
typeof A == "number" && !Number.isNaN(A) && I(A);
};
ul((S) => {
const A = y.value;
if (!A) return;
let O = !1;
(async () => {
await Te();
for (let T = 0; T < Z; T += 1) {
if (O) return;
await new Promise((te) => requestAnimationFrame(te));
const N = y.value;
if (!N) return;
V(N);
}
if (D && typeof document < "u" && document.fonts && document.fonts.ready) {
try {
await document.fonts.ready;
} catch {
}
!O && y.value && V(y.value);
}
})();
const ee = new MutationObserver(() => {
y.value && requestAnimationFrame(() => {
y.value && V(y.value);
});
});
ee.observe(A, {
childList: !0,
subtree: !0,
characterData: !0,
attributes: !0,
attributeFilter: ["transform", "style", "class"]
});
let m;
if (typeof ResizeObserver < "u") {
const T = A.ownerSVGElement ? A.ownerSVGElement : A;
m = new ResizeObserver(() => {
const N = y.value;
N && V(N);
}), m.observe(T);
}
S(() => {
O = !0, ee.disconnect(), m && m.disconnect();
});
}, { flush: "post" });
}
const At = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { crosshairs: { stroke: "#CCCCCC" }, cells: { selected: { color: "#CCCCCC" } }, dataLabels: { xAxis: { color: "#CCCCCC" }, yAxis: { color: "#CCCCCC" } } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Lt = { style: { backgroundColor: "#FFF8E1", color: "#424242", layout: { crosshairs: { stroke: "#424242" }, cells: { colors: { hot: "#D32F2F", cold: "#FFE082" }, spacing: 0.5, selected: { color: "#B71C1C" } }, dataLabels: { xAxis: { color: "#424242" }, yAxis: { color: "#424242" } } }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, legend: { backgroundColor: "#FFF8E1", color: "#424242" } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, St = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { crosshairs: { stroke: "#BDBDBD" }, cells: { colors: { hot: "#D32F2F", cold: "#FFE082" }, spacing: 0.5, selected: { color: "#B71C1C" } }, dataLabels: { xAxis: { color: "#BDBDBD" }, yAxis: { color: "#BDBDBD" } } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Tt = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { crosshairs: { stroke: "#33FF33" }, cells: { colors: { hot: "#008000", cold: "#333333" }, spacing: 0.5, selected: { color: "#33FF33" } }, dataLabels: { xAxis: { color: "#AACCAA" }, yAxis: { color: "#AACCAA" } } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" }, legend: { backgroundColor: "#2A2F2A", color: "#AACCAA" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, _t = { style: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { crosshairs: { stroke: "#8F837A" }, cells: { colors: { hot: "#DFCA99", cold: "#BBC4D3" }, spacing: 0.5, selected: { color: "#4F5B75" } }, dataLabels: { xAxis: { color: "#A0AC94" }, yAxis: { color: "#A0AC94" } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, zt = { style: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { crosshairs: { stroke: "#404C4D" }, cells: { colors: { hot: "#6D7D65", cold: "#6C94A5" }, spacing: 0.5, selected: { color: "#404C4D" } }, dataLabels: { xAxis: { color: "#61747E" }, yAxis: { color: "#61747E" } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, $t = {
default: {},
dark: At,
celebration: Lt,
celebrationNight: St,
hack: Tt,
zen: _t,
concrete: zt
}, Oa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Lt,
celebrationNight: St,
concrete: zt,
dark: At,
default: $t,
hack: Tt,
zen: _t
}, Symbol.toStringTag, { value: "Module" })), Rl = {
mounted(y, I) {
wt(y, I.value);
},
updated(y, I) {
wt(y, I.value);
}
};
function wt(y, {
cellWidth: I,
cellHeight: Q,
maxFontSize: Y,
minFontSize: Z,
index: D,
reportRotation: V,
reportHide: S,
rotateAll: A,
hideAll: O
}) {
y.removeAttribute("transform"), y.removeAttribute("visibility");
let ue = !1, ee = !1;
y.setAttribute("font-size", Y);
const m = y.getComputedTextLength();
if (m <= I)
V(D, !1), S(D, !1);
else {
const T = Math.floor(Y * I / m);
T >= Z ? (y.setAttribute("font-size", T), V(D, !1), S(D, !1)) : (V(D, !0), S(D, !1), ue = !0);
}
if (A && (ue = !0), ue) {
y.setAttribute("font-size", Y);
const T = y.getBBox(), N = T.x + T.width / 2, te = T.y + T.height / 2;
y.setAttribute("transform", `rotate(-90 ${N} ${te})`);
const $ = y.getBBox().width;
if ($ <= Q)
S(D, !1);
else {
const ne = Math.floor(Y * Q / $);
ne >= Z ? (y.setAttribute("font-size", ne), S(D, !1)) : (ee = !0, S(D, !0));
}
}
(O || ee) && y.setAttribute("visibility", "hidden");
}
const Hl = ["id"], Xl = ["xmlns", "viewBox"], Pl = ["x", "y", "width", "height"], Il = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], Vl = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], Ul = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], Gl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "onMouseover", "onMouseout", "onClick"], Wl = ["font-size", "font-weight", "fill", "x", "y"], Yl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], jl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], ql = ["font-size", "fill", "x", "y", "font-weight"], Kl = ["font-size", "fill", "x", "y", "font-weight"], Jl = ["text-anchor", "font-size", "fill", "font-weight", "transform"], Ql = ["text-anchor", "font-size", "fill", "font-weight", "transform"], Zl = { key: 6 }, ea = ["x", "y", "width", "height", "stroke", "stroke-width"], ta = { key: 7 }, la = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], aa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], oa = { class: "vue-ui-heatmap-legend-gauge-right" }, sa = ["data-value"], ua = { class: "vue-ui-heatmap-gauge-indicator-value" }, na = {
key: 4,
class: "vue-data-ui-watermark"
}, ia = { class: "vue-ui-data-table" }, ra = { key: 0 }, va = ["data-cell"], ca = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, da = ["data-cell"], ya = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ha = {
__name: "vue-ui-heatmap",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(y, { expose: I, emit: Q }) {
nl((t) => ({
v0ce143cf: t.tdo
}));
const Y = ve(() => import("./Tooltip-D0pGX8qz.js")), Z = ve(() => import("./BaseIcon-CbVDYv89.js")), D = ve(() => import("./PenAndPaper-CvyKWfNl.js")), V = ve(() => import("./UserOptions-BQO4YFrn.js")), S = ve(() => import("./PackageVersion-Br3DrrFh.js")), A = ve(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_heatmap: O } = Ll(), { isThemeValid: ue, warnInvalidTheme: ee } = $l(), m = y, T = Q, N = b({
get() {
return !!m.dataset && m.dataset.length;
},
set(t) {
return t;
}
}), te = d(Ie()), $ = d(null), ne = d(!1), _e = d(""), Ge = d(void 0), M = d(null), We = d(0), Ye = d(null), je = d(0), Ft = d(null), ce = d(null), ze = d(null), qe = d(null), Ke = d(null), Dt = d(null), Je = d(null), Ot = d(null), $e = d(null), Fe = d(null), Bt = d(null), Qe = d(null), ie = il(null), e = d(Me());
function Mt() {
const t = Array(7).fill("_"), s = [], a = 14, o = t.length;
for (let v = 0; v < o; v += 1) {
const c = [];
for (let w = 0; w < a; w += 1)
c.push(v + w * 2);
s.push({
name: `${t[v]}`,
values: c
});
}
return s;
}
const { loading: me, FINAL_DATASET: k, manualLoading: De } = Tl({
...rl(m),
FINAL_CONFIG: e,
prepareConfig: Me,
callback: () => {
Promise.resolve().then(async () => {
await Te(), $.value && ml($.value, { delta: 0.1, delay: 250 });
});
},
skeletonDataset: Mt(),
skeletonConfig: fl({
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: Oe, setUserOptionsVisibility: Et, keepUserOptionState: Ze } = Dl({ config: e.value }), { svgRef: Be } = Ol({ config: e.value.style.title });
function et(t) {
Et(t);
}
function Me() {
const t = Ve({
userConfig: m.config,
defaultConfig: O
});
let s = {};
const a = t.theme;
if (a)
if (!ue.value(t))
ee(t), s = t;
else {
const o = Ve({
userConfig: $t[a] || m.config,
defaultConfig: t
});
s = {
...Ve({
userConfig: m.config,
defaultConfig: o
})
};
}
else
s = t;
return m.config && gl(m.config, "style.layout.dataLabels.xAxis.showOnlyAtModulo") ? s.style.layout.dataLabels.xAxis.showOnlyAtModulo = m.config.style.layout.dataLabels.xAxis.showOnlyAtModulo : s.style.layout.dataLabels.xAxis.showOnlyAtModulo = null, s;
}
we(() => m.config, (t) => {
me.value || (e.value = Me()), Oe.value = !e.value.userOptions.showOnChartHover, Ee(), je.value += 1, E.value.showTable = e.value.table.show, E.value.showTooltip = e.value.style.tooltip.show, de.value = e.value.style.layout.width, ye.value = e.value.style.layout.height;
}, { deep: !0 }), we(() => m.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (De.value = !1), Ee();
}, { deep: !0 });
const { isPrinting: tt, isImaging: lt, generatePdf: at, generateImage: ot } = Sl({
elementId: `heatmap__${te.value}`,
fileName: e.value.style.title.text || "vue-ui-heatmap",
options: e.value.userOptions.print
}), Nt = b(() => e.value.userOptions.show && !e.value.style.title.text), E = d({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
});
we(e, () => {
E.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
};
}, { immediate: !0 });
const Rt = b(() => e.value.table.responsiveBreakpoint), j = d(null), st = b(() => !!e.value.debug);
function Ee() {
if (mt(m.dataset) && (xt({
componentName: "VueUiHeatmap",
type: "dataset",
debug: st.value
}), N.value = !1, De.value = !0), mt(m.dataset) || (De.value = e.value.loading), e.value.responsive) {
const t = Se(() => {
const { width: s, height: a } = Al({
chart: $.value,
title: e.value.style.title.text ? qe.value : null,
// add legend hirizontal in legend attr
// add legend vertical in some other attr and modify composable to subtract width
source: Qe.value,
noTitle: Ke.value
});
requestAnimationFrame(() => {
de.value = s, ye.value = a;
});
});
j.value && (ie.value && j.value.unobserve(ie.value), j.value.disconnect()), j.value = new ResizeObserver(t), ie.value = $.value.parentNode, j.value.observe(ie.value);
}
}
ft(() => {
j.value && (ie.value && j.value.unobserve(ie.value), j.value.disconnect());
}), vl(() => {
Ee();
});
const U = b(() => Math.max(...k.value.flatMap((t) => (t.values || []).length))), de = d(e.value.style.layout.width), ye = d(e.value.style.layout.height), B = b(() => ({
width: Math.max(10, de.value),
height: Math.max(10, ye.value)
})), re = d(0), Ht = Se((t) => {
t !== re.value && (re.value = t);
}, 100);
Ue({ elementRef: $e, callback: Ht, attr: "height" });
const le = d(0), Xt = Se((t) => {
t !== le.value && (le.value = t);
}, 100);
Ue({ elementRef: Je, callback: Xt, attr: "width" });
const he = d(0), Pt = Se((t) => {
t !== he.value && (he.value = t);
}, 100);
Ue({ elementRef: Fe, callback: Pt, attr: "height" }), ft(() => {
re.value = 0, le.value = 0, he.value = 0;
});
const r = b(() => Math.min(B.value.height, B.value.width) / 1e3 * e.value.style.layout.cells.spacing), l = b(() => {
let t = 0;
e.value.style.legend.show && (t = e.value.style.legend.width);
const s = e.value.style.layout.padding, a = e.value.style.layout.dataLabels.xAxis.fontSize / 3, o = e.value.style.layout.dataLabels.xAxis.fontSize / 2, v = B.value.height - s.top - s.bottom - re.value - a, c = B.value.width / 60, w = {
x: r.value * U.value,
y: r.value * ((k.value || []).length + 1)
}, G = B.value.width - s.left - s.right - w.x - c * 2 - 2 - t - le.value, h = v - c - w.y - he.value - o - e.value.style.layout.cells.columnTotal.value.offsetY, _ = {
width: Math.max(3, G / U.value),
height: Math.max(3, h / (k.value.length ?? 1))
};
return {
top: s.top + re.value + c + a,
topLabelsHeight: re.value,
sumCellXHeight: c,
height: h,
left: s.left + le.value + c / 2,
right: s.right - t,
bottom: B.value.height - s.bottom - he.value,
width: G,
cellSize: _
};
}), q = b(() => Math.max(...k.value.flatMap((t) => t.values))), fe = b(() => Math.min(...k.value.flatMap((t) => t.values))), ae = b(() => {
const t = k.value.flatMap((a) => a.values);
return t.reduce((a, o) => a + o, 0) / t.length;
}), It = b(() => Ct({
values: e.value.style.layout.dataLabels.yAxis.values.length ? e.value.style.layout.dataLabels.yAxis.values : k.value.map((t) => t.name),
maxDatapoints: k.value.length,
formatter: e.value.style.layout.dataLabels.yAxis.datetimeFormatter,
start: 0,
end: k.value.length
})), Vt = b(() => Ct({
values: e.value.style.layout.dataLabels.xAxis.values,
maxDatapoints: U.value,
formatter: e.value.style.layout.dataLabels.xAxis.datetimeFormatter,
start: 0,
end: U.value
})), p = b(() => {
const t = It.value.map((h) => h.text), s = Vt.value.map((h) => h.text), a = k.value.map((h) => h.values.reduce((_, Xe) => _ + Xe, 0)), o = Math.max(...a), v = Math.min(...a), c = [];
for (let h = 0; h < U.value; h += 1)
c.push(k.value.map((_) => _.values[h] || 0).reduce((_, Xe) => _ + Xe, 0));
const w = Math.max(...c), G = Math.min(...c);
return {
yTotals: a.map((h) => {
const _ = isNaN(h / o) ? 0 : h / o;
return {
total: h,
proportion: _,
color: pe(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, v, o, h)
};
}),
xTotals: c.map((h) => {
const _ = isNaN(h / w) ? 0 : h / w;
return {
total: h,
proportion: _,
color: pe(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, G, w, h)
};
}),
yLabels: t,
xLabels: s.slice(0, U.value)
};
}), oe = b(() => (k.value.forEach((t, s) => {
bl({
datasetObject: t,
requiredAttributes: ["values"]
}).forEach((a) => {
xt({
componentName: "VueUiHeatmap",
type: "datasetSerieAttribute",
property: "values",
index: s,
debug: st.value
});
});
}), k.value.map((t, s) => ({
...t,
temperatures: (t.values || []).map((a, o) => a >= ae.value ? {
side: "up",
color: pe(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, fe.value, q.value, a),
ratio: Math.abs(Math.abs(a - ae.value) / Math.abs(q.value - ae.value)) > 1 ? 1 : Math.abs(Math.abs(a - ae.value) / Math.abs(q.value - ae.value)),
value: a,
yAxisName: p.value.yLabels[s],
xAxisName: p.value.xLabels[o],
id: `vue-data-ui-heatmap-cell-${Ie()}`
} : {
side: "down",
ratio: Math.abs(1 - Math.abs(a) / Math.abs(ae.value)) > 1 ? 1 : Math.abs(1 - Math.abs(a) / Math.abs(ae.value)),
color: pe(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, fe.value, q.value, a),
value: a,
yAxisName: p.value.yLabels[s],
xAxisName: p.value.xLabels[o],
id: `vue-data-ui-heatmap-cell-${Ie()}`
})
})))), ut = b(() => k.value.length), nt = gt(Array(ut.value * U.value || 1).fill(!1)), Ut = b(() => nt.some((t) => t));
function Gt(t, s) {
nt[t] = s;
}
const it = gt(Array(ut.value * U.value || 1).fill(!1)), Wt = b(() => it.some((t) => t));
function Yt(t, s) {
it[t] = s;
}
const R = d(null), xe = d(null);
function jt(t, s, a, o) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: s }), M.value = { x: a, y: o };
const { value: v, yAxisName: c, xAxisName: w, id: G } = t;
Ge.value = G, R.value = v, xe.value = {
datapoint: t,
seriesIndex: s,
series: oe.value,
config: e.value
}, ne.value = !0;
let h = "";
const _ = e.value.style.tooltip.customFormat;
kl(_) && wl(() => _({
datapoint: t,
seriesIndex: s,
series: oe.value,
config: e.value
})) ? _e.value = _({
datapoint: t,
seriesIndex: s,
series: oe.value,
config: e.value
}) : (h += `<div>${c} ${w ? c ? ` - ${w}` : `${w}` : ""}</div>`, h += `<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:${pe(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, fe.value, q.value, v)}">⬤</span><span>${isNaN(v) ? "-" : K(
e.value.style.layout.cells.value.formatter,
v,
W({
p: e.value.style.layout.dataLabels.prefix,
v,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: s }
)}</span></div>`, _e.value = `<div style="font-size:${e.value.style.tooltip.fontSize}px">${h}</div>`);
}
function qt({ datapoint: t, seriesIndex: s }) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: s }), ne.value = !1, Ge.value = void 0, R.value = null, M.value = null;
}
function Kt(t) {
return K(
e.value.style.layout.cells.value.formatter,
p.value.yTotals[t].total,
W({
p: e.value.style.layout.dataLabels.prefix,
v: p.value.yTotals[t].total,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.layout.cells.value.roundingValue
}),
{ datapoint: p.value.yTotals[t], rowIndex: t }
);
}
function Jt(t) {
return K(
e.value.style.layout.cells.value.formatter,
p.value.xTotals[t].total,
W({
p: e.value.style.layout.dataLabels.prefix,
v: p.value.xTotals[t].total,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.layout.cells.value.roundingValue
}),
{ datapoint: p.value.xTotals[t], colIndex: t }
);
}
b(() => {
const t = k.value.map((a) => ({
name: a.name
})), s = k.value.map((a) => a.values);
return { head: t, body: s };
});
function Ne(t = null) {
Te(() => {
const s = ["", ...k.value.map((c, w) => c.name)], a = [];
for (let c = 0; c < p.value.xLabels.length; c += 1) {
const w = [p.value.xLabels[c]];
for (let G = 0; G < k.value.length; G += 1)
w.push([k.value[G].values[c]]);
a.push(w);
}
const o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([s]).concat(a), v = xl(o);
t ? t(v) : Cl({ csvContent: v, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const se = d(!1);
function rt(t) {
se.value = t, We.value += 1;
}
function vt() {
E.value.showTable = !E.value.showTable;
}
function ct() {
E.value.showTooltip = !E.value.showTooltip;
}
const Ce = d(!1);
function Re() {
Ce.value = !Ce.value;
}
function Qt(t, s) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: s }), T("selectDatapoint", t);
}
function Zt() {
return oe.value;
}
async function el({ scale: t = 2 } = {}) {
if (!$.value) return;
const { width: s, height: a } = $.value.getBoundingClientRect(), o = s / a, { imageUri: v, base64: c } = await Bl({ domElement: $.value, base64: !0, img: !0, scale: t });
return {
imageUri: v,
base64: c,
title: e.value.style.title.text,
width: s,
height: a,
aspectRatio: o
};
}
const dt = b(() => ({
start: 0,
end: U.value
})), yt = b(() => p.value.xLabels);
kt({
timeLabelsEls: $e,
timeLabels: yt,
slicer: dt,
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: de,
height: ye
}), kt({
timeLabelsEls: Fe,
timeLabels: yt,
slicer: dt,
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: de,
height: ye
});
const ke = b(() => {
const t = e.value.table.useDialog && !e.value.table.show, s = E.value.showTable;
return {
component: t ? A : El,
title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.title.subtitle.text}` : ""}`,
props: t ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: se.value,
fullscreenParent: $.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: s,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
},
head: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
}
}
}
};
});
we(() => E.value.showTable, async (t) => {
e.value.table.show || (t && e.value.table.useDialog && ce.value ? (await Te(), ce.value.open()) : "close" in ce.value && ce.value.close());
});
const { isResponsive: tl } = Fl(Ye, Rt);
function He() {
E.value.showTable = !1, ze.value && ze.value.setTableIconState(!1);
}
const ll = b(() => e.value.style.backgroundColor), al = b(() => e.value.style.title), { exportSvg: ol, getSvg: sl } = zl({
svg: Be,
title: al,
backgroundColor: ll
});
async function ht({ isCb: t }) {
if (t) {
const { blob: s, url: a, text: o, dataUrl: v } = await sl();
e.value.userOptions.callbacks.svg({ blob: s, url: a, text: o, dataUrl: v });
} else
ol();
}
return I({
getData: Zt,
getImage: el,
generatePdf: at,
generateCsv: Ne,
generateImage: ot,
generateSvg: ht,
toggleTable: vt,
toggleTooltip: ct,
toggleAnnotator: Re,
toggleFullscreen: rt
}), (t, s) => (u(), i("div", {
ref_key: "heatmapChart",
ref: $,
class: ge(`vue-data-ui-component vue-ui-heatmap ${se.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: L(`font-family:${e.value.style.fontFamily};width:100%;${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.backgroundColor}`),
id: `heatmap__${te.value}`,
onMouseenter: s[1] || (s[1] = () => et(!0)),
onMouseleave: s[2] || (s[2] = () => et(!1))
}, [
e.value.userOptions.buttons.annotator ? (u(), be(n(D), {
key: 0,
svgRef: n(Be),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: Ce.value,
onClose: Re
}, {
"annotator-action-close": C(() => [
x(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": C(({ color: a }) => [
x(t.$slots, "annotator-action-color", H(X({ color: a })), void 0, !0)
]),
"annotator-action-draw": C(({ mode: a }) => [
x(t.$slots, "annotator-action-draw", H(X({ mode: a })), void 0, !0)
]),
"annotator-action-undo": C(({ disabled: a }) => [
x(t.$slots, "annotator-action-undo", H(X({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": C(({ disabled: a }) => [
x(t.$slots, "annotator-action-redo", H(X({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": C(({ disabled: a }) => [
x(t.$slots, "annotator-action-delete", H(X({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
Nt.value ? (u(), i("div", {
key: 1,
ref_key: "noTitle",
ref: Ke,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : f("", !0),
e.value.style.title.text ? (u(), i("div", {
key: 2,
ref_key: "chartTitle",
ref: qe,
style: "width:100%;background:transparent"
}, [
(u(), be(Ml, {
key: `title_${je.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)) : f("", !0),
e.value.userOptions.show && N.value && (n(Ze) || n(Oe)) ? (u(), be(n(V), {
ref_key: "userOptionsRef",
ref: ze,
key: `user_options_${We.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: n(lt),
isPrinting: n(tt),
uid: te.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: se.value,
isTooltip: E.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: $.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Ce.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: rt,
onGeneratePdf: n(at),
onGenerateCsv: Ne,
onGenerateImage: n(ot),
onGenerateSvg: ht,
onToggleTable: vt,
onToggleTooltip: ct,
onToggleAnnotator: Re,
style: L({
visibility: n(Ze) ? n(Oe) ? "visible" : "hidden" : "visible"
})
}, bt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: C(({ isOpen: a, color: o }) => [
x(t.$slots, "menuIcon", H(X({ isOpen: a, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: C(() => [
x(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: C(() => [
x(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: C(() => [
x(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: C(() => [
x(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: C(() => [
x(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: C(() => [
x(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: C(({ toggleFullscreen: a, isFullscreen: o }) => [
x(t.$slots, "optionFullscreen", H(X({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: C(({ toggleAnnotator: a, isAnnotator: o }) => [
x(t.$slots, "optionAnnotator", H(X({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
g("div", {
class: ge({
"vue-ui-heatmap-chart-wrapper": !0,
"vue-ui-heatmap-chart-wrapper-legend-right": e.value.style.legend.show
})
}, [
(u(), i("svg", {
ref_key: "svgRef",
ref: Be,
xmlns: n(pl),
class: ge({ "vue-data-ui-fullscreen--on": se.value, "vue-data-ui-fulscreen--off": !se.value }),
viewBox: `0 0 ${B.value.width} ${B.value.height}`,
width: "100%",
style: L(`overflow: visible; background:transparent;color:${e.value.style.color}`),
"aria-live": "polite",
role: "img",
preserveAspectRatio: "xMidYMid"
}, [
Ae(n(S)),
t.$slots["chart-background"] ? (u(), i("foreignObject", {
key: 0,
x: l.value.left,
y: l.value.top,
width: l.value.width,
height: l.value.height,
style: {
pointerEvents: "none"
}
}, [
x(t.$slots, "chart-background", {}, void 0, !0)
], 8, Pl)) : f("", !0),
e.value.style.layout.cells.columnTotal.color.show ? (u(), i("g", {
key: 1,
ref_key: "xAxisSumRects",
ref: Bt
}, [
(u(!0), i(z, null, P(p.value.xTotals, (a, o) => (u(), i("rect", {
x: l.value.left + l.value.cellSize.width * o + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top - l.value.sumCellXHeight + r.value * (B.value.height / B.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, Il))), 256)),
(u(!0), i(z, null, P(p.value.xTotals, (a, o) => (u(), i("rect", {
x: l.value.left + l.value.cellSize.width * o + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top - l.value.sumCellXHeight + r.value * (B.value.height / B.value.width),
height: l.value.sumCellXHeight,
width: l.value.cellSize.width - r.value,
fill: a.color,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, Vl))), 256))
], 512)) : f("", !0),
g("g", {
ref_key: "datapoints",
ref: Ft
}, [
(u(!0), i(z, null, P(oe.value, (a, o) => (u(), i(z, null, [
(u(!0), i(z, null, P(a.temperatures, (v, c) => (u(), i("g", null, [
g("rect", {
x: l.value.left + l.value.cellSize.width * c + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top + l.value.cellSize.height * o + 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, Ul),
g("rect", {
x: l.value.left + l.value.cellSize.width * c + r.value / 2 + l.value.sumCellXHeight,
y: l.value.top + l.value.cellSize.height * o + r.value / 2,
width: l.value.cellSize.width - r.value,
height: l.value.cellSize.height - r.value,
fill: v.color,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value,
onMouseover: (w) => jt(v, o, l.value.left + l.value.cellSize.width * c, l.value.top + l.value.cellSize.height * o),
onMouseout: () => qt({ datapoint: v, seriesIndex: o }),
onClick: () => Qt(v, o)
}, null, 40, Gl),
e.value.style.layout.cells.value.show ? pt((u(), i("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: n(Le)(v.color),
x: l.value.left + l.value.cellSize.width * c + l.value.cellSize.width / 2 + l.value.sumCellXHeight,
y: l.value.top + l.value.cellSize.height * o + l.value.cellSize.height / 2 + e.value.style.layout.cells.value.fontSize / 3,
style: { pointerEvents: "none", userSelect: "none" }
}, [
Pe(F(n(K)(
e.value.style.layout.cells.value.formatter,
v.value,
n(W)({
p: e.value.style.layout.dataLabels.prefix,
v: v.value,
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.layout.cells.value.roundingValue
}),
{ datapoint: v }
)), 1)
], 8, Wl)), [
[n(Rl), {
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: o * U.value + c,
reportHide: Yt,
reportRotation: Gt,
hideAll: Wt.value,
rotateAll: Ut.value
}]
]) : f("", !0)
]))), 256))
], 64))), 256))
], 512),
e.value.style.layout.cells.rowTotal.color.show ? (u(), i("g", {
key: 2,
ref_key: "yAxisSumRects",
ref: Ot
}, [
(u(!0), i(z, null, P(oe.value, (a, o) => (u(), i(z, null, [
g("rect", {
x: l.value.left,
y: l.value.top + l.value.cellSize.height * o,
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, Yl),
g("rect", {
x: l.value.left,
y: l.value.top + l.value.cellSize.height * o + r.value / 2,
width: l.value.sumCellXHeight,
height: l.value.cellSize.height - r.value,
fill: p.value.yTotals[o].color,
stroke: e.value.style.backgroundColor,
"stroke-width": r.value
}, null, 8, jl)
], 64))), 256))
], 512)) : f("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (u(), i("g", {
key: 3,
ref_key: "yAxisLabels",
ref: Je
}, [
(u(!0), i(z, null, P(oe.value, (a, o) => (u(), i(z, null, [
g("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: le.value,
y: l.value.top + l.value.cellSize.height * o + 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"
}, F(p.value.yLabels[o]), 9, ql),
e.value.style.layout.cells.rowTotal.value.show ? (u(), i("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: le.value,
y: l.value.top + l.value.cellSize.height * o + 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"
}, F(Kt(o)), 9, Kl)) : f("", !0)
], 64))), 256))
], 512)) : f("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (u(), i("g", {
key: 4,
ref_key: "xAxisLabels",
ref: $e
}, [
(u(!0), i(z, null, P(p.value.xLabels, (a, o) => (u(), i(z, null, [
!e.value.style.layout.dataLabels.xAxis.showOnlyAtModulo || e.value.style.layout.dataLabels.xAxis.showOnlyAtModulo && o % e.value.style.layout.dataLabels.xAxis.showOnlyAtModulo === 0 ? (u(), i("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 / p.value.xLabels.length * o + e.value.style.layout.dataLabels.xAxis.offsetX + l.value.sumCellXHeight}, ${l.value.topLabelsHeight}), rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
}, F(a), 9, Jl)) : f("", !0)
], 64))), 256))
], 512)) : f("", !0),
e.value.style.layout.cells.columnTotal.value.show ? (u(), i("g", {
key: 5,
ref_key: "xAxisSums",
ref: Fe
}, [
(u(!0), i(z, null, P(p.value.xLabels, (a, o) => (u(), i("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 / p.value.xLabels.length * o + 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})`
}, F(Jt(o)), 9, Ql))), 256))
], 512)) : f("", !0),
M.value ? (u(), i("g", Zl, [
g("rect", {
style: { "pointer-events": "none" },
x: M.value.x - e.value.style.layout.cells.selected.border / 2 + r.value + l.value.sumCellXHeight,
y: M.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, ea)
])) : f("", !0),
e.value.style.layout.crosshairs.show && M.value ? (u(), i("g", ta, [
g("line", {
x1: l.value.left + l.value.sumCellXHeight,
x2: M.value.x + l.value.sumCellXHeight,
y1: M.value.y + (l.value.cellSize.height - r.value) / 2,
y2: M.value.y + (l.value.cellSize.height - r.value) / 2,
stroke: e.value.style.layout.crosshairs.stroke,
"stroke-width": e.value.style.layout.crosshairs.strokeWidth,
"stroke-dasharray": e.value.style.layout.crosshairs.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, la),
g("line", {
x1: M.value.x + l.value.sumCellXHeight + (l.value.cellSize.width - r.value) / 2,
x2: M.value.x + l.value.sumCellXHeight + (l.value.cellSize.width - r.value) / 2,
y1: M.value.y,
y2: l.value.top,
stroke: e.value.style.layout.crosshairs.stroke,
"stroke-width": e.value.style.layout.crosshairs.strokeWidth,
"stroke-dasharray": e.value.style.layout.crosshairs.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, aa)
])) : f("", !0),
x(t.$slots, "svg", { svg: B.value }, void 0, !0)
], 14, Xl)),
e.value.style.legend.show ? (u(), i("div", {
key: 0,
ref_key: "legendRight",
ref: Dt,
class: "vue-ui-heatmap-legend-right",
style: L({
"--legend-width": e.value.style.legend.width + "px"
})
}, [
n(me) ? f("", !0) : (u(), i("div", {
key: 0,
class: "vue-ui-heatmap-legend-label-max",
style: L({
fontSize: e.value.style.legend.fontSize + "px",
color: e.value.style.legend.color
})
}, F(n(K)(
e.value.style.layout.cells.value.formatter,
n(J)(q.value),
n(W)({
p: e.value.style.layout.dataLabels.prefix,
v: n(J)(q.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
)), 5)),
g("div", oa, [
g("div", {
class: "vue-ui-heatmap-gauge",
style: L({
background: `linear-gradient(to bottom, ${e.value.style.layout.cells.colors.hot}, ${e.value.style.layout.cells.colors.cold})`
})
}, [
pt(g("div", {
class: "vue-ui-heatmap-gauge-indicator",
"data-value": n(K)(
e.value.style.layout.cells.value.formatter,
n(J)(R.value),
n(W)({
p: e.value.style.layout.dataLabels.prefix,
v: n(J)(R.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
),
style: L({
position: "absolute",
width: "100%",
height: "2px",
background: [void 0, null].includes(R.value) ? "transparent" : n(Le)(xe.value.datapoint.color),
top: `${[void 0, null].includes(R.value) ? 0 : (1 - R.value / q.value) * 100}%`,
transition: "all 0.2s ease-in-out",
"--background-color": e.value.style.backgroundColor,
"--gauge-arrow-color": n(Le)(e.value.style.backgroundColor),
"--gauge-arrow-text-color": n(Le)(e.value.style.backgroundColor),
"--gauge-arrow-value": R.value,
"--gauge-arrow-font-size": e.value.style.legend.fontSize + "px"
})
}, [
g("div", ua, F(n(K)(
e.value.style.layout.cells.value.formatter,
n(J)(R.value),
n(W)({
p: e.value.style.layout.dataLabels.prefix,
v: n(J)(R.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
)), 1)
], 12, sa), [
[cl, ![void 0, null].includes(R.value)]
])
], 4)
]),
n(me) ? f("", !0) : (u(), i("div", {
key: 1,
class: "vue-ui-heatmap-legend-label-min",
style: L({
fontSize: e.value.style.legend.fontSize + "px",
color: e.value.style.legend.color
})
}, F(n(K)(
e.value.style.layout.cells.value.formatter,
n(J)(fe.value),
n(W)({
p: e.value.style.layout.dataLabels.prefix,
v: n(J)(fe.value),
s: e.value.style.layout.dataLabels.suffix,
r: e.value.style.legend.roundingValue
})
)), 5))
], 4)) : f("", !0)
], 2),
t.$slots.watermark ? (u(), i("div", na, [
x(t.$slots, "watermark", H(X({ isPrinting: n(tt) || n(lt) })), void 0, !0)
])) : f("", !0),
t.$slots.source ? (u(), i("div", {
key: 5,
ref_key: "source",
ref: Qe,
dir: "auto"
}, [
x(t.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
Ae(n(Y), {
show: E.value.showTooltip && ne.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: $.value,
content: _e.value,
isFullscreen: se.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,
smoothForce: e.value.style.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
}, {
"tooltip-before": C(() => [
x(t.$slots, "tooltip-before", H(X({ ...xe.value })), void 0, !0)
]),
"tooltip-after": C(() => [
x(t.$slots, "tooltip-after", H(X({ ...xe.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
N.value && e.value.userOptions.buttons.table ? (u(), be(dl(ke.value.component), yl({ key: 6 }, ke.value.props, {
ref_key: "tableUnit",
ref: ce,
onClose: He
}), bt({
content: C(() => [
g("div", {
ref_key: "tableContainer",
ref: Ye,
class: "vue-ui-heatmap-table atom-data-table",
style: L(`${e.value.table.useDialog ? "" : "max-height: 300px; margin-top: 24px;"}`)
}, [
g("div", {
style: L(`width:100%;overflow-x:auto;position:relative;${e.value.table.useDialog ? "" : "padding-top:36px"};`),
class: ge({ "vue-ui-responsive": n(tl) })
}, [
e.value.table.useDialog ? f("", !0) : (u(), i("div", {
key: 0,
role: "button",
tabindex: "0",
style: L(`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: He,
onKeypress: hl(He, ["enter"])
}, [
Ae(n(Z), {
name: "close",
stroke: e.value.table.th.color,
"stroke-width": 2
}, null, 8, ["stroke"])
], 36)),
g("table", ia, [
e.value.table.useDialog ? f("", !0) : (u(), i("caption", {
key: 0,
style: L(`backgroundColor:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, [
Pe(F(e.value.style.title.text) + " ", 1),
e.value.style.title.subtitle.text ? (u(), i("span", ra, F(e.value.style.title.subtitle.text), 1)) : f("", !0)
], 4)),
g("thead", null, [
g("tr", {
role: "row",
style: L(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
}, [
g("th", {
style: L(`outline:${e.value.table.th.outline};padding-right:6px`)
}, null, 4),
(u(!0), i(z, null, P(y.dataset, (a, o) => (u(), i("th", {
align: "right",
style: L(`outline:${e.value.table.th.outline};padding-right:6px`)
}, F(a.name), 5))), 256))
], 4)
]),
g("tbody", null, [
(u(!0), i(z, null, P(p.value.xLabels, (a, o) => (u(), i("tr", {
role: "row",
class: ge({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": o % 2 === 0, "vue-ui-data-table__tbody__row-odd": o % 2 !== 0 }),
style: L(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
}, [
g("td", {
"data-cell": e.value.table.colNames.xAxis,
class: "vue-ui-data-table__tbody__td",
style: L(`outline:${e.value.table.td.outline}`)
}, [
g("div", ca, F(a), 1)
], 12, va),
(u(!0), i(z, null, P(y.dataset, (v, c) => (u(), i("td", {
class: "vue-ui-data-table__tbody__td",
"data-cell": y.dataset[c].name,
style: L(`outline:${e.value.table.td.outline}`)
}, [
g("div", ya, F(isNaN(v.values[o]) ? "-" : n(W)({ p: e.value.style.layout.dataLabels.prefix, v: v.values[o], s: e.value.style.layout.dataLabels.suffix, r: e.value.table.td.roundingValue })), 1)
], 12, da))), 256))
], 6))), 256))
])
])
], 6)
], 4)
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: C(() => [
Pe(F(ke.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: C(() => [
g("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: s[0] || (s[0] = (a) => Ne(e.value.userOptions.callbacks.csv))
}, [
Ae(n(Z), {
name: "excel",
stroke: ke.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : f("", !0),
n(me) ? (u(), be(_l, { key: 7 })) : f("", !0)
], 46, Hl));
}
}, fa = /* @__PURE__ */ Nl(ha, [["__scopeId", "data-v-9f255c51"]]), Ba = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: fa
}, Symbol.toStringTag, { value: "Module" }));
export {
Oa as a,
Ba as b,
fa as v
};