@senx/discovery-widgets
Version:
Discovery Widgets Elements
351 lines (344 loc) • 24 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as commonjsGlobal, d as dayjs, f as duration, P as Param, U as Utils, L as Logger, G as GTSLib } from './utils.js';
var relativeTime$1 = {exports: {}};
(function (module, exports) {
!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
}(relativeTime$1));
const relativeTime = relativeTime$1.exports;
const discoveryPageableCss = "@charset \"UTF-8\";/*!\n * Copyright 2022-2023 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *//*!\n * Copyright 2022-2024 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *//*!\n * Copyright 2022 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *//*!\n * Copyright 2022-2024 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.gts-classname{font-size:var(--warp-view-font-size, 1rem);color:var(--gts-classname-font-color, #004eff)}.gts-labelname{font-size:var(--warp-view-font-size, 1rem);color:var(--gts-labelname-font-color, #19A979)}.gts-attrname{font-size:var(--warp-view-font-size, 1rem);color:var(--gts-attrname-font-color, #ED4A7B)}.gts-separator{font-size:var(--warp-view-font-size, 1rem);color:var(--gts-separator-font-color, #a0a0a0)}.gts-labelvalue{font-size:var(--warp-view-font-size, 1rem);color:var(--gts-labelvalue-font-color, #000000);font-style:italic}.gts-attrvalue{font-size:var(--warp-view-font-size, 1rem);color:var(--gts-attrvalue-font-color, #000000);font-style:italic}:host table{width:100%;color:var(--warp-view-font-color, #404040);table-layout:auto}:host table input[type=text].discovery-input{display:inline-block;font-size:var(--warp-view-input-font-size, 1rem);border-radius:var(--warp-view-input-border-radius, 0.25rem);border:1px solid var(--warp-view-input-border-color, #c0c0c0);color:var(--warp-view-input-label-color, #404040);background-color:var(--warp-view-input-bg-color, #ffffff);vertical-align:middle;width:calc(100% - var(--warp-view-datagrid-cell-padding, 5px));height:34px;padding:1px 5px;margin-left:calc(var(--warp-view-datagrid-cell-padding, 5px) * -1)}:host table th.pointer{cursor:pointer}:host table th.sortable.asc::after{content:\"▲\";margin-right:3px}:host table th.sortable.desc::after{margin-right:3px;content:\"▼\"}:host table td,:host table th{padding:var(--warp-view-datagrid-cell-padding, 5px);white-space:nowrap;font-size:var(--warp-view-font-size, 1rem)}:host table th:last-child{width:100% !important}:host table .odd{background-color:var(--warp-view-datagrid-odd-bg-color, #ffffff);color:var(--warp-view-datagrid-odd-color, #404040)}:host table .even{background-color:var(--warp-view-datagrid-even-bg-color, #c0c0c0);color:var(--warp-view-datagrid-even-color, #000000)}:host .center{text-align:center}:host .center .pagination{display:inline-block}:host .center .pagination .index,:host .center .pagination .next,:host .center .pagination .prev{color:var(--warp-view-font-color, #404040);float:left;padding:8px 16px;text-decoration:none;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;border:1px solid var(--warp-view-pagination-border-color, #c0c0c0);margin:0;cursor:pointer;background-color:var(--warp-view-pagination-bg-color, #ffffff)}:host .center .pagination .index.active,:host .center .pagination .next.active,:host .center .pagination .prev.active{background-color:var(--warp-view-pagination-active-bg-color, #4CAF50);color:var(--warp-view-pagination-active-color, #ffffff);border:1px solid var(--warp-view-pagination-active-border-color, #4CAF50)}:host .center .pagination .index.hoverable:hover,:host .center .pagination .next.hoverable:hover,:host .center .pagination .prev.hoverable:hover{background-color:var(--warp-view-pagination-hover-bg-color, #c0c0c0);color:var(--warp-view-pagination-hover-color, #000000);border:1px solid var(--warp-view-pagination-hover-border-color, #c0c0c0)}:host .center .pagination .index.disabled,:host .center .pagination .next.disabled,:host .center .pagination .prev.disabled{cursor:auto;color:var(--warp-view-pagination-disabled-color, #c0c0c0)}:host .round{border-radius:50%;background-color:#bbbbbb;display:inline-block;width:12px;height:12px;border:2px solid #454545}:host ul{list-style:none}:host .stickyHeader{position:-webkit-sticky;position:sticky;top:-10px;background-color:var(--warp-view-bg-color, #ffffff)}:host .nospace{border-spacing:0}";
const DiscoveryPageableStyle0 = discoveryPageableCss;
dayjs.extend(duration);
dayjs.extend(relativeTime);
const DiscoveryPageable = /*@__PURE__*/ proxyCustomElement(class DiscoveryPageable extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.dataPointOver = createEvent(this, "dataPointOver", 7);
this.dataPointSelected = createEvent(this, "dataPointSelected", 7);
this.debug = false;
this.options = Object.assign({}, new Param());
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({}, new Param()), 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({}, new Param()), 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: '541077fe07437b31afb24b19974537e38ea9dd29' }, h("div", { key: '985739fe6cff6ff15958e526d9444e0b0be94f2a', 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: 'a67022d1192962ca532cf8c5241c77f1006c90e6', class: ((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.tabular) === null || _d === void 0 ? void 0 : _d.stickyHeader) ? 'sortable nospace' : 'sortable', style: {
borderCollapse: 'collapse'
} }, h("thead", { key: '30bf6fcbbfef23b4747aef05e0595753d42df01c', 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: 'cb4fbdf4a4d4fd6a14b4e22b6dc7785ffe3dda18' }, this.data.headers.map((header, i) => {
var _a;
return h("th", { "data-sort": i, class: this.getClasses(i), onClick: () => this.sort(i), style: Object.assign(Object.assign({}, this.getHeaderStyle(i)), { width: ((_a = this.innerOptions.tabular) === null || _a === void 0 ? void 0 : _a.fixedWidth) ? `${(100 / this.data.headers.length)}%` : 'auto' }) }, header);
})), h("tr", { key: '6c4b102a0ea5fd4338326ecce62517855f7b3215' }, ((_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: Object.assign(Object.assign({}, this.getHeaderStyle(i)), { 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: '851a648c817e8950d00b3fca9b2dad3bed7a41f0' }, this.displayedValues.map((value, i) => {
var _a;
return h("tr", { class: ((_a = this.innerOptions.tabular) === null || _a === void 0 ? void 0 : _a.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;
styles.border = this.data.params[h].border;
styles.textAlign = this.data.params[h].cellAlign;
}
}
return styles;
}
getHeaderStyle(cell) {
const h = 'headers';
const styles = {};
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;
styles.border = this.data.params[h][cell].border;
styles.textAlign = this.data.params[h][cell].cellAlign;
}
}
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;
styles.border = this.filteredDataset[row][cell].border;
styles.textAlign = this.filteredDataset[row][cell].cellAlign;
}
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;
styles.border = this.data.params[h][cell].border;
styles.textAlign = this.data.params[h][cell].cellAlign;
}
}
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 + 1)
: '')) : '', 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 watchers() { return {
"data": ["updateData"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoveryPageableStyle0; }
}, [1, "discovery-pageable", {
"debug": [4],
"divider": [2],
"data": [16],
"options": [16],
"params": [1040],
"elemsCount": [1026, "elems-count"],
"windowed": [1026],
"innerOptions": [32],
"getData": [64]
}, undefined, {
"data": ["updateData"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-pageable"];
components.forEach(tagName => { switch (tagName) {
case "discovery-pageable":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryPageable);
}
break;
} });
}
export { DiscoveryPageable as D, defineCustomElement as d, relativeTime as r };
//# sourceMappingURL=discovery-pageable2.js.map