@senx/warpview
Version:
WarpView Elements
524 lines • 106 kB
JavaScript
/*
* Copyright 2021 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 { Component, ElementRef, EventEmitter, HostListener, Input, NgZone, Output, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import { WarpViewComponent } from '../warp-view-component';
import { WarpViewModalComponent } from '../warp-view-modal/warp-view-modal.component';
import { Param } from '../../model/param';
import { WarpViewChartComponent } from '../warp-view-chart/warp-view-chart.component';
import { WarpViewAnnotationComponent } from '../warp-view-annotation/warp-view-annotation.component';
import { WarpViewMapComponent } from '../warp-view-map/warp-view-map.component';
import { WarpViewGtsPopupComponent } from '../warp-view-gts-popup/warp-view-gts-popup.component';
import moment from 'moment-timezone';
import { GTSLib } from '../../utils/gts.lib';
import { Size, SizeService } from '../../services/resize.service';
import { Logger } from '../../utils/logger';
import { BehaviorSubject, forkJoin } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../services/resize.service";
import * as i2 from "../warp-view-modal/warp-view-modal.component";
import * as i3 from "../warp-view-gts-popup/warp-view-gts-popup.component";
import * as i4 from "../warp-view-toggle/warp-view-toggle.component";
import * as i5 from "../warp-view-gts-tree/warp-view-gts-tree.component";
import * as i6 from "../warp-view-annotation/warp-view-annotation.component";
import * as i7 from "../warp-view-resize/warp-view-resize.component";
import * as i8 from "../warp-view-spinner/warp-view-spinner.component";
import * as i9 from "../warp-view-chart/warp-view-chart.component";
import * as i10 from "../warp-view-map/warp-view-map.component";
import * as i11 from "@angular/common";
import * as i12 from "@angular/forms";
export class WarpViewPlotComponent extends WarpViewComponent {
constructor(el, renderer, sizeService, ngZone) {
super(el, renderer, sizeService, ngZone);
this.el = el;
this.renderer = renderer;
this.sizeService = sizeService;
this.ngZone = ngZone;
this.isAlone = false;
this.initialChartHeight = 400;
this.initialMapHeight = 400;
this.warpViewChartResize = new EventEmitter();
this.warpViewNewOptions = new EventEmitter();
this._options = {
...new Param(), ...{
showControls: true,
showGTSTree: true,
showDots: true,
timeZone: 'UTC',
timeUnit: 'us',
timeMode: 'date',
bounds: {}
}
};
this._toHide = [];
this.showChart = true;
this.showMap = false;
this.timeClipValue = '';
this.kbdLastKeyPressed = [];
this.warningMessage = '';
this.loading = false;
this.gtsIdList = [];
this.loadingChart = true;
this.kbdCounter = 0;
this.gtsFilterCount = 0;
this.gtsBrowserIndex = -1;
this._gtsFilter = 'x';
this._type = 'line';
this.chartBounds = {
tsmin: Number.MAX_VALUE,
tsmax: Number.MIN_VALUE,
msmax: '',
msmin: '',
marginLeft: 0
};
// key event are trapped in plot component.
// if one of this key is pressed, default action is prevented.
this.preventDefaultKeyList = ['Escape', '/'];
this.preventDefaultKeyListInModals = ['Escape', 'ArrowUp', 'ArrowDown', ' ', '/'];
this.showLine = false;
this.annotationScale = new BehaviorSubject(undefined);
this.chartScale = new BehaviorSubject(undefined);
this.LOG = new Logger(WarpViewPlotComponent, this._debug);
}
set type(type) {
this._type = type;
this.drawChart();
}
get type() {
return this._type;
}
set gtsFilter(gtsFilter) {
this._gtsFilter = gtsFilter;
this.drawChart();
}
get gtsFilter() {
return this._gtsFilter;
}
ngOnInit() {
this._options = this._options || this.defOptions;
forkJoin({ annotation: this.annotationScale, chart: this.chartScale })
.subscribe(r => {
const min = Math.min(r.annotation.min, r.chart.min);
const max = Math.max(r.annotation.max, r.chart.max);
this.LOG.debug(['ngOnInit', 'this.chartBounds'], { min, max }, r);
if (this.chartBounds
&& this.chartBounds.tsmin !== Math.min(this.chartBounds.tsmin, min)
&& this.chartBounds.tsmax !== Math.max(this.chartBounds.tsmax, max)) {
this.chartBounds.tsmin = Math.min(this.chartBounds.tsmin, min);
this.chartBounds.tsmax = Math.max(this.chartBounds.tsmax, max);
this.annotation.setRealBounds(this.chartBounds);
this.chart.setRealBounds(this.chartBounds);
this.LOG.debug(['ngOnInit', 'this.chartBounds'], this.chartBounds);
}
else {
this.chartDraw.emit();
}
});
}
ngAfterViewInit() {
this.drawChart(true);
this.resizeArea();
}
handleKeydown(ev) {
this.LOG.debug(['handleKeydown'], ev);
if (!this.isAlone) {
this.handleKeyPress(ev).then(() => {
// empty
});
}
}
stateChange(event) {
this.LOG.debug(['stateChange'], event);
switch (event.id) {
case 'timeSwitch':
this.loading = true;
if (event.state) {
this._options.timeMode = 'timestamp';
}
else {
this._options.timeMode = 'date';
}
this.warpViewNewOptions.emit(this._options);
setTimeout(() => this.drawChart(false));
break;
case 'typeSwitch':
this.loadingChart = true;
setTimeout(() => {
this._type = event.state ? 'step-after' : 'line';
this.drawChart(false);
}, 500);
break;
case 'chartSwitch':
this.loadingChart = true;
this.showChart = event.state;
setTimeout(() => this.drawChart(false));
break;
case 'mapSwitch':
this.showMap = event.state;
if (this.showMap) {
setTimeout(() => this.map.resize());
}
break;
}
}
boundsDidChange(event) {
this.LOG.debug(['updateBounds', 'boundsDidChange'], event);
this._options.bounds = this._options.bounds || {};
if (this._options.bounds.minDate !== event.bounds.min && this._options.bounds.maxDate !== event.bounds.max) {
this._options.bounds = this._options.bounds || {};
this._options.bounds.minDate = event.bounds.min;
this._options.bounds.maxDate = event.bounds.max;
this.warpViewNewOptions.emit(this._options);
if (event.source === 'chart') {
this.annotation.updateBounds(event.bounds.min, event.bounds.max, event.bounds.marginLeft);
}
else if (event.source === 'annotation') {
this.chart.updateBounds(event.bounds.min, event.bounds.max);
}
this.LOG.debug(['updateBounds', 'boundsDidChange', 'date'], this.divider, GTSLib.toISOString(event.bounds.min, this.divider, this._options.timeZone), GTSLib.toISOString(event.bounds.max, this.divider, this._options.timeZone));
this.LOG.debug(['updateBounds', 'boundsDidChange', 'timestamp'], event.bounds.min, event.bounds.max);
this.line.nativeElement.style.left = '-100px';
}
}
onWarpViewModalClose() {
this.mainPlotDiv.nativeElement.focus();
}
warpViewSelectedGTS(event) {
this.LOG.debug(['warpViewSelectedGTS'], event);
if (!this._toHide.find(i => {
return i === event.gts.id;
}) && !event.selected) { // if not in toHide and state false, put id in toHide
this._toHide.push(event.gts.id);
}
else {
if (event.selected) { // if in toHide and state true, remove it from toHide
this._toHide = this._toHide.filter(i => {
return i !== event.gts.id;
});
}
}
this.LOG.debug(['warpViewSelectedGTS', 'this._toHide'], this._toHide);
this.ngZone.run(() => {
this._toHide = [...this._toHide];
});
}
handleMouseMove(evt) {
evt.preventDefault();
if (this.showLine && this.line) {
this.line.nativeElement.style.left = Math.max(evt.pageX - this.left, 50) + 'px';
}
}
handleMouseEnter(evt) {
evt.preventDefault();
this.left = this.left || this.main.nativeElement.getBoundingClientRect().left;
this.showLine = true;
if (this.line) {
this.renderer.setStyle(this.line.nativeElement, 'display', 'block');
}
}
handleMouseOut(evt) {
// evt.preventDefault();
if (this.line) {
this.showLine = false;
this.renderer.setStyle(this.line.nativeElement, 'left', '-100px');
this.renderer.setStyle(this.line.nativeElement, 'display', 'none');
}
}
update(options, refresh) {
this.drawChart(refresh);
}
inputTextKeyboardEvents(e) {
e.stopImmediatePropagation();
if (e.key === 'Enter') {
this.applyFilter();
}
else if (e.key === 'Escape') {
this.pushKbdEvent('Escape');
this.modal.close();
}
}
tzSelected(event) {
const timeZone = this.tzSelector.nativeElement.value;
this.LOG.debug(['timezone', 'tzselect'], timeZone, event);
delete this._options.bounds;
this._options.timeZone = timeZone;
this.tzSelector.nativeElement.setAttribute('class', timeZone === 'UTC' ? 'defaulttz' : 'customtz');
this.drawChart();
}
getTimeClip() {
this.LOG.debug(['getTimeClip'], this.chart.getTimeClip());
return this.chart.getTimeClip();
}
resizeChart(event) {
if (this.initialChartHeight !== event) {
this.LOG.debug(['resizeChart'], event);
this.initialChartHeight = event;
this.sizeService.change(new Size(this.width, event));
}
}
drawChart(firstDraw = false) {
this.LOG.debug(['drawCharts'], this._data, this._options);
if (!this._data || !this._data.data || this._data.data.length === 0) {
return;
}
if (this.timeClip) {
this.timeClip.close();
}
if (this.modal) {
this.modal.close();
}
this.LOG.debug(['PPts'], 'firstdraw ', firstDraw);
if (firstDraw) { // on the first draw, we can set some default options.
// automatically switch to timestamp mode
// when the first tick and last tick of all the series are in the interval [-100ms 100ms]
const tsLimit = 100 * GTSLib.getDivider(this._options.timeUnit);
const dataList = this._data.data;
if (dataList) {
let gtsList = GTSLib.flattenGtsIdArray(dataList, 0).res;
gtsList = GTSLib.flatDeep(gtsList);
let timestampMode = true;
let totalDatapoints = 0;
gtsList.forEach(g => {
this.gtsIdList.push(g.id); // usefull for gts browse shortcut
if (g.v.length > 0) { // if gts not empty
timestampMode = timestampMode && (g.v[0][0] > -tsLimit && g.v[0][0] < tsLimit);
timestampMode = timestampMode && (g.v[g.v.length - 1][0] > -tsLimit && g.v[g.v.length - 1][0] < tsLimit);
totalDatapoints += g.v.length;
}
});
if (timestampMode) {
this._options.timeMode = 'timestamp';
}
this.LOG.debug(['drawCharts', 'parsed', 'timestampMode'], timestampMode);
}
}
this.gtsList = this._data;
this._options = { ...this._options };
this.divider = GTSLib.getDivider(this._options.timeUnit);
if (this.showChart) {
if (!!this.annotation) {
this.annotation.update(this._options, false);
}
if (!!this.chart) {
this.chart.update(this._options, false);
}
}
this.LOG.debug(['drawCharts', 'parsed'], this._data, this._options);
this.chartDraw.emit();
this.resizeArea();
}
focus(event) {
// read the first 4 letters of id of all elements in the click tree
const idListClicked = event.target.id.slice(0, 4);
// if not alone on the page, and click is not on the timezone selector and not on the map, force focus.
if (!this.isAlone && idListClicked.indexOf('tzSe') < 0 && idListClicked.indexOf('map-') < 0) {
this.mainPlotDiv.nativeElement.focus();
} // prevent stealing focus of the timezone selector.
}
async handleKeyPress(ev) {
this.LOG.debug(['handleKeyPress'], ev);
if (this.preventDefaultKeyList.indexOf(ev.key) >= 0) {
ev.preventDefault();
}
if (await this.timeClip.isOpened() || await this.modal.isOpened() || await this.gtsPopupModal.isOpened()) {
if (this.preventDefaultKeyListInModals.indexOf(ev.key) >= 0) {
ev.preventDefault();
}
}
if (ev.key === '/') {
this.modal.open();
this.filterInput.nativeElement.focus();
this.filterInput.nativeElement.select();
}
else if (ev.key === 't') {
this.chart.getTimeClip().then(tc => {
this.timeClipValue = `<p>keep data between
${this._options.timeMode === 'timestamp' ? tc.tsmin : moment.tz(tc.tsmin, this._options.timeZone).toLocaleString()} and
${this._options.timeMode === 'timestamp' ? tc.tsmax : moment.tz(tc.tsmax, this._options.timeZone).toLocaleString()}
${this._options.timeUnit !== 'us' ? ' (for a ' + this._options.timeUnit + ' platform)' : ''}</p>
<pre><code>${Math.round(tc.tsmax)} ${Math.round(tc.tsmax - tc.tsmin)} TIMECLIP</code></pre>`;
this.timeClip.open();
});
}
else if (ev.key === 'b' || ev.key === 'B') { // browse among all gts
if (this.gtsBrowserIndex < 0) {
this.gtsBrowserIndex = 0;
}
if (ev.key === 'b') { // increment index
this.gtsBrowserIndex++;
if (this.gtsBrowserIndex === this.gtsIdList.length) {
this.gtsBrowserIndex = 0;
}
}
else { // decrement index
this.gtsBrowserIndex--;
if (this.gtsBrowserIndex < 0) {
this.gtsBrowserIndex = this.gtsIdList.length - 1;
}
}
this._toHide = this.gtsIdList.filter(v => v !== this.gtsIdList[this.gtsBrowserIndex]); // hide all but one
}
else if (ev.key === 'n') {
this._toHide = [...this.gtsIdList];
return false;
}
else if (ev.key === 'a') {
this._toHide = [];
}
else if (ev.key === 'Escape') {
this.timeClip.isOpened().then(r => {
if (r) {
this.timeClip.close();
}
});
this.modal.isOpened().then(r => {
if (r) {
this.modal.close();
}
});
this.gtsPopupModal.isOpened().then(r => {
if (r) {
this.gtsPopupModal.close();
}
});
}
else {
this.pushKbdEvent(ev.key);
}
this.LOG.debug(['handleKeyPress', 'this.gtsIdList'], this._toHide, this.gtsBrowserIndex);
}
applyFilter() {
this.gtsFilterCount++;
this._gtsFilter = this.gtsFilterCount.toString().slice(0, 1) + this.filterInput.nativeElement.value;
this.modal.close();
}
pushKbdEvent(key) {
this.kbdCounter++;
this.kbdLastKeyPressed = [key, this.kbdCounter.toString()];
}
getTZ() {
return moment.tz.names();
}
convert(data) {
return [];
}
onChartDraw($event, component) {
this.LOG.debug(['onChartDraw'], $event, component);
if ('annotation' === component && $event) {
this.annotationScale.next({ min: $event.tsmin, max: $event.tsmax });
this.annotationScale.complete();
}
else if ('chart' === component && $event) {
this.chartScale.next({ min: $event.tsmin, max: $event.tsmax });
this.chartScale.complete();
}
this.loadingChart = false;
this.resizeArea();
}
resizeArea() {
if (this.showChart && !!this.chart) {
let h = this.chart.el.nativeElement.getBoundingClientRect().height;
if (h > 0) {
if (!!this.GTSTree) {
h -= this.GTSTree.nativeElement.getBoundingClientRect().height;
}
if (!!this.controls) {
h -= this.controls.nativeElement.getBoundingClientRect().height;
}
this.initialChartHeight = h;
}
else {
setTimeout(() => this.resizeArea(), 100);
}
}
}
resize(layout) {
//
}
}
WarpViewPlotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WarpViewPlotComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.SizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
WarpViewPlotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: WarpViewPlotComponent, selector: "warpview-plot", inputs: { type: "type", gtsFilter: "gtsFilter", isAlone: "isAlone", initialChartHeight: "initialChartHeight", initialMapHeight: "initialMapHeight" }, outputs: { warpViewChartResize: "warpViewChartResize", warpViewNewOptions: "warpViewNewOptions" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "mainPlotDiv", first: true, predicate: ["mainPlotDiv"], descendants: true, static: true }, { propertyName: "timeClip", first: true, predicate: ["timeClip"], descendants: true, static: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }, { propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "gtsPopupModal", first: true, predicate: ["gtsPopupModal"], descendants: true }, { propertyName: "annotation", first: true, predicate: ["annotation"], descendants: true }, { propertyName: "map", first: true, predicate: ["map"], descendants: true }, { propertyName: "timeClipElement", first: true, predicate: ["timeClipElement"], descendants: true, static: true }, { propertyName: "GTSTree", first: true, predicate: ["GTSTree"], descendants: true, static: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true, static: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, static: true }, { propertyName: "tzSelector", first: true, predicate: ["tzSelector"], descendants: true }, { propertyName: "line", first: true, predicate: ["line"], descendants: true }, { propertyName: "main", first: true, predicate: ["main"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n ~ Copyright 2021 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 ~\n -->\n\n<div #mainPlotDiv tabindex=\"0\" (click)=\"focus($event)\" id=\"focusablePlotDiv\">\n <warpview-modal [kbdLastKeyPressed]=\"kbdLastKeyPressed\" modalTitle=\"TimeClip\" #timeClip\n (warpViewModalClose)=\"onWarpViewModalClose()\"\n >\n <div #timeClipElement [innerHTML]=\"timeClipValue\"></div>\n </warpview-modal>\n <warpview-modal [kbdLastKeyPressed]=\"kbdLastKeyPressed\" modalTitle=\"GTS Filter\" #modal\n (warpViewModalClose)=\"onWarpViewModalClose()\"\n >\n <label for=\"filterInput\">Enter a regular expression to filter GTS.</label>\n <br/>\n <input tabindex=\"1\" type=\"text\" (keypress)=\"inputTextKeyboardEvents($event)\" #filterInput id=\"filterInput\"\n (keydown)=\"inputTextKeyboardEvents($event)\" (keyup)=\"inputTextKeyboardEvents($event)\"\n [value]=\"gtsFilter.slice(1)\"/>\n <button (click)=\"applyFilter()\" [innerHTML]=\"_options.popupButtonValidateLabel || 'Apply'\"\n class=\"{{_options.popupButtonValidateClass}}\" tabindex=\"2\"\n type=\"button\">\n </button>\n </warpview-modal>\n <warpview-gts-popup [maxToShow]=\"5\" [hiddenData]=\"_toHide\" [gtsList]=\"gtsList\"\n [kbdLastKeyPressed]=\"kbdLastKeyPressed\"\n [options]=\"_options\" [debug]=\"debug\"\n (warpViewModalClose)=\"onWarpViewModalClose()\"\n (warpViewSelectedGTS)=\"warpViewSelectedGTS($event)\"\n #gtsPopupModal></warpview-gts-popup>\n <div class=\"inline\" *ngIf=\"_options.showControls\" #controls>\n <warpview-toggle id=\"timeSwitch\" text1=\"Date\" text2=\"Timestamp\"\n (stateChange)=\"stateChange($event)\"\n [checked]=\"_options.timeMode === 'timestamp'\"></warpview-toggle>\n <warpview-toggle id=\"typeSwitch\" text1=\"Line\" text2=\"Step\"\n (stateChange)=\"stateChange($event)\"></warpview-toggle>\n <warpview-toggle id=\"chartSwitch\" text1=\"Hide chart\" text2=\"Display chart\"\n (stateChange)=\"stateChange($event)\"\n [checked]=\"showChart\"></warpview-toggle>\n <warpview-toggle id=\"mapSwitch\" text1=\"Hide map\" text2=\"Display map\"\n (stateChange)=\"stateChange($event)\" [checked]=\"showMap\"></warpview-toggle>\n <div class=\"tzcontainer\">\n <label for=\"tzSelector\"></label>\n <select id=\"tzSelector\" class=\"defaulttz\" #tzSelector (change)=\"tzSelected($event)\">\n <option *ngFor=\"let z of getTZ()\" [value]=\"z\" [selected]=\"z === 'UTC'\"\n [ngClass]=\"{'defaulttz' :z === 'UTC','customtz': z !== 'UTC'}\">{{z}}</option>\n </select>\n </div>\n </div>\n <div *ngIf=\"warningMessage\" class=\"warningMessage\">{{warningMessage}}</div>\n <warpview-gts-tree\n *ngIf=\"_options.showGTSTree\"\n [data]=\"gtsList\" id=\"tree\" [gtsFilter]=\"gtsFilter\" [debug]=\"debug\" #GTSTree\n (warpViewSelectedGTS)=\"warpViewSelectedGTS($event)\"\n [hiddenData]=\"_toHide\" [options]=\"_options\" [inPlot]=\"true\"\n [kbdLastKeyPressed]=\"kbdLastKeyPressed\"\n ></warpview-gts-tree>\n <div [hidden]=\"!showChart\" #main class=\"main-container\"\n (mouseleave)=\"handleMouseOut($event)\"\n (mousemove)=\"handleMouseMove($event)\"\n (mouseenter)=\"handleMouseEnter($event)\">\n <div class=\"bar\" #line></div>\n <div class=\"annotation\">\n <warpview-annotation #annotation\n [data]=\"gtsList\" [responsive]=\"true\"\n (boundsDidChange)=\"boundsDidChange($event)\"\n (chartDraw)=\"onChartDraw($event, 'annotation')\"\n [debug]=\"debug\" [standalone]=\"false\"\n [hiddenData]=\"_toHide\" [options]=\"_options\"\n ></warpview-annotation>\n </div>\n <warpview-resize minHeight=\"100\" [initialHeight]=\"initialChartHeight\" [debug]=\"debug\"\n (resize)=\"resizeChart($event)\"\n >\n <warpview-spinner *ngIf=\"loadingChart\" message=\"Parsing data\"></warpview-spinner>\n <div [hidden]=\"loadingChart\" style=\"height: 100%;position: relative;\">\n <warpview-chart [responsive]=\"true\" [standalone]=\"false\" [data]=\"gtsList\"\n (boundsDidChange)=\"boundsDidChange($event)\"\n (chartDraw)=\"onChartDraw($event, 'chart')\"\n #chart [debug]=\"debug\" [hiddenData]=\"_toHide\" [type]=\"type\" [options]=\"_options\"\n ></warpview-chart>\n </div>\n </warpview-resize>\n </div>\n <warpview-resize *ngIf=\"showMap\" minHeight=\"100\" [initialHeight]=\"initialMapHeight\" [debug]=\"debug\">\n <div class=\"map-container\">\n <warpview-map [options]=\"_options\" #map [data]=\"gtsList\" [debug]=\"debug\" [responsive]=\"true\"\n [hiddenData]=\"_toHide\"\n ></warpview-map>\n </div>\n </warpview-resize>\n</div>\n", styles: ["/*!\n * Copyright 2021 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 *\n */:root{--warp-view-chart-width: 100%;--warp-view-chart-height: 100%;--warp-view-datagrid-cell-padding: 5px;--warp-view-map-margin: 0;--warp-view-switch-height: 30px;--warp-view-switch-width: 100px;--warp-view-switch-radius: 18px;--warp-view-plot-chart-height: 100%;--warp-view-slider-pointer-size: 65px;--warp-view-resize-handle-height: 10px;--warp-view-tile-width: 100%;--warp-view-tile-height: 100%;--warp-view-font-color: #000000;--warp-view-bar-color: #dc3545;--warp-view-datagrid-odd-bg-color: #ffffff;--warp-view-datagrid-odd-color: #404040;--warp-view-datagrid-even-bg-color: #c0c0c0;--warp-view-datagrid-even-color: #000000;--warp-view-pagination-border-color: #c0c0c0;--warp-view-pagination-bg-color: #ffffff;--warp-view-pagination-active-bg-color: #4CAF50;--warp-view-pagination-active-color: #ffffff;--warp-view-pagination-active-border-color: #4CAF50;--warp-view-pagination-hover-bg-color: #c0c0c0;--warp-view-pagination-hover-color: #000000;--warp-view-pagination-hover-border-color: #c0c0c0;--warp-view-pagination-disabled-color: #c0c0c0;--warp-view-switch-inset-color: #c0c0c0;--warp-view-switch-inset-checked-color: #00cd00;--warp-view-switch-handle-color: radial-gradient(#ffffff 15%, #c0c0c0 100%);--warp-view-switch-handle-checked-color: radial-gradient(#ffffff 15%, #00cd00 100%);--warp-view-resize-handle-color: #c0c0c0;--warp-view-chart-legend-bg: #ffffff;--warp-view-chart-legend-color: #404040;--gts-classname-font-color: #004eff;--gts-labelname-font-color: #19A979;--gts-attrname-font-color: #ED4A7B;--gts-separator-font-color: #a0a0a0;--gts-labelvalue-font-color: #000000;--gts-attrvalue-font-color: #000000;--gts-stack-font-color: #000000;--gts-tree-expanded-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7klEQVQ4T82TMW7CQBBF/0g+QOpINEkVCmpaLoBm5COk5QYoaeAY3MDSei2LGu4QKakiBA1tCpTK8kS2sLVe2xSh8XSrnf9m/s4s4c6gO/UYGEBEXlT1bK396bFGIjIJguA7iqJLkVNbYOZXItoQ0QHAzBhz9CCFeAVgCeAjy7Jpmqa/NUBEEgDzktqGuOKKO47j+KsGhGH4lOf5HsDIg5ycyqVYVd+steuGheLAzM9EtPMgW1VdVGWJ6N0YU1gpozVGH+K+gy/uBHR1crXUqNzbQXXhduJ69sd7cxOZ+UFVH5Mk+exb+YGt8n9+5h8up1sReYC0WAAAAABJRU5ErkJggg==);--gts-tree-collapsed-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA0UlEQVQ4T6WTUW7CQAxEPQdozxYb9Qb94Aj9gQSoVCp6lMr21doDZFCQiFCU3YDY//d2PeOFPHnwJC+zAlVdA/jp+/6YmZ+1S0qCPxF5HUAAO3fvSpKS4ENEvm6gfUS0c5JiBma2Ibm/QiQPmbmdSqohquoA7GqSxRaapmkBjBkAeHP336t0UWBmHcnb+VcR4XcJpjDJLjPHkS4tleqZubmNiDHU6gumDQDYuvvh7hpV9V9EXgaA5Ka2jbMjmNk7yZOIfEfE8eFVfuSDLda4JDsD3FNdEckTC0YAAAAASUVORK5CYII=);--warp-view-popup-bg-color: #ffffff;--warp-view-popup-border-color: rgba(0, 0, 0, .2);--warp-view-popup-header-bg-color: #c0c0c0;--warp-view-popup-title-color: #404040;--warp-view-popup-close-color: #404040;--warp-view-popup-body-bg-color: #ffffff;--warp-view-popup-body-color: #000000;--warp-view-annotationtooltip-value-font-color: #004eff;--warp-view-annotationtooltip-font-color: #404040;--warp-view-spinner-color: #ff9900;--warp-view-tooltip-bg: #ffffff;--warp-view-tooltip-color: #000000;--warp-slider-connect-color: #ff9900;--warp-slider-handle-bg-color: #ffffff;--warp-slider-handle-color: #004eff;--warp-slider-handle-shadow: inset 0 0 1px #ffffff, inset 0 1px 7px #c0c0c0, 0 3px 6px -3px #a0a0a0}.noData{width:100%;text-align:center;color:var(--warp-view-chart-legend-color);position:relative}.js-plotly-plot .plotly .cursor-ew-resize{cursor:default!important}:host,warpview-plot,warp-view-plot{position:relative;height:100%}:host .main-container,warpview-plot .main-container,warp-view-plot .main-container{position:relative}:host .map-container,warpview-plot .map-container,warp-view-plot .map-container{height:100%;width:100%;margin-right:20px;position:relative}:host .bar,warpview-plot .bar,warp-view-plot .bar{width:1px;left:-100px;position:absolute;background-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;top:0;bottom:55px;overflow:hidden;display:none;z-index:0;pointer-events:none;border-left:dashed 1px var(--warp-view-bar-color);height:calc(100% - 75px)}:host .inline,warpview-plot .inline,warp-view-plot .inline{display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;width:100%}:host label,warpview-plot label,warp-view-plot label{display:inline-block}:host input,warpview-plot input,warp-view-plot input{display:block;width:calc(100% - 20px);padding:5px;font-size:1rem;font-weight:400;line-height:1.5}:host .annotation,warpview-plot .annotation,warp-view-plot .annotation{max-width:100%;padding-top:20px;margin-bottom:20px;height:auto}:host #focusablePlotDiv:focus,warpview-plot #focusablePlotDiv:focus,warp-view-plot #focusablePlotDiv:focus{outline:none}:host #tzSelector,warpview-plot #tzSelector,warp-view-plot #tzSelector{height:var(--warp-view-switch-height);border-radius:var(--warp-view-switch-radius);padding-left:calc(var(--warp-view-switch-radius) / 2);padding-right:5px;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026;color:var(--warp-view-font-color);border:none;margin:auto}:host .defaulttz,warpview-plot .defaulttz,warp-view-plot .defaulttz{background:var(--warp-view-switch-inset-color)}:host .customtz,warpview-plot .customtz,warp-view-plot .customtz{background:var(--warp-view-switch-inset-checked-color)}:host .tzcontainer,warpview-plot .tzcontainer,warp-view-plot .tzcontainer{display:flex}:host .chart-container,warpview-plot .chart-container,warp-view-plot .chart-container{height:var(--warp-view-plot-chart-height);width:100%}:host #bottomPlaceHolder,warpview-plot #bottomPlaceHolder,warp-view-plot #bottomPlaceHolder{height:200px;width:100%}:host .warningMessage,warpview-plot .warningMessage,warp-view-plot .warningMessage{color:orange;padding:10px;border-color:orange;border-width:2px;border-radius:3px;border-style:solid;background:antiquewhite;margin:1em;display:block}\n"], components: [{ type: i2.WarpViewModalComponent, selector: "warpview-modal", inputs: ["modalTitle", "kbdLastKeyPressed"], outputs: ["warpViewModalOpen", "warpViewModalClose"] }, { type: i3.WarpViewGtsPopupComponent, selector: "warpview-gts-popup", inputs: ["options", "gtsList", "debug", "data", "hiddenData", "maxToShow", "kbdLastKeyPressed"], outputs: ["warpViewSelectedGTS", "warpViewModalOpen", "warpViewModalClose"] }, { type: i4.WarpViewToggleComponent, selector: "warpview-toggle", inputs: ["checked", "text1", "text2"], outputs: ["stateChange"] }, { type: i5.WarpViewGtsTreeComponent, selector: "warpview-gts-tree", inputs: ["kbdLastKeyPressed", "inPlot", "gtsFilter", "hiddenData"], outputs: ["warpViewSelectedGTS"] }, { type: i6.WarpViewAnnotationComponent, selector: "warpview-annotation", inputs: ["type", "hiddenData", "standalone", "height"], outputs: ["pointHover", "chartDraw", "boundsDidChange"] }, { type: i7.WarpViewResizeComponent, selector: "warpview-resize", inputs: ["minHeight", "initialHeight", "debug"], outputs: ["resize"] }, { type: i8.WarpViewSpinnerComponent, selector: "warpview-spinner", inputs: ["message"] }, { type: i9.WarpViewChartComponent, selector: "warpview-chart", inputs: ["hiddenData", "type", "standalone"], outputs: ["boundsDidChange", "pointHover", "warpViewChartResize"] }, { type: i10.WarpViewMapComponent, selector: "warpview-map", inputs: ["heatData", "responsive", "width", "height", "debug", "options", "data", "hiddenData"], outputs: ["change", "chartDraw"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i12.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WarpViewPlotComponent, decorators: [{
type: Component,
args: [{ selector: 'warpview-plot', encapsulation: ViewEncapsulation.None, template: "<!--\n ~ Copyright 2021 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 ~\n -->\n\n<div #mainPlotDiv tabindex=\"0\" (click)=\"focus($event)\" id=\"focusablePlotDiv\">\n <warpview-modal [kbdLastKeyPressed]=\"kbdLastKeyPressed\" modalTitle=\"TimeClip\" #timeClip\n (warpViewModalClose)=\"onWarpViewModalClose()\"\n >\n <div #timeClipElement [innerHTML]=\"timeClipValue\"></div>\n </warpview-modal>\n <warpview-modal [kbdLastKeyPressed]=\"kbdLastKeyPressed\" modalTitle=\"GTS Filter\" #modal\n (warpViewModalClose)=\"onWarpViewModalClose()\"\n >\n <label for=\"filterInput\">Enter a regular expression to filter GTS.</label>\n <br/>\n <input tabindex=\"1\" type=\"text\" (keypress)=\"inputTextKeyboardEvents($event)\" #filterInput id=\"filterInput\"\n (keydown)=\"inputTextKeyboardEvents($event)\" (keyup)=\"inputTextKeyboardEvents($event)\"\n [value]=\"gtsFilter.slice(1)\"/>\n <button (click)=\"applyFilter()\" [innerHTML]=\"_options.popupButtonValidateLabel || 'Apply'\"\n class=\"{{_options.popupButtonValidateClass}}\" tabindex=\"2\"\n type=\"button\">\n </button>\n </warpview-modal>\n <warpview-gts-popup [maxToShow]=\"5\" [hiddenData]=\"_toHide\" [gtsList]=\"gtsList\"\n [kbdLastKeyPressed]=\"kbdLastKeyPressed\"\n [options]=\"_options\" [debug]=\"debug\"\n (warpViewModalClose)=\"onWarpViewModalClose()\"\n (warpViewSelectedGTS)=\"warpViewSelectedGTS($event)\"\n #gtsPopupModal></warpview-gts-popup>\n <div class=\"inline\" *ngIf=\"_options.showControls\" #controls>\n <warpview-toggle id=\"timeSwitch\" text1=\"Date\" text2=\"Timestamp\"\n (stateChange)=\"stateChange($event)\"\n [checked]=\"_options.timeMode === 'timestamp'\"></warpview-toggle>\n <warpview-toggle id=\"typeSwitch\" text1=\"Line\" text2=\"Step\"\n (stateChange)=\"stateChange($event)\"></warpview-toggle>\n <warpview-toggle id=\"chartSwitch\" text1=\"Hide chart\" text2=\"Display chart\"\n (stateChange)=\"stateChange($event)\"\n [checked]=\"showChart\"></warpview-toggle>\n <warpview-toggle id=\"mapSwitch\" text1=\"Hide map\" text2=\"Display map\"\n (stateChange)=\"stateChange($event)\" [checked]=\"showMap\"></warpview-toggle>\n <div class=\"tzcontainer\">\n <label for=\"tzSelector\"></label>\n <select id=\"tzSelector\" class=\"defaulttz\" #tzSelector (change)=\"tzSelected($event)\">\n <option *ngFor=\"let z of getTZ()\" [value]=\"z\" [selected]=\"z === 'UTC'\"\n [ngClass]=\"{'defaulttz' :z === 'UTC','customtz': z !== 'UTC'}\">{{z}}</option>\n </select>\n </div>\n </div>\n <div *ngIf=\"warningMessage\" class=\"warningMessage\">{{warningMessage}}</div>\n <warpview-gts-tree\n *ngIf=\"_options.showGTSTree\"\n [data]=\"gtsList\" id=\"tree\" [gtsFilter]=\"gtsFilter\" [debug]=\"debug\" #GTSTree\n (warpViewSelectedGTS)=\"warpViewSelectedGTS($event)\"\n [hiddenData]=\"_toHide\" [options]=\"_options\" [inPlot]=\"true\"\n [kbdLastKeyPressed]=\"kbdLastKeyPressed\"\n ></warpview-gts-tree>\n <div [hidden]=\"!showChart\" #main class=\"main-container\"\n (mouseleave)=\"handleMouseOut($event)\"\n (mousemove)=\"handleMouseMove($event)\"\n (mouseenter)=\"handleMouseEnter($event)\">\n <div class=\"bar\" #line></div>\n <div class=\"annotation\">\n <warpview-annotation #annotation\n [data]=\"gtsList\" [responsive]=\"true\"\n (boundsDidChange)=\"boundsDidChange($event)\"\n (chartDraw)=\"onChartDraw($event, 'annotation')\"\n [debug]=\"debug\" [standalone]=\"false\"\n [hiddenData]=\"_toHide\" [options]=\"_options\"\n ></warpview-annotation>\n </div>\n <warpview-resize minHeight=\"100\" [initialHeight]=\"initialChartHeight\" [debug]=\"debug\"\n (resize)=\"resizeChart($event)\"\n >\n <warpview-spinner *ngIf=\"loadingChart\" message=\"Parsing data\"></warpview-spinner>\n <div [hidden]=\"loadingChart\" style=\"height: 100%;position: relative;\">\n <warpview-chart [responsive]=\"true\" [standalone]=\"false\" [data]=\"gtsList\"\n (boundsDidChange)=\"boundsDidChange($event)\"\n (chartDraw)=\"onChartDraw($event, 'chart')\"\n #chart [debug]=\"debug\" [hiddenData]=\"_toHide\" [type]=\"type\" [options]=\"_options\"\n ></warpview-chart>\n </div>\n </warpview-resize>\n </div>\n <warpview-resize *ngIf=\"showMap\" minHeight=\"100\" [initialHeight]=\"initialMapHeight\" [debug]=\"debug\">\n <div class=\"map-container\">\n <warpview-map [options]=\"_options\" #map [data]=\"gtsList\" [debug]=\"debug\" [responsive]=\"true\"\n [hiddenData]=\"_toHide\"\n ></warpview-map>\n </div>\n </warpview-resize>\n</div>\n", styles: ["/*!\n * Copyright 2021 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 *\n */:root{--warp-view-chart-width: 100%;--warp-view-chart-height: 100%;--warp-view-datagrid-cell-padding: 5px;--warp-view-map-margin: 0;--warp-view-switch-height: 30px;--warp-view-switch-width: 100px;--warp-view-switch-radius: 18px;--warp-view-plot-chart-height: 100%;--warp-view-slider-pointer-size: 65px;--warp-view-resize-handle-height: 10px;--warp-view-tile-width: 100%;--warp-view-tile-height: 100%;--warp-view-font-color: #000000;--warp-view-bar-color: #dc3545;--warp-view-datagrid-odd-bg-color: #ffffff;--warp-view-datagrid-odd-color: #404040;--warp-view-datagrid-even-bg-color: #c0c0c0;--warp-view-datagrid-even-color: #000000;--warp-view-pagination-border-color: #c0c0c0;--warp-view-pagination-bg-color: #ffffff;--warp-view-pagination-active-bg-color: #4CAF50;--warp-view-pagination-active-color: #ffffff;--warp-view-pagination-active-border-color: #4CAF50;--warp-view-pagination-hover-bg-color: #c0c0c0;--warp-view-pagination-hover-color: #000000;--warp-view-pagination-hover-border-color: #c0c0c0;--warp-view-pagination-disabled-color: #c0c0c0;--warp-view-switch-inset-color: #c0c0c0;--warp-view-switch-inset-checked-color: #00cd00;--warp-view-switch-handle-color: radial-gradient(#ffffff 15%, #c0c0c0 100%);--warp-view-switch-handle-checked-color: radial-gradient(#ffffff 15%, #00cd00 100%);--warp-view-resize-handle-color: #c0c0c0;--warp-view-chart-legend-bg: #ffffff;--warp-view-chart-legend-color: #404040;--gts-classname-font-color: #004eff;--gts-labelname-font-color: #19A979;--gts-attrname-font-color: #ED4A7B;--gts-separator-font-color: #a0a0a0;--gts-labelvalue-font-color: #000000;--gts-attrvalue-font-color: #000000;--gts-stack-font-color: #000000;--gts-tree-expanded-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7klEQVQ4T82TMW7CQBBF/0g+QOpINEkVCmpaLoBm5COk5QYoaeAY3MDSei2LGu4QKakiBA1tCpTK8kS2sLVe2xSh8XSrnf9m/s4s4c6gO/UYGEBEXlT1bK396bFGIjIJguA7iqJLkVNbYOZXItoQ0QHAzBhz9CCFeAVgCeAjy7Jpmqa/NUBEEgDzktqGuOKKO47j+KsGhGH4lOf5HsDIg5ycyqVYVd+steuGheLAzM9EtPMgW1VdVGWJ6N0YU1gpozVGH+K+gy/uBHR1crXUqNzbQXXhduJ69sd7cxOZ+UFVH5Mk+exb+YGt8n9+5h8up1sReYC0WAAAAABJRU5ErkJggg==);--gts-tree-collapsed-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA0UlEQVQ4T6WTUW7CQAxEPQdozxYb9Qb94Aj9gQSoVCp6lMr21doDZFCQiFCU3YDY//d2PeOFPHnwJC+zAlVdA/jp+/6YmZ+1S0qCPxF5HUAAO3fvSpKS4ENEvm6gfUS0c5JiBma2Ibm/QiQPmbmdSqohquoA7GqSxRaapmkBjBkAeHP336t0UWBmHcnb+VcR4XcJpjDJLjPHkS4tleqZubmNiDHU6gumDQDYuvvh7hpV9V9EXgaA5Ka2jbMjmNk7yZOIfEfE8eFVfuSDLda4JDsD3FNdEckTC0YAAAAASUVORK5CYII=);--warp-view-popup-bg-color: #ffffff;--warp-view-popup-border-color: rgba(0, 0, 0, .2);--warp-view-popup-header-bg-color: #c0c0c0;--warp-view-popup-title-color: #404040;--warp-view-popup-close-color: #404040;--warp-view-popup-body-bg-color: #ffffff;--warp-view-popup-body-color: #000000;--warp-view-annotationtooltip-value-font-color: #004eff;--warp-view-annotationtooltip-font-color: #404040;--warp-view-spinner-color: #ff9900;--warp-view-tooltip-bg: #ffffff;--warp-view-tooltip-color: #000000;--warp-slider-connect-color: #ff9900;--warp-slider-handle-bg-color: #ffffff;--warp-slider-handle-color: #004eff;--warp-slider-handle-shadow: inset 0 0 1px #ffffff, inset 0 1px 7px #c0c0c0, 0 3px 6px -3px #a0a0a0}.noData{width:100%;text-align:center;color:var(--warp-view-chart-legend-color);position:relative}.js-plotly-plot .plotly .cursor-ew-resize{cursor:default!important}:host,warpview-plot,warp-view-plot{position:relative;height:100%}:host .main-container,warpview-plot .main-container,warp-view-plot .main-container{position:relative}:host .map-container,warpview-plot .map-container,warp-view-plot .map-container{height:100%;width:100%;margin-right:20px;position:relative}:host .bar,warpview-plot .bar,warp-view-plot .bar{width:1px;left:-100px;position:absolute;background-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;top:0;bottom:55px;overflow:hidden;display:none;z-index:0;pointer-events:none;border-left:dashed 1px var(--warp-view-bar-color);height:calc(100% - 75px)}:host .inline,warpview-plot .inline,warp-view-plot .inline{display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;width:100%}:host label,warpview-plot label,warp-view-plot label{display:inline-block}:host input,warpview-plot input,warp-view-plot input{display:block;width:calc(100% - 20px);padding:5px;font-size:1rem;font-weight:400;line-height:1.5}:host .annotation,warpview-plot .annotation,warp-view-plot .annotation{max-width:100%;padding-top:20px;margin-bottom:20px;height:auto}:host #focusablePlotDiv:focus,warpview-plot #focusablePlotDiv:focus,warp-view-plot #focusablePlotDiv:focus{outline:none}:host #tzSelector,warpview-plot #tzSelector,warp-view-plot #tzSelector{height:var(--warp-view-switch-height);border-radius:var(--warp-view-switch-radius);padding-left:calc(var(--warp-view-switch-radius) / 2);padding-right:5px;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026;color:var(--warp-view-font-color);border:none;margin:auto}:host .defaulttz,warpview-plot .defaulttz,warp-view-plot .defaulttz{background:var(--warp-view-switch-inset-color)}:host .customtz,warpview-plot .customtz,warp-view-plot .customtz{background:var(--warp-view-switch-inset-checked-color)}:host .tzcontainer,warpview-plot .tzcontainer,warp-view-plot .tzcontainer{display:flex}:host .chart-container,warpview-plot .chart-container,warp-view-plot .chart-container{height:var(--warp-view-plot-chart-height);width:100%}:host #bottomPlaceHolder,warpview-plot #bottomPlaceHolder,warp-view-plot #bottomPlaceHolder{height:200px;width:100%}:host .warningMessage,warpview-plot .warningMessage,warp-view-plot .warningMessage{color:orange;padding:10px;border-color:orange;border-width:2px;border-radius:3px;border-style:solid;background:antiquewhite;margin:1em;display:block}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.SizeService }, { type: i0.NgZone }]; }, propDecorators: { mainPlotDiv: [{
type: ViewChild,
args: ['mainPlotDiv', { static: true }]
}], timeClip: [{
type: ViewChild,
args: ['timeClip', { static: true }]
}], modal: [{
type: ViewChild,
args: ['modal', { static: true }]
}], chart: [{
type: ViewChild,
args: ['chart']
}], gtsPopupModal: [{
type: ViewChild,
args: ['gtsPopupModal']
}], annotation: [{
type: ViewChild,
args: ['annotation']
}], map: [{
type: ViewChild,
args: ['map']
}], timeClipElement: [{
type: ViewChild,
args: ['timeClipElement', { static: true }]
}], GTSTree: [{
type: ViewChild,
args: ['GTSTree', { static: true }]
}], controls: [{
type: ViewChild,
args: ['controls', { static: true }]
}], filterInput: [{
type: ViewChild,
args: ['filterInput', { static: true }]
}], tzSelector: [{
type: ViewChild,
args: ['tzSelector']
}], line: [{
type: ViewChild,
args: ['line']
}], main: [{
type: ViewChild,
args: ['main']
}], type: [{
type: Input,
args: ['type']
}], gtsFilter: [{
type: Input,
args: ['gtsFilter']
}], isAlone: [{
type: Input,
args: ['isAlone']
}], initialChartHeight: [{
type: Input,
args: ['initialChartHeight']
}], initialMapHeight: [{
type: Input,
args: ['initialMapHeight']
}], warpViewChartResize: [{
type: Output,
args: ['warpViewChartResize']
}], warpViewNewOptions: [{
type: Output,
args: ['warpViewNewOptions']
}], handleKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2FycC12aWV3LXBsb3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2FycHZpZXctbmcvc3JjL2xpYi9lbGVtZW50cy93YXJwLXZpZXctcGxvdC93YXJwLXZpZXctcGxvdC5jb21wb25lbnQu