@senx/discovery-widgets
Version:
Discovery Widgets Elements
1,243 lines • 58.4 kB
JavaScript
/*
* Copyright 2023-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 DiscoveryBarPolarComponent {
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.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 });
}
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;
if (this.myChart) {
dataZoom.start = dataZoom.start || 0;
if (((_a = this.zoom) === null || _a === void 0 ? void 0 : _a.start) !== dataZoom.start || ((_b = this.zoom) === null || _b === void 0 ? void 0 : _b.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, _c;
this.parsing = true;
this.LOG = new Logger(DiscoveryBarPolarComponent, this.debug);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
const res = GTSLib.getData(this.result);
this.divider = GTSLib.getDivider((_a = this.options.timeUnit) !== null && _a !== void 0 ? _a : 'us');
this.chartOpts = this.convert(res !== null && res !== void 0 ? res : new DataModel());
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
chartOpts: this.chartOpts,
});
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['componentWillLoad'], this.el.parentElement.parentElement);
this.setOpts();
}
setOpts(notMerge = false) {
var _a, _b, _c;
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: 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({}, (_c = this.chartOpts.title) !== null && _c !== void 0 ? _c : {}), { show: false });
}
setTimeout(() => {
var _a;
if (this.myChart) {
this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, notMerge, true);
}
});
}
getCommonSeriesParam(color) {
var _a, _b, _c, _d, _e, _f, _g;
const datasetNoAlpha = this.innerOptions.datasetNoAlpha;
const opts = {
coordinateSystem: 'polar',
showBackground: !!((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.bar) === null || _b === void 0 ? void 0 : _b.track),
animation: !!((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.bar) === null || _d === void 0 ? void 0 : _d.animate),
large: false,
clip: false,
progressive: 5000,
emphasis: {
focus: 'series',
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: 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) },
],
},
},
},
label: {
show: !!this.innerOptions.showValues,
position: ((_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.bar) === null || _f === void 0 ? void 0 : _f.circular) ? 'outside' : 'top',
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 14 },
},
lineStyle: { color },
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) },
],
},
},
};
((_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, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91;
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 = Utils.clone(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;
let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER;
let hasTimeBounds = false;
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
if (GTSLib.isGtsToPlot(gts) && !!gts.v) {
this.isGTS = true;
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 ? _j : { datasetColor: c }).datasetColor) !== null && _k !== void 0 ? _k : c;
min = Math.min(min, ...gts.v.map((v) => v[0]));
max = Math.max(max, ...gts.v.map((v) => v[0]));
hasTimeBounds = true;
let type = ((_m = ((_l = data.params) !== null && _l !== void 0 ? _l : [])[i]) !== null && _m !== void 0 ? _m : { type: 'bar' }).type || 'bar';
const datasetNoAlpha = (_q = (_p = ((_o = data.params) !== null && _o !== void 0 ? _o : [])[i]) === null || _p === void 0 ? void 0 : _p.datasetNoAlpha) !== null && _q !== void 0 ? _q : 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
},
};
}
const sortedGTS = gts.v.sort((a, b) => a[0] < b[0] ? -1 : 1);
const s = Object.assign(Object.assign({}, this.getCommonSeriesParam(color)), { backgroundStyle: ((_s = (_r = this.innerOptions) === null || _r === void 0 ? void 0 : _r.bar) === null || _s === void 0 ? void 0 : _s.track) ? {
color: ((_w = (_v = (_u = ((_t = data.params) !== null && _t !== void 0 ? _t : [])[i]) === null || _u === void 0 ? void 0 : _u.bar) === null || _v === void 0 ? void 0 : _v.trackColor) !== null && _w !== void 0 ? _w : (_y = (_x = this.innerOptions) === null || _x === void 0 ? void 0 : _x.bar) === null || _y === void 0 ? void 0 : _y.trackColor)
? ColorLib.sanitizeColor((_2 = (_1 = (_0 = ((_z = data.params) !== null && _z !== void 0 ? _z : [])[i]) === null || _0 === void 0 ? void 0 : _0.bar) === null || _1 === void 0 ? void 0 : _1.trackColor) !== null && _2 !== void 0 ? _2 : (_4 = (_3 = this.innerOptions) === null || _3 === void 0 ? void 0 : _3.bar) === null || _4 === void 0 ? void 0 : _4.trackColor)
: Utils.getCSSColor(this.el, '--warp-view-bar-bg-color', '#b4b4b440'),
} : undefined, type, areaStyle, id: gts.id, name: GTSLib.setName(gts.id, ((_7 = ((_6 = ((_5 = data.params) !== null && _5 !== void 0 ? _5 : [])[i]) !== null && _6 !== void 0 ? _6 : { key: undefined }).key) !== null && _7 !== void 0 ? _7 : GTSLib.serializeGtsMetadata(gts))), data: sortedGTS.map((d) => {
var _a, _b;
const ts = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(d[0], this.divider, this.innerOptions.timeZone)
: d[0];
return ((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.bar) === null || _b === void 0 ? void 0 : _b.circular) ? [ts, d[d.length - 1]] : [d[d.length - 1], ts];
}) });
const isRounded = ((_10 = (_9 = ((_8 = data.params) !== null && _8 !== void 0 ? _8 : [])[i]) === null || _9 === void 0 ? void 0 : _9.bar) === null || _10 === void 0 ? void 0 : _10.rounded)
? (_13 = (_12 = ((_11 = data.params) !== null && _11 !== void 0 ? _11 : [])[i]) === null || _12 === void 0 ? void 0 : _12.bar) === null || _13 === void 0 ? void 0 : _13.rounded
: (_15 = (_14 = this.innerOptions) === null || _14 === void 0 ? void 0 : _14.bar) === null || _15 === void 0 ? void 0 : _15.rounded;
if (type === 'bar' && isRounded) {
s.roundCap = true;
}
const isStacked = ((_17 = ((_16 = data.params) !== null && _16 !== void 0 ? _16 : [])[i]) === null || _17 === void 0 ? void 0 : _17.stacked)
? (_19 = ((_18 = data.params) !== null && _18 !== void 0 ? _18 : [])[i]) === null || _19 === void 0 ? void 0 : _19.stacked
: (_22 = (_21 = (_20 = this.innerOptions) === null || _20 === void 0 ? void 0 : _20.bar) === null || _21 === void 0 ? void 0 : _21.stacked) !== null && _22 !== void 0 ? _22 : (_23 = this.innerOptions) === null || _23 === void 0 ? void 0 : _23.stacked;
if (type === 'bar' && isStacked) {
s.stack = 'a';
s.stackStrategy = 'all';
}
if (type === 'line' && ((_24 = this.innerOptions.bar) === null || _24 === void 0 ? void 0 : _24.fillGap)) {
s.data.push(s.data[0]);
}
series.push(s);
}
else if (!gts.v) {
this.innerOptions.timeMode = 'custom';
(_25 = this.LOG) === null || _25 === void 0 ? void 0 : _25.debug(['convert', 'custom data'], gts);
this.categories = gts.columns;
for (const row of ((_26 = gts.rows) !== null && _26 !== void 0 ? _26 : [])) {
const index = ((_27 = gts.rows) !== null && _27 !== void 0 ? _27 : []).indexOf(row);
const c = ColorLib.getColor((_28 = gts.id) !== null && _28 !== void 0 ? _28 : index, this.innerOptions.scheme);
const color = (_31 = ((_30 = ((_29 = data.params) !== null && _29 !== void 0 ? _29 : [])[index]) !== null && _30 !== void 0 ? _30 : { datasetColor: c }).datasetColor) !== null && _31 !== void 0 ? _31 : c;
let type = (_34 = ((_33 = ((_32 = data.params) !== null && _32 !== void 0 ? _32 : [])[index]) !== null && _33 !== void 0 ? _33 : { type: 'bar' }).type) !== null && _34 !== void 0 ? _34 : 'bar';
const datasetNoAlpha = (_37 = (_36 = ((_35 = data.params) !== null && _35 !== void 0 ? _35 : [])[index]) === null || _36 === void 0 ? void 0 : _36.datasetNoAlpha) !== null && _37 !== void 0 ? _37 : 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
},
};
}
const s = Object.assign(Object.assign({}, this.getCommonSeriesParam(color)), { backgroundStyle: ((_39 = (_38 = this.innerOptions) === null || _38 === void 0 ? void 0 : _38.bar) === null || _39 === void 0 ? void 0 : _39.track) ? {
color: ((_43 = (_42 = (_41 = ((_40 = data.params) !== null && _40 !== void 0 ? _40 : [])[i]) === null || _41 === void 0 ? void 0 : _41.bar) === null || _42 === void 0 ? void 0 : _42.trackColor) !== null && _43 !== void 0 ? _43 : (_45 = (_44 = this.innerOptions) === null || _44 === void 0 ? void 0 : _44.bar) === null || _45 === void 0 ? void 0 : _45.trackColor)
? ColorLib.sanitizeColor((_49 = (_48 = (_47 = ((_46 = data.params) !== null && _46 !== void 0 ? _46 : [])[i]) === null || _47 === void 0 ? void 0 : _47.bar) === null || _48 === void 0 ? void 0 : _48.trackColor) !== null && _49 !== void 0 ? _49 : (_51 = (_50 = this.innerOptions) === null || _50 === void 0 ? void 0 : _50.bar) === null || _51 === void 0 ? void 0 : _51.trackColor)
: Utils.getCSSColor(this.el, '--warp-view-bar-bg-color', '#b4b4b440'),
} : undefined, type, areaStyle, name: row[0], data: row.slice(1) });
const isStacked = ((_53 = ((_52 = data.params) !== null && _52 !== void 0 ? _52 : [])[index]) === null || _53 === void 0 ? void 0 : _53.stacked) !== undefined
? (_55 = ((_54 = data.params) !== null && _54 !== void 0 ? _54 : [])[index]) === null || _55 === void 0 ? void 0 : _55.stacked
: (_58 = (_57 = (_56 = this.innerOptions) === null || _56 === void 0 ? void 0 : _56.bar) === null || _57 === void 0 ? void 0 : _57.stacked) !== null && _58 !== void 0 ? _58 : (_59 = this.innerOptions) === null || _59 === void 0 ? void 0 : _59.stacked;
if (type === 'bar' && isStacked) {
s.stack = 'a';
s.stackStrategy = 'all';
}
const isRounded = ((_62 = (_61 = ((_60 = data.params) !== null && _60 !== void 0 ? _60 : [])[i]) === null || _61 === void 0 ? void 0 : _61.bar) === null || _62 === void 0 ? void 0 : _62.rounded)
? (_65 = (_64 = ((_63 = data.params) !== null && _63 !== void 0 ? _63 : [])[i]) === null || _64 === void 0 ? void 0 : _64.bar) === null || _65 === void 0 ? void 0 : _65.rounded
: (_67 = (_66 = this.innerOptions) === null || _66 === void 0 ? void 0 : _66.bar) === null || _67 === void 0 ? void 0 : _67.rounded;
if (type === 'bar' && isRounded) {
s.roundCap = true;
}
if (type === 'line') {
s.data.push(s.data[0]);
}
series.push(s);
}
}
}
if (hasTimeBounds) {
this.timeBounds.emit({ min, max });
this.bounds = { min, max };
}
(_68 = this.LOG) === null || _68 === void 0 ? void 0 : _68.debug(['convert', 'series'], series);
const opts = Object.assign({ animation: !!((_70 = (_69 = this.innerOptions) === null || _69 === void 0 ? void 0 : _69.bar) === null || _70 === void 0 ? void 0 : _70.animate), grid: {
left: (!!this.innerOptions.leftMargin && this.innerOptions.leftMargin > this.leftMargin)
? this.innerOptions.leftMargin - this.leftMargin + 10
: 10,
top: 10,
bottom: this.innerOptions.showLegend ? 30 : 10,
right: 10,
containLabel: true,
}, polar: {}, radiusAxis: {
name: (_72 = (_71 = this.unit) !== null && _71 !== void 0 ? _71 : this.innerOptions.unit) !== null && _72 !== void 0 ? _72 : '',
hideOverlap: true,
show: !this.innerOptions.hideYAxis,
type: ((_74 = (_73 = this.innerOptions) === null || _73 === void 0 ? void 0 : _73.bar) === null || _74 === void 0 ? void 0 : _74.circular) ? (this.isGTS ? (this.innerOptions.timeMode === 'date' ? 'time' : 'value') : 'category') : 'value',
data: ((_76 = (_75 = this.innerOptions) === null || _75 === void 0 ? void 0 : _75.bar) === null || _76 === void 0 ? void 0 : _76.circular) ? (this.isGTS ? undefined : this.categories) : undefined,
nameTextStyle: { color: Utils.getLabelColor(this.el) },
splitLine: {
lineStyle: {
color: ColorLib.transparentize(Utils.getGridColor(this.el)),
},
},
axisLine: {
lineStyle: {
color: Utils.getGridColor(this.el),
},
},
axisLabel: {
show: !this.innerOptions.hideYAxis,
hideOverlap: true,
color: Utils.getLabelColor(this.el),
formatter: ((_78 = (_77 = this.innerOptions) === null || _77 === void 0 ? void 0 : _77.bar) === null || _78 === void 0 ? void 0 : _78.circular) ? undefined : 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,
},
axisTick: {
lineStyle: {
color: Utils.getGridColor(this.el),
},
},
}, angleAxis: {
startAngle: ((_79 = this.innerOptions.bar) === null || _79 === void 0 ? void 0 : _79.startAngle) ? (_80 = this.innerOptions.bar) === null || _80 === void 0 ? void 0 : _80.startAngle : this.isGTS ? 0 : (360 / Math.max(((_81 = this.categories) !== null && _81 !== void 0 ? _81 : []).length, 1)) * -1.5 + 180,
type: ((_83 = (_82 = this.innerOptions) === null || _82 === void 0 ? void 0 : _82.bar) === null || _83 === void 0 ? void 0 : _83.circular) ? 'value' : this.isGTS ? this.innerOptions.timeMode === 'date' ? 'time' : 'value' : 'category',
data: ((_85 = (_84 = this.innerOptions) === null || _84 === void 0 ? void 0 : _84.bar) === null || _85 === void 0 ? void 0 : _85.circular) ? undefined : this.isGTS ? undefined : this.categories,
axisLine: {
lineStyle: {
color: Utils.getGridColor(this.el),
},
},
axisLabel: {
hideOverlap: true,
show: !this.innerOptions.hideXAxis,
color: Utils.getLabelColor(this.el),
formatter: ((_87 = (_86 = this.innerOptions) === null || _86 === void 0 ? void 0 : _86.bar) === null || _87 === void 0 ? void 0 : _87.circular) ? 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),
},
},
emphasis: {
focus: 'series',
},
min: ((_88 = this.innerOptions.bounds) === null || _88 === void 0 ? void 0 : _88.minDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.minDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.minDate
: undefined,
max: ((_89 = this.innerOptions.bounds) === null || _89 === void 0 ? void 0 : _89.maxDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.maxDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.maxDate
: undefined,
}, tooltip: {
trigger: 'axis',
transitionDuration: 0,
axisPointer: {
type: !!this.innerOptions.yCursor && !!this.innerOptions.xCursor ? 'cross' : !!this.innerOptions.yCursor || !!this.innerOptions.xCursor ? 'line' : 'none',
axis: this.innerOptions.yAxisFocus ? 'angle' : 'radius',
animation: false,
lineStyle: !this.innerOptions.yCursor && !this.innerOptions.xCursor
? undefined
: {
color: Utils.getCSSColor(this.el, '--warp-view-bar-color', 'red'),
},
crossStyle: this.innerOptions.yCursor
? {
color: Utils.getCSSColor(this.el, '--warp-view-bar-color', 'red'),
}
: undefined,
},
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: this.innerOptions.tooltipDelay || 100,
formatter: (params) => {
return `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${this.innerOptions.timeMode !== 'date'
? params[0].axisValue
: (GTSLib.toISOString(GTSLib.zonedTimeToUtc(params[0].axisValue, 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.fullDateDisplay ? this.innerOptions.timeFormat : undefined) || '')
.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}</span>`).join('<br>')}`;
},
}, toolbox: {
show: this.innerOptions.showControls,
feature: {
saveAsImage: { type: 'png', excludeComponents: ['toolbox'] },
},
}, legend: {
bottom: 0, left: 'center', show: !!this.innerOptions.showLegend, height: 30, type: 'scroll',
textStyle: { color: Utils.getLabelColor(this.el) },
}, series }, ((_91 = (_90 = this.innerOptions) === null || _90 === void 0 ? void 0 : _90.extra) === null || _91 === void 0 ? void 0 : _91.chartOpts) || {});
this.parsing = false;
return opts;
}
zoomHandler(start, end) {
var _a, _b, _c, _d;
this.dataZoom.emit({
start,
end,
min: ((_a = this.innerOptions.bounds) === null || _a === void 0 ? void 0 : _a.minDate) || ((_b = this.bounds) === null || _b === void 0 ? void 0 : _b.min),
max: ((_c = this.innerOptions.bounds) === null || _c === void 0 ? void 0 : _c.maxDate) || ((_d = this.bounds) === null || _d === void 0 ? void 0 : _d.max),
});
}
// 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) => {
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, this.innerOptions.timeZone || '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) => {
this.dataPointSelected.emit({
date: event.value[0],
name: GTSLib.getName(event.seriesName),
value: event.value[1],
meta: {},
});
});
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 || 0, this.divider, this.innerOptions.timeZone)
: ts || 0;
let seriesIndex = 0;
let dataIndex = 0;
if (regexp) {
this.chartOpts.series
.filter(s => new RegExp(regexp).test(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.angleAxis)) {
this.chartOpts.angleAxis
.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.angleAxis.axisPointer = Object.assign(Object.assign({}, (_a = this.chartOpts.angleAxis.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: date, status: 'show' });
}
if (GTSLib.isArray(this.chartOpts.radiusAxis)) {
this.chartOpts.radiusAxis
.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.radiusAxis.axisPointer = Object.assign(Object.assign({}, (_b = this.chartOpts.radiusAxis.axisPointer) !== null && _b !== void 0 ? _b : {}), { value: value || 0, status: 'show' });
}
this.chartOpts.tooltip.show = true;
this.myChart.dispatchAction({ type: 'showTip', seriesIndex, dataIndex });
this.setOpts();
return Promise.resolve();
}
async unFocus() {
if (!this.myChart || this.hasFocus)
return;
this.chartOpts.series.forEach(s => s.markPoint = undefined);
this.chartOpts.angleAxis.axisPointer = Object.assign(Object.assign({}, this.chartOpts.angleAxis.axisPointer || {}), { status: 'hide' });
this.chartOpts.radiusAxis.axisPointer = Object.assign(Object.assign({}, this.chartOpts.radiusAxis.axisPointer || {}), { status: 'hide' });
this.myChart.dispatchAction({ type: 'hideTip' });
this.setOpts();
return Promise.resolve();
}
render() {
return h("div", { key: 'cb9270d7ee5e8c84a5334fbda589e0fc36a50be2', style: { width: '100%', height: '100%' } }, this.parsing ? h("discovery-spinner", null, "Parsing data...") : '', this.rendering ? h("discovery-spinner", null, "Rendering data...") : '', h("div", { key: '904d5f96e60acba65087ca83ce1b2f073c577866', ref: (el) => this.graph = el }));
}
static get is() { return "discovery-bar-polar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-bar-polar.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-bar-polar.css"]
};
}
static get properties() {
return {
"result": {
"type": "string",
"mutable": true,
"complexType": {
"original": "DataModel | string",
"resolved": "DataModel | string",
"references": {
"DataModel": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DataModel"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "result",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ChartType",
"resolved": "string",
"references": {
"ChartType": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::ChartType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false
},
"options": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Param | string",
"resolved": "Param | string",
"references": {
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "{ ...new Param(), timeMode: 'date' }"
},
"width": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "width",
"reflect": false
},
"height": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "height",
"reflect": false
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"unit": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "unit",
"reflect": false
},
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "url",
"reflect": false
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'warpscript' | 'flows'",
"resolved": "\"flows\" | \"warpscript\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "language",
"reflect": false,
"defaultValue": "'warpscript'"
},
"vars": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "vars",
"reflect": false,
"defaultValue": "'{}'"
}
};
}
static get states() {
return {
"parsing": {},
"rendering": {},
"innerOptions": {}
};
}
static get events() {
return [{
"method": "draw",
"name": "draw",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "dataZoom",
"name": "dataZoom",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{ start?: number, end?: number, min?: number, max?: number, type?: string }",
"resolved": "{ start?: number; end?: number; min?: number; max?: number; type?: string; }",
"references": {}
}
}, {
"method": "leftMarginComputed",
"name": "leftMarginComputed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "dataPointOver",
"name": "dataPointOver",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "dataPointSelected",
"name": "dataPointSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "timeBounds",
"name": "timeBounds",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "discoveryEvent",
"name": "discoveryEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "DiscoveryEvent",
"resolved": "DiscoveryEvent",
"references": {
"DiscoveryEvent": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DiscoveryEvent"
}
}
}
}, {
"method": "execError",
"name": "execError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"resize": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"setZoom": {
"complexType": {
"signature": "(dataZoom: { start?: number; end?: number; }) => Promise<void>",
"parameters": [{
"name": "dataZoom",
"type": "{ start?: number; end?: number; }",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"export": {
"complexType": {
"signature": "(type?: \"png\" | \"svg\") => Promise<string>",
"parameters": [{
"name": "type",
"type": "\"svg\" | \"png\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "",
"tags": []
}
},
"show": {
"complexType": {
"signature": "(regexp: string) => Promise<void>",
"parameters": [{
"name": "regexp",
"type": "string",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"hide": {
"complexType": {
"signature": "(regexp: string) => Promise<void>",
"parameters": [{
"name": "regexp",
"type": "string",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"hideById": {
"complexType": {
"signature": "(id: number | string) => Promise<void>",
"parameters": [{
"name": "id",
"type": "string | number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"showById": {
"complexType": {
"signature": "(id: number | string) => Promise<void>",
"parameters": [{
"name": "id",
"type": "string | number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"setFocus": {
"complexType": {
"signature": "(regexp: string, ts: number, value?: number) => Promise<void>",
"parameters": [{
"name": "regexp",
"type": "string",
"docs": ""
}, {
"name": "ts",
"type": "number",
"docs": ""
}, {
"name": "value",
"type": "number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"unFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "vars",
"methodName": "varsUpdate"
}, {
"propName": "result",
"methodName": "updateRes"
}, {
"propName": "options",
"methodName": "optionsUpdate"
}];
}
}
//# sourceMappingURL=discovery-bar-polar.js.map