@senx/discovery-widgets
Version:
Discovery Widgets Elements
388 lines (384 loc) • 28.6 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { b as DataModel } from './types.js';
import { P as Param, G as GTSLib, U as Utils, L as Logger } from './utils.js';
import { C as ColorLib } from './color-lib.js';
import { d as domtoimage } from './dom-to-image.js';
import { d as defineCustomElement$1 } from './discovery-spinner2.js';
const discoveryLinearGaugeCss = "/*!\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 *//*!\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{width:100%;height:100%;position:relative}:host>div{width:100%;height:calc(100% - 10px);position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-direction:column;flex-direction:column}:host>div.vertical-wrapper{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}:host .wv-tooltip{position:absolute;width:auto;height:auto;display:none;border-style:solid;white-space:nowrap;z-index:9999999;-webkit-box-shadow:rgba(0, 0, 0, 0.2) 1px 2px 10px;box-shadow:rgba(0, 0, 0, 0.2) 1px 2px 10px;-webkit-transition:opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;transition:opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;transition:opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;transition:opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;background-color:rgba(255, 255, 255, 0.8);border-width:1px;border-radius:4px;color:rgb(102, 102, 102);font:14px/21px sans-serif;padding:10px;top:0;left:0;-webkit-transform:translate3d(30px, 10px, 0px);transform:translate3d(30px, 10px, 0px);border-color:rgb(255, 255, 255);pointer-events:none}:host .wv-tooltip .label{font-size:14px;color:#666;font-weight:400;margin-left:2px}:host .wv-tooltip .value{float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900}:host .wv-tooltip div{word-wrap:anywhere}:host .discovery-chart-spinner{position:absolute;top:0;left:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;z-index:900}:host .discovery-progress-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:start;height:auto;margin:10px}:host .discovery-progress-group p{margin-top:0}:host .discovery-progress-group .small{font-size:0.8em}:host .discovery-progress-group h3.discovery-legend{margin:0;text-align:center;color:var(--warp-view-font-color, #404040)}:host .discovery-progress-group .discovery-progress-container-horizontal{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:0.75rem;background-color:var(--warp-view-progress-bg-color, #e9ecef);border-radius:0.25rem;border:solid 1px var(--warp-view-chart-grid-color, #8e8e8e);height:var(--warp-view-progress-size, 1rem);width:100%}:host .discovery-progress-group .discovery-progress-container-vertical{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:0.75rem;background-color:var(--warp-view-progress-bg-color, #e9ecef);border-radius:0.25rem;border:solid 1px var(--warp-view-chart-grid-color, #8e8e8e);width:var(--warp-view-progress-size, 1rem);height:100%}:host .discovery-progress-group .discovery-progress{display:-ms-flexbox;display:flex;width:100%;height:100%;overflow:hidden}:host .discovery-progress-group .discovery-progress.positive{border-left:solid 1px var(--warp-view-chart-grid-color, #8e8e8e)}:host .discovery-progress-group .discovery-progress.negative{border-right:solid 1px var(--warp-view-chart-grid-color, #8e8e8e);-ms-flex-pack:end;justify-content:end}:host .discovery-progress-group .discovery-progress:hover{cursor:pointer}:host .discovery-progress-group .discovery-progress .ticks{position:absolute;bottom:0;left:0;width:100%;height:var(--warp-view-progress-size, 1rem);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:end;-ms-flex-pack:space-evenly;justify-content:space-evenly}:host .discovery-progress-group .discovery-progress .ticks .tick{width:1px;height:var(--warp-view-progress-size, 1rem);background-color:var(--warp-view-chart-grid-color, #8e8e8e)}:host .discovery-progress-group .discovery-progress .discovery-progress-bar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}:host .discovery-progress-group.discovery-progress-group-vertical{height:100%;-ms-flex-flow:column-reverse;flex-flow:column-reverse;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto}:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress{width:var(--warp-view-progress-size, 1rem);height:100%;-ms-flex-align:end;align-items:end;position:relative}:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress .ticks{height:100%;width:var(--warp-view-progress-size, 1rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;-ms-flex-pack:space-evenly;justify-content:space-evenly;bottom:unset;left:auto;right:auto;top:0}:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress .ticks .tick{height:1px;width:var(--warp-view-progress-size, 1rem)}:host .discovery-progress-group.discovery-progress-group-vertical .discovery-progress .discovery-progress-bar{-webkit-transition:height 0.6s ease;transition:height 0.6s ease}";
const DiscoveryLinearGaugeStyle0 = discoveryLinearGaugeCss;
const DiscoveryLinearGauge = /*@__PURE__*/ proxyCustomElement(class DiscoveryLinearGauge extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.dataPointOver = createEvent(this, "dataPointOver", 7);
this.options = new Param();
this.debug = false;
this.vars = '{}';
this.parsing = false;
this.rendering = false;
this.innerVars = {};
this.defOptions = new Param();
this.divider = 1000;
this.isVertical = true;
}
updateRes() {
var _a;
this.convert(GTSLib.getData(this.result) || new DataModel());
this.innerOptions.gauge = Object.assign({ horizontal: true }, this.innerOptions.gauge);
this.isVertical = !((_a = this.innerOptions.gauge) === null || _a === void 0 ? void 0 : _a.horizontal);
}
optionsUpdate(newValue, oldValue) {
var _a, _b, _c, _d;
(_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)) {
opts.gauge = Object.assign({ horizontal: true }, opts.gauge);
this.innerOptions = Object.assign({}, opts);
this.isVertical = !((_b = this.innerOptions.gauge) === null || _b === void 0 ? void 0 : _b.horizontal);
this.convert((_c = this.result) !== null && _c !== void 0 ? _c : new DataModel());
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue }, this.chartOpts);
}
}
varsUpdate(newValue, oldValue) {
var _a;
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
if (this.LOG) {
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['varsUpdate'], {
vars: this.vars,
newValue, oldValue,
});
}
}
discoveryEventHandler(event) {
const res = Utils.parseEventData(event.detail, this.options.eventHandler, this.el.id);
if (res.style) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), res.style));
}
if (res.vars) {
this.innerVars = Utils.clone(Object.assign(Object.assign({}, this.innerVars), res.vars));
}
}
async resize() {
const width = Utils.getContentBounds(this.el.parentElement).w - 4;
if (this.myChart && this.innerWidth !== width) {
this.innerWidth = width;
this.myChart.resize({ width, silent: true });
}
return Promise.resolve();
}
async show(regexp) {
this.myChart.dispatchAction({
type: 'legendSelect',
batch: this.myChart.getOption().series.map(s => ({ name: s.name })).filter(s => new RegExp(regexp).test(s.name)),
});
return Promise.resolve();
}
async hide(regexp) {
this.myChart.dispatchAction({
type: 'legendUnSelect',
batch: this.myChart.getOption().series.map(s => ({ name: s.name })).filter(s => new RegExp(regexp).test(s.name)),
});
return Promise.resolve();
}
async hideById(id) {
if (this.myChart) {
this.myChart.dispatchAction({
type: 'legendUnSelect',
batch: this.myChart.getOption().series
.filter((s, i) => new RegExp(id.toString()).test((s.id || i).toString())),
});
}
return Promise.resolve();
}
async showById(id) {
if (this.myChart) {
this.myChart.dispatchAction({
type: 'legendSelect',
batch: this.myChart.getOption().series
.filter((s, i) => new RegExp(id.toString()).test((s.id || i).toString())),
});
}
return Promise.resolve();
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a;
this.parsing = true;
this.LOG = new Logger(DiscoveryLinearGauge, this.debug);
this.innerVars = JSON.parse(this.vars);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
this.convert(GTSLib.getData(this.result) || new DataModel());
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
chartOpts: this.chartOpts,
});
}
convert(data) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
let options = Utils.mergeDeep(this.defOptions, this.innerOptions || {});
options = Utils.mergeDeep(options || {}, data.globalParams);
this.innerOptions = Object.assign({}, options);
this.divider = GTSLib.getDivider(this.innerOptions.timeUnit || 'us');
this.isVertical = !((_a = this.innerOptions.gauge) === null || _a === void 0 ? void 0 : _a.horizontal);
if (this.innerOptions.customStyles) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), (_b = this.innerOptions.customStyles) !== null && _b !== void 0 ? _b : {}));
}
// noinspection JSUnusedAssignment
let gtsList = [];
if (GTSLib.isArray(data.data)) {
data.data = GTSLib.flatDeep(data.data);
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['convert', 'isArray']);
if (data.data.length > 0 && GTSLib.isGts(data.data[0])) {
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['convert', 'isArray 2']);
gtsList = GTSLib.flattenGtsIdArray(data.data, 0).res;
}
else {
(_e = this.LOG) === null || _e === void 0 ? void 0 : _e.debug(['convert', 'isArray 3']);
gtsList = data.data;
}
}
else {
(_f = this.LOG) === null || _f === void 0 ? void 0 : _f.debug(['convert', 'not array']);
gtsList = [data.data];
}
gtsList = gtsList.filter(d => d !== '');
(_g = this.LOG) === null || _g === void 0 ? void 0 : _g.debug(['convert'], { options: this.innerOptions, gtsList });
const gtsCount = gtsList.length;
let overallMax = (_h = this.innerOptions.maxValue) !== null && _h !== void 0 ? _h : 0;
let overallMin = (_j = this.innerOptions.minValue) !== null && _j !== void 0 ? _j : 0;
const dataStruct = [];
const decimals = (_l = (_k = this.innerOptions.gauge) === null || _k === void 0 ? void 0 : _k.decimals) !== null && _l !== void 0 ? _l : this.innerOptions.decimals;
for (let i = 0; i < gtsCount; i++) {
const c = ColorLib.getColor(i, this.innerOptions.scheme);
const color = ((data.params || [])[i] || { datasetColor: c }).datasetColor || c;
const unit = ((data.params || [])[i] || {}).unit || this.innerOptions.unit || this.unit || '';
const gts = gtsList[i];
if (GTSLib.isGts(gts)) {
let max = Number.MIN_VALUE;
const values = (_m = gts.v) !== null && _m !== void 0 ? _m : [];
const val = (_o = values[values.length - 1]) !== null && _o !== void 0 ? _o : [];
let ts = 0;
let value = 0;
if (val.length > 0) {
value = val[val.length - 1];
ts = val[0];
}
if (!!data.params && !!data.params[i] && !!data.params[i].maxValue) {
max = data.params[i].maxValue;
}
else {
if (overallMax < value) {
overallMax = value;
}
}
let min = Number.MAX_VALUE;
if (!!data.params && !!data.params[i] && !!data.params[i].minValue) {
min = data.params[i].minValue;
}
else {
if (overallMin > value) {
overallMin = value;
}
}
if (decimals) {
value = GTSLib.roundValue(value, decimals);
max = GTSLib.roundValue(max, decimals);
min = GTSLib.roundValue(min, decimals);
}
dataStruct.push({
key: ((data.params || [])[i] || { key: undefined }).key || GTSLib.serializeGtsMetadata(gts),
value, max, min, color, ts, unit,
});
}
else {
// custom data format
let max = Number.MIN_VALUE;
if (!!data.params && !!data.params[i] && !!data.params[i].maxValue) {
max = data.params[i].maxValue;
}
else {
if (overallMax < gts.value || Number.MIN_VALUE) {
overallMax = gts.value || Number.MIN_VALUE;
}
}
let min = Number.MAX_VALUE;
if (!!data.params && !!data.params[i] && !!data.params[i].minValue) {
min = data.params[i].minValue;
}
else {
if (overallMin > gts.value || Number.MAX_VALUE) {
overallMin = gts.value || Number.MAX_VALUE;
}
}
let value = 0;
if (gts.hasOwnProperty('value')) {
value = (_p = gts.value) !== null && _p !== void 0 ? _p : 0;
}
else {
value = gts !== null && gts !== void 0 ? gts : 0;
}
if (decimals) {
value = GTSLib.roundValue(value, decimals);
max = GTSLib.roundValue(max, decimals);
min = GTSLib.roundValue(min, decimals);
}
dataStruct.push({ key: (_q = gts.key) !== null && _q !== void 0 ? _q : '', value, max, min, color, unit });
}
}
(_r = this.LOG) === null || _r === void 0 ? void 0 : _r.debug(['convert', 'dataStruct'], dataStruct);
if (decimals) {
overallMax = GTSLib.roundValue(overallMax, decimals);
overallMin = GTSLib.roundValue(overallMin, decimals);
}
dataStruct.forEach(d => {
d.max = Math.max(overallMax, d.max);
d.min = Math.min(overallMin, d.min);
if (d.max === Number.MIN_VALUE) {
d.max = d.value > 0 ? 100 : 0;
}
if (d.min === Number.MAX_VALUE) {
d.min = d.value < 0 ? -100 : 0;
}
if (d.value > 0) {
d.progress = d.value / d.max * 100.0;
}
else {
d.progress = d.value / d.min * -100.0;
}
});
this.dataStruct = dataStruct;
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
this.parsing = false;
this.rendering = true;
this.rendering = false;
setTimeout(() => this.draw.emit());
}
// noinspection JSUnusedLocalSymbols
async export(_type = 'png') {
var _a, _b, _c;
let bgColor = Utils.getCSSColor(this.el, '--warp-view-bg-color', 'transparent');
bgColor = (_b = ((_a = this.options) !== null && _a !== void 0 ? _a : { bgColor }).bgColor) !== null && _b !== void 0 ? _b : bgColor;
const res = this.result;
const dm = ((_c = (res !== null && res !== void 0 ? res : {
globalParams: Object.assign(Object.assign({}, new Param()), { bgColor }),
}).globalParams) !== null && _c !== void 0 ? _c : Object.assign(Object.assign({}, new Param()), { bgColor }));
bgColor = dm.bgColor || bgColor;
return await domtoimage.toPng(this.root, { height: this.height, width: this.width, bgcolor: bgColor });
}
setMousePosition(e) {
const r = this.el.getBoundingClientRect();
this.tooltip.style.top = `${e.clientY - r.y}px`;
this.tooltip.style.left = `${e.clientX - r.x}px`;
}
showTooltip(data) {
var _a;
this.tooltip.style.display = 'block';
this.tooltip.innerHTML = `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${data.ts ? (this.innerOptions.timeMode || 'date') === 'date'
? GTSLib.toISOString(GTSLib.toTimestamp(data.ts, 1, this.innerOptions.timeZone), this.divider, this.innerOptions.timeZone, this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined).replace('T', ' ').replace('Z', '')
: data.ts
: ''}</div>
<span class="label">${GTSLib.formatLabel(data.key)}</span>
<span class="value" style="margin-left: ${data.key || '' !== '' ? '20px' : '0'} ">${data.value}${(_a = data.unit) !== null && _a !== void 0 ? _a : ''}</span>`;
}
hideTooltip() {
this.tooltip.style.display = 'none';
}
generateStyle(innerStyle) {
return Object.keys(innerStyle || {}).map(k => k + ' { ' + innerStyle[k] + ' }').join('\n');
}
render() {
var _a, _b;
return [h("style", { key: '21693734b8c09ee2b8a7e3996dedd6f322633894' }, this.generateStyle(this.innerStyle)), h("div", { key: '9d8a62c803a88cac7f315e869298547a6a8886f2', ref: el => this.root = el, onMouseMove: e => this.setMousePosition(e), class: { 'vertical-wrapper': !((_a = this.innerOptions.gauge) === null || _a === void 0 ? void 0 : _a.horizontal) } }, h("div", { key: 'ac8b3e2aa8a9a7c93cdb9c1d9ce49f1e245e10db', class: "wv-tooltip", style: { display: 'none' }, ref: el => this.tooltip = el }), ((_b = this.dataStruct) !== null && _b !== void 0 ? _b : []).map(d => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
return h("div", { class: {
'discovery-progress-group': true,
'discovery-progress-group-vertical': this.isVertical,
} }, this.innerOptions.showLegend && !((_a = this.innerOptions.gauge) === null || _a === void 0 ? void 0 : _a.horizontal) ?
h("p", { class: "small", innerHTML: GTSLib.formatLabel(d.key) }) : '', h("h3", { class: "discovery-legend" }, (_b = d.value) !== null && _b !== void 0 ? _b : '0', d.unit, " ", !((_c = this.innerOptions.gauge) === null || _c === void 0 ? void 0 : _c.horizontal) ?
h("br", null) : '', h("span", { class: "small" }, "of ", d.value > 0 ? d.max : d.min, d.unit)), h("div", { class: {
'discovery-progress-container-horizontal': (_d = this.innerOptions.gauge) === null || _d === void 0 ? void 0 : _d.horizontal,
'discovery-progress-container-vertical': !((_e = this.innerOptions.gauge) === null || _e === void 0 ? void 0 : _e.horizontal),
} }, d.min < 0 ?
h("div", { class: "discovery-progress negative", onMouseOver: () => this.showTooltip(d), onMouseLeave: () => this.hideTooltip() }, h("div", { class: "ticks" }, Array((((_f = this.innerOptions.gauge) === null || _f === void 0 ? void 0 : _f.showTicks) ? 10 : 0)).fill(0).map(() => h("i", { class: "tick" }))), h("div", { class: "discovery-progress-bar", style: {
width: ((_g = this.innerOptions.gauge) === null || _g === void 0 ? void 0 : _g.horizontal) ? `${Math.abs(d.progress)}%` : 'var(--warp-view-progress-size, 1rem)',
height: !((_h = this.innerOptions.gauge) === null || _h === void 0 ? void 0 : _h.horizontal) ? `${Math.abs(d.progress)}%` : 'var(--warp-view-progress-size, 1rem)',
display: d.progress > 0 ? 'none' : 'block',
backgroundColor: d.color,
} }))
: '', d.max > 0 ?
h("div", { class: "discovery-progress positive", onMouseOver: () => this.showTooltip(d), onMouseLeave: () => this.hideTooltip() }, h("div", { class: "ticks" }, Array((((_j = this.innerOptions.gauge) === null || _j === void 0 ? void 0 : _j.showTicks) ? 10 : 0)).fill(0).map(() => h("i", { class: "tick" }))), h("div", { class: "discovery-progress-bar", style: {
width: ((_k = this.innerOptions.gauge) === null || _k === void 0 ? void 0 : _k.horizontal) ? `${Math.abs(d.progress)}%` : 'var(--warp-view-progress-size, 1rem)',
height: !((_l = this.innerOptions.gauge) === null || _l === void 0 ? void 0 : _l.horizontal) ? `${Math.abs(d.progress)}%` : 'var(--warp-view-progress-size, 1rem)',
backgroundColor: d.color,
display: d.progress < 0 ? 'none' : 'block',
} }))
: ''), this.innerOptions.showLegend && ((_m = this.innerOptions.gauge) === null || _m === void 0 ? void 0 : _m.horizontal) ?
h("p", { class: "small", innerHTML: GTSLib.formatLabel(d.key) }) : '');
}), this.parsing ? h("div", { class: "discovery-chart-spinner" }, h("discovery-spinner", null, "Parsing data...")) : '', this.rendering ? h("div", { class: "discovery-chart-spinner" }, h("discovery-spinner", null, "Rendering data...")) : '')];
}
get el() { return this; }
static get watchers() { return {
"result": ["updateRes"],
"options": ["optionsUpdate"],
"vars": ["varsUpdate"]
}; }
static get style() { return DiscoveryLinearGaugeStyle0; }
}, [1, "discovery-linear-gauge", {
"result": [1025],
"type": [1],
"options": [1],
"width": [2],
"height": [2],
"debug": [4],
"unit": [1],
"vars": [1],
"parsing": [32],
"rendering": [32],
"innerOptions": [32],
"innerStyle": [32],
"resize": [64],
"show": [64],
"hide": [64],
"hideById": [64],
"showById": [64],
"export": [64]
}, [[8, "discoveryEvent", "discoveryEventHandler"]], {
"result": ["updateRes"],
"options": ["optionsUpdate"],
"vars": ["varsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-linear-gauge", "discovery-spinner"];
components.forEach(tagName => { switch (tagName) {
case "discovery-linear-gauge":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryLinearGauge);
}
break;
case "discovery-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoveryLinearGauge as D, defineCustomElement as d };
//# sourceMappingURL=discovery-linear-gauge2.js.map