@senx/discovery-plugin-marauder
Version:
Discovery plugin - Marauder's map
285 lines (278 loc) • 19.7 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as commonjsGlobal, d as dayjs, b as duration, P as Param, L as Logger, U as Utils, 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);text-align:left;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}";
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.page = 0;
this.pages = [];
this.displayedValues = [];
this.sortAsc = true;
this.filters = {};
this.sortCol = -1;
this.debug = false;
this.divider = undefined;
this.data = undefined;
this.options = new Param();
this.params = [];
this.elemsCount = 15;
this.windowed = 5;
}
updateData() {
this.drawGridData();
}
componentWillLoad() {
this.LOG = new Logger(DiscoveryPageable, this.debug);
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;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['drawGridData', '_options'], this.options);
if (!this.data) {
return;
}
const options = Utils.mergeDeep(Object.assign(Object.assign({}, new Param()), { timeMode: 'date' }), this.options || {});
this.options = Object.assign({}, options);
this.pages = [];
for (let i = 0; i < (this.data.values || []).length / this.elemsCount; i++) {
this.pages.push(i);
}
this.elemsCount = this.options.elemsCount || this.elemsCount;
this.windowed = this.options.windowed || this.windowed;
const dataset = (this.data.values || [])
.map(row => row.map((v, i) => i === 0 ? this.formatDate(v) : this.formatValue(v)))
.filter(d => {
let found = Object.keys(this.filters).length === 0;
Object.keys(this.filters).forEach(k => found = found || d[k].display.toLowerCase().startsWith(this.filters[k].toLowerCase()));
return found;
});
if (this.sortCol >= 0) {
dataset.sort((a, b) => {
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.displayedValues = dataset.slice(Math.max(0, this.elemsCount * this.page), Math.min(this.elemsCount * (this.page + 1), (this.data.values || []).length));
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['drawGridData', 'data'], this.data, {
windowed: this.windowed,
elemsCount: this.elemsCount,
displayedValues: this.displayedValues,
});
}
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.options) === 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) {
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.options.timeZone, this.options.fullDateDisplay ? this.options.timeFormat : undefined)));
}
else {
res = '';
}
break;
case 'date':
if (res !== undefined && !isNaN(parseInt(res, 10))) {
const format = v.format || (this.options.fullDateDisplay ? this.options.timeFormat : undefined);
res = GTSLib.toISOString(parseInt(res, 10), this.divider, this.options.timeZone, format)
.replace('T', ' ')
.replace(/\+[0-9]{2}:[0-9]{2}$/gi, '');
}
else {
res = '';
}
break;
case 'duration':
const format = v.format || (this.options.fullDateDisplay ? this.options.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;
return h("div", { key: '62e3a468c1b89b5899ab7d5783ca8a9e05760313' }, h("div", { key: '761f65df3db93fa78a6302fbd94b0b0d1e8bea16', class: "heading", innerHTML: DiscoveryPageable.formatLabel(this.data.name) }), !!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.tabular) === null || _b === void 0 ? void 0 : _b.onTop) ? this.getPagination() : '', h("table", { key: '8d8876543d34e08de142e4ab413ef91a3a9c88d9', class: "sortable" }, h("thead", { key: '6586ba9a838b072912825e64c08c5ad807cc36ad' }, 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.options.tabular) === null || _a === void 0 ? void 0 : _a.fixedWidth) ? `${(100 / this.data.headers.length)}%` : 'auto'
} }, header);
})), h("thead", { key: 'fae22e293eeabe77877c768e4d698d1c638a4e41' }, ((_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.tabular) === null || _d === void 0 ? void 0 : _d.filterable) ? this.data.headers.map((header, i) => {
var _a;
return h("th", { "data-filter": i, style: {
width: ((_a = this.options.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: '5425bf5dd299255fb8b1abd89f5fa88ee8e2ff92' }, this.displayedValues.map((value, i) => h("tr", { class: i % 2 === 0 ? 'odd' : 'even', onClick: () => this.setSelected(value), onMouseOver: () => this.setOver(value), style: this.getRowStyle(i) }, value.map((v, j) => h("td", { style: this.getCellStyle(i, j) }, h("span", { innerHTML: v.display + (v.unit || '') }))))))), !((_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.tabular) === null || _f === void 0 ? void 0 : _f.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.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.options) === null || _a === void 0 ? void 0 : _a.tabular) === null || _b === void 0 ? void 0 : _b.sortable) {
c.push('pointer');
}
if (((_d = (_c = this.options) === 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.elemsCount < (this.data.values || []).length - 1 ?
h("div", { class: "next hoverable", onClick: () => this.next() }, ">") : ''));
}
static get watchers() { return {
"data": ["updateData"]
}; }
static get style() { return DiscoveryPageableStyle0; }
}, [1, "discovery-pageable", {
"debug": [4],
"divider": [2],
"data": [16],
"options": [1040],
"params": [1040],
"elemsCount": [1026, "elems-count"],
"windowed": [1026]
}, undefined, {
"data": ["updateData"]
}]);
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