highcharts 11.4.3 → 11.4.5

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

@@ -17,6 +17,8 @@ const { isTouchDevice } = H;
 import NavigatorAxisAdditions from '../../Core/Axis/NavigatorAxisComposition.js';
 import NavigatorComposition from './NavigatorComposition.js';
 import Scrollbar from '../Scrollbar/Scrollbar.js';
+import SVGRenderer from '../../Core/Renderer/SVG/SVGRenderer.js';
+const { prototype: { symbols } } = SVGRenderer;
 import U from '../../Core/Utilities.js';
 const { addEvent, clamp, correctFloat, defined, destroyObjectProperties, erase, extend, find, fireEvent, isArray, isNumber, merge, pick, removeEvent, splat } = U;
 /* *
@@ -67,6 +69,7 @@ class Navigator {
      *
      * */
     constructor(chart) {
+        this.isDirty = false;
         this.scrollbarHeight = 0;
         this.init(chart);
     }
@@ -137,9 +140,9 @@ class Navigator {
                 ],
                 // Top right of zoomed range
                 ['L', left + height, verticalMin],
-                ['L', left, verticalMin],
-                ['M', left, zoomedMax],
-                ['L', left + height, zoomedMax],
+                ['L', left, verticalMin], // Top left of z.r.
+                ['M', left, zoomedMax], // Bottom left of z.r.
+                ['L', left + height, zoomedMax], // Bottom right of z.r.
                 [
                     'L',
                     left + height,
@@ -177,7 +180,7 @@ class Navigator {
                 [
                     'L',
                     left + navigatorSize + scrollButtonSize * 2,
-                    navigatorTop + halfOutline
+                    lineTop
                 ]
             ];
             if (maskInside) {
@@ -245,7 +248,7 @@ class Navigator {
         });
     }
     /**
-     * Generate DOM elements for a navigator:
+     * Generate and update DOM elements for a navigator:
      *
      * - main navigator group
      *
@@ -263,39 +266,40 @@ class Navigator {
             cursor: inverted ? 'ns-resize' : 'ew-resize'
         }, 
         // Create the main navigator group
-        navigatorGroup = navigator.navigatorGroup = renderer
-            .g('navigator')
-            .attr({
-            zIndex: 8,
-            visibility: 'hidden'
-        })
-            .add();
+        navigatorGroup = navigator.navigatorGroup ??
+            (navigator.navigatorGroup = renderer
+                .g('navigator')
+                .attr({
+                zIndex: 8,
+                visibility: 'hidden'
+            })
+                .add());
         // Create masks, each mask will get events and fill:
         [
             !maskInside,
             maskInside,
             !maskInside
         ].forEach((hasMask, index) => {
-            const shade = renderer.rect()
-                .addClass('highcharts-navigator-mask' +
-                (index === 1 ? '-inside' : '-outside'))
-                .add(navigatorGroup);
+            const shade = navigator.shades[index] ??
+                (navigator.shades[index] = renderer.rect()
+                    .addClass('highcharts-navigator-mask' +
+                    (index === 1 ? '-inside' : '-outside'))
+                    .add(navigatorGroup));
             if (!chart.styledMode) {
                 shade.attr({
-                    fill: hasMask ?
-                        navigatorOptions.maskFill :
-                        'rgba(0,0,0,0)'
+                    fill: hasMask ? navigatorOptions.maskFill : 'rgba(0,0,0,0)'
                 });
                 if (index === 1) {
                     shade.css(mouseCursor);
                 }
             }
-            navigator.shades[index] = shade;
         });
         // Create the outline:
-        navigator.outline = renderer.path()
-            .addClass('highcharts-navigator-outline')
-            .add(navigatorGroup);
+        if (!navigator.outline) {
+            navigator.outline = renderer.path()
+                .addClass('highcharts-navigator-outline')
+                .add(navigatorGroup);
+        }
         if (!chart.styledMode) {
             navigator.outline.attr({
                 'stroke-width': navigatorOptions.outlineWidth,
@@ -303,10 +307,27 @@ class Navigator {
             });
         }
         // Create the handlers:
-        if (navigatorOptions.handles && navigatorOptions.handles.enabled) {
+        if (navigatorOptions.handles?.enabled) {
             const handlesOptions = navigatorOptions.handles, { height, width } = handlesOptions;
             [0, 1].forEach((index) => {
-                navigator.handles[index] = renderer.symbol(handlesOptions.symbols[index], -width / 2 - 1, 0, width, height, handlesOptions);
+                const symbolName = handlesOptions.symbols[index];
+                if (!navigator.handles[index]) {
+                    navigator.handles[index] = renderer.symbol(symbolName, -width / 2 - 1, 0, width, height, handlesOptions);
+                    // Z index is 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 })
+                        .addClass('highcharts-navigator-handle ' +
+                        'highcharts-navigator-handle-' +
+                        ['left', 'right'][index]).add(navigatorGroup);
+                    // If the navigator symbol changed, update its path and name
+                }
+                else if (symbolName !== navigator.handles[index].symbolName) {
+                    const symbolFn = symbols[symbolName], path = symbolFn.call(symbols, -width / 2 - 1, 0, width, height);
+                    navigator.handles[index].attr({
+                        d: path
+                    });
+                    navigator.handles[index].symbolName = symbolName;
+                }
                 if (chart.inverted) {
                     navigator.handles[index].attr({
                         rotation: 90,
@@ -314,18 +335,16 @@ class Navigator {
                         rotationOriginY: (height + width) / 2
                     });
                 }
-                // Z index is 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 })
-                    .addClass('highcharts-navigator-handle ' +
-                    'highcharts-navigator-handle-' +
-                    ['left', 'right'][index]).add(navigatorGroup);
                 if (!chart.styledMode) {
                     navigator.handles[index]
                         .attr({
                         fill: handlesOptions.backgroundColor,
                         stroke: handlesOptions.borderColor,
-                        'stroke-width': handlesOptions.lineWidth
+                        'stroke-width': handlesOptions.lineWidth,
+                        width: handlesOptions.width,
+                        height: handlesOptions.height,
+                        x: -width / 2 - 1,
+                        y: 0
                     })
                         .css(mouseCursor);
                 }
@@ -341,18 +360,53 @@ class Navigator {
      * @param {Highcharts.NavigatorOptions} options
      *        Options to merge in when updating navigator
      */
-    update(options) {
-        // Remove references to old navigator series in base series
-        (this.series || []).forEach((series) => {
-            if (series.baseSeries) {
-                delete series.baseSeries.navigatorSeries;
+    update(options, redraw = false) {
+        const chart = this.chart, invertedUpdate = chart.options.chart.inverted !==
+            chart.scrollbar?.options.vertical;
+        merge(true, chart.options.navigator, options);
+        this.navigatorOptions = chart.options.navigator || {};
+        this.setOpposite();
+        // Revert to destroy/init for navigator/scrollbar enabled toggle
+        if (defined(options.enabled) || invertedUpdate) {
+            this.destroy();
+            this.navigatorEnabled = options.enabled || this.navigatorEnabled;
+            return this.init(chart);
+        }
+        if (this.navigatorEnabled) {
+            this.isDirty = true;
+            if (options.adaptToUpdatedData === false) {
+                this.baseSeries.forEach((series) => {
+                    removeEvent(series, 'updatedData', this.updatedDataHandler);
+                }, this);
             }
-        });
-        // Destroy and rebuild navigator
-        this.destroy();
-        const chartOptions = this.chart.options;
-        merge(true, chartOptions.navigator, options);
-        this.init(this.chart);
+            if (options.adaptToUpdatedData) {
+                this.baseSeries.forEach((series) => {
+                    series.eventsToUnbind.push(addEvent(series, 'updatedData', this.updatedDataHandler));
+                }, this);
+            }
+            // Update navigator series
+            if (options.series || options.baseSeries) {
+                this.setBaseSeries(void 0, false);
+            }
+            // Update navigator axis
+            if (options.height || options.xAxis || options.yAxis) {
+                this.height = options.height ?? this.height;
+                const offsets = this.getXAxisOffsets();
+                this.xAxis.update({
+                    ...options.xAxis,
+                    offsets,
+                    [chart.inverted ? 'width' : 'height']: this.height,
+                    [chart.inverted ? 'height' : 'width']: void 0
+                }, false);
+                this.yAxis.update({
+                    ...options.yAxis,
+                    [chart.inverted ? 'width' : 'height']: this.height
+                }, false);
+            }
+        }
+        if (redraw) {
+            chart.redraw();
+        }
     }
     /**
      * Render the navigator
@@ -375,6 +429,10 @@ class Navigator {
         if (this.hasDragged && !defined(pxMin)) {
             return;
         }
+        if (this.isDirty) {
+            // Update DOM navigator elements
+            this.renderElements();
+        }
         min = correctFloat(min - pointRange / 2);
         max = correctFloat(max + pointRange / 2);
         // Don't render the navigator until we have data (#486, #4202, #5172).
@@ -475,6 +533,7 @@ class Navigator {
             navigator.zoomedMin / (navigatorSize || 1), navigator.zoomedMax / (navigatorSize || 1));
         }
         navigator.rendered = true;
+        this.isDirty = false;
         fireEvent(this, 'afterRender');
     }
     /**
@@ -809,6 +868,16 @@ class Navigator {
             }
         }
     }
+    /**
+     * Calculate the navigator xAxis offsets
+     *
+     * @private
+     */
+    getXAxisOffsets() {
+        return (this.chart.inverted ?
+            [this.scrollButtonSize, 0, -this.scrollButtonSize, 0] :
+            [0, -this.scrollButtonSize, 0, this.scrollButtonSize]);
+    }
     /**
      * Initialize the Navigator object
      *
@@ -828,11 +897,12 @@ class Navigator {
         this.navigatorEnabled = navigatorEnabled;
         this.navigatorOptions = navigatorOptions;
         this.scrollbarOptions = scrollbarOptions;
-        this.opposite = pick(navigatorOptions.opposite, Boolean(!navigatorEnabled && chart.inverted)); // #6262
+        this.setOpposite();
         const navigator = this, baseSeries = navigator.baseSeries, xAxisIndex = chart.xAxis.length, yAxisIndex = chart.yAxis.length, baseXaxis = baseSeries && baseSeries[0] && baseSeries[0].xAxis ||
             chart.xAxis[0] || { options: {} };
         chart.isDirtyBox = true;
         if (navigator.navigatorEnabled) {
+            const offsets = this.getXAxisOffsets();
             // An x axis is required for scrollbar also
             navigator.xAxis = new Axis(chart, merge({
                 // Inherit base xAxis' break, ordinal options and overscroll
@@ -844,18 +914,21 @@ class Navigator {
                 index: xAxisIndex,
                 isInternal: true,
                 offset: 0,
-                keepOrdinalPadding: true,
+                keepOrdinalPadding: true, // #2436
                 startOnTick: false,
                 endOnTick: false,
-                minPadding: 0,
-                maxPadding: 0,
+                // Inherit base xAxis' padding when ordinal is false (#16915).
+                minPadding: baseXaxis.options.ordinal ? 0 :
+                    baseXaxis.options.minPadding,
+                maxPadding: baseXaxis.options.ordinal ? 0 :
+                    baseXaxis.options.maxPadding,
                 zoomEnabled: false
             }, chart.inverted ? {
-                offsets: [scrollButtonSize, 0, -scrollButtonSize, 0],
+                offsets,
                 width: height
             } : {
-                offsets: [0, -scrollButtonSize, 0, scrollButtonSize],
-                height: height
+                offsets,
+                height
             }), 'xAxis');
             navigator.yAxis = new Axis(chart, merge(navigatorOptions.yAxis, {
                 alignTicks: false,
@@ -863,7 +936,7 @@ class Navigator {
                 index: yAxisIndex,
                 isInternal: true,
                 reversed: pick((navigatorOptions.yAxis &&
-                    navigatorOptions.yAxis.reversed), (chart.yAxis[0] && chart.yAxis[0].reversed), false),
+                    navigatorOptions.yAxis.reversed), (chart.yAxis[0] && chart.yAxis[0].reversed), false), // #14060
                 zoomEnabled: false
             }, chart.inverted ? {
                 width: height
@@ -938,6 +1011,15 @@ class Navigator {
         // Add redraw events
         navigator.addChartEvents();
     }
+    /**
+     * Set the opposite property on navigator
+     *
+     * @private
+     */
+    setOpposite() {
+        const navigatorOptions = this.navigatorOptions, navigatorEnabled = this.navigatorEnabled, chart = this.chart;
+        this.opposite = pick(navigatorOptions.opposite, Boolean(!navigatorEnabled && chart.inverted)); // #6262
+    }
     /**
      * Get the union data extremes of the chart - the outer data extremes of the
      * base X axis and the navigator axis.
@@ -1005,14 +1087,14 @@ class Navigator {
     updateNavigatorSeries(addEvents, redraw) {
         const navigator = this, chart = navigator.chart, baseSeries = navigator.baseSeries, navSeriesMixin = {
             enableMouseTracking: false,
-            index: null,
-            linkedTo: null,
-            group: 'nav',
+            index: null, // #6162
+            linkedTo: null, // #6734
+            group: 'nav', // For columns
             padXAxis: false,
             xAxis: this.navigatorOptions.xAxis?.id,
             yAxis: this.navigatorOptions.yAxis?.id,
             showInLegend: false,
-            stacking: void 0,
+            stacking: void 0, // #4823
             isInternal: true,
             states: {
                 inactive: {
@@ -1167,6 +1249,9 @@ class Navigator {
             }
             // Handle series removal
             base.eventsToUnbind.push(addEvent(base, 'remove', function () {
+                if (baseSeries) {
+                    erase(baseSeries, base); // #21043
+                }
                 if (this.navigatorSeries) {
                     erase(navigator.series, this.navigatorSeries);
                     if (defined(this.navigatorSeries.options)) {
@@ -1383,6 +1468,7 @@ class Navigator {
         [this.handles].forEach((coll) => {
             destroyObjectProperties(coll);
         });
+        this.navigatorEnabled = false;
     }
 }
 /* *

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

@@ -348,7 +348,7 @@ const NavigatorDefaults = {
          *
          * @type {Highcharts.ColorString|null}
          */
-        lineColor: null,
+        lineColor: null, // #4602
         marker: {
             enabled: false
         },

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

@@ -682,7 +682,7 @@ class RangeSelector {
                 position: 'absolute',
                 border: 0,
                 boxShadow: '0 0 15px rgba(0,0,0,0.3)',
-                width: '1px',
+                width: '1px', // Chrome needs a pixel to see it
                 height: '1px',
                 padding: 0,
                 textAlign: 'center',

package/es-modules/Stock/RangeSelector/RangeSelectorDefaults.js

@@ -326,7 +326,7 @@ const rangeSelector = {
      * @type  {number|undefined}
      * @since 2.1.9
      */
-    height: void 0,
+    height: void 0, // Reserved space for buttons and input
     /**
      * The border color of the date input boxes.
      *

package/es-modules/Stock/Scrollbar/ScrollbarDefaults.js

@@ -188,7 +188,7 @@ const ScrollbarDefaults = {
      *
      * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
      */
-    trackBackgroundColor: 'rgba(255, 255, 255, 0.001)',
+    trackBackgroundColor: 'rgba(255, 255, 255, 0.001)', // #18922
     /**
      * The color of the border of the scrollbar track.
      *

package/es-modules/Stock/StockTools/StockToolbar.js

@@ -11,7 +11,10 @@
  * */
 'use strict';
 import U from '../../Core/Utilities.js';
-const { addEvent, createElement, css, fireEvent, getStyle, isArray, merge, pick } = U;
+import AST from '../../Core/Renderer/HTML/AST.js';
+import StockToolsUtilities from './StockToolsUtilities.js';
+const { addEvent, createElement, css, defined, fireEvent, getStyle, isArray, merge, pick } = U;
+const { shallowArraysEqual } = StockToolsUtilities;
 /* *
  *
  *  Classes
@@ -39,6 +42,8 @@ class Toolbar {
      *
      * */
     constructor(options, langOptions, chart) {
+        this.width = 0;
+        this.isDirty = false;
         this.chart = chart;
         this.options = options;
         this.lang = langOptions;
@@ -46,14 +51,15 @@ class Toolbar {
         this.iconsURL = this.getIconsURL();
         this.guiEnabled = options.enabled;
         this.visible = pick(options.visible, true);
-        this.placed = pick(options.placed, false);
+        this.guiClassName = options.className;
+        this.toolbarClassName = options.toolbarClassName;
         // General events collection which should be removed upon
         // destroy/update:
         this.eventsToUnbind = [];
         if (this.guiEnabled) {
-            this.createHTML();
-            this.init();
-            this.showHideNavigatorion();
+            this.createContainer();
+            this.createButtons();
+            this.showHideNavigation();
         }
         fireEvent(this, 'afterInit');
     }
@@ -63,12 +69,12 @@ class Toolbar {
      *
      * */
     /**
-     * Initialize the toolbar. Create buttons and submenu for each option
-     * defined in `stockTools.gui`.
+     * Create and set up stockTools buttons with their events and submenus.
      * @private
      */
-    init() {
+    createButtons() {
         const lang = this.lang, guiOptions = this.options, toolbar = this.toolbar, buttons = guiOptions.buttons, defs = guiOptions.definitions, allButtons = toolbar.childNodes;
+        this.buttonList = buttons;
         // Create buttons
         buttons.forEach((btnName) => {
             const button = this.addButton(toolbar, defs, btnName, lang);
@@ -292,11 +298,11 @@ class Toolbar {
         }));
     }
     /*
-     * Create stockTools HTML main elements.
+     * Create the stockTools container and sets up event bindings.
      *
      */
-    createHTML() {
-        const chart = this.chart, guiOptions = this.options, container = chart.container, navigation = chart.options.navigation, bindingsClassName = navigation && navigation.bindingsClassName;
+    createContainer() {
+        const chart = this.chart, guiOptions = this.options, container = chart.container, navigation = chart.options.navigation, bindingsClassName = navigation?.bindingsClassName, self = this;
         let listWrapper, toolbar;
         // Create main container
         const wrapper = this.wrapper = createElement('div', {
@@ -304,6 +310,17 @@ class Toolbar {
                 guiOptions.className + ' ' + bindingsClassName
         });
         container.appendChild(wrapper);
+        this.showHideBtn = createElement('div', {
+            className: 'highcharts-toggle-toolbar highcharts-arrow-left'
+        }, void 0, wrapper);
+        // Toggle menu
+        this.eventsToUnbind.push(addEvent(this.showHideBtn, 'click', () => {
+            this.update({
+                gui: {
+                    visible: !self.visible
+                }
+            });
+        }));
         // Mimic event behaviour of being outside chart.container
         [
             'mousedown',
@@ -333,7 +350,7 @@ class Toolbar {
      * Function called in redraw verifies if the navigation should be visible.
      * @private
      */
-    showHideNavigatorion() {
+    showHideNavigation() {
         // Arrows
         // 50px space for arrows
         if (this.visible &&
@@ -352,42 +369,31 @@ class Toolbar {
      * @private
      */
     showHideToolbar() {
-        const chart = this.chart, wrapper = this.wrapper, toolbar = this.listWrapper, submenu = this.submenu, 
+        const wrapper = this.wrapper, toolbar = this.listWrapper, submenu = this.submenu, 
         // Show hide toolbar
-        showhideBtn = this.showhideBtn = createElement('div', {
-            className: 'highcharts-toggle-toolbar highcharts-arrow-left'
-        }, void 0, wrapper);
+        showHideBtn = this.showHideBtn;
         let visible = this.visible;
-        showhideBtn.style.backgroundImage =
+        showHideBtn.style.backgroundImage =
             'url(' + this.iconsURL + 'arrow-right.svg)';
         if (!visible) {
             // Hide
             if (submenu) {
                 submenu.style.display = 'none';
             }
-            showhideBtn.style.left = '0px';
+            showHideBtn.style.left = '0px';
             visible = this.visible = false;
             toolbar.classList.add('highcharts-hide');
-            showhideBtn.classList.toggle('highcharts-arrow-right');
-            wrapper.style.height = showhideBtn.offsetHeight + 'px';
+            showHideBtn.classList.add('highcharts-arrow-right');
+            wrapper.style.height = showHideBtn.offsetHeight + 'px';
         }
         else {
             wrapper.style.height = '100%';
-            showhideBtn.style.top = getStyle(toolbar, 'padding-top') + 'px';
-            showhideBtn.style.left = (wrapper.offsetWidth +
+            toolbar.classList.remove('highcharts-hide');
+            showHideBtn.classList.remove('highcharts-arrow-right');
+            showHideBtn.style.top = getStyle(toolbar, 'padding-top') + 'px';
+            showHideBtn.style.left = (wrapper.offsetWidth +
                 getStyle(toolbar, 'padding-left')) + 'px';
         }
-        // Toggle menu
-        this.eventsToUnbind.push(addEvent(showhideBtn, 'click', () => {
-            chart.update({
-                stockTools: {
-                    gui: {
-                        visible: !visible,
-                        placed: true
-                    }
-                }
-            });
-        }));
     }
     /*
      * In main GUI button, replace icon and class with submenu button's
@@ -451,9 +457,10 @@ class Toolbar {
      * @private
      */
     update(options, redraw) {
+        this.isDirty = !!options.gui.definitions;
         merge(true, this.chart.options.stockTools, options);
-        this.destroy();
-        this.chart.setStockTools(options);
+        merge(true, this.options, options.gui);
+        this.visible = pick(this.options.visible && this.options.enabled, true);
         // If Stock Tools are updated, then bindings should be updated too:
         if (this.chart.navigationBindings) {
             this.chart.navigationBindings.update();
@@ -476,11 +483,82 @@ class Toolbar {
         }
     }
     /**
-     * Redraw, GUI requires to verify if the navigation should be visible.
+     * Redraws the toolbar based on the current state of the options.
      * @private
      */
     redraw() {
-        this.showHideNavigatorion();
+        if (this.options.enabled !== this.guiEnabled) {
+            this.handleGuiEnabledChange();
+        }
+        else {
+            if (!this.guiEnabled) {
+                return;
+            }
+            this.updateClassNames();
+            this.updateButtons();
+            this.updateVisibility();
+            this.showHideNavigation();
+            this.showHideToolbar();
+        }
+    }
+    /**
+     * Hadles the change of the `enabled` option.
+     * @private
+     */
+    handleGuiEnabledChange() {
+        if (this.options.enabled === false) {
+            this.destroy();
+            this.visible = false;
+        }
+        if (this.options.enabled === true) {
+            this.createContainer();
+            this.createButtons();
+        }
+        this.guiEnabled = this.options.enabled;
+    }
+    /**
+     * Updates the class names of the GUI and toolbar elements.
+     * @private
+     */
+    updateClassNames() {
+        if (this.options.className !== this.guiClassName) {
+            if (this.guiClassName) {
+                this.wrapper.classList.remove(this.guiClassName);
+            }
+            if (this.options.className) {
+                this.wrapper.classList.add(this.options.className);
+            }
+            this.guiClassName = this.options.className;
+        }
+        if (this.options.toolbarClassName !== this.toolbarClassName) {
+            if (this.toolbarClassName) {
+                this.toolbar.classList.remove(this.toolbarClassName);
+            }
+            if (this.options.toolbarClassName) {
+                this.toolbar.classList.add(this.options.toolbarClassName);
+            }
+            this.toolbarClassName = this.options.toolbarClassName;
+        }
+    }
+    /**
+     * Updates the buttons in the toolbar if the button options have changed.
+     * @private
+     */
+    updateButtons() {
+        if (!shallowArraysEqual(this.options.buttons, this.buttonList) ||
+            this.isDirty) {
+            this.toolbar.innerHTML = AST.emptyHTML;
+            this.createButtons();
+        }
+    }
+    /**
+     * Updates visibility based on current options.
+     * @private
+     */
+    updateVisibility() {
+        if (defined(this.options.visible)) {
+            this.visible = this.options.visible;
+        }
     }
     /**
      * @private

package/es-modules/Stock/StockTools/StockToolsDefaults.js

@@ -1176,7 +1176,13 @@ const stockTools = {
                  */
                 symbol: 'save-chart.svg'
             }
-        }
+        },
+        /**
+         * Whether the stock tools toolbar is visible.
+         *
+         * @since 11.4.4
+         */
+        visible: true
     }
 };
 /* *