@senx/discovery-plugin-marauder
Version:
Discovery plugin - Marauder's map
437 lines (433 loc) • 18.7 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { a as DataModel } from './types.js';
import { P as Param, G as GTSLib, l as lodash, L as Logger, U as Utils } from './utils.js';
import { i as init } from './index3.js';
import { C as ColorLib } from './color-lib.js';
import { d as defineCustomElement$1 } from './discovery-spinner2.js';
const discoveryHeatmapCss = "/*!\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 .heatmap-wrapper{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:absolute;padding-right:20px}:host .wv-tooltip{max-width:300px}:host .wv-tooltip div{word-wrap:anywhere}";
const DiscoveryHeatmapStyle0 = discoveryHeatmapCss;
const DiscoveryHeatmap = /*@__PURE__*/ proxyCustomElement(class DiscoveryHeatmap 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.defOptions = Object.assign(Object.assign({}, new Param()), { timeMode: 'date' });
this.divider = 1000;
this.result = undefined;
this.type = undefined;
this.options = new Param();
this.width = undefined;
this.height = undefined;
this.debug = false;
this.unit = undefined;
this.parsing = false;
this.rendering = false;
this.innerOptions = undefined;
}
updateType(newValue, oldValue) {
if (newValue !== oldValue) {
this.chartOpts = this.convert(GTSLib.getData(this.result));
setTimeout(() => {
this.myChart.setOption(this.chartOpts || {}, true, false);
this.myChart.resize({ height: this.height });
this.setOpts(true);
});
}
}
updateRes() {
this.chartOpts = this.convert(GTSLib.getData(this.result));
setTimeout(() => {
this.myChart.setOption(this.chartOpts || {}, true, false);
this.myChart.resize({ height: this.height });
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 (!lodash.exports.isEqual(opts, this.innerOptions)) {
this.innerOptions = Object.assign({}, opts);
if (!!this.myChart) {
this.chartOpts = this.convert(this.result || new DataModel());
setTimeout(() => {
this.myChart.setOption(this.chartOpts || {}, true, false);
this.myChart.resize({ height: this.height });
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() {
if (this.myChart) {
this.myChart.resize();
}
return Promise.resolve();
}
async show(regexp) {
this.myChart.dispatchAction({
type: 'legendSelect',
batch: this.myChart.getOption().series.filter(s => new RegExp(regexp).test(GTSLib.getName(s.name)))
});
return Promise.resolve();
}
async hide(regexp) {
this.myChart.dispatchAction({
type: 'legendUnSelect',
batch: this.myChart.getOption().series.filter(s => new RegExp(regexp).test(GTSLib.getName(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();
}
componentWillLoad() {
var _a;
this.parsing = true;
this.LOG = new Logger(DiscoveryHeatmap, 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.divider = GTSLib.getDivider(this.innerOptions.timeUnit || 'us');
this.chartOpts = this.convert(this.result || new DataModel());
this.setOpts();
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
chartOpts: this.chartOpts
});
}
setOpts(notMerge = false) {
var _a;
if ((((_a = this.chartOpts) === null || _a === void 0 ? void 0 : _a.series) || []).length === 0) {
this.chartOpts.title = {
show: true,
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 20 },
text: this.innerOptions.noDataLabel || '',
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({}, this.chartOpts.title || {}), { show: false });
}
setTimeout(() => {
if (this.myChart) {
this.myChart.setOption(this.chartOpts || {}, notMerge, true);
}
});
}
convert(data) {
var _a, _b, _c, _d, _e, _f, _g, _h;
let options = Utils.mergeDeep(this.defOptions, this.innerOptions || {});
options = Utils.mergeDeep(options || {}, data.globalParams);
this.innerOptions = Object.assign({}, options);
let series = [];
let min = 0;
let max = 0;
let gtsList;
if (GTSLib.isArray(data.data)) {
data.data = GTSLib.flatDeep(data.data);
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['convert', 'isArray']);
if (data.data.length > 0 && GTSLib.isGts(data.data[0])) {
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['convert', 'isArray 2']);
gtsList = GTSLib.flattenGtsIdArray(data.data, 0).res;
}
else {
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['convert', 'isArray 3']);
gtsList = data.data;
}
}
else {
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['convert', 'not array']);
gtsList = [data.data];
}
(_e = this.LOG) === null || _e === void 0 ? void 0 : _e.debug(['convert'], { options: this.innerOptions, gtsList });
const isGtsToPlot = gtsList.some(g => GTSLib.isGtsToPlot(g));
const isGtsToAnnotate = gtsList.some(g => GTSLib.isGtsToAnnotate(g));
const isCustomData = gtsList.some(g => !!g.rows && !!g.columns);
let res;
if (isGtsToPlot) {
res = this.convertGtsToPlot(gtsList, data.params);
}
else if (isGtsToAnnotate) {
res = this.convertGtsToAnnotate(gtsList, data.params);
}
else if (isCustomData) {
this.innerOptions.timeMode = 'custom';
res = this.convertCustomData(gtsList);
}
if (!!res) {
series = res.series;
min = res.min;
max = res.max;
}
(_f = this.LOG) === null || _f === void 0 ? void 0 : _f.debug(['convert', 'series'], { series });
const hSeries = series.length > 0 ? [{
type: 'heatmap',
data: series,
progressive: 10000,
animation: false
}] : [];
return Object.assign({ grid: {
left: 10, top: 10, bottom: 10, right: 10,
containLabel: true
}, tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: this.innerOptions.tooltipDelay || 100,
formatter: (params) => {
var _a;
return `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${((_a = this.innerOptions.timeMode) !== null && _a !== void 0 ? _a : 'date') === 'date'
? GTSLib.toISOString(GTSLib.toTimestamp(params.value[0], this.divider, this.innerOptions.timeZone), this.divider, this.innerOptions.timeZone, this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined).replace('T', ' ').replace('Z', '')
: params.value[0]}</div>
${params.marker}
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${GTSLib.getName(params.value[1])}}</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">
${params.value[2]}</span>`;
}
}, toolbox: {
show: this.innerOptions.showControls,
feature: {
saveAsImage: { type: 'png', excludeComponents: ['toolbox'] }
}
}, legend: { bottom: 10, left: 'center', show: false }, visualMap: {
show: false,
min, max,
inRange: { color: ColorLib.getHeatMap(this.innerOptions.scheme) }
}, series: hSeries, xAxis: {
show: !this.innerOptions.hideXAxis,
type: 'category',
splitArea: { show: true },
axisLine: {
lineStyle: {
color: Utils.getGridColor(this.el)
}
},
axisLabel: {
color: Utils.getLabelColor(this.el),
formatter: value => this.innerOptions.timeMode === 'date'
? GTSLib.toISOString(GTSLib.zonedTimeToUtc(parseInt(value, 10), 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat)
.replace('T', '\n').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')
: value
},
axisTick: {
lineStyle: {
color: Utils.getGridColor(this.el)
}
}
}, yAxis: {
type: 'category',
splitArea: { show: true }
} }, ((_h = (_g = this.innerOptions) === null || _g === void 0 ? void 0 : _g.extra) === null || _h === void 0 ? void 0 : _h.chartOpts) || {});
}
async export(type = 'png') {
return Promise.resolve(this.myChart ? this.myChart.getDataURL({ type, excludeComponents: ['toolbox'] }) : undefined);
}
componentDidLoad() {
setTimeout(() => {
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());
initial = false;
}
});
this.myChart.on('mouseover', (event) => {
this.dataPointOver.emit({
date: event.value[0],
name: GTSLib.getName(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: GTSLib.getName(event.seriesName),
value: event.value[1],
meta: {}
});
});
this.myChart.setOption(this.chartOpts || {}, true, false);
initial = true;
});
}
convertGtsToPlot(gtsList, params) {
let series = [];
let min = Number.MAX_VALUE;
let max = Number.MIN_VALUE;
const gtsCount = gtsList.length;
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
if (GTSLib.isGtsToPlot(gts) && !!gts.v) {
for (const v of (gts.v || [])) {
const val = v[v.length - 1];
if (val < min) {
min = val;
}
if (val > max) {
max = val;
}
series.push([
(this.innerOptions.timeMode || 'date') === 'date'
? GTSLib.utcToZonedTime(v[0], this.divider, this.innerOptions.timeZone)
: v[0],
((params || [])[i] || { key: undefined }).key || GTSLib.serializeGtsMetadata(gts),
val
]);
}
}
}
series = series.sort((a, b) => a[0] - b[0]);
return { series, min, max };
}
convertGtsToAnnotate(gtsList, params) {
let series = [];
const min = 0;
const max = 1;
const gtsCount = gtsList.length;
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
if (GTSLib.isGtsToAnnotate(gts) && !!gts.v) {
for (const v of (gts.v || [])) {
let val = v[v.length - 1];
if (typeof val === 'boolean') {
val = val ? 1 : 0;
}
else {
val = 1;
}
series.push([
(this.innerOptions.timeMode || 'date') === 'date'
? GTSLib.utcToZonedTime(v[0], this.divider, this.innerOptions.timeZone)
: v[0],
((params || [])[i] || { key: undefined }).key || GTSLib.serializeGtsMetadata(gts),
val
]);
}
}
}
series = series.sort((a, b) => a[0] - b[0]);
return { series, min, max };
}
convertCustomData(gtsList) {
let series = [];
let min = 0;
let max = 1;
const gtsCount = gtsList.length;
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
if (!!gts.rows && !!gts.columns) {
gts.rows.forEach(r => {
const l = r.length;
for (let j = 1; j < l; j++) {
const val = r[j];
if (val < min) {
min = val;
}
if (val > max) {
max = val;
}
series.push([gts.columns[j - 1], r[0], val]);
}
});
}
}
series = series.sort((a, b) => a[0] - b[0]);
return { series, min, max };
}
render() {
return h("div", { key: '0aa66091eadb2247ebdc2f8da4bea9da4d71de56', class: "heatmap-wrapper" }, this.parsing ? h("discovery-spinner", null, "Parsing data...") : '', this.rendering ? h("discovery-spinner", null, "Rendering data...") : '', h("div", { key: '969bcc3fdbd60f8a646f5381a323a88f6d1e3360', ref: (el) => this.graph = el }));
}
get el() { return this; }
static get watchers() { return {
"type": ["updateType"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoveryHeatmapStyle0; }
}, [1, "discovery-heatmap", {
"result": [1],
"type": [1],
"options": [1],
"width": [2],
"height": [2],
"debug": [4],
"unit": [1],
"parsing": [32],
"rendering": [32],
"innerOptions": [32],
"resize": [64],
"show": [64],
"hide": [64],
"hideById": [64],
"showById": [64],
"export": [64]
}, undefined, {
"type": ["updateType"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-heatmap", "discovery-spinner"];
components.forEach(tagName => { switch (tagName) {
case "discovery-heatmap":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryHeatmap);
}
break;
case "discovery-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoveryHeatmap as D, defineCustomElement as d };
//# sourceMappingURL=discovery-heatmap2.js.map