@senx/discovery-widgets
Version:
Discovery Widgets Elements
538 lines (537 loc) • 22.2 kB
JavaScript
/*
* Copyright 2022-2025 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h } from "@stencil/core";
import { Logger } from "../../../utils/logger";
import { Param } from "../../../model/param";
import { GTSLib } from "../../../utils/gts.lib";
import { Utils } from "../../../utils/utils";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import duration from "dayjs/plugin/duration";
dayjs.extend(duration);
dayjs.extend(relativeTime);
class Cell {
}
export class DiscoveryPageable {
constructor() {
this.debug = false;
this.options = Object.assign(Object.assign({}, new Param()), { tabular: { stripped: true } });
this.params = [];
this.elemsCount = 15;
this.windowed = 5;
this.page = 0;
this.pages = [];
this.displayedValues = [];
this.sortAsc = true;
this.filters = {};
this.sortCol = -1;
this.updateCounter = 0;
}
updateData() {
this.drawGridData();
}
optionsUpdate(newValue, oldValue) {
var _a, _b;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate'], newValue, oldValue);
let opts = newValue;
if (!!newValue && typeof newValue === 'string') {
opts = JSON.parse(newValue);
}
if (!Utils.deepEqual(opts, this.innerOptions)) {
this.innerOptions = Utils.clone(Object.assign(Object.assign(Object.assign({}, new Param()), { tabular: { stripped: true } }), opts));
this.drawGridData();
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue });
}
}
async getData() {
const dataset = [];
this.filteredDataset.forEach(row => {
const d = {};
this.data.headers.forEach((h, i) => { var _a, _b; return d[h] = (_b = (_a = row[i]) === null || _a === void 0 ? void 0 : _a.display) !== null && _b !== void 0 ? _b : ''; });
dataset.push(d);
});
return Promise.resolve({ data: dataset, headers: this.data.headers });
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
this.LOG = new Logger(DiscoveryPageable, this.debug);
this.innerOptions = Utils.clone(Object.assign(Object.assign(Object.assign({}, new Param()), { tabular: { stripped: true } }), this.options));
this.drawGridData();
}
goto(page) {
this.page = page;
this.drawGridData();
}
next() {
this.page = Math.min(this.page + 1, this.data.values.length - 1);
this.drawGridData();
}
prev() {
this.page = Math.max(this.page - 1, 0);
this.drawGridData();
}
drawGridData() {
var _a, _b, _c, _d, _e, _f, _g;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['drawGridData', '_options'], this.innerOptions);
if (!this.data) {
return;
}
const options = Utils.mergeDeep(Object.assign(Object.assign({}, new Param()), { timeMode: 'date' }), (_b = this.innerOptions) !== null && _b !== void 0 ? _b : {});
this.pages = [];
this.elemsCount = (_c = this.innerOptions.elemsCount) !== null && _c !== void 0 ? _c : this.elemsCount;
this.windowed = (_d = this.innerOptions.windowed) !== null && _d !== void 0 ? _d : this.windowed;
const dataset = ((_e = this.data.values) !== null && _e !== void 0 ? _e : [])
.map(row => row.map((v, i) => i === 0 ? this.formatDate(v) : this.formatValue(v)))
.filter(d => {
if (Object.keys(this.filters).length === 0) {
return true;
}
let found = true;
Object.keys(this.filters).forEach(k => { var _a; return found = found && ((_a = d[k]) === null || _a === void 0 ? void 0 : _a.display.toLowerCase().search(this.filters[k].toLowerCase())) >= 0; });
return found;
});
if (this.sortCol >= 0) {
dataset.sort((a, b) => {
if (a[this.sortCol] == null || b[this.sortCol] == null) {
return -1;
}
switch (a[this.sortCol].type) {
case 'string':
return this.sortAsc
? a[this.sortCol].display.localeCompare(b[this.sortCol].display)
: b[this.sortCol].display.localeCompare(a[this.sortCol].display);
default:
return this.sortAsc
? a[this.sortCol].value - b[this.sortCol].value
: b[this.sortCol].value - a[this.sortCol].value;
}
});
}
this.filteredDataset = Utils.clone(dataset);
for (let i = 0; i < dataset.length / this.elemsCount; i++) {
this.pages.push(i);
}
this.displayedValues = dataset.slice(Math.max(0, this.elemsCount * this.page), Math.min(this.elemsCount * (this.page + 1), ((_f = this.data.values) !== null && _f !== void 0 ? _f : []).length));
(_g = this.LOG) === null || _g === void 0 ? void 0 : _g.debug(['drawGridData', 'data'], this.data, {
windowed: this.windowed,
elemsCount: this.elemsCount,
displayedValues: this.displayedValues,
page: this.page,
pages: this.pages,
});
this.updateCounter++;
this.innerOptions = Utils.clone(Object.assign(Object.assign({}, options), { extra: this.updateCounter })); // cleaner way to force a render ?
}
static formatLabel(name) {
return GTSLib.formatLabel(name || ' ');
}
setSelected(value) {
this.dataPointSelected.emit({
date: this.data.isGTS ? value[0].value : undefined,
name: this.data.name,
value: value,
meta: { header: this.data.headers },
});
}
setOver(value) {
this.dataPointOver.emit({
date: this.data.isGTS ? value[0].value : undefined,
name: this.data.name,
value: value,
meta: { header: this.data.headers },
});
}
sort(header) {
var _a, _b;
if ((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.tabular) === null || _b === void 0 ? void 0 : _b.sortable) {
this.sortAsc = this.sortCol !== header ? true : !this.sortAsc;
this.sortCol = header;
this.drawGridData();
}
}
filter(i, e) {
if (e.srcElement.value !== '') {
this.filters[i] = e.srcElement.value;
}
else {
delete this.filters[i];
}
this.drawGridData();
}
formatDate(v) {
if (this.data.isGTS) {
return this.formatValue({ value: v, type: 'date' });
}
else {
return this.formatValue(v);
}
}
formatValue(v) {
var _a, _b;
if (typeof v !== 'object') {
v = {
value: v !== undefined ? v : '',
type: typeof v,
unit: '',
display: v.toString() || '',
};
}
else {
v = Object.assign({ type: 'string', unit: '' }, v);
}
let res = v.value !== undefined ? v.value : '';
switch (v.type) {
case 'elapsed':
if (res !== undefined && !isNaN(parseInt(res, 10))) {
res = dayjs().to(dayjs(GTSLib.toISOString(parseInt(res, 10), this.divider, this.innerOptions.timeZone, this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined)));
}
else {
res = '';
}
break;
case 'date':
if (res !== undefined && !isNaN(parseInt(res, 10))) {
const format = (_a = v.format) !== null && _a !== void 0 ? _a : (this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined);
res = GTSLib.toISOString(parseInt(res, 10), this.divider, this.innerOptions.timeZone, format)
.replace('T', ' ')
.replace(/\+[0-9]{2}:[0-9]{2}$/gi, '');
}
else {
res = '';
}
break;
case 'duration':
const format = (_b = v.format) !== null && _b !== void 0 ? _b : (this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined);
if (res !== undefined && !isNaN(parseInt(res, 10))) {
res = dayjs.duration(parseInt(res, 10) / this.divider).format(format);
}
else {
res = '';
}
break;
case 'string':
case 'number':
default:
res = res.toString();
}
v.display = res.toString();
return v;
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
return h("div", { key: '163ec608a62e4e44e31e11d55022336b8dbe19fd' }, h("div", { key: '6b124cefd8c26798824210c6fb18a972ca199290', class: "heading", innerHTML: DiscoveryPageable.formatLabel(this.data.name) }), ((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.tabular) === null || _b === void 0 ? void 0 : _b.onTop) ? this.getPagination() : '', h("table", { key: '4dd85cf520b99aea4bc3e4b1aa84ebbcb0fe4b58', class: ((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.tabular) === null || _d === void 0 ? void 0 : _d.stickyHeader) ? 'sortable nospace' : 'sortable' }, h("thead", { key: '181b6f7655315d747c1492c2ad6b56f3587bd794', class: ((_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.tabular) === null || _f === void 0 ? void 0 : _f.stickyHeader) ? 'stickyHeader' : '' }, h("tr", { key: 'b065c0dd34018f5a1a307b18988adcb7229f96f5' }, this.data.headers.map((header, i) => {
var _a;
return h("th", { "data-sort": i, class: this.getClasses(i), onClick: () => this.sort(i), style: {
width: ((_a = this.innerOptions.tabular) === null || _a === void 0 ? void 0 : _a.fixedWidth) ? `${(100 / this.data.headers.length)}%` : 'auto',
} }, header);
})), h("tr", { key: 'da07ab4a46046cb7c13dc1ad69c4111c6f04480c' }, ((_h = (_g = this.innerOptions) === null || _g === void 0 ? void 0 : _g.tabular) === null || _h === void 0 ? void 0 : _h.filterable) ? this.data.headers.map((_header, i) => {
var _a;
return h("th", { "data-filter": i, style: {
width: ((_a = this.innerOptions.tabular) === null || _a === void 0 ? void 0 : _a.fixedWidth) ? `${(100 / this.data.headers.length)}%` : 'auto',
} }, h("input", { type: "text", class: "discovery-input", onInput: e => this.filter(i, e) }));
})
: '')), h("tbody", { key: '4847fe5f751ad8aa14fd11bd58d081f85c88191a' }, this.displayedValues.map((value, i) => h("tr", { class: this.innerOptions.tabular.stripped ? (i % 2 === 0 ? 'odd' : 'even') : '', onClick: () => this.setSelected(value), onMouseOver: () => this.setOver(value), style: this.getRowStyle(i) }, value.map((v, j) => {
var _a;
return h("td", { style: this.getCellStyle(i, j) }, h("span", { innerHTML: v.display + ((_a = v.unit) !== null && _a !== void 0 ? _a : '') }));
}))))), !((_k = (_j = this.innerOptions) === null || _j === void 0 ? void 0 : _j.tabular) === null || _k === void 0 ? void 0 : _k.onTop) ? this.getPagination() : '');
}
getRowStyle(row) {
const h = this.data.values[row][0];
const styles = {};
if (this.data.params && this.data.params[h]) {
if (!GTSLib.isArray(this.data.params[h])) {
styles.backgroundColor = this.data.params[h].bgColor;
styles.color = this.data.params[h].fontColor;
}
}
return styles;
}
getCellStyle(row, cell) {
const h = this.data.values[row][0];
const styles = {};
if (this.filteredDataset[row][cell]) {
styles.backgroundColor = this.filteredDataset[row][cell].bgColor;
styles.color = this.filteredDataset[row][cell].fontColor;
}
if (this.data.params && this.data.params[h]) {
if (GTSLib.isArray(this.data.params[h]) && this.data.params[h][cell]) {
styles.backgroundColor = this.data.params[h][cell].bgColor;
styles.color = this.data.params[h][cell].fontColor;
}
}
return styles;
}
getClasses(i) {
var _a, _b, _c, _d;
const c = [];
if ((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.tabular) === null || _b === void 0 ? void 0 : _b.sortable) {
c.push('pointer');
}
if (((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.tabular) === null || _d === void 0 ? void 0 : _d.sortable) && this.sortCol === i) {
c.push('sortable');
if (this.sortAsc) {
c.push('asc');
}
else {
c.push('desc');
}
}
return c.join(' ');
}
getPagination() {
return h("div", { class: "center" }, h("div", { class: "pagination" }, this.page !== 0 ? h("div", { class: "prev hoverable", onClick: () => this.prev() }, "<") : '', this.page - this.windowed > 0 ? h("div", { class: "index disabled" }, "...") : '', this.pages.length > 1
? this.pages.map(c => h("span", null, c >= this.page - this.windowed && c <= this.page + this.windowed
? h("span", { class: { index: true, hoverable: this.page !== c, active: this.page === c }, onClick: () => this.goto(c) }, c)
: '')) : '', this.page + this.windowed < this.pages.length ? h("div", { class: "index disabled" }, "...") : '', this.page < this.pages.length - 1
? h("div", { class: "next hoverable", onClick: () => this.next() }, ">")
: ''));
}
static get is() { return "discovery-pageable"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-pageable.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-pageable.css"]
};
}
static get properties() {
return {
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"divider": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "divider",
"reflect": false
},
"data": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Dataset",
"resolved": "Dataset",
"references": {
"Dataset": {
"location": "import",
"path": "../../../model/types",
"id": "src/model/types.ts::Dataset"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Param",
"resolved": "Param",
"references": {
"Param": {
"location": "import",
"path": "../../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "{...new Param(), tabular: {stripped: true}}"
},
"params": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Param[]",
"resolved": "Param[]",
"references": {
"Param": {
"location": "import",
"path": "../../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"elemsCount": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "elems-count",
"reflect": false,
"defaultValue": "15"
},
"windowed": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "windowed",
"reflect": false,
"defaultValue": "5"
}
};
}
static get states() {
return {
"innerOptions": {}
};
}
static get events() {
return [{
"method": "dataPointOver",
"name": "dataPointOver",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "dataPointSelected",
"name": "dataPointSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"getData": {
"complexType": {
"signature": "() => Promise<{ data: any[]; headers: string[]; }>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<{ data: any[]; headers: string[]; }>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "data",
"methodName": "updateData"
}, {
"propName": "options",
"methodName": "optionsUpdate"
}];
}
}
//# sourceMappingURL=discovery-pageable.js.map