vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,683 lines • 91.6 kB
JavaScript
import { n as Y, t as W, q as G, r as J, d as K, u as Z, v as q, w as Q, m as $, x as ee, s as E, j as te } from "./lib-BwysEpWI.js";
import { u as se } from "./useNestedProp-OFRiX4kU.js";
import { V as ne } from "./vue-ui-xy-COxHwrGr.js";
import { V as re } from "./vue-ui-donut-CKDYWkKE.js";
import le from "./BaseIcon-4i3dd7Ty.js";
import { resolveComponent as x, createElementBlock as u, openBlock as c, normalizeStyle as g, createCommentVNode as b, createElementVNode as a, toDisplayString as h, withDirectives as O, withKeys as L, withModifiers as S, vModelText as A, createVNode as P, Fragment as C, renderList as k, normalizeClass as p, createTextVNode as _, vModelSelect as H, createBlock as R, ref as oe, computed as ae, useCssVars as ie } from "vue";
import { _ as ce } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const D = {
name: "vue-ui-table",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
components: { VueUiXy: ne, VueUiDonut: re, BaseIcon: le },
emits: ["page-change"],
data() {
return {
uid: `vue-ui-table-${Math.random()}`,
bodyCopy: JSON.parse(JSON.stringify(this.dataset.body)).map((t, r) => ({
...t,
absoluteIndex: r
})),
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,
dragOffsetX: 0,
dragOffsetY: 0,
modalWidth: 400,
modalHeight: 200,
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((t, r) => t - r),
palette: te,
percentages: {},
rafId: null,
rangeFilters: {},
searches: {},
selectedColumn: void 0,
selectedDonutCategory: void 0,
selectedPlot: void 0,
showChart: !1,
showDonutOptions: !1,
sorts: {},
chartStep: 0,
chartTimeLabelSourceModel: "",
tableBody: JSON.parse(JSON.stringify(this.dataset.body)).map((t, r) => ({
...t,
absoluteIndex: r
})),
tableHead: JSON.parse(JSON.stringify(this.dataset.header)).map((t, r) => ({
average: Object.hasOwn(t, "average") ? t.average : !1,
decimals: Object.hasOwn(t, "decimals") ? t.decimals : 0,
isMultiselect: Object.hasOwn(t, "isMultiselect") ? t.isMultiselect : !1,
isPercentage: Object.hasOwn(t, "isPercentage") ? t.isPercentage : !1,
isSearch: Object.hasOwn(t, "isSearch") ? t.isSearch : !1,
isSort: Object.hasOwn(t, "isSort") ? t.isSort : !1,
name: t.name,
// this attribute is mandatory
percentageTo: Object.hasOwn(t, "percentageTo") ? t.percentageTo : void 0,
prefix: Object.hasOwn(t, "prefix") ? t.prefix : "",
rangeFilter: Object.hasOwn(t, "rangeFilter") ? t.rangeFilter : !1,
suffix: Object.hasOwn(t, "suffix") ? t.suffix : "",
sum: Object.hasOwn(t, "sum") ? t.sum : !1,
type: t.type,
// this attribute is mandatory
index: r
})),
filename: ""
};
},
setup() {
const n = oe(null), t = ae(() => n.value ? n.value.getBoundingClientRect().height + 3 : 3);
return {
tableCaption: n,
exportButtonTop: t
};
},
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", (n) => {
const t = document.activeElement;
(t && Array.from(t.classList).includes("td-focusable") && n.key.includes("Arrow") || n.code === "Space") && n.preventDefault();
}), this.filename = this.FINAL_CONFIG.style.exportMenu.filename, this.chartTimeLabelSourceModel = this.dateHeaders[0]?.name ?? "";
},
watch: {
isExportRequest: function(n) {
if (n) {
const t = this.$refs.filenameInputRef;
t && t.focus();
}
},
showChart: function(n) {
n && this.$nextTick(() => {
this.closeDragElement();
});
},
dataset: {
handler(n) {
this.isLoading = !0, this.bodyCopy = JSON.parse(JSON.stringify(n.body)).map((t, r) => ({
...t,
absoluteIndex: r
})), this.tableBody = JSON.parse(JSON.stringify(n.body)).map((t, r) => ({
...t,
absoluteIndex: r
})), this.tableHead = JSON.parse(JSON.stringify(n.header)).map((t, r) => ({
average: Object.hasOwn(t, "average") ? t.average : !1,
decimals: Object.hasOwn(t, "decimals") ? t.decimals : 0,
isMultiselect: Object.hasOwn(t, "isMultiselect") ? t.isMultiselect : !1,
isPercentage: Object.hasOwn(t, "isPercentage") ? t.isPercentage : !1,
isSearch: Object.hasOwn(t, "isSearch") ? t.isSearch : !1,
isSort: Object.hasOwn(t, "isSort") ? t.isSort : !1,
name: t.name,
percentageTo: Object.hasOwn(t, "percentageTo") ? t.percentageTo : void 0,
prefix: Object.hasOwn(t, "prefix") ? t.prefix : "",
rangeFilter: Object.hasOwn(t, "rangeFilter") ? t.rangeFilter : !1,
suffix: Object.hasOwn(t, "suffix") ? t.suffix : "",
sum: Object.hasOwn(t, "sum") ? t.sum : !1,
type: t.type,
index: r
})), this.currentSelectionSpan = { col: void 0, rows: [] }, this.selectedColumn = void 0, this.itemsPerPage = this.config.rowsPerPage ? this.config.rowsPerPage : 25, this.percentages = {}, this.dates = {}, this.filteredDatesIndexes = {}, this.hasNaN = {}, this.immutableRangeFilters = {}, this.rangeFilters = {}, this.multiselects = {}, this.searches = {}, this.sorts = {}, this.showChart = !1, this.currentDonut = void 0, this.selectedDonutCategory = void 0, this.selectedPlot = void 0, this.showDonutOptions = !1, this.currentSelectionSpan.col = void 0, this.currentSelectionSpan.rows = [], this.promiseWithAsyncFunction(this.prepareBodyCopy, () => {
this.$forceUpdate(), this.updateCurrentPage(), this.isLoading = !1;
});
},
deep: !0,
// In case dataset.body/header are updated in-place
immediate: !1
}
},
computed: {
colorCancelInactive() {
return this.FINAL_CONFIG.style.th.buttons.cancel.inactive.backgroundColor;
},
textColorCancelInactive() {
return this.FINAL_CONFIG.style.th.buttons.cancel.inactive.color;
},
colorCancelActive() {
return this.FINAL_CONFIG.style.th.buttons.cancel.active.backgroundColor;
},
colorCancelActiveLight() {
return G(this.colorCancelActive, 0.33);
},
colorCancelActiveOutline() {
return E(this.colorCancelActive, 33);
},
colorButtonSortActive() {
return this.FINAL_CONFIG.style.th.buttons.filter.active.backgroundColor;
},
colorButtonSortActiveLight() {
return G(this.colorButtonSortActive, 0.33);
},
colorButtonSortActiveOutline() {
return E(this.colorButtonSortActive, 33);
},
colorButtonSortInactive() {
return this.FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor;
},
colorButtonSortActiveColorText() {
return this.FINAL_CONFIG.style.th.buttons.filter.active.color;
},
dateHeaders() {
return [...this.tableHead].filter((n) => n.type === this.constants.DATE);
},
chartTimeLabelOptions() {
return ["", ...this.dateHeaders.map((n) => n.name)];
},
chartTimeLabelSourceIndex() {
const n = this.dateHeaders.find((t) => t.name === this.chartTimeLabelSourceModel);
return n ? n.index : null;
},
chartTimeLabels() {
return this.chartTimeLabelSourceIndex == null ? [] : this.visibleRows.map((n) => n.td[this.chartTimeLabelSourceIndex]);
},
availableDonutCategories() {
return Object.keys(this.multiselects).map((n) => ({
index: n,
name: this.dataset.header[n].name,
options: this.multiselects[n]
}));
},
canChart() {
return this.FINAL_CONFIG.useChart && this.currentSelectionSpan.rows.length > 1;
},
chartData() {
if (!this.canChart) return [];
const n = 316, t = 512, r = this.currentSelectionSpan.rows.length, i = t / r, s = Math.max(...this.currentSelectionSpan.rows.map((v) => v.value)), e = Math.min(...this.currentSelectionSpan.rows.map((v) => v.value)), m = this.dataset.header[this.currentSelectionSpan.col].isPercentage && this.dataset.header[this.currentSelectionSpan.col].percentageTo, f = this.chart.type === this.constants.DONUT && this.selectedDonutCategory && this.selectedDonutCategory.name, w = this.dataset.header[this.currentSelectionSpan.col].name + (m ? ` / ${this.dataset.header[this.percentages[this.currentSelectionSpan.col].referenceIndex].name}` : "") + (f ? ` ${this.FINAL_CONFIG.translations.by} ${this.selectedDonutCategory.name}` : ""), o = this.dataset.header[this.currentSelectionSpan.col].prefix, l = this.dataset.header[this.currentSelectionSpan.col].suffix, d = [
{
name: w,
series: this.currentSelectionSpan.rows.map((v) => v.value),
type: "line",
useProgression: !0,
smooth: this.FINAL_CONFIG.style.chart.layout.line.smooth,
color: this.FINAL_CONFIG.style.chart.layout.line.stroke,
useArea: this.FINAL_CONFIG.style.chart.layout.line.useArea
}
], y = [
{
name: w,
series: this.currentSelectionSpan.rows.map((v) => v.value),
type: "bar",
useProgression: !0,
color: this.FINAL_CONFIG.style.chart.layout.bar.fill
}
], I = this.FINAL_CONFIG.style.chart.modal.backgroundColor, N = this.adaptColorToBackground(I), F = this.dataset.header[this.currentSelectionSpan.col].decimals, V = {
chart: {
backgroundColor: I,
color: N,
labels: {
fontSize: 18,
prefix: o,
suffix: l
},
grid: {
stroke: G(N, 0.5),
labels: {
color: N,
xAxisLabels: {
color: N,
show: this.chartTimeLabels.length,
values: this.chartTimeLabels,
datetimeFormatter: this.FINAL_CONFIG.style.chart.layout.datetimeFormatter,
showOnlyAtModulo: this.FINAL_CONFIG.style.chart.layout.timeLabels.showOnlyAtModulo,
modulo: this.FINAL_CONFIG.style.chart.layout.timeLabels.modulo
}
}
},
highlighter: {
color: N
},
legend: {
color: N
},
title: {
text: w,
color: N,
fontSize: 18
},
tooltip: {
showTimeLabel: this.chartTimeLabels.length,
backgroundOpacity: 30,
color: N,
backgroundColor: I,
showPercentage: !1,
roundingValue: F
},
userOptions: {
position: "left",
buttons: {
pdf: !1,
csv: !1,
table: !1,
annotator: !1
}
},
zoom: {
show: this.FINAL_CONFIG.style.chart.layout.zoom.show,
focusOnDrag: !0,
minimap: {
show: !0
}
}
},
line: {
labels: {
show: !0,
color: N,
rounding: F
},
dot: {
useSerieColor: !1,
fill: this.FINAL_CONFIG.style.chart.layout.line.plot.fill,
strokeWidth: this.FINAL_CONFIG.style.chart.layout.line.plot.strokeWidth
}
},
bar: {
useGradient: !1,
border: {
useSerieColor: !1,
stroke: this.FINAL_CONFIG.style.chart.layout.bar.stroke,
strokeWidth: this.FINAL_CONFIG.style.chart.layout.bar.strokeWidth
},
labels: {
show: !0,
color: N,
rounding: F
}
}
}, T = e >= 0 ? 0 : Math.abs(e), j = s + T, M = this.dataset.header[this.currentSelectionSpan.col].isPercentage, B = this.currentSelectionSpan.rows.map((v, X) => ({
x: i * X + i / 2,
y: (1 - (v.value + T) / j) * n,
value: M ? v.value * 100 : v.value,
suffix: M ? "%" : 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: v.index,
absoluteValue: M ? Math.abs(v.value) * 100 : Math.abs(v.value)
}));
return {
donutConfig: {
userOptions: {
position: "left",
buttons: {
pdf: !1,
csv: !1,
table: !1,
annotator: !1
}
},
style: {
chart: {
backgroundColor: I,
color: N,
layout: {
curvedMarkers: !0,
donut: {
strokeWidth: 64
},
labels: {
dataLabels: {
suffix: M ? "%" : "",
prefix: o
},
value: {
rounding: F
},
percentage: {
color: N,
rounding: F
},
name: {
color: N
},
hollow: {
average: {
color: N,
text: this.FINAL_CONFIG.translations.average,
value: {
color: N
}
},
total: {
color: N,
offsetY: -12,
text: this.FINAL_CONFIG.translations.total,
value: {
color: N,
offsetY: -12
}
}
}
}
},
legend: {
backgroundColor: I,
color: N,
roundingValue: F,
roundingPercentage: F
},
padding: {
left: 12,
right: 12
},
title: {
text: w,
color: N,
fontSize: 18
},
tooltip: {
backgroundOpacity: 30,
color: N,
backgroundColor: I,
roundingValue: F,
roundingValue: F
}
}
}
},
xyConfig: V,
xyDatasetLine: d,
xyDatasetBar: y,
progression: B.length >= 2 ? this.calcLinearProgression(B) : !1
};
},
hasNumericTypes() {
return this.dataset.header.map((n) => n.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>`,
grip: `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>`
};
},
pages() {
const n = [];
if (this.bodyCopy.length)
for (let t = 0; t < this.bodyCopy.length; t += this.itemsPerPage)
n.push(this.bodyCopy.slice(t, t + this.itemsPerPage));
return n;
},
rows() {
return this.bodyCopy.map((n) => n.td);
},
selectedCellsCalculations() {
return {
sumPercentage: Number((this.currentSelectionSpan.rows.map((n) => n.value).reduce((n, t) => n + t, 0) * 100).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
sumRegular: Number(this.currentSelectionSpan.rows.map((n) => n.value).reduce((n, t) => n + t, 0).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
averagePercentage: Number((this.currentSelectionSpan.rows.map((n) => n.value).reduce((n, t) => n + t, 0) / this.currentSelectionSpan.rows.length * 100).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString(),
averageRegular: Number((this.currentSelectionSpan.rows.map((n) => n.value).reduce((n, t) => n + t, 0) / this.currentSelectionSpan.rows.length).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString()
};
},
FINAL_CONFIG() {
const { vue_ui_table: n } = se();
if (!Object.keys(this.config || {}).length)
return n;
const t = this.treeShake({
defaultConfig: n,
userConfig: this.config
});
return this.convertConfigColors(t);
},
visibleRows() {
return this.pages[this.currentPage];
}
},
methods: {
// lib
adaptColorToBackground: ee,
convertColorToHex: $,
convertConfigColors: Q,
createCsvContent: q,
darkenHexColor: Z,
dataLabel: K,
downloadCsv: J,
lightenHexColor: G,
treeShake: W,
// specific
applyDonutOption() {
const n = this.selectedDonutCategory.options.map((t, r) => ({
name: t,
color: this.palette[r] || this.palette[r % this.palette.length],
values: [this.visibleRows.filter((i, s) => i.td[this.selectedDonutCategory.index] === t && this.currentSelectionSpan.rows.map((e) => e.index).includes(s)).map((i) => i.td[this.currentSelectionSpan.col]).reduce((i, s) => Math.abs(i) + Math.abs(s), 0)],
absoluteValue: this.visibleRows.filter((i, s) => i.td[this.selectedDonutCategory.index] === t && this.currentSelectionSpan.rows.map((e) => e.index).includes(s)).map((i) => i.td[this.currentSelectionSpan.col]).reduce((i, s) => i + s, 0)
})).sort((t, r) => r.value - t.value);
this.currentDonut = n, this.$nextTick(() => {
this.chart.type = this.constants.DONUT, this.showDonutOptions = !1;
});
},
calcRectY(n, t) {
return n >= 0 ? t : this.chartData.zero;
},
canResetColumn(n, t) {
return !this.hasNaN[n] && (t.isSort || t.isSearch || t.isMultiselect || t.rangeFilter) && ![this.constants.DATE].includes(t.type);
},
createXls(n = "all") {
const t = this.dataset.header.map((e) => e.name), r = n === "all" ? this.bodyCopy.map((e) => e.td) : this.visibleRows.map((e) => e.td), i = [t].concat(r), s = this.createCsvContent(i);
this.downloadCsv({ csvContent: s, title: this.filename });
},
calcLinearProgression: Y,
closeAllDropdowns() {
const n = document.getElementsByClassName("th-dropdown");
n.length && Array.from(n).forEach((t) => {
t.dataset.isOpen = !1;
});
},
debounce(n, t) {
let r;
clearTimeout(r), r = setTimeout(n, t);
},
filterBody() {
this.bodyCopy = this.tableBody.filter((n) => {
for (const t in this.searches)
if (!n.td[t].toUpperCase().includes(this.searches[t].toUpperCase()))
return !1;
for (const t in this.multiselects)
if (!this.multiselects[t].some((i) => i === n.td[t]))
return !1;
for (const t in this.dates) {
const r = new Date(n.td[t]), i = new Date(this.dates[t].from), s = new Date(this.dates[t].to);
if (r < i || r > s)
return !1;
}
return !0;
}), this.sortBody();
},
getAverage(n) {
return this.rows.map((t) => t[n]).map((t) => isNaN(Number(t)) ? 0 : t).reduce((t, r) => t + r, 0) / this.bodyCopy.length;
},
getDatesRange(n) {
const t = this.dataset.body.map((y) => new Date(y.td[n])), r = new Date(Math.min(...t)), i = new Date(Math.max(...t)), s = r.getFullYear(), e = i.getFullYear(), m = String(r.getMonth() + 1).padStart(2, "0"), f = String(i.getMonth() + 1).padStart(2, "0"), w = String(r.getDate()).padStart(2, "0"), o = String(i.getDate()).padStart(2, "0"), l = `${s}-${m}-${w}`, d = `${e}-${f}-${o}`;
return {
from: l,
to: d
};
},
getDonutLegendValue(n) {
return Number((n * (this.dataset.header[this.currentSelectionSpan.col].isPercentage ? 100 : 1)).toFixed(this.dataset.header[this.currentSelectionSpan.col].decimals)).toLocaleString();
},
getDropdownOptions(n) {
return [...new Set(this.dataset.body.map((t) => t.td[n]))];
},
getSum(n) {
return this.rows.map((t) => t[n]).map((t) => isNaN(Number(t)) ? 0 : t).reduce((t, r) => t + r, 0);
},
includesNaN(n) {
return n.includes(NaN);
},
isDropdownOptionSelected(n, t) {
return this.multiselects[t] ? this.multiselects[t].includes(n) : !0;
},
isNumeric(n) {
return !isNaN(Number(String(n).replaceAll("%", "")));
},
isResetDisabled(n, t) {
const r = t.isSort, i = t.isSearch, s = t.isMultiselect && this.multiselects[n], e = t.rangeFilter, m = (f) => {
if (e && this.rangeFilters[f])
return Math.round(this.rangeFilters[f].min) === this.immutableRangeFilters[f].min && Math.round(this.rangeFilters[f].max) === this.immutableRangeFilters[f].max;
};
if (r && i && s && e)
return ["", void 0].includes(this.searches[n]) && [void 0].includes(this.sorts[n]) && this.multiselects[n].length === this.getDropdownOptions(n).length && m(n);
if (r && i && s)
return ["", void 0].includes(this.searches[n]) && [void 0].includes(this.sorts[n]) && this.multiselects[n].length === this.getDropdownOptions(n).length;
if (r && i && e)
return ["", void 0].includes(this.searches[n]) && [void 0].includes(this.sorts[n]) && m(n);
if (r && i)
return ["", void 0].includes(this.searches[n]) && [void 0].includes(this.sorts[n]);
if (r && s && e)
return [void 0].includes(this.sorts[n]) && this.multiselects[n].length === this.getDropdownOptions(n).length && m(n);
if (r && s)
return [void 0].includes(this.sorts[n]) && this.multiselects[n].length === this.getDropdownOptions(n).length;
if (i && s && e)
return ["", void 0].includes(this.searches[n]) && this.multiselects[n].length === this.getDropdownOptions(n).length && m(n);
if (i && s)
return ["", void 0].includes(this.searches[n]) && this.multiselects[n].length === this.getDropdownOptions(n).length;
if (i && e)
return ["", void 0].includes(this.searches[n]) && m(n);
if (i)
return ["", void 0].includes(this.searches[n]);
if (r && e)
return [void 0].includes(this.sorts[n]) && m(n);
if (r)
return [void 0].includes(this.sorts[n]);
if (s && e)
return this.multiselects[n].length === this.getDropdownOptions(n).length && m(n);
if (s)
return this.multiselects[n].length === this.getDropdownOptions(n).length;
},
getCurrentPageData() {
return {
totalPages: this.pages.length,
itemsPerPage: this.itemsPerPage,
currentPage: this.currentPage,
currentPageData: this.visibleRows.map((n) => n.td)
};
},
onPageChange() {
this.$emit("page-change", this.getCurrentPageData());
},
navigate(n) {
if (this.resetSelection(), n === "next" && this.currentPage < this.pages.length) {
if (this.currentPage + 1 > this.pages.length - 1)
return;
this.currentPage += 1;
} else if (n === "previous" && this.currentPage >= 1)
this.currentPage -= 1;
else {
if (n - 1 < 0 || n > this.pages.length || n === "previous")
return;
this.currentPage = n - 1;
}
this.onPageChange(), this.$refs.tableWrapper.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
},
navigateCell(n) {
n.preventDefault();
const t = n.keyCode, r = 38, i = 40, s = 37, e = 39;
if (![r, i, s, e].includes(t)) return;
const m = n.target.id, f = /cell_(\d+)_(\d+)_vue-ui-table-(\d+)/, w = m.match(f), o = parseInt(w[1]), l = parseInt(w[2]), d = document.getElementById(`cell_${o}_${l + 1}_${this.uid}`), y = document.getElementById(`cell_${o}_${l - 1}_${this.uid}`), I = document.getElementById(`cell_${o + 1}_${l}_${this.uid}`), N = document.getElementById(`cell_${o - 1}_${l}_${this.uid}`);
let F;
switch (!0) {
case t === e:
F = d;
break;
case t === s:
F = y;
break;
case t === r:
F = N;
break;
case t === i:
F = I;
break;
default:
return;
}
F && (F.focus(), F.scrollIntoView({ behavior: "smooth", block: "center" }));
},
openDonutOptions() {
this.selectedDonutCategory = this.availableDonutCategories[0], this.showDonutOptions = !0;
},
placeLabelOnTopOrBottom({ previousPlot: n, currentPlot: t, nextPlot: r }) {
const i = t.y - 38, s = t.y + 16;
return n && r ? n.value < t.value && r.value < t.value ? i : n.value > t.value && r.value > t.value ? s : (n.value > t.value && r.value < t.value || n.value < t.value && r.value > t.value, i) : n && !r ? n.value > t.value ? s : i : !n && r && r.value > t.value ? s : i;
},
async prepareBodyCopy() {
return new Promise((n) => {
const t = [];
this.tableHead.forEach((r, i) => {
if (r.isSearch && Object.assign(this.searches, { [i]: "" }), r.isMultiselect && Object.assign(this.multiselects, { [i]: this.getDropdownOptions(i) }), r.type === this.constants.DATE && (Object.assign(this.dates, { [i]: this.getDatesRange(i) }), Object.assign(this.filteredDatesIndexes, { [i]: !1 })), (r.isPercentage || r.percentageTo) && Object.assign(this.percentages, {
[i]: {
reference: r.percentageTo,
referenceIndex: this.dataset.header.map((s) => s.name).indexOf(r.percentageTo)
}
}), r.rangeFilter && (Object.assign(this.rangeFilters, {
[i]: {
min: Math.round(Math.min(...this.dataset.body.map((s) => s.td).map((s) => s[i]))),
max: Math.round(Math.max(...this.dataset.body.map((s) => s.td).map((s) => s[i])))
}
}), Object.assign(this.immutableRangeFilters, {
[i]: {
min: Math.round(Math.min(...this.dataset.body.map((s) => s.td).map((s) => s[i]))),
max: Math.round(Math.max(...this.dataset.body.map((s) => s.td).map((s) => s[i])))
}
})), r.isPercentage) {
const s = this.dataset.header.map((m) => m.name).indexOf(r.percentageTo), e = this.dataset.body.map((m) => m.td[s]).reduce((m, f) => m + f, 0);
t.push([i, s, e]);
}
r.type === this.constants.NUMERIC && !r.isPercentage && Object.assign(this.hasNaN, { [i]: this.includesNaN(this.dataset.body.map((s) => Number(s.td[i]))) });
}), this.bodyCopy.forEach((r, i) => {
t.map((s) => {
const [e, m, f] = s;
r.td[e] = r.td[m] / f;
}), r.td.forEach((s, e) => {
this.dataset.header[e].type === this.constants.TEXT && this.dataset.header[e].isSearch && (r[e] = this.stringToNumber(s)), this.dataset.header[e].type === this.constants.DATE && (r[e] = new Date(s).getTime()), this.dataset.header[e].type === this.constants.NUMERIC && (r[e] = isNaN(Number(s)) ? e : s), this.tableBody[i][e] = r[e];
});
}), n(!0);
});
},
promiseWithAsyncFunction(n, t) {
return new Promise((r, i) => {
n().then((s) => {
try {
const e = t(s);
r(e);
} catch (e) {
i(e);
}
}).catch((s) => {
i(s);
});
});
},
resetDates(n) {
this.dates[n] = {
from: this.getDatesRange(n).from,
to: this.getDatesRange(n).to
}, this.filteredDatesIndexes[n] = !1, this.$forceUpdate(), this.filterBody();
},
resetFilter(n, t, r) {
const i = r.currentTarget;
clearTimeout(this.buttonTimeout), i.classList.add("clicked"), this.buttonTimeout = setTimeout(() => {
i.classList.remove("clicked");
}, 200), this.currentFilter = void 0, t.rangeFilter && (this.rangeFilters[n].min = this.immutableRangeFilters[n].min, this.rangeFilters[n].max = this.immutableRangeFilters[n].max), t.isMultiselect ? (this.multiselects[n] = this.getDropdownOptions(n), t.type === this.constants.TEXT && (this.sorts[n] = void 0), t.isSearch && (this.searches[n] = "")) : t.type === this.constants.NUMERIC ? this.sorts[n] = void 0 : t.type === this.constants.TEXT ? (this.sorts[n] = void 0, this.searches[n] = "") : t.type === this.constants.DATE && (this.sorts[n] = void 0), this.filterBody();
},
resetSelection() {
const n = document.getElementsByClassName(`tr_${this.uid}`);
Array.from(n).forEach((t) => {
Array.from(t.getElementsByTagName("td")).forEach((r) => {
r.dataset.row === "even" ? (r.style.background = this.FINAL_CONFIG.style.rows.even.backgroundColor, r.style.color = this.FINAL_CONFIG.style.rows.even.color) : (r.style.background = this.FINAL_CONFIG.style.rows.odd.backgroundColor, r.style.color = this.FINAL_CONFIG.style.rows.odd.color);
});
}), Array.from(n).forEach((t) => t.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(n) {
this.currentSelectionSpan.col !== n ? (this.visibleRows.forEach((t, r) => {
this.selectTd({
td: t.td[n],
rowIndex: r,
colIndex: n,
headerType: this.constants.NUMERIC,
event: {
currentTarget: document.getElementById(`cell_${r}_${n}_${this.uid}`)
}
});
}), this.selectedColumn = n) : (this.selectedColumn = void 0, this.resetSelection());
},
selectDropdownOption(n, t) {
this.multiselects[t].includes(n) ? this.multiselects[t] = this.multiselects[t].filter((r) => r !== n) : this.multiselects[t].push(n), this.$forceUpdate(), this.filterBody();
},
selectTd({ td: n, rowIndex: t, colIndex: r, headerType: i, event: s }) {
if (i !== this.constants.NUMERIC || isNaN(Number(n))) {
this.resetSelection();
return;
}
this.currentSelectionSpan.col !== r && this.resetSelection();
const e = s.currentTarget.parentNode;
this.currentSelectionSpan.col = r, this.currentSelectionSpan.rows.map((m) => m.index).includes(t) ? (e.dataset.selected = "false", this.currentSelectionSpan.rows = this.currentSelectionSpan.rows.filter((m) => m.index !== t), s.currentTarget.classList.remove(this.cssClass.CELL), Array.from(e.children).forEach((m, f) => {
m.dataset.row === "even" ? (m.style.background = this.FINAL_CONFIG.style.rows.even.backgroundColor, m.style.color = this.FINAL_CONFIG.style.rows.even.olor) : (m.style.background = this.FINAL_CONFIG.style.rows.odd.backgroundColor, m.style.color = this.FINAL_CONFIG.style.rows.odd.color);
}), s.currentTarget.dataset.row === "even" ? (s.currentTarget.style.background = this.FINAL_CONFIG.style.rows.even.backgroundColor, s.currentTarget.style.color = this.FINAL_CONFIG.style.rows.even.color) : (s.currentTarget.style.background = this.FINAL_CONFIG.style.rows.odd.backgroundColor, s.currentTarget.style.color = this.FINAL_CONFIG.style.rows.odd.color)) : (e.dataset.selected = "true", this.currentSelectionSpan.rows.push({
index: t,
value: n
}), Array.from(e.children).forEach((m, f) => {
m.dataset.row === "even" ? (m.style.background = this.FINAL_CONFIG.style.rows.even.selectedNeighbors.backgroundColor, m.style.color = this.FINAL_CONFIG.style.rows.even.selectedNeighbors.color) : (m.style.background = this.FINAL_CONFIG.style.rows.odd.selectedNeighbors.backgroundColor, m.style.color = this.FINAL_CONFIG.style.rows.odd.selectedNeighbors.color);
}), s.currentTarget.dataset.row === "odd" ? (s.currentTarget.style.background = this.FINAL_CONFIG.style.rows.odd.selectedCell.backgroundColor, s.currentTarget.style.color = this.FINAL_CONFIG.style.rows.odd.selectedCell.color) : (s.currentTarget.style.background = this.FINAL_CONFIG.style.rows.even.selectedCell.backgroundColor, s.currentTarget.style.color = this.FINAL_CONFIG.style.rows.even.selectedCell.color)), this.currentSelectionSpan.rows = this.currentSelectionSpan.rows.sort((m, f) => m.index - f.index), this.chart.type === this.constants.DONUT && this.currentSelectionSpan.rows.length > 0 && this.applyDonutOption();
},
setFilterDatesIndexes(n) {
this.filteredDatesIndexes[n] = !(this.getDatesRange(n).from === this.dates[n].from && this.getDatesRange(n).to === this.dates[n].to);
},
sortBody() {
this.resetSelection(), Object.keys(this.rangeFilters).forEach((n) => {
this.filterByRange(this.bodyCopy, n);
}), Object.keys(this.sorts).forEach((n) => {
this.sortByNumber(this.bodyCopy, n);
}), this.currentFilter !== void 0 && this.sortByNumber(this.bodyCopy, this.currentFilter), this.dataset.header.forEach((n, t) => {
if (n.isPercentage) {
const r = this.percentages[t].referenceIndex, i = this.bodyCopy.map((s) => s.td[r]).reduce((s, e) => s + e, 0);
this.bodyCopy.forEach((s) => {
s.td[t] = s.td[r] / i;
});
}
}), this.currentPage > this.pages.length - 1 && (this.currentPage = this.pages.length - 1), [-1].includes(this.currentPage) && (this.currentPage = 0), this.$forceUpdate();
},
filterByRange(n, t) {
this.bodyCopy = n.filter((r) => r.td[t] >= this.rangeFilters[t].min && r[t] <= this.rangeFilters[t].max);
},
sortByNumber(n, t) {
if (this.sorts[t] === this.constants.ASC && (n = n.sort((r, i) => r[t] - i[t])), this.sorts[t] === this.constants.DESC)
n = n.sort((r, i) => i[t] - r[t]);
else
return 0;
},
sortTh(n, t) {
this.currentFilter = n;
const r = t.currentTarget;
clearTimeout(this.buttonTimeout), r.classList.add("clicked"), this.buttonTimeout = setTimeout(() => {
r.classList.remove("clicked");
}, 200), this.sorts[n] === 1 ? this.sorts[n] = this.constants.DESC : this.sorts[n] = this.constants.ASC, this.sortBody();
},
stringToNumber(n) {
let t = 0;
for (let r = 0; r < n.length; r += 1)
t += n.charCodeAt(r);
return t;
},
toggleMultiselect(n, t, r) {
const i = r.currentTarget;
clearTimeout(this.buttonTimeout), i.classList.add("clicked"), this.buttonTimeout = setTimeout(() => {
i.classList.remove("clicked");
}, 200);
const s = document.getElementById(`th_dropdown_${n}`);
s.dataset.isOpen === "false" ? s.dataset.isOpen = "true" : s.dataset.isOpen = "false";
},
updateCurrentPage(n) {
this.resetSelection(), !n || !n.target.value ? this.currentPage = 0 : this.currentPage = Number(n.target.value), this.onPageChange();
},
// DONUTS
calcDonutMarkerConnectorColor(n) {
return n.proportion * 100 > 3 ? n.color : "transparent";
},
calcDonutMarkerLabelPositionX(n) {
return n.center.endX + this.calcMarkerOffset(n, 50);
},
calcMarkerOffset(n, t) {
return n.center.endX - t >= 0 ? 3 : -2;
},
displayArcPercentage(n, t) {
return isNaN(n.value / this.sumValues(t)) ? 0 : (n.value / this.sumValues(t) * 100).toFixed(0) + "%";
},
isArcBigEnough(n) {
return n.proportion * 100 > 3;
},
sumValues(n) {
return [...n].map((t) => t.value).reduce((t, r) => t + r, 0);
},
// CHART DRAGGING METHODS
closeDragElement() {
document.onmouseup = null, document.onmousemove = null;
},
dragMouseDown(n) {
n = n || window.event, n.preventDefault();
const r = this.$refs.chartModal.getBoundingClientRect();
this.dragOffsetX = n.clientX - r.left, this.dragOffsetY = n.clientY - r.top, this.modalWidth = r.width, this.modalHeight = r.height, document.onmouseup = this.closeDragElement, document.onmousemove = this.elementDrag;
},
elementDrag(n) {
if (this.rafId) return;
const r = this.$refs.chartModal.getBoundingClientRect();
this.clientX = n.clientX - this.dragOffsetX, this.clientY = n.clientY - this.dragOffsetY - 40, this.clientX < 0 && (this.clientX = 0), this.clientX + r.width > window.innerWidth && (this.clientX = window.innerWidth - r.width - 48), this.clientY < 0 && (this.clientY = 0), this.clientY + r.height > window.innerHeight && (this.clientY = window.innerHeight - r.height - 24);
}
}
}, z = () => {
ie((n) => ({
v19aea2e4: n.colorCancelInactive,
v191fad21: n.textColorCancelInactive,
v55eb90ad: n.colorCancelActiveLight,
fff8042e: n.colorCancelActive,
v3d2fda19: n.colorCancelActiveOutline,
v153aedf7: n.colorButtonSortActiveLight,
v8e240b42: n.colorButtonSortActive,
v4ef0df91: n.colorButtonSortActiveColorText,
v661d0ce3: n.colorButtonSortActiveOutline
}));
}, U = D.setup;
D.setup = U ? (n, t) => (z(), U(n, t)) : z;
const ue = ["innerHTML"], he = ["data-is-open"], de = { class: "vue-ui-table-export-hub-options" }, ge = { class: "vue-ui-table-export-hub-option-wrapper" }, me = { class: "label" }, ye = ["innerHTML"], be = { class: "vue-ui-table-export-hub-option-wrapper" }, fe = { class: "label" }, Ne = ["innerHTML"], Ce = { class: "vue-ui-table-dialog-field" }, pe = {
class: "label vue-ui-table-dialog-input-label",
style: { width: "100%" }
}, Ie = { style: { width: "fit-content" } }, Fe = { class: "vue-ui-table" }, ve = { key: 0 }, _e = { key: 0 }, we = { key: 1 }, ke = {
key: 0,
style: { display: "flex", "align-items": "center", "justify-content": "flex-end" }
}, Oe = ["innerHTML"], Le = {
key: 0,
style: { "margin-left": "3px" }
}, Se = { key: 0 }, Ae = { class: "th-filter" }, Me = {
key: 0,
class: "th-date"
}, Ge = { class: "date-wrapper--inputs" }, xe = { class: "date-fieldset" }, De = ["for"], Te = ["id", "onUpdate:modelValue", "onInput"], Be = { class: "date-fieldset" }, Ee = ["for"], Pe = ["id", "onUpdate:modelValue", "onInput"], He = { class: "date-wrapper--button" }, Re = ["onClick"], ze = ["innerHTML"], Ue = ["innerHTML"], Ve = ["innerHTML"], je = ["onClick", "disabled"], Xe = ["placeholder", "onUpdate:modelValue", "name"], Ye = ["onClick"], We = ["innerHTML"], Je = ["innerHTML"], Ke = ["innerHTML"], Ze = ["onClick", "innerHTML"], qe = ["innerHTML"], Qe = {
key: 5,
class: "th-range-filter"
}, $e = ["for"], et = ["id", "max", "min", "onUpdate:modelValue"], tt = ["id", "max", "min", "onUpdate:modelValue"], st = ["for"], nt = ["onClick", "disabled"], rt = ["id"], lt = ["onClick"], ot = ["onClick", "onKeyup"], at = ["innerHTML", "onClick", "onKeyup"], it = ["data-row"], ct = ["data-row"], ut = ["data-row", "onClick", "onKeyup", "id"], ht = ["innerHTML"], dt = { key: 1 }, gt = { key: 2 }, mt = { key: 5 }, yt = ["innerHTML"], bt = { key: 0 }, ft = { style: { "margin-left": "12px" } }, Nt = { class: "format-num" }, Ct = { style: { "margin-left": "12px" } }, pt = {
key: 0,
class: "format-num"
}, It = {
key: 1,
class: "format-num"
}, Ft = { key: 2 }, vt = { style: { "margin-left": "12px" } }, _t = {
key: 0,
class: "format-num"
}, wt = {
key: 1,
class: "format-num"
}, kt = { key: 2 }, Ot = {
key: 1,
class: "vue-ui-table-paginator format-num"
}, Lt = {
key: 2,
class: "vue-ui-table-size-warning"
}, St = ["innerHTML"], At = {
key: 4,
class: "vue-ui-table-pagination format-num"
}, Mt = ["innerHTML", "disabled"], Gt = ["disabled"], xt = {
key: 0,
class: "vue-ui-table-page-scroller-wrapper"
}, Dt = {
for: "pageScroller",
style: { "font-size": "14px" }
}, Tt = ["max", "value"], Bt = { key: 1 }, Et = ["disabled"], Pt = ["innerHTML", "disabled"], Ht = ["innerHTML"], Rt = { class: "chart-modal-options" }, zt = ["innerHTML"], Ut = ["innerHTML"], Vt = ["innerHTML"], jt = {
style: { width: "100%", height: "fit-content" },
ref: "chartModal"
}, Xt = { class: "vue-ui-table-fieldset" }, Yt = { class: "vue-ui-table-fieldset-wrapper" }, Wt = ["name", "id", "checked", "onInput"], Jt = ["for"], Kt = ["disabled"], Zt = ["innerHTML"], qt = { key: 0 }, Qt = { style: { width: "100%", "margin-bottom": "12px" } }, $t = {
key: 2,
style: { width: "100%", "margin-bottom": "32px" }
};
function es(n, t, r, i, s, e) {
const m = x("BaseIcon"), f = x("VueUiXy"), w = x("VueUiDonut");
return c(), u("div", {
class: "vue-data-ui-component vue-ui-table-main",
style: g(`font-family: ${e.FINAL_CONFIG.fontFamily}`)
}, [
e.FINAL_CONFIG.style.exportMenu.show ? (c(), u("div", {
key: 0,
class: "vue-ui-table-export-hub",
style: g({ top: i.exportButtonTop + "px" })
}, [
a("button", {
onClick: t[0] || (t[0] = (o) => s.isExportRequest = !s.isExportRequest),
innerHTML: e.icons.export,
style: g(`background:${e.FINAL_CONFIG.style.exportMenu.backgroundColor};color:${e.FINAL_CONFIG.style.exportMenu.color}`)
}, null, 12, ue),
a("div", {
class: "vue-ui-table-export-hub-dropdown",
"data-is-open": s.isExportRequest || "false",
style: g(`background:${e.FINAL_CONFIG.style.exportMenu.backgroundColor};color:${e.FINAL_CONFIG.style.exportMenu.color}`)
}, [
t[29] || (t[29] = a("b", { class: "vue-ui-table-export-hub-title" }, " Export ", -1)),
a("button", {
class: "close-dropdown",
onClick: t[1] || (t[1] = (o) => s.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", de, [
a("div", ge, [
a("div", me, h(e.FINAL_CONFIG.translations.exportAllLabel) + " (" + h(s.bodyCopy.length) + ") ", 1),
a("button", {
id: "exportAll",
onClick: t[2] || (t[2] = (o) => 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, ye),
a("span", null, h(e.FINAL_CONFIG.translations.exportAllButton), 1)
], 4)
]),
a("div", be, [
a("div", fe, h(e.FINAL_CONFIG.translations.exportPageLabel), 1),
a("button", {
id: "exportPage",
onClick: t[3] || (t[3] = (o) => 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, Ne),
a("span", null, h(e.FINAL_CONFIG.translations.exportPageButton), 1)
], 4)
]),
a("div", Ce, [
a("label", pe, [
a("span", Ie, h(e.FINAL_CONFIG.translations.filename), 1),
O(a("input", {
name: "filename",
ref: "filenameInputRef",
onKeydown: t[4] || (t[4] = L(S(() => {
}, ["stop"]), ["space"])),
pattern: ".*",
class: "vue-ui-table-dialog-input",
type: "text",
"onUpdate:modelValue": t[5] || (t[5] = (o) => s.filename = o)
}, null, 544), [
[A, s.filename]
])
]),
s.filename ? (c(), u("button", {
key: 0,
class: "vue-ui-table-dialog-field-button",
onClick: t[6] || (t[6] = (o) => s.filename = "")
}, [
P(m, {
name: "close",
stroke: e.FINAL_CONFIG.style.exportMenu.color,
size: 18
}, null, 8, ["stroke"])
])) : b("", !0)
])
])
], 12, he)
], 4)) : b("", !0),
a("div", {
class: "vue-ui-table__wrapper",
style: g(`max-height:${e.FINAL_CONFIG.maxHeight}px`),
ref: "tableWrapper"
}, [
a("table", Fe, [
e.FINAL_CONFIG.style.title.text ? (c(), u("caption", {
key: 0,
class: "vue-ui-table__caption",
ref: "tableCaption",
style: g({
textAlign: e.FINAL_CONFIG.style.title.textAlign,
paddingLeft: e.FINAL_CONFIG.style.title.paddingLeft + "px",
paddingRight: e.FINAL_CONFIG.style.title.paddingRight + "px",
backgroundColor: e.FINAL_CONFIG.style.title.backgroundColor,
boxShadow: `${e.FINAL_CONFIG.style.title.backgroundColor} -1px 0px 0px 0px`
})
}, [
a("span", {
style: g({
fontSize: e.FINAL_CONFIG.style.title.fontSize + "px",
fontWeight: e.FINAL_CONFIG.style.title.bold ? "bold" : "normal",
color: e.FINAL_CONFIG.style.title.color
})
}, h(e.FINAL_CONFIG.style.title.text), 5),
e.FINAL_CONFIG.style.title.subtitle.text ? (c(), u(C, { key: 0 }, [
t[30] || (t[30] = a("br", null, null, -1)),
a("span", {
style: g({
fontSize: e.FINAL_CONFIG.style.title.subtitle.fontSize,
fontWeight: e.FINAL_CONFIG.style.title.subtitle.bold ? "bold" : "normal",
color: e.FINAL_CONFIG.style.title.subtitle.color
})
}, h(e.FINAL_CONFIG.style.title.subtitle.text), 5)
], 64)) : b("", !0)
], 4)) : b("", !0),
a("thead", {
id: "tableHead",
class: "vue-ui-table__head",
style: g({
background: e.FINAL_CONFIG.style.th.backgroundColor,
boxShadow: `-1px 0 0 ${e.FINAL_CONFIG.style.th.backgroundColor}`,
top: i.exportButtonTop - 3 + "px"
})
}, [
a("tr", null, [
t[31] || (t[31] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), u(C, null, k(s.tableHead, (o, l) => (c(), u("th", {
key: `thead_${l}`,
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: p({ "th-has-nan": s.hasNaN[l] })
}, [
e.hasNumericTypes && ([s.constants.TEXT, s.constants.DATE].includes(o.type) || o.isPercentage) ? (c(), u("span", ve, [
_(h(o.name) + " ", 1),
o.isPercentage ? (c(), u("span", _e, " / " + h(o.percentageTo), 1)) : b("", !0)
])) : (c(), u("span", we, h(o.name), 1))
], 6))), 128))
]),
e.hasNumericTypes ? (c(), u(C, { key: 0 }, [
a("tr", null, [
t[32] || (t[32] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), u(C, null, k(s.tableHead, (o, l) => (c(), u("th", {
key: `thead_${l}`,
class: p({ "th-numeric": !0, "th-has-nan": s.hasNaN[l] }),
style: g(`background:${e.FINAL_CONFIG.style.th.backgroundColor};color:${e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`)
}, [
o.sum && !s.hasNaN[l] ? (c(), u("span", ke, [
a("span", {
innerHTML: e.icons.sum,
style: { "margin-bottom": "-4px", "margin-right": "3px" }
}, null, 8, Oe),
_(" " + h(e.dataLabel({
p: o.prefix,
v: Number(e.getSum(l)),
s: o.suffix,
r: o.decimals
})) + " ", 1),
s.percentages[l] && o.percentageTo && !o.isPercentage ? (c(), u("span", Le, " (" + h(isNaN(e.getSum(l) / e.getSum(s.percentages[l].referenceIndex)) ? "-" : e.dataLabel({
v: e.getSum(l) / e.getSum(s.percentages[l].referenceIndex) * 100,
s: "%",
r: o.decimals
})) + ") ", 1)) : b("", !0)
])) : b("", !0)
], 6))), 128))
]),
a("tr", null, [
t[33] || (t[33] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), u(C, null, k(s.tableHead, (o, l) => (c(), u("th", {
key: `thead_${l}`,
class: p({ "th-numeric": !0, "th-has-nan": s.hasNaN[l] }),
style: g(`background:${e.FINAL_CONFIG.style.th.backgroundColor};color:${e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`)
}, [
o.average && !s.hasNaN[l] ? (c(), u("span", Se, " ~ " + h(isNaN(e.getAverage(l)) ? "" : e.dataLabel({
p: o.prefix,
v: Number(e.getAverage(l)),
s: o.suffix,
r: o.decimals
})), 1)) : b("", !0)
], 6))), 128))
]),
a("tr", null, [
t[36] || (t[36] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), u(C, null, k(s.tableHead, (o, l) => (c(), u("th", {
key: `thead_${l}`,
class: p({ "th-has-nan": s.hasNaN[l] }),
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", Ae, [
o.type === s.constants.DATE && s.dates[l] ? (c(), u("div", Me, [
a("div", Ge, [
a("div", xe, [
a("label", {
for: `from_${l}`
}, h(e.FINAL_CONFIG.translations.from), 9, De),
O(a("input", {
id: `from_${l}`,
type: "date",
"onUpdate:modelValue": (d) => s.dates[l].from = d,
onInput: (d) => {
e.filterBody(), e.setFilterDatesIndexes(l);
},
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, Te), [
[A, s.dates[l].from]
])
]),
a("div", Be, [
a("label", {
for: `to_${l}`
}, h(e.FINAL_CONFIG.translations.to), 9, Ee),
O(a("input", {
id: `to_${l}`,
type: "date",
"onUpdate:modelValue": (d) => s.dates[l].to = d,
onInput: (d) => {
e.filterBody(), e.setFilterDatesIndexes(l);
},
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, Pe), [
[A, s.dates[l].to]
])
])
]),
a("div", He, [
o.isSort ? (c(), u("button", {
key: 0,
onClick: (d) => e.sortTh(l, d),
class: p({ "th-button-active": [s.constants.DESC, s.constants.ASC].includes(s.sorts[l]) }),
style: g(`background:${[s.constants.DESC, s.constants.ASC].includes(s.sorts[l]) ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${[s.constants.DESC, s.constants.ASC].includes(s.sorts[l]) ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.color}`)
}, [
s.sorts[l] === s.constants.ASC ? (c(), u("span", {
key: 0,
innerHTML: [s.constants.DATE].includes(o.type) ? e.icons.sort09 : e.icons.sortAZ
}, null, 8, ze)) : s.sorts[l] === s.constants.DESC ? (c(), u("span", {
key: 1,
innerHTML: [s.constants.DATE].includes(o.type) ? e.icons.sort90 : e.icons.sortZA
}, null, 8, Ue)) : (c(), u("span", {
key: 2,
innerHTML: e.icons.arrowSort
}, null, 8, Ve))
], 14, Re)) : b("", !0),
a("button", {
onClick: (d) => {
e.resetDates(l), e.resetFilter(l, o, d);
},
disabled: !s.filteredDatesIndexes[l] && e.isResetDisabled(l, o),
class: "th-reset"
}, " ✖ ", 8, je)
])
])) : b("", !0),
o.isSearch ? O((c(), u("input", {
key: 1,
placeholder: e.FINAL_CONFIG.translations.inputPlaceholder,
"onUpdate:modelValue": (d) => s.searches[l] = d,
onInput: t[7] || (t[7] = (d) => e.debounce(e.filterBody, 400)),
name: `search_${l}`,
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, Xe)), [
[A, s.searches[l]]
]) : b("", !0),
!s.hasNaN[l] && o.isSort && o.type !== s.constants.DATE ? (c(), u("button", {
key: 2,
onClick: (d) => e.sortTh(l, d),
class: p({ "th-button-active": [s.constants.DESC, s.constants.ASC].includes(s.sorts[l]) }),
style: g(`background:${[s.constants.DESC, s.constants.ASC].includes(s.sorts[l]) ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${[s.constants.DESC, s.constants.ASC].includes(s.sorts[l]) ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.color}`)
}, [
s.sorts[l] === s.constants.ASC ? (c(), u("span", {
key: 0,
innerHTML: [s.constants.NUMERIC].includes(o.type) ? e.icons.sort09 : e.icons.sortZA
}, null, 8, We)) : s.sorts[l] === s.constants.DESC ? (c(), u("span", {
key: 1,
innerHTML: [s.constants.NUMERIC].includes(o.type) ? e.icons.sort90 : e.icons.sortAZ
}, null, 8, Je)) : (c(), u("span", {
key: 2,
innerHTML: e.icons.arrowSort
}, null, 8, Ke))
], 14, Ye)) : b("", !0),
o.isMultiselect ? (c(), u("button", {
key: 3,
onClick: (d) => e.toggleMultiselect(l, o, d),
innerHTML: e.icons.filter,
class: p({ "th-button-active": s.multiselects[l] && s.multiselects[l].length !== e.getDropdownOptions(l).length }),
style: g(`background:${s.multiselects[l] && s.multiselects[l].length !== e.getDropdownOptions(l).length ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${s.multiselects[l] && s.multiselects[l].length !== e.getDropdownOptions(l).length ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.color}`)
}, null, 14, Ze)) : b("", !0),
s.currentSelectionSpan.col === l && e.canChart ? (c(), u("button", {
key: 4,
onClick: t[8] || (t[8] = (d) => s.showChart = !s.showChart),
innerHTML: e.icons.chart,
class: p({ "th-button-active": s.showChart }),
style: g(`background:${s.showChart ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.backgroundColor};color:${s.showChart ? "" : e.FINAL_CONFIG.style.th.buttons.filter.inactive.color}`)
}, null, 14, qe)) : b("", !0),
o.rangeFilter && s.rangeFilters[l] && !s.hasNaN[l] ? (c(), u("div", Qe, [
a("label", {
for: `rangeMin${l}`
}, [...t[34] || (t[34] = [
a("span", { style: { color: "grey" } }, "ᒥ", -1),
_(" min ", -1),
a("span", { style: { color: "grey" } }, "ᒣ", -1)
])], 8, $e),
O(a("input", {
type: "number",
id: `rangeMin${l}`,
max: s.immutableRangeFilters[l].max,
min: s.immutableRangeFilters[l].min,
"onUpdate:modelValue": (d) => s.rangeFilters[l].min = d,
onInput: t[9] || (t[9] = (d) => e.debounce(e.filterBody, 400)),
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, et), [
[
A,
s.rangeFilters[l].min,
void 0,
{ number: !0 }
]
]),
O(a("input", {
type: "number",
id: `rangeMax${l}`,
max: s.immutableRangeFilters[l].max,
min: s.immutableRangeFilters[l].min,
"onUpdate:modelValue": (d) => s.rangeFilters[l].max = d,
onInput: t[10] || (t[10] = (d) => e.debounce(e.filterBody, 400)),
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, tt), [
[
A,
s.rangeFilters[l].max,
void 0,
{ number: !0 }
]
]),
a("label", {
for: `rangeMax${l}`
}, [...t[35] || (t[35] = [
a("span", { style: { color: "grey" } }, "ᒪ", -1),
_(" max ", -1),
a("span", { style: { color: "grey" } }, "ᒧ", -1)
])], 8, st)
])) : b("", !0),
e.canResetColumn(l, o) ? (c(), u("button", {
key: 6,
onClick: (d) => e.resetFilter(l, o, d),
disabled: e.isResetDisabled(l, o),
class: "th-reset"
}, " ✖ ", 8, nt)) : b("", !0),
o.isMultiselect ? (c(), u("div", {
key: 7,
class: "th-dropdown",
"data-is-open": "false",
id: `th_dropdown_${l}`,
style: g(`background:${e.FINAL_CONFIG.style.dropdowns.backgroundColor};color:${e.FINAL_CONFIG.style.dropdowns.color}`)
}, [
a("button", {
class: "close-dropdown",
onClick: (d) => e.toggleMultiselect(l, o, d),
style: g(`background:${e.FINAL_CONFIG.style.closeButtons.backgroundColor};color:${e.FINAL_CONFIG.style.closeButtons.color}`)
}, " ✖ ", 12, lt),
(c(!0), u(C, null, k(e.getDropdownOptions(l), (d, y) => (c(), u("span", {
class: "th-option",
key: `th_option_${l}_${y}`,
onClick: (I) => e.selectDropdownOption(d, l),
onKeyup: [
L((I) => e.selectDropdownOption(d, l), ["enter"]),
L((I) => e.selectDropdownOption(d, l), ["space"])
],
style: g(`opacity:${e.isDropdownOptionSelected(d, l) ? 1 : 0.5}`),
tabindex: "0"
}, [
e.isDropdownOptionSelected(d, l) ? (c(), u("span", {
key: 0,
style: g(`color:${e.FINAL_CONFIG.style.dropdowns.icons.selected.color};margin-right:5px`),
class: "th-icon-green"
}, h(e.FINAL_CONFIG.style.dropdowns.icons.selected.unicode), 5)) : (c(), u("span", {
key: 1,
style: g(`color:${e.FINAL_CONFIG.style.dropdowns.icons.unselected.color};margin-right:5px`),
class: "th-icon-red"
}, h(e.FINAL_CONFIG.style.dropdowns.icons.unselected.unicode), 5)),
a("span", null, h(d), 1)
], 44, ot))), 128))
], 12, rt)) : b("", !0)
])
], 6))), 128))
])
], 64)) : b("", !0),
a("tr", null, [
t[37] || (t[37] = a("th", { class: "invisible-cell" }, null, -1)),
(c(!0), u(C, null, k(s.tableHead, (o, l) => (c(), u("th", {
key: `col_selector_${l}`,
class: p({ "vue-ui-table-col-selector": !s.hasNaN[l], "th-has-nan": s.hasNaN[l] }),
style: g(`background:${l === s.selectedColumn && !s.hasNaN[l] ? e.FINAL_CONFIG.style.th.selected.backgroundColor : e.FINAL_CONFIG.style.th.backgroundColor};color:${l === s.selectedColumn && !s.hasNaN[l] ? e.FINAL_CONFIG.style.th.selected.color : e.FINAL_CONFIG.style.th.color};outline:${e.FINAL_CONFIG.style.th.outline}`)
}, [
s.hasNaN[l] ? b("", !0) : (c(), u("div", {
key: 0,
innerHTML: s.tableHead[l].type === s.constants.NUMERIC ? e.icons.chevronDown : "",
class: p({ "col-selector": s.tableHead[l].type === s.constants.NUMERIC }),
tabindex: "0",
onClick: S((d) => e.selectColumn(l), ["stop"]),
onKeyup: L((d) => e.selectColumn(l), ["enter"])
}, null, 42, at))
], 6))), 128))
])
], 4),
a("tbody", {
onClick: t[11] || (t[11] = (...o) => e.closeAllDropdowns && e.closeAllDropdowns(...o)),
onKeydown: t[12] || (t[12] = (o) => e.navigateCell(o))
}, [
(c(!0), u(C, null, k(e.visibleRows, (o, l) => (c(), u("tr", {
key: `tbody_${l}`,
"data-row": l % 2 === 0 ? "odd" : "even",
class: p(`tr_${s.uid}`),
style: g(`${l % 2 === 0 ? `background:${e.FINAL_CONFIG.style.rows.odd.backgroundColor};color:${e.FINAL_CONFIG.style.rows.odd.color}` : `background:${e.FINAL_CONFIG.style.rows.even.backgroundColor};color:${e.FINAL_CONFIG.style.rows.even.color}`}`)
}, [
a("td", {
class: "vue-ui-table-td-iteration",
"data-row": l % 2 === 0 ? "odd" : "even",
style: g({
outline: e.FINAL_CONFIG.style.rows.outline
})
}, h(o.absoluteIndex + 1), 13, ct),
(c(!0), u(C, null, k(o.td, (d, y) => (c(), u("td", {
"data-row": l % 2 === 0 ? "odd" : "even",
key: `td_${l}_${y}`,
style: g(e.isNumeric(d) || r.dataset.header[y].type === s.constants.DATE ? `text-align:right;font-variant-numeric: tabular-nums;outline:${e.FINAL_CONFIG.style.rows.outline}` : `outline:${e.FINAL_CONFIG.style.rows.outline}`),
onClick: (I) => e.selectTd({
td: d,
rowIndex: l,
colIndex: y,
headerType: r.dataset.header[y].type,
event: I
}),
onKeyup: [
L((I) => e.selectTd({
td: d,
rowIndex: l,
colIndex: y,
headerType: r.dataset.header[y].type,
event: I
}), ["enter"]),
L((I) => e.selectTd({
td: d,
rowIndex: l,
colIndex: y,
headerType: r.dataset.header[y].type,
event: I
}), ["space"])
],
class: p({ "td-numeric": r.dataset.header[y].type === s.constants.NUMERIC, "td-focusable": !0, "td-has-nan": s.hasNaN[y] }),
id: `cell_${l}_${y}_${s.uid}`,
tabindex: "0"
}, [
o.meta && o.meta.markerIndices.includes(y) && o.meta.unicodeIcon ? (c(), u("span", {
key: 0,
style: g(`color:${o.meta.color};margin-right:3px`),
innerHTML: o.meta.unicodeIcon
}, null, 12, ht)) : b("", !0),
r.dataset.header[y].type === s.constants.DATE ? (c(), u("span", dt, h(r.dataset.header[y].prefix) + " " + h(new Date(d).toLocaleString().slice(0, 10)) + " " + h(r.dataset.header[y].suffix), 1)) : r.dataset.header[y].isPercentage ? (c(), u("span", gt, h(e.dataLabel({
v: Number(d * 100),
s: "%",
r: r.dataset.header[y].decimals
})), 1)) : s.percentages[y] && r.dataset.header[y].percentageTo && !r.dataset.header[y].isPercentage ? (c(), u("span", {
key: 3,
class: p({ "td-nan": isNaN(Number(d)) })
}, h(isNaN(Number(d)) ? `${d} is not ${s.constants.NUMERIC}` : e.dataLabel({
p: r.dataset.header[y].prefix,
v: Number(d),
s: r.dataset.header[y].suffix,
r: r.dataset.header[y].decimals
})) + " (" + h(isNaN(Number(d)) ? "" : e.dataLabel({
v: Number(d / e.getSum(s.percentages[y].referenceIndex) * 100),
s: "%",
r: r.dataset.header[y].decimals
})) + ") ", 3)) : r.dataset.header[y].type === s.constants.NUMERIC ? (c(), u("span", {
key: 4,
class: p({ "td-nan": isNaN(Number(d)) })
}, h(isNaN(Number(d)) ? `${d} is not ${s.constants.NUMERIC}` : e.dataLabel({
p: r.dataset.header[y].prefix,
v: Number(d.toFixed(r.dataset.header[y].decimals)),
s: r.dataset.header[y].suffix,
r: r.dataset.header[y].decimals
})), 3)) : (c(), u("span", mt, h(r.dataset.header[y].prefix) + " " + h(d) + " " + h(r.dataset.header[y].suffix), 1))
], 46, ut))), 128))
], 14, it))), 128))
], 32)
])
], 4),
a("div", {
class: p({ "td-selector-info": !0, "td-selector-info--active": s.currentSelectionSpan.col !== void 0 && s.currentSelectionSpan.rows.length }),
style: g(`background:${e.FINAL_CONFIG.style.infoBar.backgroundColor};color:${e.FINAL_CONFIG.style.infoBar.color}`)
}, [
s.currentSelectionSpan.col !== void 0 && s.currentSelectionSpan.rows.length ? (c(), u(C, { key: 0 }, [
a("div", {
innerHTML: e.icons.table,
class: "td-selector-icon"
}, null, 8, yt),
a("span", null, [
a("b", null, [
_(h(r.dataset.header[s.currentSelectionSpan.col].name) + " ", 1),
r.dataset.header[s.currentSelectionSpan.col].isPercentage ? (c(), u("span", bt, " / " + h(r.dataset.header[s.percentages[s.currentSelectionSpan.col].referenceIndex].name), 1)) : b("", !0)
]),
a("span", ft, [
_(h(e.FINAL_CONFIG.translations.nb) + " : ", 1),
a("b", Nt, h(s.currentSelectionSpan.rows.length), 1)
]),
a("span", Ct, [
_(h(e.FINAL_CONFIG.translations.sum) + " : ", 1),
r.dataset.header[s.currentSelectionSpan.col].isPercentage ? (c(), u("b", pt, h(e.selectedCellsCalculations.sumPercentage), 1)) : (c(), u("b", It, h(r.dataset.header[s.currentSelectionSpan.col].prefix) + " " + h(e.selectedCellsCalculations.sumRegular) + " " + h(r.dataset.header[s.currentSelectionSpan.col].suffix), 1)),
r.dataset.header[s.currentSelectionSpan.col].isPercentage ? (c(), u("b", Ft, "%")) : b("", !0)
]),
a("span", vt, [
_(h(e.FINAL_CONFIG.translations.average) + " : ", 1),
r.dataset.header[s.currentSelectionSpan.col].isPercentage ? (c(), u("b", _t, h(e.selectedCellsCalculations.averagePercentage), 1)) : (c(), u("b", wt, h(r.dataset.header[s.currentSelectionSpan.col].prefix) + " " + h(e.selectedCellsCalculations.averageRegular) + " " + h(r.dataset.header[s.currentSelectionSpan.col].suffix), 1)),
r.dataset.header[s.currentSelectionSpan.col].isPercentage ? (c(), u("b", kt, "%")) : b("", !0)
])
]),
a("button", {
onClick: t[13] || (t[13] = (...o) => e.resetSelection && e.resetSelection(...o)),
class: "td-selector-info-reset",
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)
], 64)) : b("", !0)
], 6),
s.bodyCopy.length > 10 ? (c(), u("div", Ot, [
_(h(e.FINAL_CONFIG.translations.totalRows) + " : " + h(r.dataset.body.length) + " | " + h(e.FINAL_CONFIG.translations.paginatorLabel) + " : ", 1),
s.bodyCopy.length > 10 ? O((c(), u("select", {
key: 0,
id: "paginatorSelector",
"onUpdate:modelValue": t[14] || (t[14] = (o) => s.itemsPerPage = o),
onChange: t[15] || (t[15] = (o) => {
e.resetSelection(), e.onPageChange();
}),
style: g(`background:${e.FINAL_CONFIG.style.inputs.backgroundColor};color:${e.FINAL_CONFIG.style.inputs.color};border:${e.FINAL_CONFIG.style.inputs.border}`)
}, [
(c(!0), u(C, null, k(s.paginatorOptions, (o, l) => (c(), u(C, null, [
s.bodyCopy.length > o || r.dataset.body.length === o ? (c(), u("option", {
key: `paginator_option_${l}`
}, h(o), 1)) : b("", !0)
], 64))), 256))
], 36)), [
[
H,
s.itemsPerPage,
void 0,
{ number: !0 }
]
]) : b("", !0)
])) : b("", !0),
s.itemsPerPage >= 250 ? (c(), u("div", Lt, [
a("span", {
innerHTML: e.icons.warning
}, null, 8, St),
_(h(e.FINAL_CONFIG.translations.sizeWarning), 1)
])) : b("", !0),
e.pages.length > 1 && e.pages.length <= 10 ? (c(), u("div", {
key: 3,
class: "vue-ui-table-navigation-indicator",
style: g(`background:${e.FINAL_CONFIG.style.pagination.navigationIndicator.backgroundColor};width:calc(${s.currentPage / (e.pages.length - 1) * 100}%)`)
}, null, 4)) : b("", !0),
e.pages.length > 1 ? (c(), u("div", At, [
a("button", {
class: "vue-ui-table-navigation",
onClick: t[16] || (t[16] = S((o) => e.navigate("previous"), ["stop"])),
innerHTML: e.icons.chevronLeft,
disabled: s.currentPage === 0,
style: g(`background:${e.FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${e.FINAL_CONFIG.style.pagination.buttons.color};opacity:${s.currentPage === 0 ? e.FINAL_CONFIG.style.pagination.buttons.opacityDisabled : 1}`)
}, null, 12, Mt),
e.pages.length > 3 ? (c(), u(C, { key: 0 }, [
a("button", {
class: "vue-ui-table-navigation",
onClick: t[17] || (t[17] = S((o) => e.navigate(1), ["stop"])),
disabled: s.currentPage === 0,
style: g(`background:${e.FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${e.FINAL_CONFIG.style.pagination.buttons.color};opacity:${s.currentPage === 0 ? e.FINAL_CONFIG.style.pagination.buttons.opacityDisabled : 1}`)
}, " 1 ", 12, Gt),
e.pages.length > 10 ? (c(), u("div", xt, [
a("label", Dt, h(e.FINAL_CONFIG.translations.page) + " " + h(s.currentPage + 1) + " / " + h(e.pages.length), 1),
a("input", {
class: "vue-ui-table-page-scroller",
id: "pageScroller",
type: "range",
step: "1",
min: 0,
max: e.pages.length - 1,
onInput: t[18] || (t[18] = (o) => e.updateCurrentPage(o)),
value: s.currentPage,
style: g(`background:${e.FINAL_CONFIG.style.inputs.backgroundColor};color:${e.FINAL_CONFIG.style.inputs.color};border:${e.FINAL_CONFIG.style.inputs.border};accent-color:${e.FINAL_CONFIG.style.inputs.accentColor}`)
}, null, 44, Tt)
])) : (c(), u("span", Bt, h(e.FINAL_CONFIG.translations.page) + " " + h(s.currentPage + 1) + " / " + h(e.pages.length), 1)),
a("button", {
class: "vue-ui-table-navigation",
onClick: t[19] || (t[19] = S((o) => e.navigate(e.pages.length), ["stop"])),
disabled: s.currentPage === e.pages.length - 1,
style: g(`background:${e.FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${e.FINAL_CONFIG.style.pagination.buttons.color};opacity:${s.currentPage === e.pages.length - 1 ? e.FINAL_CONFIG.style.pagination.buttons.opacityDisabled : 1}`)
}, h(e.pages.length), 13, Et)
], 64)) : (c(), u(C, { key: 1 }, [
_(h(e.FINAL_CONFIG.translations.page) + " " + h(s.currentPage + 1) + " / " + h(e.pages.length), 1)
], 64)),
a("button", {
class: "vue-ui-table-navigation",
onClick: t[20] || (t[20] = S((o) => e.navigate("next"), ["stop"])),
innerHTML: e.icons.chevronRight,
disabled: s.currentPage === e.pages.length - 1,
style: g(`background:${e.FINAL_CONFIG.style.pagination.buttons.backgroundColor};color:${e.FINAL_CONFIG.style.pagination.buttons.color};opacity:${s.currentPage === e.pages.length - 1 ? e.FINAL_CONFIG.style.pagination.buttons.opacityDisabled : 1}`)
}, null, 12, Pt)
])) : b("", !0),
s.showChart && e.canChart ? (c(), u("div", {
key: 5,
class: "vue-ui-table-chart-modal",
style: g(`width: ${s.modalWidth}px;top:${s.clientY}px; left:${s.clientX}px;background:${e.FINAL_CONFIG.style.chart.modal.backgroundColor};color:${e.FINAL_CONFIG.style.chart.modal.color}`)
}, [
a("div", {
class: "vue-ui-modal-drag-handle",
onMousedown: t[22] || (t[22] = (...o) => e.dragMouseDown && e.dragMouseDown(...o))
}, [
a("span", {
innerHTML: e.icons.grip
}, null, 8, Ht),
a("button", {
class: "close-chart-modal",
onClick: t[21] || (t[21] = (o) => s.showChart = !1)
}, "✖")
], 32),
a("button", {
style: g([{ "z-index": "1" }, `background:${e.FINAL_CONFIG.style.closeButtons.backgroundColor};color:${e.FINAL_CONFIG.style.closeButtons.color};border-radius:${e.FINAL_CONFIG.style.closeButtons.borderRadius}`]),
class: "close-chart-modal",
onClick: t[23] || (t[23] = (o) => s.showChart = !1)
}, " ✖ ", 4),
a("div", Rt, [
e.availableDonutCategories.length ? (c(), u("button", {
key: 0,
onClick: t[24] || (t[24] = (o) => s.showDonutOptions = !0),
innerHTML: e.icons.donut,
class: p({ "is-active-chart": s.chart.type === s.constants.DONUT || s.showDonutOptions }),
style: g(`background:${s.chart.type === s.constants.DONUT || s.showDonutOptions ? e.FINAL_CONFIG.style.chart.modal.buttons.selected.backgroundColor : e.FINAL_CONFIG.style.chart.modal.buttons.unselected.backgroundColor};color:${s.chart.type === s.constants.DONUT || s.showDonutOptions ? e.FINAL_CONFIG.style.chart.modal.buttons.selected.color : e.FINAL_CONFIG.style.chart.modal.buttons.unselected.color}`)
}, null, 14, zt)) : b("", !0),
a("button", {
onClick: t[25] || (t[25] = (o) => {
s.chart.type = s.constants.LINE, s.showDonutOptions = !1;
}),
innerHTML: e.icons.chart,
class: p({ "is-active-chart": s.chart.type === s.constants.LINE && !s.showDonutOptions }),
style: g(`background:${s.chart.type === s.constants.LINE && !s.showDonutOptions ? e.FINAL_CONFIG.style.chart.modal.buttons.selected.backgroundColor : e.FINAL_CONFIG.style.chart.modal.buttons.unselected.backgroundColor};color:${s.chart.type === s.constants.LINE && !s.showDonutOptions ? e.FINAL_CONFIG.style.chart.modal.buttons.selected.color : e.FINAL_CONFIG.style.chart.modal.buttons.unselected.color}`)
}, null, 14, Ut),
a("button", {
onClick: t[26] || (t[26] = (o) => {
s.chart.type = s.constants.BAR, s.showDonutOptions = !1;
}),
innerHTML: e.icons.bar,
class: p({ "is-active-chart": s.chart.type === s.constants.BAR && !s.showDonutOptions }),
style: g(`background:${s.chart.type === s.constants.BAR && !s.showDonutOptions ? e.FINAL_CONFIG.style.chart.modal.buttons.selected.backgroundColor : e.FINAL_CONFIG.style.chart.modal.buttons.unselected.backgroundColor};color:${s.chart.type === s.constants.BAR && !s.showDonutOptions ? e.FINAL_CONFIG.style.chart.modal.buttons.selected.color : e.FINAL_CONFIG.style.chart.modal.buttons.unselected.color}`)
}, null, 14, Vt)
]),
a("div", jt, [
s.showDonutOptions && e.availableDonutCategories.length ? (c(), u("div", {
key: 0,
style: g(`background:${e.FINAL_CONFIG.style.chart.modal.backgroundColor};color:${e.FINAL_CONFIG.style.chart.modal.color}`)
}, [
a("fieldset", Xt, [
a("legend", null, h(e.FINAL_CONFIG.translations.chooseCategoryColumn), 1),
a("div", Yt, [
(c(!0), u(C, null, k(e.availableDonutCategories, (o, l) => (c(), u("div", {
key: `donut_radio_${l}`,
class: "vue-ui-table-fieldset-option"
}, [
a("input", {
type: "radio",
name: o.name,
id: o.name,
checked: s.selectedDonutCategory && o.name === s.selectedDonutCategory.name,
onInput: (d) => s.selectedDonutCategory = e.availableDonutCategories[l],
style: g(`background:${e.FINAL_CONFIG.style.inputs.backgroundColor};color:${e.FINAL_CONFIG.style.inputs.color};border:${e.FINAL_CONFIG.style.inputs.border};accent-color:${e.FINAL_CONFIG.style.inputs.accentColor}`)
}, null, 44, Wt),
a("label", {
for: o.name
}, h(o.name), 9, Jt)
]))), 128))
]),
a("button", {
class: "vue-ui-table-generate-donut",
disabled: !s.selectedDonutCategory,
onClick: t[27] || (t[27] = (...o) => e.applyDonutOption && e.applyDonutOption(...o)),
style: g(`background:${e.FINAL_CONFIG.style.chart.modal.buttons.selected.backgroundColor};color:${e.FINAL_CONFIG.style.chart.modal.buttons.selected.color}`)
}, [
a("div", {
style: { "margin-bottom": "-3px" },
innerHTML: e.icons.donut
}, null, 8, Zt),
_(" " + h(e.FINAL_CONFIG.translations.makeDonut), 1)
], 12, Kt)
])
], 4)) : b("", !0),
[s.constants.BAR, s.constants.LINE].includes(s.chart.type) && !s.showDonutOptions ? (c(), u(C, { key: 1 }, [
e.chartTimeLabelOptions.length > 1 ? (c(), u("label", qt, [
_(h(e.FINAL_CONFIG.translations.xAxisLabels) + " ", 1),
O(a("select", {
"onUpdate:modelValue": t[28] || (t[28] = (o) => s.chartTimeLabelSourceModel = o)
}, [
(c(!0), u(C, null, k(e.chartTimeLabelOptions, (o) => (c(), u("option", null, h(o), 1))), 256))
], 512), [
[H, s.chartTimeLabelSourceModel]
])
])) : b("", !0),
a("div", Qt, [
s.chart.type === s.constants.LINE ? (c(), R(f, {
key: `chart_line_${s.chartStep}`,
dataset: e.chartData.xyDatasetLine,
config: e.chartData.xyConfig
}, null, 8, ["dataset", "config"])) : b("", !0),
s.chart.type === s.constants.BAR ? (c(), R(f, {
key: `chart_bar_${s.chartStep}`,
dataset: e.chartData.xyDatasetBar,
config: e.chartData.xyConfig
}, null, 8, ["dataset", "config"])) : b("", !0)
]),
s.currentSelectionSpan.rows.length >= 2 ? (c(), u("div", {
key: 1,
class: "chart-trend",
style: g(`color:${e.FINAL_CONFIG.style.chart.modal.color}`)
}, [
t[38] || (t[38] = a("span", null, "---", -1)),
_(" Trend: " + h(e.dataLabel({
v: e.chartData.progression.trend * 100,
s: "%",
r: 1
})), 1)
], 4)) : b("", !0)
], 64)) : b("", !0),
[s.constants.DONUT].includes(s.chart.type) && !s.showDonutOptions ? (c(), u("div", $t, [
P(w, {
dataset: s.currentDonut,
config: e.chartData.donutConfig
}, null, 8, ["dataset", "config"])
])) : b("", !0)
], 512)
], 4)) : b("", !0)
], 4);
}
const cs = /* @__PURE__ */ ce(D, [["render", es], ["__scopeId", "data-v-cba65e99"]]);
export {
cs as default
};