highcharts 7.1.1 → 7.1.2

package/es-modules/parts/RangeSelector.js

@@ -1232,13 +1232,15 @@ RangeSelector.prototype = {
         };
         // Hide away the input box
         input.onblur = function () {
+            // update extermes only when inputs are active
             if (input === H.doc.activeElement) { // Only when focused
                 // Update also when no `change` event is triggered, like when
                 // clicking inside the SVG (#4710)
                 updateExtremes();
-                rangeSelector.hideInput(name);
-                input.blur(); // #4606
             }
+            // #10404 - move hide and blur outside focus
+            rangeSelector.hideInput(name);
+            input.blur(); // #4606
         };
 
         // handle changes in the input boxes
@@ -1818,7 +1820,7 @@ Axis.prototype.minFromRange = function () {
             time.set(timeName, date, basePeriod + count);
 
             if (basePeriod === time.get(timeName, date)) {
-                date.setDate(0); // #6537
+                time.set('Date', date, 0); // #6537
             }
 
             return date.getTime() - base;

package/es-modules/parts/Responsive.js

@@ -190,7 +190,7 @@ Chart.prototype.setResponsive = function (redraw, reset) {
         // Undo previous rules. Before we apply a new set of rules, we need to
         // roll back completely to base options (#6291).
         if (currentResponsive) {
-            this.update(currentResponsive.undoOptions, redraw);
+            this.update(currentResponsive.undoOptions, redraw, true);
         }
 
         if (ruleIds) {
@@ -203,7 +203,7 @@ Chart.prototype.setResponsive = function (redraw, reset) {
                 undoOptions: undoOptions
             };
 
-            this.update(mergedOptions, redraw);
+            this.update(mergedOptions, redraw, true);
 
         } else {
             this.currentResponsive = undefined;
@@ -253,7 +253,8 @@ Chart.prototype.matchResponsiveRule = function (rule, matches) {
  */
 Chart.prototype.currentOptions = function (options) {
 
-    var ret = {};
+    var chart = this,
+        ret = {};
 
     /**
      * Recurse over a set of options and its current values,
@@ -263,7 +264,10 @@ Chart.prototype.currentOptions = function (options) {
         var i;
 
         H.objectEach(options, function (val, key) {
-            if (!depth && ['series', 'xAxis', 'yAxis'].indexOf(key) > -1) {
+            if (
+                !depth &&
+                chart.collectionsWithUpdate.indexOf(key) > -1
+            ) {
                 val = splat(val);
 
                 ret[key] = [];

package/es-modules/parts/ScrollablePlotArea.js

@@ -7,6 +7,14 @@
  * horizontally on mobile devices. Supports left and right side axes.
  */
 
+/*
+WIP on vertical scrollable plot area (#9378). To do:
+- Bottom axis positioning
+- Test with Gantt
+- Look for size optimizing the code
+- API and demos
+ */
+
 'use strict';
 
 import H from './Globals.js';
@@ -15,20 +23,36 @@ var addEvent = H.addEvent,
     Chart = H.Chart;
 
 /**
- * Options for a scrollable plot area. This feature provides a minimum width for
- * the plot area of the chart. If the width gets smaller than this, typically
- * on mobile devices, a native browser scrollbar is presented below the chart.
- * This scrollbar provides smooth scrolling for the contents of the plot area,
- * whereas the title, legend and axes are fixed.
+ * Options for a scrollable plot area. This feature provides a minimum size for
+ * the plot area of the chart. If the size gets smaller than this, typically
+ * on mobile devices, a native browser scrollbar is presented. This scrollbar
+ * provides smooth scrolling for the contents of the plot area, whereas the
+ * title, legend and unaffected axes are fixed.
+ *
+ * Since v7.1.2, a scrollable plot area can be defined for either horizontal or
+ * vertical scrolling, depending on whether the `minWidth` or `minHeight`
+ * option is set.
  *
- * @sample {highcharts} highcharts/chart/scrollable-plotarea
+ * @sample highcharts/chart/scrollable-plotarea
  *         Scrollable plot area
+ * @sample highcharts/chart/scrollable-plotarea-vertical
+ *         Vertically scrollable plot area
+ * @sample {gantt} highcharts/chart/scrollable-plotarea-vertical
+ *         Gantt chart with vertically scrollable plot area
  *
  * @since     6.1.0
  * @product   highcharts gantt
  * @apioption chart.scrollablePlotArea
  */
 
+/**
+ * The minimum height for the plot area. If it gets smaller than this, the plot
+ * area will become scrollable.
+ *
+ * @type      {number}
+ * @apioption chart.scrollablePlotArea.minHeight
+ */
+
 /**
  * The minimum width for the plot area. If it gets smaller than this, the plot
  * area will become scrollable.
@@ -46,6 +70,14 @@ var addEvent = H.addEvent,
  * @apioption chart.scrollablePlotArea.scrollPositionX
  */
 
+/**
+ * The initial scrolling position of the scrollable plot area. Ranges from 0 to
+ * 1, where 0 aligns the plot area to the top and 1 aligns it to the bottom.
+ *
+ * @type      {number}
+ * @apioption chart.scrollablePlotArea.scrollPositionY
+ */
+
 /**
  * The opacity of mask applied on one of the sides of the plot
  * area.
@@ -64,52 +96,90 @@ addEvent(Chart, 'afterSetChartSize', function (e) {
     var scrollablePlotArea = this.options.chart.scrollablePlotArea,
         scrollableMinWidth =
             scrollablePlotArea && scrollablePlotArea.minWidth,
-        scrollablePixels;
+        scrollableMinHeight =
+            scrollablePlotArea && scrollablePlotArea.minHeight,
+        scrollablePixelsX,
+        scrollablePixelsY,
+        corrections;
 
-    if (scrollableMinWidth && !this.renderer.forExport) {
+    if (!this.renderer.forExport) {
 
         // The amount of pixels to scroll, the difference between chart
         // width and scrollable width
-        this.scrollablePixels = scrollablePixels = Math.max(
-            0,
-            scrollableMinWidth - this.chartWidth
-        );
+        if (scrollableMinWidth) {
+            this.scrollablePixelsX = scrollablePixelsX = Math.max(
+                0,
+                scrollableMinWidth - this.chartWidth
+            );
+            if (scrollablePixelsX) {
+                this.plotWidth += scrollablePixelsX;
+                if (this.inverted) {
+                    this.clipBox.height += scrollablePixelsX;
+                } else {
+                    this.clipBox.width += scrollablePixelsX;
+                }
+
+                corrections = {
+                    // Corrections for right side
+                    1: { name: 'right', value: scrollablePixelsX }
+                };
+            }
 
-        if (scrollablePixels) {
-            this.plotWidth += scrollablePixels;
-            this.clipBox.width += scrollablePixels;
-
-            if (!e.skipAxes) {
-                this.axes.forEach(function (axis) {
-                    if (axis.side === 1) {
-                        // Get the plot lines right in getPlotLinePath,
-                        // temporarily set it to the adjusted plot width.
-                        axis.getPlotLinePath = function () {
-                            var right = this.right,
-                                path;
-
-                            this.right = right - axis.chart.scrollablePixels;
-                            path = H.Axis.prototype.getPlotLinePath.apply(
-                                this,
-                                arguments
-                            );
-                            this.right = right;
-                            return path;
-                        };
-
-                    } else {
-                        // Apply the corrected plotWidth
-                        axis.setAxisSize();
-                        axis.setAxisTranslation();
-                    }
-                });
+        // Currently we can only do either X or Y
+        } else if (scrollableMinHeight) {
+            this.scrollablePixelsY = scrollablePixelsY = Math.max(
+                0,
+                scrollableMinHeight - this.chartHeight
+            );
+            if (scrollablePixelsY) {
+                this.plotHeight += scrollablePixelsY;
+                if (this.inverted) {
+                    this.clipBox.width += scrollablePixelsY;
+                } else {
+                    this.clipBox.height += scrollablePixelsY;
+                }
+                corrections = {
+                    2: { name: 'bottom', value: scrollablePixelsY }
+                };
             }
         }
+
+        if (corrections && !e.skipAxes) {
+            this.axes.forEach(function (axis) {
+                // For right and bottom axes, only fix the plot line length
+                if (corrections[axis.side]) {
+                    // Get the plot lines right in getPlotLinePath,
+                    // temporarily set it to the adjusted plot width.
+                    axis.getPlotLinePath = function () {
+                        var marginName = corrections[axis.side].name,
+                            correctionValue = corrections[axis.side].value,
+                            // axis.right or axis.bottom
+                            margin = this[marginName],
+                            path;
+
+                        // Temporarily adjust
+                        this[marginName] = margin - correctionValue;
+                        path = H.Axis.prototype.getPlotLinePath.apply(
+                            this,
+                            arguments
+                        );
+                        // Reset
+                        this[marginName] = margin;
+                        return path;
+                    };
+
+                } else {
+                    // Apply the corrected plotWidth
+                    axis.setAxisSize();
+                    axis.setAxisTranslation();
+                }
+            });
+        }
     }
 });
 
 addEvent(Chart, 'render', function () {
-    if (this.scrollablePixels) {
+    if (this.scrollablePixelsX || this.scrollablePixelsY) {
         if (this.setUpScrolling) {
             this.setUpScrolling();
         }
@@ -126,13 +196,23 @@ addEvent(Chart, 'render', function () {
  */
 Chart.prototype.setUpScrolling = function () {
 
+    var attribs = {
+        WebkitOverflowScrolling: 'touch',
+        overflowX: 'hidden',
+        overflowY: 'hidden'
+    };
+
+    if (this.scrollablePixelsX) {
+        attribs.overflowX = 'auto';
+    }
+    if (this.scrollablePixelsY) {
+        attribs.overflowY = 'auto';
+    }
+
     // Add the necessary divs to provide scrolling
     this.scrollingContainer = H.createElement('div', {
         'className': 'highcharts-scrolling'
-    }, {
-        overflowX: 'auto',
-        WebkitOverflowScrolling: 'touch'
-    }, this.renderTo);
+    }, attribs, this.renderTo);
 
     this.innerContainer = H.createElement('div', {
         'className': 'highcharts-inner-container'
@@ -152,23 +232,31 @@ Chart.prototype.setUpScrolling = function () {
  */
 Chart.prototype.moveFixedElements = function () {
     var container = this.container,
-        fixedRenderer = this.fixedRenderer;
-
-    ([
-        this.inverted ?
-            '.highcharts-xaxis' :
-            '.highcharts-yaxis',
-        this.inverted ?
-            '.highcharts-xaxis-labels' :
-            '.highcharts-yaxis-labels',
-        '.highcharts-contextbutton',
-        '.highcharts-credits',
-        '.highcharts-legend',
-        '.highcharts-reset-zoom',
-        '.highcharts-subtitle',
-        '.highcharts-title',
-        '.highcharts-legend-checkbox'
-    ]).forEach(function (className) {
+        fixedRenderer = this.fixedRenderer,
+        fixedSelectors = [
+            '.highcharts-contextbutton',
+            '.highcharts-credits',
+            '.highcharts-legend',
+            '.highcharts-reset-zoom',
+            '.highcharts-subtitle',
+            '.highcharts-title',
+            '.highcharts-legend-checkbox'
+        ],
+        axisClass;
+
+    if (this.scrollablePixelsX && !this.inverted) {
+        axisClass = '.highcharts-yaxis';
+    } else if (this.scrollablePixelsX && this.inverted) {
+        axisClass = '.highcharts-xaxis';
+    } else if (this.scrollablePixelsY && !this.inverted) {
+        axisClass = '.highcharts-xaxis';
+    } else if (this.scrollablePixelsY && this.inverted) {
+        axisClass = '.highcharts-yaxis';
+    }
+
+    fixedSelectors.push(axisClass, axisClass + '-labels');
+
+    fixedSelectors.forEach(function (className) {
         [].forEach.call(
             container.querySelectorAll(className),
             function (elem) {
@@ -190,6 +278,7 @@ Chart.prototype.moveFixedElements = function () {
 Chart.prototype.applyFixed = function () {
     var fixedRenderer,
         scrollableWidth,
+        scrollableHeight,
         firstTime = !this.fixedDiv,
         scrollableOptions = this.options.chart.scrollablePlotArea;
 
@@ -218,8 +307,8 @@ Chart.prototype.applyFixed = function () {
 
         this.fixedRenderer = fixedRenderer = new H.Renderer(
             this.fixedDiv,
-            0,
-            0
+            this.chartWidth,
+            this.chartHeight
         );
 
         // Mask
@@ -238,43 +327,64 @@ Chart.prototype.applyFixed = function () {
         this.moveFixedElements();
 
         addEvent(this, 'afterShowResetZoom', this.moveFixedElements);
-    }
 
-    // Set the size of the fixed renderer to the visible width
-    this.fixedRenderer.setSize(
-        this.chartWidth,
-        this.chartHeight
-    );
+    } else {
+
+        // Set the size of the fixed renderer to the visible width
+        this.fixedRenderer.setSize(
+            this.chartWidth,
+            this.chartHeight
+        );
+    }
 
     // Increase the size of the scrollable renderer and background
-    scrollableWidth = this.chartWidth + this.scrollablePixels;
+    scrollableWidth = this.chartWidth + (this.scrollablePixelsX || 0);
+    scrollableHeight = this.chartHeight + (this.scrollablePixelsY || 0);
     H.stop(this.container);
     this.container.style.width = scrollableWidth + 'px';
+    this.container.style.height = scrollableHeight + 'px';
     this.renderer.boxWrapper.attr({
         width: scrollableWidth,
-        height: this.chartHeight,
-        viewBox: [0, 0, scrollableWidth, this.chartHeight].join(' ')
+        height: scrollableHeight,
+        viewBox: [0, 0, scrollableWidth, scrollableHeight].join(' ')
+    });
+    this.chartBackground.attr({
+        width: scrollableWidth,
+        height: scrollableHeight
     });
-    this.chartBackground.attr({ width: scrollableWidth });
+
+    if (this.scrollablePixelsY) {
+        this.scrollingContainer.style.height = this.chartHeight + 'px';
+    }
 
     // Set scroll position
     if (firstTime) {
 
         if (scrollableOptions.scrollPositionX) {
             this.scrollingContainer.scrollLeft =
-                this.scrollablePixels * scrollableOptions.scrollPositionX;
+                this.scrollablePixelsX * scrollableOptions.scrollPositionX;
+        }
+        if (scrollableOptions.scrollPositionY) {
+            this.scrollingContainer.scrollTop =
+                this.scrollablePixelsY * scrollableOptions.scrollPositionY;
         }
     }
 
     // Mask behind the left and right side
     var axisOffset = this.axisOffset,
         maskTop = this.plotTop - axisOffset[0] - 1,
-        maskBottom = this.plotTop + this.plotHeight + axisOffset[2],
+        maskLeft = this.plotLeft - axisOffset[3] - 1,
+        maskBottom = this.plotTop + this.plotHeight + axisOffset[2] + 1,
+        maskRight = this.plotLeft + this.plotWidth + axisOffset[1] + 1,
         maskPlotRight = this.plotLeft + this.plotWidth -
-            this.scrollablePixels;
+            (this.scrollablePixelsX || 0),
+        maskPlotBottom = this.plotTop + this.plotHeight -
+            (this.scrollablePixelsY || 0),
+        d;
+
 
-    this.scrollableMask.attr({
-        d: this.scrollablePixels ? [
+    if (this.scrollablePixelsX) {
+        d = [
             // Left side
             'M', 0, maskTop,
             'L', this.plotLeft - 1, maskTop,
@@ -288,6 +398,30 @@ Chart.prototype.applyFixed = function () {
             'L', this.chartWidth, maskBottom,
             'L', maskPlotRight, maskBottom,
             'Z'
-        ] : ['M', 0, 0]
-    });
+        ];
+    } else if (this.scrollablePixelsY) {
+        d = [
+            // Top side
+            'M', maskLeft, 0,
+            'L', maskLeft, this.plotTop - 1,
+            'L', maskRight, this.plotTop - 1,
+            'L', maskRight, 0,
+            'Z',
+
+            // Bottom side
+            'M', maskLeft, maskPlotBottom,
+            'L', maskLeft, this.chartHeight,
+            'L', maskRight, this.chartHeight,
+            'L', maskRight, maskPlotBottom,
+            'Z'
+        ];
+    } else {
+        d = ['M', 0, 0];
+    }
+
+    if (this.redrawTrigger !== 'adjustHeight') {
+        this.scrollableMask.attr({
+            d: d
+        });
+    }
 };

package/es-modules/parts/Scrollbar.js

@@ -1053,7 +1053,9 @@ if (!H.Scrollbar) {
                 pick(axis.dataMax, axis.max) // #6930
             ),
             scrollbar = axis.scrollbar,
-            titleOffset = axis.titleOffset || 0,
+            offset = axis.axisTitleMargin + (axis.titleOffset || 0),
+            scrollbarsOffsets = axis.chart.scrollbarsOffsets,
+            axisMargin = axis.options.margin || 0,
             offsetsIndex,
             from,
             to;
@@ -1061,49 +1063,62 @@ if (!H.Scrollbar) {
         if (scrollbar) {
 
             if (axis.horiz) {
+
+                // Reserve space for labels/title
+                if (!axis.opposite) {
+                    scrollbarsOffsets[1] += offset;
+                }
+
                 scrollbar.position(
                     axis.left,
-                    axis.top + axis.height + 2 +
-                        axis.chart.scrollbarsOffsets[1] +
-                        (axis.opposite ?
-                            0 :
-                            titleOffset + axis.axisTitleMargin + axis.offset
-                        ),
+                    axis.top + axis.height + 2 + scrollbarsOffsets[1] -
+                        (axis.opposite ? axisMargin : 0),
                     axis.width,
                     axis.height
                 );
+
+                // Next scrollbar should reserve space for margin (if set)
+                if (!axis.opposite) {
+                    scrollbarsOffsets[1] += axisMargin;
+                }
+
                 offsetsIndex = 1;
             } else {
+
+                // Reserve space for labels/title
+                if (axis.opposite) {
+                    scrollbarsOffsets[0] += offset;
+                }
+
                 scrollbar.position(
-                    axis.left + axis.width + 2 +
-                        axis.chart.scrollbarsOffsets[0] +
-                        (axis.opposite ?
-                            titleOffset + axis.axisTitleMargin + axis.offset :
-                            0
-                        ),
+                    axis.left + axis.width + 2 + scrollbarsOffsets[0] -
+                        (axis.opposite ? 0 : axisMargin),
                     axis.top,
                     axis.width,
                     axis.height
                 );
+
+                // Next scrollbar should reserve space for margin (if set)
+                if (axis.opposite) {
+                    scrollbarsOffsets[0] += axisMargin;
+                }
+
                 offsetsIndex = 0;
             }
 
-            if (
-                (!axis.opposite && !axis.horiz) || (axis.opposite && axis.horiz)
-            ) {
-                axis.chart.scrollbarsOffsets[offsetsIndex] +=
-                    axis.scrollbar.size + axis.scrollbar.options.margin;
-            }
+            scrollbarsOffsets[offsetsIndex] += scrollbar.size +
+                scrollbar.options.margin;
 
             if (
                 isNaN(scrollMin) ||
                 isNaN(scrollMax) ||
                 !defined(axis.min) ||
-                !defined(axis.max)
+                !defined(axis.max) ||
+                axis.min === axis.max // #10733
             ) {
-                // default action: when there is not extremes on the axis, but
-                // scrollbar exists, make it full size
-                scrollbar.setRange(0, 0);
+                // default action: when extremes are the same or there is not
+                // extremes on the axis, but scrollbar exists, make it full size
+                scrollbar.setRange(0, 1);
             } else {
                 from = (axis.min - scrollMin) / (scrollMax - scrollMin);
                 to = (axis.max - scrollMin) / (scrollMax - scrollMin);