@senx/discovery-widgets
Version:
Discovery Widgets Elements
863 lines • 77.6 kB
JavaScript
/*
* Copyright 2022-2025 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h } from "@stencil/core";
import { DataModel } from "../../model/types";
import { Param } from "../../model/param";
import * as echarts from "echarts";
import { Logger } from "../../utils/logger";
import { GTSLib } from "../../utils/gts.lib";
import { Utils } from "../../utils/utils";
import { ColorLib } from "../../utils/color-lib";
import _ from "lodash";
import { v4 } from "uuid";
export class DiscoveryBarComponent {
constructor() {
this.options = Object.assign(Object.assign({}, new Param()), { timeMode: 'date' });
this.debug = false;
this.language = 'warpscript';
this.vars = '{}';
this.parsing = false;
this.rendering = false;
this.defOptions = Object.assign(Object.assign({}, new Param()), { timeMode: 'date' });
this.divider = 1000;
this.hasFocus = false;
this.isGTS = false;
this.pois = [];
this.innerWidth = 0;
this.innerHeight = 0;
this.zoomXInfo = {};
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 });
}
updateRes() {
this.chartOpts = this.convert(GTSLib.getData(this.result));
this.setOpts(true);
}
optionsUpdate(newValue, oldValue) {
var _a, _b, _c;
(_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((_b = this.result) !== null && _b !== void 0 ? _b : new DataModel());
this.setOpts(true);
}
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.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.el.parentElement.offsetTop : this.innerHeight;
this.myChart.resize({ width: this.innerWidth, height: this.innerHeight, silent: true });
}
return Promise.resolve();
}
async setZoom(dataZoom) {
var _a, _b, _c;
if (this.myChart) {
dataZoom.start = (_a = dataZoom.start) !== null && _a !== void 0 ? _a : 0;
if (((_b = this.zoom) === null || _b === void 0 ? void 0 : _b.start) !== dataZoom.start || ((_c = this.zoom) === null || _c === void 0 ? void 0 : _c.end) !== dataZoom.end) {
this.zoom = dataZoom;
this.myChart.dispatchAction(Object.assign(Object.assign({ type: 'dataZoom' }, dataZoom), { dataZoomIndex: 0 }));
}
}
return Promise.resolve();
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a, _b;
this.parsing = true;
this.LOG = new Logger(DiscoveryBarComponent, 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.options.timeUnit || 'us');
this.chartOpts = this.convert(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,
});
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['componentWillLoad'], this.el.parentElement.parentElement);
this.setOpts();
}
setOpts(notMerge = false) {
var _a, _b;
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
else if (this.vars) {
this.innerVars = this.vars;
}
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({}, (_b = this.chartOpts.title) !== null && _b !== void 0 ? _b : {}), { show: false });
}
setTimeout(() => {
var _a;
if (this.myChart) {
this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, notMerge, true);
if (this.zoomXInfo.start !== undefined) {
this.myChart.dispatchAction({
type: 'dataZoom', start: this.zoomXInfo.start,
end: this.zoomXInfo.end,
dataZoomIndex: 0,
});
}
}
});
}
getCommonSeriesParam(color, params) {
var _a, _b, _c, _d, _e, _f, _g;
const isHorizontal = !!this.innerOptions.bar && !!this.innerOptions.bar.horizontal;
const isStacked = (params === null || params === void 0 ? void 0 : params.stacked) !== undefined
? params === null || params === void 0 ? void 0 : params.stacked
: (_c = (_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.bar) === null || _b === void 0 ? void 0 : _b.stacked) !== null && _c !== void 0 ? _c : (_d = this.innerOptions) === null || _d === void 0 ? void 0 : _d.stacked;
const datasetNoAlpha = this.innerOptions.datasetNoAlpha;
const opts = {
stack: isStacked ? 'total' : undefined,
stackStrategy: isStacked ? 'all' : undefined,
animation: !!((_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.bar) === null || _f === void 0 ? void 0 : _f.animate),
large: true,
clip: false,
emphasis: {
itemStyle: {
opacity: 1,
borderColor: color,
color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.8),
},
},
blur: {
lineStyle: { color },
itemStyle: {
opacity: 0.8,
borderColor: color,
color: {
type: 'linear', x: isHorizontal ? 1 : 0, y: 0, x2: 0, y2: isHorizontal ? 0 : 1,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
],
},
},
},
label: {
show: !!this.innerOptions.showValues,
position: 'top',
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 14 },
},
lineStyle: { color },
itemStyle: {
opacity: 0.8,
borderColor: color,
color: {
type: 'linear', x: isHorizontal ? 1 : 0, y: 0, x2: 0, y2: isHorizontal ? 0 : 1,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
],
},
},
};
((_g = this.innerOptions.actions) !== null && _g !== void 0 ? _g : []).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;
}
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, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49;
let options = Utils.mergeDeep(this.defOptions, this.innerOptions || {});
options = Utils.mergeDeep(options || {}, data.globalParams);
this.innerOptions = Utils.clone(options);
const series = [];
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 gtsCount = gtsList.length;
let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER;
let hasTimeBounds = false;
const opts = Object.assign({ animation: !!((_g = (_f = this.innerOptions) === null || _f === void 0 ? void 0 : _f.bar) === null || _g === void 0 ? void 0 : _g.animate), grid: {
left: (!!this.innerOptions.leftMargin && this.innerOptions.leftMargin > this.leftMargin)
? this.innerOptions.leftMargin - this.leftMargin + 10
: 10,
top: !((_j = (_h = this.innerOptions) === null || _h === void 0 ? void 0 : _h.bar) === null || _j === void 0 ? void 0 : _j.horizontal) && !!(this.unit || this.innerOptions.unit) ? 30 : 10,
bottom: this.innerOptions.showLegend
? ((_l = (_k = this.innerOptions) === null || _k === void 0 ? void 0 : _k.bar) === null || _l === void 0 ? void 0 : _l.horizontal) && !!(this.unit || this.innerOptions.unit)
? 50
: 30
: ((_o = (_m = this.innerOptions) === null || _m === void 0 ? void 0 : _m.bar) === null || _o === void 0 ? void 0 : _o.horizontal) && !!(this.unit || this.innerOptions.unit)
? 20
: 10
+ (this.innerOptions.showRangeSelector ? 40 : 0),
right: 10,
containLabel: true,
}, visualMap: new Array(gtsCount), tooltip: {
trigger: (((_p = this.innerOptions.bar) === null || _p === void 0 ? void 0 : _p.groupedTooltip) || ((_q = this.innerOptions.bar) === null || _q === void 0 ? void 0 : _q.stacked)) ? 'axis' : 'item',
transitionDuration: 0,
axisPointer: { type: 'none' },
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: (_r = this.innerOptions.tooltipDelay) !== null && _r !== void 0 ? _r : 100,
formatter: (params) => {
var _a;
if (!GTSLib.isArray(params)) {
params = [params];
}
return `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${this.innerOptions.timeMode !== 'date'
? params[0].value[0]
: ((_a = GTSLib.toISOString(GTSLib.zonedTimeToUtc(params[0].value[0], 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined)) !== null && _a !== void 0 ? _a : '')
.replace('T', ' ').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')}</div>
${params.map((s) => `${s.marker} <span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${GTSLib.getName(s.seriesName)}</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${s.value[1]}</span>`).join('<br>')}`;
},
}, toolbox: {
show: typeof this.innerOptions.showControls === 'boolean'
? this.innerOptions.showControls
: ((_s = this.innerOptions.showControls.saveAsImage) !== null && _s !== void 0 ? _s : false) || ((_t = this.innerOptions.showControls.saveAsCSV) !== null && _t !== void 0 ? _t : false) || ((_u = this.innerOptions.showControls.restore) !== null && _u !== void 0 ? _u : false) || (typeof this.innerOptions.showControls.dataView === 'boolean' ? this.innerOptions.showControls.dataView : (_w = (_v = this.innerOptions.showControls.dataView) === null || _v === void 0 ? void 0 : _v.show) !== null && _w !== void 0 ? _w : false),
feature: {
saveAsImage: {
type: 'png',
excludeComponents: ['toolbox'],
show: typeof this.innerOptions.showControls === 'boolean'
? this.innerOptions.showControls
: (_x = this.innerOptions.showControls.saveAsImage) !== null && _x !== void 0 ? _x : false
},
myCsvExport: {
name: 'myCsvExport',
show: typeof this.innerOptions.showControls === 'boolean'
? this.innerOptions.showControls
: (_y = this.innerOptions.showControls.saveAsCSV) !== null && _y !== void 0 ? _y : false,
title: 'Export CSV',
icon: 'path://M15.29 1H3v11h1V2h10v6h6v14H4v-3H3v4h18V6.709zM20 7h-5V2h.2L20 6.8zm-4.96 11l2.126-5H16.08l-1.568 3.688L12.966 13h-1.084l2.095 5zM7 14.349v.302A1.35 1.35 0 0 0 8.349 16H9.65a.349.349 0 0 1 .349.349v.302A.349.349 0 0 1 9.65 17H7v1h2.651A1.35 1.35 0 0 0 11 16.651v-.302A1.35 1.35 0 0 0 9.651 15H8.35a.349.349 0 0 1-.35-.349v-.302A.349.349 0 0 1 8.349 14H11v-1H8.349A1.35 1.35 0 0 0 7 14.349zm-5 .692v.918A2.044 2.044 0 0 0 4.041 18H6v-1H4.041A1.042 1.042 0 0 1 3 15.959v-.918A1.042 1.042 0 0 1 4.041 14H6v-1H4.041A2.044 2.044 0 0 0 2 15.041z',
iconStyle: {
borderWidth: 0.5
},
onclick: () => {
const csv = this.dataToCSV(data);
const blob = new Blob([csv], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = (this.innerOptions.title ? this.innerOptions.title : 'export') + '.csv';
a.click();
window.URL.revokeObjectURL(url);
}
},
restore: {
show: typeof this.innerOptions.showControls === 'boolean'
? this.innerOptions.showControls
: (_z = this.innerOptions.showControls.restore) !== null && _z !== void 0 ? _z : false
},
dataView: {
show: typeof this.innerOptions.showControls === 'boolean'
? this.innerOptions.showControls
: typeof this.innerOptions.showControls.dataView === 'boolean'
? this.innerOptions.showControls.dataView
: (_1 = (_0 = this.innerOptions.showControls.dataView) === null || _0 === void 0 ? void 0 : _0.show) !== null && _1 !== void 0 ? _1 : false,
lang: typeof this.innerOptions.showControls === 'object' && typeof this.innerOptions.showControls.dataView === 'object' && ((_2 = this.innerOptions.showControls.dataView) === null || _2 === void 0 ? void 0 : _2.lang)
? this.innerOptions.showControls.dataView.lang
: ['Data view', 'Close', 'Refresh'],
optionToContent: () => this.dataToHTMLTable(data),
textColor: Utils.getCSSColor(this.el, '--warp-view-data-view-text-color', 'white'),
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-data-view-bg-color', 'white'),
buttonColor: Utils.getCSSColor(this.el, '--warp-view-button-bg-color', '#004eff'),
buttonTextColor: Utils.getCSSColor(this.el, '--warp-view-button-label-color', '#ffffff'),
readOnly: true
}
},
}, legend: {
bottom: 0, left: 'center', show: !!this.innerOptions.showLegend, height: 30, type: 'scroll',
textStyle: { color: Utils.getLabelColor(this.el) },
formatter: n => GTSLib.getName(n),
}, dataZoom: [
{
type: 'slider',
height: '20px',
show: !!this.innerOptions.showRangeSelector,
bottom: this.innerOptions.showLegend ? 30 : 20,
},
{
type: 'inside',
orient: 'vertical',
zoomOnMouseWheel: 'ctrl',
},
{
type: 'inside',
orient: 'horizontal',
zoomOnMouseWheel: true,
},
], series: [] }, ((_4 = (_3 = this.innerOptions) === null || _3 === void 0 ? void 0 : _3.extra) === null || _4 === void 0 ? void 0 : _4.chartOpts) || {});
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
const c = ColorLib.getColor((_5 = gts.id) !== null && _5 !== void 0 ? _5 : i, this.innerOptions.scheme);
let color = (_8 = (_7 = ((_6 = data.params) !== null && _6 !== void 0 ? _6 : [])[i]) === null || _7 === void 0 ? void 0 : _7.datasetColor) !== null && _8 !== void 0 ? _8 : c;
if (!!data.params && !!data.params[i] && (data.params[i].pieces || []).length > 0) {
opts.visualMap[i] = {
show: false,
seriesIndex: i,
borderColor: color,
dimension: data.params[i].xpieces
? !((_9 = this.innerOptions.bar) === null || _9 === void 0 ? void 0 : _9.horizontal) ? 0 : 1
: !((_10 = this.innerOptions.bar) === null || _10 === void 0 ? void 0 : _10.horizontal) ? 1 : 0,
pieces: data.params[gts.id].pieces.map(p => { var _a; return ({ color: (_a = p.color) !== null && _a !== void 0 ? _a : '#D81B60', lte: p.lte, gte: p.gte }); }),
outOfRange: { color },
};
}
if (GTSLib.isGtsToPlot(gts) && !!gts.v) {
this.isGTS = true;
min = Math.min(min, ...gts.v.map(v => v[0]));
max = Math.max(max, ...gts.v.map(v => v[0]));
hasTimeBounds = true;
let type = (_13 = (_12 = ((_11 = data.params) !== null && _11 !== void 0 ? _11 : [])[i]) === null || _12 === void 0 ? void 0 : _12.type) !== null && _13 !== void 0 ? _13 : 'bar';
const datasetNoAlpha = (_16 = (_15 = ((_14 = data.params) !== null && _14 !== void 0 ? _14 : [])[i]) === null || _15 === void 0 ? void 0 : _15.datasetNoAlpha) !== null && _16 !== void 0 ? _16 : this.innerOptions.datasetNoAlpha;
let areaStyle;
if (type === 'area') {
type = 'line';
areaStyle = {
opacity: 0.8,
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.1) },
],
global: false, // false by default
},
};
}
opts.series.push(Object.assign(Object.assign({}, this.getCommonSeriesParam(color, ((_17 = data.params) !== null && _17 !== void 0 ? _17 : [])[i])), { id: gts.id, type, areaStyle, name: GTSLib.setName(gts.id, ((_19 = (((_18 = data.params) !== null && _18 !== void 0 ? _18 : [])[i] || { key: undefined }).key) !== null && _19 !== void 0 ? _19 : GTSLib.serializeGtsMetadata(gts))), data: gts.v
.sort((a, b) => a[0] < b[0] ? -1 : 1)
.map((d) => {
var _a;
const ts = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(d[0], this.divider, this.innerOptions.timeZone)
: d[0];
if ((_a = this.innerOptions.bar) === null || _a === void 0 ? void 0 : _a.horizontal) {
return [d[d.length - 1], ts];
}
else {
return [ts, d[d.length - 1]];
}
}) }));
}
else if (!gts.v) {
this.innerOptions.timeMode = 'custom';
(_20 = this.LOG) === null || _20 === void 0 ? void 0 : _20.debug(['convert', 'gts'], gts);
((_21 = gts.columns) !== null && _21 !== void 0 ? _21 : []).forEach((label, index) => {
var _a, _b, _c, _d, _e, _f;
const datasetNoAlpha = (_c = (_b = ((_a = data.params) !== null && _a !== void 0 ? _a : [])[index]) === null || _b === void 0 ? void 0 : _b.datasetNoAlpha) !== null && _c !== void 0 ? _c : this.innerOptions.datasetNoAlpha;
color = (_f = (_e = ((_d = data.params) !== null && _d !== void 0 ? _d : [])[index]) === null || _e === void 0 ? void 0 : _e.datasetColor) !== null && _f !== void 0 ? _f : ColorLib.getColor(index, this.innerOptions.scheme);
let type = ((data.params || [])[index] || { type: 'bar' }).type || 'bar';
let areaStyle;
if (type === 'area') {
type = 'line';
areaStyle = {
opacity: 0.8,
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.1) },
],
global: false, // false by default
},
};
}
opts.series.push(Object.assign(Object.assign({}, this.getCommonSeriesParam(color, (data.params || [])[index])), { name: label, type, areaStyle, data: gts.rows.map((r) => { var _a; return ((_a = this.innerOptions.bar) === null || _a === void 0 ? void 0 : _a.horizontal) ? [r[index + 1], r[0]] : [r[0], r[index + 1]]; }) }));
});
}
}
opts.yAxis = {
name: !((_23 = (_22 = this.innerOptions) === null || _22 === void 0 ? void 0 : _22.bar) === null || _23 === void 0 ? void 0 : _23.horizontal) ? this.unit || this.innerOptions.unit : undefined,
show: !this.innerOptions.hideYAxis,
nameTextStyle: { color: Utils.getLabelColor(this.el) },
type: ((_25 = (_24 = this.innerOptions) === null || _24 === void 0 ? void 0 : _24.bar) === null || _25 === void 0 ? void 0 : _25.horizontal)
? this.isGTS
? this.innerOptions.timeMode === 'date'
? 'time'
: 'category'
: 'category'
: 'value',
splitLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLabel: {
hideOverlap: true,
color: Utils.getLabelColor(this.el),
show: !this.innerOptions.hideYAxis,
formatter: ((_27 = (_26 = this.innerOptions) === null || _26 === void 0 ? void 0 : _26.bar) === null || _27 === void 0 ? void 0 : _27.horizontal)
? this.innerOptions.timeMode === 'date'
? this.innerOptions.fullDateDisplay ? (value) => GTSLib.toISOString(GTSLib.zonedTimeToUtc(value, 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat)
.replace('T', '\n').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')
: undefined
: undefined
: undefined,
},
axisTick: {
lineStyle: { color: Utils.getGridColor(this.el) },
},
min: ((_29 = (_28 = this.innerOptions) === null || _28 === void 0 ? void 0 : _28.bar) === null || _29 === void 0 ? void 0 : _29.horizontal)
? ((_30 = this.innerOptions.bounds) === null || _30 === void 0 ? void 0 : _30.minDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.minDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.minDate
: undefined
: this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[0] : undefined,
max: ((_32 = (_31 = this.innerOptions) === null || _31 === void 0 ? void 0 : _31.bar) === null || _32 === void 0 ? void 0 : _32.horizontal)
? ((_33 = this.innerOptions.bounds) === null || _33 === void 0 ? void 0 : _33.maxDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.maxDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.maxDate
: undefined
: this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[1] : undefined,
};
opts.xAxis = {
name: ((_35 = (_34 = this.innerOptions) === null || _34 === void 0 ? void 0 : _34.bar) === null || _35 === void 0 ? void 0 : _35.horizontal) ? (_36 = this.unit) !== null && _36 !== void 0 ? _36 : this.innerOptions.unit : undefined,
nameTextStyle: {
padding: [0, 10, -35, 0],
align: 'right',
verticalAlign: 'bottom',
},
show: !this.innerOptions.hideXAxis,
type: ((_38 = (_37 = this.innerOptions) === null || _37 === void 0 ? void 0 : _37.bar) === null || _38 === void 0 ? void 0 : _38.horizontal)
? 'value'
: this.isGTS
? this.innerOptions.timeMode === 'date'
? 'time'
: 'category'
: 'category',
axisLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLabel: {
hideOverlap: true,
show: !this.innerOptions.hideXAxis,
color: Utils.getLabelColor(this.el),
formatter: !((_40 = (_39 = this.innerOptions) === null || _39 === void 0 ? void 0 : _39.bar) === null || _40 === void 0 ? void 0 : _40.horizontal)
? this.innerOptions.timeMode === 'date'
? this.innerOptions.fullDateDisplay ? (value) => GTSLib.toISOString(GTSLib.zonedTimeToUtc(value, 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat)
.replace('T', '\n').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')
: undefined
: undefined
: undefined,
},
axisTick: { lineStyle: { color: Utils.getGridColor(this.el) } },
min: ((_42 = (_41 = this.innerOptions) === null || _41 === void 0 ? void 0 : _41.bar) === null || _42 === void 0 ? void 0 : _42.horizontal)
? this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[0] : undefined
: ((_43 = this.innerOptions.bounds) === null || _43 === void 0 ? void 0 : _43.minDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.minDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.minDate
: undefined,
max: ((_45 = (_44 = this.innerOptions) === null || _44 === void 0 ? void 0 : _44.bar) === null || _45 === void 0 ? void 0 : _45.horizontal)
? this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[1] : undefined
: ((_46 = this.innerOptions.bounds) === null || _46 === void 0 ? void 0 : _46.maxDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.maxDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.maxDate
: undefined,
};
if (hasTimeBounds) {
this.timeBounds.emit({ min, max });
this.bounds = { min, max };
}
(_47 = this.LOG) === null || _47 === void 0 ? void 0 : _47.debug(['convert', 'series'], series);
const markArea = [...((_48 = this.innerOptions.thresholds) !== null && _48 !== void 0 ? _48 : [])
.map(t => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
const m = [{ itemStyle: { color: ColorLib.transparentize((_a = t.color) !== null && _a !== void 0 ? _a : '#f44336', t.fill ? 0.3 : 0) } }, {}];
if ((_b = this.innerOptions.bar) === null || _b === void 0 ? void 0 : _b.horizontal) {
m[0].xAxis = (_c = t.value) !== null && _c !== void 0 ? _c : 0;
m[1] = {
itemStyle: t.from ? { color: ColorLib.transparentize((_d = t.color) !== null && _d !== void 0 ? _d : '#f44336', t.fill ? 0.3 : 0) } : undefined,
xAxis: (_e = t.from) !== null && _e !== void 0 ? _e : 0,
};
m[0].name = `${(_f = t.value) !== null && _f !== void 0 ? _f : 0}`;
m[0].label = { color: (_g = t.color) !== null && _g !== void 0 ? _g : '#f44336', position: 'insideTopRight' };
}
else {
m[0].yAxis = (_h = t.value) !== null && _h !== void 0 ? _h : 0;
m[1] = {
itemStyle: t.from ? { color: ColorLib.transparentize((_j = t.color) !== null && _j !== void 0 ? _j : '#f44336', t.fill ? 0.3 : 0) } : undefined,
yAxis: (_k = t.from) !== null && _k !== void 0 ? _k : 0,
};
}
return m;
}),
...((_49 = this.innerOptions.markers) !== null && _49 !== void 0 ? _49 : [])
.filter(t => !!t.fill)
.map(t => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
return [{
itemStyle: {
color: ColorLib.transparentize((_a = t.color) !== null && _a !== void 0 ? _a : '#D81B60', t.fill ? (_b = t.alpha) !== null && _b !== void 0 ? _b : 0.5 : 0),
borderType: (_c = t.type) !== null && _c !== void 0 ? _c : 'dashed',
},
label: { color: (_d = t.color) !== null && _d !== void 0 ? _d : '#D81B60', position: 'insideTopRight', distance: 5, show: !!t.name },
name: (_f = (_e = t.name) !== null && _e !== void 0 ? _e : t.value) !== null && _f !== void 0 ? _f : 0,
yAxis: ((_h = (_g = this.innerOptions) === null || _g === void 0 ? void 0 : _g.bar) === null || _h === void 0 ? void 0 : _h.horizontal) ? (t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) : undefined,
xAxis: !((_k = (_j = this.innerOptions) === null || _j === void 0 ? void 0 : _j.bar) === null || _k === void 0 ? void 0 : _k.horizontal) ? (t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) : undefined,
},
{
itemStyle: {
color: ColorLib.transparentize((_l = t.color) !== null && _l !== void 0 ? _l : '#D81B60', t.fill ? (_m = t.alpha) !== null && _m !== void 0 ? _m : 0.5 : 0),
borderType: (_o = t.type) !== null && _o !== void 0 ? _o : 'dashed',
},
yAxis: ((_q = (_p = this.innerOptions) === null || _p === void 0 ? void 0 : _p.bar) === null || _q === void 0 ? void 0 : _q.horizontal) ? (t.start / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) : undefined,
xAxis: !((_s = (_r = this.innerOptions) === null || _r === void 0 ? void 0 : _r.bar) === null || _s === void 0 ? void 0 : _s.horizontal) ? (t.start / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) : undefined,
}];
})];
const markLine = [...(this.innerOptions.thresholds || [])
.map(t => {
const m = {
name: t.value || 0,
label: { color: t.color || '#f44336', position: 'insideEndTop' },
lineStyle: { color: t.color || '#f44336', type: 'dashed' },
};
if ((this.innerOptions.bar || { horizontal: false }).horizontal) {
m.xAxis = t.value || 0;
m.label.show = false;
}
else {
m.yAxis = t.value || 0;
}
return m;
}),
...(this.innerOptions.markers || [])
.filter(t => !t.fill)
.map(t => {
return {
name: t.name || t.value || 0,
label: { color: t.color || '#D81B60', position: 'insideEndTop', formatter: '{b}', show: !!t.name },
lineStyle: { color: t.color || '#D81B60', type: t.type || 'dashed' },
yAxis: ((this.innerOptions.bar || { horizontal: false }).horizontal) ? ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
xAxis: (!(this.innerOptions.bar || { horizontal: false }).horizontal) ? ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
};
})];
if (markLine.length > 0) {
opts.series.push({
name: '',
type: 'line',
symbolSize: 0,
data: [],
markArea: {
data: markArea,
},
markLine: {
emphasis: { lineStyle: { width: 1 } },
symbol: ['none', 'none'],
data: markLine,
},
});
}
this.parsing = false;
return opts;
}
zoomHandler(start, end) {
var _a, _b, _c, _d, _e, _f;
this.zoomXInfo = {
start,
end,
min: (_b = (_a = this.innerOptions.bounds) === null || _a === void 0 ? void 0 : _a.minDate) !== null && _b !== void 0 ? _b : (_c = this.bounds) === null || _c === void 0 ? void 0 : _c.min,
max: (_e = (_d = this.innerOptions.bounds) === null || _d === void 0 ? void 0 : _d.maxDate) !== null && _e !== void 0 ? _e : (_f = this.bounds) === null || _f === void 0 ? void 0 : _f.max,
orientation: 'x',
};
this.dataZoom.emit(this.zoomXInfo);
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
const zoomHandler = _.throttle((start, end) => this.zoomHandler(start, end), 16, { leading: true, trailing: true });
const focusHandler = _.throttle((type, event) => {
var _a, _b;
if (this.hasFocus) {
switch (type) {
case 'mouseover':
const c = (_a = event.data.coord) !== null && _a !== void 0 ? _a : event.data;
this.dataPointOver.emit({ date: c[0], name: GTSLib.getName(event.seriesName), value: c[1], meta: {} });
break;
case 'highlight':
let ts;
((_b = event.batch) !== null && _b !== void 0 ? _b : []).forEach((b) => {
var _a;
const s = this.myChart.getOption().series[b.seriesIndex];
ts = s.data[b.dataIndex][0];
ts = this.innerOptions.timeMode === 'date'
? GTSLib.zonedTimeToUtc(ts * this.divider, this.divider, (_a = this.innerOptions.timeZone) !== null && _a !== void 0 ? _a : 'UTC') * this.divider
: ts;
});
if (ts !== undefined) {
this.dataPointSelected.emit({ date: ts, name: '.*', meta: {} });
}
break;
default:
break;
}
}
}, 100, { leading: true, trailing: true });
setTimeout(() => {
this.height = Utils.getContentBounds(this.el.parentElement).h;
this.parsing = false;
this.rendering = true;
let initial = false;
this.myChart = echarts.init(this.graph);
this.myChart.on('rendered', () => {
this.rendering = false;
let found = false;
let x = 0;
setTimeout(() => {
while (!found && x < 1024) {
found = this.myChart.containPixel({ gridIndex: 0 }, [x, this.myChart.getHeight() / 2]);
x++;
}
if (this.leftMargin !== x && x < 1024) {
setTimeout(() => {
this.leftMarginComputed.emit(x);
this.leftMargin = x;
});
}
if (initial)
setTimeout(() => this.draw.emit());
initial = false;
});
});
this.myChart.on('dataZoom', (event) => {
let start;
let end;
if (event.batch) {
const batch = (event.batch || [])[0] || {};
start = batch.start || batch.startValue;
end = batch.end || batch.endValue;
this.zoomHandler(start, end);
}
else if (event.start !== undefined && event.end !== undefined) {
start = event.start;
end = event.end;
zoomHandler(start, end);
}
});
this.myChart.on('restore', () => {
this.dataZoom.emit({ type: 'restore', start: 0, end: 100 });
});
this.el.addEventListener('dblclick', () => this.myChart.dispatchAction({
type: 'dataZoom',
start: 0,
end: 100,
}));
this.el.addEventListener('mouseover', () => this.hasFocus = true);
this.el.addEventListener('mouseout', () => {
this.hasFocus = false;
this.dataPointOver.emit({});
});
this.myChart.on('mouseout', () => {
this.dataPointOver.emit({});
});
this.myChart.on('mouseover', (event) => focusHandler('mouseover', event));
this.myChart.on('highlight', (event) => focusHandler('highlight', event));
this.myChart.on('click', (event) => {
const date = this.innerOptions.timeMode === 'date'
? GTSLib.zonedTimeToUtc(event.value[0], 1, this.innerOptions.timeZone) * this.divider
: event.value[0];
if (event.componentType !== 'markLine') {
this.dataPointSelected.emit({
date,
name: GTSLib.getName(event.seriesName),
value: event.value[1],
meta: {},
});
}
if (this.innerOptions.poi) {
if (this.pois.find(p => p.date === event.value[0])) {
this.pois = this.pois.filter(p => p.date !== event.value[0]);
}
else if (event.componentType !== 'markLine') {
this.pois.push({
date,
name: GTSLib.getName(event.seriesName),
value: event.value[1],
meta: {},
uid: v4(),
});
}
this.chartOpts.series = this.chartOpts.series.filter(s => 'poi' !== s.id);
this.poi.emit(this.pois);
this.chartOpts.series.push({
id: 'poi',
name: '',
type: 'line',
data: [],
markLine: {
emphasis: { lineStyle: { width: 1 } },
symbol: ['none', 'pin'],
symbolSize: 20,
symbolKeepAspect: true,
data: this.pois.map(p => ({
name: 'poi-' + p.uid,
label: { show: false },
lineStyle: { color: this.innerOptions.poiColor, type: this.innerOptions.poiLine },
xAxis: this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(p.date / this.divider, 1, this.innerOptions.timeZone)
: p.date,
})),
},
});
setTimeout(() => { var _a; return this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, true, false); });
}
});
this.setOpts();
initial = true;
});
}
async export(type = 'png') {
return Promise.resolve(this.myChart ? this.myChart.getDataURL({
type,
excludeComponents: ['toolbox'],
}) : undefined);
}
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();
}
async setFocus(regexp, ts, value) {
var _a, _b;
if (!this.myChart || this.hasFocus)
return;
const date = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(ts !== null && ts !== void 0 ? ts : 0, this.divider, this.innerOptions.timeZone)
: ts !== null && ts !== void 0 ? ts : 0;
let seriesIndex = 0;
let dataIndex = 0;
if (regexp) {
this.chartOpts.series
.filter(s => new RegExp(regexp).test(GTSLib.getName(s.name)))
.forEach(s => {
const data = s.data.filter((d) => d[0] === date);
if (data && data.length > 0 && data[0]) {
seriesIndex = this.chartOpts.series.indexOf(s);
dataIndex = s.data.indexOf(data[0]);
}
});
}
if (GTSLib.isArray(this.chartOpts.xAxis)) {
this.chartOpts.xAxis
.forEach(a => { var _a; return a.axisPointer = Object.assign(Object.assign({}, (_a = a.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: date, status: 'show' }); });
}
else {
this.chartOpts.xAxis.axisPointer = Object.assign(Object.assign({}, (_a = this.chartOpts.xAxis.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: date, status: 'show' });
}
if (GTSLib.isArray(this.chartOpts.yAxis)) {
this.chartOpts.yAxis
.forEach(a => { var _a; return a.axisPointer = Object.assign(Object.assign({}, (_a = a.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: value !== null && value !== void 0 ? value : 0, status: 'show' }); });
}
else {
this.chartOpts.yAxis.axisPointer = Object.assign(Object.assign({}, (_b = this.chartOpts.yAxis.axisPointer) !== null && _b !== void 0 ? _b : {}), { value: value !== null && value !== void 0 ? value : 0, status: 'show' });
}
this.chartOpts.tooltip.show = true;
this.myChart.dispatchAction({ type: 'showTip', seriesIndex, dataIndex });
this.setOpts();
return Promise.resolve();
}
async unFocus() {
var _a, _b;
if (!this.myChart || this.hasFocus)
return;
this.chartOpts.series.forEach(s => s.markPoint = undefined);
this.chartOpts.xAxis.axisPointer = Object.assign(Object.assign({}, (_a = this.chartOpts.xAxis.axisPointer) !== null && _a !== void 0 ? _a : {}), { status: 'hide' });
this.chartOpts.yAxis.axisPointer = Object.assign(Object.assign({}, (_b = this.chartOpts.yAxis.axisPointer