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