ngx-hana-nameserver-history-viewer 1.2.1-2.beta → 21.0.0

package/fesm2015/ngx-hana-nameserver-history-viewer.mjs

@@ -1,4097 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, NgModule, isDevMode, Injectable, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@danielmoncada/angular-datetime-picker';
-import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
-import moment from 'moment-timezone';
-import * as i2 from 'ngx-dropdown-list';
-import { DropdownListModule } from 'ngx-dropdown-list';
-import { __awaiter } from 'tslib';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as chartjs from 'chart.js';
-import { Chart as Chart$2 } from 'chart.js';
-import { parse } from 'papaparse';
-import * as hammerjs from 'hammerjs';
-import moment$1 from 'moment';
-import * as i8 from 'ngx-selection-table';
-import { SelectionTableModule } from 'ngx-selection-table';
-
-class AlertComponent {
-    constructor() {
-        this.alertMessageChange = new EventEmitter();
-    }
-    ngOnChanges(changes) {
-        if (changes.alertMessage) {
-            this._setMessage(changes.alertMessage.currentValue);
-        }
-    }
-    _setMessage(msgString) {
-        this.message = void 0;
-        if (msgString && msgString.length > 0) {
-            this._showMessage(msgString);
-            this._setTimeout();
-        }
-    }
-    _showMessage(msgString) {
-        setTimeout(() => this.message = msgString, 100);
-    }
-    _setTimeout() {
-        if (this.alertTimeout > 0) {
-            // clear time out first, it doesn't matter whether the _timeout is undefined or not.
-            clearTimeout(this._timeout);
-            this._timeout = setTimeout(() => this.clearAlert(), this.alertTimeout);
-        }
-    }
-    clearAlert() {
-        this.alertMessage = void 0;
-        this.alertType = void 0;
-        this.alertMessageChange.emit(this.alertMessage);
-        clearTimeout(this._timeout);
-    }
-    /**
-     * get css class base on the alert type
-     */
-    get alertClassType() {
-        if (this.alertType) {
-            switch (this.alertType.toLowerCase()) {
-                case 'success':
-                    return 'alert-success';
-                case 'error':
-                    return 'alert-error';
-                case 'info':
-                    return 'alert-info';
-                case 'warning':
-                    return 'alert-warning';
-            }
-        }
-    }
-}
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AlertComponent, selector: "alert", inputs: { alertMessage: "alertMessage", alertType: "alertType", alertTimeout: "alertTimeout" }, outputs: { alertMessageChange: "alertMessageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"alert-container\" *ngIf=\"message\">\r\n  <div [ngClass]=\"alertClassType\">\r\n    {{message}}\r\n    <a class=\"close\" (click)=\"clearAlert()\">&times;</a>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".alert-container{position:relative;width:100%;text-align:left}.alert-container .fadein,.alert-container .alert-error,.alert-container .alert-warning,.alert-container .alert-info,.alert-container .alert-success{animation:fadein 1s;-moz-animation:fadein 1s;-webkit-animation:fadein 1s;-o-animation:fadein 1s}@keyframes fadein{0%{opacity:0}to{opacity:1}}.alert-container .alert,.alert-container .alert-error,.alert-container .alert-warning,.alert-container .alert-info,.alert-container .alert-success{display:inline-block;padding:.5rem 1rem;border:1px solid transparent;border-radius:.25rem;font-size:12px}.alert-container .alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-container .alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-container .alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-container .alert-error{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-container .close{color:#000;text-shadow:0 1px 0 #fff;opacity:.5;box-sizing:border-box}.alert-container .close:hover{cursor:pointer;font-weight:900;color:red}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'alert', template: "<div class=\"alert-container\" *ngIf=\"message\">\r\n  <div [ngClass]=\"alertClassType\">\r\n    {{message}}\r\n    <a class=\"close\" (click)=\"clearAlert()\">&times;</a>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".alert-container{position:relative;width:100%;text-align:left}.alert-container .fadein,.alert-container .alert-error,.alert-container .alert-warning,.alert-container .alert-info,.alert-container .alert-success{animation:fadein 1s;-moz-animation:fadein 1s;-webkit-animation:fadein 1s;-o-animation:fadein 1s}@keyframes fadein{0%{opacity:0}to{opacity:1}}.alert-container .alert,.alert-container .alert-error,.alert-container .alert-warning,.alert-container .alert-info,.alert-container .alert-success{display:inline-block;padding:.5rem 1rem;border:1px solid transparent;border-radius:.25rem;font-size:12px}.alert-container .alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-container .alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-container .alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-container .alert-error{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-container .close{color:#000;text-shadow:0 1px 0 #fff;opacity:.5;box-sizing:border-box}.alert-container .close:hover{cursor:pointer;font-weight:900;color:red}\n"] }]
-        }], propDecorators: { alertMessage: [{
-                type: Input
-            }], alertType: [{
-                type: Input
-            }], alertTimeout: [{
-                type: Input
-            }], alertMessageChange: [{
-                type: Output
-            }] } });
-
-class AlertModule {
-}
-AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
-AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        AlertComponent,
-                    ],
-                    exports: [AlertComponent],
-                    imports: [CommonModule],
-                    providers: [],
-                    bootstrap: [],
-                }]
-        }] });
-
-class FileDropInputComponent {
-    constructor() {
-        this.dropAreaText = '';
-        this.inputAreaText = '';
-        this.fileDrop = new EventEmitter();
-        this.fileInput = new EventEmitter();
-        this.droppingFlag = false;
-    }
-    static _stopAndPrevent(event) {
-        event.stopPropagation(); // Stops some browsers from redirecting.
-        event.preventDefault(); // Stops some browsers' default action, like open the file directly
-    }
-    browseFiles(event) {
-        this.fileInput.emit(event);
-    }
-    onDragOver(event) {
-        FileDropInputComponent._stopAndPrevent(event);
-        if (!this.droppingFlag) {
-            this.droppingFlag = true;
-        }
-    }
-    onDragLeave(event) {
-        FileDropInputComponent._stopAndPrevent(event);
-        if (this.droppingFlag) {
-            this.droppingFlag = false;
-        }
-    }
-    onDropFiles(event) {
-        FileDropInputComponent._stopAndPrevent(event);
-        this.droppingFlag = false;
-        let length = 0;
-        if (event.dataTransfer.items) {
-            length = event.dataTransfer.items.length;
-        }
-        else {
-            length = event.dataTransfer.files.length;
-        }
-        if (length > 1) {
-            event.error = 'Multiple files/folders are not supported';
-            this.fileDrop.emit(event);
-            return;
-        }
-        if (length === 1) {
-            let fileEntry;
-            if (event.dataTransfer.items) {
-                if (event.dataTransfer.items[0].webkitGetAsEntry) {
-                    fileEntry = event.dataTransfer.items[0].webkitGetAsEntry();
-                }
-            }
-            else {
-                if (event.dataTransfer.files[0].webkitGetAsEntry) {
-                    fileEntry = event.dataTransfer.files[0].webkitGetAsEntry();
-                }
-            }
-            if (fileEntry) {
-                if (fileEntry.isFile) {
-                    event.error = void 0;
-                }
-                else if (fileEntry.isDirectory) {
-                    event.error = `Folder (${fileEntry.name}) is not supported.`;
-                }
-                else {
-                    event.error = `Internal error, can not get the type of the dropped item (${fileEntry.name}).`;
-                }
-            }
-            const file = event.dataTransfer.files && event.dataTransfer.files.length > 0 ? event.dataTransfer.files[0] : null;
-            if (file) {
-                event.file = file;
-            }
-            else {
-                event.error = 'Internal error, can not get the dropped file.';
-            }
-            this.fileDrop.emit(event);
-            return;
-        }
-    }
-}
-FileDropInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDropInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileDropInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileDropInputComponent, selector: "file-drop-input", inputs: { dropAreaText: "dropAreaText", inputAreaText: "inputAreaText" }, outputs: { fileDrop: "fileDrop", fileInput: "fileInput" }, ngImport: i0, template: `
-    <div class="file-drop-input" [class.file-drop-dropping]="droppingFlag" (drop)="onDropFiles($event)"
-         (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)">
-      <div class="drop-content">
-        <label class="input-button">
-          <input type="file" (change)="browseFiles($event)" accept=".trc"/> {{inputAreaText}}&nbsp;
-        </label>{{dropAreaText}}
-      </div>
-    </div>
-  `, isInline: true, styles: [".file-drop-dropping{background-color:#94949499}.file-drop-input{width:100%;height:100%;border-radius:1px;border:0}.file-drop-input .drop-content{color:#4169e1;height:46px;display:flex;justify-content:center;align-items:center}.file-drop-input .drop-content .input-button{display:inline-block;border:none;outline:0;cursor:pointer;font-weight:700;padding:0 2px;color:#00008b}.file-drop-input .drop-content .input-button:hover{text-shadow:1px 1px 3px royalblue}.file-drop-input .drop-content .input-button input{display:none}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDropInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'file-drop-input', template: `
-    <div class="file-drop-input" [class.file-drop-dropping]="droppingFlag" (drop)="onDropFiles($event)"
-         (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)">
-      <div class="drop-content">
-        <label class="input-button">
-          <input type="file" (change)="browseFiles($event)" accept=".trc"/> {{inputAreaText}}&nbsp;
-        </label>{{dropAreaText}}
-      </div>
-    </div>
-  `, styles: [".file-drop-dropping{background-color:#94949499}.file-drop-input{width:100%;height:100%;border-radius:1px;border:0}.file-drop-input .drop-content{color:#4169e1;height:46px;display:flex;justify-content:center;align-items:center}.file-drop-input .drop-content .input-button{display:inline-block;border:none;outline:0;cursor:pointer;font-weight:700;padding:0 2px;color:#00008b}.file-drop-input .drop-content .input-button:hover{text-shadow:1px 1px 3px royalblue}.file-drop-input .drop-content .input-button input{display:none}\n"] }]
-        }], propDecorators: { dropAreaText: [{
-                type: Input
-            }], inputAreaText: [{
-                type: Input
-            }], fileDrop: [{
-                type: Output
-            }], fileInput: [{
-                type: Output
-            }] } });
-
-class ProgressBarComponent {
-}
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "progress-bar", inputs: { progress: "progress" }, ngImport: i0, template: `
-    <div class="progress-content">
-      <div class="progress">
-        <span class="bar" [style.width]="progress + '%'" [class.is-done]="progress == 100"></span>
-      </div>
-    </div>
-    <div class="progress-text-content">
-        <span class="progress-text" [class.is-done]="progress === 100">
-          <span>{{ progress }}% </span>
-          <span *ngIf="progress < 100">Parsing...</span> <!--{{file?.name}}-->
-          <span *ngIf="progress === 100">Done</span>
-        </span>
-    </div>
-  `, isInline: true, styles: [".progress-content{display:flex;align-items:center;margin:8px 10px;padding-right:20px;padding-left:20px}.progress-content .progress{display:block;position:relative;width:100%;height:12px;border-radius:3px;background:#3a4048}.progress-content .progress .bar{position:absolute;top:0;left:0;height:12px;background:linear-gradient(90deg,#13ebff 0,#6cefbd 100%)}.progress-content .progress .bar .is-done{background:#6cefbd}.progress-text-content{display:flex;align-items:center;justify-content:space-between;margin:-5px 30px 0;padding-right:50px}.progress-text-content .progress-text{font-size:13px;font-weight:600;color:#13ebff;transition:color .2s ease-out}.progress-text-content .progress-text .is-done{color:#6cefbd}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'progress-bar', template: `
-    <div class="progress-content">
-      <div class="progress">
-        <span class="bar" [style.width]="progress + '%'" [class.is-done]="progress == 100"></span>
-      </div>
-    </div>
-    <div class="progress-text-content">
-        <span class="progress-text" [class.is-done]="progress === 100">
-          <span>{{ progress }}% </span>
-          <span *ngIf="progress < 100">Parsing...</span> <!--{{file?.name}}-->
-          <span *ngIf="progress === 100">Done</span>
-        </span>
-    </div>
-  `, styles: [".progress-content{display:flex;align-items:center;margin:8px 10px;padding-right:20px;padding-left:20px}.progress-content .progress{display:block;position:relative;width:100%;height:12px;border-radius:3px;background:#3a4048}.progress-content .progress .bar{position:absolute;top:0;left:0;height:12px;background:linear-gradient(90deg,#13ebff 0,#6cefbd 100%)}.progress-content .progress .bar .is-done{background:#6cefbd}.progress-text-content{display:flex;align-items:center;justify-content:space-between;margin:-5px 30px 0;padding-right:50px}.progress-text-content .progress-text{font-size:13px;font-weight:600;color:#13ebff;transition:color .2s ease-out}.progress-text-content .progress-text .is-done{color:#6cefbd}\n"] }]
-        }], propDecorators: { progress: [{
-                type: Input
-            }] } });
-
-function _randomColorFactor() {
-    return Math.round(Math.random() * 255);
-}
-/**
- * generate random color
- * @param opacity alpha
- */
-function randomColor(opacity) {
-    return 'rgba(' + _randomColorFactor() + ',' + _randomColorFactor() + ',' + _randomColorFactor() + ',' + (opacity || '.3') + ')';
-}
-/**
- * generate the rgba string from ColorRgba
- */
-function getColorString(rgbaColor) {
-    return `rgba(${rgbaColor['red']}, ${rgbaColor['green']}, ${rgbaColor['blue']}, ${rgbaColor['alpha']})`;
-}
-/**
- * format Number with commas
- */
-function getNumberWithCommas(num) {
-    const [integerPart, decimalPart] = num.toString().split('.');
-    const integerWithCommas = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    return decimalPart ? `${integerWithCommas}.${decimalPart}` : integerWithCommas;
-}
-
-var Item;
-(function (Item) {
-    Item["kpi"] = "KPI";
-    Item["yScale"] = "Y-Scale";
-    Item["yScaleGroup"] = "_YScaleGroup";
-    Item["unit"] = "Unit";
-    Item["max"] = "Max";
-    Item["average"] = "Average";
-    Item["sum"] = "Sum";
-    Item["last"] = "Last";
-    Item["description"] = "Description";
-    Item["header"] = "header";
-})(Item || (Item = {}));
-
-var ScaleGroup;
-(function (ScaleGroup) {
-    ScaleGroup[ScaleGroup["CPU"] = 0] = "CPU";
-    ScaleGroup[ScaleGroup["Memory"] = 1] = "Memory";
-    ScaleGroup[ScaleGroup["Disk"] = 2] = "Disk";
-    ScaleGroup[ScaleGroup["Network"] = 3] = "Network";
-    ScaleGroup[ScaleGroup["Swap"] = 4] = "Swap";
-    ScaleGroup[ScaleGroup["Time"] = 5] = "Time";
-    ScaleGroup[ScaleGroup["Req"] = 6] = "Req";
-    ScaleGroup[ScaleGroup["Stmt"] = 7] = "Stmt";
-    ScaleGroup[ScaleGroup["WRTime"] = 8] = "WRTime";
-    ScaleGroup[ScaleGroup["WRSize"] = 9] = "WRSize";
-    ScaleGroup[ScaleGroup["Conn"] = 10] = "Conn";
-    ScaleGroup[ScaleGroup["Trans"] = 11] = "Trans";
-    ScaleGroup[ScaleGroup["Unknown"] = 12] = "Unknown";
-})(ScaleGroup || (ScaleGroup = {}));
-
-var Unit;
-(function (Unit) {
-    Unit["PCT"] = "%";
-    Unit["MS"] = "ms";
-    Unit["Empty"] = "";
-    Unit["GB"] = "GB";
-    Unit["MB"] = "MB";
-    Unit["MBPerSec"] = "MB/s";
-    Unit["SecPerSec"] = "Sec/s";
-    Unit["StmtPerSec"] = "stm/s";
-    Unit["ReqPerSec"] = "req/s";
-    Unit["ColPerSec"] = "col/s";
-})(Unit || (Unit = {}));
-
-var UnitType;
-(function (UnitType) {
-    UnitType[UnitType["TypeEA"] = 0] = "TypeEA";
-    UnitType[UnitType["TypeGB"] = 1] = "TypeGB";
-    UnitType[UnitType["TypeMB"] = 2] = "TypeMB";
-    UnitType[UnitType["TypeSecSec"] = 3] = "TypeSecSec";
-    UnitType[UnitType["TypeMBSec"] = 4] = "TypeMBSec";
-    UnitType[UnitType["TypeSec"] = 5] = "TypeSec";
-})(UnitType || (UnitType = {}));
-
-var Alert;
-(function (Alert) {
-    Alert["success"] = "success";
-    Alert["error"] = "error";
-    Alert["info"] = "info";
-    Alert["warning"] = "warning";
-})(Alert || (Alert = {}));
-
-var HtmlElement;
-(function (HtmlElement) {
-    HtmlElement[HtmlElement["chartArea"] = 0] = "chartArea";
-    HtmlElement[HtmlElement["readFileProgress"] = 1] = "readFileProgress";
-    HtmlElement[HtmlElement["showChartButton"] = 2] = "showChartButton";
-    HtmlElement[HtmlElement["loadPortsButton"] = 3] = "loadPortsButton";
-    HtmlElement[HtmlElement["resetChartButton"] = 4] = "resetChartButton";
-})(HtmlElement || (HtmlElement = {}));
-
-var Abort;
-(function (Abort) {
-    Abort[Abort["maxLineNumReached"] = 0] = "maxLineNumReached";
-    Abort[Abort["maxTimeRangeReached"] = 1] = "maxTimeRangeReached";
-})(Abort || (Abort = {}));
-
-/**
- * For some reason, hana studio will abandon the last line of nameserver history trace file
- */
-const _IGNORED_LINE_FROM_TAIL = 1;
-/**
- * None index server ports in name server history,
- * 01: name server; 02: preprocessor; 04: script server; 05: statistics server / diserver;
- * 06: web dispatcher; 07: xsengine; 10 compileserver; 11 dpserver; 12 esserver; 29 xscontroller
- */
-const _NON_INDEX_SERVER_PORTS = ['01', '02', '04', '05', '06', '07', '10', '11', '12', '29'];
-/**
- * Get the ignored line number from tail (For some reason, hana studio will abandon the last line of nameserver history trace file).
- */
-function getIgnoredLineNumFromTail() {
-    return _IGNORED_LINE_FROM_TAIL;
-}
-/**
- * get the port that needs to be displayed from ports list via the selected port
- * @param ports overall ports list
- * @param port the selected port
- */
-function getDisplayPort(ports, port) {
-    if (ports != null && ports.length > 0) {
-        if (port == null || port.length === 0) {
-            // if no port is selected
-            if (ports.length === 1) {
-                // not mdc system, will display the only one
-                port = ports[0];
-            }
-            else {
-                // select the first service (not in _NON_INDEX_SERVER_PORTS list)
-                port = getRealPorts(ports).find(p => _NON_INDEX_SERVER_PORTS.indexOf(p.slice(-2)) < 0);
-                if (port == null) {
-                    port = getRealPorts(ports)[0];
-                }
-            }
-        }
-        else {
-            // get real port is port is some thing like 3**03
-            if (port.slice(1, 3) === '**') {
-                port = ports.find(key => key.slice(-2) === port.slice(-2));
-            }
-            else {
-                port = ports.find(key => key === port);
-            }
-        }
-    }
-    else {
-        port = void 0;
-    }
-    return port;
-}
-/**
- * Generate the ports for ngx-select.
- * If the provided ports is not null and no port has been selected,
- * will choose the first item which is not 01 (nameserver) or 07 (xsengine)
- *
- */
-function generatePorts(ports = null, selectedPort = null) {
-    if (ports == null) {
-        return null;
-    }
-    else {
-        // if no selection, choose the first item which is not 01 (nameserver) or 07 (xsengine)
-        if (selectedPort == null || selectedPort === '') {
-            const firstIndexServer = ports.find(p => _NON_INDEX_SERVER_PORTS.indexOf(p.slice(-2)) < 0);
-            selectedPort = firstIndexServer ? firstIndexServer : ports[0];
-        }
-        let index = ports.findIndex(port => port === selectedPort);
-        if (index === -1) {
-            // selection is not exists in the file
-            index = 0;
-        }
-        const newPorts = ports.map(port => ({ id: port, text: port }));
-        newPorts[index].selected = true;
-        return newPorts;
-    }
-}
-/**
- * get unit factor by unit
- */
-function getUnitFactor(unitType) {
-    let unitFactor = 1;
-    switch (unitType) {
-        case UnitType.TypeGB:
-            // BYTE to GB
-            unitFactor = 1024 * 1024 * 1024;
-            break;
-        case UnitType.TypeMB:
-        case UnitType.TypeMBSec:
-            // BYTE to MB
-            unitFactor = 1024 * 1024;
-            break;
-        case UnitType.TypeSecSec:
-            // micro second to second
-            unitFactor = 1000000;
-    }
-    return unitFactor;
-}
-/**
- * get value by unit (divided by the unit factor).
- */
-function getValueByUnit(value, unit) {
-    return (value / getUnitFactor(unit));
-}
-/**
- * get rounded value: if value >= 10, round to integer; if value < 10, round to at most 2 decimal places
- */
-function getRoundedValue(value) {
-    return value >= 10 ? Math.round(value) : Math.round(value * 100) / 100;
-}
-/**
- * check whether unit is time related.
- */
-function isUnitTimeRelated(unit) {
-    return unit === UnitType.TypeMBSec || unit === UnitType.TypeSec || unit === UnitType.TypeSecSec;
-}
-/**
- * calculate YScale base on the provided value
- */
-function calculateYScale(value) {
-    // round up to next 2,5,10,20,50,100,...
-    if (value <= 0) {
-        return 100;
-    }
-    const scale = Math.pow(10, Math.floor(Math.log10(value)));
-    if (scale >= value) {
-        return scale;
-    }
-    if (2 * scale >= value) {
-        return 2 * scale;
-    }
-    if (5 * scale >= value) {
-        return 5 * scale;
-    }
-    return 10 * scale;
-}
-function isEmptyData(data) {
-    if (data) {
-        return Object.keys(data).findIndex(port => {
-            if (port != null && data[port]) {
-                return data[port].findIndex(row => row && row.length > 0) >= 0;
-            }
-            return false;
-        }) < 0;
-    }
-    return true;
-}
-function sleep(time) {
-    return new Promise((resolve) => setTimeout(resolve, time));
-}
-function setChartHeight(nsAll, nsContent) {
-    // const item1 = (document.getElementsByClassName('nameserver-history-all') as HTMLCollectionOf<HTMLElement>)[0];
-    // const item2 = (document.getElementsByClassName('nameserver-history-content') as HTMLCollectionOf<HTMLElement>)[0];
-    if (nsAll && nsContent) {
-        const chartHeight = nsAll.offsetWidth * 0.75 / 2 + 10;
-        nsContent.style.height = `${chartHeight}px`;
-    }
-}
-
-/**
- * get the time range for all ports
- */
-function _getTotalTimeRange(time) {
-    if (time) {
-        let startTime = 4102358400000; // 2099/12/31
-        let endTime = 0;
-        Object.keys(time).forEach(port => {
-            if (time[port]) {
-                const timeRangeCurrent = _getTimeRange(time[port]);
-                startTime = startTime > timeRangeCurrent.startTime ? timeRangeCurrent.startTime : startTime;
-                endTime = endTime < timeRangeCurrent.endTime ? timeRangeCurrent.endTime : endTime;
-            }
-        });
-        return { startTime: startTime, endTime: endTime };
-    }
-}
-/**
- * get the time range (startTime ~ endTime) base on the time (the xScale)
- */
-function _getTimeRange(time) {
-    const ignoredLineNumFromTail = getIgnoredLineNumFromTail();
-    if (time) {
-        let startTime = 4102358400000; // 2099/12/31
-        let endTime = 0;
-        const len = time.length;
-        if (len > ignoredLineNumFromTail) {
-            startTime = time[0] > startTime ? startTime : time[0];
-            endTime = time[len - ignoredLineNumFromTail - 1] > endTime ? time[len - ignoredLineNumFromTail - 1] : endTime;
-        }
-        return { startTime: startTime, endTime: endTime };
-    }
-}
-/**
- * get default local time zone
- */
-function getDefaultTimezone() {
-    return moment.tz.guess();
-}
-/**
- * Get time from provided timezone, using this only because chart.js doesn't support timezone.
- * This function will be removed when chart.js starts to support timezone feature.
- * @param time time in seconds (Epoch time)
- * @param timezone timezone string, uses local timezone if this is null.
- */
-function getTimeFromTimeZone(time, timezone) {
-    if (timezone == null || timezone.length === 0) {
-        timezone = getDefaultTimezone();
-        console.warn(`getTimeFromTimeZone - Input timezone is null, returning the local (${timezone}) time. `);
-    }
-    const utcOffset = moment.tz.zone(timezone).utcOffset(time * 1000);
-    const currentOffset = moment.tz.zone(getDefaultTimezone()).utcOffset(time * 1000);
-    // convert to utc and then to selected timezone
-    return time + currentOffset * 60 - utcOffset * 60;
-}
-/**
- * Get time formatted with the provided timezone
- */
-function getTimeString(time) {
-    return moment(time).format('YYYY-MM-DD HH:mm:ss');
-}
-/**
- * Get the time range string by time array, eg: 2018-10-25 10:10:00 ~ 2018-10-25 12:12:00
- */
-function getTimeRangeString(time) {
-    let startTimeString = 'N/A';
-    let endTimeString = 'N/A';
-    let timeRange;
-    if (Array.isArray(time)) {
-        timeRange = _getTimeRange(time);
-    }
-    else {
-        timeRange = _getTotalTimeRange(time);
-    }
-    if (timeRange) {
-        if (timeRange.startTime < 4102358400000) {
-            startTimeString = getTimeString(timeRange.startTime);
-        }
-        if (timeRange.endTime > 0) {
-            endTimeString = getTimeString(timeRange.endTime);
-        }
-        return `${startTimeString} ~ ${endTimeString}`;
-    }
-}
-/**
- * print processed time from the provided beginTime, only works in dev mode
- */
-function printProcessedTime(beginTime, step) {
-    if (isDevMode()) {
-        // only do it in dev mode
-        const timeAfter = new Date();
-        const parsingTime = (timeAfter.getTime() - beginTime.getTime()) / 1000;
-        console.log(`${step}, Parsing time: ${parsingTime} seconds`);
-    }
-}
-
-const _DEFAULT_PORT = 'DEFAULT';
-/**
- * get the default port string (for non-MDC system)
- */
-function getDefaultPort() {
-    return _DEFAULT_PORT;
-}
-/**
- * get abbreviated file name
- * @param fileName
- */
-function getAbbreviatedFileName(fileName) {
-    return fileName == null || fileName.length <= 22 ? fileName : `${fileName.slice(0, 11)}...${fileName.slice(-11)}`;
-}
-/**
- * get port if empty return default port
- */
-function getPort(port) {
-    return port == null || port.length === 0 ? _DEFAULT_PORT : port;
-}
-/**
- * get all real ports except the default port "default"
- */
-function getRealPorts(ports, includeDefault = false) {
-    if (ports == null) {
-        return [];
-    }
-    if (includeDefault) {
-        return ports;
-    }
-    else {
-        return ports.filter(port => port !== _DEFAULT_PORT);
-    }
-}
-/**
- * get file from <input>
- * @param inputTarget
- */
-function getFileFromInput(inputTarget) {
-    if (inputTarget && inputTarget.files && inputTarget.files.length >= 0) {
-        return inputTarget.files[0];
-    }
-}
-/**
- * get file from drag and drop
- */
-function getFileFromDrop(dragEvent) {
-    return new Promise((resolve, reject) => {
-        if (dragEvent.error) {
-            reject(dragEvent.error);
-        }
-        else {
-            if (dragEvent.file) {
-                resolve(dragEvent.file);
-            }
-        }
-    });
-}
-/**
- * Check whether the port from file is the same with the selected port.
- * If the selected port is empty, return true directly. This makes all ports will be selected.
- * @param portFromFile Port read from file
- * @param portFromSelection Port from selection.
- * @param isMDC MDC flag
- */
-function isSamePort(portFromFile, portFromSelection, isMDC) {
-    // if it's MDC system, and the port From File is default port, return false
-    if (isMDC && portFromFile === _DEFAULT_PORT) {
-        return false;
-    }
-    // if selected port is empty, return true directly. This makes all ports being selected
-    if (portFromSelection == null || portFromSelection.length === 0) {
-        return true;
-    }
-    return portFromFile === portFromSelection || portFromFile.slice(-2) === portFromSelection.slice(-2);
-}
-/**
- * As javascript can't get the full path of file, if these two files have same
- * 1. lastModified, 2. name, 3. size, these two files are considered as the same file
- */
-function isSameFile(file1, file2) {
-    if (file1 && file2) {
-        if (file1.lastModified === file2.lastModified && file1.name === file2.name && file1.size === file2.size) {
-            return true;
-        }
-    }
-    return false;
-}
-/**
- * Check whether the provided port is a valid port (3xxxx)
- */
-function isValidPort(port) {
-    return port && port.length === 5 && port[0] === '3';
-}
-/**
- * get next value from current value base on the operator "<" or ">".
- * Keep using current value until the "nextValue" is not empty.
- */
-function calculateValue(lastValue, nextValue) {
-    // if the relative value missed, it's null.
-    // And if it's missed, just use current value from last line.
-    let newValue = lastValue;
-    if (nextValue != null && nextValue.length > 0) {
-        if (nextValue[0] === '<') {
-            newValue = lastValue - parseFloat(nextValue.slice(1));
-        }
-        else if (nextValue[0] === '>') {
-            newValue = lastValue + parseFloat(nextValue.slice(1));
-        }
-        else {
-            newValue = parseFloat(nextValue);
-        }
-    }
-    return newValue;
-}
-/**
- * get next time value from current time base on the operator "<" or ">".
- * If nextValue is not "<" or ">", returns converted time base on the timezone
- */
-function calculateValue4Time(lastValue, nextValue, timezone) {
-    // if the relative value missed, it's null.
-    // And if it's missed, just use current value from last line.
-    let newValue = lastValue;
-    if (nextValue != null && nextValue.length > 0) {
-        if (nextValue[0] !== '<' && nextValue[0] !== '>') {
-            newValue = getTimeFromTimeZone(parseFloat(nextValue), timezone);
-        }
-        else {
-            newValue = calculateValue(lastValue, nextValue);
-        }
-    }
-    return newValue;
-}
-/**
- * check whether the data comes from valid nameserver history file
- */
-function validateData(data) {
-    return data == null ? false : data.length >= 4 && ['host', 'time'].every(i => data[0].includes(i));
-}
-/**
- * convert blob to file
- * @param theBlob
- * @param fileName
- */
-function blobToFile(theBlob, fileName) {
-    const blob = theBlob;
-    // A Blob() is almost a File() - it's just missing the two properties below which we will add
-    blob.lastModifiedDate = new Date();
-    blob.name = fileName;
-    // Cast to a File() type
-    return theBlob;
-}
-/**
- * check the object is a File object or not a File(Blob)
- * @param obj
- */
-function isFile(obj) {
-    return obj && typeof obj.name === 'string';
-}
-
-class TimezoneSelectorService {
-    /**
-     * get the default timezone
-     */
-    getDefaultTimezone() {
-        return getDefaultTimezone();
-    }
-    /**
-     * Get all the timezones for each region
-     */
-    getZones() {
-        const timezones = [];
-        const zones = moment.tz.names();
-        zones.forEach(zone => {
-            // get region
-            let region;
-            if (zone.indexOf('/') > 0) {
-                region = zone.slice(0, zone.indexOf('/'));
-                this._buildTimezones(timezones, region, zone);
-            }
-        });
-        return timezones;
-    }
-    /**
-     * build timezone lists
-     */
-    _buildTimezones(timezones, region, zone) {
-        if (timezones) {
-            let timezoneRegion = timezones.find(tz => tz.region === region);
-            if (!timezoneRegion) {
-                timezoneRegion = { region: region, zones: [] };
-                timezones.push(timezoneRegion);
-            }
-            timezoneRegion.zones.push(zone);
-        }
-    }
-}
-TimezoneSelectorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimezoneSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TimezoneSelectorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimezoneSelectorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimezoneSelectorService, decorators: [{
-            type: Injectable
-        }] });
-
-class TimezoneSelectorComponent {
-    constructor(service) {
-        this.service = service;
-        this.disabled = false;
-        this.timezoneChange = new EventEmitter();
-        const defaultTZ = this.service.getDefaultTimezone();
-        this.timezones = this.service.getZones().map(tz => ({ group: tz.region, items: tz.zones.map(zone => ({ id: zone, value: zone, text: this._getFormattedZone(tz.region, zone), selected: zone === defaultTZ })) }));
-    }
-    static _formatNumber(number) {
-        return number < 10 || !number ? `0${number}` : `${number}`;
-    }
-    ngOnChanges(changes) {
-        if (changes.timezone && changes.timezone.currentValue) {
-            if (this.timezones) {
-                this.timezones = this.service.getZones().map(tz => ({ group: tz.region, items: tz.zones.map(zone => ({ id: zone, value: zone, text: this._getFormattedZone(tz.region, zone), selected: zone === changes.timezone.currentValue })) }));
-            }
-        }
-    }
-    _getFormattedZone(region, zone) {
-        return `${region} - ${this._formatTimezone(zone)} ${this._getOffset(zone)}`;
-    }
-    _formatTimezone(zone) {
-        const tz = zone.split('/');
-        return tz[tz.length - 1].replace('_', ' ');
-    }
-    _getOffset(zone) {
-        let offset = moment.tz(zone).utcOffset();
-        const neg = offset < 0;
-        if (neg) {
-            offset = -1 * offset;
-        }
-        const hours = Math.floor(offset / 60);
-        const minutes = (offset / 60 - hours) * 60;
-        return `(GMT${neg ? '-' : '+'}${TimezoneSelectorComponent._formatNumber(hours)}:${TimezoneSelectorComponent._formatNumber(minutes)})`;
-    }
-    /**
-     * onChange function called by the "ngx-select" element
-     * @param selectedTimezone The timezone string selected
-     */
-    onChange(selectedTimezone) {
-        this.timezone = selectedTimezone;
-        this.timezoneChange.emit(this.timezone);
-    }
-}
-TimezoneSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimezoneSelectorComponent, deps: [{ token: TimezoneSelectorService }], target: i0.ɵɵFactoryTarget.Component });
-TimezoneSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: { disabled: "disabled", timezone: "timezone" }, outputs: { timezoneChange: "timezoneChange" }, providers: [TimezoneSelectorService], usesOnChanges: true, ngImport: i0, template: `
-    <ngx-dropdown-list (selectionChange)="onChange($event)"
-                       [items]="timezones"
-                       [multiSelection]="false"
-                       [placeHolder]="'Timezones'"
-                       [(selectedValue)]="timezone"
-                       [filterBox]="true"
-                       [disabled]="disabled"
-                       [allowClear]="false">
-    </ngx-dropdown-list>
-  `, isInline: true, components: [{ type: i2.DropdownListComponent, selector: "ngx-dropdown-list", inputs: ["placeHolder", "items", "multiSelection", "selectedValue", "filterBox", "suffixText", "disabled", "allowClear", "formatNumber"], outputs: ["selectedValueChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimezoneSelectorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'timezone-selector',
-                    template: `
-    <ngx-dropdown-list (selectionChange)="onChange($event)"
-                       [items]="timezones"
-                       [multiSelection]="false"
-                       [placeHolder]="'Timezones'"
-                       [(selectedValue)]="timezone"
-                       [filterBox]="true"
-                       [disabled]="disabled"
-                       [allowClear]="false">
-    </ngx-dropdown-list>
-  `,
-                    providers: [TimezoneSelectorService],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: TimezoneSelectorService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], timezone: [{
-                type: Input
-            }], timezoneChange: [{
-                type: Output
-            }] } });
-
-class PortSelectorService {
-    /**
-     * generate the default ports from 3**01 to 3**99
-     * the ports which used (3**01, 3**03, 3**07, 3**40, 3**43, 3*46， 3**49, 3**52, 3**55, 3*58, 3**61 ...)
-     * by hana normally will be put in the first places
-     */
-    _getDefaultPorts() {
-        if (this._defaultPorts) {
-            return this._defaultPorts;
-        }
-        // name server, default index server and xsengine
-        this._defaultPorts = [
-            { id: '3**01', text: '3**01' },
-            { id: '3**03', text: '3**03' },
-            { id: '3**07', text: '3**07' }
-        ];
-        // tenant index servers
-        for (let i = 40; i < 100; i += 3) {
-            this._defaultPorts.push({ id: `3**${i}`, text: `3**${i}` });
-        }
-        // others
-        for (let i = 1; i < 100; i++) {
-            const port = i > 9 ? `3**${i}` : `3**0${i}`;
-            if (this._defaultPorts.findIndex(item => item.id === port) < 0) {
-                this._defaultPorts.push({ id: port, text: port });
-            }
-        }
-        return this._defaultPorts;
-    }
-    getPorts(ports = null) {
-        return ports != null && ports.length > 0 ? ports : this._getDefaultPorts();
-    }
-}
-PortSelectorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PortSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PortSelectorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PortSelectorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PortSelectorService, decorators: [{
-            type: Injectable
-        }] });
-
-class PortSelectorComponent {
-    constructor(service) {
-        this.service = service;
-        /**
-         * Input: boolean (optional) bind to [disabled]
-         */
-        this.disabled = false;
-        /**
-         * Output event bind to (port)
-         */
-        this.portChange = new EventEmitter();
-    }
-    get displayPorts() {
-        return this.service.getPorts(this.ports);
-    }
-    /**
-     * onChange function called by the "ngx-select" element
-     */
-    onChange(event) {
-        this.portChange.emit(event);
-    }
-}
-PortSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PortSelectorComponent, deps: [{ token: PortSelectorService }], target: i0.ɵɵFactoryTarget.Component });
-PortSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PortSelectorComponent, selector: "port-selector", inputs: { disabled: "disabled", port: "port", ports: "ports" }, outputs: { portChange: "portChange" }, providers: [PortSelectorService], ngImport: i0, template: `
-    <label style="width: 100%">
-      <ngx-dropdown-list (selectionChange)="onChange($event)"
-                         [items]="displayPorts"
-                         [multiSelection]="false"
-                         [placeHolder]="'Ports'"
-                         [(selectedValue)]="port"
-                         [filterBox]="true"
-                         [disabled]="disabled">
-      </ngx-dropdown-list>
-    </label>
-  `, isInline: true, components: [{ type: i2.DropdownListComponent, selector: "ngx-dropdown-list", inputs: ["placeHolder", "items", "multiSelection", "selectedValue", "filterBox", "suffixText", "disabled", "allowClear", "formatNumber"], outputs: ["selectedValueChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PortSelectorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'port-selector',
-                    template: `
-    <label style="width: 100%">
-      <ngx-dropdown-list (selectionChange)="onChange($event)"
-                         [items]="displayPorts"
-                         [multiSelection]="false"
-                         [placeHolder]="'Ports'"
-                         [(selectedValue)]="port"
-                         [filterBox]="true"
-                         [disabled]="disabled">
-      </ngx-dropdown-list>
-    </label>
-  `,
-                    providers: [PortSelectorService],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: PortSelectorService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], portChange: [{
-                type: Output
-            }], port: [{
-                type: Input
-            }], ports: [{
-                type: Input
-            }] } });
-
-class InstructionComponent {
-    constructor() {
-        this.step1Finished = false;
-        this.step2Finished = false;
-        this.step3Finished = false;
-        this.step4Finished = false;
-        this.step5Finished = false;
-        this.show = true;
-        /**
-         * Output event bind to (show)
-         */
-        this.showChange = new EventEmitter();
-    }
-    onClose() {
-        this.show = false;
-        this.showChange.emit(this.show);
-    }
-}
-InstructionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InstructionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InstructionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: InstructionComponent, selector: "instruction", inputs: { step1Finished: "step1Finished", step2Finished: "step2Finished", step3Finished: "step3Finished", step4Finished: "step4Finished", step5Finished: "step5Finished", show: "show" }, outputs: { showChange: "showChange" }, ngImport: i0, template: "<div class=\"instruction\" *ngIf=\"show\">\r\n  <div class=\"close\" (click)=\"onClose()\">&times;</div>\r\n  <div class=\"mandatory\" [class.completed]=\"step1Finished\">\r\n    <label>Select nameserver history file <span class=\"flag\">*</span></label> <br>\r\n    <ul>\r\n      <li>Click the \"Browse\" </li>\r\n      <li>Drag and drop your file to \"Drop File Here\"</li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"optional\" [class.completed]=\"step2Finished\">\r\n    <label>Select time range and timezone <span class=\"flag\">(optional)</span></label> <br>\r\n    <ul>\r\n      <li>If you do not select time range, this tool will read from the beginning until it reaches the configured maxRowsLimitation. </li>\r\n      <li>If you do not select time zone, this tool will use your local default timezone.</li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"optional\" [class.completed]=\"step3Finished\">\r\n    <label>Select ports <span class=\"flag\">(optional)</span></label> <br>\r\n    <ul>\r\n      <li>If you do not choose any port, this tool will try to load data for all ports until it reaches the configured maxRowsLimitation.</li>\r\n      <li>After choosing one port, this tool will only try to load data for the selected port until it reaches the configured maxRowsLimitation.</li>\r\n      <li>If you do not know any port information, you can click \"Load\" to load all ports from the nameserver history file.</li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"mandatory\" [class.completed]=\"step4Finished\">\r\n    <label>Load the data from nameserver history file and show the chart <span class=\"flag\">*</span></label> <br>\r\n    <ul><li>Click button \"Show\"</li></ul>\r\n  </div>\r\n  <div class=\"optional\" [class.completed]=\"step5Finished\">\r\n    <label>Reset the chart <span class=\"flag\">(optional)</span></label> <br>\r\n    <ul><li>If you zoomed in, you can go back to original status by clicking \"Reset Chart\"</li></ul>\r\n  </div>\r\n</div>\r\n", styles: [".instruction{margin-top:15px;padding:15px;position:relative;width:100%;height:auto;text-align:left;text-shadow:0 0 1px #DDDDDD;font-size:16px;font-weight:400;background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}.instruction .close{position:absolute;top:2px;right:4px;color:red;font-size:14px}.instruction .close:hover{font-weight:700;cursor:pointer}.instruction li{font-size:14px;display:list-item}.instruction .mandatory{color:#3a4048}.instruction .mandatory .flag{color:red;display:inline}.instruction .optional{color:#3a4048}.instruction .optional .flag{color:#00008b;display:inline}.instruction .completed{color:#2e8b57}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InstructionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'instruction', template: "<div class=\"instruction\" *ngIf=\"show\">\r\n  <div class=\"close\" (click)=\"onClose()\">&times;</div>\r\n  <div class=\"mandatory\" [class.completed]=\"step1Finished\">\r\n    <label>Select nameserver history file <span class=\"flag\">*</span></label> <br>\r\n    <ul>\r\n      <li>Click the \"Browse\" </li>\r\n      <li>Drag and drop your file to \"Drop File Here\"</li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"optional\" [class.completed]=\"step2Finished\">\r\n    <label>Select time range and timezone <span class=\"flag\">(optional)</span></label> <br>\r\n    <ul>\r\n      <li>If you do not select time range, this tool will read from the beginning until it reaches the configured maxRowsLimitation. </li>\r\n      <li>If you do not select time zone, this tool will use your local default timezone.</li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"optional\" [class.completed]=\"step3Finished\">\r\n    <label>Select ports <span class=\"flag\">(optional)</span></label> <br>\r\n    <ul>\r\n      <li>If you do not choose any port, this tool will try to load data for all ports until it reaches the configured maxRowsLimitation.</li>\r\n      <li>After choosing one port, this tool will only try to load data for the selected port until it reaches the configured maxRowsLimitation.</li>\r\n      <li>If you do not know any port information, you can click \"Load\" to load all ports from the nameserver history file.</li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"mandatory\" [class.completed]=\"step4Finished\">\r\n    <label>Load the data from nameserver history file and show the chart <span class=\"flag\">*</span></label> <br>\r\n    <ul><li>Click button \"Show\"</li></ul>\r\n  </div>\r\n  <div class=\"optional\" [class.completed]=\"step5Finished\">\r\n    <label>Reset the chart <span class=\"flag\">(optional)</span></label> <br>\r\n    <ul><li>If you zoomed in, you can go back to original status by clicking \"Reset Chart\"</li></ul>\r\n  </div>\r\n</div>\r\n", styles: [".instruction{margin-top:15px;padding:15px;position:relative;width:100%;height:auto;text-align:left;text-shadow:0 0 1px #DDDDDD;font-size:16px;font-weight:400;background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}.instruction .close{position:absolute;top:2px;right:4px;color:red;font-size:14px}.instruction .close:hover{font-weight:700;cursor:pointer}.instruction li{font-size:14px;display:list-item}.instruction .mandatory{color:#3a4048}.instruction .mandatory .flag{color:red;display:inline}.instruction .optional{color:#3a4048}.instruction .optional .flag{color:#00008b;display:inline}.instruction .completed{color:#2e8b57}\n"] }]
-        }], propDecorators: { step1Finished: [{
-                type: Input
-            }], step2Finished: [{
-                type: Input
-            }], step3Finished: [{
-                type: Input
-            }], step4Finished: [{
-                type: Input
-            }], step5Finished: [{
-                type: Input
-            }], show: [{
-                type: Input
-            }], showChange: [{
-                type: Output
-            }] } });
-
-class TimeRangeSelectorComponent {
-    constructor() {
-        this.disabled = false;
-        /**
-         * for two way binding.
-         */
-        this.dateTimeRangeChange = new EventEmitter();
-    }
-    /**
-     * triggered when picker closed
-     */
-    afterPickerClosed() {
-        this.dateTimeRangeChange.emit(this.dateTimeRange);
-    }
-}
-TimeRangeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeRangeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimeRangeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: { disabled: "disabled", dateTimeRange: "dateTimeRange" }, outputs: { dateTimeRangeChange: "dateTimeRangeChange" }, ngImport: i0, template: `
-    <div class="time-range">
-      <div class="time-range-from">
-        <input placeholder="Date Time Range From:"
-               [disabled]="disabled"
-               [(ngModel)]="dateTimeRange"
-               [selectMode]="'rangeFrom'"
-               [owlDateTimeTrigger]="dtRange2" [owlDateTime]="dtRange2" #dateTime2="ngModel" readonly>
-        <owl-date-time #dtRange2 (afterPickerClosed)="afterPickerClosed()"></owl-date-time>
-      </div>
-      <div class="time-range-to">
-        <input placeholder="Date Time Range To:"
-               [disabled]="disabled"
-               [(ngModel)]="dateTimeRange"
-               [selectMode]="'rangeTo'"
-               [owlDateTimeTrigger]="dtRange3" [owlDateTime]="dtRange3" #dateTime3="ngModel" readonly>
-        <owl-date-time #dtRange3 (afterPickerClosed)="afterPickerClosed()"></owl-date-time>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .time-range input:hover,.time-range :host input:hover,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .time-range input,.time-range :host input,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}.time-range{width:100%;box-sizing:border-box}.time-range .time-range-from{width:48.5%;float:left;margin-left:1%;margin-right:1%}.time-range .time-range-to{width:48.5%;float:right;margin-right:1%}.time-range input{margin-top:6px;width:100%;padding:6px 12px;color:#495057;cursor:pointer}.time-range input:disabled{box-shadow:none}\n"], components: [{ type: i1$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeRangeSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'time-range-selector', template: `
-    <div class="time-range">
-      <div class="time-range-from">
-        <input placeholder="Date Time Range From:"
-               [disabled]="disabled"
-               [(ngModel)]="dateTimeRange"
-               [selectMode]="'rangeFrom'"
-               [owlDateTimeTrigger]="dtRange2" [owlDateTime]="dtRange2" #dateTime2="ngModel" readonly>
-        <owl-date-time #dtRange2 (afterPickerClosed)="afterPickerClosed()"></owl-date-time>
-      </div>
-      <div class="time-range-to">
-        <input placeholder="Date Time Range To:"
-               [disabled]="disabled"
-               [(ngModel)]="dateTimeRange"
-               [selectMode]="'rangeTo'"
-               [owlDateTimeTrigger]="dtRange3" [owlDateTime]="dtRange3" #dateTime3="ngModel" readonly>
-        <owl-date-time #dtRange3 (afterPickerClosed)="afterPickerClosed()"></owl-date-time>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .time-range input:hover,.time-range :host input:hover,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .time-range input,.time-range :host input,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}.time-range{width:100%;box-sizing:border-box}.time-range .time-range-from{width:48.5%;float:left;margin-left:1%;margin-right:1%}.time-range .time-range-to{width:48.5%;float:right;margin-right:1%}.time-range input{margin-top:6px;width:100%;padding:6px 12px;color:#495057;cursor:pointer}.time-range input:disabled{box-shadow:none}\n"] }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], dateTimeRange: [{
-                type: Input
-            }], dateTimeRangeChange: [{
-                type: Output
-            }] } });
-
-// Using dynamic flag to fix the issue of ng-packagr #696: Lambda not supported
-// @dynamic
-class UIService {
-    constructor() {
-        this._DEFAULT_DISPLAY_ITEMS = ['cpuUsed', 'indexserverMemUsed', 'mvccNum'];
-        this._HIDED_COLUMNS = [Item.yScaleGroup, Item.description];
-        this._MEASURE_COLUMNS = [Item.max, Item.average, Item.sum, Item.last];
-        this._loadHistoryInfos = {};
-    }
-    /**
-     * get the colors for legends
-     */
-    static getColors(alpha = null) {
-        if (alpha == null) {
-            alpha = 0.8;
-        }
-        return {
-            cpuUsed: this._getRgbColor(199, 21, 133, alpha),
-            memoryResident: this._getRgbColor(238, 130, 238, alpha),
-            memoryTotalResident: this._getRgbColor(72, 61, 139, alpha),
-            memoryUsed: this._getRgbColor(0, 0, 205, alpha),
-            memoryLimit: this._getRgbColor(255, 105, 180, alpha),
-            memorySize: this._getRgbColor(70, 130, 180, alpha),
-            diskUsed: this._getRgbColor(25, 25, 112, alpha),
-            diskSize: this._getRgbColor(0, 255, 255, alpha),
-            networkIn: this._getRgbColor(102, 51, 153, alpha),
-            networkOut: this._getRgbColor(245, 222, 179, alpha),
-            swapIn: this._getRgbColor(47, 79, 79, alpha),
-            swapOut: this._getRgbColor(205, 92, 92, alpha),
-            indexserverCpu: this._getRgbColor(255, 99, 71, alpha),
-            indexserverCpuSys: this._getRgbColor(255, 20, 147, alpha),
-            indexserverMemUsed: this._getRgbColor(0, 255, 0, alpha),
-            indexserverMemLimit: this._getRgbColor(139, 0, 0, alpha),
-            indexserverHandles: this._getRgbColor(139, 0, 139, alpha),
-            indexserverPingtime: this._getRgbColor(189, 183, 107, alpha),
-            indexserverSwapIn: this._getRgbColor(112, 128, 144, alpha),
-            sqlConnections: this._getRgbColor(85, 107, 47, alpha),
-            internalConnections: this._getRgbColor(46, 139, 87, alpha),
-            externalConnections: this._getRgbColor(147, 112, 219, alpha),
-            idleConnections: this._getRgbColor(216, 191, 216, alpha),
-            sqlTransactions: this._getRgbColor(220, 20, 60, alpha),
-            internalTransactions: this._getRgbColor(186, 85, 211, alpha),
-            externalTransactions: this._getRgbColor(221, 160, 221, alpha),
-            userTransactions: this._getRgbColor(210, 105, 30, alpha),
-            sqlBlockedTrans: this._getRgbColor(0, 0, 255, alpha),
-            sqlStatements: this._getRgbColor(188, 143, 143, alpha),
-            cidRange: this._getRgbColor(32, 178, 170, alpha),
-            tidRange: this._getRgbColor(124, 252, 0, alpha),
-            pendingRequestCount: this._getRgbColor(160, 32, 240, alpha),
-            mvccNum: this._getRgbColor(65, 105, 225, alpha),
-            acquiredRecordLocks: this._getRgbColor(0, 250, 154, alpha),
-            searchCount: this._getRgbColor(127, 255, 212, alpha),
-            indexingCount: this._getRgbColor(0, 191, 255, alpha),
-            mergeCount: this._getRgbColor(135, 206, 235, alpha),
-            unloadCount: this._getRgbColor(255, 165, 0, alpha),
-            indexserverThreads: this._getRgbColor(0, 100, 0, alpha),
-            waitingThreads: this._getRgbColor(176, 48, 96, alpha),
-            totalThreads: this._getRgbColor(100, 149, 237, alpha),
-            activeSqlExecutors: this._getRgbColor(175, 238, 238, alpha),
-            waitingSqlExecutors: this._getRgbColor(50, 205, 50, alpha),
-            totalSqlExecutors: this._getRgbColor(240, 230, 140, alpha),
-            dataWriteSize: this._getRgbColor(102, 205, 170, alpha),
-            dataWriteTime: this._getRgbColor(169, 169, 169, alpha),
-            logWriteSize: this._getRgbColor(160, 82, 45, alpha),
-            logWriteTime: this._getRgbColor(128, 128, 0, alpha),
-            dataReadSize: this._getRgbColor(255, 215, 0, alpha),
-            dataReadTime: this._getRgbColor(95, 158, 160, alpha),
-            logReadSize: this._getRgbColor(255, 0, 0, alpha),
-            logReadTime: this._getRgbColor(184, 134, 11, alpha),
-            dataBackupWriteSize: this._getRgbColor(255, 255, 0, alpha),
-            dataBackupWriteTime: this._getRgbColor(154, 205, 50, alpha),
-            logBackupWriteSize: this._getRgbColor(0, 0, 139, alpha),
-            logBackupWriteTime: this._getRgbColor(219, 112, 147, alpha),
-            mutexCollisionCount: this._getRgbColor(244, 164, 96, alpha),
-            readWriteLockCollisionCount: this._getRgbColor(233, 150, 122, alpha),
-            admissinControlAdmitCount: this._getRgbColor(143, 188, 143, alpha),
-            admissionControlRejectCount: this._getRgbColor(255, 0, 255, alpha),
-            admissionControlWaitingRequests: this._getRgbColor(153, 50, 204, alpha),
-            admissionControlWaitTime: this._getRgbColor(144, 238, 144, alpha), // lightgreen
-        };
-    }
-    static get _unitType() {
-        const unitType = {};
-        unitType[Unit.PCT] = UnitType.TypeEA;
-        unitType[Unit.MS] = UnitType.TypeEA;
-        unitType[Unit.Empty] = UnitType.TypeEA;
-        unitType[Unit.GB] = UnitType.TypeGB;
-        unitType[Unit.MB] = UnitType.TypeMB;
-        unitType[Unit.MBPerSec] = UnitType.TypeMBSec;
-        unitType[Unit.SecPerSec] = UnitType.TypeSecSec;
-        unitType[Unit.StmtPerSec] = UnitType.TypeSec;
-        unitType[Unit.ReqPerSec] = UnitType.TypeSec;
-        unitType[Unit.ColPerSec] = UnitType.TypeSec;
-        return unitType;
-    }
-    /**
-     * get yScale group list from the enum ScaleGroup
-     */
-    static get _YScaleGroupList() {
-        return Object.keys(ScaleGroup).filter(key => !isNaN(Number(ScaleGroup[key]))).map(key => ScaleGroup[key]);
-    }
-    /**
-     * Generate one item by the provided attributes and values
-     * @param args the dynamic parameter of [attribute, value]
-     */
-    static _generateLoadHistoryInfoItem(...args) {
-        const obj = {};
-        if (!args || args.length <= 0) {
-            return obj;
-        }
-        args.forEach(item => {
-            if (item && item.length >= 2) {
-                obj[item[0]] = item[1];
-            }
-        });
-        return obj;
-    }
-    /**
-     * generate the loadHistoryInfo object with default values.
-     */
-    static _generateLoadHistoryInfo() {
-        // minimum value for YScale of swapIn, swapOut, indexserverSwapIn is 100 (according to hana studio)
-        const infoItem = UIService._generateLoadHistoryInfoItem; // just for making the name shorter...
-        const cpuUsed = infoItem([Item.kpi, 'CPU'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.CPU], [Item.unit, Unit.PCT], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'CPU Used by all processes']);
-        const memoryResident = infoItem([Item.kpi, 'Database Resident Memory'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Physical memory used for all HANA processes']);
-        const memoryTotalResident = infoItem([Item.kpi, 'Total Resident Memory'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Physical memory used for all processes']);
-        const memoryUsed = infoItem([Item.kpi, 'Database Used Memory'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Memory used for all HANA processes']);
-        const memoryLimit = infoItem([Item.kpi, 'Database Allocation Limit'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Memory allocation limit for all processes of HANA instance']);
-        const memorySize = infoItem([Item.kpi, 'Physical Memory Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Physical memory size']);
-        const diskUsed = infoItem([Item.kpi, 'Disk Used'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Disk], [Item.unit, Unit.GB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Disk used']);
-        const diskSize = infoItem([Item.kpi, 'Disk Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Disk], [Item.unit, Unit.GB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Disk size']);
-        const networkIn = infoItem([Item.kpi, 'Network In'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Network], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from network by all processes']);
-        const networkOut = infoItem([Item.kpi, 'Network Out'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Network], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written to network by all processes']);
-        const swapIn = infoItem([Item.kpi, 'Swap In'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from swap by all processes (pswpin line in /proc/vmstat * sysconf(_SC_PAGESIZE))']);
-        const swapOut = infoItem([Item.kpi, 'Swap Out'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written To swap by all processes (pswpout line in /proc/vmstat * sysconf(_SC_PAGESIZE))']);
-        const indexserverCpu = infoItem([Item.kpi, 'Index Server CPU'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.CPU], [Item.unit, Unit.PCT], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'CPU used by Service']);
-        const indexserverCpuSys = infoItem([Item.kpi, 'System CPU'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.CPU], [Item.unit, Unit.PCT], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'OS Kernel/System CPU used by Service']);
-        const indexserverMemUsed = infoItem([Item.kpi, 'Memory Used'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Memory used by Service']);
-        const indexserverMemLimit = infoItem([Item.kpi, 'Memory Allocation Limit'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Memory], [Item.unit, Unit.MB], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Memory allocation limit for Service']);
-        const indexserverHandles = infoItem([Item.kpi, 'Handles'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open handles']);
-        const indexserverPingtime = infoItem([Item.kpi, 'Ping Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.MS], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Duration of Service ping request (THREAD_METHOD=\'__nsWatchdog\'). This request includes the collection of service specific KPI\'s']);
-        const indexserverSwapIn = infoItem([Item.kpi, 'Index Server Swap In'], [Item.yScale, 100], [Item.yScaleGroup, ScaleGroup.Swap], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from swap by Service (column 12(majflt) in /proc/<pid>/stat * sysconf(_SC_PAGESIZE))']);
-        const sqlConnections = infoItem([Item.kpi, 'Open Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL connections']);
-        const internalConnections = infoItem([Item.kpi, 'Internal Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL internal connections']);
-        const externalConnections = infoItem([Item.kpi, 'External Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL external connections']);
-        const idleConnections = infoItem([Item.kpi, 'Idle Connections'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Conn], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL idle connections']);
-        const sqlTransactions = infoItem([Item.kpi, 'Open Transactions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Trans], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of open SQL transactions']);
-        const internalTransactions = infoItem([Item.kpi, 'Internal Transactions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Trans], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of internal transactions']);
-        const externalTransactions = infoItem([Item.kpi, 'External Transactions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Trans], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of external transactions']);
-        const userTransactions = infoItem([Item.kpi, 'User Transactions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Trans], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of user transactions']);
-        const sqlBlockedTrans = infoItem([Item.kpi, 'Blocked Transactions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of blocked SQL transactions']);
-        const sqlStatements = infoItem([Item.kpi, 'Statements'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Stmt], [Item.unit, Unit.StmtPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of finished SQL statements']);
-        const cidRange = infoItem([Item.kpi, 'Active Commit ID Range'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Range between newest and oldest active commit ID']);
-        const tidRange = infoItem([Item.kpi, 'Active Transaction ID Range'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Range between newest and oldest active transaction ID']);
-        const pendingRequestCount = infoItem([Item.kpi, 'Pending Request Count'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of pending session requests']);
-        const mvccNum = infoItem([Item.kpi, 'Active Versions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of active MVCC versions']);
-        const acquiredRecordLocks = infoItem([Item.kpi, 'Acquired Record Locks'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of acquired record locks']);
-        const searchCount = infoItem([Item.kpi, 'Read Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Req], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of read requests (select)']);
-        const indexingCount = infoItem([Item.kpi, 'Write Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Req], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of write requests (insert,update,delete)']);
-        const mergeCount = infoItem([Item.kpi, 'Merge Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Req], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of merge requests']);
-        const unloadCount = infoItem([Item.kpi, 'Column Unloads'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Req], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of column unloads']);
-        const indexserverThreads = infoItem([Item.kpi, 'Active Threads'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of active threads']);
-        const waitingThreads = infoItem([Item.kpi, 'Waiting Threads'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of waiting threads']);
-        const totalThreads = infoItem([Item.kpi, 'Total Threads'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Total number of threads']);
-        const activeSqlExecutors = infoItem([Item.kpi, 'Active SqlExecutors'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of active SqlExecutors']);
-        const waitingSqlExecutors = infoItem([Item.kpi, 'Waiting SqlExecutors'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of waiting SqlExecutors']);
-        const totalSqlExecutors = infoItem([Item.kpi, 'Total SqlExecutors'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.Empty], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Total number of SqlExecutors']);
-        const dataWriteSize = infoItem([Item.kpi, 'Data Write Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRSize], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written to data area']);
-        const dataWriteTime = infoItem([Item.kpi, 'Data Write Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRTime], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Time used for writing to data area']);
-        const logWriteSize = infoItem([Item.kpi, 'Log Write Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRSize], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written to log area']);
-        const logWriteTime = infoItem([Item.kpi, 'Log Write Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRTime], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Time used for writing to log area']);
-        const dataReadSize = infoItem([Item.kpi, 'Data Read Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRSize], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from data area']);
-        const dataReadTime = infoItem([Item.kpi, 'Data Read Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRTime], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Time used for reading from data area']);
-        const logReadSize = infoItem([Item.kpi, 'Log Read Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRSize], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes read from log area']);
-        const logReadTime = infoItem([Item.kpi, 'Log Read Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRTime], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Time used for reading from log area']);
-        const dataBackupWriteSize = infoItem([Item.kpi, 'Data Backup Write Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRSize], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written to data backup']);
-        const dataBackupWriteTime = infoItem([Item.kpi, 'Data Backup Write Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRTime], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Time used for writing to data backup']);
-        const logBackupWriteSize = infoItem([Item.kpi, 'Log Backup Write Size'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRSize], [Item.unit, Unit.MBPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Bytes written to log backup']);
-        const logBackupWriteTime = infoItem([Item.kpi, 'Log Backup Write Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.WRTime], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Time used for writing to log backup']);
-        const mutexCollisionCount = infoItem([Item.kpi, 'Mutex Collisions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ColPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of collisions on mutexes']);
-        const readWriteLockCollisionCount = infoItem([Item.kpi, 'Read/Write Lock Collisions'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ColPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of collisions on read/write locks']);
-        const admissinControlAdmitCount = infoItem([Item.kpi, 'Admitted Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of session requests admitted by admission control']);
-        const admissionControlRejectCount = infoItem([Item.kpi, 'Rejected Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of session requests rejected by admission control']);
-        const admissionControlWaitingRequests = infoItem([Item.kpi, 'Waiting Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of session requests waiting in admission control queue']);
-        const admissionControlWaitTime = infoItem([Item.kpi, 'Wait Time'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.SecPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Total wait time of session requests queued in admission control queue']);
-        const admissionControlEnqueueCount = infoItem([Item.kpi, 'Enqueued Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of session requests enqueued by admission control']);
-        const admissionControlDequeueCount = infoItem([Item.kpi, 'Dequeued Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of session requests dequeued by admission control']);
-        const admissionControlTimeoutCount = infoItem([Item.kpi, 'Timed out Requests'], [Item.yScale, 0,], [Item.yScaleGroup, ScaleGroup.Unknown], [Item.unit, Unit.ReqPerSec], [Item.max, -1], [Item.average, -1], [Item.sum, -1], [Item.last, -1], [Item.description, 'Number of timed out session requests in admission control queue']);
-        // generate Host
-        const loadHistoryInfoHost = {
-            cpuUsed: cpuUsed,
-            memoryResident: memoryResident,
-            memoryTotalResident: memoryTotalResident,
-            memoryUsed: memoryUsed,
-            memoryLimit: memoryLimit,
-            memorySize: memorySize,
-            diskUsed: diskUsed,
-            diskSize: diskSize,
-            networkIn: networkIn,
-            networkOut: networkOut,
-            swapIn: swapIn,
-            swapOut: swapOut,
-        };
-        // generate Index Server
-        const loadHistoryInfoIndexServer = {
-            indexserverCpu: indexserverCpu,
-            indexserverCpuSys: indexserverCpuSys,
-            indexserverMemUsed: indexserverMemUsed,
-            indexserverMemLimit: indexserverMemLimit,
-            indexserverHandles: indexserverHandles,
-            indexserverPingtime: indexserverPingtime,
-            indexserverSwapIn: indexserverSwapIn,
-        };
-        // generate SQL
-        const loadHistoryInfoSQL = {
-            sqlConnections: sqlConnections,
-            internalConnections: internalConnections,
-            externalConnections: externalConnections,
-            idleConnections: idleConnections,
-            sqlTransactions: sqlTransactions,
-            internalTransactions: internalTransactions,
-            externalTransactions: externalTransactions,
-            userTransactions: userTransactions,
-            sqlBlockedTrans: sqlBlockedTrans,
-            sqlStatements: sqlStatements,
-            cidRange: cidRange,
-            tidRange: tidRange,
-            pendingRequestCount: pendingRequestCount,
-        };
-        // generate Row Store
-        const loadHistoryInfoRowStore = {
-            mvccNum: mvccNum,
-            acquiredRecordLocks: acquiredRecordLocks,
-        };
-        // generate Column Store
-        const loadHistoryInfoColumnStore = {
-            searchCount: searchCount,
-            indexingCount: indexingCount,
-            mergeCount: mergeCount,
-            unloadCount: unloadCount,
-        };
-        // generate Threads
-        const loadHistoryInfoThreads = {
-            indexserverThreads: indexserverThreads,
-            waitingThreads: waitingThreads,
-            totalThreads: totalThreads,
-            activeSqlExecutors: activeSqlExecutors,
-            waitingSqlExecutors: waitingSqlExecutors,
-            totalSqlExecutors: totalSqlExecutors,
-        };
-        // generate Persistence
-        const loadHistoryInfoPersistence = {
-            dataWriteSize: dataWriteSize,
-            dataWriteTime: dataWriteTime,
-            logWriteSize: logWriteSize,
-            logWriteTime: logWriteTime,
-            dataReadSize: dataReadSize,
-            dataReadTime: dataReadTime,
-            logReadSize: logReadSize,
-            logReadTime: logReadTime,
-        };
-        // generate Backup
-        const loadHistoryInfoBackup = {
-            dataBackupWriteSize: dataBackupWriteSize,
-            dataBackupWriteTime: dataBackupWriteTime,
-            logBackupWriteSize: logBackupWriteSize,
-            logBackupWriteTime: logBackupWriteTime,
-        };
-        // generate Synchronization Primitives
-        const loadHistoryInfoSynchronizationPrimitives = {
-            mutexCollisionCount: mutexCollisionCount,
-            readWriteLockCollisionCount: readWriteLockCollisionCount,
-        };
-        // Session Admission Control
-        const loadHistoryInfoSessionAdmissionControl = {
-            admissinControlAdmitCount: admissinControlAdmitCount,
-            admissionControlRejectCount: admissionControlRejectCount,
-            admissionControlWaitingRequests: admissionControlWaitingRequests,
-            admissionControlWaitTime: admissionControlWaitTime,
-            admissionControlEnqueueCount: admissionControlEnqueueCount,
-            admissionControlDequeueCount: admissionControlDequeueCount,
-            admissionControlTimeoutCount: admissionControlTimeoutCount,
-        };
-        return {
-            'Host': loadHistoryInfoHost,
-            'Index Server': loadHistoryInfoIndexServer,
-            'SQL': loadHistoryInfoSQL,
-            'Row Store': loadHistoryInfoRowStore,
-            'Column Store': loadHistoryInfoColumnStore,
-            'Threads': loadHistoryInfoThreads,
-            'Persistence': loadHistoryInfoPersistence,
-            'Backup': loadHistoryInfoBackup,
-            'Synchronization Primitives': loadHistoryInfoSynchronizationPrimitives,
-            'Session Admission Control': loadHistoryInfoSessionAdmissionControl
-        };
-    }
-    /**
-     * get rgbcolor object via red, green, blue and alpha.
-     */
-    static _getRgbColor(red, green, blue, alpha) {
-        return { red: red, green: green, blue: blue, alpha: alpha };
-    }
-    static _getYScaleForItem(item, yScale) {
-        return yScale > item[Item.yScale] ? (item[Item.unit] === Unit.PCT ? 100 : yScale) : item[Item.yScale];
-    }
-    static _getMaxValueOfGroup(groupItems) {
-        let max = 0;
-        if (groupItems) {
-            max = groupItems.reduce((maxValue, current) => {
-                return current.Max > maxValue ? current.Max : maxValue;
-            }, 0);
-        }
-        return max;
-    }
-    _getLoadHistoryInfo(port) {
-        if (!this._loadHistoryInfos[port]) {
-            this._loadHistoryInfos[port] = UIService._generateLoadHistoryInfo();
-        }
-        return this._loadHistoryInfos[port];
-    }
-    _getProcessingUnit(itemKey, port) {
-        const historyDetailItem = this._getItemByKey(itemKey, port);
-        if (historyDetailItem) {
-            let unit = historyDetailItem.Unit;
-            if (!unit) {
-                unit = '';
-            }
-            return UIService._unitType[unit];
-        }
-    }
-    _setOverview(key, overview, unit, port) {
-        const historyDetailItem = this._getItemByKey(key, port);
-        if (historyDetailItem) {
-            historyDetailItem.Max = overview.Max >= 0 ? overview.Max : 0;
-            historyDetailItem.Average = overview.Average >= 0 ? overview.Average : 0;
-            // only TYPE_CONVERSION_MBSEC and TYPE_CONVERTION_SEC (eg: MB/s, req/s stmt/s...) need sum
-            historyDetailItem.Sum = isUnitTimeRelated(unit) ? (overview.Sum >= 0 ? overview.Sum : 0) : '-';
-            historyDetailItem.Last = overview.Last >= 0 ? overview.Last : 0;
-        }
-    }
-    /**
-     * convert unit values (eg: byte to MB or GB) and generate the control data (sum, max, avg) for one row
-     */
-    _convertUnitAndGenerateRowControlData(row, key, unit, port) {
-        return new Promise(resolve => {
-            if (row) {
-                const overview = { Sum: 0, Max: 0, Average: 0, Last: 0 };
-                const ignoredTailLineNum = getIgnoredLineNumFromTail();
-                let invalidCount = 0;
-                // convert unit and calculate the overview data, skip the first, and last three rows.
-                row.forEach((item, index, arrayData) => {
-                    // skip ignored line(s) from tail
-                    if (index <= row.length - ignoredTailLineNum - 1) {
-                        if (arrayData[index].y >= 0) {
-                            arrayData[index].y = getValueByUnit(item.y, unit);
-                            overview.Sum += arrayData[index].y;
-                            if (isUnitTimeRelated(unit)) {
-                                if (index === 0) {
-                                    // according to hana studio, for those time related column, the first value is set to 0
-                                    arrayData[index].y = 0;
-                                }
-                                else {
-                                    // get value for unit like: MB/s  (value / seconds)
-                                    const timeDiff = arrayData[index].x - arrayData[index - 1].x;
-                                    arrayData[index].y = timeDiff !== 0 ? arrayData[index].y * 1000 / timeDiff : 0;
-                                }
-                            }
-                            arrayData[index].y = getRoundedValue(arrayData[index].y);
-                            if (arrayData[index].y > overview.Max) {
-                                overview.Max = arrayData[index].y;
-                            }
-                        }
-                        else {
-                            // set value to 0, for those points with value -1 or < 0
-                            arrayData[index].y = 0;
-                            // invalid count + 1, for calculating the average (not time relative)
-                            invalidCount++;
-                        }
-                    }
-                });
-                if (row.length >= (ignoredTailLineNum + invalidCount)) {
-                    if (isUnitTimeRelated(unit)) {
-                        const timePeriod = row[row.length - ignoredTailLineNum - 1].x - row[0].x;
-                        overview.Average = timePeriod !== 0 ? getRoundedValue(overview.Sum * 1000 / timePeriod) : 0;
-                    }
-                    else {
-                        const validItemCount = row.length - ignoredTailLineNum - invalidCount;
-                        overview.Average = validItemCount > 0 ? getRoundedValue(overview.Sum / validItemCount) : 0;
-                    }
-                    overview.Last = row[row.length - ignoredTailLineNum - 1].y;
-                    overview.Sum = getRoundedValue(overview.Sum);
-                    overview.Max = getRoundedValue(overview.Max);
-                    // remove those ignored lines
-                    row.length = row.length - ignoredTailLineNum;
-                }
-                this._setOverview(key, overview, unit, port);
-            }
-            resolve();
-        });
-    }
-    /**
-     * Loop from all history items, put those history items which
-     * have the same yScaleGroup together, using yScaleGroup as key.
-     * eg: {__SCALE_GROUP_CPU:[item1, item2...], __SCALE_GROUP_UNKNOWN:[item3, item4...]}
-     */
-    _getYScaleGroupWithHistoryItems(port) {
-        const yScaleGroup = {};
-        const loadHistoryInfo = this._getLoadHistoryInfo(port);
-        Object.keys(loadHistoryInfo).forEach(parentKey => {
-            Object.keys(loadHistoryInfo[parentKey]).forEach(childKey => {
-                const detailItem = loadHistoryInfo[parentKey][childKey];
-                const yScaleGroupKey = detailItem._YScaleGroup;
-                if (!yScaleGroup[yScaleGroupKey]) {
-                    yScaleGroup[yScaleGroupKey] = [];
-                }
-                yScaleGroup[yScaleGroupKey].push(detailItem);
-            });
-        });
-        return yScaleGroup;
-    }
-    _setYScaleOfGroup(groupItems, group) {
-        if (groupItems) {
-            if (group === ScaleGroup.Unknown) {
-                groupItems.forEach(item => item[Item.yScale] = UIService._getYScaleForItem(item, calculateYScale(item.Max)));
-            }
-            else {
-                const yScale = calculateYScale(UIService._getMaxValueOfGroup(groupItems));
-                groupItems.forEach(item => item[Item.yScale] = UIService._getYScaleForItem(item, yScale));
-            }
-        }
-    }
-    _getItemByKey(key, port) {
-        const loadHistoryInfo = this._getLoadHistoryInfo(port);
-        for (const itemKey of Object.keys(loadHistoryInfo)) {
-            if (key in loadHistoryInfo[itemKey]) {
-                return loadHistoryInfo[itemKey][key];
-            }
-        }
-    }
-    /**
-     * reset the load history info object, to prevent memory leak
-     */
-    clearLoadHistoryInfos() {
-        this._loadHistoryInfos = {};
-    }
-    /**
-     * get all the data for the selection table
-     */
-    getSelectionTableRows(headerKeys, port, defaultDisplayItems) {
-        const rows = [];
-        const loadHistoryInfo = this._getLoadHistoryInfo(port);
-        const defaultItems = defaultDisplayItems && defaultDisplayItems.length > 0 ? defaultDisplayItems : this._DEFAULT_DISPLAY_ITEMS;
-        Object.keys(loadHistoryInfo).forEach(keyParent => {
-            rows.push({ KPI: keyParent, header: true });
-            const len = rows.length;
-            rows.push(...Object.keys(loadHistoryInfo[keyParent])
-                .filter(keyChild => headerKeys.includes(keyChild))
-                .map(keyChild => {
-                loadHistoryInfo[keyParent][keyChild].header = false;
-                loadHistoryInfo[keyParent][keyChild].checked = defaultItems.includes(keyChild);
-                return loadHistoryInfo[keyParent][keyChild];
-            }));
-            if (len === rows.length) {
-                // no sub items, remove the header
-                rows.pop();
-            }
-        });
-        return rows;
-    }
-    /**
-     * get all hidden columns. Those hidden columns = input hidden columns + default hidden columns
-     * @param hideMeasureColumns the array contains the columns list that need to be hidden.
-     */
-    getHiddenColumns(hideMeasureColumns) {
-        // only measure columns can be hidden
-        const hideColumns = hideMeasureColumns ? hideMeasureColumns.filter(column => this._MEASURE_COLUMNS.includes(column)) : [];
-        return hideColumns ? this._HIDED_COLUMNS.concat(hideColumns) : this._HIDED_COLUMNS;
-    }
-    /**
-     * get header information and format it to {headKey: key, headText: text}
-     */
-    getHeader(keys, port) {
-        return keys.map(key => {
-            const item = this._getItemByKey(key, port);
-            if (item != null && 'KPI' in item) {
-                return ({ key: key, text: item.KPI });
-            }
-            else {
-                console.warn(`${key} is not configured.`);
-            }
-        }).filter(key => key != null);
-    }
-    /**
-     * Get the selected items, which need to be displayed on the chart.
-     * @param headerKeys array that contains the keys of header
-     * @param port the relative port
-     * @param defaultDisplayItems the items list that will be displayed by default.
-     */
-    getDisplayItems(headerKeys, port, defaultDisplayItems) {
-        const selectionTable = this.getSelectionTableRows(headerKeys, port, defaultDisplayItems);
-        return selectionTable.filter(row => row.checked).map(row => row.KPI);
-    }
-    /**
-     * Get the Y Scale by the keys and port
-     */
-    getYScale(keys, port) {
-        const yScales = [];
-        if (keys) {
-            keys.forEach(key => {
-                yScales.push(this._getItemByKey(key, port)[Item.yScale]);
-            });
-        }
-        return yScales;
-    }
-    /**
-     * Generate Y Scale for the port
-     */
-    generateYScale(port) {
-        const yScaleGroup = this._getYScaleGroupWithHistoryItems(port);
-        UIService._YScaleGroupList.forEach(group => {
-            const historyItems = yScaleGroup[group];
-            if (historyItems) {
-                this._setYScaleOfGroup(historyItems, group);
-            }
-        });
-    }
-    /**
-     * convert unit values (eg: byte to MB or GB) and generate the control data (sum, max, avg)
-     * @param data the nameserver history data
-     * @param header header list
-     * @param port selected port
-     */
-    convertUnitAndGenerateControlData(data, header, port) {
-        const promises = [];
-        if (data && header) {
-            data.forEach((row, index) => {
-                if (row) {
-                    // get detail history item key, like indexserverCpu
-                    const itemKey = header[index];
-                    const unit = this._getProcessingUnit(itemKey, port);
-                    promises.push(this._convertUnitAndGenerateRowControlData(row, itemKey, unit, port));
-                }
-            });
-        }
-        return Promise.all(promises);
-    }
-}
-UIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UIService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UIService, decorators: [{
-            type: Injectable
-        }] });
-
-// Using dynamic flag to fix the issue of ng-packagr #696: Lambda not supported
-// @dynamic
-class ChartService {
-    /**
-     * toggle the dataset status of the chart, synchronously
-     */
-    static _toggleDataSet(dataSetIndex, chart, hidden) {
-        // meta.hidden = false and dataset.hidden = false --> show
-        // meta.hidden = false and dataset.hidden = true --> show
-        // meta.hidden = null and dataset.hidden = false -> show
-        // meta.hidden = null and dataset.hidden = true -> hide
-        // in the first case (false, false), needs to click legend twice to
-        // hide the dataset, because the first click only set meta.hidden = null)
-        if (dataSetIndex != null && chart != null) {
-            const meta = chart.getDatasetMeta(dataSetIndex);
-            if (meta) {
-                if (!hidden) {
-                    // display the item, if dataset hidden is false, set hidden of meta to null,
-                    meta.hidden = !chart.data.datasets[dataSetIndex].hidden ? null : hidden;
-                }
-                else {
-                    meta.hidden = hidden;
-                }
-            }
-        }
-    }
-    static _restoreDataSetStatus(chart, datasetIndex, status) {
-        if (chart && chart.data && chart.data.datasets && chart.getDatasetMeta(datasetIndex) && status) {
-            chart.data.datasets[datasetIndex].hidden = status.datasetStatus;
-            chart.getDatasetMeta(datasetIndex).hidden = status.metaStatus;
-        }
-    }
-    /**
-     * initialize/clear the configuration for the chart
-     */
-    static _initConfig(chart) {
-        // init data sets
-        if (chart.data && chart.data.datasets) {
-            chart.data.datasets.length = 0;
-            chart.data.datasets = void 0;
-            chart.data = void 0;
-        }
-        // init options
-        if (chart.options && chart.options.scales && (chart.options.scales.xAxes || chart.options.scales.yAxis)) {
-            if (chart.options.scales.xAxes) {
-                chart.options.scales.xAxes.length = 0;
-                chart.options.scales.xAxes = void 0;
-            }
-            if (chart.options.scales.yAxes) {
-                chart.options.scales.yAxes.length = 0;
-                chart.options.scales.yAxes = void 0;
-            }
-            chart.options.scales = void 0;
-            chart.options = void 0;
-        }
-    }
-    /**
-     * Generate DataSets by the data and header information
-     */
-    static _generateDataSets(data, header, headerKey, defaultItems) {
-        const alpha = 0.5;
-        const colors = UIService.getColors(alpha);
-        return data.map((item, i) => {
-            const color = colors[headerKey[i]] ? getColorString(colors[headerKey[i]]) : randomColor(alpha);
-            return {
-                borderColor: color,
-                backgroundColor: color,
-                borderWidth: 1.25,
-                spanGaps: false,
-                label: header[i],
-                data: data[i],
-                fill: false,
-                yAxisID: `y-axis-${i}`,
-                hidden: !defaultItems.includes(header[i])
-            };
-        });
-    }
-    static _generateXAxes(time) {
-        const format = 'MMMDD HH:mm:ss';
-        return [
-            {
-                type: 'time',
-                time: {
-                    // unit: 'second',
-                    // stepSize: 1,
-                    displayFormats: {
-                        'millisecond': format,
-                        'second': format,
-                        'minute': format,
-                        'hour': 'MMMDD HH',
-                        'day': 'MMMDD YYYY',
-                        'week': format,
-                        'month': format,
-                        'quarter': format,
-                        'year': format,
-                    },
-                    tooltipFormat: 'll HH:mm:ss',
-                    min: time[0],
-                    max: time[time.length - 1]
-                },
-                // scaleLabel: {
-                //   display: false,
-                //   labelString: 'Date'
-                // },
-                ticks: {
-                    maxRotation: 0,
-                    reverse: true
-                }
-            }
-        ];
-    }
-    static _generateYAxes(data, yScale) {
-        return data.map((item, i) => ({
-            type: 'linear',
-            display: false,
-            position: 'left',
-            id: `y-axis-${i}`,
-            gridLines: {},
-            ticks: {
-                min: 0,
-                max: yScale[i]
-            }
-        }));
-    }
-    /**
-     * generate configuration for chart
-     */
-    static _generateChartConfig(time, data, yScale, header, headerKey, selection, tableSource, title, defaultItems, zoomCallback) {
-        return {
-            type: 'line',
-            data: {
-                datasets: ChartService._generateDataSets(data, header, headerKey, defaultItems)
-            },
-            options: {
-                elements: { point: { radius: 0, hitRadius: 5, hoverRadius: 5 } },
-                responsive: true,
-                animation: {
-                    duration: 0, // general animation time
-                },
-                hover: {
-                    animationDuration: 0,
-                    onHover: function (e) {
-                        const point = this.getElementAtEvent(e);
-                        if (point.length) {
-                            e.target.style.cursor = 'pointer';
-                        }
-                        else {
-                            e.target.style.cursor = 'default';
-                        }
-                    }
-                },
-                responsiveAnimationDuration: 0,
-                legend: {
-                    position: 'bottom',
-                    onHover: (e) => {
-                        e.target.style.cursor = 'pointer';
-                    },
-                    labels: {
-                        filter: (legendItem) => selection.isSelected(tableSource.find(row => legendItem.text === row.KPI))
-                    }
-                },
-                title: {
-                    display: true,
-                    text: title
-                },
-                responsiveDownsample: {
-                    enabled: true,
-                    desiredDataPointDistance: 2,
-                    minNumPoints: 200,
-                    maxNumPointsToDraw: 100
-                },
-                tooltips: {
-                    callbacks: {
-                        label: function (tooltipItem, chartData) {
-                            // format numbers with commas and add unit information
-                            const label = chartData.datasets[tooltipItem.datasetIndex].label || '';
-                            if (label) {
-                                // get unit (eg: MB, GB, MB/s, % and so on)
-                                const rowItem = tableSource.find(controlTableRow => label === controlTableRow.KPI) || '';
-                                const unit = rowItem[Item.unit] && rowItem[Item.unit] !== Unit.PCT ? ` ${rowItem[Item.unit]}` : rowItem[Item.unit] || '';
-                                return `${label}: ${getNumberWithCommas(tooltipItem.yLabel)}${unit}`;
-                            }
-                            else {
-                                return getNumberWithCommas(tooltipItem.yLabel);
-                            }
-                        }
-                    }
-                },
-                scales: {
-                    xAxes: ChartService._generateXAxes(time),
-                    yAxes: ChartService._generateYAxes(data, yScale)
-                },
-                zoom: {
-                    enabled: true,
-                    drag: true,
-                    mode: 'x',
-                    onZoom: zoomCallback
-                }
-            }
-        };
-    }
-    _getDataSetIndexByLabel(label, chart) {
-        if (chart.data && chart.data.datasets) {
-            return chart.data.datasets.findIndex(dataset => dataset.label === label);
-        }
-        return -1;
-    }
-    /**
-     * destroy the chart, release the resource of the chart
-     */
-    _destroyChart(chart) {
-        return new Promise((resolve) => {
-            if (chart) {
-                chart.destroy();
-            }
-            resolve();
-        });
-    }
-    /**
-     * update/refresh the chart
-     */
-    _updateChart(chart) {
-        return new Promise((resolve, reject) => {
-            if (chart) {
-                chart.update();
-                resolve();
-            }
-            else {
-                reject('Updating chart failed, error: the chart object is empty.');
-            }
-        });
-    }
-    /**
-     * reset zoom of the chart
-     */
-    _resetZoom(chart) {
-        return new Promise((resolve, reject) => {
-            if (chart) {
-                const datasetStatusBeforeReset = [];
-                if (chart.data && chart.data.datasets) {
-                    chart.data.datasets.forEach((dataset, index) => {
-                        const meta = chart.getDatasetMeta(index);
-                        if (meta) {
-                            datasetStatusBeforeReset[index] = { metaStatus: meta.hidden, datasetStatus: dataset.hidden };
-                        }
-                        else {
-                            reject(`Internal error, can not find the meta ${index}.`);
-                        }
-                    });
-                }
-                chart.resetZoom();
-                resolve(datasetStatusBeforeReset);
-            }
-            else {
-                reject('Resetting chart failed, error: the chart object is empty.');
-            }
-        });
-    }
-    /**
-     * Reset Chart to initial status
-     * If legend is already selected/unselected from the list, it wouldn't be restored.
-     * @param dataSourceData the data sets of the chart
-     * @param selection selection status list
-     */
-    resetChart(dataSourceData, selection) {
-        return this._resetZoom(this._chart).then((datasetStatusBeforeZoom) => {
-            // reset the data set by the selection status
-            dataSourceData.filter(row => !row.header).forEach(row => {
-                const index = this._getDataSetIndexByLabel(row.KPI, this._chart);
-                if (!selection.isSelected(row)) {
-                    ChartService._toggleDataSet(index, this._chart, true);
-                }
-                else {
-                    ChartService._restoreDataSetStatus(this._chart, index, datasetStatusBeforeZoom[index]);
-                }
-            });
-            return this._updateChart(this._chart);
-        });
-    }
-    /**
-     * destroy the chart and reinitialize the configuration of the chart
-     */
-    destroyChart() {
-        return this._destroyChart(this._chart).then(() => {
-            if (this._chart) {
-                ChartService._initConfig(this._chart);
-                this._chart = void 0;
-            }
-        });
-    }
-    /**
-     * generate configuration for chart and create the chart object.
-     */
-    buildChart(time, data, yScale, header, headerKey, selection, tableSource, title, defaultItems, zoomCB) {
-        return new Promise((resolve, reject) => {
-            var _a;
-            const ctx = (_a = document.getElementById('chartNameServerHistory')) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (ctx) {
-                const cfg = ChartService._generateChartConfig(time, data, yScale, header, headerKey, selection, tableSource, title, defaultItems, zoomCB);
-                this._chart = new Chart$2(ctx, cfg);
-                resolve();
-            }
-            else {
-                reject('Can not find the canvas.');
-            }
-        });
-    }
-    /**
-     * show/hide the relative data set
-     */
-    toggleDataInChart(label, hide) {
-        return new Promise((resolve) => {
-            ChartService._toggleDataSet(this._getDataSetIndexByLabel(label, this._chart), this._chart, hide);
-            resolve(this._updateChart(this._chart));
-        });
-    }
-}
-ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChartService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChartService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * prevent browser from crashing, set the max rows limitation.
- * This could be overwritten by the input:maxRowsLimitation of the component.
- */
-const _DEFAULT_MAX_ROWS_IN_MEMORY = 100000;
-class FileService {
-    /**
-     * prevent browser from crashing, set the max rows limitation.
-     * @param limitation if this parameter is not null, the default value will be overwritten by this one.
-     */
-    static _getMaxRowsLimitation(limitation = null) {
-        if (limitation == null || isNaN(limitation) || limitation.length === 0) {
-            return _DEFAULT_MAX_ROWS_IN_MEMORY;
-        }
-        return Number(limitation);
-    }
-    /**
-     * get all available ports from data
-     */
-    static _getPorts(data, firstChunk, ports) {
-        let line = 0;
-        if (firstChunk) {
-            // start from line 3
-            line = 2;
-        }
-        for (; line < data.length; line++) {
-            const dataItem = data[line][1];
-            if (dataItem != null && dataItem.length > 0) {
-                if (isValidPort(dataItem) && ports.indexOf(dataItem) === -1) {
-                    ports.push(dataItem);
-                }
-            }
-        }
-    }
-    /**
-     * get the time column from the analyzed data
-     * @param data the analyzed data
-     * @param firstChunk whether it's first chunk or not
-     * @param startTime selected starting time. It's millisecond, need to be converted second.
-     * @param endTime selected ending time. It's millisecond, need to be converted second.
-     * @param lastProcessedTime last processed time form last chunk
-     * @param time time object which contains the time data for all ports
-     * @param selectedPort if the selected port is empty (did not select any port), all ports info are needed
-     * @param isMDC flag for MDC system
-     * @param timezone selected timezone
-     * @param maxRowsLimitation prevent browser from crashing, set the max rows limitation.
-     * This comes from the input: maxRowsLimitation of the component.
-     */
-    static _getTimeColumn(data, firstChunk, startTime, endTime, lastProcessedTime, time, selectedPort, isMDC, timezone, maxRowsLimitation) {
-        // convert millisecond to second for startTime and endTime.
-        startTime = startTime / 1000;
-        endTime = endTime / 1000;
-        const timeColumn = 2;
-        let startLine = 0;
-        let iStart = -1;
-        let iEnd = -1;
-        let curTime = lastProcessedTime;
-        let lastProcessedTimeReturn;
-        let totalNum = 0;
-        let mdcFlag = isMDC;
-        const defaultPort = getDefaultPort();
-        const maxRowNum = this._getMaxRowsLimitation(maxRowsLimitation);
-        if (firstChunk) {
-            if (curTime >= startTime && curTime <= endTime) {
-                iStart = 1; // start from first line
-                /** Modified at 2018/10/10,
-                 * in some case, eg: the nameserver history trace gets modified by Kook, Jin Young's python script,
-                 * the port show in the first line as well, and does not like the non-mdc system, this kind of file has
-                 * one port in it. The history for non-mdc system doesn't have port info in the port column.*/
-                // get port for the line 1.
-                const firstLinePort = getPort(data[1][1]);
-                // init time array for the first line.
-                if (!selectedPort || selectedPort.length === 0 || isSamePort(firstLinePort, selectedPort, mdcFlag)) {
-                    // does not select any port or
-                    // it's non-mdc (mdcFlag is false at the beginning) system and the selected port is the first line port
-                    time[firstLinePort] = [];
-                    time[firstLinePort][0] = curTime * 1000;
-                }
-            }
-            lastProcessedTimeReturn = curTime;
-            startLine = 2;
-        }
-        // get current total number
-        Object.keys(time).forEach(key => {
-            if (time[key]) {
-                totalNum += time[key].length;
-            }
-        });
-        if (curTime == null) {
-            console.error('getTimeColumn', 'Can not get the time from the file, internal error!');
-            return { indexStart: null, indexEnd: null, lastProcessedTime: null, isMDC: null };
-        }
-        for (let i = startLine; i < data.length; i++) {
-            // sometime the last line is empty, need to be skipped.
-            if (data[i] == null || data[i].length === 0 || (data[i].length === 1 && data[i][0].length === 0)) {
-                continue;
-            }
-            // get port number and initialize the relative port array in time
-            const port = getPort(data[i][1]); // data[i][1] == null || data[i][1].length == 0 ? __DEFAULT_PORT : data[i][1];
-            if (!(port in time)) {
-                // add undefined port to time, then we can find all ports in time
-                time[port] = void 0;
-            }
-            if (time[port] == null && isSamePort(port, selectedPort, mdcFlag)) {
-                time[port] = [];
-                // if other ports exists in this file, default port will be set to undefined.
-                if (!mdcFlag && port !== defaultPort && time[defaultPort]) {
-                    // update the total num;
-                    totalNum -= time[defaultPort].length;
-                    time[defaultPort].length = 0;
-                    time[defaultPort] = void 0;
-                    mdcFlag = true;
-                }
-            }
-            curTime = calculateValue4Time(curTime, data[i][timeColumn], timezone);
-            if (curTime > endTime) {
-                if (iEnd < 0) {
-                    iEnd = i - 1;
-                }
-                break;
-            }
-            if (iStart >= 0) {
-                if (time[port]) {
-                    // not null means it's the selected port
-                    time[port][time[port].length] = curTime * 1000;
-                    totalNum++;
-                }
-            }
-            else {
-                if (curTime >= startTime && curTime <= endTime) {
-                    if (time[port]) {
-                        // only selected port counted in
-                        if (iStart < 0) {
-                            iStart = i;
-                        }
-                        time[port][time[port].length] = curTime * 1000;
-                        totalNum++;
-                    }
-                }
-            }
-            // last processed time need to be recorded anyway
-            lastProcessedTimeReturn = curTime;
-            if (totalNum >= maxRowNum) {
-                iEnd = i;
-                break;
-            }
-        }
-        return { indexStart: iStart, indexEnd: iEnd, lastProcessedTime: lastProcessedTimeReturn, isMDC: mdcFlag };
-    }
-    /**
-     * Get data for all columns
-     * @param columnNum the total number of columns. For mdc system,
-     *                  the length of each row is different. Host relative data does not exist in tenant line.
-     *                  Needs to use column number from the first line.
-     * @param data      data parsed by papa
-     * @param firstChunk the flag which identifies whether it's the first chunk or not.
-     * @param time
-     * @param indexStart
-     * @param indexEnd
-     * @param lastProcessedLine
-     * @param resultData   the result data after analyzed
-     * @param selectedPort
-     * @param isMDC
-     */
-    static _getDataColumns(columnNum, data, firstChunk, time, indexStart, indexEnd, lastProcessedLine, resultData, selectedPort, isMDC) {
-        let startLine = 0;
-        // for mdc system, the length is not correct (host relative data only exists in the "empty" port line).
-        // Needs to use header from the first line.
-        // const columnNum = data[0].length;
-        if (firstChunk) {
-            /**
-             * Modified at 2018/10/10,
-             * in some case, eg: the nameserver history trace gets modified by Kook, Jin Young's python script,
-             * the port show in the first line as well, and does not like the non-mdc system, this kind of file has
-             * one port in it. The history for non-mdc system doesn't have port info in the port column.
-             */
-            // get port for the line 1.
-            const firstLinePort = getPort(data[1][1]);
-            // Initialize data column with default 'DEFAULT' port if it's not MDC system. MDC system, 'DEFAULT' gets ignored
-            if (!isMDC && time[firstLinePort]) {
-                resultData[firstLinePort] = [];
-                // removed below logic, because first line is the real number, do not need to do the convert.
-                // curLine = data[1].slice(3).map(Number);
-                for (let j = 3; j < columnNum; j++) {
-                    const index = j - 3;
-                    // initialize data array for all columns of the default '0000' port
-                    resultData[firstLinePort][index] = [];
-                    // get the first line data of the column if it's included
-                    if (indexStart === 1) {
-                        resultData[firstLinePort][index][0] = { x: time[firstLinePort][0], y: lastProcessedLine[index] };
-                    }
-                }
-            }
-            startLine = 2;
-        }
-        for (let j = 3; j < columnNum; j++) {
-            const index = j - 3;
-            for (let i = startLine; i < data.length; i++) {
-                // sometime the last line is empty, need to be skipped.
-                if (data[i] == null || data[i].length === 0 || (data[i].length === 1 && data[i][0].length === 0)) {
-                    continue;
-                }
-                // get port number and initialize the relative port array in data
-                const port = getPort(data[i][1]);
-                if (resultData[port] == null && isSamePort(port, selectedPort, isMDC)) {
-                    resultData[port] = [];
-                }
-                if (resultData[port] && resultData[port][index] == null) {
-                    resultData[port][index] = [];
-                }
-                lastProcessedLine[index] = calculateValue(lastProcessedLine[index], data[i][j]);
-                if (i >= indexStart && (i <= indexEnd || indexEnd < 0) && indexStart >= 0) {
-                    if (resultData[port]) {
-                        const length = resultData[port][index].length;
-                        resultData[port][index][length] = { x: time[port][length], y: lastProcessedLine[index] };
-                    }
-                }
-                else if (indexEnd > 0 && i > indexEnd) {
-                    break;
-                }
-            }
-        }
-    }
-    /**
-     * Get Chart data from provided file.
-     * @param file the nameserver history file
-     * @param startTime
-     * @param endTime
-     * @param port
-     * @param timezone
-     * @param maxRowsLimitation prevent browser from crashing, set the max rows limitation.
-     * @param progress call back function for updating progress
-     */
-    getChartContentFromFile(file, startTime, endTime, port, timezone, maxRowsLimitation, progress) {
-        // load done, beginning parsing
-        const beginTime = new Date();
-        let firstChunk = true;
-        // save last processed data just for the later calculation
-        let lastProcessedData;
-        // save last processed time just for the later calculation
-        let lastProcessedTime;
-        // save last processed cursor position for progress calculation.
-        // let lastProcessedCursor = 0;
-        let indexStart = -1, indexEnd = -1;
-        const time = {};
-        const data = {};
-        let header;
-        let host;
-        let isMDC = false;
-        let columnNum;
-        let abortType;
-        const rejectAndAbort = (reject, parser) => {
-            if (progress) {
-                progress(100);
-            }
-            reject(`${file.name} is empty or the format is not correct.`);
-            parser.abort();
-        };
-        return new Promise((resolve, reject) => {
-            parse(file, {
-                chunk: (results, parser) => {
-                    // the progress increment of this step
-                    // let analyzeStepProgress = (results.meta.cursor - lastProcessedCursor) / file.size * 100;
-                    printProcessedTime(beginTime, 'step1');
-                    if (indexEnd >= 0) {
-                        // already finished, quite.
-                        return;
-                    }
-                    else {
-                        // reset start point
-                        indexStart = -1;
-                    }
-                    // get time column
-                    if (firstChunk) {
-                        if (!validateData(results.data)) {
-                            return rejectAndAbort(reject, parser);
-                        }
-                        // initialize the header
-                        header = results.data[0].slice(3);
-                        // get column number
-                        columnNum = results.data[0].length;
-                        // get host name
-                        host = results.data[1][0];
-                        // get the first line time info from first line, it is a real number, do not need to do the convert with ">,<".
-                        lastProcessedTime = getTimeFromTimeZone(parseFloat(results.data[1][2]), timezone);
-                        // get the first line data info from first line, it is a real number, do not need to do the convert with ">,<".
-                        lastProcessedData = results.data[1].slice(3).map(Number);
-                    }
-                    printProcessedTime(beginTime, 'step2');
-                    if (!lastProcessedData) {
-                        return rejectAndAbort(reject, parser);
-                    }
-                    // get time column
-                    ({ indexStart, indexEnd, lastProcessedTime, isMDC } = FileService._getTimeColumn(results.data, firstChunk, startTime, endTime, lastProcessedTime, time, port, isMDC, timezone, maxRowsLimitation));
-                    printProcessedTime(beginTime, 'step3');
-                    if (indexStart == null && indexEnd == null && lastProcessedTime == null && isMDC == null) {
-                        return rejectAndAbort(reject, parser);
-                    }
-                    // get all other data columns
-                    FileService._getDataColumns(columnNum, results.data, firstChunk, time, indexStart, indexEnd, lastProcessedData, data, port, isMDC);
-                    if (firstChunk) {
-                        firstChunk = false;
-                    }
-                    printProcessedTime(beginTime, 'step4');
-                    if (indexEnd >= 0) {
-                        // do not need to process the left parts, manually trigger complete
-                        const processedLines = Object.keys(time).reduce((total, curKey) => time[curKey] ? total + time[curKey].length : total, 0);
-                        if (processedLines >= FileService._getMaxRowsLimitation(maxRowsLimitation)) {
-                            abortType = Abort.maxLineNumReached;
-                        }
-                        else {
-                            abortType = Abort.maxTimeRangeReached;
-                        }
-                        if (progress) {
-                            progress(100);
-                        }
-                        parser.abort();
-                        return;
-                    }
-                    else {
-                        // the overall progress if this step is finished
-                        if (progress) {
-                            progress(Math.round(results.meta.cursor / file.size * 100));
-                        }
-                        // lastProcessedCursor = results.meta.cursor;
-                    }
-                },
-                complete: () => {
-                    printProcessedTime(beginTime, 'step_complete');
-                    resolve({ header: header, host: host, time: time, data: data, aborted: abortType });
-                }
-            });
-        });
-    }
-    /**
-     * Get all ports from the name server history file
-     * @param file the name server history file
-     * @param progress call back for updating the progress
-     */
-    getPortsFromFile(file, progress) {
-        const beginTime = new Date();
-        let firstChunk = true;
-        const ports = [];
-        const defaultPort = getDefaultPort();
-        return new Promise((resolve, reject) => {
-            parse(file, {
-                chunk: (results, parser) => {
-                    // get time column
-                    if (firstChunk) {
-                        if (!validateData(results.data)) {
-                            if (progress) {
-                                progress(100);
-                            }
-                            reject(`${file.name} is empty or the format is not correct.`);
-                            parser.abort();
-                            return;
-                        }
-                    }
-                    printProcessedTime(beginTime, 'port.step1');
-                    FileService._getPorts(results.data, firstChunk, ports);
-                    if (firstChunk) {
-                        firstChunk = false;
-                    }
-                    if (progress) {
-                        progress(Math.round(results.meta.cursor / file.size * 100));
-                    }
-                },
-                complete: () => {
-                    // parsing done
-                    printProcessedTime(beginTime, 'step_complete');
-                    if (ports.length === 0) {
-                        ports[0] = defaultPort;
-                    }
-                    resolve(ports);
-                }
-            });
-        });
-    }
-}
-FileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * This plugin is adapted from: https://github.com/3dcl/chartjs-plugin-responsive-downsample
- * for controlling the radius of point.
- *
- * MIT License
- * Copyright (c) 2018 3D Content Logistics
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-/**
- * Check if a value is null or undefined
- */
-function isNil(value) {
-    return (typeof value === 'undefined') || value === null;
-}
-/**
- * Clamp a number to a range
- * @param value
- * @param min
- * @param max
- */
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-/**
- * Recursively assign default values to an object if object is missing the keys.
- * @param object The destination object to assign default values to
- * @param defaults The default values for the object
- * @return The destination object
- */
-function defaultsDeep(object, defaults) {
-    for (const key in defaults) {
-        if (defaults.hasOwnProperty(key)) {
-            const value = object[key];
-            if (typeof value === 'undefined') {
-                object[key] = defaults[key];
-            }
-            else if (value !== null && typeof value === 'object') {
-                object[key] = defaultsDeep(value, defaults[key]);
-            }
-        }
-    }
-    return object;
-}
-/**
- * Finds the first element in an array for that the comaperator functions returns true
- *
- * @export
- * @param array An array
- * @param compareFunction Comperator function returning true for the element seeked
- * @returns The found element or undefined
- */
-function findInArray(array, compareFunction) {
-    if (isNil(array)) {
-        return undefined;
-    }
-    for (let i = 0; i < array.length; i++) {
-        if (compareFunction(array[i]) === true) {
-            return array[i];
-        }
-    }
-    return undefined;
-}
-/**
- * Finds the first index in an array for that the comaperator function for an element returns true
- *
- * @export
- * @param array An array of elements
- * @param compareFunction Comperator function returning true for the element seeked
- * @returns Index of the matched element or -1 if no element was found
- */
-function findIndexInArray(array, compareFunction) {
-    if (isNil(array)) {
-        return undefined;
-    }
-    for (let i = 0; i < array.length; i++) {
-        if (compareFunction(array[i]) === true) {
-            return i;
-        }
-    }
-    return -1;
-}
-/**
- * If points number is less than minNumPoints, show radius for all points.
- */
-function changePointRadius(chart, options) {
-    if (chart && chart.data && chart.data.datasets && options) {
-        let pointRadiusChangeFlag = false;
-        const maxNumPointsToDraw = options.maxNumPointsToDraw == null ? 100 : options.maxNumPointsToDraw;
-        for (const dataset of chart.data.datasets) {
-            if (dataset.data.length < maxNumPointsToDraw) {
-                pointRadiusChangeFlag = true;
-                break;
-            }
-        }
-        chart.options.elements.point.radius = pointRadiusChangeFlag ? 2 : 0;
-    }
-}
-
-/**
- * A mipmap data structure for line chart data. Uses averages to downsample data.
- */
-class DataMipmap {
-    /**
-     * Create a data mipmap
-     * @param data The orignal line chart data
-     * @param minNumPoints Minimal number of points on lowest mipmap level(limits number of levels)
-     */
-    constructor(data, minNumPoints = 2) {
-        this.minNumPoints = minNumPoints;
-        this.setData(data);
-    }
-    /**
-     * Set the line chart data and update mipmap level.
-     * @param data The orignal line chart data
-     */
-    setData(data) {
-        this.originalData = data || [];
-        this.mipMaps = [];
-        this.resolution = this.computeResolution(this.originalData);
-        this.createMipMap();
-    }
-    /**
-     * Set the minimal number of points
-     * @param minNumPoints Minimal number of points on lowest mipmap level(limits number of levels)
-     */
-    setMinNumPoints(minNumPoints) {
-        this.minNumPoints = minNumPoints;
-        this.mipMaps = [];
-        this.createMipMap();
-    }
-    /**
-     * Get the best fitting mipmap level for a certain scale resolution
-     * @param resolution Desired resolution in ms per pixel
-     */
-    getMipMapForResolution(resolution) {
-        return this.getMipMapLevel(this.getMipMapIndexForResolution(resolution));
-    }
-    /**
-     * Computes the index of the best fitting mipmap level for a certain scale resolution
-     * @param resolution Desired resolution in ms per pixel
-     */
-    getMipMapIndexForResolution(resolution) {
-        if (isNil(resolution)) {
-            return 0;
-        }
-        const factor = resolution / this.resolution;
-        return clamp(Math.floor(Math.log(factor) / Math.log(2.0)), 0, this.mipMaps.length - 1);
-    }
-    /**
-     * Get a mipmap level by index
-     * @param level The index of the mipmap level
-     */
-    getMipMapLevel(level) {
-        return this.mipMaps[level];
-    }
-    /**
-     * Get all mipmap level
-     */
-    getMipMaps() {
-        return this.mipMaps;
-    }
-    /**
-     * Get the number of available mipmap level
-     */
-    getNumLevel() {
-        return this.mipMaps.length;
-    }
-    computeResolution(data) {
-        let minTimeDistance = Infinity;
-        for (let i = 0, end = this.originalData.length - 1; i < end; ++i) {
-            const current = this.originalData[i];
-            const next = this.originalData[i + 1];
-            minTimeDistance = Math.min(Math.abs(this.getTime(current) - this.getTime(next)), minTimeDistance);
-        }
-        return minTimeDistance;
-    }
-    createMipMap() {
-        let targetResolution = this.resolution;
-        let targetLength = this.originalData.length;
-        this.mipMaps.push(this.originalData);
-        let lastMipMap = this.originalData;
-        while (lastMipMap.length > this.minNumPoints) {
-            targetResolution = targetResolution * 2;
-            targetLength = Math.floor(targetLength * 0.5);
-            lastMipMap = this.downsampleToResolution(lastMipMap, targetResolution, targetLength);
-            this.mipMaps.push(lastMipMap);
-        }
-    }
-    downsampleToResolution(data, targetResolution, targetLength) {
-        const output = [];
-        let aggregationValues = [];
-        let firstPoint = data[0];
-        aggregationValues.push(firstPoint);
-        for (let i = 1, end = data.length; i < end; ++i) {
-            const currentPoint = data[i];
-            const timeDistance = Math.abs(this.getTime(firstPoint) - this.getTime(currentPoint));
-            if (timeDistance < targetResolution) {
-                aggregationValues.push(currentPoint);
-            }
-            else {
-                // create new sensor value in output
-                const newPoint = this.getAverage(aggregationValues);
-                output.push(newPoint);
-                // reset aggregation data structure
-                firstPoint = currentPoint;
-                aggregationValues = [currentPoint];
-            }
-        }
-        // insert last point
-        output.push(this.getAverage(aggregationValues));
-        return output;
-    }
-    getAverage(aggregationValues) {
-        const value = aggregationValues
-            .map(point => point.y)
-            .reduce((previous, current) => previous + current)
-            / aggregationValues.length;
-        return {
-            x: aggregationValues[0].x || aggregationValues[0].t,
-            y: value
-        };
-    }
-    getTime(point) {
-        const x = point.x || point.t;
-        if (typeof x === 'number') {
-            return x;
-        }
-        else if (typeof x === 'string') {
-            return new Date(x).getTime();
-        }
-        else {
-            return x.getTime();
-        }
-    }
-}
-
-/**
- * A mipmap data structure that uses Largest-Triangle-Three-Buckets algorithm to downsample data
- */
-class LTTBDataMipmap extends DataMipmap {
-    getMipMapIndexForResolution(resolution) {
-        if (isNil(resolution)) {
-            return 0;
-        }
-        let index = findIndexInArray(this.resolutions, (levelResolution) => levelResolution >= resolution);
-        if (index === -1) {
-            // use smallest mipmap as fallback
-            index = this.resolutions.length - 1;
-        }
-        return index;
-    }
-    createMipMap() {
-        super.createMipMap();
-        this.resolutions = this.mipMaps.map((level) => this.computeAverageResolution(level));
-    }
-    /**
-     * This method is adapted from: https://github.com/sveinn-steinarsson/flot-downsample
-     *
-     * The MIT License
-     * Copyright (c) 2013 by Sveinn Steinarsson
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-    downsampleToResolution(data, targetResolution, targetLength) {
-        const dataLength = data.length;
-        if (targetLength >= dataLength || targetLength === 0) {
-            return data; // data has target size
-        }
-        const output = [];
-        // bucket size, leave room for start and end data points
-        const bucksetSize = (dataLength - 2) / (targetLength - 2);
-        let a = 0; // initially a is the first point in the triangle
-        let maxAreaPoint;
-        let maxArea;
-        let area;
-        let nextA;
-        // always add the first point
-        output.push(data[a]);
-        for (let i = 0; i < targetLength - 2; ++i) {
-            // Calculate point average for next bucket (containing c)
-            let avgX = 0;
-            let avgY = 0;
-            let avgRangeStart = Math.floor((i + 1) * bucksetSize) + 1;
-            let avgRangeEnd = Math.floor((i + 2) * bucksetSize) + 1;
-            avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
-            const avgRangeLength = avgRangeEnd - avgRangeStart;
-            for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
-                avgX += this.getTime(data[avgRangeStart]);
-                avgY += data[avgRangeStart].y * 1;
-            }
-            avgX /= avgRangeLength;
-            avgY /= avgRangeLength;
-            // Get the range for this bucket
-            let rangeOffs = Math.floor((i + 0) * bucksetSize) + 1;
-            const rangeTo = Math.floor((i + 1) * bucksetSize) + 1;
-            // Point a
-            const pointA = data[a];
-            const pointAX = this.getTime(pointA);
-            const pointAY = pointA.y * 1;
-            maxArea = area = -1;
-            for (; rangeOffs < rangeTo; rangeOffs++) {
-                // Calculate triangle area over three buckets
-                area = Math.abs((pointAX - avgX) * (data[rangeOffs].y - pointAY) -
-                    (pointAX - this.getTime(data[rangeOffs])) * (avgY - pointAY)) * 0.5;
-                if (area > maxArea) {
-                    maxArea = area;
-                    maxAreaPoint = data[rangeOffs];
-                    nextA = rangeOffs; // Next a is this b
-                }
-            }
-            output.push(maxAreaPoint); // Pick this point from the bucket
-            a = nextA; // This a is the next a (chosen b)
-        }
-        output.push(data[dataLength - 1]); // Always add last
-        return output;
-    }
-    computeAverageResolution(data) {
-        let timeDistances = 0;
-        for (let i = 0, end = this.originalData.length - 1; i < end; ++i) {
-            const current = this.originalData[i];
-            const next = this.originalData[i + 1];
-            timeDistances += Math.abs(this.getTime(current) - this.getTime(next));
-        }
-        return timeDistances / (data.length - 1);
-    }
-}
-
-function getCompareValue(value) {
-    if (typeof value === 'number') {
-        return value;
-    }
-    else if (typeof value === 'string') {
-        return (new Date(value)).getTime();
-    }
-    else if (value instanceof Date) {
-        return value.getTime();
-    }
-    else {
-        return moment$1(value).toDate().getTime();
-    }
-}
-function rangeIsEqual(previousValue, currentValue) {
-    if (isNil(previousValue) ||
-        isNil(currentValue) ||
-        isNil(previousValue[0]) ||
-        isNil(previousValue[1]) ||
-        isNil(currentValue[0]) ||
-        isNil(currentValue[1])) {
-        return false;
-    }
-    previousValue = [getCompareValue(previousValue[0]), getCompareValue(previousValue[1])];
-    currentValue = [getCompareValue(currentValue[0]), getCompareValue(currentValue[1])];
-    return previousValue[0] === currentValue[0] && previousValue[1] === currentValue[1];
-}
-function getScaleRange(scale) {
-    if (isNil(scale)) {
-        return [null, null];
-    }
-    const start = scale.getValueForPixel(scale.left);
-    const end = scale.getValueForPixel(scale.right);
-    return [start, end];
-}
-function cullData(data, range) {
-    const startValue = getCompareValue(range[0]);
-    const endValue = getCompareValue(range[1]);
-    let startIndex = 0;
-    let endIndex = data.length;
-    for (let i = 1; i < data.length; ++i) {
-        const point = data[i];
-        const compareValue = getCompareValue(point.x || point.t);
-        if (compareValue <= startValue) {
-            startIndex = i;
-        }
-        if (compareValue >= endValue) {
-            endIndex = i + 1;
-            break;
-        }
-    }
-    return data.slice(startIndex, endIndex);
-}
-
-/**
- * This plugin is adapted from: https://github.com/3dcl/chartjs-plugin-responsive-downsample
- * for controlling the radius of point.
- *
- * MIT License
- * Copyright (c) 2018 3D Content Logistics
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// Using dynamic flag to fix the issue of ng-packagr #696: Lambda not supported
-// @dynamic
-/**
- * Chart js Plugin for downsampling data
- */
-class ResponsiveDownsamplePlugin {
-    static getPluginOptions(chart) {
-        const options = chart.options.responsiveDownsample || {};
-        defaultsDeep(options, {
-            enabled: false,
-            aggregationAlgorithm: 'LTTB',
-            desiredDataPointDistance: 1,
-            minNumPoints: 100,
-            maxNumPointsToDraw: 100,
-            cullData: true
-        });
-        if (options.enabled) {
-            chart.options.responsiveDownsample = options;
-        }
-        return options;
-    }
-    static hasDataChanged(chart) {
-        return !isNil(findInArray(chart.data.datasets, (dataset) => {
-            return isNil(dataset.mipMap);
-        }));
-    }
-    static createDataMipMap(chart, options) {
-        chart.data.datasets.forEach((dataset) => {
-            // @ts-ignore
-            const data = !isNil(dataset.originalData) ? dataset.originalData : dataset.data;
-            const mipMap = (options.aggregationAlgorithm === 'LTTB')
-                ? new LTTBDataMipmap(data, options.minNumPoints)
-                : new DataMipmap(data, options.minNumPoints);
-            dataset.originalData = data;
-            dataset.mipMap = mipMap;
-            // @ts-ignore
-            dataset.data = mipMap.getMipMapLevel(mipMap.getNumLevel() - 1); // set last level for first render pass
-        });
-    }
-    static restoreOriginalData(chart) {
-        let updated = false;
-        chart.data.datasets.forEach((dataset) => {
-            // @ts-ignore
-            if (!isNil(dataset.originalData) && dataset.data !== dataset.originalData) {
-                // @ts-ignore
-                dataset.data = dataset.originalData;
-                updated = true;
-            }
-        });
-        return updated;
-    }
-    static getTargetResolution(chart, options) {
-        const xScale = chart.scales['x-axis-0'];
-        if (isNil(xScale)) {
-            return null;
-        }
-        const start = moment$1(xScale.getValueForPixel(xScale.left));
-        const end = moment$1(xScale.getValueForPixel(xScale.left + 1));
-        const targetResolution = end.diff(start);
-        return targetResolution * options.desiredDataPointDistance;
-    }
-    static updateMipMap(chart, options, rangeChanged) {
-        let updated = false;
-        chart.data.datasets.forEach((dataset) => {
-            const mipMap = dataset.mipMap;
-            if (isNil(mipMap)) {
-                return;
-            }
-            const mipMalLevel = mipMap.getMipMapIndexForResolution(options.targetResolution);
-            if (mipMalLevel === dataset.currentMipMapLevel && !rangeChanged) {
-                // skip update if mip map level and data range did not change
-                return;
-            }
-            updated = true;
-            dataset.currentMipMapLevel = mipMalLevel;
-            let newData = mipMap.getMipMapLevel(mipMalLevel);
-            if (options.cullData) {
-                newData = cullData(newData, options.scaleRange);
-            }
-            // @ts-ignore
-            dataset.data = newData;
-        });
-        return updated;
-    }
-    beforeInit(chart) {
-        const options = ResponsiveDownsamplePlugin.getPluginOptions(chart);
-        if (!options.enabled) {
-            return;
-        }
-        ResponsiveDownsamplePlugin.createDataMipMap(chart, options);
-        options.needsUpdate = true;
-    }
-    beforeDatasetsUpdate(chart) {
-        const options = ResponsiveDownsamplePlugin.getPluginOptions(chart);
-        if (!options.enabled) {
-            // restore original data and remove state from options
-            options.needsUpdate = ResponsiveDownsamplePlugin.restoreOriginalData(chart);
-            delete options.targetResolution;
-            delete options.scaleRange;
-            return;
-        }
-        // only update mip map if data set was reloaded externally
-        if (ResponsiveDownsamplePlugin.hasDataChanged(chart)) {
-            ResponsiveDownsamplePlugin.createDataMipMap(chart, options);
-            options.needsUpdate = true;
-        }
-    }
-    beforeRender(chart) {
-        const options = ResponsiveDownsamplePlugin.getPluginOptions(chart);
-        if (!options.enabled) {
-            // update chart if data was restored from original data
-            if (options.needsUpdate) {
-                options.needsUpdate = false;
-                chart.update(0);
-                return false;
-            }
-            return;
-        }
-        const targetResolution = ResponsiveDownsamplePlugin.getTargetResolution(chart, options);
-        const xScale = chart.scales['x-axis-0'];
-        const scaleRange = getScaleRange(xScale);
-        const rangeChanged = !rangeIsEqual(options.scaleRange, scaleRange);
-        if (options.needsUpdate ||
-            options.targetResolution !== targetResolution ||
-            rangeChanged) {
-            options.targetResolution = targetResolution;
-            options.scaleRange = scaleRange;
-            options.needsUpdate = false;
-            if (ResponsiveDownsamplePlugin.updateMipMap(chart, options, rangeChanged)) {
-                changePointRadius(chart, options);
-                // update chart and cancel current render
-                chart.update(0);
-                return false;
-            }
-        }
-    }
-}
-
-/**
- * This plugin is adapted from: https://github.com/3dcl/chartjs-plugin-responsive-downsample
- * for controlling the radius of point.
- *
- * MIT License
- * Copyright (c) 2018 3D Content Logistics
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-const Chart$1 = window && window.Chart ? window.Chart : chartjs.Chart;
-// comment this because this plugin is only used internally, merge ChartOptions interface is unnecessary
-// and causes build error: "error TS2665: Invalid module name in augmentation.".
-// // Extend chart.js options interface
-// declare module 'chart.js' {
-//     interface ChartOptions {
-//         /**
-//          * Options for responsive downsample plugin
-//          */
-//         responsiveDownsample?: ResponsiveDownsamplePluginOptions;
-//     }
-// }
-Chart$1.pluginService.register(new ResponsiveDownsamplePlugin());
-
-/**
- * this plugin is adapted from: https://github.com/chartjs/chartjs-plugin-zoom
- * for following two open issues:
- * https://github.com/chartjs/chartjs-plugin-zoom/pull/155
- * https://github.com/chartjs/chartjs-plugin-zoom/pull/150
- *
- * The MIT License (MIT) Copyright (c) 2013-2016 Nick Downie
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this
- * software and associated documentation files (the "Software"), to deal in the Software
- * without restriction, including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
- * to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or
- * substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
- * BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE
- * AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
- * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
- * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-const Hammer = window && window.Hammer ? window.Hammer : hammerjs.Hammer;
-const Chart = window && window.Chart ? window.Chart : chartjs.Chart;
-const helpers = Chart.helpers;
-// Take the zoom namespace of Chart
-const zoomNS = Chart.Zoom = Chart.Zoom || {};
-// Where we store functions to handle different scale types
-const zoomFunctions = zoomNS.zoomFunctions = zoomNS.zoomFunctions || {};
-const panFunctions = zoomNS.panFunctions = zoomNS.panFunctions || {};
-// Default options if none are provided
-const defaultOptions = zoomNS.defaults = {
-    pan: {
-        enabled: true,
-        mode: 'xy',
-        speed: 20,
-        threshold: 10
-    },
-    zoom: {
-        enabled: true,
-        mode: 'xy',
-        sensitivity: 3
-    }
-};
-function directionEnabled(mode, dir) {
-    if (mode === undefined) {
-        return true;
-    }
-    else if (typeof mode === 'string') {
-        return mode.indexOf(dir) !== -1;
-    }
-    return false;
-}
-function rangeMaxLimiter(zoomPanOptions, newMax) {
-    if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&
-        !helpers.isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
-        const rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];
-        if (newMax > rangeMax) {
-            newMax = rangeMax;
-        }
-    }
-    return newMax;
-}
-function rangeMinLimiter(zoomPanOptions, newMin) {
-    if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMin &&
-        !helpers.isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {
-        const rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];
-        if (newMin < rangeMin) {
-            newMin = rangeMin;
-        }
-    }
-    return newMin;
-}
-function zoomIndexScale(scale, zoom, center, zoomOptions) {
-    const labels = scale.chart.data.labels;
-    let minIndex = scale.minIndex;
-    const lastLabelIndex = labels.length - 1;
-    let maxIndex = scale.maxIndex;
-    const sensitivity = zoomOptions.sensitivity;
-    const chartCenter = scale.isHorizontal() ? scale.left + (scale.width / 2) : scale.top + (scale.height / 2);
-    const centerPointer = scale.isHorizontal() ? center.x : center.y;
-    zoomNS.zoomCumulativeDelta = zoom > 1 ? zoomNS.zoomCumulativeDelta + 1 : zoomNS.zoomCumulativeDelta - 1;
-    if (Math.abs(zoomNS.zoomCumulativeDelta) > sensitivity) {
-        if (zoomNS.zoomCumulativeDelta < 0) {
-            if (centerPointer >= chartCenter) {
-                if (minIndex <= 0) {
-                    maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
-                }
-                else {
-                    minIndex = Math.max(0, minIndex - 1);
-                }
-            }
-            else if (centerPointer < chartCenter) {
-                if (maxIndex >= lastLabelIndex) {
-                    minIndex = Math.max(0, minIndex - 1);
-                }
-                else {
-                    maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
-                }
-            }
-            zoomNS.zoomCumulativeDelta = 0;
-        }
-        else if (zoomNS.zoomCumulativeDelta > 0) {
-            if (centerPointer >= chartCenter) {
-                minIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + 1) : minIndex;
-            }
-            else if (centerPointer < chartCenter) {
-                maxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - 1) : maxIndex;
-            }
-            zoomNS.zoomCumulativeDelta = 0;
-        }
-        scale.options.ticks.min = rangeMinLimiter(zoomOptions, labels[minIndex]);
-        scale.options.ticks.max = rangeMaxLimiter(zoomOptions, labels[maxIndex]);
-    }
-}
-function zoomTimeScale(scale, zoom, center, zoomOptions) {
-    const options = scale.options;
-    // var range;
-    // var min_percent;
-    // if (scale.isHorizontal()) {
-    //   range = scale.right - scale.left;
-    //   min_percent = (center.x - scale.left) / range;
-    // } else {
-    //   range = scale.bottom - scale.top;
-    //   min_percent = (center.y - scale.top) / range;
-    // }
-    //
-    // var max_percent = 1 - min_percent;
-    const range = scale.max - scale.min;
-    const newDiff = range * (zoom - 1);
-    const cursorPixel = scale.isHorizontal() ? center.x : center.y;
-    const min_percent = (scale.getValueForPixel(cursorPixel) - scale.min) / range;
-    const max_percent = 1 - min_percent;
-    const minDelta = newDiff * min_percent;
-    const maxDelta = newDiff * max_percent;
-    const newMin = scale.min + minDelta;
-    const newMax = scale.max - maxDelta;
-    const diffMinMax = newMax - newMin;
-    const minLimitExceeded = rangeMinLimiter(zoomOptions, diffMinMax) !== diffMinMax;
-    const maxLimitExceeded = rangeMaxLimiter(zoomOptions, diffMinMax) !== diffMinMax;
-    if (!minLimitExceeded && !maxLimitExceeded) {
-        options.time.min = newMin;
-        options.time.max = newMax;
-    }
-}
-function zoomNumericalScale(scale, zoom, center, zoomOptions) {
-    const range = scale.max - scale.min;
-    const newDiff = range * (zoom - 1);
-    const cursorPixel = scale.isHorizontal() ? center.x : center.y;
-    const min_percent = (scale.getValueForPixel(cursorPixel) - scale.min) / range;
-    const max_percent = 1 - min_percent;
-    const minDelta = newDiff * min_percent;
-    const maxDelta = newDiff * max_percent;
-    scale.options.ticks.min = rangeMinLimiter(zoomOptions, scale.min + minDelta);
-    scale.options.ticks.max = rangeMaxLimiter(zoomOptions, scale.max - maxDelta);
-}
-function zoomScale(scale, zoom, center, zoomOptions) {
-    const fn = zoomFunctions[scale.options.type];
-    if (fn) {
-        fn(scale, zoom, center, zoomOptions);
-    }
-}
-function doZoom(chartInstance, zoom, center, whichAxes) {
-    const ca = chartInstance.chartArea;
-    if (!center) {
-        center = {
-            x: (ca.left + ca.right) / 2,
-            y: (ca.top + ca.bottom) / 2,
-        };
-    }
-    const zoomOptions = chartInstance.options.zoom;
-    if (zoomOptions && helpers.getValueOrDefault(zoomOptions.enabled, defaultOptions.zoom.enabled)) {
-        // Do the zoom here
-        const zoomMode = helpers.getValueOrDefault(chartInstance.options.zoom.mode, defaultOptions.zoom.mode);
-        zoomOptions.sensitivity = helpers.getValueOrDefault(chartInstance.options.zoom.sensitivity, defaultOptions.zoom.sensitivity);
-        // Which axe should be modified when figers were used.
-        let _whichAxes;
-        if (zoomMode === 'xy' && whichAxes !== undefined) {
-            // based on fingers positions
-            _whichAxes = whichAxes;
-        }
-        else {
-            // no effect
-            _whichAxes = 'xy';
-        }
-        helpers.each(chartInstance.scales, function (scale, id) {
-            if (scale.isHorizontal() && directionEnabled(zoomMode, 'x') && directionEnabled(_whichAxes, 'x')) {
-                zoomOptions.scaleAxes = 'x';
-                zoomScale(scale, zoom, center, zoomOptions);
-            }
-            else if (!scale.isHorizontal() && directionEnabled(zoomMode, 'y') && directionEnabled(_whichAxes, 'y')) {
-                // Do Y zoom
-                zoomOptions.scaleAxes = 'y';
-                zoomScale(scale, zoom, center, zoomOptions);
-            }
-        });
-        chartInstance.update(0);
-        if (typeof zoomOptions.onZoom === 'function') {
-            zoomOptions.onZoom();
-        }
-    }
-}
-function panIndexScale(scale, delta, panOptions) {
-    const labels = scale.chart.data.labels;
-    const lastLabelIndex = labels.length - 1;
-    const offsetAmt = Math.max((scale.ticks.length - ((scale.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
-    const panSpeed = panOptions.speed;
-    let minIndex = scale.minIndex;
-    const step = Math.round(scale.width / (offsetAmt * panSpeed));
-    let maxIndex;
-    zoomNS.panCumulativeDelta += delta;
-    minIndex = zoomNS.panCumulativeDelta > step ? Math.max(0, minIndex - 1) : zoomNS.panCumulativeDelta < -step ? Math.min(lastLabelIndex - offsetAmt + 1, minIndex + 1) : minIndex;
-    zoomNS.panCumulativeDelta = minIndex !== scale.minIndex ? 0 : zoomNS.panCumulativeDelta;
-    maxIndex = Math.min(lastLabelIndex, minIndex + offsetAmt - 1);
-    scale.options.ticks.min = rangeMinLimiter(panOptions, labels[minIndex]);
-    scale.options.ticks.max = rangeMaxLimiter(panOptions, labels[maxIndex]);
-}
-function panTimeScale(scale, delta, panOptions) {
-    const options = scale.options;
-    const limitedMax = rangeMaxLimiter(panOptions, scale.getValueForPixel(scale.getPixelForValue(scale.max) - delta));
-    const limitedMin = rangeMinLimiter(panOptions, scale.getValueForPixel(scale.getPixelForValue(scale.min) - delta));
-    const limitedTimeDelta = delta < 0 ? limitedMax - scale.max : limitedMin - scale.min;
-    options.time.max = scale.max + limitedTimeDelta;
-    options.time.min = scale.min + limitedTimeDelta;
-}
-function panNumericalScale(scale, delta, panOptions) {
-    const tickOpts = scale.options.ticks;
-    const start = scale.start, end = scale.end;
-    if (tickOpts.reverse) {
-        tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
-        tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
-    }
-    else {
-        tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
-        tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
-    }
-    tickOpts.min = rangeMinLimiter(panOptions, tickOpts.min);
-    tickOpts.max = rangeMaxLimiter(panOptions, tickOpts.max);
-}
-function panScale(scale, delta, panOptions) {
-    const fn = panFunctions[scale.options.type];
-    if (fn) {
-        fn(scale, delta, panOptions);
-    }
-}
-function doPan(chartInstance, deltaX, deltaY) {
-    const panOptions = chartInstance.options.pan;
-    if (panOptions && helpers.getValueOrDefault(panOptions.enabled, defaultOptions.pan.enabled)) {
-        const panMode = helpers.getValueOrDefault(chartInstance.options.pan.mode, defaultOptions.pan.mode);
-        panOptions.speed = helpers.getValueOrDefault(chartInstance.options.pan.speed, defaultOptions.pan.speed);
-        helpers.each(chartInstance.scales, function (scale, id) {
-            if (scale.isHorizontal() && directionEnabled(panMode, 'x') && deltaX !== 0) {
-                panOptions.scaleAxes = 'x';
-                panScale(scale, deltaX, panOptions);
-            }
-            else if (!scale.isHorizontal() && directionEnabled(panMode, 'y') && deltaY !== 0) {
-                panOptions.scaleAxes = 'y';
-                panScale(scale, deltaY, panOptions);
-            }
-        });
-        chartInstance.update(0);
-        if (typeof panOptions.onPan === 'function') {
-            panOptions.onPan();
-        }
-    }
-}
-function positionInChartArea(chartInstance, position) {
-    return (position.x >= chartInstance.chartArea.left && position.x <= chartInstance.chartArea.right) &&
-        (position.y >= chartInstance.chartArea.top && position.y <= chartInstance.chartArea.bottom);
-}
-function getYAxis(chartInstance) {
-    const scales = chartInstance.scales;
-    for (const scaleId in scales) {
-        if (scales.hasOwnProperty(scaleId)) {
-            const scale = scales[scaleId];
-            if (!scale.isHorizontal()) {
-                return scale;
-            }
-        }
-    }
-}
-// Store these for later
-zoomNS.zoomFunctions.category = zoomIndexScale;
-zoomNS.zoomFunctions.time = zoomTimeScale;
-zoomNS.zoomFunctions.linear = zoomNumericalScale;
-zoomNS.zoomFunctions.logarithmic = zoomNumericalScale;
-zoomNS.panFunctions.category = panIndexScale;
-zoomNS.panFunctions.time = panTimeScale;
-zoomNS.panFunctions.linear = panNumericalScale;
-zoomNS.panFunctions.logarithmic = panNumericalScale;
-// Globals for catergory pan and zoom
-zoomNS.panCumulativeDelta = 0;
-zoomNS.zoomCumulativeDelta = 0;
-// Chartjs Zoom Plugin
-const zoomPlugin = {
-    afterInit: function (chartInstance) {
-        helpers.each(chartInstance.scales, function (scale) {
-            scale.originalOptions = helpers.clone(scale.options);
-        });
-        chartInstance.resetZoom = function () {
-            helpers.each(chartInstance.scales, function (scale, id) {
-                const timeOptions = scale.options.time;
-                const tickOptions = scale.options.ticks;
-                if (timeOptions) {
-                    timeOptions.min = scale.originalOptions.time.min;
-                    timeOptions.max = scale.originalOptions.time.max;
-                }
-                if (tickOptions) {
-                    tickOptions.min = scale.originalOptions.ticks.min;
-                    tickOptions.max = scale.originalOptions.ticks.max;
-                }
-            });
-            helpers.each(chartInstance.data.datasets, function (dataset, id) {
-                dataset._meta = null;
-            });
-            chartInstance.update();
-        };
-    },
-    beforeInit: function (chartInstance) {
-        chartInstance.zoom = {};
-        const node = chartInstance.zoom.node = chartInstance.chart.ctx.canvas;
-        const options = chartInstance.options;
-        const panThreshold = helpers.getValueOrDefault(options.pan ? options.pan.threshold : undefined, zoomNS.defaults.pan.threshold);
-        if (!options.zoom || !options.zoom.enabled) {
-            return;
-        }
-        if (options.zoom.drag) {
-            // Only want to zoom horizontal axis
-            options.zoom.mode = 'x';
-            chartInstance.zoom._mouseDownHandler = function (event) {
-                chartInstance.zoom._dragZoomStart = event;
-            };
-            node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
-            chartInstance.zoom._mouseMoveHandler = function (event) {
-                if (chartInstance.zoom._dragZoomStart) {
-                    chartInstance.zoom._dragZoomEnd = event;
-                    chartInstance.update(0);
-                }
-            };
-            node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
-            chartInstance.zoom._mouseUpHandler = function (event) {
-                if (chartInstance.zoom._dragZoomStart) {
-                    const chartArea = chartInstance.chartArea;
-                    const yAxis = getYAxis(chartInstance);
-                    const beginPoint = chartInstance.zoom._dragZoomStart;
-                    const offsetX = beginPoint.target.getBoundingClientRect().left;
-                    const startX = Math.max(Math.min(beginPoint.clientX, event.clientX) - offsetX, chartArea.left);
-                    const endX = Math.min(Math.max(beginPoint.clientX, event.clientX) - offsetX, chartArea.right);
-                    const dragDistance = endX - startX;
-                    const chartDistance = chartArea.right - chartArea.left;
-                    const zoom = 1 + (chartDistance - dragDistance) / chartDistance;
-                    const centerX = chartArea.left + (startX - chartArea.left) / (zoom - 1);
-                    // Remove drag start and end before chart update to stop drawing selected area
-                    chartInstance.zoom._dragZoomStart = null;
-                    chartInstance.zoom._dragZoomEnd = null;
-                    if (dragDistance > 0) {
-                        doZoom(chartInstance, zoom, {
-                            x: centerX,
-                            y: (yAxis.bottom - yAxis.top) / 2,
-                        });
-                    }
-                }
-            };
-            // node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
-            node.ownerDocument.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
-        }
-        else {
-            chartInstance.zoom._wheelHandler = function (event) {
-                const rect = event.target.getBoundingClientRect();
-                const offsetX = event.clientX - rect.left;
-                const offsetY = event.clientY - rect.top;
-                const center = {
-                    x: offsetX,
-                    y: offsetY
-                };
-                if (event.deltaY < 0) {
-                    doZoom(chartInstance, 1.1, center);
-                }
-                else {
-                    doZoom(chartInstance, 0.909, center);
-                }
-                // Prevent the event from triggering the default behavior (eg. Content scrolling).
-                event.preventDefault();
-            };
-            node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
-        }
-        if (Hammer) {
-            const mc = new Hammer.Manager(node);
-            mc.add(new Hammer.Pinch());
-            mc.add(new Hammer.Pan({
-                threshold: panThreshold
-            }));
-            // Hammer reports the total scaling. We need the incremental amount
-            let currentPinchScaling;
-            const handlePinch = function (e) {
-                const diff = 1 / (currentPinchScaling) * e.scale;
-                const rect = e.target.getBoundingClientRect();
-                const offsetX = e.center.x - rect.left;
-                const offsetY = e.center.y - rect.top;
-                const center = {
-                    x: offsetX,
-                    y: offsetY
-                };
-                // fingers position difference
-                const x = Math.abs(e.pointers[0].clientX - e.pointers[1].clientX);
-                const y = Math.abs(e.pointers[0].clientY - e.pointers[1].clientY);
-                // diagonal fingers will change both (xy) axes
-                const p = x / y;
-                let xy;
-                if (p > 0.3 && p < 1.7) {
-                    xy = 'xy';
-                }
-                else if (x > y) {
-                    // x axis
-                    xy = 'x';
-                }
-                else {
-                    // y axis
-                    xy = 'y';
-                }
-                doZoom(chartInstance, diff, center, xy);
-                // Keep track of overall scale
-                currentPinchScaling = e.scale;
-            };
-            mc.on('pinchstart', function (e) {
-                currentPinchScaling = 1; // reset tracker
-            });
-            mc.on('pinch', handlePinch);
-            mc.on('pinchend', function (e) {
-                handlePinch(e);
-                currentPinchScaling = null; // reset
-                zoomNS.zoomCumulativeDelta = 0;
-            });
-            let currentDeltaX = null, currentDeltaY = null, panning = false;
-            const handlePan = function (e) {
-                if (currentDeltaX !== null && currentDeltaY !== null) {
-                    panning = true;
-                    const deltaX = e.deltaX - currentDeltaX;
-                    const deltaY = e.deltaY - currentDeltaY;
-                    currentDeltaX = e.deltaX;
-                    currentDeltaY = e.deltaY;
-                    doPan(chartInstance, deltaX, deltaY);
-                }
-            };
-            mc.on('panstart', function (e) {
-                currentDeltaX = 0;
-                currentDeltaY = 0;
-                handlePan(e);
-            });
-            mc.on('panmove', handlePan);
-            mc.on('panend', function (e) {
-                currentDeltaX = null;
-                currentDeltaY = null;
-                zoomNS.panCumulativeDelta = 0;
-                setTimeout(function () { panning = false; }, 500);
-            });
-            chartInstance.zoom._ghostClickHandler = function (e) {
-                if (panning) {
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                }
-            };
-            node.addEventListener('click', chartInstance.zoom._ghostClickHandler);
-            chartInstance._mc = mc;
-        }
-    },
-    beforeDatasetsDraw: function (chartInstance) {
-        const ctx = chartInstance.chart.ctx;
-        const chartArea = chartInstance.chartArea;
-        ctx.save();
-        ctx.beginPath();
-        if (chartInstance.zoom._dragZoomEnd) {
-            const yAxis = getYAxis(chartInstance);
-            const beginPoint = chartInstance.zoom._dragZoomStart;
-            const endPoint = chartInstance.zoom._dragZoomEnd;
-            const offsetX = beginPoint.target.getBoundingClientRect().left;
-            const startX = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;
-            const endX = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;
-            const rectWidth = endX - startX;
-            ctx.fillStyle = 'rgba(225,225,225,0.5)';
-            ctx.lineWidth = 5;
-            ctx.fillRect(startX, yAxis.top, rectWidth, yAxis.bottom - yAxis.top);
-        }
-        ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
-        ctx.clip();
-    },
-    afterDatasetsDraw: function (chartInstance) {
-        chartInstance.chart.ctx.restore();
-    },
-    destroy: function (chartInstance) {
-        if (chartInstance.zoom) {
-            const options = chartInstance.options;
-            const node = chartInstance.zoom.node;
-            if (options.zoom && options.zoom.drag) {
-                node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
-                node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
-                // node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
-                node.ownerDocument.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
-            }
-            else {
-                node.removeEventListener('wheel', chartInstance.zoom._wheelHandler);
-            }
-            if (Hammer) {
-                node.removeEventListener('click', chartInstance.zoom._ghostClickHandler);
-            }
-            delete chartInstance.zoom;
-            const mc = chartInstance._mc;
-            if (mc) {
-                mc.remove('pinchstart');
-                mc.remove('pinch');
-                mc.remove('pinchend');
-                mc.remove('panstart');
-                mc.remove('pan');
-                mc.remove('panend');
-            }
-        }
-    }
-};
-Chart.pluginService.register(zoomPlugin);
-
-var SearchType;
-(function (SearchType) {
-    SearchType["searchWithSubHeader"] = "searchWithSubHeader";
-    SearchType["searchAll"] = "searchAll";
-    SearchType["searchInChildren"] = "searchInChildren";
-})(SearchType || (SearchType = {}));
-class NameServerHistoryComponent {
-    constructor(fileService, chartService, uiService) {
-        this.fileService = fileService;
-        this.chartService = chartService;
-        this.uiService = uiService;
-        /**
-         * Input (optional) bind to [showInstruction]
-         */
-        this.showInstruction = true;
-        /**
-         * time info of the name server history file
-         */
-        this.time = {};
-        /**
-         * data of the name server history file
-         */
-        this.data = {};
-        /**
-         * header of the name server history file
-         */
-        this.header = [];
-        /**
-         * host of the name server history file
-         */
-        this.host = 'nameserver history file';
-        /**
-         * the progress for reading file
-         */
-        this.readProgress = 0;
-        /**
-         * selected/dropped file name (abbreviation), full file name will be shown via the tooltips
-         */
-        this.abbreviatedFileName = 'or Drop File Here';
-        /**
-         * for the instruction step 4
-         */
-        this.stepShowChart = false;
-        this.searchType = SearchType.searchAll;
-    }
-    ngOnChanges(changes) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const fbc = changes.fileBuffer;
-            if (fbc && fbc.currentValue && fbc.currentValue !== fbc.previousValue && !isFile(fbc.currentValue)) {
-                // simulate selecting file
-                const simulatedEvent = { target: { files: [blobToFile(fbc.currentValue, this.streamModeFileName)] } };
-                yield this.fileSelected(simulatedEvent);
-                this.port = undefined; // clear the port selection
-                if (this.autoDisplay) {
-                    this.onResize(); // ngAfterViewInit/resize won't work in electron
-                    this.showChart();
-                }
-            }
-        });
-    }
-    ngAfterViewInit() {
-        // init items' status
-        // reset chart button will be disable by default later, only be enabled after zoomed
-        this._toggleItems([
-            { id: HtmlElement.chartArea, status: false },
-            { id: HtmlElement.readFileProgress, status: false },
-            { id: HtmlElement.showChartButton, status: false },
-            { id: HtmlElement.loadPortsButton, status: true },
-            { id: HtmlElement.resetChartButton, status: false }
-        ]);
-        this.onResize(); // update the size, otherwise there may have a scrollbar (because of the toast) if auto display is set to true
-    }
-    /**
-     * Reset Chart to initial status
-     * If legend is already selected/unselected from the list, it wouldn't be restored.
-     */
-    resetChart() {
-        this._toggleItems([{ id: HtmlElement.resetChartButton, status: false }]);
-        if (this.tableSource && this._selection) {
-            this.chartService.resetChart(this.tableSource, this._selection)
-                .catch(e => this._showMessage(Alert.error, e));
-        }
-    }
-    /**
-     * read the file and display the chart
-     */
-    showChart() {
-        // after click, this button and reset button needs to be disabled
-        this._toggleItems([
-            { id: HtmlElement.resetChartButton, status: false },
-            { id: HtmlElement.showChartButton, status: false }
-        ]);
-        this.stepShowChart = true;
-        this._initChartEnv().then(() => {
-            const selectedTime = this._selectedTimeRange;
-            if (selectedTime.startTime > selectedTime.endTime) {
-                this._showMessage(Alert.error, 'Time range is not correct.');
-                return;
-            }
-            if (this.file) {
-                // it's time for displaying the reading progress bar
-                this._toggleItems([{ id: HtmlElement.readFileProgress, status: true }]);
-                return this._buildChartFromDataFile(this.file, selectedTime.startTime, selectedTime.endTime, this.port);
-            }
-        }).catch(e => {
-            this._showMessage(Alert.error, e);
-            this._toggleItems([{ id: HtmlElement.readFileProgress, status: false }]);
-        });
-    }
-    /**
-     * load all ports from file
-     */
-    loadPorts() {
-        // do confirmation actions
-        if (this.file) {
-            // before start loading ports from file, display progress bar and disable the show chart button
-            this._toggleItems([
-                { id: HtmlElement.readFileProgress, status: true },
-                { id: HtmlElement.showChartButton, status: false }
-            ]);
-            this._readPortsFromFile(this.file);
-        }
-    }
-    /**
-     * select name server history file, currently only supports 1 file.
-     */
-    fileSelected(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const selectedFile = getFileFromInput(event.target);
-            if (selectedFile) {
-                if (!isSameFile(this.file, selectedFile)) {
-                    // init port selector
-                    yield this._initPortSelector().catch(e => this._showMessage(Alert.error, e));
-                    this.file = selectedFile;
-                    this.abbreviatedFileName = getAbbreviatedFileName(this.file.name);
-                    // after file has been selected, the show chart button needs to be enabled
-                    this._toggleItems([{ id: HtmlElement.showChartButton, status: true }]);
-                }
-            }
-        });
-    }
-    /**
-     * drop name server history file, currently only supports 1 file.
-     */
-    fileDropped(event) {
-        getFileFromDrop(event)
-            .then(file => {
-            if (!isSameFile(this.file, file)) {
-                // init port selector
-                this.file = file;
-                if (this.file) {
-                    this.abbreviatedFileName = getAbbreviatedFileName(this.file.name);
-                    // after file has been dropped, the show chart button needs to be enabled
-                    this._toggleItems([{ id: HtmlElement.showChartButton, status: true }]);
-                }
-            }
-        })
-            .then(() => {
-            return this._initPortSelector();
-        })
-            .catch(e => this._showMessage(Alert.error, e));
-    }
-    /**
-     * Select one item from selection table, relative dataset will be shown or hidden
-     */
-    selectItem(event) {
-        if (event && event.tableRow) {
-            const row = event.tableRow;
-            this._selection.toggle(row);
-            this.chartService.toggleDataInChart(row.KPI, !this._selection.isSelected(row))
-                .catch(e => this._showMessage(Alert.error, e));
-        }
-    }
-    /**
-     * recalculating chart height when resizing
-     */
-    onResize() {
-        const nameserverHistoryAllElement = this.nameserverHistoryAllRef ? this.nameserverHistoryAllRef.nativeElement : null;
-        const nameserverHistoryContentElement = this.nameserverHistoryContentRef ? this.nameserverHistoryContentRef.nativeElement : null;
-        setChartHeight(nameserverHistoryAllElement, nameserverHistoryContentElement);
-    }
-    /**
-     * Switch port and reinitialize chart, triggered by changing the port
-     * @param port the selected port
-     */
-    switchPortForChart(port) {
-        if (port === this._currentChartPort) {
-            // not to switch port, because the relative port is displaying, no need to render twice.
-            return;
-        }
-        if (!this.file || !port || port.length === 0 || port.slice(1, 3) === '**') {
-            return;
-        }
-        else if (Object.keys(this.time).length > 1 && !getRealPorts(Object.keys(this.time).filter(key => this.time[key])).includes(port)) {
-            this._showMessage(Alert.info, `Data of port:${port} is not loaded, please load the data first by clicking the "Show" button.`);
-            return;
-        }
-        // only do switch ports when available ports number > 1
-        if (Object.keys(this.time).filter(key => this.time[key]).length > 1) {
-            // disable the "show chart" and "reset chart" button first
-            this._toggleItems([
-                { id: HtmlElement.showChartButton, status: false },
-                { id: HtmlElement.resetChartButton, status: false }
-            ]);
-            // init the environment with switch flag
-            this._initChartEnv(true).then(() => {
-                return this._buildChart(port, null, true);
-            }).catch(e => this._showMessage(Alert.error, e));
-        }
-    }
-    /**
-     * get the columns which need to be hidden from the selection table
-     */
-    get hiddenColumns() {
-        return this.uiService.getHiddenColumns(this.hideMeasureColumns);
-    }
-    /**
-     * get default timezone
-     */
-    get defaultTimezone() {
-        return getDefaultTimezone();
-    }
-    /**
-     * get the key column (KPI)
-     */
-    get kpiColumn() {
-        return Item.kpi;
-    }
-    /**
-     * get the key column (KPI)
-     */
-    get descColumn() {
-        return Item.description;
-    }
-    /**
-     * get the selected time range, set second and millisecond part to 0
-     */
-    get _selectedTimeRange() {
-        let startTime = 0;
-        let endTime = 4102358400000; // 2099/12/31
-        if (this.dateTimeRange != null) {
-            if (this.dateTimeRange.length >= 1) {
-                // get start time
-                if (this.dateTimeRange[0]) {
-                    startTime = this.dateTimeRange[0].setSeconds(0, 0);
-                }
-                if (this.dateTimeRange[1]) {
-                    endTime = this.dateTimeRange[1].setSeconds(0, 0);
-                }
-            }
-        }
-        return { startTime: startTime, endTime: endTime };
-    }
-    /**
-     * get the time range string, eg: 2018-10-25 10:25 ~ 2018-10-26 10:26
-     */
-    get _selectedTimeRangeString() {
-        const selectedTimeRangeString = this._selectedTimeRange;
-        return `${getTimeString(selectedTimeRangeString.startTime)} ~ ${getTimeString(selectedTimeRangeString.endTime)}`;
-    }
-    /**
-     * get array of header key
-     */
-    get _headerKey() {
-        if (this.header) {
-            return this.header.map(headerItem => headerItem.key);
-        }
-    }
-    /**
-     * get array of header text
-     */
-    get _headerText() {
-        return this.header.map(headerItem => headerItem.text);
-    }
-    /**
-     * read ports from the selected nameserver history file
-     * @param file nameserver history file
-     */
-    _readPortsFromFile(file) {
-        this.fileService.getPortsFromFile(file, (progress) => {
-            this.readProgress = progress;
-        }).then(ports => {
-            return sleep(100).then(() => {
-                return this._initPortSelector(ports);
-            });
-        }).catch(e => this._showMessage(Alert.error, e));
-    }
-    /**
-     * build chart from the selected nameserver history file
-     * @param file the nameserver history file
-     * @param startTime start time
-     * @param endTime end time
-     * @param selectedPort selected port for nameserver history file (MDC system)
-     */
-    _buildChartFromDataFile(file, startTime, endTime, selectedPort) {
-        return this.fileService.getChartContentFromFile(file, startTime, endTime, selectedPort, this.timezone, this.maxRowsLimitation, progress => this.readProgress = progress)
-            .then(result => {
-            // parsing done
-            const beginTime = new Date();
-            const promises = [];
-            const ports = getRealPorts(Object.keys(result.time), true);
-            ports.forEach(port => {
-                // convert the unit and generate controlling data for all ports
-                promises.push(this.uiService.convertUnitAndGenerateControlData(result.data[port], result.header, port));
-            });
-            return Promise.all(promises)
-                .then(() => {
-                // get all ports from the analyzed data(time)
-                // get the port that will be shown in the page
-                const port = getDisplayPort(ports, selectedPort);
-                printProcessedTime(beginTime, 'converting step');
-                ports.forEach(portItem => this.uiService.generateYScale(portItem));
-                printProcessedTime(beginTime, 'generating YScale step');
-                this.data = result.data;
-                this.time = result.time;
-                this.header = this.uiService.getHeader(result.header, port);
-                this.host = result.host;
-                if (result.aborted === Abort.maxLineNumReached) {
-                    this._showMessage(Alert.warning, `Maximum number of lines reached. Processed time range is: ${getTimeRangeString(this.time)}.`);
-                }
-                else {
-                    if (isEmptyData(this.data)) {
-                        this._showMessage(Alert.info, `Cannot find any data for the selected time period: ${this._selectedTimeRangeString}`);
-                    }
-                    else {
-                        this._showMessage(Alert.success, `Processed time range is: ${getTimeRangeString(this.time)}.`);
-                    }
-                }
-                return sleep(100).then(() => {
-                    return this._buildChart(port, ports);
-                });
-            });
-        });
-    }
-    /**
-     * reinitialize the port selector with the ports
-     */
-    _initPortSelector(ports = null, selectedPort = null) {
-        return new Promise(resolve => {
-            // initialization for ngx-select
-            if (ports != null && ports.length > 1) {
-                // MDC, remove default '0000' port
-                this.ports = generatePorts(getRealPorts(ports), selectedPort);
-            }
-            else {
-                this.ports = generatePorts(ports);
-            }
-            if (ports != null && selectedPort === null) {
-                // reset status when doing:
-                // 1. loading ports
-                // 2. the file doesn't contain the selected Port
-                this.readProgress = 0;
-                // hide the progress bar and enable the "show chart" button
-                this._toggleItems([
-                    { id: HtmlElement.readFileProgress, status: false },
-                    { id: HtmlElement.showChartButton, status: true }
-                ]);
-            }
-            resolve();
-        });
-    }
-    /**
-     * build and display the chart on page
-     * @param port the selected port
-     * @param ports all available ports
-     * @param switchFlag indicates whether this function is triggered from switching ports (no init port selector needed)
-     */
-    _buildChart(port, ports, switchFlag = false) {
-        const beginTime = new Date();
-        if (port) {
-            return Promise.resolve(this._loadSettingsForSelectionsTable(port))
-                .then(() => {
-                // get the config
-                return this.chartService.buildChart(this.time[port], this.data[port], this.uiService.getYScale(this._headerKey, port), this._headerText, this._headerKey, this._selection, this.tableSource, this._getHostTitle(port), this.uiService.getDisplayItems(this._headerKey, port, this.defaultSelectedItems), this._onZoom.bind(this))
-                    .then(() => {
-                    this.readProgress = 0;
-                    // after chart has been created, show the chart area, hide progress bar and enable the "show chart" button
-                    this._toggleItems([
-                        { id: HtmlElement.chartArea, status: true },
-                        { id: HtmlElement.readFileProgress, status: false },
-                        { id: HtmlElement.showChartButton, status: true }
-                    ]);
-                    // set port to current displaying port
-                    this._currentChartPort = port;
-                    printProcessedTime(beginTime, 'step_build_chart');
-                    if (ports && ports.length > 0) {
-                        if (!switchFlag) {
-                            // initialize port selector. Do not need to do it when switching port.
-                            return this._initPortSelector(ports, port);
-                        }
-                    }
-                });
-            });
-        }
-        else {
-            if (ports.length > 0) {
-                this._showMessage(Alert.warning, 'The selected port does not exist in the name server history file. Please choose a correct port and have a try again.');
-                if (!switchFlag) {
-                    // initialize port selector. Do not need to do it when switching port.
-                    return this._initPortSelector(ports, port);
-                }
-            }
-        }
-    }
-    /**
-     * get the string that will be displayed on the title area of the chart
-     * eg: host1 - 30040 (2018-09-05 15:32:32 ~ 2018-09-07 15:32:15)
-     * @param port selected port
-     */
-    _getHostTitle(port) {
-        if (this.host) {
-            return `${this.host} - ${port} ( ${getTimeRangeString(this.time[port])} )`;
-        }
-    }
-    /**
-     * after zoom, enable the reset button.
-     */
-    _onZoom() {
-        this._toggleItems([{ id: HtmlElement.resetChartButton, status: true }]);
-    }
-    /**
-     * initialize chart, including: destroy current chart, initialize config, initialize all relative data
-     */
-    _initChartEnv(switchFlag = false) {
-        return this.chartService.destroyChart().then(() => {
-            {
-                // cleanup other data
-                this._toggleItems([{ id: HtmlElement.chartArea, status: false }]);
-                if (!switchFlag) {
-                    Object.keys(this.time).forEach(key => {
-                        if (this.time[key]) {
-                            this.time[key].length = 0;
-                        }
-                    });
-                    this.time = {};
-                    Object.keys(this.data).forEach(key => {
-                        if (this.data[key]) {
-                            this.data[key].length = 0;
-                        }
-                    });
-                    this.data = {};
-                    this.header.length = 0;
-                    this.host = 'nameserver history file';
-                    this.tableSource = void 0;
-                    this.readProgress = 0;
-                    this.uiService.clearLoadHistoryInfos();
-                }
-            }
-        });
-    }
-    /**
-     * Load settings for the selection table (the right part of the chart)
-     * @param port the selected port
-     */
-    _loadSettingsForSelectionsTable(port) {
-        this.tableSource = this.uiService.getSelectionTableRows(this._headerKey, port, this.defaultSelectedItems);
-        this._selection = new SelectionModel(true, []);
-        this.tableSource.forEach(row => {
-            if (this.uiService.getDisplayItems(this._headerKey, port, this.defaultSelectedItems).includes(row.KPI)) {
-                this._selection.select(row);
-            }
-        });
-    }
-    /**
-     * Show messages
-     * @param type type of the message
-     * @param message message text
-     */
-    _showMessage(type, message) {
-        if (type) {
-            switch (type) {
-                case Alert.success:
-                case Alert.info:
-                    break;
-                case Alert.warning:
-                    console.warn(message);
-                    break;
-                case Alert.error:
-                    console.error(message);
-            }
-        }
-        if (this.alertMessage === message) {
-            // try trigger the change event of the alert.
-            this.alertMessage = void 0;
-            setTimeout(() => this.alertMessage = message, 100);
-        }
-        else {
-            this.alertMessage = message;
-        }
-        this.alertType = type;
-    }
-    /**
-     * toggle items with the provided status (show or hide the relative element on the page)
-     * @param items items with the relative id and status.
-     */
-    _toggleItems(items) {
-        const getVariableNameByTypeId = (id) => {
-            switch (id) {
-                case HtmlElement.chartArea: return 'showChartFlag';
-                case HtmlElement.readFileProgress: return 'showReadFileProgress';
-                case HtmlElement.showChartButton: return 'enableShowChartButton';
-                case HtmlElement.loadPortsButton: return 'enableLoadPortsButton';
-                case HtmlElement.resetChartButton: return 'enableResetChartButton';
-            }
-        };
-        if (items) {
-            items.forEach(item => {
-                this[getVariableNameByTypeId(item.id)] = item.status;
-            });
-        }
-    }
-}
-NameServerHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameServerHistoryComponent, deps: [{ token: FileService }, { token: ChartService }, { token: UIService }], target: i0.ɵɵFactoryTarget.Component });
-NameServerHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NameServerHistoryComponent, selector: "ngx-hana-nameserver-history-viewer", inputs: { defaultSelectedItems: "defaultSelectedItems", hideMeasureColumns: "hideMeasureColumns", maxRowsLimitation: "maxRowsLimitation", showInstruction: "showInstruction", timezone: "timezone", fileBuffer: "fileBuffer", streamModeFileName: "streamModeFileName", autoDisplay: "autoDisplay" }, providers: [FileService, ChartService, UIService], viewQueries: [{ propertyName: "nameserverHistoryAllRef", first: true, predicate: ["nameserverHistoryAll"], descendants: true, read: ElementRef }, { propertyName: "nameserverHistoryContentRef", first: true, predicate: ["nameserverHistoryContent"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\" class=\"box-stream-mode-text\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"], components: [{ type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { type: i8.SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameServerHistoryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-hana-nameserver-history-viewer', providers: [FileService, ChartService, UIService], template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\" class=\"box-stream-mode-text\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .upload-box-content .box-stream-mode-text{text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"] }]
-        }], ctorParameters: function () { return [{ type: FileService }, { type: ChartService }, { type: UIService }]; }, propDecorators: { nameserverHistoryAllRef: [{
-                type: ViewChild,
-                args: ['nameserverHistoryAll', { read: ElementRef }]
-            }], nameserverHistoryContentRef: [{
-                type: ViewChild,
-                args: ['nameserverHistoryContent', { read: ElementRef }]
-            }], defaultSelectedItems: [{
-                type: Input
-            }], hideMeasureColumns: [{
-                type: Input
-            }], maxRowsLimitation: [{
-                type: Input
-            }], showInstruction: [{
-                type: Input
-            }], timezone: [{
-                type: Input
-            }], fileBuffer: [{
-                type: Input
-            }], streamModeFileName: [{
-                type: Input
-            }], autoDisplay: [{
-                type: Input
-            }] } });
-
-class NameserverHistoryModule {
-}
-NameserverHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameserverHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NameserverHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameserverHistoryModule, declarations: [NameServerHistoryComponent,
-        FileDropInputComponent,
-        ProgressBarComponent,
-        TimezoneSelectorComponent,
-        PortSelectorComponent,
-        InstructionComponent,
-        TimeRangeSelectorComponent], imports: [AlertModule,
-        SelectionTableModule,
-        DropdownListModule,
-        OwlDateTimeModule,
-        OwlNativeDateTimeModule,
-        CommonModule,
-        FormsModule], exports: [NameServerHistoryComponent] });
-NameserverHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameserverHistoryModule, providers: [], imports: [[
-            AlertModule,
-            SelectionTableModule,
-            DropdownListModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
-            CommonModule,
-            FormsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameserverHistoryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        NameServerHistoryComponent,
-                        FileDropInputComponent,
-                        ProgressBarComponent,
-                        TimezoneSelectorComponent,
-                        PortSelectorComponent,
-                        InstructionComponent,
-                        TimeRangeSelectorComponent
-                    ],
-                    exports: [
-                        NameServerHistoryComponent
-                    ],
-                    imports: [
-                        AlertModule,
-                        SelectionTableModule,
-                        DropdownListModule,
-                        OwlDateTimeModule,
-                        OwlNativeDateTimeModule,
-                        CommonModule,
-                        FormsModule
-                    ],
-                    entryComponents: [],
-                    providers: [],
-                    bootstrap: []
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NameServerHistoryComponent, NameserverHistoryModule };
-//# sourceMappingURL=ngx-hana-nameserver-history-viewer.mjs.map