ngx-hana-nameserver-history-viewer 1.1.3 → 1.1.90

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

@@ -0,0 +1,4081 @@
+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 * as momentImported from 'moment-timezone';
+import * as i2 from 'ngx-dropdown-list';
+import { DropdownListModule } from 'ngx-dropdown-list';
+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 * as moment_module 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`;
+    }
+}
+
+// workaround for fixing following error when doing packagr: Cannot call a namespace ('moment')
+const moment$4 = momentImported;
+/**
+ * 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$4.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$4.tz.zone(timezone).utcOffset(time * 1000);
+    const currentOffset = moment$4.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$4(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;
+}
+
+// workaround for fixing following error when doing packagr: Cannot call a namespace ('moment')
+const moment$3 = momentImported;
+class TimezoneSelectorService {
+    /**
+     * get the default timezone
+     */
+    getDefaultTimezone() {
+        return getDefaultTimezone();
+    }
+    /**
+     * Get all the timezones for each region
+     */
+    getZones() {
+        const timezones = [];
+        const zones = moment$3.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
+        }] });
+
+// workaround for fixing following error when doing packagr: Cannot call a namespace ('moment')
+const moment$2 = momentImported;
+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$2.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>
+      <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>
+      <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;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;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) => {
+            const ctx = document.getElementById('chartNameServerHistory').getContext('2d');
+            const cfg = ChartService._generateChartConfig(time, data, yScale, header, headerKey, selection, tableSource, title, defaultItems, zoomCB);
+            this._chart = new Chart$2(ctx, cfg);
+            resolve();
+        });
+    }
+    /**
+     * 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);
+    }
+}
+
+const moment$1 = (window && window.moment) ? window.moment : moment_module;
+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.
+ */
+const moment = (window && window.moment) ? window.moment : moment_module;
+// 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(xScale.getValueForPixel(xScale.left));
+        const end = moment(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;
+    }
+    ngOnInit() {
+        // this.timezone = this.defaultTimezone;
+        this.onResize();
+        // 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 }
+        ]);
+    }
+    ngOnChanges(changes) {
+        const fbc = changes.fileBuffer;
+        if (fbc && fbc.currentValue && fbc.currentValue !== fbc.previousValue) {
+            // simulate selecting file
+            const simulatedEvent = { target: { files: [blobToFile(this.fileBuffer, this.streamModeFileName)] } };
+            this.fileSelected(simulatedEvent);
+        }
+    }
+    /**
+   * 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) {
+        const selectedFile = getFileFromInput(event.target);
+        if (selectedFile) {
+            if (!isSameFile(this.file, selectedFile)) {
+                // init port selector
+                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" }, 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\">{{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;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\">{{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;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
+            }] } });
+
+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