@senx/discovery-widgets
Version:
Discovery Widgets Elements
776 lines (772 loc) • 40.5 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 { c as clipRectByRect, i as init } from './index2.js';
import { C as ColorLib } from './color-lib.js';
import { d as defineCustomElement$1 } from './discovery-spinner2.js';
const discoveryProfileCss = "/*!\n * Copyright 2022-2025 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{display:block;width:100%;height:100%;position:relative}:host .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;width:100%;height:100%;overflow-y:auto;overflow-x:hidden}:host .chart-wrapper .expander{width:35px;margin-left:5px}:host .chart-wrapper .chart-area{-ms-flex-positive:1;flex-grow:1;width:100%;height:100%}:host .discovery-chart-spinner{position:absolute;top:0;left:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;z-index:900}";
const DiscoveryProfileStyle0 = discoveryProfileCss;
const DiscoveryProfile = /*@__PURE__*/ proxyCustomElement(class DiscoveryProfile extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.dataZoom = createEvent(this, "dataZoom", 7);
this.dataPointOver = createEvent(this, "dataPointOver", 7);
this.dataPointSelected = createEvent(this, "dataPointSelected", 7);
this.timeBounds = createEvent(this, "timeBounds", 7);
this.leftMarginComputed = createEvent(this, "leftMarginComputed", 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.expanded = false;
this.defOptions = Object.assign(Object.assign({}, new Param()), { timeMode: 'date' });
this.displayExpander = false;
this.divider = 1000;
this.hasFocus = false;
this.gtsList = [];
this.innerVars = {};
}
static renderItem(params, api) {
const y = +api.value(0);
const start = api.coord([+api.value(1), y]);
const width = api.coord([+api.value(2), y])[0] - start[0];
const height = api.size([0, 1])[1];
const coordSys = params.coordSys;
const rectShape = clipRectByRect({ x: start[0], y: start[1] - height / 2, width, height }, { x: coordSys.x, y: coordSys.y, width: coordSys.width, height: coordSys.height });
return (rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style({}),
});
}
;
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() {
var _a, _b;
this.chartOpts = this.convert((_a = GTSLib.getData(this.result)) !== null && _a !== void 0 ? _a : new DataModel());
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['updateRes'], { chartOpts: this.chartOpts });
if (this.myChart) {
setTimeout(() => this.setOpts(true));
}
}
optionsUpdate(newValue, oldValue) {
var _a, _b, _c, _d;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate'], newValue, oldValue);
let opts = newValue;
if (!!newValue && typeof newValue === 'string') {
opts = JSON.parse(newValue);
}
if (!Utils.deepEqual(opts, this.innerOptions)) {
this.innerOptions = Utils.clone(opts);
this.expanded = !!this.innerOptions.expandAnnotation;
this.divider = GTSLib.getDivider((_b = this.innerOptions.timeUnit) !== null && _b !== void 0 ? _b : 'us');
if (this.myChart) {
this.chartOpts = this.convert((_c = this.result) !== null && _c !== void 0 ? _c : new DataModel());
setTimeout(() => this.setOpts(true));
}
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue }, this.chartOpts);
}
}
async resize() {
this.myChart.resize({ width: this.width, height: this.height });
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) => { var _a; return new RegExp(id.toString()).test(((_a = s.id) !== null && _a !== void 0 ? _a : i).toString()); }),
});
}
return Promise.resolve();
}
async showById(id) {
if (this.myChart) {
this.myChart.dispatchAction({
type: 'legendSelect',
batch: this.myChart.getOption().series
.filter((s, i) => { var _a; return new RegExp(id.toString()).test(((_a = s.id) !== null && _a !== void 0 ? _a : i).toString()); }),
});
}
return Promise.resolve();
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a, _b, _c;
this.parsing = true;
this.LOG = new Logger(DiscoveryProfile, this.debug);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
this.expanded = !!this.innerOptions.expandAnnotation;
this.result = GTSLib.getData(this.result);
this.divider = GTSLib.getDivider((_a = this.innerOptions.timeUnit) !== null && _a !== void 0 ? _a : 'us');
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['componentWillLoad'], { type: this.type, options: this.innerOptions });
this.chartOpts = this.convert((_c = this.result) !== null && _c !== void 0 ? _c : new DataModel());
}
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;
this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, notMerge, true);
this.myChart.resize({ width: this.width, height: this.height });
});
}
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;
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);
this.innerOptions.timeMode = (_b = this.innerOptions.timeMode) !== null && _b !== void 0 ? _b : 'date';
const series = [];
const categories = [];
const gtsList = GTSLib.flatDeep(GTSLib.flattenGtsIdArray(data.data, 0).res);
this.gtsList = [];
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.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)) {
min = Math.min(min, ...gts.v.map((v) => v[0]));
max = Math.max(max, ...gts.v.map((v) => v[0]));
}
}
if (max <= 1000 && min >= -1000 && min !== Number.MAX_SAFE_INTEGER && max !== Number.MIN_SAFE_INTEGER) {
this.innerOptions.timeMode = 'timestamp';
}
let linesCount = 1;
let catId = 0;
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
const datasetNoAlpha = (_f = (_e = ((_d = data.params) !== null && _d !== void 0 ? _d : [])[i]) === null || _e === void 0 ? void 0 : _e.datasetNoAlpha) !== null && _f !== void 0 ? _f : this.innerOptions.datasetNoAlpha;
if (GTSLib.isGts(gts) && !!gts.v) {
this.gtsList.push(gts);
const name = (_j = (_h = ((_g = data.params) !== null && _g !== void 0 ? _g : [])[i]) === null || _h === void 0 ? void 0 : _h.key) !== null && _j !== void 0 ? _j : GTSLib.serializeGtsMetadata(gts);
const c = ColorLib.getColor(gts.id, this.innerOptions.scheme);
const color = (_m = (_l = ((_k = data.params) !== null && _k !== void 0 ? _k : [])[i]) === null || _l === void 0 ? void 0 : _l.datasetColor) !== null && _m !== void 0 ? _m : c;
if (this.expanded) {
linesCount++;
categories.push(name);
}
hasTimeBounds = true;
series.push({
type: 'custom',
name: GTSLib.setName(gts.id, name),
id: gts.id,
label: {
show: !!this.innerOptions.showValues,
position: 'inside',
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 14 },
},
data: gts.v.map((d) => {
let startTS = +d[0];
startTS = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(startTS, this.divider, this.innerOptions.timeZone)
: startTS;
let endTS = +d[0] + +d[d.length - 1];
endTS = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(endTS, this.divider, this.innerOptions.timeZone)
: endTS;
return [catId, startTS, endTS, +d[d.length - 1]];
}),
animation: false,
large: true,
clip: true,
showAllSymbol: true,
renderItem: DiscoveryProfile.renderItem.bind(this),
itemStyle: {
opacity: 0.8,
borderColor: color,
borderWidth: 1,
color: {
type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
],
},
},
encode: { x: [1, 2], y: 0 },
});
if (this.expanded)
catId++;
}
}
if (gtsList.length === 0) {
// custom data
((_o = data.data) !== null && _o !== void 0 ? _o : []).forEach((d, i) => {
var _a, _b, _c, _d, _e, _f, _g;
const datasetNoAlpha = (_c = (_b = ((_a = data.params) !== null && _a !== void 0 ? _a : [])[i]) === null || _b === void 0 ? void 0 : _b.datasetNoAlpha) !== null && _c !== void 0 ? _c : this.innerOptions.datasetNoAlpha;
const values = (_d = d.values) !== null && _d !== void 0 ? _d : {};
for (const key of Object.keys(values)) {
const id = Object.keys(values).indexOf(key);
const c = ColorLib.getColor(id, this.innerOptions.scheme);
if (this.expanded) {
linesCount++;
categories.push(key);
}
const color = (_g = (_f = ((_e = values.params) !== null && _e !== void 0 ? _e : [])[id]) === null || _f === void 0 ? void 0 : _f.datasetColor) !== null && _g !== void 0 ? _g : c;
series.push({
type: 'custom',
name: key,
label: {
show: !!this.innerOptions.showValues,
position: 'inside',
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 14 },
},
data: Object.keys(values[key]).map(ts => {
let startTS = +ts;
startTS = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(startTS, this.divider, this.innerOptions.timeZone)
: startTS;
let endTS = +ts + +values[key][ts];
endTS = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(endTS, this.divider, this.innerOptions.timeZone)
: endTS;
return [catId, startTS, endTS, +values[key][ts]];
}),
animation: false,
large: true,
clip: true,
showAllSymbol: true,
renderItem: DiscoveryProfile.renderItem.bind(this),
itemStyle: {
opacity: 0.8,
borderColor: color,
borderWidth: 1,
color: {
type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
],
},
},
encode: { x: [1, 2], y: 0 },
});
if (this.expanded)
catId++;
}
});
}
const markArea = [...((_p = this.innerOptions.thresholds) !== null && _p !== void 0 ? _p : [])
.filter(t => !!t.fill)
.map(t => {
var _a, _b, _c, _d, _e;
return [{
itemStyle: {
color: ColorLib.transparentize((_a = t.color) !== null && _a !== void 0 ? _a : '#D81B60', t.fill ? 0.5 : 0),
borderType: (_b = t.type) !== null && _b !== void 0 ? _b : 'dashed',
name: (_d = (_c = t.name) !== null && _c !== void 0 ? _c : t.value) !== null && _d !== void 0 ? _d : 0,
},
yAxis: (_e = t.value) !== null && _e !== void 0 ? _e : 0,
}, { yAxis: 0 }];
}),
...((_q = this.innerOptions.markers) !== null && _q !== void 0 ? _q : [])
.filter(t => !!t.fill)
.map(t => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
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: 'insideTop', distance: 5, show: !!t.name },
name: (_f = (_e = t.name) !== null && _e !== void 0 ? _e : t.value) !== null && _f !== void 0 ? _f : 0,
xAxis: ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0),
},
{
itemStyle: {
color: ColorLib.transparentize((_g = t.color) !== null && _g !== void 0 ? _g : '#D81B60', t.fill ? (_h = t.alpha) !== null && _h !== void 0 ? _h : 0.5 : 0),
borderType: (_j = t.type) !== null && _j !== void 0 ? _j : 'dashed',
},
xAxis: ((t.start / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0),
}];
}),
];
const markLine = [
...((_r = this.innerOptions.markers) !== null && _r !== void 0 ? _r : [])
.filter(t => !t.fill)
.map(t => {
var _a, _b, _c, _d, _e;
return {
name: (_b = (_a = t.name) !== null && _a !== void 0 ? _a : t.value) !== null && _b !== void 0 ? _b : 0,
label: { color: (_c = t.color) !== null && _c !== void 0 ? _c : '#D81B60', position: 'insideEndTop', formatter: '{b}', show: !!t.name },
lineStyle: { color: (_d = t.color) !== null && _d !== void 0 ? _d : '#D81B60', type: (_e = t.type) !== null && _e !== void 0 ? _e : 'dashed' },
xAxis: ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0),
};
})
];
if (markArea.length > 0 || markLine.length > 0) {
series.push({
name: '',
type: 'line',
symbolSize: 0,
data: [],
markArea: { data: markArea },
markLine: {
emphasis: { lineStyle: { width: 1 } },
symbol: ['none', 'none'],
data: markLine,
},
});
}
this.displayExpander = series.length > 1 && !!this.innerOptions.displayExpander;
if (hasTimeBounds) {
this.timeBounds.emit({ min, max });
}
this.height = 50 + (linesCount * (this.expanded ? 26 : 35)) + (this.innerOptions.showLegend ? 30 : 0) + (this.innerOptions.fullDateDisplay ? 50 : 0);
(_s = this.LOG) === null || _s === void 0 ? void 0 : _s.debug(['convert'], {
expanded: this.expanded,
series,
height: this.height,
linesCount,
opts: this.innerOptions,
});
const opts = Object.assign({ animation: false, grid: {
height: this.height - (this.innerOptions.showLegend ? 60 : 30) - (this.innerOptions.fullDateDisplay ? 40 : 0),
right: 10,
top: 20,
bottom: (this.innerOptions.showLegend ? 30 : 10) + (this.innerOptions.fullDateDisplay ? 0 : 0),
left: (!!this.innerOptions.leftMargin && this.innerOptions.leftMargin > this.leftMargin)
? this.innerOptions.leftMargin - this.leftMargin + 10
: 10,
containLabel: true,
}, throttle: 70, tooltip: {
trigger: 'axis',
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: (_t = this.innerOptions.tooltipDelay) !== null && _t !== void 0 ? _t : 100,
formatter: (params) => {
var _a, _b;
if ('profile' === this.type) {
return `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">
${this.innerOptions.timeMode === 'timestamp'
? params[0].value[1]
: ((_a = GTSLib.toISOString(GTSLib.zonedTimeToUtc(params[0].value[1], 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat)) !== null && _a !== void 0 ? _a : '')
.replace('T', ' ').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')}
</div>
${params[0].marker}
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${GTSLib.getName(params[0].seriesName)}</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${this.innerOptions.timeMode === 'date' || this.innerOptions.timeMode === 'duration'
? GTSLib.toDuration(params[0].value[3], this.divider)
: String(params[0].value[3]) + (this.innerOptions.unit ? ' ' + this.innerOptions.unit : '')}</span>`;
}
else if ('annotation' === this.type) {
return `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${this.innerOptions.timeMode === 'timestamp'
? params[0].value[0]
: ((_b = GTSLib.toISOString(GTSLib.zonedTimeToUtc(params[0].value[0], 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat)) !== null && _b !== void 0 ? _b : '')
.replace('T', ' ').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')}</div>
${params.map(s => {
const value = this.gtsList[s.seriesIndex].v[s.dataIndex];
return `${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">${value[value.length - 1]}</span>`;
}).join('<br>')}`;
}
},
axisPointer: {
axis: 'x',
type: 'line',
animation: false,
lineStyle: {
color: Utils.getCSSColor(this.el, '--warp-view-bar-color', 'red'),
},
},
position: (pos, params, el, elRect, size) => {
const obj = { top: this.expanded ? pos[1] - 25 : 10 };
const p = params[0];
if (this.hasFocus) {
const date = this.innerOptions.timeMode === 'date'
? GTSLib.zonedTimeToUtc(p.value[1], 1, this.innerOptions.timeZone) * this.divider
: p.value[1];
if (this.focusDate !== date) {
this.dataPointOver.emit({
date,
name: GTSLib.getName(p.seriesName),
value: p.value[3],
meta: {},
});
this.focusDate = date;
}
}
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
}, toolbox: {
show: this.innerOptions.showControls,
feature: {
saveAsImage: { type: 'png', excludeComponents: ['toolbox'] },
dataZoom: { show: true, filterMode: 'none' },
restore: { show: true },
},
}, xAxis: {
show: !this.innerOptions.hideXAxis,
type: this.innerOptions.timeMode === 'date' ? 'time' : 'value',
splitNumber: Math.max(Math.floor(Utils.getContentBounds(this.el.parentElement).w / 100) - 1, 1),
splitLine: { show: false, lineStyle: { color: Utils.getGridColor(this.el) } },
axisLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLabel: {
hideOverlap: true,
color: Utils.getLabelColor(this.el),
formatter: 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,
show: !this.innerOptions.hideXAxis,
},
axisTick: { show: true, lineStyle: { color: Utils.getGridColor(this.el) } },
scale: !(this.innerOptions.bounds && (!!this.innerOptions.bounds.minDate || !!this.innerOptions.bounds.maxDate)),
min: ((_u = this.innerOptions.bounds) === null || _u === void 0 ? void 0 : _u.minDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.minDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.minDate
: undefined,
max: ((_v = this.innerOptions.bounds) === null || _v === void 0 ? void 0 : _v.maxDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.maxDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.maxDate
: undefined,
}, yAxis: {
show: !this.innerOptions.hideYAxis,
axisLabel: this.expanded ? {
hideOverlap: true,
color: Utils.getLabelColor(this.el),
show: !this.innerOptions.hideYAxis && !this.innerOptions.showLegend,
} : { show: false },
type: 'category',
data: categories.length === 0 ? ['-'] : categories,
splitNumber: Math.max(categories.length, 1),
interval: 1,
boundaryGap: [0, 0],
splitLine: { show: true, lineStyle: { color: Utils.getGridColor(this.el) } },
axisLine: {
lineStyle: {
color: Utils.getGridColor(this.el),
},
},
}, 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: [
this.innerOptions.showRangeSelector ? {
type: 'slider',
height: '20px',
filterMode: 'none',
} : undefined,
{
type: 'inside',
filterMode: 'none',
},
], series }, (_y = (_x = (_w = this.innerOptions) === null || _w === void 0 ? void 0 : _w.extra) === null || _x === void 0 ? void 0 : _x.chartOpts) !== null && _y !== void 0 ? _y : {});
((_z = this.innerOptions.actions) !== null && _z !== void 0 ? _z : []).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;
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
this.parsing = false;
this.rendering = true;
let initial = false;
this.myChart = init(this.graph, null, {
width: this.width,
height: this.height,
});
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) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { start, end } = (_b = ((_a = event.batch) !== null && _a !== void 0 ? _a : [])[0]) !== null && _b !== void 0 ? _b : {};
if (start && end) {
this.dataZoom.emit({
start,
end,
min: (_d = (_c = this.innerOptions.bounds) === null || _c === void 0 ? void 0 : _c.minDate) !== null && _d !== void 0 ? _d : (_e = this.bounds) === null || _e === void 0 ? void 0 : _e.min,
max: (_g = (_f = this.innerOptions.bounds) === null || _f === void 0 ? void 0 : _f.maxDate) !== null && _g !== void 0 ? _g : (_h = this.bounds) === null || _h === void 0 ? void 0 : _h.max,
});
}
});
this.myChart.on('restore', () => {
var _a, _b, _c, _d, _e, _f;
this.dataZoom.emit({
start: 0,
end: 100,
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,
});
});
this.el.addEventListener('dblclick', () => this.myChart.dispatchAction({
type: 'dataZoom',
start: 0,
end: 100,
}));
this.el.addEventListener('mouseover', () => this.hasFocus = true);
this.myChart.on('mouseover', (event) => {
this.dataPointOver.emit({
date: event.value[0],
name: GTSLib.getName(event.seriesName),
value: event.value[1],
meta: {},
});
});
this.myChart.on('click', (event) => {
this.dataPointSelected.emit({
date: event.value[0],
name: GTSLib.getName(event.seriesName),
value: event.value[1],
meta: {},
});
});
this.el.addEventListener('mouseout', () => {
this.hasFocus = false;
this.dataPointOver.emit({});
});
initial = true;
this.setOpts();
}
async setZoom(dataZoom) {
if (this.myChart) {
this.myChart.dispatchAction(Object.assign(Object.assign({ type: 'dataZoom' }, dataZoom), { dataZoomIndex: 1 }));
}
return Promise.resolve();
}
async export(type = 'png') {
return Promise.resolve(this.myChart ? this.myChart.getDataURL({
type,
excludeComponents: ['toolbox'],
}) : undefined);
}
async setFocus(regexp, ts) {
var _a;
if (!this.myChart || this.gtsList.length === 0)
return;
if (typeof ts === 'string')
ts = parseInt(ts, 10);
let ttp = [];
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 => {
seriesIndex = this.chartOpts.series.indexOf(s);
const data = s.data.filter((d) => d[1] === date);
if (data && data[0]) {
dataIndex = s.data.indexOf(data[0]);
s.markPoint = {
symbol: 'rect',
symbolSize: [4, 30],
data: [{
name: s.name,
itemStyle: {
color: '#fff',
borderColor: s.itemStyle.color,
},
yAxis: data[0][0],
xAxis: date,
}],
};
ttp = [date, data[0][0]];
}
});
this.myChart.dispatchAction({
type: 'highlight',
seriesName: this.chartOpts.series
.filter(s => new RegExp(regexp).test(GTSLib.getName(s.name)))
.map(s => GTSLib.getName(s.name)),
});
}
this.chartOpts.xAxis.axisPointer = Object.assign(Object.assign({}, (_a = this.chartOpts.xAxis.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: date, status: 'show' });
this.chartOpts.tooltip.show = true;
if (ttp.length > 0) {
this.myChart.dispatchAction({ type: 'showTip', dataIndex, seriesIndex });
}
else {
this.myChart.dispatchAction({ type: 'hideTip' });
}
this.setOpts();
return Promise.resolve();
}
async unFocus() {
var _a, _b;
if (!this.myChart)
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) !== null && _b !== void 0 ? _b : {}), { status: 'hide' });
this.myChart.dispatchAction({ type: 'hideTip' });
this.setOpts();
return Promise.resolve();
}
hideMarkers() {
if (!this.myChart)
return;
this.chartOpts.series.forEach(s => s.markPoint = undefined);
this.setOpts();
}
render() {
return h("div", { key: '60a2d340dfcacce86395b056f32ced99a3eec105', style: {
width: `${this.width}px`,
maxHeight: `${(this.height + (this.expanded ? 50 : 30))}px`,
height: `${(this.height + (this.expanded ? 50 : 30))}px`,
} }, h("div", { key: '23472e650b109bd6b5b58c03719f4f696476a8a9', class: "chart-wrapper" }, this.displayExpander
?
h("button", { class: "expander", onClick: () => this.toggle(), title: "collapse/expand" }, "+/-")
: '', h("div", { key: 'f7da234cfce8e37cf575dc02a7adc9b5dfd59b5c', class: "chart-area", style: {
width: `${this.width}px`,
height: `${(this.height + (this.innerOptions.showLegend ? 50 : 0) + (this.innerOptions.fullDateDisplay ? 50 : 0))}px`,
maxHeight: `${(this.height + (this.innerOptions.showLegend ? 50 : 0) + (this.innerOptions.fullDateDisplay ? 50 : 0))}px`,
// maxHeight: `${(this.height + (this.expanded ? 50 : 30))}px`,
} }, this.parsing ? h("div", { class: "discovery-chart-spinner" }, h("discovery-spinner", null, "Parsing data...")) : '', this.rendering ? h("div", { class: "discovery-chart-spinner" }, h("discovery-spinner", null, "Rendering data...")) : '', h("div", { key: '211aa79160535559fc904da4271b47dc8c070afe', ref: (el) => this.graph = el, onMouseOver: () => this.hideMarkers() }))));
}
toggle() {
var _a;
this.expanded = !this.expanded;
this.chartOpts = this.convert((_a = this.result) !== null && _a !== void 0 ? _a : new DataModel());
setTimeout(() => this.setOpts(true));
}
get el() { return this; }
static get watchers() { return {
"vars": ["varsUpdate"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoveryProfileStyle0; }
}, [1, "discovery-profile", {
"result": [1025],
"type": [1],
"options": [1],
"width": [2],
"height": [32],
"debug": [4],
"unit": [1],
"url": [1],
"language": [1],
"vars": [1],
"parsing": [32],
"rendering": [32],
"chartOpts": [32],
"expanded": [32],
"innerOptions": [32],
"resize": [64],
"show": [64],
"hide": [64],
"hideById": [64],
"showById": [64],
"setZoom": [64],
"export": [64],
"setFocus": [64],
"unFocus": [64]
}, undefined, {
"vars": ["varsUpdate"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-profile", "discovery-spinner"];
components.forEach(tagName => { switch (tagName) {
case "discovery-profile":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryProfile);
}
break;
case "discovery-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoveryProfile as D, defineCustomElement as d };
//# sourceMappingURL=discovery-profile2.js.map