vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
272 lines (271 loc) • 10.4 kB
JavaScript
import { useCssVars as j, unref as e, ref as h, useSlots as ee, onMounted as z, computed as c, watch as te, openBlock as r, createElementBlock as l, normalizeStyle as y, normalizeClass as E, createBlock as oe, createSlots as se, withCtx as C, renderSlot as i, normalizeProps as ne, guardReactiveProps as ae, createCommentVNode as m, createElementVNode as g, Fragment as _, renderList as w, mergeProps as v, createVNode as re, nextTick as le } from "vue";
import { u as ie, c as G, t as ue, o as de, e as pe, $ as ce, G as me, N as fe, q as ve, r as he } from "./index-WrV3SAID.js";
import { u as B } from "./useNestedProp-Cj0kHD7k.js";
import { u as ge, U as be } from "./usePrinter-kVpf1iV8.js";
import { _ as ye } from "./Shape-DNIrFW-J.js";
import { u as Ce } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as _e } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ke = ["id"], $e = { role: "cell" }, Ie = { role: "row" }, we = ["data-cell"], xe = {
key: 0,
style: { display: "flex", "flex-direction": "row", gap: "2px", "align-items": "center" }
}, Oe = ["height", "width"], Fe = {
key: 0,
role: "cell",
"data-cell": "sum"
}, Pe = {
key: 1,
role: "cell",
"data-cell": "average"
}, Ne = {
key: 2,
role: "cell",
"data-cell": "median"
}, Ve = {
key: 1,
ref: "source",
dir: "auto"
}, Re = {
__name: "vue-ui-table-heatmap",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(H, { expose: A }) {
j((t) => ({
"2473e67e": e(Y),
"27aaf659": e(Q)
}));
const { vue_ui_table_heatmap: D } = ie(), f = H, k = h(G()), u = h(!1), b = h(null), $ = h(!1), x = h(0), L = ee();
z(() => {
L["chart-background"] && console.warn("VueUiTableHeatmap does not support the #chart-background slot.");
});
const o = c({
get: () => P(),
set: (t) => t
}), { userOptionsVisible: I, setUserOptionsVisibility: O, keepUserOptionState: F } = Ce({ config: o.value });
function P() {
const t = B({
userConfig: f.config,
defaultConfig: D
});
return t.theme ? {
...B({
userConfig: ue.vue_ui_table_heatmap[t.theme] || f.config,
defaultConfig: t
})
} : t;
}
te(() => f.config, (t) => {
o.value = P(), I.value = !o.value.showOnChartHover, R();
}, { deep: !0 });
const { isPrinting: X, isImaging: W, generatePdf: N, generateImage: V } = ge({
elementId: `table_heatmap_${k.value}`,
fileName: "vue-ui-table-heatmap"
}), q = c(() => o.value.table.responsiveBreakpoint), J = c(() => !!f.dataset && f.dataset.length);
z(() => {
R();
});
function R() {
de(f.dataset) && pe({
componentName: "VueUiTableHeatmap",
type: "dataset"
});
const t = new ResizeObserver((n) => {
n.forEach((s) => {
u.value = s.contentRect.width < q.value;
});
});
b.value && t.observe(b.value);
}
const M = c(() => f.dataset.map((t) => {
const n = t.values.map((a) => isNaN(a) ? 0 : a), s = n.reduce((a, p) => a + p, 0);
return {
...t,
values: n,
serieExtremes: {
max: Math.max(...n),
min: Math.min(...n)
},
sum: s,
average: s / n.length,
median: ce(n),
displayValues: [t.name, ...t.values],
id: G()
};
})), S = c(() => {
const t = M.value.flatMap((n) => n.values);
return {
min: Math.min(...t),
max: Math.max(...t)
};
});
function K(t, n) {
const s = o.value.style.heatmapColors.useIndividualScale;
return fe(o.value.style.heatmapColors.min, o.value.style.heatmapColors.max, s ? n.min : S.value.min, s ? n.max : S.value.max, t);
}
const T = c(() => M.value.map((t) => ({
...t,
colors: t.displayValues.map((n) => isNaN(n) ? o.value.style.backgroundColor : K(n, t.serieExtremes))
}))), Q = c(() => o.value.style.backgroundColor), Y = c(() => `${o.value.table.borderWidth}px`);
function U() {
le(() => {
const t = T.value.map((a) => [
[a.name],
a.displayValues,
[a.sum],
[a.average],
[a.median]
]), n = [[[""], o.value.table.head.values, ["sum"], ["average"], ["median"]]].concat(t), s = ve(n);
he({ csvContent: s, title: "vue-ui-table-heatmap" });
});
}
function Z(t) {
$.value = t, x.value += 1;
}
return A({
generatePdf: N,
generateCsv: U,
generateImage: V
}), (t, n) => (r(), l("div", {
ref_key: "tableContainer",
ref: b,
style: y(`width:100%; overflow-x:auto; container-type: inline-size;padding-top:${e(o).userOptions.show ? "36px" : ""}; ${e($) ? "vue-data-ui-wrapper-fullscreen" : ""}; position:relative;`),
class: E({ "vue-ui-responsive": e(u) }),
id: `table_heatmap_${e(k)}`,
onMouseenter: n[0] || (n[0] = () => e(O)(!0)),
onMouseleave: n[1] || (n[1] = () => e(O)(!1))
}, [
e(o).userOptions.show && e(J) && (e(F) || e(I)) ? (r(), oe(be, {
ref: "details",
key: `user_option_${e(x)}`,
backgroundColor: e(o).style.backgroundColor,
color: e(o).style.color,
isPrinting: e(X),
isImaging: e(W),
uid: e(k),
hasPdf: e(o).userOptions.buttons.pdf,
hasXls: e(o).userOptions.buttons.csv,
hasImg: e(o).userOptions.buttons.img,
hasFullscreen: e(o).userOptions.buttons.fullscreen,
isFullscreen: e($),
titles: { ...e(o).userOptions.buttonTitles },
chartElement: e(b),
position: e(o).userOptions.position,
onToggleFullscreen: Z,
onGeneratePdf: e(N),
onGenerateCsv: U,
onGenerateImage: e(V),
style: y({
visibility: e(F) ? e(I) ? "visible" : "hidden" : "visible"
})
}, se({ _: 2 }, [
t.$slots.optionPdf ? {
name: "optionPdf",
fn: C(() => [
i(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: C(() => [
i(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: C(() => [
i(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: C(({ toggleFullscreen: s, isFullscreen: a }) => [
i(t.$slots, "optionFullscreen", ne(ae({ toggleFullscreen: s, isFullscreen: a })), void 0, !0)
]),
key: "3"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
g("table", {
class: E({ "vue-ui-table-heatmap": !0 }),
style: y(`width:100%;font-family:${e(o).style.fontFamily};background:${e(o).style.backgroundColor};`)
}, [
g("caption", null, [
i(t.$slots, "caption", {}, void 0, !0)
]),
g("thead", null, [
g("tr", {
role: "row",
style: y(`background:${e(o).table.head.backgroundColor};color:${e(o).table.head.color}`)
}, [
(r(!0), l(_, null, w(e(o).table.head.values, (s, a) => (r(), l("th", $e, [
i(t.$slots, "head", v({ ref_for: !0 }, { value: s, rowIndex: a, type: typeof s, isResponsive: e(u) }), void 0, !0)
]))), 256))
], 4)
]),
g("tbody", null, [
(r(!0), l(_, null, w(e(T), (s, a) => (r(), l("tr", Ie, [
(r(!0), l(_, null, w(s.displayValues, (p, d) => (r(), l("td", {
role: "cell",
"data-cell": e(o).table.head.values[d]
}, [
s.color && d === 0 ? (r(), l("div", xe, [
s.color ? (r(), l("svg", {
key: 0,
height: e(o).style.shapeSize,
width: e(o).style.shapeSize,
viewBox: "0 0 20 20",
style: { background: "none", overflow: "visible" }
}, [
re(ye, {
plot: { x: 10, y: 10 },
color: s.color,
radius: 9,
shape: s.shape || "circle"
}, null, 8, ["color", "shape"])
], 8, Oe)) : m("", !0),
i(t.$slots, "rowTitle", v({ ref_for: !0 }, { value: p, rowIndex: a, colIndex: d, type: typeof p, isResponsive: e(u) }), void 0, !0)
])) : (r(), l(_, { key: 1 }, [
d === 0 ? i(t.$slots, "rowTitle", v({
key: 0,
ref_for: !0
}, { value: p, rowIndex: a, colIndex: d, type: typeof p, isResponsive: e(u) }), void 0, !0) : m("", !0),
d > 0 ? i(t.$slots, "cell", v({
key: 1,
ref_for: !0
}, { value: p, rowIndex: a, colIndex: d, type: typeof p, isResponsive: e(u), color: s.colors[d], textColor: e(me)(s.colors[d]) }), void 0, !0) : m("", !0)
], 64))
], 8, we))), 256)),
e(o).table.showSum ? (r(), l("td", Fe, [
i(t.$slots, "sum", v({ ref_for: !0 }, { value: s.sum, rowIndex: a, isResponsive: e(u) }), void 0, !0)
])) : m("", !0),
e(o).table.showAverage ? (r(), l("td", Pe, [
i(t.$slots, "average", v({ ref_for: !0 }, { value: s.average, rowIndex: a, isResponsive: e(u) }), void 0, !0)
])) : m("", !0),
e(o).table.showMedian ? (r(), l("td", Ne, [
i(t.$slots, "median", v({ ref_for: !0 }, { value: s.median, rowIndex: a, isResponsive: e(u) }), void 0, !0)
])) : m("", !0)
]))), 256))
])
], 4),
t.$slots.source ? (r(), l("div", Ve, [
i(t.$slots, "source", {}, void 0, !0)
], 512)) : m("", !0)
], 46, ke));
}
}, Be = /* @__PURE__ */ _e(Re, [["__scopeId", "data-v-8c5d9edd"]]);
export {
Be as default
};