@senx/discovery-widgets
Version:
Discovery Widgets Elements
746 lines (742 loc) • 36.9 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 { i as init } from './index2.js';
import { C as ColorLib } from './color-lib.js';
import { d as defineCustomElement$1 } from './discovery-spinner2.js';
const discoveryBoxplotCss = "/*!\n * Copyright 2023 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%}:host>div>div{width:100%;height:100%}:host .wv-tooltip{max-width:300px}:host .wv-tooltip div{word-wrap:anywhere}";
const DiscoveryBoxplotStyle0 = discoveryBoxplotCss;
const DiscoveryBoxPlotComponent = /*@__PURE__*/ proxyCustomElement(class DiscoveryBoxPlotComponent extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.dataZoom = createEvent(this, "dataZoom", 7);
this.leftMarginComputed = createEvent(this, "leftMarginComputed", 7);
this.dataPointOver = createEvent(this, "dataPointOver", 7);
this.dataPointSelected = createEvent(this, "dataPointSelected", 7);
this.timeBounds = createEvent(this, "timeBounds", 7);
this.poi = createEvent(this, "poi", 7);
this.discoveryEvent = createEvent(this, "discoveryEvent", 7);
this.execError = createEvent(this, "execError", 7);
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.zoomXInfo = {};
this.innerVars = {};
}
varsUpdate(newValue, oldValue) {
var _a;
let vars = this.vars;
if (!!this.vars && typeof this.vars === 'string') {
vars = JSON.parse(this.vars);
}
if (!Utils.deepEqual(vars, this.innerVars)) {
this.innerVars = Utils.clone(vars);
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['varsUpdate'], { vars: this.vars, newValue, oldValue });
}
updateRes() {
this.chartOpts = this.convert(GTSLib.getData(this.result));
this.setOpts(true);
}
optionsUpdate(newValue, oldValue) {
var _a, _b;
(_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(this.result || new DataModel());
this.setOpts(true);
}
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.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;
this.parsing = true;
this.LOG = new Logger(DiscoveryBoxPlotComponent, this.debug);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
this.result = GTSLib.getData(this.result);
this.divider = GTSLib.getDivider(this.options.timeUnit || 'us');
this.chartOpts = this.convert(this.result || new DataModel());
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
chartOpts: this.chartOpts,
});
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['componentWillLoad'], this.el.parentElement.parentElement);
this.setOpts();
}
setOpts(notMerge = false) {
var _a, _b;
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
else if (this.vars) {
this.innerVars = this.vars;
}
if ((((_a = this.chartOpts) === null || _a === void 0 ? void 0 : _a.series) || []).length === 0) {
this.chartOpts.title = {
show: true,
textStyle: { color: Utils.getLabelColor(this.el), fontSize: 20 },
text: this.innerOptions.noDataLabel || '',
left: 'center',
top: 'center',
};
this.chartOpts.xAxis = { show: false };
this.chartOpts.yAxis = { show: false };
this.chartOpts.tooltip = { show: false };
}
else {
this.chartOpts.title = Object.assign(Object.assign({}, (_b = this.chartOpts.title) !== null && _b !== void 0 ? _b : {}), { show: false });
}
setTimeout(() => {
var _a;
if (this.myChart) {
this.myChart.setOption((_a = this.chartOpts) !== null && _a !== void 0 ? _a : {}, notMerge, true);
if (this.zoomXInfo.start !== undefined) {
this.myChart.dispatchAction({
type: 'dataZoom', start: this.zoomXInfo.start,
end: this.zoomXInfo.end,
dataZoomIndex: 0,
});
}
}
});
}
getCommonSeriesParam(color) {
var _a;
const isHorizontal = !!((_a = this.innerOptions.box) === null || _a === void 0 ? void 0 : _a.horizontal);
const datasetNoAlpha = this.innerOptions.datasetNoAlpha;
return {
emphasis: {
focus: 'series',
itemStyle: {
opacity: 0.8,
borderColor: color,
color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.8),
},
},
blur: {
lineStyle: { color },
itemStyle: {
opacity: 0.8,
borderColor: color,
color: {
type: 'linear', x: isHorizontal ? 1 : 0, y: 0, x2: 0, y2: isHorizontal ? 0 : 1,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
],
},
},
},
itemStyle: {
opacity: 0.8,
borderColor: color,
color: {
type: 'linear', x: isHorizontal ? 1 : 0, y: 0, x2: 0, y2: isHorizontal ? 0 : 1,
colorStops: [
{ offset: 0, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.3) },
{ offset: 1, color: ColorLib.transparentize(color, datasetNoAlpha ? 1 : 0.7) },
],
},
},
};
}
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;
let options = Utils.mergeDeep(this.defOptions, this.innerOptions || {});
options = Utils.mergeDeep(options || {}, data.globalParams);
this.innerOptions = Utils.clone(options);
const series = [];
let gtsList;
if (GTSLib.isArray(data.data)) {
data.data = GTSLib.flatDeep(data.data);
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['convert', 'isArray']);
if (data.data.length > 0 && GTSLib.isGts(data.data[0])) {
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['convert', 'isArray 2']);
gtsList = GTSLib.flattenGtsIdArray(data.data, 0).res;
}
else {
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['convert', 'isArray 3']);
gtsList = data.data;
}
}
else {
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['convert', 'not array']);
gtsList = [data.data];
}
(_e = this.LOG) === null || _e === void 0 ? void 0 : _e.debug(['convert'], { options: this.innerOptions, gtsList });
const gtsCount = gtsList.length;
let hasTimeBounds = false;
const axisLabels = [];
const opts = Object.assign({ animation: !!((_g = (_f = this.innerOptions) === null || _f === void 0 ? void 0 : _f.box) === null || _g === void 0 ? void 0 : _g.animate), grid: {
left: (!!this.innerOptions.leftMargin && this.innerOptions.leftMargin > this.leftMargin)
? this.innerOptions.leftMargin - this.leftMargin + 10
: 10,
top: !((_h = this.innerOptions.box) === null || _h === void 0 ? void 0 : _h.horizontal) && !!(this.unit || this.innerOptions.unit) ? 30 : 10,
bottom: this.innerOptions.showLegend
? ((_j = this.innerOptions.box) === null || _j === void 0 ? void 0 : _j.horizontal) && !!(this.unit || this.innerOptions.unit)
? 50
: 30
: ((_k = this.innerOptions.box) === null || _k === void 0 ? void 0 : _k.horizontal) && !!(this.unit || this.innerOptions.unit)
? 20
: 10,
right: 10,
containLabel: true,
}, visualMap: new Array(gtsCount), tooltip: {
trigger: 'item',
transitionDuration: 0,
axisPointer: { type: 'shadow' },
backgroundColor: Utils.getCSSColor(this.el, '--warp-view-tooltip-bg-color', 'white'),
hideDelay: this.innerOptions.tooltipDelay || 100,
}, toolbox: {
show: this.innerOptions.showControls,
feature: {
saveAsImage: { type: 'png', excludeComponents: ['toolbox'] },
restore: { show: true },
},
}, dataZoom: [
{
type: 'inside',
orient: 'vertical',
zoomOnMouseWheel: 'ctrl',
},
{
type: 'inside',
orient: 'horizontal',
zoomOnMouseWheel: true,
},
], series: [] }, ((_m = (_l = this.innerOptions) === null || _l === void 0 ? void 0 : _l.extra) === null || _m === void 0 ? void 0 : _m.chartOpts) || {});
((_o = this.innerOptions.actions) !== null && _o !== void 0 ? _o : []).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),
};
}
});
let minVal = Number.MAX_SAFE_INTEGER;
let maxVal = Number.MIN_SAFE_INTEGER;
let minTS = Number.MAX_SAFE_INTEGER;
let maxTS = Number.MIN_SAFE_INTEGER;
const seriesOpts = {
type: 'boxplot',
animation: !!((_q = (_p = this.innerOptions) === null || _p === void 0 ? void 0 : _p.box) === null || _q === void 0 ? void 0 : _q.animate),
label: {
show: !!this.innerOptions.showValues,
position: 'top',
color: Utils.getLabelColor(this.el),
fontSize: 14,
},
data: [],
// encode: !!this.innerOptions?.box?.horizontal ? { x: ['min', 'Q1', 'median', 'Q3', 'max'] } : undefined
};
for (let i = 0; i < gtsCount; i++) {
const gts = gtsList[i];
const c = ColorLib.getColor(gts.id || i, this.innerOptions.scheme);
const color = ((data.params || [])[i] || { datasetColor: c }).datasetColor || c;
if (GTSLib.isGtsToPlot(gts) && !!gts.v) {
this.isGTS = true;
const bounds = GTSLib.getBounds(gts.v);
minVal = Math.min(minVal, bounds.minVal);
minTS = Math.min(minTS, bounds.minTS);
maxVal = Math.max(maxVal, bounds.maxVal);
maxTS = Math.max(maxTS, bounds.maxTS);
hasTimeBounds = true;
const name = GTSLib.setName(gts.id, (((data.params || [])[i] || { key: undefined }).key || GTSLib.serializeGtsMetadata(gts)));
axisLabels.push(GTSLib.getName(name));
seriesOpts.data.push(Object.assign(Object.assign({}, this.getCommonSeriesParam(color)), { name: GTSLib.getName(name), id: gts.id, value: [
bounds.minVal,
this.quantile(bounds.rawVals, 0.25),
this.quantile(bounds.rawVals, 0.5),
this.quantile(bounds.rawVals, 0.75),
bounds.maxVal,
] }));
}
else if (!gts.v && gts.label && gts.values) {
this.innerOptions.timeMode = 'custom';
(_r = this.LOG) === null || _r === void 0 ? void 0 : _r.debug(['convert', 'gts'], gts);
axisLabels.push(gts.label);
const bounds = GTSLib.getMinMax(gts.values);
seriesOpts.data.push(Object.assign(Object.assign({}, this.getCommonSeriesParam(color)), { name: gts.label, id: i, value: [
bounds.minVal,
this.quantile(gts.values, 0.25),
this.quantile(gts.values, 0.5),
this.quantile(gts.values, 0.75),
bounds.maxVal,
] }));
}
}
opts.series.push(seriesOpts);
opts.yAxis = {
name: !((_t = (_s = this.innerOptions) === null || _s === void 0 ? void 0 : _s.box) === null || _t === void 0 ? void 0 : _t.horizontal) ? this.unit || this.innerOptions.unit : undefined,
data: !((_v = (_u = this.innerOptions) === null || _u === void 0 ? void 0 : _u.box) === null || _v === void 0 ? void 0 : _v.horizontal) ? undefined : axisLabels,
show: !this.innerOptions.hideYAxis,
emphasis: { focus: 'series' },
nameTextStyle: { color: Utils.getLabelColor(this.el) },
type: ((_x = (_w = this.innerOptions) === null || _w === void 0 ? void 0 : _w.box) === null || _x === void 0 ? void 0 : _x.horizontal) ? 'category' : 'value',
splitLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLabel: {
hideOverlap: true,
color: Utils.getLabelColor(this.el),
},
axisTick: { lineStyle: { color: Utils.getGridColor(this.el) } },
min: ((_z = (_y = this.innerOptions) === null || _y === void 0 ? void 0 : _y.box) === null || _z === void 0 ? void 0 : _z.horizontal)
? undefined
: this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[0] : undefined,
max: ((_1 = (_0 = this.innerOptions) === null || _0 === void 0 ? void 0 : _0.box) === null || _1 === void 0 ? void 0 : _1.horizontal)
? undefined
: this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[1] : undefined,
};
opts.xAxis = {
name: ((_3 = (_2 = this.innerOptions) === null || _2 === void 0 ? void 0 : _2.box) === null || _3 === void 0 ? void 0 : _3.horizontal) ? this.unit || this.innerOptions.unit : undefined,
data: ((_5 = (_4 = this.innerOptions) === null || _4 === void 0 ? void 0 : _4.box) === null || _5 === void 0 ? void 0 : _5.horizontal) ? undefined : axisLabels,
nameTextStyle: {
padding: [0, 10, -35, 0],
align: 'right',
verticalAlign: 'bottom',
},
show: !this.innerOptions.hideXAxis,
emphasis: { focus: 'series' },
type: ((_7 = (_6 = this.innerOptions) === null || _6 === void 0 ? void 0 : _6.box) === null || _7 === void 0 ? void 0 : _7.horizontal) ? 'value' : 'category',
axisLine: { lineStyle: { color: Utils.getGridColor(this.el) } },
axisLabel: {
hideOverlap: true,
show: !this.innerOptions.hideXAxis,
color: Utils.getLabelColor(this.el),
},
axisTick: { lineStyle: { color: Utils.getGridColor(this.el) } },
min: ((_9 = (_8 = this.innerOptions) === null || _8 === void 0 ? void 0 : _8.box) === null || _9 === void 0 ? void 0 : _9.horizontal)
? this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[0] : undefined
: undefined,
max: ((_11 = (_10 = this.innerOptions) === null || _10 === void 0 ? void 0 : _10.box) === null || _11 === void 0 ? void 0 : _11.horizontal)
? this.innerOptions.bounds && this.innerOptions.bounds.yRanges && this.innerOptions.bounds.yRanges.length > 0 ? this.innerOptions.bounds.yRanges[1] : undefined
: undefined,
};
if (hasTimeBounds) {
this.timeBounds.emit({ min: minTS, max: maxTS });
this.bounds = { min: minVal, max: maxVal };
}
(_12 = this.LOG) === null || _12 === void 0 ? void 0 : _12.debug(['convert', 'series'], series);
const markArea = [...(this.innerOptions.thresholds || [])
.map(t => {
var _a;
const m = [{ itemStyle: { color: ColorLib.transparentize(t.color || '#f44336', t.fill ? 0.3 : 0) } }, {}];
if ((_a = this.innerOptions.box) === null || _a === void 0 ? void 0 : _a.horizontal) {
m[0].xAxis = t.value || 0;
m[1].xAxis = 0;
m[0].name = `${t.value || 0}`;
m[0].label = { color: t.color || '#f44336', position: 'insideTopRight' };
}
else {
m[0].yAxis = t.value || 0;
m[1].yAxis = 0;
}
return m;
}),
...(this.innerOptions.markers || [])
.filter(t => !!t.fill)
.map(t => {
var _a, _b, _c, _d;
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: 'insideTopRight', distance: 5, show: !!t.name },
name: t.name || t.value || 0,
yAxis: ((_a = this.innerOptions.box) === null || _a === void 0 ? void 0 : _a.horizontal) ? ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
xAxis: !((_b = this.innerOptions.box) === null || _b === void 0 ? void 0 : _b.horizontal) ? ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
},
{
itemStyle: {
color: ColorLib.transparentize(t.color || '#D81B60', t.fill ? t.alpha || 0.5 : 0),
borderType: t.type || 'dashed',
},
yAxis: ((_c = this.innerOptions.box) === null || _c === void 0 ? void 0 : _c.horizontal) ? ((t.start / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
xAxis: !((_d = this.innerOptions.box) === null || _d === void 0 ? void 0 : _d.horizontal) ? ((t.start / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
}];
})];
const markLine = [...(this.innerOptions.thresholds || [])
.map(t => {
var _a;
const m = {
name: t.value || 0,
label: { color: t.color || '#f44336', position: 'insideEndTop' },
lineStyle: { color: t.color || '#f44336', type: 'dashed' },
};
if ((_a = this.innerOptions.box) === null || _a === void 0 ? void 0 : _a.horizontal) {
m.xAxis = t.value || 0;
m.label.show = false;
}
else {
m.yAxis = t.value || 0;
}
return m;
}),
...(this.innerOptions.markers || [])
.filter(t => !t.fill)
.map(t => {
var _a, _b;
return {
name: t.name || t.value || 0,
label: {
color: t.color || '#D81B60',
position: 'insideEndTop',
formatter: '{b}',
show: !!t.name,
},
lineStyle: { color: t.color || '#D81B60', type: t.type || 'dashed' },
yAxis: ((_a = this.innerOptions.box) === null || _a === void 0 ? void 0 : _a.horizontal) ? ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
xAxis: !((_b = this.innerOptions.box) === null || _b === void 0 ? void 0 : _b.horizontal) ? ((t.value / (this.innerOptions.timeMode === 'date' ? this.divider : 1)) || 0) : undefined,
};
})];
if (markLine.length > 0) {
opts.series.push({
name: '',
type: 'line',
symbolSize: 0,
data: [],
markArea: {
data: markArea,
},
markLine: {
emphasis: { lineStyle: { width: 1 } },
symbol: ['none', 'none'],
data: markLine,
},
});
}
this.parsing = false;
return opts;
}
quantile(ascArr, p) {
const H = (ascArr.length - 1) * p + 1;
const h = Math.floor(H);
const v = +ascArr[h - 1];
const e = H - h;
return e ? v + e * (ascArr[h] - v) : v;
}
zoomHandler(start, end) {
var _a, _b, _c, _d, _e, _f;
this.zoomXInfo = {
start,
end,
min: (_b = (_a = this.innerOptions.bounds) === null || _a === void 0 ? void 0 : _a.minDate) !== null && _b !== void 0 ? _b : (_c = this.bounds) === null || _c === void 0 ? void 0 : _c.min,
max: (_e = (_d = this.innerOptions.bounds) === null || _d === void 0 ? void 0 : _d.maxDate) !== null && _e !== void 0 ? _e : (_f = this.bounds) === null || _f === void 0 ? void 0 : _f.max,
orientation: 'x',
};
this.dataZoom.emit(this.zoomXInfo);
}
componentDidLoad() {
const zoomHandler = _.throttle((start, end) => this.zoomHandler(start, end), 16, { leading: true, trailing: true });
const focusHandler = _.throttle((type, event) => {
if (this.hasFocus) {
switch (type) {
case 'mouseover':
this.dataPointOver.emit({
date: undefined,
name: GTSLib.getName(event.data.name),
value: {
min: event.data.value[1],
Q1: event.data.value[2],
median: event.data.value[3],
Q3: event.data.value[4],
max: event.data.value[5],
},
meta: {},
});
break;
case 'highlight':
let ts;
(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;
});
if (ts !== undefined) {
this.dataPointSelected.emit({ date: ts, name: '.*', meta: {} });
}
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 = 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) => {
if (event.componentType !== 'markLine') {
this.dataPointSelected.emit({
date: undefined,
name: GTSLib.getName(event.data.name),
value: {
min: event.data.value[1],
Q1: event.data.value[2],
median: event.data.value[3],
Q3: event.data.value[4],
max: event.data.value[5],
},
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 !== null && ts !== void 0 ? ts : 0;
let seriesIndex = 0;
let dataIndex = 0;
if (regexp) {
this.chartOpts.series
.filter(s => new RegExp(regexp).test(GTSLib.getName(s.name)))
.forEach(s => {
const data = s.data.filter(d => d[0] === date);
if (data && data.length > 0 && data[0]) {
seriesIndex = this.chartOpts.series.indexOf(s);
dataIndex = s.data.indexOf(data[0]);
}
});
}
if (GTSLib.isArray(this.chartOpts.xAxis)) {
this.chartOpts.xAxis
.forEach(a => { var _a; return a.axisPointer = Object.assign(Object.assign({}, (_a = a.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: date, status: 'show' }); });
}
else {
this.chartOpts.xAxis.axisPointer = Object.assign(Object.assign({}, (_a = this.chartOpts.xAxis.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: date, status: 'show' });
}
if (GTSLib.isArray(this.chartOpts.yAxis)) {
this.chartOpts.yAxis
.forEach(a => { var _a; return a.axisPointer = Object.assign(Object.assign({}, (_a = a.axisPointer) !== null && _a !== void 0 ? _a : {}), { value: value !== null && value !== void 0 ? value : 0, status: 'show' }); });
}
else {
this.chartOpts.yAxis.axisPointer = Object.assign(Object.assign({}, (_b = this.chartOpts.yAxis.axisPointer) !== null && _b !== void 0 ? _b : {}), { value: value !== null && value !== void 0 ? value : 0, status: 'show' });
}
this.chartOpts.tooltip.show = true;
this.myChart.dispatchAction({ type: 'showTip', seriesIndex, dataIndex });
this.setOpts();
return Promise.resolve();
}
async unFocus() {
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();
}
render() {
return h("div", { key: 'd0409f4612f6541612ee23d08286579d5c2103d4', style: { width: '100%', height: '100%' } }, this.parsing ? h("discovery-spinner", null, "Parsing data...") : '', this.rendering ? h("discovery-spinner", null, "Rendering data...") : '', h("div", { key: 'f59b5fe8aea2b9ec4f9903c1ff9297927d792376', ref: (el) => this.graph = el }));
}
get el() { return this; }
static get watchers() { return {
"vars": ["varsUpdate"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoveryBoxplotStyle0; }
}, [1, "discovery-boxplot", {
"result": [1025],
"type": [1],
"options": [1],
"width": [2],
"height": [1026],
"debug": [4],
"unit": [1],
"url": [1],
"language": [1],
"vars": [1],
"parsing": [32],
"rendering": [32],
"innerOptions": [32],
"resize": [64],
"setZoom": [64],
"export": [64],
"show": [64],
"hide": [64],
"hideById": [64],
"showById": [64],
"setFocus": [64],
"unFocus": [64]
}, undefined, {
"vars": ["varsUpdate"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-boxplot", "discovery-spinner"];
components.forEach(tagName => { switch (tagName) {
case "discovery-boxplot":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryBoxPlotComponent);
}
break;
case "discovery-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoveryBoxPlotComponent as D, defineCustomElement as d };
//# sourceMappingURL=discovery-boxplot2.js.map