ngx-hana-nameserver-history-viewer 21.0.0 → 21.1.0

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

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { isDevMode, Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
 import { SelectionModel } from '@angular/cdk/collections';
 import moment from 'moment-timezone';
-import * as chartjs from 'chart.js';
-import { Chart as Chart$2 } from 'chart.js';
+import { Chart, registerables, TimeScale, LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, Decimation } from 'chart.js';
+import 'chartjs-adapter-moment';
+import zoomPlugin from 'chartjs-plugin-zoom';
 import { parse } from 'papaparse';
-import * as hammerjs from 'hammerjs';
-import moment$1 from 'moment';
+import 'hammerjs';
 import * as i2 from 'nshviewer-angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'nshviewer-angular-datetime-picker';
 import { SelectionTableComponent } from 'ngx-selection-table';
@@ -1094,8 +1094,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Injectable
         }] });
 
-// Using dynamic flag to fix the issue of ng-packagr #696: Lambda not supported
-// @dynamic
+// Register Chart.js components and plugins
+Chart.register(...registerables, TimeScale, LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, Decimation, zoomPlugin);
+const MAX_POINTS_TO_RENDER = 100;
 class ChartService {
     /**
      * toggle the dataset status of the chart, synchronously
@@ -1131,21 +1132,13 @@ class ChartService {
      */
     static _initConfig(chart) {
         // init data sets
-        if (chart.data && chart.data.datasets) {
+        if (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;
-            }
+        if (chart.options?.scales) {
             chart.options.scales = void 0;
             chart.options = void 0;
         }
@@ -1161,62 +1154,70 @@ class ChartService {
             return {
                 borderColor: color,
                 backgroundColor: color,
-                borderWidth: 1.25,
+                borderWidth: 1,
                 spanGaps: false,
                 label: header[i],
                 data: data[i],
                 fill: false,
                 yAxisID: `y-axis-${i}`,
-                hidden: !defaultItems.includes(header[i])
+                hidden: !defaultItems.includes(header[i]),
+                pointRadius: 0,
+                pointHitRadius: 5,
+                pointHoverRadius: 5,
+                // Enable smooth curves for more natural line appearance
+                tension: 0.2,
+                // Enable decimation for each dataset
+                parsing: false,
+                normalized: true
             };
         });
     }
-    static _generateXAxes(time) {
-        const format = 'MMMDD HH:mm:ss';
-        return [
-            {
+    static _generateScales(timeArray, data, yScaleArray) {
+        const scales = {
+            x: {
                 type: 'time',
                 time: {
-                    // unit: 'second',
-                    // stepSize: 1,
                     displayFormats: {
-                        'millisecond': format,
-                        'second': format,
-                        'minute': format,
+                        'millisecond': 'MMMDD HH:mm',
+                        'second': 'MMMDD HH:mm',
+                        'minute': 'MMMDD HH:mm',
                         'hour': 'MMMDD HH',
-                        'day': 'MMMDD YYYY',
-                        'week': format,
-                        'month': format,
-                        'quarter': format,
-                        'year': format,
+                        'day': 'MMMDD',
+                        'week': 'MMMDD',
+                        'month': 'MMM YYYY',
+                        'quarter': 'MMM YYYY',
+                        'year': 'MMM YYYY',
                     },
-                    tooltipFormat: 'll HH:mm:ss',
-                    min: time[0],
-                    max: time[time.length - 1]
+                    tooltipFormat: 'll HH:mm:ss'
                 },
-                // scaleLabel: {
-                //   display: false,
-                //   labelString: 'Date'
-                // },
+                min: timeArray[0],
+                max: timeArray[timeArray.length - 1],
                 ticks: {
+                    source: 'auto',
                     maxRotation: 0,
-                    reverse: true
-                }
+                    autoSkip: true,
+                    // callback: function(val, index) {
+                    //   // Hide every 2nd tick label
+                    //   return  index % 2 === 0? this.getLabelForValue(val) : '';
+                    // },
+                },
+                reverse: false
             }
-        ];
-    }
-    static _generateYAxes(data, yScale) {
-        return data.map((item, i) => ({
-            type: 'linear',
-            display: false,
-            position: 'left',
-            id: `y-axis-${i}`,
-            gridLines: {},
-            ticks: {
+        };
+        // Add Y axes
+        data.forEach((item, i) => {
+            scales[`y-axis-${i}`] = {
+                type: 'linear',
+                display: false,
+                position: 'left',
+                grid: {
+                    drawOnChartArea: i === 0, // only show grid for first axis
+                },
                 min: 0,
-                max: yScale[i]
-            }
-        }));
+                max: yScaleArray[i]
+            };
+        });
+        return scales;
     }
     /**
      * generate configuration for chart
@@ -1228,70 +1229,117 @@ class ChartService {
                 datasets: ChartService._generateDataSets(data, header, headerKey, defaultItems)
             },
             options: {
-                elements: { point: { radius: 0, hitRadius: 5, hoverRadius: 5 } }, // set radius to 0 not to display point
-                responsive: true,
-                animation: {
-                    duration: 0, // general animation time
-                },
-                hover: {
-                    animationDuration: 0, // duration of animations when hovering an item
-                    onHover: function (e) {
-                        const point = this.getElementAtEvent(e);
-                        if (point.length) {
-                            e.target.style.cursor = 'pointer';
-                        }
-                        else {
-                            e.target.style.cursor = 'default';
-                        }
+                layout: {
+                    padding: {
+                        right: 25 // Add padding to the right side of the chart
                     }
                 },
-                responsiveAnimationDuration: 0, // animation duration after a resize
-                legend: {
-                    position: 'bottom',
-                    onHover: (e) => {
-                        e.target.style.cursor = 'pointer';
-                    },
-                    labels: {
-                        filter: (legendItem) => selection.isSelected(tableSource.find(row => legendItem.text === row.KPI))
-                    }
+                interaction: {
+                    intersect: true, // true means not a range hit
+                    axis: 'x',
+                    mode: 'nearest'
                 },
-                title: {
-                    display: true,
-                    text: title
-                },
-                responsiveDownsample: {
-                    enabled: true,
-                    desiredDataPointDistance: 2,
-                    minNumPoints: 200,
-                    maxNumPointsToDraw: 100
+                responsive: true,
+                animation: false, // must disable it otherwise zoomin will hang
+                onHover: (event, elements) => {
+                    const target = event.native?.target || event.target;
+                    if (target) {
+                        target.style.cursor = elements?.length > 0 ? 'pointer' : 'default';
+                    }
                 },
-                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}`;
+                elements: { point: { radius: 0, hitRadius: 5, hoverRadius: 5 } }, // set radius to 0 not to display point
+                parsing: false,
+                normalized: true,
+                datasets: { line: { pointRadius: 0, pointHitRadius: 5, pointHoverRadius: 5 } },
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        onHover: (event, legendItem) => {
+                            const target = event.native?.target || event.target;
+                            if (target) {
+                                target.style.cursor = 'pointer';
                             }
-                            else {
-                                return getNumberWithCommas(tooltipItem.yLabel);
+                        },
+                        labels: {
+                            filter: (legendItem) => selection.isSelected(tableSource.find(row => legendItem.text === row.KPI))
+                        }
+                    },
+                    title: {
+                        display: true,
+                        text: title
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function (context) {
+                                // format numbers with commas and add unit information
+                                const label = context.dataset.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(context.parsed.y)}${unit}`;
+                                }
+                                else {
+                                    return getNumberWithCommas(context.parsed.y);
+                                }
                             }
                         }
+                    },
+                    // downsampling
+                    decimation: {
+                        enabled: true,
+                        algorithm: 'lttb', // Largest-Triangle-Three-Buckets algorithm
+                        samples: 500, // Increased samples for better quality
+                        threshold: 1 // increase it may hang the ui due to swith of using/not using downsampling, disable it (set it to 0), will slowdown average zoom in.
+                    },
+                    zoom: {
+                        limits: {
+                            x: {
+                                min: 'original',
+                                max: 'original',
+                                //minRange: 180000  // 3 min the min range that can be zoomed
+                            }
+                        },
+                        pan: {
+                            enabled: true,
+                            mode: 'x',
+                            modifierKey: 'ctrl'
+                        },
+                        zoom: {
+                            // wheel: {
+                            //   enabled: true,
+                            //   speed: 0.02 
+                            // },
+                            // pinch: {
+                            //   enabled: true
+                            // },
+                            drag: {
+                                enabled: true,
+                                threshold: 10,
+                                drawTime: 'beforeDraw'
+                            },
+                            mode: 'x',
+                            onZoom: zoomCallback,
+                            onZoomComplete: (context => {
+                                const chart = context?.chart;
+                                if (!chart?.data?.datasets) {
+                                    return;
+                                }
+                                // make point visible when current points are less than MAX_POINTS_TO_RENDER
+                                const pointRadiusChangeFlag = chart.data.datasets.some(dataset => dataset.data.length <= MAX_POINTS_TO_RENDER);
+                                const pointRadius = pointRadiusChangeFlag ? 2 : 0;
+                                chart.data.datasets.forEach((dataset) => {
+                                    dataset.pointRadius = pointRadius;
+                                });
+                                if (chart.options?.elements?.point) {
+                                    chart.options.elements.point.radius = pointRadius;
+                                }
+                                chart.update();
+                            })
+                        }
                     }
                 },
-                scales: {
-                    xAxes: ChartService._generateXAxes(time),
-                    yAxes: ChartService._generateYAxes(data, yScale)
-                },
-                zoom: {
-                    enabled: true,
-                    drag: true,
-                    mode: 'x',
-                    onZoom: zoomCallback
-                }
+                scales: ChartService._generateScales(time, data, yScale)
             }
         };
     }
@@ -1301,12 +1349,65 @@ class ChartService {
         }
         return -1;
     }
+    /**
+     * WORKAROUND: Setup mousemove event listener to fix Chart.js tooltip issue
+     * Issue: https://github.com/chartjs/Chart.js/issues/11972
+     * TODO: Remove this entire method when the Chart.js bug is fixed
+     */
+    _setupTooltipWorkaround(chart) {
+        const canvas = chart.canvas;
+        const mouseMoveHandler = (event) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // Check if mouse is within chart area
+            const chartArea = chart.chartArea;
+            if (chartArea) {
+                const isInChartArea = x >= chartArea.left && x <= chartArea.right &&
+                    y <= chartArea.bottom && y >= chartArea.top;
+                // Get legend area (legend is positioned at bottom)
+                const legendArea = chart.legend;
+                let isInLegendArea = false;
+                if (legendArea && legendArea.legendHitBoxes) {
+                    isInLegendArea = legendArea.legendHitBoxes.some((hitBox) => x >= hitBox.left && x <= hitBox.left + hitBox.width &&
+                        y >= hitBox.top && y <= hitBox.top + hitBox.height);
+                }
+                if (!isInChartArea && !isInLegendArea) {
+                    // Mouse is in axis area (but not legend), force hide tooltip and active points
+                    if (chart.tooltip) {
+                        chart.tooltip.setActiveElements([], { x: 0, y: 0 });
+                    }
+                    // Clear active elements to hide hover points
+                    chart.setActiveElements([]);
+                    chart.update('none');
+                    canvas.style.cursor = 'default';
+                }
+            }
+        };
+        canvas.addEventListener('mousemove', mouseMoveHandler);
+        // Store the handler for cleanup
+        chart._mouseMoveHandler = mouseMoveHandler;
+    }
+    /**
+     * WORKAROUND: Clean up mousemove event listener for Chart.js tooltip issue
+     * Issue: https://github.com/chartjs/Chart.js/issues/11972
+     * TODO: Remove this entire method when the Chart.js bug is fixed
+     */
+    _cleanupTooltipWorkaround(chart) {
+        const canvas = chart.canvas;
+        const mouseMoveHandler = chart._mouseMoveHandler;
+        if (canvas && mouseMoveHandler) {
+            canvas.removeEventListener('mousemove', mouseMoveHandler);
+        }
+    }
     /**
      * destroy the chart, release the resource of the chart
      */
     _destroyChart(chart) {
         return new Promise((resolve) => {
             if (chart) {
+                // WORKAROUND: Clean up tooltip workaround - TODO: Remove when Chart.js bug is fixed
+                this._cleanupTooltipWorkaround(chart);
                 chart.destroy();
             }
             resolve();
@@ -1344,7 +1445,10 @@ class ChartService {
                         }
                     });
                 }
-                chart.resetZoom();
+                // Use the zoom plugin's resetZoom method
+                if (chart.resetZoom) {
+                    chart.resetZoom();
+                }
                 resolve(datasetStatusBeforeReset);
             }
             else {
@@ -1391,8 +1495,9 @@ class ChartService {
         return new Promise((resolve, reject) => {
             const ctx = document.getElementById('chartNameServerHistory')?.getContext('2d');
             if (ctx) {
-                const cfg = ChartService._generateChartConfig(time, data, yScale, header, headerKey, selection, tableSource, title, defaultItems, zoomCB);
-                this._chart = new Chart$2(ctx, cfg);
+                this._chart = new Chart(ctx, ChartService._generateChartConfig(time, data, yScale, header, headerKey, selection, tableSource, title, defaultItems, zoomCB));
+                // WORKAROUND: Setup tooltip workaround - TODO: Remove when Chart.js bug is fixed
+                this._setupTooltipWorkaround(this._chart);
                 resolve();
             }
             else {
@@ -1801,1141 +1906,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Injectable
         }] });
 
-/**
- * This plugin is adapted from: https://github.com/3dcl/chartjs-plugin-responsive-downsample
- * for controlling the radius of point.
- *
- * MIT License
- * Copyright (c) 2018 3D Content Logistics
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-/**
- * Check if a value is null or undefined
- */
-function isNil(value) {
-    return (typeof value === 'undefined') || value === null;
-}
-/**
- * Clamp a number to a range
- * @param value
- * @param min
- * @param max
- */
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-/**
- * Recursively assign default values to an object if object is missing the keys.
- * @param object The destination object to assign default values to
- * @param defaults The default values for the object
- * @return The destination object
- */
-function defaultsDeep(object, defaults) {
-    for (const key in defaults) {
-        if (defaults.hasOwnProperty(key)) {
-            const value = object[key];
-            if (typeof value === 'undefined') {
-                object[key] = defaults[key];
-            }
-            else if (value !== null && typeof value === 'object') {
-                object[key] = defaultsDeep(value, defaults[key]);
-            }
-        }
-    }
-    return object;
-}
-/**
- * Finds the first element in an array for that the comaperator functions returns true
- *
- * @export
- * @param array An array
- * @param compareFunction Comperator function returning true for the element seeked
- * @returns The found element or undefined
- */
-function findInArray(array, compareFunction) {
-    if (isNil(array)) {
-        return undefined;
-    }
-    for (let i = 0; i < array.length; i++) {
-        if (compareFunction(array[i]) === true) {
-            return array[i];
-        }
-    }
-    return undefined;
-}
-/**
- * Finds the first index in an array for that the comaperator function for an element returns true
- *
- * @export
- * @param array An array of elements
- * @param compareFunction Comperator function returning true for the element seeked
- * @returns Index of the matched element or -1 if no element was found
- */
-function findIndexInArray(array, compareFunction) {
-    if (isNil(array)) {
-        return undefined;
-    }
-    for (let i = 0; i < array.length; i++) {
-        if (compareFunction(array[i]) === true) {
-            return i;
-        }
-    }
-    return -1;
-}
-/**
- * If points number is less than minNumPoints, show radius for all points.
- */
-function changePointRadius(chart, options) {
-    if (chart && chart.data && chart.data.datasets && options) {
-        let pointRadiusChangeFlag = false;
-        const maxNumPointsToDraw = options.maxNumPointsToDraw == null ? 100 : options.maxNumPointsToDraw;
-        for (const dataset of chart.data.datasets) {
-            if (dataset.data.length < maxNumPointsToDraw) {
-                pointRadiusChangeFlag = true;
-                break;
-            }
-        }
-        chart.options.elements.point.radius = pointRadiusChangeFlag ? 2 : 0;
-    }
-}
-
-/**
- * A mipmap data structure for line chart data. Uses averages to downsample data.
- */
-class DataMipmap {
-    /**
-     * Create a data mipmap
-     * @param data The orignal line chart data
-     * @param minNumPoints Minimal number of points on lowest mipmap level(limits number of levels)
-     */
-    constructor(data, minNumPoints = 2) {
-        this.minNumPoints = minNumPoints;
-        this.setData(data);
-    }
-    /**
-     * Set the line chart data and update mipmap level.
-     * @param data The orignal line chart data
-     */
-    setData(data) {
-        this.originalData = data || [];
-        this.mipMaps = [];
-        this.resolution = this.computeResolution(this.originalData);
-        this.createMipMap();
-    }
-    /**
-     * Set the minimal number of points
-     * @param minNumPoints Minimal number of points on lowest mipmap level(limits number of levels)
-     */
-    setMinNumPoints(minNumPoints) {
-        this.minNumPoints = minNumPoints;
-        this.mipMaps = [];
-        this.createMipMap();
-    }
-    /**
-     * Get the best fitting mipmap level for a certain scale resolution
-     * @param resolution Desired resolution in ms per pixel
-     */
-    getMipMapForResolution(resolution) {
-        return this.getMipMapLevel(this.getMipMapIndexForResolution(resolution));
-    }
-    /**
-     * Computes the index of the best fitting mipmap level for a certain scale resolution
-     * @param resolution Desired resolution in ms per pixel
-     */
-    getMipMapIndexForResolution(resolution) {
-        if (isNil(resolution)) {
-            return 0;
-        }
-        const factor = resolution / this.resolution;
-        return clamp(Math.floor(Math.log(factor) / Math.log(2.0)), 0, this.mipMaps.length - 1);
-    }
-    /**
-     * Get a mipmap level by index
-     * @param level The index of the mipmap level
-     */
-    getMipMapLevel(level) {
-        return this.mipMaps[level];
-    }
-    /**
-     * Get all mipmap level
-     */
-    getMipMaps() {
-        return this.mipMaps;
-    }
-    /**
-     * Get the number of available mipmap level
-     */
-    getNumLevel() {
-        return this.mipMaps.length;
-    }
-    computeResolution(data) {
-        let minTimeDistance = Infinity;
-        for (let i = 0, end = this.originalData.length - 1; i < end; ++i) {
-            const current = this.originalData[i];
-            const next = this.originalData[i + 1];
-            minTimeDistance = Math.min(Math.abs(this.getTime(current) - this.getTime(next)), minTimeDistance);
-        }
-        return minTimeDistance;
-    }
-    createMipMap() {
-        let targetResolution = this.resolution;
-        let targetLength = this.originalData.length;
-        this.mipMaps.push(this.originalData);
-        let lastMipMap = this.originalData;
-        while (lastMipMap.length > this.minNumPoints) {
-            targetResolution = targetResolution * 2;
-            targetLength = Math.floor(targetLength * 0.5);
-            lastMipMap = this.downsampleToResolution(lastMipMap, targetResolution, targetLength);
-            this.mipMaps.push(lastMipMap);
-        }
-    }
-    downsampleToResolution(data, targetResolution, targetLength) {
-        const output = [];
-        let aggregationValues = [];
-        let firstPoint = data[0];
-        aggregationValues.push(firstPoint);
-        for (let i = 1, end = data.length; i < end; ++i) {
-            const currentPoint = data[i];
-            const timeDistance = Math.abs(this.getTime(firstPoint) - this.getTime(currentPoint));
-            if (timeDistance < targetResolution) {
-                aggregationValues.push(currentPoint);
-            }
-            else {
-                // create new sensor value in output
-                const newPoint = this.getAverage(aggregationValues);
-                output.push(newPoint);
-                // reset aggregation data structure
-                firstPoint = currentPoint;
-                aggregationValues = [currentPoint];
-            }
-        }
-        // insert last point
-        output.push(this.getAverage(aggregationValues));
-        return output;
-    }
-    getAverage(aggregationValues) {
-        const value = aggregationValues
-            .map(point => point.y)
-            .reduce((previous, current) => previous + current)
-            / aggregationValues.length;
-        return {
-            x: aggregationValues[0].x || aggregationValues[0].t,
-            y: value
-        };
-    }
-    getTime(point) {
-        const x = point.x || point.t;
-        if (typeof x === 'number') {
-            return x;
-        }
-        else if (typeof x === 'string') {
-            return new Date(x).getTime();
-        }
-        else {
-            return x.getTime();
-        }
-    }
-}
-
-/**
- * A mipmap data structure that uses Largest-Triangle-Three-Buckets algorithm to downsample data
- */
-class LTTBDataMipmap extends DataMipmap {
-    getMipMapIndexForResolution(resolution) {
-        if (isNil(resolution)) {
-            return 0;
-        }
-        let index = findIndexInArray(this.resolutions, (levelResolution) => levelResolution >= resolution);
-        if (index === -1) {
-            // use smallest mipmap as fallback
-            index = this.resolutions.length - 1;
-        }
-        return index;
-    }
-    createMipMap() {
-        super.createMipMap();
-        this.resolutions = this.mipMaps.map((level) => this.computeAverageResolution(level));
-    }
-    /**
-     * This method is adapted from: https://github.com/sveinn-steinarsson/flot-downsample
-     *
-     * The MIT License
-     * Copyright (c) 2013 by Sveinn Steinarsson
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-    downsampleToResolution(data, targetResolution, targetLength) {
-        const dataLength = data.length;
-        if (targetLength >= dataLength || targetLength === 0) {
-            return data; // data has target size
-        }
-        const output = [];
-        // bucket size, leave room for start and end data points
-        const bucksetSize = (dataLength - 2) / (targetLength - 2);
-        let a = 0; // initially a is the first point in the triangle
-        let maxAreaPoint;
-        let maxArea;
-        let area;
-        let nextA;
-        // always add the first point
-        output.push(data[a]);
-        for (let i = 0; i < targetLength - 2; ++i) {
-            // Calculate point average for next bucket (containing c)
-            let avgX = 0;
-            let avgY = 0;
-            let avgRangeStart = Math.floor((i + 1) * bucksetSize) + 1;
-            let avgRangeEnd = Math.floor((i + 2) * bucksetSize) + 1;
-            avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
-            const avgRangeLength = avgRangeEnd - avgRangeStart;
-            for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
-                avgX += this.getTime(data[avgRangeStart]);
-                avgY += data[avgRangeStart].y * 1;
-            }
-            avgX /= avgRangeLength;
-            avgY /= avgRangeLength;
-            // Get the range for this bucket
-            let rangeOffs = Math.floor((i + 0) * bucksetSize) + 1;
-            const rangeTo = Math.floor((i + 1) * bucksetSize) + 1;
-            // Point a
-            const pointA = data[a];
-            const pointAX = this.getTime(pointA);
-            const pointAY = pointA.y * 1;
-            maxArea = area = -1;
-            for (; rangeOffs < rangeTo; rangeOffs++) {
-                // Calculate triangle area over three buckets
-                area = Math.abs((pointAX - avgX) * (data[rangeOffs].y - pointAY) -
-                    (pointAX - this.getTime(data[rangeOffs])) * (avgY - pointAY)) * 0.5;
-                if (area > maxArea) {
-                    maxArea = area;
-                    maxAreaPoint = data[rangeOffs];
-                    nextA = rangeOffs; // Next a is this b
-                }
-            }
-            output.push(maxAreaPoint); // Pick this point from the bucket
-            a = nextA; // This a is the next a (chosen b)
-        }
-        output.push(data[dataLength - 1]); // Always add last
-        return output;
-    }
-    computeAverageResolution(data) {
-        let timeDistances = 0;
-        for (let i = 0, end = this.originalData.length - 1; i < end; ++i) {
-            const current = this.originalData[i];
-            const next = this.originalData[i + 1];
-            timeDistances += Math.abs(this.getTime(current) - this.getTime(next));
-        }
-        return timeDistances / (data.length - 1);
-    }
-}
-
-function getCompareValue(value) {
-    if (typeof value === 'number') {
-        return value;
-    }
-    else if (typeof value === 'string') {
-        return (new Date(value)).getTime();
-    }
-    else if (value instanceof Date) {
-        return value.getTime();
-    }
-    else {
-        return moment$1(value).toDate().getTime();
-    }
-}
-function rangeIsEqual(previousValue, currentValue) {
-    if (isNil(previousValue) ||
-        isNil(currentValue) ||
-        isNil(previousValue[0]) ||
-        isNil(previousValue[1]) ||
-        isNil(currentValue[0]) ||
-        isNil(currentValue[1])) {
-        return false;
-    }
-    previousValue = [getCompareValue(previousValue[0]), getCompareValue(previousValue[1])];
-    currentValue = [getCompareValue(currentValue[0]), getCompareValue(currentValue[1])];
-    return previousValue[0] === currentValue[0] && previousValue[1] === currentValue[1];
-}
-function getScaleRange(scale) {
-    if (isNil(scale)) {
-        return [null, null];
-    }
-    const start = scale.getValueForPixel(scale.left);
-    const end = scale.getValueForPixel(scale.right);
-    return [start, end];
-}
-function cullData(data, range) {
-    const startValue = getCompareValue(range[0]);
-    const endValue = getCompareValue(range[1]);
-    let startIndex = 0;
-    let endIndex = data.length;
-    for (let i = 1; i < data.length; ++i) {
-        const point = data[i];
-        const compareValue = getCompareValue(point.x || point.t);
-        if (compareValue <= startValue) {
-            startIndex = i;
-        }
-        if (compareValue >= endValue) {
-            endIndex = i + 1;
-            break;
-        }
-    }
-    return data.slice(startIndex, endIndex);
-}
-
-/**
- * This plugin is adapted from: https://github.com/3dcl/chartjs-plugin-responsive-downsample
- * for controlling the radius of point.
- *
- * MIT License
- * Copyright (c) 2018 3D Content Logistics
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// Using dynamic flag to fix the issue of ng-packagr #696: Lambda not supported
-// @dynamic
-/**
- * Chart js Plugin for downsampling data
- */
-class ResponsiveDownsamplePlugin {
-    static getPluginOptions(chart) {
-        const options = chart.options.responsiveDownsample || {};
-        defaultsDeep(options, {
-            enabled: false,
-            aggregationAlgorithm: 'LTTB',
-            desiredDataPointDistance: 1,
-            minNumPoints: 100,
-            maxNumPointsToDraw: 100,
-            cullData: true
-        });
-        if (options.enabled) {
-            chart.options.responsiveDownsample = options;
-        }
-        return options;
-    }
-    static hasDataChanged(chart) {
-        return !isNil(findInArray(chart.data.datasets, (dataset) => {
-            return isNil(dataset.mipMap);
-        }));
-    }
-    static createDataMipMap(chart, options) {
-        chart.data.datasets.forEach((dataset) => {
-            // @ts-ignore
-            const data = !isNil(dataset.originalData) ? dataset.originalData : dataset.data;
-            const mipMap = (options.aggregationAlgorithm === 'LTTB')
-                ? new LTTBDataMipmap(data, options.minNumPoints)
-                : new DataMipmap(data, options.minNumPoints);
-            dataset.originalData = data;
-            dataset.mipMap = mipMap;
-            // @ts-ignore
-            dataset.data = mipMap.getMipMapLevel(mipMap.getNumLevel() - 1); // set last level for first render pass
-        });
-    }
-    static restoreOriginalData(chart) {
-        let updated = false;
-        chart.data.datasets.forEach((dataset) => {
-            // @ts-ignore
-            if (!isNil(dataset.originalData) && dataset.data !== dataset.originalData) {
-                // @ts-ignore
-                dataset.data = dataset.originalData;
-                updated = true;
-            }
-        });
-        return updated;
-    }
-    static getTargetResolution(chart, options) {
-        const xScale = chart.scales['x-axis-0'];
-        if (isNil(xScale)) {
-            return null;
-        }
-        const start = moment$1(xScale.getValueForPixel(xScale.left));
-        const end = moment$1(xScale.getValueForPixel(xScale.left + 1));
-        const targetResolution = end.diff(start);
-        return targetResolution * options.desiredDataPointDistance;
-    }
-    static updateMipMap(chart, options, rangeChanged) {
-        let updated = false;
-        chart.data.datasets.forEach((dataset) => {
-            const mipMap = dataset.mipMap;
-            if (isNil(mipMap)) {
-                return;
-            }
-            const mipMalLevel = mipMap.getMipMapIndexForResolution(options.targetResolution);
-            if (mipMalLevel === dataset.currentMipMapLevel && !rangeChanged) {
-                // skip update if mip map level and data range did not change
-                return;
-            }
-            updated = true;
-            dataset.currentMipMapLevel = mipMalLevel;
-            let newData = mipMap.getMipMapLevel(mipMalLevel);
-            if (options.cullData) {
-                newData = cullData(newData, options.scaleRange);
-            }
-            // @ts-ignore
-            dataset.data = newData;
-        });
-        return updated;
-    }
-    beforeInit(chart) {
-        const options = ResponsiveDownsamplePlugin.getPluginOptions(chart);
-        if (!options.enabled) {
-            return;
-        }
-        ResponsiveDownsamplePlugin.createDataMipMap(chart, options);
-        options.needsUpdate = true;
-    }
-    beforeDatasetsUpdate(chart) {
-        const options = ResponsiveDownsamplePlugin.getPluginOptions(chart);
-        if (!options.enabled) {
-            // restore original data and remove state from options
-            options.needsUpdate = ResponsiveDownsamplePlugin.restoreOriginalData(chart);
-            delete options.targetResolution;
-            delete options.scaleRange;
-            return;
-        }
-        // only update mip map if data set was reloaded externally
-        if (ResponsiveDownsamplePlugin.hasDataChanged(chart)) {
-            ResponsiveDownsamplePlugin.createDataMipMap(chart, options);
-            options.needsUpdate = true;
-        }
-    }
-    beforeRender(chart) {
-        const options = ResponsiveDownsamplePlugin.getPluginOptions(chart);
-        if (!options.enabled) {
-            // update chart if data was restored from original data
-            if (options.needsUpdate) {
-                options.needsUpdate = false;
-                chart.update(0);
-                return false;
-            }
-            return true;
-        }
-        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;
-            }
-        }
-        return true;
-    }
-}
-
-/**
- * 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.
- */
-/*jslint browser:true, devel:true, white:true, vars:true */
-/*global require*/
-// hammer JS for touch support
-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);
-
 class FileDropInputComponent {
     constructor() {
         this.dropAreaText = '';