highcharts 10.2.1 → 10.3.1

package/es-modules/{Core → Stock/Navigator}/Navigator.js

@@ -8,27 +8,28 @@
  *
  * */
 'use strict';
-import Axis from './Axis/Axis.js';
-import Chart from './Chart/Chart.js';
-import Color from './Color/Color.js';
-var color = Color.parse;
-import H from './Globals.js';
-var hasTouch = H.hasTouch, isTouchDevice = H.isTouchDevice;
-import NavigatorAxis from './Axis/NavigatorAxis.js';
-import D from './DefaultOptions.js';
+import Axis from '../../Core/Axis/Axis.js';
+import D from '../../Core/Defaults.js';
 var defaultOptions = D.defaultOptions;
-import RendererRegistry from './Renderer/RendererRegistry.js';
-import Scrollbar from './Scrollbar.js';
-import Series from './Series/Series.js';
-import SeriesRegistry from './Series/SeriesRegistry.js';
-var seriesTypes = SeriesRegistry.seriesTypes;
-import U from './Utilities.js';
+import H from '../../Core/Globals.js';
+var hasTouch = H.hasTouch, isTouchDevice = H.isTouchDevice;
+import NavigatorAxisAdditions from '../../Core/Axis/NavigatorAxisComposition.js';
+import NavigatorComposition from './NavigatorComposition.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
+import U from '../../Core/Utilities.js';
 var addEvent = U.addEvent, clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, extend = U.extend, find = U.find, isArray = U.isArray, isNumber = U.isNumber, merge = U.merge, pick = U.pick, removeEvent = U.removeEvent, splat = U.splat;
-var defaultSeriesType, 
-// Finding the min or max of a set of variables where we don't know if they
-// are defined, is a pattern that is repeated several places in Highcharts.
-// Consider making this a global utility method.
-numExt = function (extreme) {
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Finding the min or max of a set of variables where we don't know if they are
+ * defined, is a pattern that is repeated several places in Highcharts. Consider
+ * making this a global utility method.
+ * @private
+ */
+function numExt(extreme) {
     var args = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];
@@ -37,497 +38,12 @@ numExt = function (extreme) {
     if (numbers.length) {
         return Math[extreme].apply(0, numbers);
     }
-};
-defaultSeriesType = typeof seriesTypes.areaspline === 'undefined' ?
-    'line' :
-    'areaspline';
-extend(defaultOptions, {
-    /**
-     * Maximum range which can be set using the navigator's handles.
-     * Opposite of [xAxis.minRange](#xAxis.minRange).
-     *
-     * @sample {highstock} stock/navigator/maxrange/
-     *         Defined max and min range
-     *
-     * @type      {number}
-     * @since     6.0.0
-     * @product   highstock gantt
-     * @apioption xAxis.maxRange
-     */
-    /**
-     * The navigator is a small series below the main series, displaying
-     * a view of the entire data set. It provides tools to zoom in and
-     * out on parts of the data as well as panning across the dataset.
-     *
-     * @product      highstock gantt
-     * @optionparent navigator
-     */
-    navigator: {
-        /**
-         * Whether the navigator and scrollbar should adapt to updated data
-         * in the base X axis. When loading data async, as in the demo below,
-         * this should be `false`. Otherwise new data will trigger navigator
-         * redraw, which will cause unwanted looping. In the demo below, the
-         * data in the navigator is set only once. On navigating, only the main
-         * chart content is updated.
-         *
-         * @sample {highstock} stock/demo/lazy-loading/
-         *         Set to false with async data loading
-         *
-         * @type      {boolean}
-         * @default   true
-         * @apioption navigator.adaptToUpdatedData
-         */
-        /**
-         * An integer identifying the index to use for the base series, or a
-         * string representing the id of the series.
-         *
-         * **Note**: As of Highcharts 5.0, this is now a deprecated option.
-         * Prefer [series.showInNavigator](#plotOptions.series.showInNavigator).
-         *
-         * @see [series.showInNavigator](#plotOptions.series.showInNavigator)
-         *
-         * @deprecated
-         * @type      {number|string}
-         * @default   0
-         * @apioption navigator.baseSeries
-         */
-        /**
-         * Enable or disable the navigator.
-         *
-         * @sample {highstock} stock/navigator/enabled/
-         *         Disable the navigator
-         *
-         * @type      {boolean}
-         * @default   true
-         * @apioption navigator.enabled
-         */
-        /**
-         * When the chart is inverted, whether to draw the navigator on the
-         * opposite side.
-         *
-         * @type      {boolean}
-         * @default   false
-         * @since     5.0.8
-         * @apioption navigator.opposite
-         */
-        /**
-         * The height of the navigator.
-         *
-         * @sample {highstock} stock/navigator/height/
-         *         A higher navigator
-         */
-        height: 40,
-        /**
-         * The distance from the nearest element, the X axis or X axis labels.
-         *
-         * @sample {highstock} stock/navigator/margin/
-         *         A margin of 2 draws the navigator closer to the X axis labels
-         */
-        margin: 25,
-        /**
-         * Whether the mask should be inside the range marking the zoomed
-         * range, or outside. In Highcharts Stock 1.x it was always `false`.
-         *
-         * @sample {highstock} stock/navigator/maskinside-false/
-         *         False, mask outside
-         *
-         * @since   2.0
-         */
-        maskInside: true,
-        /**
-         * Options for the handles for dragging the zoomed area.
-         *
-         * @sample {highstock} stock/navigator/handles/
-         *         Colored handles
-         */
-        handles: {
-            /**
-             * Width for handles.
-             *
-             * @sample {highstock} stock/navigator/styled-handles/
-             *         Styled handles
-             *
-             * @since   6.0.0
-             */
-            width: 7,
-            /**
-             * Height for handles.
-             *
-             * @sample {highstock} stock/navigator/styled-handles/
-             *         Styled handles
-             *
-             * @since   6.0.0
-             */
-            height: 15,
-            /**
-             * Array to define shapes of handles. 0-index for left, 1-index for
-             * right.
-             *
-             * Additionally, the URL to a graphic can be given on this form:
-             * `url(graphic.png)`. Note that for the image to be applied to
-             * exported charts, its URL needs to be accessible by the export
-             * server.
-             *
-             * Custom callbacks for symbol path generation can also be added to
-             * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
-             * used by its method name, as shown in the demo.
-             *
-             * @sample {highstock} stock/navigator/styled-handles/
-             *         Styled handles
-             *
-             * @type    {Array<string>}
-             * @default ["navigator-handle", "navigator-handle"]
-             * @since   6.0.0
-             */
-            symbols: ['navigator-handle', 'navigator-handle'],
-            /**
-             * Allows to enable/disable handles.
-             *
-             * @since   6.0.0
-             */
-            enabled: true,
-            /**
-             * The width for the handle border and the stripes inside.
-             *
-             * @sample {highstock} stock/navigator/styled-handles/
-             *         Styled handles
-             *
-             * @since     6.0.0
-             * @apioption navigator.handles.lineWidth
-             */
-            lineWidth: 1,
-            /**
-             * The fill for the handle.
-             *
-             * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-             */
-            backgroundColor: "#f2f2f2" /* Palette.neutralColor5 */,
-            /**
-             * The stroke for the handle border and the stripes inside.
-             *
-             * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-             */
-            borderColor: "#999999" /* Palette.neutralColor40 */
-        },
-        /**
-         * The color of the mask covering the areas of the navigator series
-         * that are currently not visible in the main series. The default
-         * color is bluish with an opacity of 0.3 to see the series below.
-         *
-         * @see In styled mode, the mask is styled with the
-         *      `.highcharts-navigator-mask` and
-         *      `.highcharts-navigator-mask-inside` classes.
-         *
-         * @sample {highstock} stock/navigator/maskfill/
-         *         Blue, semi transparent mask
-         *
-         * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-         * @default rgba(102,133,194,0.3)
-         */
-        maskFill: color("#6685c2" /* Palette.highlightColor60 */).setOpacity(0.3).get(),
-        /**
-         * The color of the line marking the currently zoomed area in the
-         * navigator.
-         *
-         * @sample {highstock} stock/navigator/outline/
-         *         2px blue outline
-         *
-         * @type    {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-         * @default #cccccc
-         */
-        outlineColor: "#cccccc" /* Palette.neutralColor20 */,
-        /**
-         * The width of the line marking the currently zoomed area in the
-         * navigator.
-         *
-         * @see In styled mode, the outline stroke width is set with the
-         *      `.highcharts-navigator-outline` class.
-         *
-         * @sample {highstock} stock/navigator/outline/
-         *         2px blue outline
-         *
-         * @type    {number}
-         */
-        outlineWidth: 1,
-        /**
-         * Options for the navigator series. Available options are the same
-         * as any series, documented at [plotOptions](#plotOptions.series)
-         * and [series](#series).
-         *
-         * Unless data is explicitly defined on navigator.series, the data
-         * is borrowed from the first series in the chart.
-         *
-         * Default series options for the navigator series are:
-         * ```js
-         * series: {
-         *     type: 'areaspline',
-         *     fillOpacity: 0.05,
-         *     dataGrouping: {
-         *         smoothed: true
-         *     },
-         *     lineWidth: 1,
-         *     marker: {
-         *         enabled: false
-         *     }
-         * }
-         * ```
-         *
-         * @see In styled mode, the navigator series is styled with the
-         *      `.highcharts-navigator-series` class.
-         *
-         * @sample {highstock} stock/navigator/series-data/
-         *         Using a separate data set for the navigator
-         * @sample {highstock} stock/navigator/series/
-         *         A green navigator series
-         *
-         * @type {*|Array<*>|Highcharts.SeriesOptionsType|Array<Highcharts.SeriesOptionsType>}
-         */
-        series: {
-            /**
-             * The type of the navigator series.
-             *
-             * Heads up:
-             * In column-type navigator, zooming is limited to at least one
-             * point with its `pointRange`.
-             *
-             * @sample {highstock} stock/navigator/column/
-             *         Column type navigator
-             *
-             * @type    {string}
-             * @default {highstock} `areaspline` if defined, otherwise `line`
-             * @default {gantt} gantt
-             */
-            type: defaultSeriesType,
-            /**
-             * The fill opacity of the navigator series.
-             */
-            fillOpacity: 0.05,
-            /**
-             * The pixel line width of the navigator series.
-             */
-            lineWidth: 1,
-            /**
-             * @ignore-option
-             */
-            compare: null,
-            /**
-             * Unless data is explicitly defined, the data is borrowed from the
-             * first series in the chart.
-             *
-             * @type      {Array<number|Array<number|string|null>|object|null>}
-             * @product   highstock
-             * @apioption navigator.series.data
-             */
-            /**
-             * Data grouping options for the navigator series.
-             *
-             * @extends plotOptions.series.dataGrouping
-             */
-            dataGrouping: {
-                approximation: 'average',
-                enabled: true,
-                groupPixelWidth: 2,
-                // Replace smoothed property by anchors, #12455.
-                firstAnchor: 'firstPoint',
-                anchor: 'middle',
-                lastAnchor: 'lastPoint',
-                // Day and week differs from plotOptions.series.dataGrouping
-                units: [
-                    ['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
-                    ['second', [1, 2, 5, 10, 15, 30]],
-                    ['minute', [1, 2, 5, 10, 15, 30]],
-                    ['hour', [1, 2, 3, 4, 6, 8, 12]],
-                    ['day', [1, 2, 3, 4]],
-                    ['week', [1, 2, 3]],
-                    ['month', [1, 3, 6]],
-                    ['year', null]
-                ]
-            },
-            /**
-             * Data label options for the navigator series. Data labels are
-             * disabled by default on the navigator series.
-             *
-             * @extends plotOptions.series.dataLabels
-             */
-            dataLabels: {
-                enabled: false,
-                zIndex: 2 // #1839
-            },
-            id: 'highcharts-navigator-series',
-            className: 'highcharts-navigator-series',
-            /**
-             * Sets the fill color of the navigator series.
-             *
-             * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
-             * @apioption navigator.series.color
-             */
-            /**
-             * Line color for the navigator series. Allows setting the color
-             * while disallowing the default candlestick setting.
-             *
-             * @type {Highcharts.ColorString|null}
-             */
-            lineColor: null,
-            marker: {
-                enabled: false
-            },
-            /**
-             * Since Highcharts Stock v8, default value is the same as default
-             * `pointRange` defined for a specific type (e.g. `null` for
-             * column type).
-             *
-             * In Highcharts Stock version < 8, defaults to 0.
-             *
-             * @extends plotOptions.series.pointRange
-             * @type {number|null}
-             * @apioption navigator.series.pointRange
-             */
-            /**
-             * The threshold option. Setting it to 0 will make the default
-             * navigator area series draw its area from the 0 value and up.
-             *
-             * @type {number|null}
-             */
-            threshold: null
-        },
-        /**
-         * Enable or disable navigator sticking to right, while adding new
-         * points. If `undefined`, the navigator sticks to the axis maximum only
-         * if it was already at the maximum prior to adding points.
-         *
-         * @type      {boolean}
-         * @default   undefined
-         * @since 10.2.1
-         * @sample {highstock} stock/navigator/sticktomax-false/
-         * stickToMax set to false
-         * @apioption navigator.stickToMax
-         */
-        /**
-         * Options for the navigator X axis. Default series options for the
-         * navigator xAxis are:
-         * ```js
-         * xAxis: {
-         *     tickWidth: 0,
-         *     lineWidth: 0,
-         *     gridLineWidth: 1,
-         *     tickPixelInterval: 200,
-         *     labels: {
-         *            align: 'left',
-         *         style: {
-         *             color: '#888'
-         *         },
-         *         x: 3,
-         *         y: -4
-         *     }
-         * }
-         * ```
-         *
-         * @extends   xAxis
-         * @excluding linkedTo, maxZoom, minRange, opposite, range, scrollbar,
-         *            showEmpty, maxRange
-         */
-        xAxis: {
-            /**
-             * Additional range on the right side of the xAxis. Works similar to
-             * xAxis.maxPadding, but value is set in milliseconds.
-             * Can be set for both, main xAxis and navigator's xAxis.
-             *
-             * @since   6.0.0
-             */
-            overscroll: 0,
-            className: 'highcharts-navigator-xaxis',
-            tickLength: 0,
-            lineWidth: 0,
-            gridLineColor: "#e6e6e6" /* Palette.neutralColor10 */,
-            gridLineWidth: 1,
-            tickPixelInterval: 200,
-            labels: {
-                align: 'left',
-                /**
-                 * @type {Highcharts.CSSObject}
-                 */
-                style: {
-                    /** @ignore */
-                    color: "#999999" /* Palette.neutralColor40 */
-                },
-                x: 3,
-                y: -4
-            },
-            crosshair: false
-        },
-        /**
-         * Options for the navigator Y axis. Default series options for the
-         * navigator yAxis are:
-         * ```js
-         * yAxis: {
-         *     gridLineWidth: 0,
-         *     startOnTick: false,
-         *     endOnTick: false,
-         *     minPadding: 0.1,
-         *     maxPadding: 0.1,
-         *     labels: {
-         *         enabled: false
-         *     },
-         *     title: {
-         *         text: null
-         *     },
-         *     tickWidth: 0
-         * }
-         * ```
-         *
-         * @extends   yAxis
-         * @excluding height, linkedTo, maxZoom, minRange, ordinal, range,
-         *            showEmpty, scrollbar, top, units, maxRange, minLength,
-         *            maxLength, resize
-         */
-        yAxis: {
-            className: 'highcharts-navigator-yaxis',
-            gridLineWidth: 0,
-            startOnTick: false,
-            endOnTick: false,
-            minPadding: 0.1,
-            maxPadding: 0.1,
-            labels: {
-                enabled: false
-            },
-            crosshair: false,
-            title: {
-                text: null
-            },
-            tickLength: 0,
-            tickWidth: 0
-        }
-    }
-});
-/* eslint-disable no-invalid-this, valid-jsdoc */
-/**
- * Draw one of the handles on the side of the zoomed range in the navigator
+}
+/* *
  *
- * @private
- * @function Highcharts.Renderer#symbols.navigator-handle
- * @param {number} x
- * @param {number} y
- * @param {number} w
- * @param {number} h
- * @param {Highcharts.NavigatorHandlesOptions} options
- * @return {Highcharts.SVGPathArray}
- *         Path to be used in a handle
- */
-RendererRegistry.getRendererType().prototype.symbols['navigator-handle'] = function (_x, _y, _w, _h, options) {
-    var halfWidth = (options && options.width || 0) / 2, markerPosition = Math.round(halfWidth / 3) + 0.5, height = options && options.height || 0;
-    return [
-        ['M', -halfWidth - 1, 0.5],
-        ['L', halfWidth, 0.5],
-        ['L', halfWidth, height + 0.5],
-        ['L', -halfWidth - 1, height + 0.5],
-        ['L', -halfWidth - 1, 0.5],
-        ['M', -markerPosition, 4],
-        ['L', -markerPosition, height - 3],
-        ['M', markerPosition - 1, 4],
-        ['L', markerPosition - 1, height - 3]
-    ];
-};
+ *  Class
+ *
+ * */
 /**
  * The Navigator class
  *
@@ -539,7 +55,17 @@ RendererRegistry.getRendererType().prototype.symbols['navigator-handle'] = funct
  *        Chart object
  */
 var Navigator = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
     function Navigator(chart) {
+        /* *
+         *
+         *  Properties
+         *
+         * */
         this.baseSeries = void 0;
         this.chart = void 0;
         this.handles = void 0;
@@ -564,8 +90,21 @@ var Navigator = /** @class */ (function () {
         this.zoomedMin = void 0;
         this.init(chart);
     }
+    /* *
+     *
+     *  Static Functions
+     *
+     * */
+    Navigator.compose = function (AxisClass, ChartClass, SeriesClass) {
+        NavigatorComposition.compose(AxisClass, ChartClass, Navigator, SeriesClass);
+    };
+    /* *
+     *
+     *  Functions
+     *
+     * */
     /**
-     * Draw one of the handles on the side of the zoomed range in the navigator
+     * Draw one of the handles on the side of the zoomed range in the navigator.
      *
      * @private
      * @function Highcharts.Navigator#drawHandle
@@ -577,10 +116,10 @@ var Navigator = /** @class */ (function () {
      *        0 for left and 1 for right
      *
      * @param {boolean|undefined} inverted
-     *        flag for chart.inverted
+     *        Flag for chart.inverted
      *
      * @param {string} verb
-     *        use 'animate' or 'attr'
+     *        Use 'animate' or 'attr'
      */
     Navigator.prototype.drawHandle = function (x, index, inverted, verb) {
         var navigator = this, height = navigator.navigatorOptions.handles.height;
@@ -613,7 +152,8 @@ var Navigator = /** @class */ (function () {
      */
     Navigator.prototype.drawOutline = function (zoomedMin, zoomedMax, inverted, verb) {
         var navigator = this, maskInside = navigator.navigatorOptions.maskInside, outlineWidth = navigator.outline.strokeWidth(), halfOutline = outlineWidth / 2, outlineCorrection = (outlineWidth % 2) / 2, // #5800
-        outlineHeight = navigator.outlineHeight, scrollbarHeight = navigator.scrollbarHeight || 0, navigatorSize = navigator.size, left = navigator.left - scrollbarHeight, navigatorTop = navigator.top, verticalMin, path;
+        outlineHeight = navigator.outlineHeight, scrollbarHeight = navigator.scrollbarHeight || 0, navigatorSize = navigator.size;
+        var left = navigator.left - scrollbarHeight, navigatorTop = navigator.top, verticalMin, path;
         if (inverted) {
             left -= halfOutline;
             verticalMin = navigatorTop + zoomedMax + outlineCorrection;
@@ -696,7 +236,8 @@ var Navigator = /** @class */ (function () {
      *        use 'animate' or 'attr'
      */
     Navigator.prototype.drawMasks = function (zoomedMin, zoomedMax, inverted, verb) {
-        var navigator = this, left = navigator.left, top = navigator.top, navigatorHeight = navigator.height, height, width, x, y;
+        var navigator = this, left = navigator.left, top = navigator.top, navigatorHeight = navigator.height;
+        var height, width, x, y;
         // Determine rectangle position & size
         // According to (non)inverted position:
         if (inverted) {
@@ -743,11 +284,12 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#renderElements
      */
     Navigator.prototype.renderElements = function () {
-        var navigator = this, navigatorOptions = navigator.navigatorOptions, maskInside = navigatorOptions.maskInside, chart = navigator.chart, inverted = chart.inverted, renderer = chart.renderer, navigatorGroup, mouseCursor = {
+        var navigator = this, navigatorOptions = navigator.navigatorOptions, maskInside = navigatorOptions.maskInside, chart = navigator.chart, inverted = chart.inverted, renderer = chart.renderer, mouseCursor = {
             cursor: inverted ? 'ns-resize' : 'ew-resize'
-        };
+        }, 
         // Create the main navigator group
-        navigator.navigatorGroup = navigatorGroup = renderer.g('navigator')
+        navigatorGroup = navigator.navigatorGroup = renderer
+            .g('navigator')
             .attr({
             zIndex: 8,
             visibility: 'hidden'
@@ -786,10 +328,11 @@ var Navigator = /** @class */ (function () {
             });
         }
         // Create the handlers:
-        if (navigatorOptions.handles.enabled) {
+        if (navigatorOptions.handles && navigatorOptions.handles.enabled) {
+            var handlesOptions_1 = navigatorOptions.handles;
             [0, 1].forEach(function (index) {
-                navigatorOptions.handles.inverted = chart.inverted;
-                navigator.handles[index] = renderer.symbol(navigatorOptions.handles.symbols[index], -navigatorOptions.handles.width / 2 - 1, 0, navigatorOptions.handles.width, navigatorOptions.handles.height, navigatorOptions.handles);
+                handlesOptions_1.inverted = !!chart.inverted;
+                navigator.handles[index] = renderer.symbol(handlesOptions_1.symbols[index], -handlesOptions_1.width / 2 - 1, 0, handlesOptions_1.width, handlesOptions_1.height, navigatorOptions.handles);
                 // zIndex = 6 for right handle, 7 for left.
                 // Can't be 10, because of the tooltip in inverted chart #2908
                 navigator.handles[index].attr({ zIndex: 7 - index })
@@ -797,12 +340,11 @@ var Navigator = /** @class */ (function () {
                     'highcharts-navigator-handle-' +
                     ['left', 'right'][index]).add(navigatorGroup);
                 if (!chart.styledMode) {
-                    var handlesOptions = navigatorOptions.handles;
                     navigator.handles[index]
                         .attr({
-                        fill: handlesOptions.backgroundColor,
-                        stroke: handlesOptions.borderColor,
-                        'stroke-width': handlesOptions.lineWidth
+                        fill: handlesOptions_1.backgroundColor,
+                        stroke: handlesOptions_1.borderColor,
+                        'stroke-width': handlesOptions_1.lineWidth
                     })
                         .css(mouseCursor);
                 }
@@ -828,7 +370,7 @@ var Navigator = /** @class */ (function () {
         // Destroy and rebuild navigator
         this.destroy();
         var chartOptions = this.chart.options;
-        merge(true, chartOptions.navigator, this.options, options);
+        merge(true, chartOptions.navigator, options);
         this.init(this.chart);
     };
     /**
@@ -846,7 +388,8 @@ var Navigator = /** @class */ (function () {
      *        Pixel value maximum
      */
     Navigator.prototype.render = function (min, max, pxMin, pxMax) {
-        var navigator = this, chart = navigator.chart, navigatorWidth, scrollbarLeft, scrollbarTop, scrollbarHeight = navigator.scrollbarHeight, navigatorSize, xAxis = navigator.xAxis, pointRange = xAxis.pointRange || 0, scrollbarXAxis = xAxis.navigatorAxis.fake ? chart.xAxis[0] : xAxis, navigatorEnabled = navigator.navigatorEnabled, zoomedMin, zoomedMax, rendered = navigator.rendered, inverted = chart.inverted, verb, newMin, newMax, currentRange, minRange = chart.xAxis[0].minRange, maxRange = chart.xAxis[0].options.maxRange;
+        var navigator = this, chart = navigator.chart, xAxis = navigator.xAxis, pointRange = xAxis.pointRange || 0, scrollbarXAxis = xAxis.navigatorAxis.fake ? chart.xAxis[0] : xAxis, navigatorEnabled = navigator.navigatorEnabled, rendered = navigator.rendered, inverted = chart.inverted, minRange = chart.xAxis[0].minRange, maxRange = chart.xAxis[0].options.maxRange;
+        var navigatorWidth, scrollbarLeft, scrollbarTop, scrollbarHeight = navigator.scrollbarHeight, navigatorSize, verb;
         // Don't redraw while moving the handles (#4703).
         if (this.hasDragged && !defined(pxMin)) {
             return;
@@ -869,7 +412,7 @@ var Navigator = /** @class */ (function () {
         // in case of scrollbar only, without navigator
         chart.plotLeft + scrollbarHeight +
             (inverted ? chart.plotWidth : 0));
-        navigator.size = zoomedMax = navigatorSize = pick(xAxis.len, (inverted ? chart.plotHeight : chart.plotWidth) -
+        var zoomedMax = navigator.size = navigatorSize = pick(xAxis.len, (inverted ? chart.plotHeight : chart.plotWidth) -
             2 * scrollbarHeight);
         if (inverted) {
             navigatorWidth = scrollbarHeight;
@@ -886,9 +429,7 @@ var Navigator = /** @class */ (function () {
             pxMax = navigatorWidth;
         }
         // Are we below the minRange? (#2618, #6191)
-        newMin = xAxis.toValue(pxMin, true);
-        newMax = xAxis.toValue(pxMax, true);
-        currentRange = Math.abs(correctFloat(newMax - newMin));
+        var newMin = xAxis.toValue(pxMin, true), newMax = xAxis.toValue(pxMax, true), currentRange = Math.abs(correctFloat(newMax - newMin));
         if (currentRange < minRange) {
             if (this.grabbedLeft) {
                 pxMin = xAxis.toPixels(newMax - minRange - pointRange, true);
@@ -913,7 +454,7 @@ var Navigator = /** @class */ (function () {
             Math.min(pxMin, pxMax), 0, zoomedMax);
         navigator.range = navigator.zoomedMax - navigator.zoomedMin;
         zoomedMax = Math.round(navigator.zoomedMax);
-        zoomedMin = Math.round(navigator.zoomedMin);
+        var zoomedMin = Math.round(navigator.zoomedMin);
         if (navigatorEnabled) {
             navigator.navigatorGroup.attr({
                 visibility: 'inherit'
@@ -961,7 +502,8 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#addMouseEvents
      */
     Navigator.prototype.addMouseEvents = function () {
-        var navigator = this, chart = navigator.chart, container = chart.container, eventsToUnbind = [], mouseMoveHandler, mouseUpHandler;
+        var navigator = this, chart = navigator.chart, container = chart.container;
+        var eventsToUnbind = [], mouseMoveHandler, mouseUpHandler;
         /**
          * Create mouse events' handlers.
          * Make them as separate functions to enable wrapping them:
@@ -1033,7 +575,8 @@ var Navigator = /** @class */ (function () {
      */
     Navigator.prototype.shadesMousedown = function (e, index) {
         e = this.chart.pointer.normalize(e);
-        var navigator = this, chart = navigator.chart, xAxis = navigator.xAxis, zoomedMin = navigator.zoomedMin, navigatorPosition = navigator.left, navigatorSize = navigator.size, range = navigator.range, chartX = e.chartX, fixedMax, fixedMin, ext, left;
+        var navigator = this, chart = navigator.chart, xAxis = navigator.xAxis, zoomedMin = navigator.zoomedMin, navigatorSize = navigator.size, range = navigator.range;
+        var navigatorPosition = navigator.left, chartX = e.chartX, fixedMax, fixedMin, ext, left;
         // For inverted chart, swap some options:
         if (chart.inverted) {
             chartX = e.chartY;
@@ -1114,7 +657,8 @@ var Navigator = /** @class */ (function () {
      *        Mouse event
      */
     Navigator.prototype.onMouseMove = function (e) {
-        var navigator = this, chart = navigator.chart, left = navigator.left, navigatorSize = navigator.navigatorSize, range = navigator.range, dragOffset = navigator.dragOffset, inverted = chart.inverted, chartX;
+        var navigator = this, chart = navigator.chart, navigatorSize = navigator.navigatorSize, range = navigator.range, dragOffset = navigator.dragOffset, inverted = chart.inverted;
+        var left = navigator.left, chartX;
         // In iOS, a mousemove event with e.pageX === 0 is fired when holding
         // the finger down in the center of the scrollbar. This should be
         // ignored.
@@ -1174,7 +718,8 @@ var Navigator = /** @class */ (function () {
      */
     Navigator.prototype.onMouseUp = function (e) {
         var navigator = this, chart = navigator.chart, xAxis = navigator.xAxis, scrollbar = navigator.scrollbar, DOMEvent = e.DOMEvent || e, inverted = chart.inverted, verb = navigator.rendered && !navigator.hasDragged ?
-            'animate' : 'attr', zoomedMax, zoomedMin, unionExtremes, fixedMin, fixedMax, ext;
+            'animate' : 'attr';
+        var zoomedMax, zoomedMin, unionExtremes, fixedMin, fixedMax, ext;
         if (
         // MouseUp is called for both, navigator and scrollbar (that order),
         // which causes calling afterSetExtremes twice. Prevent first call
@@ -1280,13 +825,9 @@ var Navigator = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Navigator#init
-     *
-     * @param {Highcharts.Chart} chart
      */
     Navigator.prototype.init = function (chart) {
-        var chartOptions = chart.options, navigatorOptions = chartOptions.navigator, navigatorEnabled = navigatorOptions.enabled, scrollbarOptions = chartOptions.scrollbar, scrollbarEnabled = scrollbarOptions.enabled, height = navigatorEnabled ? navigatorOptions.height : 0, scrollbarHeight = scrollbarEnabled ?
-            scrollbarOptions.height :
-            0;
+        var chartOptions = chart.options, navigatorOptions = chartOptions.navigator || {}, navigatorEnabled = navigatorOptions.enabled, scrollbarOptions = chartOptions.scrollbar || {}, scrollbarEnabled = scrollbarOptions.enabled, height = navigatorEnabled && navigatorOptions.height || 0, scrollbarHeight = scrollbarEnabled && scrollbarOptions.height || 0;
         this.handles = [];
         this.shades = [];
         this.chart = chart;
@@ -1386,7 +927,7 @@ var Navigator = /** @class */ (function () {
                 }
             };
             navigator.xAxis.navigatorAxis.axis = navigator.xAxis;
-            navigator.xAxis.navigatorAxis.toFixedRange = (NavigatorAxis.AdditionsClass.prototype.toFixedRange.bind(navigator.xAxis.navigatorAxis));
+            navigator.xAxis.navigatorAxis.toFixedRange = (NavigatorAxisAdditions.prototype.toFixedRange.bind(navigator.xAxis.navigatorAxis));
         }
         // Initialize the scrollbar
         if (chart.options.scrollbar.enabled) {
@@ -1418,7 +959,8 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#getUnionExtremes
      */
     Navigator.prototype.getUnionExtremes = function (returnFalseOnNoBaseSeries) {
-        var baseAxis = this.chart.xAxis[0], navAxis = this.xAxis, navAxisOptions = navAxis.options, baseAxisOptions = baseAxis.options, ret;
+        var baseAxis = this.chart.xAxis[0], navAxis = this.xAxis, navAxisOptions = navAxis.options, baseAxisOptions = baseAxis.options;
+        var ret;
         if (!returnFalseOnNoBaseSeries || baseAxis.dataMin !== null) {
             ret = {
                 dataMin: pick(// #4053
@@ -1446,9 +988,7 @@ var Navigator = /** @class */ (function () {
             chart.options && chart.options.navigator.baseSeries ||
             (chart.series.length ?
                 // Find the first non-navigator series (#8430)
-                find(chart.series, function (s) {
-                    return !s.options.isInternal;
-                }).index :
+                find(chart.series, function (s) { return (!s.options.isInternal); }).index :
                 0));
         // Iterate through series and add the ones that should be shown in
         // navigator.
@@ -1474,11 +1014,9 @@ var Navigator = /** @class */ (function () {
      *
      * @private
      * @function Highcharts.Navigator.updateNavigatorSeries
-     * @param {boolean} addEvents
-     * @param {boolean} [redraw]
      */
     Navigator.prototype.updateNavigatorSeries = function (addEvents, redraw) {
-        var navigator = this, chart = navigator.chart, baseSeries = navigator.baseSeries, baseOptions, mergedNavSeriesOptions, chartNavigatorSeriesOptions = navigator.navigatorOptions.series, baseNavigatorOptions, navSeriesMixin = {
+        var navigator = this, chart = navigator.chart, baseSeries = navigator.baseSeries, navSeriesMixin = {
             enableMouseTracking: false,
             index: null,
             linkedTo: null,
@@ -1515,10 +1053,11 @@ var Navigator = /** @class */ (function () {
                 }
                 return true;
             });
+        var baseOptions, mergedNavSeriesOptions, chartNavigatorSeriesOptions = navigator.navigatorOptions.series, baseNavigatorOptions;
         // Go through each base series and merge the options to create new
         // series
         if (baseSeries && baseSeries.length) {
-            baseSeries.forEach(function eachBaseSeries(base) {
+            baseSeries.forEach(function (base) {
                 var linkedNavSeries = base.navigatorSeries, userNavOptions = extend(
                 // Grab color and visibility from base as default
                 {
@@ -1610,6 +1149,7 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#addBaseSeriesEvent
      */
     Navigator.prototype.addBaseSeriesEvents = function () {
+        var _this = this;
         var navigator = this, baseSeries = navigator.baseSeries || [];
         // Bind modified extremes event to first base's xAxis only.
         // In event of > 1 base-xAxes, the navigator will ignore those.
@@ -1632,9 +1172,9 @@ var Navigator = /** @class */ (function () {
             }));
             // Respond to updated data in the base series, unless explicitily
             // not adapting to data changes.
-            if (this.navigatorOptions.adaptToUpdatedData !== false) {
+            if (_this.navigatorOptions.adaptToUpdatedData !== false) {
                 if (base.xAxis) {
-                    base.eventsToUnbind.push(addEvent(base, 'updatedData', this.updatedDataHandler));
+                    base.eventsToUnbind.push(addEvent(base, 'updatedData', _this.updatedDataHandler));
                 }
             }
             // Handle series removal
@@ -1647,14 +1187,15 @@ var Navigator = /** @class */ (function () {
                     delete this.navigatorSeries;
                 }
             }));
-        }, this);
+        });
     };
     /**
      * Get minimum from all base series connected to the navigator
      * @private
-     * @param  {number} currentSeriesMin
-     *         Minium from the current series
-     * @return {number} Minimum from all series
+     * @param {number} currentSeriesMin
+     *        Minium from the current series
+     * @return {number}
+     *         Minimum from all series
      */
     Navigator.prototype.getBaseSeriesMin = function (currentSeriesMin) {
         return this.baseSeries.reduce(function (min, series) {
@@ -1672,9 +1213,9 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#modifyNavigatorAxisExtremes
      */
     Navigator.prototype.modifyNavigatorAxisExtremes = function () {
-        var xAxis = this.xAxis, unionExtremes;
+        var xAxis = this.xAxis;
         if (typeof xAxis.getExtremes !== 'undefined') {
-            unionExtremes = this.getUnionExtremes(true);
+            var unionExtremes = this.getUnionExtremes(true);
             if (unionExtremes &&
                 (unionExtremes.dataMin !== xAxis.min ||
                     unionExtremes.dataMax !== xAxis.max)) {
@@ -1690,12 +1231,13 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#modifyBaseAxisExtremes
      */
     Navigator.prototype.modifyBaseAxisExtremes = function () {
-        var baseXAxis = this, navigator = baseXAxis.chart.navigator, baseExtremes = baseXAxis.getExtremes(), baseMin = baseExtremes.min, baseMax = baseExtremes.max, baseDataMin = baseExtremes.dataMin, baseDataMax = baseExtremes.dataMax, range = baseMax - baseMin, stickToMin = navigator.stickToMin, stickToMax = navigator.stickToMax, overscroll = pick(baseXAxis.options.overscroll, 0), newMax, newMin, navigatorSeries = navigator.series && navigator.series[0], hasSetExtremes = !!baseXAxis.setExtremes, 
+        var baseXAxis = this, navigator = baseXAxis.chart.navigator, baseExtremes = baseXAxis.getExtremes(), baseMin = baseExtremes.min, baseMax = baseExtremes.max, baseDataMin = baseExtremes.dataMin, baseDataMax = baseExtremes.dataMax, range = baseMax - baseMin, stickToMin = navigator.stickToMin, stickToMax = navigator.stickToMax, overscroll = pick(baseXAxis.options.overscroll, 0), navigatorSeries = navigator.series && navigator.series[0], hasSetExtremes = !!baseXAxis.setExtremes, 
         // When the extremes have been set by range selector button, don't
         // stick to min or max. The range selector buttons will handle the
         // extremes. (#5489)
         unmutable = baseXAxis.eventArgs &&
             baseXAxis.eventArgs.trigger === 'rangeSelectorButton';
+        var newMax, newMin;
         if (!unmutable) {
             // If the zoomed range is already at the min, move it to the right
             // as new data comes in
@@ -1819,6 +1361,7 @@ var Navigator = /** @class */ (function () {
      * @function Highcharts.Navigator#destroy
      */
     Navigator.prototype.destroy = function () {
+        var _this = this;
         // Disconnect events added in addEvents
         this.removeEvents();
         if (this.xAxis) {
@@ -1841,138 +1384,21 @@ var Navigator = /** @class */ (function () {
             'scrollbarRifles', 'scrollbarGroup', 'scrollbar', 'navigatorGroup',
             'rendered'
         ].forEach(function (prop) {
-            if (this[prop] && this[prop].destroy) {
-                this[prop].destroy();
+            if (_this[prop] && _this[prop].destroy) {
+                _this[prop].destroy();
             }
-            this[prop] = null;
-        }, this);
+            _this[prop] = null;
+        });
         // Destroy elements in collection
         [this.handles].forEach(function (coll) {
             destroyObjectProperties(coll);
-        }, this);
+        });
     };
     return Navigator;
 }());
-// End of prototype
-if (!H.Navigator) {
-    H.Navigator = Navigator;
-    NavigatorAxis.compose(Axis);
-    // For Stock charts. For x only zooming, do not to create the zoom button
-    // because X axis zooming is already allowed by the Navigator and Range
-    // selector. (#9285)
-    addEvent(Chart, 'beforeShowResetZoom', function () {
-        var chartOptions = this.options, navigator = chartOptions.navigator, rangeSelector = chartOptions.rangeSelector;
-        if (((navigator && navigator.enabled) ||
-            (rangeSelector && rangeSelector.enabled)) &&
-            ((!isTouchDevice &&
-                chartOptions.chart.zooming.type === 'x') ||
-                (isTouchDevice &&
-                    chartOptions.chart.zooming.pinchType === 'x'))) {
-            return false;
-        }
-    });
-    // Initialize navigator for stock charts
-    addEvent(Chart, 'beforeRender', function () {
-        var options = this.options;
-        if (options.navigator.enabled ||
-            options.scrollbar.enabled) {
-            this.scroller = this.navigator = new Navigator(this);
-        }
-    });
-    // For stock charts, extend the Chart.setChartSize method so that we can set
-    // the final top position of the navigator once the height of the chart,
-    // including the legend, is determined. #367. We can't use Chart.getMargins,
-    // because labels offsets are not calculated yet.
-    addEvent(Chart, 'afterSetChartSize', function () {
-        var legend = this.legend, navigator = this.navigator, scrollbarHeight, legendOptions, xAxis, yAxis;
-        if (navigator) {
-            legendOptions = legend && legend.options;
-            xAxis = navigator.xAxis;
-            yAxis = navigator.yAxis;
-            scrollbarHeight = navigator.scrollbarHeight;
-            // Compute the top position
-            if (this.inverted) {
-                navigator.left = navigator.opposite ?
-                    this.chartWidth - scrollbarHeight -
-                        navigator.height :
-                    this.spacing[3] + scrollbarHeight;
-                navigator.top = this.plotTop + scrollbarHeight;
-            }
-            else {
-                navigator.left = pick(xAxis.left, this.plotLeft + scrollbarHeight);
-                navigator.top = navigator.navigatorOptions.top ||
-                    this.chartHeight -
-                        navigator.height -
-                        scrollbarHeight -
-                        this.spacing[2] -
-                        (this.rangeSelector && this.extraBottomMargin ?
-                            this.rangeSelector.getHeight() :
-                            0) -
-                        ((legendOptions &&
-                            legendOptions.verticalAlign === 'bottom' &&
-                            legendOptions.layout !== 'proximate' && // #13392
-                            legendOptions.enabled &&
-                            !legendOptions.floating) ?
-                            legend.legendHeight +
-                                pick(legendOptions.margin, 10) :
-                            0) -
-                        (this.titleOffset ? this.titleOffset[2] : 0);
-            }
-            if (xAxis && yAxis) { // false if navigator is disabled (#904)
-                if (this.inverted) {
-                    xAxis.options.left = yAxis.options.left = navigator.left;
-                }
-                else {
-                    xAxis.options.top = yAxis.options.top = navigator.top;
-                }
-                xAxis.setAxisSize();
-                yAxis.setAxisSize();
-            }
-        }
-    });
-    // Merge options, if no scrolling exists yet
-    addEvent(Chart, 'update', function (e) {
-        var navigatorOptions = (e.options.navigator || {}), scrollbarOptions = (e.options.scrollbar || {});
-        if (!this.navigator && !this.scroller &&
-            (navigatorOptions.enabled || scrollbarOptions.enabled)) {
-            merge(true, this.options.navigator, navigatorOptions);
-            merge(true, this.options.scrollbar, scrollbarOptions);
-            delete e.options.navigator;
-            delete e.options.scrollbar;
-        }
-    });
-    // Initialize navigator, if no scrolling exists yet
-    addEvent(Chart, 'afterUpdate', function (event) {
-        if (!this.navigator && !this.scroller &&
-            (this.options.navigator.enabled ||
-                this.options.scrollbar.enabled)) {
-            this.scroller = this.navigator = new Navigator(this);
-            if (pick(event.redraw, true)) {
-                this.redraw(event.animation); // #7067
-            }
-        }
-    });
-    // Handle adding new series
-    addEvent(Chart, 'afterAddSeries', function () {
-        if (this.navigator) {
-            // Recompute which series should be shown in navigator, and add them
-            this.navigator.setBaseSeries(null, false);
-        }
-    });
-    // Handle updating series
-    addEvent(Series, 'afterUpdate', function () {
-        if (this.chart.navigator && !this.options.isInternal) {
-            this.chart.navigator.setBaseSeries(null, false);
-        }
-    });
-    Chart.prototype.callbacks.push(function (chart) {
-        var extremes, navigator = chart.navigator;
-        // Initialize the navigator
-        if (navigator && chart.xAxis[0]) {
-            extremes = chart.xAxis[0].getExtremes();
-            navigator.render(extremes.min, extremes.max);
-        }
-    });
-}
-H.Navigator = Navigator;
-export default H.Navigator;
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Navigator;