vue-data-ui 3.22.13 → 3.23.0

package/dist/vue-ui-table-heatmap-DVwMqzje.js

@@ -0,0 +1,364 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { $ as t, D as n, jt as r, m as i, q as a, r as ee, tt as te, yt as ne } from "./lib-BuMGJ_a0.js";
+import { n as re, t as ie } from "./useHints-Dq_w2E8B.js";
+import { t as ae } from "./useConfig-BilxnBNr.js";
+import { t as oe } from "./usePrinter-BFvi4jVy.js";
+import { t as o } from "./useNestedProp--NSEmhOH.js";
+import { t as se } from "./useThemeCheck-C43Tcqmk.js";
+import { t as ce } from "./Shape-BPMV94Ij.js";
+import { t as s } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as le } from "./useUserOptionState-DK-_1ddE.js";
+import { t as ue } from "./vue_ui_table_heatmap-w8vx5k6f.js";
+import { Fragment as c, computed as l, createBlock as de, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as fe, createVNode as pe, defineAsyncComponent as me, guardReactiveProps as p, mergeProps as m, nextTick as he, normalizeClass as h, normalizeProps as g, normalizeStyle as _, onMounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, unref as C, useCssVars as ge, useSlots as _e, watch as ve, withCtx as w } from "vue";
+//#region src/components/vue-ui-table-heatmap.vue
+var T = /* @__PURE__ */ e({ default: () => P }), ye = ["id"], be = { role: "cell" }, E = { role: "row" }, D = ["data-cell"], O = {
+	key: 0,
+	style: {
+		display: "flex",
+		"flex-direction": "row",
+		gap: "2px",
+		"align-items": "center"
+	}
+}, k = ["height", "width"], A = {
+	key: 0,
+	role: "cell",
+	"data-cell": "sum"
+}, j = {
+	key: 1,
+	role: "cell",
+	"data-cell": "average"
+}, M = {
+	key: 2,
+	role: "cell",
+	"data-cell": "median"
+}, N = {
+	key: 1,
+	ref: "source",
+	dir: "auto"
+}, P = /*#__PURE__*/ s({
+	__name: "vue-ui-table-heatmap",
+	props: {
+		config: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		dataset: {
+			type: Array,
+			default() {
+				return [];
+			}
+		}
+	},
+	setup(e, { expose: s }) {
+		ge((e) => ({
+			v98bebdba: ke.value,
+			f2005304: Oe.value
+		}));
+		let T = me(() => import("./UserOptions-3ujTo3LD.js").then((e) => e.n)), { vue_ui_table_heatmap: P } = ae(), { isThemeValid: xe, warnInvalidTheme: Se } = se(), F = e, I = b(a()), L = b(!1), R = b(null), z = b(!1), B = b(0), Ce = _e();
+		v(() => {
+			Ce["chart-background"] && console.warn("VueUiTableHeatmap does not support the #chart-background slot.");
+		});
+		let V = l({
+			get: () => G(),
+			set: (e) => e
+		});
+		re({
+			config: () => V.value,
+			dataset: () => F.dataset,
+			component: "VueUiTableHeatmap",
+			rules: [
+				ie.emptyArray,
+				{
+					test: (e) => e.length > 31,
+					message: [
+						"👀 The number of series is > 31. Consider:",
+						"",
+						"▶️ Using filters to let users choose a maximum number of series to display."
+					]
+				},
+				{
+					test: (e) => e.some((e) => e?.values && e?.values.length > 31),
+					message: [
+						"👀 Some series have a number of data points > 31. Consider:",
+						"",
+						"▶️ Using filters to let users choose a maximum number of data points to display."
+					]
+				}
+			]
+		});
+		let { userOptionsVisible: H, setUserOptionsVisibility: U, keepUserOptionState: W } = le({ config: V.value });
+		function G() {
+			let e = o({
+				userConfig: F.config,
+				defaultConfig: P
+			}), t = e.theme;
+			if (!t) return e;
+			if (!xe.value(e)) return Se(e), e;
+			let n = o({
+				userConfig: ue[t] || F.config,
+				defaultConfig: e
+			});
+			return o({
+				userConfig: F.config,
+				defaultConfig: n
+			});
+		}
+		ve(() => F.config, (e) => {
+			V.value = G(), H.value = !V.value.userOptions.showOnChartHover, Y();
+		}, { deep: !0 });
+		let { isPrinting: we, isImaging: Te, generatePdf: K, generateImage: q } = oe({
+			elementId: `table_heatmap_${I.value}`,
+			fileName: "vue-ui-table-heatmap",
+			options: V.value.userOptions.print
+		}), J = l(() => V.value.table.responsiveBreakpoint), Ee = l(() => !!F.dataset && F.dataset.length);
+		v(() => {
+			Y();
+		});
+		function Y() {
+			r(F.dataset) && te({
+				componentName: "VueUiTableHeatmap",
+				type: "dataset"
+			});
+			let e = new ResizeObserver((e) => {
+				e.forEach((e) => {
+					L.value = e.contentRect.width < J.value;
+				});
+			});
+			R.value && e.observe(R.value);
+		}
+		let X = l(() => F.dataset.map((e) => {
+			let t = e.values.map((e) => isNaN(e) ? 0 : e), n = t.reduce((e, t) => e + t, 0);
+			return {
+				...e,
+				values: t,
+				serieExtremes: {
+					max: Math.max(...t),
+					min: Math.min(...t)
+				},
+				sum: n,
+				average: n / t.length,
+				median: i(t),
+				displayValues: [e.name, ...e.values],
+				id: a()
+			};
+		})), Z = l(() => {
+			let e = X.value.flatMap((e) => e.values);
+			return {
+				min: Math.min(...e),
+				max: Math.max(...e)
+			};
+		});
+		function De(e, t) {
+			let n = V.value.style.heatmapColors.useIndividualScale;
+			return ne(V.value.style.heatmapColors.min, V.value.style.heatmapColors.max, n ? t.min : Z.value.min, n ? t.max : Z.value.max, e);
+		}
+		let Q = l(() => X.value.map((e) => ({
+			...e,
+			colors: e.displayValues.map((t) => isNaN(t) ? V.value.style.backgroundColor : De(t, e.serieExtremes))
+		}))), Oe = l(() => V.value.style.backgroundColor), ke = l(() => `${V.value.table.borderWidth}px`);
+		function $(e = null) {
+			he(() => {
+				let r = Q.value.map((e) => [
+					[e.name],
+					e.displayValues,
+					[e.sum],
+					[e.average],
+					[e.median]
+				]), i = n([[
+					[""],
+					V.value.table.head.values,
+					["sum"],
+					["average"],
+					["median"]
+				]].concat(r));
+				e ? e(i) : t({
+					csvContent: i,
+					title: "vue-ui-table-heatmap"
+				});
+			});
+		}
+		function Ae(e) {
+			z.value = e, B.value += 1;
+		}
+		return s({
+			generatePdf: K,
+			generateCsv: $,
+			generateImage: q
+		}), (e, t) => (y(), d("div", {
+			ref_key: "tableContainer",
+			ref: R,
+			style: _(`width:100%; overflow-x:auto; container-type: inline-size;padding-top:${V.value.userOptions.show ? "36px" : ""}; ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""}; position:relative;`),
+			class: h({
+				"vue-data-ui-component": !0,
+				"vue-ui-responsive": L.value
+			}),
+			id: `table_heatmap_${I.value}`,
+			onMouseenter: t[0] ||= () => C(U)(!0),
+			onMouseleave: t[1] ||= () => C(U)(!1)
+		}, [
+			V.value.userOptions.show && Ee.value && (C(W) || C(H)) ? (y(), de(C(T), {
+				ref: "details",
+				key: `user_option_${B.value}`,
+				backgroundColor: V.value.style.backgroundColor,
+				color: V.value.style.color,
+				isPrinting: C(we),
+				isImaging: C(Te),
+				uid: I.value,
+				hasPdf: V.value.userOptions.buttons.pdf,
+				hasXls: V.value.userOptions.buttons.csv,
+				hasImg: V.value.userOptions.buttons.img,
+				hasFullscreen: V.value.userOptions.buttons.fullscreen,
+				isFullscreen: z.value,
+				titles: { ...V.value.userOptions.buttonTitles },
+				chartElement: R.value,
+				position: V.value.userOptions.position,
+				callbacks: V.value.userOptions.callbacks,
+				printScale: V.value.userOptions.print.scale,
+				onToggleFullscreen: Ae,
+				onGeneratePdf: C(K),
+				onGenerateCsv: $,
+				onGenerateImage: C(q),
+				style: _({ visibility: C(W) ? C(H) ? "visible" : "hidden" : "visible" })
+			}, fe({ _: 2 }, [
+				e.$slots.menuIcon ? {
+					name: "menuIcon",
+					fn: w(({ isOpen: t, color: n }) => [S(e.$slots, "menuIcon", g(p({
+						isOpen: t,
+						color: n
+					})), void 0, !0)]),
+					key: "0"
+				} : void 0,
+				e.$slots.optionPdf ? {
+					name: "optionPdf",
+					fn: w(() => [S(e.$slots, "optionPdf", {}, void 0, !0)]),
+					key: "1"
+				} : void 0,
+				e.$slots.optionCsv ? {
+					name: "optionCsv",
+					fn: w(() => [S(e.$slots, "optionCsv", {}, void 0, !0)]),
+					key: "2"
+				} : void 0,
+				e.$slots.optionImg ? {
+					name: "optionImg",
+					fn: w(() => [S(e.$slots, "optionImg", {}, void 0, !0)]),
+					key: "3"
+				} : void 0,
+				e.$slots.optionFullscreen ? {
+					name: "optionFullscreen",
+					fn: w(({ toggleFullscreen: t, isFullscreen: n }) => [S(e.$slots, "optionFullscreen", g(p({
+						toggleFullscreen: t,
+						isFullscreen: n
+					})), void 0, !0)]),
+					key: "4"
+				} : void 0,
+				e.$slots["custom-menu-before"] ? {
+					name: "custom-menu-before",
+					fn: w(() => [S(e.$slots, "custom-menu-before", {}, void 0, !0)]),
+					key: "5"
+				} : void 0,
+				e.$slots["custom-menu-after"] ? {
+					name: "custom-menu-after",
+					fn: w(() => [S(e.$slots, "custom-menu-after", {}, void 0, !0)]),
+					key: "6"
+				} : void 0
+			]), 1032, [
+				"backgroundColor",
+				"color",
+				"isPrinting",
+				"isImaging",
+				"uid",
+				"hasPdf",
+				"hasXls",
+				"hasImg",
+				"hasFullscreen",
+				"isFullscreen",
+				"titles",
+				"chartElement",
+				"position",
+				"callbacks",
+				"printScale",
+				"onGeneratePdf",
+				"onGenerateImage",
+				"style"
+			])) : u("", !0),
+			f("table", {
+				class: h({ "vue-ui-table-heatmap": !0 }),
+				style: _(`width:100%;font-family:${V.value.style.fontFamily};background:${V.value.style.backgroundColor};`)
+			}, [
+				f("caption", null, [S(e.$slots, "caption", {}, void 0, !0)]),
+				f("thead", null, [f("tr", {
+					role: "row",
+					style: _(`background:${V.value.table.head.backgroundColor};color:${V.value.table.head.color}`)
+				}, [(y(!0), d(c, null, x(V.value.table.head.values, (t, n) => (y(), d("th", be, [S(e.$slots, "head", m({ ref_for: !0 }, {
+					value: t,
+					rowIndex: n,
+					type: typeof t,
+					isResponsive: L.value
+				}), void 0, !0)]))), 256))], 4)]),
+				f("tbody", null, [(y(!0), d(c, null, x(Q.value, (t, n) => (y(), d("tr", E, [
+					(y(!0), d(c, null, x(t.displayValues, (r, i) => (y(), d("td", {
+						role: "cell",
+						"data-cell": V.value.table.head.values[i]
+					}, [t.color && i === 0 ? (y(), d("div", O, [t.color ? (y(), d("svg", {
+						key: 0,
+						height: V.value.style.shapeSize,
+						width: V.value.style.shapeSize,
+						viewBox: "0 0 20 20",
+						style: {
+							background: "none",
+							overflow: "visible"
+						}
+					}, [pe(ce, {
+						plot: {
+							x: 10,
+							y: 10
+						},
+						color: t.color,
+						radius: 9,
+						shape: t.shape || "circle"
+					}, null, 8, ["color", "shape"])], 8, k)) : u("", !0), S(e.$slots, "rowTitle", m({ ref_for: !0 }, {
+						value: r,
+						rowIndex: n,
+						colIndex: i,
+						type: typeof r,
+						isResponsive: L.value
+					}), void 0, !0)])) : (y(), d(c, { key: 1 }, [i === 0 ? S(e.$slots, "rowTitle", m({ ref_for: !0 }, {
+						value: r,
+						rowIndex: n,
+						colIndex: i,
+						type: typeof r,
+						isResponsive: L.value
+					}), void 0, !0, 0) : u("", !0), i > 0 ? S(e.$slots, "cell", m({ ref_for: !0 }, {
+						value: r,
+						rowIndex: n,
+						colIndex: i,
+						type: typeof r,
+						isResponsive: L.value,
+						color: t.colors[i],
+						textColor: C(ee)(t.colors[i])
+					}), void 0, !0, 1) : u("", !0)], 64))], 8, D))), 256)),
+					V.value.table.showSum ? (y(), d("td", A, [S(e.$slots, "sum", m({ ref_for: !0 }, {
+						value: t.sum,
+						rowIndex: n,
+						isResponsive: L.value
+					}), void 0, !0)])) : u("", !0),
+					V.value.table.showAverage ? (y(), d("td", j, [S(e.$slots, "average", m({ ref_for: !0 }, {
+						value: t.average,
+						rowIndex: n,
+						isResponsive: L.value
+					}), void 0, !0)])) : u("", !0),
+					V.value.table.showMedian ? (y(), d("td", M, [S(e.$slots, "median", m({ ref_for: !0 }, {
+						value: t.median,
+						rowIndex: n,
+						isResponsive: L.value
+					}), void 0, !0)])) : u("", !0)
+				]))), 256))])
+			], 4),
+			e.$slots.source ? (y(), d("div", N, [S(e.$slots, "source", {}, void 0, !0)], 512)) : u("", !0)
+		], 46, ye));
+	}
+}, [["__scopeId", "data-v-0e8d0ce2"]]);
+//#endregion
+export { T as n, P as t };