highcharts 11.3.0 → 11.4.0

package/es-modules/Stock/Navigator/Navigator.js

@@ -9,10 +9,11 @@
  * */
 'use strict';
 import Axis from '../../Core/Axis/Axis.js';
+import ChartNavigatorComposition from './ChartNavigatorComposition.js';
 import D from '../../Core/Defaults.js';
 const { defaultOptions } = D;
 import H from '../../Core/Globals.js';
-const { hasTouch, isTouchDevice } = H;
+const { isTouchDevice } = H;
 import NavigatorAxisAdditions from '../../Core/Axis/NavigatorAxisComposition.js';
 import NavigatorComposition from './NavigatorComposition.js';
 import Scrollbar from '../Scrollbar/Scrollbar.js';
@@ -53,11 +54,12 @@ function numExt(extreme, ...args) {
 class Navigator {
     /* *
      *
-     *  Static Functions
+     *  Static Properties
      *
      * */
-    static compose(AxisClass, ChartClass, SeriesClass) {
-        NavigatorComposition.compose(AxisClass, ChartClass, Navigator, SeriesClass);
+    static compose(ChartClass, AxisClass, SeriesClass) {
+        ChartNavigatorComposition.compose(ChartClass, Navigator);
+        NavigatorComposition.compose(ChartClass, AxisClass, SeriesClass);
     }
     /* *
      *
@@ -496,15 +498,14 @@ class Navigator {
         };
         // Add shades and handles mousedown events
         eventsToUnbind = navigator.getPartsEvents('mousedown');
-        // Add mouse move and mouseup events. These are bind to doc/container,
+        eventsToUnbind.push(
+        // Add mouse move and mouseup events. These are bind to doc/div,
         // because Navigator.grabbedSomething flags are stored in mousedown
         // events
-        eventsToUnbind.push(addEvent(chart.renderTo, 'mousemove', mouseMoveHandler), addEvent(container.ownerDocument, 'mouseup', mouseUpHandler));
+        addEvent(chart.renderTo, 'mousemove', mouseMoveHandler), addEvent(container.ownerDocument, 'mouseup', mouseUpHandler), 
         // Touch events
-        if (hasTouch) {
-            eventsToUnbind.push(addEvent(chart.renderTo, 'touchmove', mouseMoveHandler), addEvent(container.ownerDocument, 'touchend', mouseUpHandler));
-            eventsToUnbind.concat(navigator.getPartsEvents('touchstart'));
-        }
+        addEvent(chart.renderTo, 'touchmove', mouseMoveHandler), addEvent(container.ownerDocument, 'touchend', mouseUpHandler));
+        eventsToUnbind.concat(navigator.getPartsEvents('touchstart'));
         navigator.eventsToUnbind = eventsToUnbind;
         // Data events
         if (navigator.series && navigator.series[0]) {
@@ -554,7 +555,7 @@ class Navigator {
      *        Index of a mask in Navigator.shades array
      */
     shadesMousedown(e, index) {
-        e = this.chart.pointer.normalize(e);
+        e = this.chart.pointer?.normalize(e) || e;
         const navigator = this, chart = navigator.chart, xAxis = navigator.xAxis, zoomedMin = navigator.zoomedMin, navigatorSize = navigator.size, range = navigator.range;
         let navigatorPosition = navigator.left, chartX = e.chartX, fixedMax, fixedMin, ext, left;
         // For inverted chart, swap some options:
@@ -590,8 +591,14 @@ class Navigator {
                 navigator.fixedWidth = range; // #1370
                 ext = xAxis.navigatorAxis.toFixedRange(left, left + range, fixedMin, fixedMax);
                 if (defined(ext.min)) { // #7411
-                    chart.xAxis[0].setExtremes(Math.min(ext.min, ext.max), Math.max(ext.min, ext.max), true, null, // auto animation
-                    { trigger: 'navigator' });
+                    fireEvent(this, 'setRange', {
+                        min: Math.min(ext.min, ext.max),
+                        max: Math.max(ext.min, ext.max),
+                        redraw: true,
+                        eventArguments: {
+                            trigger: 'navigator'
+                        }
+                    });
                 }
             }
         }
@@ -608,7 +615,7 @@ class Navigator {
      *        Index of a handle in Navigator.handles array
      */
     handlesMousedown(e, index) {
-        e = this.chart.pointer.normalize(e);
+        e = this.chart.pointer?.normalize(e) || e;
         const navigator = this, chart = navigator.chart, baseXAxis = chart.xAxis[0], 
         // For reversed axes, min and max are changed,
         // so the other extreme should be stored
@@ -625,7 +632,7 @@ class Navigator {
             navigator.otherHandlePos = navigator.zoomedMin;
             navigator.fixedExtreme = reverse ? baseXAxis.max : baseXAxis.min;
         }
-        chart.fixedRange = null;
+        chart.setFixedRange(void 0);
     }
     /**
      * Mouse move event based on x/y mouse position.
@@ -643,7 +650,7 @@ class Navigator {
         // the finger down in the center of the scrollbar. This should be
         // ignored.
         if (!e.touches || e.touches[0].pageX !== 0) { // #4696
-            e = chart.pointer.normalize(e);
+            e = chart.pointer?.normalize(e) || e;
             chartX = e.chartX;
             // Swap some options for inverted chart
             if (inverted) {
@@ -727,13 +734,16 @@ class Navigator {
             }
             ext = xAxis.navigatorAxis.toFixedRange(navigator.zoomedMin, navigator.zoomedMax, fixedMin, fixedMax);
             if (defined(ext.min)) {
-                chart.xAxis[0].setExtremes(Math.min(ext.min, ext.max), Math.max(ext.min, ext.max), true, 
-                // Run animation when clicking buttons, scrollbar track etc,
-                // but not when dragging handles or scrollbar
-                navigator.hasDragged ? false : null, {
-                    trigger: 'navigator',
-                    triggerOp: 'navigator-drag',
-                    DOMEvent: DOMEvent // #1838
+                fireEvent(this, 'setRange', {
+                    min: Math.min(ext.min, ext.max),
+                    max: Math.max(ext.min, ext.max),
+                    redraw: true,
+                    animation: navigator.hasDragged ? false : null,
+                    eventArguments: {
+                        trigger: 'navigator',
+                        triggerOp: 'navigator-drag',
+                        DOMEvent: DOMEvent // #1838
+                    }
                 });
             }
         }
@@ -825,9 +835,10 @@ class Navigator {
         if (navigator.navigatorEnabled) {
             // an x axis is required for scrollbar also
             navigator.xAxis = new Axis(chart, merge({
-                // inherit base xAxis' break and ordinal options
+                // inherit base xAxis' break, ordinal options and overscroll
                 breaks: baseXaxis.options.breaks,
-                ordinal: baseXaxis.options.ordinal
+                ordinal: baseXaxis.options.ordinal,
+                overscroll: baseXaxis.options.overscroll
             }, navigatorOptions.xAxis, {
                 id: 'navigator-x-axis',
                 yAxis: 'navigator-y-axis',
@@ -1078,6 +1089,8 @@ class Navigator {
                 }
                 else {
                     base.navigatorSeries = chart.initSeries(mergedNavSeriesOptions);
+                    // Set data on initial run with dataSorting enabled (#20318)
+                    chart.setSortedData();
                     base.navigatorSeries.baseSeries = base; // Store ref
                     navigatorSeries.push(base.navigatorSeries);
                 }
@@ -1148,7 +1161,7 @@ class Navigator {
                     this.navigatorSeries.setVisible(false, false);
                 }
             }));
-            // Respond to updated data in the base series, unless explicitily
+            // Respond to updated data in the base series, unless explicitly
             // not adapting to data changes.
             if (this.navigatorOptions.adaptToUpdatedData !== false) {
                 if (base.xAxis) {
@@ -1209,7 +1222,7 @@ class Navigator {
      * @function Highcharts.Navigator#modifyBaseAxisExtremes
      */
     modifyBaseAxisExtremes() {
-        const 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, 
+        const 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.ordinal?.convertOverscroll(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)
@@ -1330,6 +1343,8 @@ class Navigator {
                 (chart[marginName] || 0) + (navigator.navigatorEnabled || !chart.inverted ?
                     navigator.height + navigator.scrollbarHeight :
                     0) + navigator.navigatorOptions.margin;
+        }), addEvent(Navigator, 'setRange', function (e) {
+            this.chart.xAxis[0].setExtremes(e.min, e.max, e.redraw, e.animation, e.eventArguments);
         }));
     }
     /**

package/es-modules/Stock/Navigator/NavigatorComposition.js

@@ -9,22 +9,23 @@
  * */
 'use strict';
 import D from '../../Core/Defaults.js';
-const { defaultOptions, setOptions } = D;
+const { setOptions } = D;
 import H from '../../Core/Globals.js';
-const { composed, isTouchDevice } = H;
+const { composed } = H;
 import NavigatorAxisAdditions from '../../Core/Axis/NavigatorAxisComposition.js';
 import NavigatorDefaults from './NavigatorDefaults.js';
 import NavigatorSymbols from './NavigatorSymbols.js';
 import RendererRegistry from '../../Core/Renderer/RendererRegistry.js';
 const { getRendererType } = RendererRegistry;
+import StockUtilities from '../../Stock/Utilities/StockUtilities.js';
+const { setFixedRange } = StockUtilities;
 import U from '../../Core/Utilities.js';
-const { addEvent, extend, merge, pick, pushUnique } = U;
+const { addEvent, extend, pushUnique } = U;
 /* *
  *
  *  Variables
  *
  * */
-let NavigatorConstructor;
 /* *
  *
  *  Functions
@@ -33,153 +34,13 @@ let NavigatorConstructor;
 /**
  * @private
  */
-function compose(AxisClass, ChartClass, NavigatorClass, SeriesClass) {
+function compose(ChartClass, AxisClass, SeriesClass) {
     NavigatorAxisAdditions.compose(AxisClass);
-    NavigatorConstructor = NavigatorClass;
-    if (pushUnique(composed, compose)) {
-        const chartProto = ChartClass.prototype;
-        chartProto.callbacks.push(onChartCallback);
-        addEvent(ChartClass, 'afterAddSeries', onChartAfterAddSeries);
-        addEvent(ChartClass, 'afterSetChartSize', onChartAfterSetChartSize);
-        addEvent(ChartClass, 'afterUpdate', onChartAfterUpdate);
-        addEvent(ChartClass, 'beforeRender', onChartBeforeRender);
-        addEvent(ChartClass, 'beforeShowResetZoom', onChartBeforeShowResetZoom);
-        addEvent(ChartClass, 'update', onChartUpdate);
-        addEvent(SeriesClass, 'afterUpdate', onSeriesAfterUpdate);
+    if (pushUnique(composed, 'Navigator')) {
+        ChartClass.prototype.setFixedRange = setFixedRange;
         extend(getRendererType().prototype.symbols, NavigatorSymbols);
-        extend(defaultOptions, { navigator: NavigatorDefaults });
-    }
-}
-/**
- * Handle adding new series.
- * @private
- */
-function onChartAfterAddSeries() {
-    if (this.navigator) {
-        // Recompute which series should be shown in navigator, and add them
-        this.navigator.setBaseSeries(null, false);
-    }
-}
-/**
- * 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.
- * @private
- */
-function onChartAfterSetChartSize() {
-    const legend = this.legend, navigator = this.navigator;
-    let legendOptions, xAxis, yAxis;
-    if (navigator) {
-        legendOptions = legend && legend.options;
-        xAxis = navigator.xAxis;
-        yAxis = navigator.yAxis;
-        const { scrollbarHeight, scrollButtonSize } = navigator;
-        // Compute the top position
-        if (this.inverted) {
-            navigator.left = navigator.opposite ?
-                this.chartWidth - scrollbarHeight -
-                    navigator.height :
-                this.spacing[3] + scrollbarHeight;
-            navigator.top = this.plotTop + scrollButtonSize;
-        }
-        else {
-            navigator.left = pick(xAxis.left, this.plotLeft + scrollButtonSize);
-            navigator.top = navigator.navigatorOptions.top ||
-                this.chartHeight -
-                    navigator.height -
-                    scrollbarHeight -
-                    (this.scrollbar?.options.margin || 0) -
-                    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();
-        }
-    }
-}
-/**
- * Initialize navigator, if no scrolling exists yet.
- * @private
- */
-function onChartAfterUpdate(event) {
-    if (!this.navigator && !this.scroller &&
-        (this.options.navigator.enabled ||
-            this.options.scrollbar.enabled)) {
-        this.scroller = this.navigator = new NavigatorConstructor(this);
-        if (pick(event.redraw, true)) {
-            this.redraw(event.animation); // #7067
-        }
-    }
-}
-/**
- * Initialize navigator for stock charts
- * @private
- */
-function onChartBeforeRender() {
-    const options = this.options;
-    if (options.navigator.enabled ||
-        options.scrollbar.enabled) {
-        this.scroller = this.navigator = new NavigatorConstructor(this);
-    }
-}
-/**
- * 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)
- * @private
- */
-function onChartBeforeShowResetZoom() {
-    const chartOptions = this.options, navigator = chartOptions.navigator, rangeSelector = chartOptions.rangeSelector;
-    if (((navigator && navigator.enabled) ||
-        (rangeSelector && rangeSelector.enabled)) &&
-        ((!isTouchDevice &&
-            this.zooming.type === 'x') ||
-            (isTouchDevice && this.zooming.pinchType === 'x'))) {
-        return false;
-    }
-}
-/**
- * @private
- */
-function onChartCallback(chart) {
-    const navigator = chart.navigator;
-    // Initialize the navigator
-    if (navigator && chart.xAxis[0]) {
-        const extremes = chart.xAxis[0].getExtremes();
-        navigator.render(extremes.min, extremes.max);
-    }
-}
-/**
- * Merge options, if no scrolling exists yet
- * @private
- */
-function onChartUpdate(e) {
-    const 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;
+        addEvent(SeriesClass, 'afterUpdate', onSeriesAfterUpdate);
+        setOptions({ navigator: NavigatorDefaults });
     }
 }
 /**

package/es-modules/Stock/Navigator/NavigatorDefaults.js

@@ -401,12 +401,26 @@ const NavigatorDefaults = {
     xAxis: {
         /**
          * Additional range on the right side of the xAxis. Works similar to
-         * xAxis.maxPadding, but value is set in milliseconds.
+         * `xAxis.maxPadding`, but the value is set in terms of axis values,
+         * percentage or pixels.
+         *
+         * If it's a number, it is interpreted as axis values, which in a
+         * datetime axis equals milliseconds.
+         *
+         * If it's a percentage string, is interpreted as percentages of the
+         * axis length. An overscroll of 50% will make a 100px axis 50px longer.
+         *
+         * If it's a pixel string, it is interpreted as a fixed pixel value, but
+         * limited to 90% of the axis length.
+         *
+         * If it's undefined, the value is inherited from `xAxis.overscroll`.
+         *
          * Can be set for both, main xAxis and navigator's xAxis.
          *
+         * @type    {number | string | undefined}
          * @since   6.0.0
+         * @apioption navigator.xAxis.overscroll
          */
-        overscroll: 0,
         className: 'highcharts-navigator-xaxis',
         tickLength: 0,
         lineWidth: 0,