vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
797 lines • 87.8 kB
JavaScript
import { a2 as A, r as D, q as x, z as G, d as M, m as T, A as E, u as z, p as B } from "./index-BaaDnc4F.js";
import { createElementBlock as i, openBlock as c, normalizeStyle as g, createElementVNode as a, createCommentVNode as N, toDisplayString as u, Fragment as b, renderList as C, normalizeClass as f, createTextVNode as F, withDirectives as v, vModelText as p, withKeys as w, withModifiers as S, vModelSelect as H, createStaticVNode as P } from "vue";
import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const U = {
name: "vue-ui-table",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
uid: `vue-ui-table-${Math.random()}`,
bodyCopy: JSON.parse(JSON.stringify(this.dataset.body)).map((s, l) => ({
...s,
absoluteIndex: l
})),
buttonTimeout: null,
canMoveChart: !1,
chart: {
height: 316,
type: "bar",
width: 512
},
constants: {
ASC: 1,
BAR: "bar",
DATE: "date",
DESC: -1,
DONUT: "donut",
LINE: "line",
NUMERIC: "numeric",
PERCENTAGE: "percentage",
TEXT: "text"
},
clientX: 100,
clientY: 100,
cssClass: {
CELL: "smart-td-selected",
FIRST_TD: "smart-td-selected-first",
LAST_TD: "smart-td-selected-last",
ROW: "smart-td-selected-neighbor"
},
currentDonut: void 0,
currentFilter: void 0,
currentSearch: void 0,
currentSelectionSpan: {
col: void 0,
rows: []
},
currentPage: 0,
dates: {},
filteredDatesIndexes: {},
hasNaN: {},
iconColor: "#2D353C",
iconSize: 20,
immutableRangeFilters: {},
isExportRequest: !1,
isLoading: !1,
itemsPerPage: this.config.rowsPerPage ? this.config.rowsPerPage : 25,
multiselects: {},
paginatorOptions: [.../* @__PURE__ */ new Set([10, 25, 50, 100, 250, 500, this.config.rowsPerPage ? this.config.rowsPerPage : 25, this.dataset.body.length])].sort((s, l) => s - l),
palette: B,
percentages: {},
rafId: null,
rangeFilters: {},
searches: {},
selectedColumn: void 0,
selectedDonutCategory: void 0,
selectedPlot: void 0,
showChart: !1,
showDonutOptions: !1,
sorts: {},
tableBody: JSON.parse(JSON.stringify(this.dataset.body)).map((s, l) => ({
...s,
absoluteIndex: l
})),
tableHead: JSON.parse(JSON.stringify(this.dataset.header)).map((s) => ({
average: Object.hasOwn(s, "average") ? s.average : !1,
decimals: Object.hasOwn(s, "decimals") ? s.decimals : 0,
isMultiselect: Object.hasOwn(s, "isMultiselect") ? s.isMultiselect : !1,
isPercentage: Object.hasOwn(s, "isPercentage") ? s.isPercentage : !1,
isSearch: Object.hasOwn(s, "isSearch") ? s.isSearch : !1,
isSort: Object.hasOwn(s, "isSort") ? s.isSort : !1,
name: s.name,
// this attribute is mandatory
percentageTo: Object.hasOwn(s, "percentageTo") ? s.percentageTo : void 0,
prefix: Object.hasOwn(s, "prefix") ? s.prefix : "",
rangeFilter: Object.hasOwn(s, "rangeFilter") ? s.rangeFilter : !1,
suffix: Object.hasOwn(s, "suffix") ? s.suffix : "",
sum: Object.hasOwn(s, "sum") ? s.sum : !1,
type: s.type
// this attribute is mandatory
}))
};
},
mounted() {
if (this.dataset.header.length === 0)
throw new Error(`vue-ui-table error: missing header data.
Provide an array of objects of type:
{
name: string;
type: string; ('text' | 'numeric' | 'date')
average: boolean;
decimals: number | undefined;
sum: boolean;
isSort:boolean;
isSearch: boolean;
isMultiselect: boolean;
isPercentage: boolean;
percentageTo: string; (or '')
}`);
if (this.dataset.body.length === 0)
throw new Error("vue-ui-table error: missing body data");
this.isLoading = !0, this.promiseWithAsyncFunction(this.prepareBodyCopy, () => {
this.$forceUpdate(), this.isLoading = !1;
}), document.addEventListener("keydown", (r) => {
const s = document.activeElement;
(s && Array.from(s.classList).includes("td-focusable") && r.key.includes("Arrow") || r.code === "Space") && r.preventDefault();
});
},
watch: {
showChart: function(r) {
r && this.$nextTick(() => {
this.closeDragElement();
const s = this.$refs.chartModal;
s.onmousedown = this.dragMouseDown;
});
}
},
computed: {
availableDonutCategories() {
return Object.keys(this.multiselects).map((r) => ({
index: r,
name: this.dataset.header[r].name,
options: this.multiselects[r]
}));
},
canChart() {
return this.FINAL_CONFIG.useChart && this.currentSelectionSpan.rows.length > 1;
},
chartData() {
if (!this.canChart) return [];
const r = 316, s = 512, l = this.currentSelectionSpan.rows.length, h = s / l, t = Math.max(...this.currentSelectionSpan.rows.map((I) => I.value)), e = Math.min(...this.currentSelectionSpan.rows.map((I) => I.value)), n = e >= 0 ? 0 : Math.abs(e), o = t + n, d = t < 0 && e < 0, y = this.dataset.header[this.currentSelectionSpan.col].isPercentage, m = this.currentSelectionSpan.rows.map((I, O) => ({
x: h * O + h / 2,
y: (1 - (I.value + n) / o) * r,
value: y ? I.value * 100 : I.value,
suffix: y ? "%" : this.dataset.header[this.currentSelectionSpan.col].suffix ? this.dataset.header[this.currentSelectionSpan.col].suffix : "",
prefix: this.dataset.header[this.currentSelectionSpan.col].prefix ? this.dataset.header[this.currentSelectionSpan.col].prefix : "",
index: I.index,
absoluteValue: y ? Math.abs(I.value) * 100 : Math.abs(I.value)
})), k = r - r * (n / o);
return { isAllNegative: d, zero: k, plots: m, slot: h, progression: m.length >= 2 ? this.calcLinearProgression(m) : !1 };
},
donutHollowLabels() {
return {
total: Number((this.currentDonut.map((r) => r.absoluteValue).reduce((r, s) => r + s, 0) * (this.dataset.header[this.currentSelectionSpan.col].isPercentage ? 100 : 1)).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
average: Number((this.currentDonut.map((r) => r.absoluteValue).reduce((r, s) => r + s, 0) / this.currentSelectionSpan.rows.length * (this.dataset.header[this.currentSelectionSpan.col].isPercentage ? 100 : 1)).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString()
};
},
hasNumericTypes() {
return this.dataset.header.map((r) => r.type).includes(this.constants.NUMERIC);
},
icons() {
return {
arrowSort: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l4 -4l4 4m-4 -4v14" /><path d="M21 15l-4 4l-4 -4m4 4v-14" /></svg>`,
bar: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M4 20l14 0" /></svg>`,
chart: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 19l16 0" /><path d="M4 15l4 -6l4 2l4 -5l4 4" /></svg>`,
chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>`,
chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize * 1.6}" height="${this.iconSize * 1.6}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize * 1.6}" height="${this.iconSize * 1.6}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
donut: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize * 0.8}" height="${this.iconSize * 0.8}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v5m4 4h5" /><path d="M8.929 14.582l-3.429 2.918" /><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>`,
export: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5" /><path d="M3 10h18" /><path d="M10 3v18" /><path d="M16 19h6" /><path d="M19 16l3 3l-3 3" /></svg>`,
fileDownload: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M12 17v-6" /><path d="M9.5 14.5l2.5 2.5l2.5 -2.5" /></svg>`,
filter: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z" /></svg>`,
move: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 9l3 3l-3 3" /><path d="M15 12h6" /><path d="M6 9l-3 3l3 3" /><path d="M3 12h6" /><path d="M9 18l3 3l3 -3" /><path d="M12 15v6" /><path d="M15 6l-3 -3l-3 3" /><path d="M12 3v6" /></svg>`,
sort09: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 3a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 16v3a2 2 0 0 1 -2 2h-1.5" /></svg>`,
sort90: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 14a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 5v3a2 2 0 0 1 -2 2h-1.5" /></svg>`,
sortAZ: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10v-5c0 -1.38 .62 -2 2 -2s2 .62 2 2v5m0 -3h-4" /><path d="M19 21h-4l4 -7h-4" /><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /></svg>`,
sortZA: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 21v-5c0 -1.38 .62 -2 2 -2s2 .62 2 2v5m0 -3h-4" /><path d="M19 10h-4l4 -7h-4" /><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /></svg>`,
sum: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>`,
table: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" fill="white" d="M 10 2, 21 2, 21 21, 10 21Z"/><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M3 10h18" /><path d="M10 3v18" /></svg>`,
warning: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize * 0.8}" height="${this.iconSize * 0.8}" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>`
};
},
pages() {
const r = [];
if (this.bodyCopy.length)
for (let s = 0; s < this.bodyCopy.length; s += this.itemsPerPage)
r.push(this.bodyCopy.slice(s, s + this.itemsPerPage));
return r;
},
rows() {
return this.bodyCopy.map((r) => r.td);
},
selectedCellsCalculations() {
return {
sumPercentage: Number((this.currentSelectionSpan.rows.map((r) => r.value).reduce((r, s) => r + s, 0) * 100).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
sumRegular: Number(this.currentSelectionSpan.rows.map((r) => r.value).reduce((r, s) => r + s, 0).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
averagePercentage: Number((this.currentSelectionSpan.rows.map((r) => r.value).reduce((r, s) => r + s, 0) / this.currentSelectionSpan.rows.length * 100).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
averageRegular: Number((this.currentSelectionSpan.rows.map((r) => r.value).reduce((r, s) => r + s, 0) / this.currentSelectionSpan.rows.length).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString()
};
},
FINAL_CONFIG() {
const { vue_ui_table: r } = z();
if (!Object.keys(this.config || {}).length)
return r;
const s = this.treeShake({
defaultConfig: r,
userConfig: this.config
});
return this.convertConfigColors(s);
},
visibleRows() {
return this.pages[this.currentPage];
}
},
methods: {
// lib
treeShake: E,
makeDonut: T,
convertColorToHex: M,
convertConfigColors: G,
createCsvContent: x,
downloadCsv: D,
// specific
applyDonutOption() {
const r = this.selectedDonutCategory.options.map((s, l) => ({
name: s,
color: this.palette[l] || this.palette[l % this.palette.length],
value: this.visibleRows.filter((h, t) => h.td[this.selectedDonutCategory.index] === s && this.currentSelectionSpan.rows.map((e) => e.index).includes(t)).map((h) => h.td[this.currentSelectionSpan.col]).reduce((h, t) => Math.abs(h) + Math.abs(t), 0),
absoluteValue: this.visibleRows.filter((h, t) => h.td[this.selectedDonutCategory.index] === s && this.currentSelectionSpan.rows.map((e) => e.index).includes(t)).map((h) => h.td[this.currentSelectionSpan.col]).reduce((h, t) => h + t, 0)
})).sort((s, l) => l.value - s.value);
this.currentDonut = this.makeDonut({ series: r }, 50, 50, 30, 30), this.$nextTick(() => {
this.chart.type = this.constants.DONUT, this.showDonutOptions = !1;
});
},
calcRectY(r, s) {
return r >= 0 ? s : this.chartData.zero;
},
canResetColumn(r, s) {
return !this.hasNaN[r] && (s.isSort || s.isSearch || s.isMultiselect || s.rangeFilter) && ![this.constants.DATE].includes(s.type);
},
createXls(r = "all") {
const s = this.dataset.header.map((e) => e.name), l = r === "all" ? this.bodyCopy.map((e) => e.td) : this.visibleRows.map((e) => e.td), h = [s].concat(l), t = this.createCsvContent(h);
this.downloadCsv({ csvContent: t, title: "vue-ui-table" });
},
calcLinearProgression: A,
closeAllDropdowns() {
const r = document.getElementsByClassName("th-dropdown");
r.length && Array.from(r).forEach((s) => {
s.dataset.isOpen = !1;
});
},
debounce(r, s) {
let l;
clearTimeout(l), l = setTimeout(r, s);
},
filterBody() {
this.bodyCopy = this.tableBody.filter((r) => {
for (const s in this.searches)
if (!r.td[s].toUpperCase().includes(this.searches[s].toUpperCase()))
return !1;
for (const s in this.multiselects)
if (!this.multiselects[s].some((h) => h === r.td[s]))
return !1;
for (const s in this.dates) {
const l = new Date(r.td[s]), h = new Date(this.dates[s].from), t = new Date(this.dates[s].to);
if (l < h || l > t)
return !1;
}
return !0;
}), this.sortBody();
},
getAverage(r) {
return this.rows.map((s) => s[r]).map((s) => isNaN(Number(s)) ? 0 : s).reduce((s, l) => s + l, 0) / this.bodyCopy.length;
},
getDatesRange(r) {
const s = this.dataset.body.map((I) => new Date(I.td[r])), l = new Date(Math.min(...s)), h = new Date(Math.max(...s)), t = l.getFullYear(), e = h.getFullYear(), n = String(l.getMonth() + 1).padStart(2, "0"), o = String(h.getMonth() + 1).padStart(2, "0"), d = String(l.getDate()).padStart(2, "0"), y = String(h.getDate()).padStart(2, "0"), m = `${t}-${n}-${d}`, k = `${e}-${o}-${y}`;
return {
from: m,
to: k
};
},
getDonutLegendValue(r) {
return Number((r * (this.dataset.header[this.currentSelectionSpan.col].isPercentage ? 100 : 1)).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString();
},
getDropdownOptions(r) {
return [...new Set(this.dataset.body.map((s) => s.td[r]))];
},
getSum(r) {
return this.rows.map((s) => s[r]).map((s) => isNaN(Number(s)) ? 0 : s).reduce((s, l) => s + l, 0);
},
includesNaN(r) {
return r.includes(NaN);
},
isDropdownOptionSelected(r, s) {
return this.multiselects[s] ? this.multiselects[s].includes(r) : !0;
},
isNumeric(r) {
return !isNaN(Number(String(r).replaceAll("%", "")));
},
isResetDisabled(r, s) {
const l = s.isSort, h = s.isSearch, t = s.isMultiselect && this.multiselects[r], e = s.rangeFilter, n = (o) => {
if (e && this.rangeFilters[o])
return Math.round(this.rangeFilters[o].min) === this.immutableRangeFilters[o].min && Math.round(this.rangeFilters[o].max) === this.immutableRangeFilters[o].max;
};
if (l && h && t && e)
return ["", void 0].includes(this.searches[r]) && [void 0].includes(this.sorts[r]) && this.multiselects[r].length === this.getDropdownOptions(r).length && n(r);
if (l && h && t)
return ["", void 0].includes(this.searches[r]) && [void 0].includes(this.sorts[r]) && this.multiselects[r].length === this.getDropdownOptions(r).length;
if (l && h && e)
return ["", void 0].includes(this.searches[r]) && [void 0].includes(this.sorts[r]) && n(r);
if (l && h)
return ["", void 0].includes(this.searches[r]) && [void 0].includes(this.sorts[r]);
if (l && t && e)
return [void 0].includes(this.sorts[r]) && this.multiselects[r].length === this.getDropdownOptions(r).length && n(r);
if (l && t)
return [void 0].includes(this.sorts[r]) && this.multiselects[r].length === this.getDropdownOptions(r).length;
if (h && t && e)
return ["", void 0].includes(this.searches[r]) && this.multiselects[r].length === this.getDropdownOptions(r).length && n(r);
if (h && t)
return ["", void 0].includes(this.searches[r]) && this.multiselects[r].length === this.getDropdownOptions(r).length;
if (h && e)
return ["", void 0].includes(this.searches[r]) && n(r);
if (h)
return ["", void 0].includes(this.searches[r]);
if (l && e)
return [void 0].includes(this.sorts[r]) && n(r);
if (l)
return [void 0].includes(this.sorts[r]);
if (t && e)
return this.multiselects[r].length === this.getDropdownOptions(r).length && n(r);
if (t)
return this.multiselects[r].length === this.getDropdownOptions(r).length;
},
navigate(r) {
this.resetSelection(), r === "next" && this.currentPage < this.pages.length ? this.currentPage += 1 : r === "previous" && this.currentPage >= 1 ? this.currentPage -= 1 : this.currentPage = r - 1, this.$refs.tableWrapper.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
},
navigateCell(r) {
r.preventDefault();
const s = r.keyCode, l = 38, h = 40, t = 37, e = 39;
if (![l, h, t, e].includes(s)) return;
const n = r.target.id, o = /cell_(\d+)_(\d+)_vue-ui-table-(\d+)/, d = n.match(o), y = parseInt(d[1]), m = parseInt(d[2]), k = document.getElementById(`cell_${y}_${m + 1}_${this.uid}`), I = document.getElementById(`cell_${y}_${m - 1}_${this.uid}`), O = document.getElementById(`cell_${y + 1}_${m}_${this.uid}`), L = document.getElementById(`cell_${y - 1}_${m}_${this.uid}`);
let _;
switch (!0) {
case s === e:
_ = k;
break;
case s === t:
_ = I;
break;
case s === l:
_ = L;
break;
case s === h:
_ = O;
break;
default:
return;
}
_ && (_.focus(), _.scrollIntoView({ behavior: "smooth", block: "center" }));
},
openDonutOptions() {
this.selectedDonutCategory = this.availableDonutCategories[0], this.showDonutOptions = !0;
},
placeLabelOnTopOrBottom({ previousPlot: r, currentPlot: s, nextPlot: l }) {
const h = s.y - 38, t = s.y + 16;
return r && l ? r.value < s.value && l.value < s.value ? h : r.value > s.value && l.value > s.value ? t : (r.value > s.value && l.value < s.value || r.value < s.value && l.value > s.value, h) : r && !l ? r.value > s.value ? t : h : !r && l && l.value > s.value ? t : h;
},
async prepareBodyCopy() {
return new Promise((r) => {
const s = [];
this.tableHead.forEach((l, h) => {
if (l.isSearch && Object.assign(this.searches, { [h]: "" }), l.isMultiselect && Object.assign(this.multiselects, { [h]: this.getDropdownOptions(h) }), l.type === this.constants.DATE && (Object.assign(this.dates, { [h]: this.getDatesRange(h) }), Object.assign(this.filteredDatesIndexes, { [h]: !1 })), (l.isPercentage || l.percentageTo) && Object.assign(this.percentages, { [h]: {
reference: l.percentageTo,
referenceIndex: this.dataset.header.map((t) => t.name).indexOf(l.percentageTo)
} }), l.rangeFilter && (Object.assign(this.rangeFilters, { [h]: {
min: Math.round(Math.min(...this.dataset.body.map((t) => t.td).map((t) => t[h]))),
max: Math.round(Math.max(...this.dataset.body.map((t) => t.td).map((t) => t[h])))
} }), Object.assign(this.immutableRangeFilters, { [h]: {
min: Math.round(Math.min(...this.dataset.body.map((t) => t.td).map((t) => t[h]))),
max: Math.round(Math.max(...this.dataset.body.map((t) => t.td).map((t) => t[h])))
} })), l.isPercentage) {
const t = this.dataset.header.map((n) => n.name).indexOf(l.percentageTo), e = this.dataset.body.map((n) => n.td[t]).reduce((n, o) => n + o, 0);
s.push([h, t, e]);
}
l.type === this.constants.NUMERIC && !l.isPercentage && Object.assign(this.hasNaN, { [h]: this.includesNaN(this.dataset.body.map((t) => Number(t.td[h]))) });
}), this.bodyCopy.forEach((l, h) => {
s.map((t) => {
const [e, n, o] = t;
l.td[e] = l.td[n] / o;
}), l.td.forEach((t, e) => {
this.dataset.header[e].type === this.constants.TEXT && this.dataset.header[e].isSearch && (l[e] = this.stringToNumber(t)), this.dataset.header[e].type === this.constants.DATE && (l[e] = new Date(t).getTime()), this.dataset.header[e].type === this.constants.NUMERIC && (l[e] = isNaN(Number(t)) ? e : t), this.tableBody[h][e] = l[e];
});
}), r(!0);
});
},
promiseWithAsyncFunction(r, s) {
return new Promise((l, h) => {
r().then((t) => {
try {
const e = s(t);
l(e);
} catch (e) {
h(e);
}
}).catch((t) => {
h(t);
});
});
},
resetDates(r) {
this.dates[r] = {
from: this.getDatesRange(r).from,
to: this.getDatesRange(r).to
}, this.filteredDatesIndexes[r] = !1, this.$forceUpdate(), this.filterBody();
},
resetFilter(r, s, l) {
const h = l.currentTarget;
clearTimeout(this.buttonTimeout), h.classList.add("clicked"), this.buttonTimeout = setTimeout(() => {
h.classList.remove("clicked");
}, 200), this.currentFilter = void 0, s.rangeFilter && (this.rangeFilters[r].min = this.immutableRangeFilters[r].min, this.rangeFilters[r].max = this.immutableRangeFilters[r].max), s.isMultiselect ? (this.multiselects[r] = this.getDropdownOptions(r), s.type === this.constants.TEXT && (this.sorts[r] = void 0), s.isSearch && (this.searches[r] = "")) : s.type === this.constants.NUMERIC ? this.sorts[r] = void 0 : s.type === this.constants.TEXT ? (this.sorts[r] = void 0, this.searches[r] = "") : s.type === this.constants.DATE && (this.sorts[r] = void 0), this.filterBody();
},
resetSelection() {
const r = document.getElementsByClassName(`tr_${this.uid}`);
Array.from(r).forEach((s) => {
Array.from(s.getElementsByTagName("td")).forEach((l) => {
l.dataset.row === "even" ? (l.style.background = this.FINAL_CONFIG.style.rows.even.backgroundColor, l.style.color = this.FINAL_CONFIG.style.rows.even.color) : (l.style.background = this.FINAL_CONFIG.style.rows.odd.backgroundColor, l.style.color = this.FINAL_CONFIG.style.rows.odd.color);
});
}), Array.from(r).forEach((s) => s.dataset.selected = "false"), this.currentPage > this.pages.length - 1 && (this.currentPage = this.pages.length - 1), this.showChart = !1, this.currentDonut = void 0, this.selectedColumn = void 0, this.chart.type = this.constants.BAR, this.currentSelectionSpan = {
col: void 0,
rows: []
}, this.clientX = 100, this.clientY = 100;
},
selectColumn(r) {
this.currentSelectionSpan.col !== r ? (this.visibleRows.forEach((s, l) => {
this.selectTd({
td: s.td[r],
rowIndex: l,
colIndex: r,
headerType: this.constants.NUMERIC,
event: {
currentTarget: document.getElementById(`cell_${l}_${r}_${this.uid}`)
}
});
}), this.selectedColumn = r) : (this.selectedColumn = void 0, this.resetSelection());
},
selectDropdownOption(r, s) {
this.multiselects[s].includes(r) ? this.multiselects[s] = this.multiselects[s].filter((l) => l !== r) : this.multiselects[s].push(r), this.$forceUpdate(), this.filterBody();
},
selectTd({ td: r, rowIndex: s, colIndex: l, headerType: h, event: t }) {
if (h !== this.constants.NUMERIC || isNaN(Number(r))) {
this.resetSelection();
return;
}
this.currentSelectionSpan.col !== l && this.resetSelection();
const e = t.currentTarget.parentNode;
this.currentSelectionSpan.col = l, this.currentSelectionSpan.rows.map((n) => n.index).includes(s) ? (e.dataset.selected = "false", this.currentSelectionSpan.rows = this.currentSelectionSpan.rows.filter((n) => n.index !== s), t.currentTarget.classList.remove(this.cssClass.CELL), Array.from(e.children).forEach((n, o) => {
n.dataset.row === "even" ? (n.style.background = this.FINAL_CONFIG.style.rows.even.backgroundColor, n.style.color = this.FINAL_CONFIG.style.rows.even.olor) : (n.style.background = this.FINAL_CONFIG.style.rows.odd.backgroundColor, n.style.color = this.FINAL_CONFIG.style.rows.odd.color);
}), t.currentTarget.dataset.row === "even" ? (t.currentTarget.style.background = this.FINAL_CONFIG.style.rows.even.backgroundColor, t.currentTarget.style.color = this.FINAL_CONFIG.style.rows.even.color) : (t.currentTarget.style.background = this.FINAL_CONFIG.style.rows.odd.backgroundColor, t.currentTarget.style.color = this.FINAL_CONFIG.style.rows.odd.color)) : (e.dataset.selected = "true", this.currentSelectionSpan.rows.push({
index: s,
value: r
}), Array.from(e.children).forEach((n, o) => {
n.dataset.row === "even" ? (n.style.background = this.FINAL_CONFIG.style.rows.even.selectedNeighbors.backgroundColor, n.style.color = this.FINAL_CONFIG.style.rows.even.selectedNeighbors.color) : (n.style.background = this.FINAL_CONFIG.style.rows.odd.selectedNeighbors.backgroundColor, n.style.color = this.FINAL_CONFIG.style.rows.odd.selectedNeighbors.color);
}), t.currentTarget.dataset.row === "odd" ? (t.currentTarget.style.background = this.FINAL_CONFIG.style.rows.odd.selectedCell.backgroundColor, t.currentTarget.style.color = this.FINAL_CONFIG.style.rows.odd.selectedCell.color) : (t.currentTarget.style.background = this.FINAL_CONFIG.style.rows.even.selectedCell.backgroundColor, t.currentTarget.style.color = this.FINAL_CONFIG.style.rows.even.selectedCell.color)), this.currentSelectionSpan.rows = this.currentSelectionSpan.rows.sort((n, o) => n.index - o.index), this.chart.type === this.constants.DONUT && this.currentSelectionSpan.rows.length > 0 && this.applyDonutOption();
},
setFilterDatesIndexes(r) {
this.filteredDatesIndexes[r] = !(this.getDatesRange(r).from === this.dates[r].from && this.getDatesRange(r).to === this.dates[r].to);
},
sortBody() {
this.resetSelection(), Object.keys(this.rangeFilters).forEach((r) => {
this.filterByRange(this.bodyCopy, r);
}), Object.keys(this.sorts).forEach((r) => {
this.sortByNumber(this.bodyCopy, r);
}), this.currentFilter !== void 0 && this.sortByNumber(this.bodyCopy, this.currentFilter), this.dataset.header.forEach((r, s) => {
if (r.isPercentage) {
const l = this.percentages[s].referenceIndex, h = this.bodyCopy.map((t) => t.td[l]).reduce((t, e) => t + e, 0);
this.bodyCopy.forEach((t) => {
t.td[s] = t.td[l] / h;
});
}
}), this.currentPage > this.pages.length - 1 && (this.currentPage = this.pages.length - 1), [-1].includes(this.currentPage) && (this.currentPage = 0), this.$forceUpdate();
},
filterByRange(r, s) {
this.bodyCopy = r.filter((l) => l.td[s] >= this.rangeFilters[s].min && l[s] <= this.rangeFilters[s].max);
},
sortByNumber(r, s) {
if (this.sorts[s] === this.constants.ASC && (r = r.sort((l, h) => l[s] - h[s])), this.sorts[s] === this.constants.DESC)
r = r.sort((l, h) => h[s] - l[s]);
else
return 0;
},
sortTh(r, s) {
this.currentFilter = r;
const l = s.currentTarget;
clearTimeout(this.buttonTimeout), l.classList.add("clicked"), this.buttonTimeout = setTimeout(() => {
l.classList.remove("clicked");
}, 200), this.sorts[r] === 1 ? this.sorts[r] = this.constants.DESC : this.sorts[r] = this.constants.ASC, this.sortBody();
},
stringToNumber(r) {
let s = 0;
for (let l = 0; l < r.length; l += 1)
s += r.charCodeAt(l);
return s;
},
toggleMultiselect(r, s, l) {
const h = l.currentTarget;
clearTimeout(this.buttonTimeout), h.classList.add("clicked"), this.buttonTimeout = setTimeout(() => {
h.classList.remove("clicked");
}, 200);
const t = document.getElementById(`th_dropdown_${r}`);
t.dataset.isOpen === "false" ? t.dataset.isOpen = "true" : t.dataset.isOpen = "false";
},
updateCurrentPage(r) {
this.resetSelection(), this.currentPage = Number(r.target.value);
},
// DONUTS
calcDonutMarkerConnectorColor(r) {
return r.proportion * 100 > 3 ? r.color : "transparent";
},
calcDonutMarkerLabelPositionX(r) {
return r.center.endX + this.calcMarkerOffset(r, 50);
},
calcMarkerOffset(r, s) {
return r.center.endX - s >= 0 ? 3 : -2;
},
displayArcPercentage(r, s) {
return isNaN(r.value / this.sumValues(s)) ? 0 : (r.value / this.sumValues(s) * 100).toFixed(0) + "%";
},
isArcBigEnough(r) {
return r.proportion * 100 > 3;
},
sumValues(r) {
return [...r].map((s) => s.value).reduce((s, l) => s + l, 0);
},
// CHART DRAGGING METHODS
closeDragElement() {
document.onmouseup = null, document.onmousemove = null;
},
dragMouseDown(r) {
r = r || window.event, r.preventDefault(), document.onmouseup = this.closeDragElement, document.onmousemove = this.elementDrag;
},
elementDrag(r) {
this.rafId || (this.rafId = window.requestAnimationFrame(() => this.onElementDrag(r)));
},
onElementDrag(r) {
r = r || window.event, r.preventDefault();
const l = this.$refs.chartModal.getBoundingClientRect();
this.clientX = r.clientX - l.width / 2, this.clientY = r.clientY - l.height / 2, this.rafId = null;
}
}
}, V = { class: "vue-ui-table-export-hub" }, j = ["innerHTML"], X = ["data-is-open"], W = { class: "vue-ui-table-export-hub-options" }, Y = { class: "vue-ui-table-export-hub-option-wrapper" }, K = { class: "label" }, Z = ["innerHTML"], q = { class: "vue-ui-table-export-hub-option-wrapper" }, J = { class: "label" }, Q = ["innerHTML"], $ = { class: "vue-ui-table" }, ee = { id: "tableHead" }, te = { key: 0 }, se = { key: 0 }, re = { key: 1 }, ne = {
key: 0,
style: { display: "flex", "align-items": "center", "justify-content": "flex-end" }
}, le = ["innerHTML"], oe = {
key: 0,
style: { "margin-left": "3px" }
}, ae = { key: 0 }, ie = { class: "th-filter" }, ce = {
key: 0,
class: "th-date"
}, ue = { class: "date-wrapper--inputs" }, he = { class: "date-fieldset" }, de = ["for"], ge = ["id", "onUpdate:modelValue", "onInput"], ye = { class: "date-fieldset" }, Ne = ["for"], be = ["id", "onUpdate:modelValue", "onInput"], me = { class: "date-wrapper--button" }, fe = ["onClick"], Ce = ["innerHTML"], Ie = ["innerHTML"], Fe = ["innerHTML"], _e = ["onClick", "disabled"], ve = ["placeholder", "onUpdate:modelValue", "name"], ke = ["onClick"], pe = ["innerHTML"], we = ["innerHTML"], Se = ["innerHTML"], Oe = ["onClick", "innerHTML"], Le = ["innerHTML"], Ae = {
key: 5,
class: "th-range-filter"
}, De = ["for"], xe = ["id", "max", "min", "onUpdate:modelValue"], Ge = ["id", "max", "min", "onUpdate:modelValue"], Me = ["for"], Te = ["onClick", "disabled"], Ee = ["id"], ze = ["onClick"], Be = ["onClick", "onKeyup"], He = ["innerHTML", "onClick", "onKeyup"], Pe = ["data-row"], Re = ["data-row"], Ue = ["data-row", "onClick", "onKeyup", "id"], Ve = ["innerHTML"], je = { key: 1 }, Xe = { key: 2 }, We = { key: 5 }, Ye = ["innerHTML"], Ke = { key: 0 }, Ze = { style: { "margin-left": "12px" } }, qe = { class: "format-num" }, Je = { style: { "margin-left": "12px" } }, Qe = {
key: 0,
class: "format-num"
}, $e = {
key: 1,
class: "format-num"
}, et = { key: 2 }, tt = { style: { "margin-left": "12px" } }, st = {
key: 0,
class: "format-num"
}, rt = {
key: 1,
class: "format-num"
}, nt = { key: 2 }, lt = {
key: 0,
class: "vue-ui-table-paginator format-num"
}, ot = {
key: 1,
class: "vue-ui-table-size-warning"
}, at = ["innerHTML"], it = {
key: 3,
class: "vue-ui-table-pagination format-num"
}, ct = ["innerHTML", "disabled"], ut = ["disabled"], ht = {
key: 0,
class: "vue-ui-table-page-scroller-wrapper"
}, dt = {
for: "pageScroller",
style: { "font-size": "14px" }
}, gt = ["max", "value"], yt = { key: 1 }, Nt = ["disabled"], bt = ["innerHTML", "disabled"], mt = { class: "chart-modal-options" }, ft = ["innerHTML"], Ct = ["innerHTML"], It = ["innerHTML"], Ft = { style: { "margin-bottom": "12px" } }, _t = { key: 0 }, vt = { key: 1 }, kt = {
style: { width: "100%", height: "fit-content", cursor: "move" },
ref: "chartModal"
}, pt = { class: "vue-ui-table-fieldset" }, wt = { class: "vue-ui-table-fieldset-wrapper" }, St = ["name", "id", "checked", "onInput"], Ot = ["for"], Lt = ["disabled"], At = ["innerHTML"], Dt = ["viewBox"], xt = ["markerWidth", "markerHeight", "refY"], Gt = ["points", "fill"], Mt = ["x2", "y1", "y2", "stroke", "stroke-width"], Tt = ["y2", "stroke", "stroke-width"], Et = ["x", "width", "height", "fill"], zt = ["x", "y", "height", "width", "fill", "stroke"], Bt = ["x", "y", "width"], Ht = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Pt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], Rt = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ut = ["x", "y", "width"], Vt = ["x", "width", "height", "onMouseenter"], jt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], Xt = ["d", "stroke"], Wt = ["x", "y"], Yt = { class: "vue-ui-table-donut-label-name" }, Kt = ["fill"], Zt = ["fill"], qt = ["fill"], Jt = ["fill"], Qt = { class: "vue-ui-table-donut-legend" };
function $t(r, s, l, h, t, e) {
return c(), i("div", {
class: "vue-ui-table-main",
style: g(`font-family: ${e.FINAL_CONFIG.fontFamily}`)
}, [
a("div", V, [
a("button", {
onClick: s[0] || (s[0] = (n) => t.isExportRequest = !t.isExportRequest),
innerHTML: e.icons.export,
style: g(`background:${e.FINAL_CONFIG.style.exportMenu.backgroundColor};color:${e.FINAL_CONFIG.style.exportMenu.color}`)
}, null, 12, j),
a("div", {
class: "vue-ui-table-export-hub-dropdown",
"data-is-open": t.isExportRequest || "false",
style: g(`background:${e.FINAL_CONFIG.style.exportMenu.backgroundColor};color:${e.FINAL_CONFIG.style.exportMenu.color}`)
}, [
s[24] || (s[24] = a("b", { class: "vue-ui-table-export-hub-title" }, " Export ", -1)),
a("button", {
class: "close-dropdown",
onClick: s[1] || (s[1] = (n) => t.isExportRequest = !1),
style: g(`background:${e.FINAL_CONFIG.style.closeButtons.backgroundColor};color:${e.FINAL_CONFIG.style.closeButtons.color};border-radius:${e.FINAL_CONFIG.style.closeButtons.borderRadius}`)
}, " ✖ ", 4),
a("div", W, [
a("div", Y, [
a("div", K, u(e.FINAL_CONFIG.translations.exportAllLabel) + " (" + u(t.bodyCopy.length) + ") ", 1),
a("button", {
id: "exportAll",
onClick: s[2] || (s[2] = (n) => e.createXls("all")),
style: g(`background:${e.FINAL_CONFIG.style.exportMenu.buttons.backgroundColor};color:${e.FINAL_CONFIG.style.exportMenu.buttons.color}`)
}, [
a("div", {
innerHTML: e.icons.fileDownload
}, null, 8, Z),
a("span", null, u(e.FINAL_CONFIG.translations.exportAllButton), 1)
], 4)
]),
a("div", q, [
a("div", J, u(e.FINAL_CONFIG.translations.exportPageLabel), 1),
a("button", {
id: "exportPage",
onClick: s[3] || (s[3] = (n) => e.createXls("page")),
style: g(`background:${e.FINAL_CONFIG.style.exportMenu.buttons.backgroundColor};color:${e.FINAL_CONFIG.style.exportMenu.buttons.color}`)
}, [
a("div", {
innerHTML: e.icons.fileDownload
}, null, 8, Q),
a("span", null, u(e.FINAL_CONFIG.translations.exportPageButton), 1)
], 4)
])
])
], 12, X)
]),
a("div", {
class: "vue-ui-table__wrapper",
style: g(`max-height:${e.FINAL_CONFIG.maxHeight}px`),
ref: "tableWrapper"
}, [
a("table", $, [
a("thead", ee, [
a("tr", null, [
s[25] || (s[25] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), i(b, null, C(t.tableHead, (n, o) => (c(), i("th", {
key: `thead_${o}`,
style: g(`overflow: visible;background:${e.FINAL_CONFIG.style.th.backgroundColor};color:${e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`),
class: f({ "th-has-nan": t.hasNaN[o] })
}, [
e.hasNumericTypes && ([t.constants.TEXT, t.constants.DATE].includes(n.type) || n.isPercentage) ? (c(), i("span", te, [
F(u(n.name) + " ", 1),
n.isPercentage ? (c(), i("span", se, " / " + u(n.percentageTo), 1)) : N("", !0)
])) : (c(), i("span", re, u(n.name), 1))
], 6))), 128))
]),
e.hasNumericTypes ? (c(), i(b, { key: 0 }, [
a("tr", null, [
s[26] || (s[26] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), i(b, null, C(t.tableHead, (n, o) => (c(), i("th", {
key: `thead_${o}`,
class: f({ "th-numeric": !0, "th-has-nan": t.hasNaN[o] }),
style: g(`background:${e.FINAL_CONFIG.style.th.backgroundColor};color:${e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`)
}, [
n.sum && !t.hasNaN[o] ? (c(), i("span", ne, [
a("span", {
innerHTML: e.icons.sum,
style: { "margin-bottom": "-4px", "margin-right": "3px" }
}, null, 8, le),
F(" " + u(n.prefix) + " " + u(Number(e.getSum(o).toFixed(n.decimals)).toLocaleString()) + " " + u(n.suffix) + " ", 1),
t.percentages[o] && n.percentageTo && !n.isPercentage ? (c(), i("span", oe, " (" + u(isNaN(e.getSum(o) / e.getSum(t.percentages[o].referenceIndex)) ? "-" : (e.getSum(o) / e.getSum(t.percentages[o].referenceIndex) * 100).toFixed(n.decimals)) + "%) ", 1)) : N("", !0)
])) : N("", !0)
], 6))), 128))
]),
a("tr", null, [
s[27] || (s[27] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), i(b, null, C(t.tableHead, (n, o) => (c(), i("th", {
key: `thead_${o}`,
class: f({ "th-numeric": !0, "th-has-nan": t.hasNaN[o] }),
style: g(`background:${e.FINAL_CONFIG.style.th.backgroundColor};color:${e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`)
}, [
n.average && !t.hasNaN[o] ? (c(), i("span", ae, " ~ " + u(n.prefix) + " " + u(isNaN(e.getAverage(o)) ? "" : Number(e.getAverage(o).toFixed(n.decimals)).toLocaleString()) + " " + u(n.suffix), 1)) : N("", !0)
], 6))), 128))
]),
a("tr", null, [
s[30] || (s[30] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), i(b, null, C(t.tableHead, (n, o) => (c(), i("th", {
key: `thead_${o}`,
class: f({ "th-has-nan": t.hasNaN[o] }),
style: g(`background:${e.FINAL_CONFIG.style.th.backgroundColor};color:${e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`)
}, [
a("div", ie, [
n.type === t.constants.DATE && t.dates[o] ? (c(), i("div", ce, [
a("div", ue, [
a("div", he, [
a("label", {
for: `from_${o}`
}, u(e.FINAL_CONFIG.translations.from), 9, de),
v(a("input", {
id: `from_${o}`,
type: "date",
"onUpdate:modelValue": (d) => t.dates[o].from = d,
onInput: (d) => {
e.filterBody(), e.setFilterDatesIndexes(o);
},
style: g(`background:${e.FINAL_CONFIG.style.inputs.backgroundColor};color:${e.FINAL_CONFIG.style.inputs.color};border:${e.FINAL_CONFIG.style.inputs.border}`)
}, null, 44, ge), [
[p, t.dates[o].from]
])
]),
a("div", ye, [
a("label", {
for: `to_${o}`
}, u(e.FINAL_CONFIG.translations.to), 9, Ne),
v(a("input", {
id: `to_${o}`,
type: "date",
"onUpdate:modelValue": (d) => t.dates[o].to = d,
onInput: (d) => {
e.filterBody(), e.setFilterDatesIndexes(o);
},
style: g(`background:${e.FINAL_CONFIG.style.inputs.backgroundColor};color:${e.FINAL_CONFIG.style.inputs.color};border:${e.FINAL_CONFIG.style.inputs.border}`)
}, null, 44, be), [
[p, t.dates[o].to]
])
])
]),
a("div", me, [
n.isSort ? (c(), i("button", {
key: 0,
onClick: (d) => e.sortTh(o, d),
class: f({ "th-button-active": [t.constants.DESC, t.constants.ASC].includes(t.sorts[o]) }),
style: g(`background:${[t.constants.DESC, t.constants.ASC].includes(t.sorts[o]) ? "" : e.FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${[t.constants.DESC, t.constants.ASC].includes(t.sorts[o]) ? "" : e.FINAL_CONFIG.style.pagination.buttons.color}`)
}, [
t.sorts[o] === t.constants.ASC ? (c(), i("span", {
key: 0,
innerHTML: [t.constants.DATE].includes(n.type) ? e.icons.sort09 : e.icons.sortAZ
}, null, 8, Ce)) : t.sorts[o] === t.constants.DESC ? (c(), i("span", {
key: 1,
innerHTML: [t.constants.DATE].includes(n.type) ? e.icons.sort90 : e.icons.sortZA
}, null, 8, Ie)) : (c(), i("span", {
key: 2,
innerHTML: e.icons.arrowSort
}, null, 8, Fe))
], 14, fe)) : N("", !0),
a("button", {
onClick: (d) => {
e.resetDates(o), e.resetFilter(o, n, d);
},
disabled: !t.filteredDatesIndexes[o] && e.isResetDisabled(o, n),
class: "th-reset"
}, " ✖ ", 8, _e)
])
])) : N("", !0),
n.isSearch ? v((c(), i("input", {
key: 1,
placeholder: e.FINAL_CONFIG.translations.inputPlaceholder,
"onUpdate:modelValue": (d) => t.searches[o] = d,
onInput: s[4] || (s[4] = (d) => e.debounce(e.filterBody, 400)),
name: `search_${o}`,
style: g(`background:${e.FINAL_CONFIG.style.inputs.backgroundColor};color:${e.FINAL_CONFIG.style.inputs.color};border:${e.FINAL_CONFIG.style.inputs.border}`)
}, null, 44, ve)), [
[p, t.searches[o]]
]) : N("", !0),
!t.hasNaN[o] && n.isSort && n.type !== t.constants.DATE ? (c(), i("button", {
key: 2,
onClick: (d) => e.sortTh(o, d),
class: f({ "th-button-active": [t.constants.DESC, t.constants.ASC].includes(t.sorts[o]) }),
style: g(`background:${[t.constants.DESC, t.constants.ASC].includes(t.sorts[o]) ? "" : e.FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${[t.constants.DESC, t.constants.ASC].includes(t.sorts[o]) ? "" : e.FINAL_CONFIG.style.pagination.buttons.color}`)
}, [
t.sorts[o] === t.constants.ASC ? (c(), i("span", {
key: 0,
innerHTML: [t.constants.NUMERIC].includes(n.type) ? e.icons.sort09 : e.icons.sort