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