@senx/discovery-widgets
Version:
Discovery Widgets Elements
780 lines (776 loc) • 37.8 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { b as DataModel } from './types.js';
import { P as Param, U as Utils, G as GTSLib, L as Logger, v as v4 } from './utils.js';
import { 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 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */:host>div{width:100%;height:100%;position:relative;overflow-y:auto;overflow-x:hidden;padding-right:15px}:host>div .chart-wrapper{height:100%;position:absolute;width:calc(100% - 20px)}:host>div>div{width:100%;height:100%}:host .wv-tooltip{max-width:300px}:host .wv-tooltip div{word-wrap:anywhere}";
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.innerWidth = 0;
this.innerHeight = 0;
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;
this.chartOpts = this.convert(GTSLib.getData(this.result) || new DataModel());
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['updateRes'], { chartOpts: this.chartOpts });
setTimeout(() => {
if (this.myChart) {
this.myChart.resize({ width: this.width, height: this.height });
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 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();
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a;
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(this.innerOptions.timeUnit || 'us');
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], { type: this.type, options: this.innerOptions });
this.chartOpts = this.convert(this.result || new DataModel());
}
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; return this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, notMerge, true); });
}
convert(data) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
let options = Utils.mergeDeep(this.defOptions, this.innerOptions || {});
options = Utils.mergeDeep(options || {}, data.globalParams);
this.innerOptions = Utils.clone(options);
this.innerOptions.timeMode = this.innerOptions.timeMode || 'date';
const series = [];
const categories = [];
const gtsList = GTSLib.flatDeep(GTSLib.flattenGtsIdArray(data.data, 0).res);
this.gtsList = [];
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.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 = (_d = (_c = ((_b = data.params) !== null && _b !== void 0 ? _b : [])[i]) === null || _c === void 0 ? void 0 : _c.datasetNoAlpha) !== null && _d !== void 0 ? _d : this.innerOptions.datasetNoAlpha;
if (GTSLib.isGts(gts) && !!gts.v) {
this.gtsList.push(gts);
const name = ((data.params || [])[i] || { key: undefined }).key || GTSLib.serializeGtsMetadata(gts);
const c = ColorLib.getColor(gts.id, this.innerOptions.scheme);
const color = ((data.params || [])[i] || { datasetColor: c }).datasetColor || 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
(data.data || []).forEach((d, i) => {
var _a, _b, _c;
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.values || {};
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 = ((values.params || [])[id] || { datasetColor: c }).datasetColor || 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 = [...(this.innerOptions.thresholds || [])
.filter(t => !!t.fill)
.map(t => {
return [{
itemStyle: {
color: ColorLib.transparentize(t.color || '#D81B60', t.fill ? 0.5 : 0),
borderType: t.type || 'dashed',
name: t.name || t.value || 0,
},
yAxis: t.value || 0,
}, { yAxis: 0 }];
}),
...(this.innerOptions.markers || [])
.filter(t => !!t.fill)
.map(t => {
return [{
itemStyle: {
color: ColorLib.transparentize(t.color || '#D81B60', t.fill ? t.alpha || 0.5 : 0),
borderType: t.type || 'dashed',
},
label: { color: t.color || '#D81B60', position: 'insideTop', distance: 5, show: !!t.name },
name: t.name || t.value || 0,
xAxis: ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0),
},
{
itemStyle: {
color: ColorLib.transparentize(t.color || '#D81B60', t.fill ? t.alpha || 0.5 : 0),
borderType: t.type || 'dashed',
},
xAxis: ((t.start / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0),
}];
}),
];
const markLine = [
...(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' },
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 : 30)) + (this.innerOptions.showLegend ? 30 : 0) + (this.innerOptions.fullDateDisplay ? 50 : 0);
(_e = this.LOG) === null || _e === void 0 ? void 0 : _e.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: this.innerOptions.tooltipDelay || 100,
formatter: (params) => {
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]
: (GTSLib.toISOString(GTSLib.zonedTimeToUtc(params[0].value[1], 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat) || '')
.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]
: (GTSLib.toISOString(GTSLib.zonedTimeToUtc(params[0].value[0], 1, this.innerOptions.timeZone), 1, this.innerOptions.timeZone, this.innerOptions.timeFormat) || '')
.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: ((_f = this.innerOptions.bounds) === null || _f === void 0 ? void 0 : _f.minDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.minDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.minDate
: undefined,
max: ((_g = this.innerOptions.bounds) === null || _g === void 0 ? void 0 : _g.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 }, ((_j = (_h = this.innerOptions) === null || _h === void 0 ? void 0 : _h.extra) === null || _j === void 0 ? void 0 : _j.chartOpts) || {});
((_k = this.innerOptions.actions) !== null && _k !== void 0 ? _k : []).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;
const { start, end } = (event.batch || [])[0] || {};
if (start && end) {
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),
});
}
});
this.myChart.on('restore', () => {
var _a, _b, _c, _d;
this.dataZoom.emit({
start: 0,
end: 100,
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),
});
});
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) {
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 || 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(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({}, this.chartOpts.xAxis.axisPointer || {}), { 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() {
if (!this.myChart)
return;
this.chartOpts.series.forEach(s => s.markPoint = undefined);
this.chartOpts.xAxis.axisPointer = Object.assign(Object.assign({}, this.chartOpts.xAxis.axisPointer || {}), { status: 'hide' });
this.chartOpts.yAxis.axisPointer = Object.assign(Object.assign({}, this.chartOpts.yAxis.axisPointer || {}), { 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: '23ebbf18658467bfdd000ceadd5b16b102c5b474', style: {
width: `${this.width}px`,
maxHeight: `${(this.height + (this.expanded ? 50 : 30))}px`,
} }, h("div", { key: '5ac4d0ebde1023076d550218955a6b1480bba0b7', class: "chart-wrapper" }, this.displayExpander
?
h("button", { class: "expander", onClick: () => this.toggle(), title: "collapse/expand" }, "+/-")
: '', h("div", { key: '0f0e87e94518ef2d089fc03e83c0f3c8d552e6e2', class: "chart-area", style: {
width: `${this.width}
px`,
height: `${(this.height + (this.innerOptions.showLegend ? 50 : 0) + (this.innerOptions.fullDateDisplay ? 50 : 0))}
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: '3158a3cbe61b8adfcc0b2126d432eb3588f85f02', ref: (el) => this.graph = el, onMouseOver: () => this.hideMarkers() }))));
}
toggle() {
this.expanded = !this.expanded;
this.chartOpts = this.convert(this.result || new DataModel());
setTimeout(() => {
this.myChart.resize({
width: this.width,
height: this.height,
});
this.setOpts();
});
}
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