@senx/discovery-widgets
Version:
Discovery Widgets Elements
1,223 lines • 50.8 kB
JavaScript
/*
* Copyright 2022-2025 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h, Host } from "@stencil/core";
import { DataModel } from "../../model/types";
import { Param } from "../../model/param";
import { graphic, init } 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 { v4 } from "uuid";
import _ from "lodash";
export class DiscoveryAnnotation {
constructor() {
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.leftMargin = 0;
this.MAX_MARGIN = 1024;
this.pois = [];
this.innerWidth = 0;
this.innerHeight = 0;
this.innerVars = {};
this.restoreZoomHandler = _.throttle(() => {
this.dataZoom.emit({ type: 'restore' });
}, 100, { 'trailing': false });
}
static renderItem(params, api) {
const y = +api.value(0);
const start = api.coord([+api.value(1), y]);
const height = api.size([0, 1])[1];
const width = 1;
const coordSys = params.coordSys;
const rectShape = graphic.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() {
this.chartOpts = this.convert(GTSLib.getData(this.result) || new DataModel());
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(DiscoveryAnnotation, 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());
this.setOpts();
}
setOpts(notMerge = false) {
var _a, _b;
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
else if (this.vars) {
this.innerVars = this.vars;
}
if ((((_a = this.chartOpts) === null || _a === void 0 ? void 0 : _a.series) || []).length === 0) {
this.chartOpts.title = {
show: true,
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 20 },
text: this.innerOptions.noDataLabel || '',
left: 'center',
top: 'center',
};
this.chartOpts.xAxis = { show: false };
this.chartOpts.yAxis = { show: false };
this.chartOpts.tooltip = { show: false };
}
else {
this.chartOpts.title = Object.assign(Object.assign({}, (_b = this.chartOpts.title) !== null && _b !== void 0 ? _b : {}), { show: false });
}
setTimeout(() => {
if (this.myChart) {
this.myChart.setOption(this.chartOpts || {}, notMerge, true);
}
});
}
convert(data) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
let options = Utils.mergeDeep(this.defOptions, (_a = this.innerOptions) !== null && _a !== void 0 ? _a : {});
options = Utils.mergeDeep(options, (_b = data.globalParams) !== null && _b !== void 0 ? _b : {});
this.innerOptions = Utils.clone(Object.assign(Object.assign({}, options), { leftMargin: this.innerOptions.leftMargin }));
this.innerOptions.timeMode = (_c = this.innerOptions.timeMode) !== null && _c !== void 0 ? _c : 'date';
const series = [];
const categories = [];
const gtsList = GTSLib.flatDeep(GTSLib.flattenGtsIdArray(data.data, 0).res);
this.gtsList = [];
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['convert'], { options: this.innerOptions, gtsList });
const gtsCount = gtsList.length;
let linesCount = 1;
let catId = 0;
let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER;
let hasTimeBounds = false;
if (max <= 1000 && min >= -1000 && min !== Number.MAX_SAFE_INTEGER && max !== Number.MIN_SAFE_INTEGER) {
this.innerOptions.timeMode = 'timestamp';
}
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
if (GTSLib.isGtsToAnnotate(gts) && !!gts.v) {
this.gtsList.push(gts);
const dataSet = [];
for (let v = 0; v < ((_e = gts.v) !== null && _e !== void 0 ? _e : []).length; v++) {
const tuple = gts.v[v];
const ts = tuple[0];
const val = tuple[tuple.length - 1];
if (ts > max)
max = ts;
if (ts < min)
min = ts;
let startTS = ts;
startTS = this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(startTS, this.divider, this.innerOptions.timeZone)
: startTS;
dataSet.push([catId, startTS, val]);
}
const c = ColorLib.getColor(gts.id, this.innerOptions.scheme);
const color = ((data.params || [])[i] || { datasetColor: c }).datasetColor || c;
const name = ((data.params || [])[i] || { key: undefined }).key || GTSLib.serializeGtsMetadata(gts);
if (this.expanded) {
linesCount++;
categories.push(name);
}
hasTimeBounds = true;
series.push({
type: 'custom',
name: GTSLib.setName(gts.id, name),
data: dataSet,
animation: false,
id: gts.id,
large: true,
clip: false,
showAllSymbol: false,
renderItem: DiscoveryAnnotation.renderItem.bind(this),
itemStyle: { color },
encode: { x: 1, y: 0 },
});
if (this.expanded)
catId++;
}
}
this.displayExpander = series.length > 1 && !!this.innerOptions.displayExpander;
if (hasTimeBounds) {
this.timeBounds.emit({ min, max });
this.bounds = { min, max };
}
this.height = 50 + (linesCount * (this.expanded ? 26 : 30)) + (this.innerOptions.showLegend ? 30 : 0) + (this.innerOptions.fullDateDisplay ? 50 : 0);
(_f = this.LOG) === null || _f === void 0 ? void 0 : _f.debug(['convert'], {
expanded: this.expanded,
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 !== undefined && this.innerOptions.leftMargin > this.leftMargin)
? this.innerOptions.leftMargin
: (_g = this.leftMargin) !== null && _g !== void 0 ? _g : 10,
containLabel: true,
}, throttle: 70, tooltip: {
trigger: 'axis',
transitionDuration: 0,
formatter: (params) => {
var _a;
return `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${this.innerOptions.timeMode !== 'date'
? 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.map(s => {
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">${s.value[2]}</span>`;
}).join('<br>')}`;
},
axisPointer: {
axis: 'x',
type: 'line',
animation: false,
lineStyle: {
color: Utils.getCSSColor(this.el, '--warp-view-bar-color', 'red'),
},
},
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: this.innerOptions.tooltipDelay || 100,
position: (pos, params, el, elRect, size) => {
var _a, _b;
const obj = { top: 10 };
if (this.hasFocus) {
const date = this.innerOptions.timeMode === 'date'
? GTSLib.zonedTimeToUtc(((_a = params[0]) === null || _a === void 0 ? void 0 : _a.axisValue) || 0, 1, this.innerOptions.timeZone) * this.divider
: ((_b = params[0]) === null || _b === void 0 ? void 0 : _b.axisValue) || 0;
const regexp = '(' + params.map(s => s.seriesName).join('|') + ')';
if (this.focusDate !== date) {
this.dataPointOver.emit({ date, name: regexp, value: params.map(p => p.value[2]), 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'] },
restore: { show: true },
},
}, xAxis: {
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,
},
axisTick: { show: true, lineStyle: { color: Utils.getGridColor(this.el) } },
scale: !(this.innerOptions.bounds && (!!this.innerOptions.bounds.minDate || !!this.innerOptions.bounds.maxDate)),
min: ((_h = this.innerOptions.bounds) === null || _h === void 0 ? void 0 : _h.minDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.minDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.minDate
: undefined,
max: ((_j = this.innerOptions.bounds) === null || _j === void 0 ? void 0 : _j.maxDate) !== undefined
? this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(this.innerOptions.bounds.maxDate, this.divider, this.innerOptions.timeZone)
: this.innerOptions.bounds.maxDate
: undefined,
}, yAxis: {
show: true,
axisTick: { show: false },
axisLabel: {
hideOverlap: true,
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 }, ((_l = (_k = this.innerOptions) === null || _k === void 0 ? void 0 : _k.extra) === null || _l === void 0 ? void 0 : _l.chartOpts) || {});
((_m = this.innerOptions.actions) !== null && _m !== void 0 ? _m : []).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;
}
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.dataPointSelected.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.dataPointOver.emit({ date: ts, name: '.*', meta: {} });
}
break;
default:
break;
}
}
}, 100, { leading: true, trailing: true });
this.parsing = false;
this.rendering = true;
let initial = false;
this.myChart = init(this.graph, null, {
width: this.width,
height: this.height,
renderer: 'canvas',
});
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 < this.innerOptions.leftMargin || this.MAX_MARGIN) {
setTimeout(() => {
if (x !== this.MAX_MARGIN) {
this.leftMarginComputed.emit(x);
this.leftMargin = x;
}
});
}
if (initial)
setTimeout(() => this.draw.emit());
initial = false;
});
});
this.myChart.on('highlight', (event) => {
let ts;
let v;
const series = [];
(event.batch || []).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;
v = s.data[b.dataIndex][1];
series.push(GTSLib.getName(s.name));
});
if (ts !== undefined) {
this.dataPointOver.emit({ date: ts, name: '(' + series.join('|') + ')', value: v, meta: {} });
}
});
this.myChart.on('click', (event) => {
const c = event.data.coord || event.data;
const date = this.innerOptions.timeMode === 'date'
? GTSLib.zonedTimeToUtc(c[0], 1, this.innerOptions.timeZone) * this.divider
: c[0];
if (event.componentType !== 'markLine') {
this.dataPointSelected.emit({ date, name: GTSLib.getName(event.seriesName), value: c[2], meta: {} });
}
if (this.innerOptions.poi) {
if (this.pois.find(p => p.date === c[1])) {
this.pois = this.pois.filter(p => p.date !== c[1]);
}
else if (event.componentType !== 'markLine') {
this.pois.push({ date, name: GTSLib.getName(event.seriesName), value: c[2], meta: {}, uid: v4() });
}
this.chartOpts.series = this.chartOpts.series.filter(s => 'poi' !== s.id);
this.poi.emit(this.pois);
this.chartOpts.series.push({
id: 'poi',
name: '',
type: 'line',
data: [],
markLine: {
emphasis: { lineStyle: { width: 1 } },
symbol: ['none', 'pin'],
symbolSize: 20,
symbolKeepAspect: true,
data: this.pois.map(p => ({
name: 'poi-' + p.uid,
label: { show: false },
lineStyle: { color: this.innerOptions.poiColor, type: this.innerOptions.poiLine },
xAxis: this.innerOptions.timeMode === 'date'
? GTSLib.utcToZonedTime(p.date / this.divider, 1, this.innerOptions.timeZone)
: p.date,
})),
},
});
setTimeout(() => { var _a; return this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, true, false); });
}
});
this.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.restoreZoomHandler());
this.myChart.on('mouseout', () => {
this.dataPointOver.emit({});
});
this.myChart.on('mouseover', (event) => focusHandler('mouseover', event));
this.myChart.on('highlight', (event) => focusHandler('highlight', event));
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({});
});
initial = true;
this.setOpts();
}
async setZoom(dataZoom) {
if (this.myChart) {
if ('restore' === dataZoom.type) {
this.myChart.dispatchAction({ type: 'restore' });
}
else {
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 || this.hasFocus)
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 || this.hasFocus)
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(Host, { key: 'cd649405982ccd5515a7541f5a9053721ded2118', style: { width: `${this.width}px`, height: `${(this.height + (this.expanded ? 50 : 0))}px` } }, this.displayExpander
?
h("button", { class: "expander", onClick: () => this.toggle(), title: "collapse/expand" }, "+/-")
: '', h("div", { key: 'edb0fb3d5404c666f334fe9dcb7e8686f15e7665', 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: 'ab375b50429a9f92b943979de599ee52bc371f2c', 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();
});
}
static get is() { return "discovery-annotation"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-annotation.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-annotation.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()"
},
"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": false,
"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 {
"height": {},
"parsing": {},
"rendering": {},
"chartOpts": {},
"expanded": {},
"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": "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": "leftMarginComputed",
"name": "leftMarginComputed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "poi",
"name": "poi",
"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": []
}
},
"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": []
}
},
"setZoom": {
"complexType": {
"signature": "(dataZoom: { start?: number; end?: number; type?: string; }) => Promise<void>",
"parameters": [{
"name": "dataZoom",
"type": "{ start?: number; end?: number; type?: string; }",
"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": []
}
},
"setFocus": {
"complexType": {
"signature": "(regexp: string, ts: number) => Promise<void>",
"parameters": [{
"name": "regexp",
"type": "string",
"docs": ""
}, {
"name": "ts",
"type": "number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"unFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise":