@senx/discovery-widgets
Version:
Discovery Widgets Elements
391 lines (387 loc) • 17.8 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { b as DataModel } from './types.js';
import { P as Param, U as Utils, G as GTSLib, L as Logger, v as v4 } from './utils.js';
import { i as init } from './index2.js';
import { C as ColorLib } from './color-lib.js';
import { d as defineCustomElement$1 } from './discovery-spinner2.js';
const discoveryPieCss = "/*!\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 */:host>div{width:100%;height:100%}:host>div>div{width:100%;height:100%}:host .wv-tooltip{max-width:300px}:host .wv-tooltip div{word-wrap:anywhere}";
const DiscoveryPieStyle0 = discoveryPieCss;
const DiscoveryPieComponent = /*@__PURE__*/ proxyCustomElement(class DiscoveryPieComponent extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.dataPointOver = createEvent(this, "dataPointOver", 7);
this.dataPointSelected = createEvent(this, "dataPointSelected", 7);
this.discoveryEvent = createEvent(this, "discoveryEvent", 7);
this.execError = createEvent(this, "execError", 7);
this.options = new Param();
this.debug = false;
this.language = 'warpscript';
this.vars = '{}';
this.parsing = false;
this.rendering = false;
this.defOptions = new Param();
this.innerWidth = 0;
this.innerHeight = 0;
this.innerVars = {};
}
varsUpdate(newValue, oldValue) {
var _a;
let vars = this.vars;
if (!!this.vars && typeof this.vars === 'string') {
vars = JSON.parse(this.vars);
}
if (!Utils.deepEqual(vars, this.innerVars)) {
this.innerVars = Utils.clone(vars);
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['varsUpdate'], { vars: this.vars, newValue, oldValue });
}
updateType(newValue, oldValue) {
if (newValue !== oldValue) {
this.chartOpts = this.convert(GTSLib.getData(this.result));
this.setOpts(true);
}
}
updateRes() {
this.chartOpts = this.convert(GTSLib.getData(this.result));
this.setOpts(true);
}
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(opts);
if (this.myChart) {
this.chartOpts = this.convert(this.result || new DataModel());
this.setOpts(true);
}
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue }, this.chartOpts);
}
}
async resize() {
const dims = Utils.getContentBounds(this.el.parentElement);
const width = dims.w - 4;
const height = dims.h;
if (this.myChart && (this.innerWidth !== width || this.innerHeight !== dims.h)) {
this.innerWidth = width;
this.innerHeight = this.innerHeight !== dims.h ? height : this.innerHeight;
this.myChart.resize({ width: this.innerWidth, height: this.innerHeight, silent: true });
}
return Promise.resolve();
}
async show(regexp) {
this.myChart.dispatchAction({
type: 'legendSelect',
batch: this.myChart.getOption().series.filter(s => new RegExp(regexp).test(s.name)),
});
return Promise.resolve();
}
async hide(regexp) {
this.myChart.dispatchAction({
type: 'legendUnSelect',
batch: this.myChart.getOption().series.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, _b;
this.parsing = true;
this.LOG = new Logger(DiscoveryPieComponent, this.debug);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
this.result = GTSLib.getData(this.result);
this.chartOpts = this.convert((_a = this.result) !== null && _a !== void 0 ? _a : new DataModel());
this.setOpts();
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
});
}
setOpts(notMerge = false) {
var _a, _b, _c, _d;
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
else if (this.vars) {
this.innerVars = this.vars;
}
if (((_b = (_a = this.chartOpts) === null || _a === void 0 ? void 0 : _a.series) !== null && _b !== void 0 ? _b : []).length === 0) {
this.chartOpts.title = {
show: true,
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 20 },
text: (_c = this.innerOptions.noDataLabel) !== null && _c !== void 0 ? _c : '',
left: 'center',
top: 'center',
};
this.chartOpts.xAxis = { show: false };
this.chartOpts.yAxis = { show: false };
this.chartOpts.tooltip = { show: false };
}
else {
this.chartOpts.title = Object.assign(Object.assign({}, (_d = this.chartOpts.title) !== null && _d !== void 0 ? _d : {}), { show: false });
}
setTimeout(() => {
var _a;
if (this.myChart) {
this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, notMerge, true);
}
});
}
getCommonSeriesParam() {
return {
type: 'pie',
animation: true,
large: true,
clip: false,
radius: this.type === 'pie' ? '70%' : this.type === 'rose' ? ['30%', '90%'] : ['40%', '90%'],
roseType: this.type === 'rose' ? 'area' : undefined,
label: {
position: 'outer',
alignTo: 'labelLine',
color: Utils.getLabelColor(this.el),
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
};
}
getCommonDataParam(color) {
const datasetNoAlpha = this.innerOptions.datasetNoAlpha;
return {
lineStyle: { color },
labelLine: {
color: Utils.getGridColor(this.el),
},
itemStyle: {
opacity: 0.8,
borderColor: color,
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
],
global: false, // false by default
},
},
};
}
convert(data) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
let options = Utils.mergeDeep(this.defOptions, (_a = this.innerOptions) !== null && _a !== void 0 ? _a : {});
options = Utils.mergeDeep(options !== null && options !== void 0 ? options : {}, data.globalParams);
this.innerOptions = Object.assign({}, options);
const series = [];
let gtsList;
if (GTSLib.isArray(data.data)) {
data.data = GTSLib.flatDeep(data.data);
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['convert', 'isArray']);
if (data.data.length > 0 && GTSLib.isGts(data.data[0])) {
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['convert', 'isArray 2']);
gtsList = GTSLib.flattenGtsIdArray(data.data, 0).res;
}
else {
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['convert', 'isArray 3']);
gtsList = data.data;
}
}
else {
(_e = this.LOG) === null || _e === void 0 ? void 0 : _e.debug(['convert', 'not array']);
gtsList = [data.data];
}
(_f = this.LOG) === null || _f === void 0 ? void 0 : _f.debug(['convert'], { options: this.innerOptions, gtsList });
const gtsCount = gtsList.length;
const dataStruct = [];
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
const c = ColorLib.getColor((_g = gts.id) !== null && _g !== void 0 ? _g : i, this.innerOptions.scheme);
const color = (_k = (_j = ((_h = data.params) !== null && _h !== void 0 ? _h : [])[i]) === null || _j === void 0 ? void 0 : _j.datasetColor) !== null && _k !== void 0 ? _k : c;
if (GTSLib.isGtsToPlot(gts)) {
const values = ((_l = gts.v) !== null && _l !== void 0 ? _l : []);
const val = (_m = values[values.length - 1]) !== null && _m !== void 0 ? _m : [];
let value = 0;
if (val.length > 0) {
value = val[val.length - 1];
}
dataStruct.push(Object.assign(Object.assign({}, this.getCommonDataParam(color)), { id: gts.id, name: (_q = (_p = ((_o = data.params) !== null && _o !== void 0 ? _o : [])[i]) === null || _p === void 0 ? void 0 : _p.key) !== null && _q !== void 0 ? _q : GTSLib.serializeGtsMetadata(gts), value }));
}
else if (!GTSLib.isGts(gts)) {
if (gts.hasOwnProperty('key')) {
dataStruct.push(Object.assign(Object.assign({}, this.getCommonDataParam(color)), { name: (_r = gts.key) !== null && _r !== void 0 ? _r : '', value: (_s = gts.value) !== null && _s !== void 0 ? _s : Number.MIN_VALUE }));
}
else {
Object.keys(gts).forEach((k, j) => {
var _a, _b, _c;
const schemeColor = ColorLib.getColor(j, this.innerOptions.scheme);
const datasetColor = (_c = (_b = ((_a = data.params) !== null && _a !== void 0 ? _a : [])[i]) === null || _b === void 0 ? void 0 : _b.datasetColor) !== null && _c !== void 0 ? _c : schemeColor;
dataStruct.push(Object.assign(Object.assign({}, this.getCommonDataParam(datasetColor)), { name: k, value: gts[k] }));
});
}
}
}
if (dataStruct.length > 0) {
series.push(Object.assign(Object.assign({}, this.getCommonSeriesParam()), { data: dataStruct }));
}
(_t = this.LOG) === null || _t === void 0 ? void 0 : _t.debug(['convert', 'series'], series);
const opts = Object.assign({ grid: {
left: 0, top: 0, bottom: 0, right: 0,
containLabel: true,
}, tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' },
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: this.innerOptions.tooltipDelay !== undefined ? this.innerOptions.tooltipDelay : 100,
}, toolbox: {
show: this.innerOptions.showControls,
feature: {
saveAsImage: { type: 'png', excludeComponents: ['toolbox'] },
},
}, legend: {
bottom: 10,
left: 'center',
show: false,
}, series }, (_w = (_v = (_u = this.innerOptions) === null || _u === void 0 ? void 0 : _u.extra) === null || _v === void 0 ? void 0 : _v.chartOpts) !== null && _w !== void 0 ? _w : {});
((_x = this.innerOptions.actions) !== null && _x !== void 0 ? _x : []).forEach((action) => {
var _a, _b;
if (action.macro) {
opts.toolbox.feature['my' + v4().replaceAll('-', '')] = {
title: (_a = action.title) !== null && _a !== void 0 ? _a : '',
show: true,
icon: (_b = action.icon) !== null && _b !== void 0 ? _b : Utils.DEFICON,
onclick: () => Utils.execAction(action.macro, this),
};
}
});
return opts;
}
async export(type = 'png') {
return Promise.resolve(this.myChart ? this.myChart.getDataURL({
type,
excludeComponents: ['toolbox'],
}) : undefined);
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
setTimeout(() => {
var _a;
this.height = Utils.getContentBounds(this.el.parentElement).h - 30;
this.parsing = false;
this.rendering = true;
let initial = false;
this.myChart = init(this.graph, null, {
width: this.width,
height: this.height ? this.height - 10 : undefined,
});
this.myChart.on('rendered', () => {
this.rendering = false;
if (initial) {
setTimeout(() => {
this.draw.emit();
setTimeout(async () => await this.resize(), 200);
});
initial = false;
}
});
this.myChart.on('mouseover', (event) => {
this.dataPointOver.emit({ date: event.value[0], name: event.seriesName, value: event.value[1], meta: {} });
});
this.el.addEventListener('mouseout', () => this.dataPointOver.emit({}));
this.myChart.on('click', (event) => {
this.dataPointSelected.emit({ date: event.value[0], name: event.seriesName, value: event.value[1], meta: {} });
});
this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, true, false);
initial = true;
});
}
render() {
return h("div", { key: 'fcb08dbeb7dcd9b52c8ee78fb54f571f36bcfbe8', style: { width: '100%', height: '100%' } }, this.parsing ? h("discovery-spinner", null, "Parsing data...") : '', this.rendering ? h("discovery-spinner", null, "Rendering data...") : '', h("div", { key: '49c6ccca20f998b189dfa2be226430576ed5e5e8', ref: (el) => this.graph = el }));
}
get el() { return this; }
static get watchers() { return {
"vars": ["varsUpdate"],
"type": ["updateType"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoveryPieStyle0; }
}, [1, "discovery-pie", {
"result": [1],
"type": [1],
"options": [1],
"width": [2],
"height": [2],
"debug": [4],
"unit": [1],
"url": [1],
"language": [1],
"vars": [1],
"parsing": [32],
"rendering": [32],
"innerOptions": [32],
"resize": [64],
"show": [64],
"hide": [64],
"hideById": [64],
"showById": [64],
"export": [64]
}, undefined, {
"vars": ["varsUpdate"],
"type": ["updateType"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-pie", "discovery-spinner"];
components.forEach(tagName => { switch (tagName) {
case "discovery-pie":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryPieComponent);
}
break;
case "discovery-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoveryPieComponent as D, defineCustomElement as d };
//# sourceMappingURL=discovery-pie2.js.map