Merge pull request #13910 from highcharts/vacation2020

vacation2020

.eslintignore

@@ -4,18 +4,10 @@ js/Core/**/*.js
 js/Extensions/**/*.js
 js/Gantt/**/*.js
 js/Maps/**/*.js
+js/Mixins/**/*.js
 js/Series/**/*.js
 js/Stock/**/*.js
-js/annotations/**/*.js
-js/indicators/**/*.js
-js/modules/**/*.js
-js/mixins/**/*.js
-js/parts/**/*.js
-js/parts-3d/**/*.js
-js/parts-gantt/**/*.js
-js/parts-map/**/*.js
-js/parts-more/**/*.js
-js/themes/**/*.js
+js/Themes/**/*.js
 samples/data/**/*.js
 samples/highcharts/common-js/**/*.js
 samples/highcharts/esm/async-await/demo.js

docs/advanced-chart-features/boost-module.md

@@ -1,5 +1,5 @@
 Boost module
-===
+============
 
 Boost is a stripped-down renderer-in-a-module for Highcharts. It bypasses some of the standard Highcharts features (such as animation), and focuses on pushing as many points as possible as quickly as possible.
 
@@ -8,7 +8,7 @@ This document will guide you through your first steps with the Highcharts boost
 Including boost in your project
 -------------------------------
 
-The boost module is a “renderer-in-a-module”. Including [modules/boost.js](https://code.highcharts.com/modules/boost.js) will, by default, activate boost for all series that support it (line series, column, bar, treemap, heatmap, scatter, bubble, area).
+The boost module is a "renderer-in-a-module". Including [modules/boost.js](https://code.highcharts.com/modules/boost.js) will, by default, activate boost for all series that support it (line series, column, bar, treemap, heatmap, scatter, bubble, area).
 
 If needed, boost can be disabled on a chart-by-chart basis by setting `boost.enabled` to `false` in the chart configuration.
 
@@ -17,7 +17,7 @@ If needed, boost can be disabled on a chart-by-chart basis by setting `boost.ena
 Configuration Options
 ---------------------
 
-The main boost configuration is set in the `boost property in the chart options.`
+The main boost configuration is set in the `boost` property in the chart options.
 
 |Option|Description|
 |--- |--- |
@@ -92,6 +92,7 @@ There are five different probes that can be activated:
 *   Series processing (`timeSeriesProcessing`)
 *   K-d tree processing (`timeKDTree`)
 *   Buffer copy (`timeBufferCopy`)
+*   Rendering (`timeRendering`)
 
 All of the above settings are booleans set in the `debug` object on the `boost` property.
 
@@ -100,15 +101,15 @@ Note that the K-d tree is build async, which means that it will not lock up the
 Samples
 -------
 
-*   [Area chart](https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/area/) – 500,000 points
-*   [Stacked area chart](https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/area-stacked) – 50,000 points
-*   [Area range chart](https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/arearange) – 500,000 points
-*   [Bubble chart](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/bubble/) - 50,000 points
-*   [Column chart](https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/column) – 500,000 points
-*   [Heatmap](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/heatmap/)
-*   [Line chart](https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/line/) – 500,000 points
-*   [Series-heavy line chart](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/line-series-heavy/) - 600 series, 600,000 points
-*   [Series-heavy stock chart](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/line-series-heavy-stock/) \- 600 series, 72,000 points
-*   [Dynamic series-heavy stock chart](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/line-series-heavy-dynamic/) - 600 series, 12,000 initial points; adds 1 point to all series every second
-*   [Scatter chart](https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/scatter) – 1,000,000 points
-*   [Treemap](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/boost/treemap/)
+*   [Area chart](https://highcharts.com/samples/highcharts/boost/area) – 500,000 points
+*   [Stacked area chart](https://highcharts.com/samples/highcharts/boost/area-stacked) – 50,000 points
+*   [Area range chart](https://highcharts.com/samples/highcharts/boost/arearange) – 500,000 points
+*   [Bubble chart](https://highcharts.com/samples/highcharts/boost/bubble) - 50,000 points
+*   [Column chart](https://highcharts.com/samples/highcharts/boost/column) – 500,000 points
+*   [Heatmap](https://highcharts.com/samples/highcharts/boost/heatmap)
+*   [Line chart](https://highcharts.com/samples/highcharts/boost/line) – 500,000 points
+*   [Series-heavy line chart](https://highcharts.com/samples/highcharts/boost/line-series-heavy) - 600 series, 600,000 points
+*   [Series-heavy stock chart](https://highcharts.com/samples/highcharts/boost/line-series-heavy-stock) \- 600 series, 72,000 points
+*   [Dynamic series-heavy stock chart](https://highcharts.com/samples/highcharts/boost/line-series-heavy-dynamic) - 600 series, 12,000 initial points; adds 1 point to all series every second
+*   [Scatter chart](https://highcharts.com/samples/highcharts/boost/scatter) – 1,000,000 points
+*   [Treemap](https://highcharts.com/samples/highcharts/boost/treemap)

docs/doc-config.js

@@ -15,6 +15,7 @@ module.exports = {
         { from: 'advanced-chart-features/highcharts-typescript-beta', to: 'advanced-chart-features/highcharts-typescript-declarations' },
         { from: 'maps/create-custom-maps-for-highmaps', to: 'maps/create-custom-maps' },
         { from: 'stock/understanding-highstock', to: 'stock/understanding-highcharts-stock' },
-        { from: 'getting-started/compatibility', to: 'getting-started/system-requirements' }
+        { from: 'getting-started/compatibility', to: 'getting-started/system-requirements' },
+        { from: 'chart-and-series-types/packed-bubble-charts', to: 'chart-and-series-types/packed-bubble' }
     ]
 };

js/Accessibility/Components/InfoRegionsComponent.js

@@ -323,7 +323,7 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
      */
     getDataTableButtonText: function (buttonId) {
         var chart = this.chart, buttonText = chart.langFormat('accessibility.table.viewAsDataTableButtonText', { chart: chart, chartTitle: getChartTitle(chart) });
-        return '<a id="' + buttonId + '">' + buttonText + '</a>';
+        return '<button id="' + buttonId + '">' + buttonText + '</button>';
     },
     /**
      * @private
@@ -420,10 +420,8 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
         var el = this.viewDataTableButton = getElement(tableButtonId), chart = this.chart, tableId = tableButtonId.replace('hc-linkto-', '');
         if (el) {
             setElAttrs(el, {
-                role: 'button',
                 tabindex: '-1',
-                'aria-expanded': !!getElement(tableId),
-                href: '#' + tableId
+                'aria-expanded': !!getElement(tableId)
             });
             el.onclick = chart.options.accessibility
                 .screenReaderSection.onViewDataTableClick ||

js/Accessibility/Components/SeriesComponent/SeriesKeyboardNavigation.js

@@ -19,6 +19,8 @@ import KeyboardNavigationHandler from '../../KeyboardNavigationHandler.js';
 import EventProvider from '../../Utils/EventProvider.js';
 import ChartUtilities from '../../Utils/ChartUtilities.js';
 var getPointFromXY = ChartUtilities.getPointFromXY, getSeriesFromName = ChartUtilities.getSeriesFromName, scrollToPoint = ChartUtilities.scrollToPoint;
+import '../../../Series/ColumnSeries.js';
+import '../../../Series/PieSeries.js';
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /*
  * Set for which series types it makes sense to move to the closest point with

js/Accessibility/KeyboardNavigation.js

@@ -78,7 +78,7 @@ KeyboardNavigation.prototype = {
         this.currentModuleIx = 0;
         // Run an update to get all modules
         this.update();
-        ep.addEvent(chart.renderTo, 'keydown', function (e) { return _this.onKeydown(e); });
+        ep.addEvent(this.tabindexContainer, 'keydown', function (e) { return _this.onKeydown(e); });
         ep.addEvent(this.tabindexContainer, 'focus', function (e) { return _this.onFocus(e); });
         ep.addEvent(doc, 'mouseup', function () { return _this.onMouseUp(); });
         ep.addEvent(chart.renderTo, 'mousedown', function () {
@@ -319,7 +319,7 @@ KeyboardNavigation.prototype = {
             var e = ev || win.event, curModule, focusComesFromChart = (e.relatedTarget &&
                 chart.container.contains(e.relatedTarget)), comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);
             if (comingInBackwards) {
-                chart.renderTo.focus();
+                keyboardNavigation.tabindexContainer.focus();
                 e.preventDefault();
                 // Move to last valid keyboard nav module
                 // Note the we don't run it, just set the index

js/Accessibility/Options/LangOptions.js

@@ -105,7 +105,7 @@ var langOptions = {
          */
         legend: {
             legendLabel: 'Toggle series visibility',
-            legendItem: 'Toggle visibility of {itemName}'
+            legendItem: 'Hide {itemName}'
         },
         /**
          * Chart and map zoom accessibility language options.

js/Core/Axis/Axis.js

@@ -433,7 +433,7 @@ var Axis = /** @class */ (function () {
         // Placeholder for plotlines and plotbands groups
         axis.plotLinesAndBandsGroups = {};
         // Shorthand types
-        axis.positiveValuesOnly = !!(axis.logarithmic && !options.allowNegativeLog);
+        axis.positiveValuesOnly = !!axis.logarithmic;
         // Flag, if axis is linked to another axis
         axis.isLinked = defined(options.linkedTo);
         /**
@@ -3472,7 +3472,7 @@ var Axis = /** @class */ (function () {
          *         More information in x axis labels
          *
          * @declare Highcharts.AxisDateTimeLabelFormatsOptions
-         * @product highcharts highstock gantt
+         * @product highcharts highstock
          */
         dateTimeLabelFormats: {
             /**

js/Core/Axis/ColorAxis.js

@@ -28,7 +28,7 @@ var color = Color.parse;
 import H from '../Globals.js';
 var noop = H.noop;
 import Legend from '../Legend.js';
-import LegendSymbolMixin from '../../mixins/legend-symbol.js';
+import LegendSymbolMixin from '../../Mixins/LegendSymbol.js';
 import Point from '../Series/Point.js';
 import U from '../Utilities.js';
 var addEvent = U.addEvent, erase = U.erase, extend = U.extend, Fx = U.Fx, isNumber = U.isNumber, merge = U.merge, pick = U.pick, splat = U.splat;
@@ -38,7 +38,8 @@ var addEvent = U.addEvent, erase = U.erase, extend = U.extend, Fx = U.Fx, isNumb
  * @typedef {"linear"|"logarithmic"} Highcharts.ColorAxisTypeValue
  */
 ''; // detach doclet above
-import '../../mixins/color-series.js';
+import '../../Mixins/ColorSeries.js';
+import '../Series/Series.js';
 var Series = H.Series, colorPointMixin = H.colorPointMixin, colorSeriesMixin = H.colorSeriesMixin;
 extend(Series.prototype, colorSeriesMixin);
 extend(Point.prototype, colorPointMixin);

js/Core/Axis/GridAxis.js

@@ -43,6 +43,42 @@ var applyGridOptions = function applyGridOptions(axis) {
     axis.labelRotation = 0;
     options.labels.rotation = 0;
 };
+/**
+ * For a datetime axis, the scale will automatically adjust to the
+ * appropriate unit. This member gives the default string
+ * representations used for each unit. For intermediate values,
+ * different units may be used, for example the `day` unit can be used
+ * on midnight and `hour` unit be used for intermediate values on the
+ * same axis.
+ * For Gantt possible to declare as a list to provide different
+ * formats depending on available space.
+ * For an overview of the replacement codes, see
+ * [dateFormat](/class-reference/Highcharts#dateFormat).
+ *
+ * Defaults to:
+ * ```js
+ * {
+        hour: {
+            list: ['%H:%M', '%H']
+        },
+        day: {
+            list: ['%A, %e. %B', '%a, %e. %b', '%E']
+        },
+        week: {
+            list: ['Week %W', 'W%W']
+        },
+        month: {
+            list: ['%B', '%b', '%o']
+        }
+    },
+ * ```
+ *
+ * @sample {gantt} gantt/demo/left-axis-table
+ *         Gantt Chart with custom axis date format.
+ *
+ * @product gantt
+ * @apioption xAxis.dateTimeLabelFormats
+ */
 /**
  * Set grid options for the axis labels. Requires Highcharts Gantt.
  *
@@ -121,13 +157,11 @@ Axis.prototype.getMaxLabelDimensions = function (ticks, tickPositions) {
             label = isObject(tick.label) ? tick.label : {};
             // Find width and height of tick
             tickHeight = label.getBBox ? label.getBBox().height : 0;
-            if (label.textStr && !isNumber(label.textPxLength)) {
-                label.textPxLength = label.getBBox().width;
+            if (label.textStr) {
+                // Set the tickWidth same as the label
+                // width after ellipsis applied #10281
+                tickWidth = label.getBBox().width;
             }
-            tickWidth = isNumber(label.textPxLength) ?
-                // Math.round ensures crisp lines
-                Math.round(label.textPxLength) :
-                0;
             // Update the result if width and/or height are larger
             dimensions.height = Math.max(tickHeight, dimensions.height);
             dimensions.width = Math.max(tickWidth, dimensions.width);
@@ -413,7 +447,11 @@ var GridAxis = /** @class */ (function () {
                 var columnOptions = merge(userOptions, gridOptions.columns[gridOptions.columns.length - columnIndex - 1], {
                     linkedTo: 0,
                     // Force to behave like category axis
-                    type: 'category'
+                    type: 'category',
+                    // Disable by default the scrollbar on the grid axis
+                    scrollbar: {
+                        enabled: false
+                    }
                 });
                 delete columnOptions.grid.columns; // Prevent recursion
                 var column = new Axis(axis.chart, columnOptions);

js/Core/Axis/Tick.js

@@ -163,7 +163,7 @@ var Tick = /** @class */ (function () {
             };
         }
         // Call only after first render
-        if (animateLabels && axis._addedPlotLB && axis.isXAxis) {
+        if (animateLabels && axis._addedPlotLB) {
             tick.moveLabel(str, labelOptions);
         }
         // First call
@@ -437,14 +437,14 @@ var Tick = /** @class */ (function () {
      * @return {void}
      */
     Tick.prototype.moveLabel = function (str, labelOptions) {
-        var tick = this, label = tick.label, moved = false, xAxis = tick.axis, chart = xAxis.chart, labelPos, reversed = xAxis.reversed, inverted = chart.inverted, xPos, yPos;
+        var tick = this, label = tick.label, moved = false, axis = tick.axis, labelPos, reversed = axis.reversed, xPos, yPos;
         if (label && label.textStr === str) {
             tick.movedLabel = label;
             moved = true;
             delete tick.label;
         }
         else { // Find a label with the same string
-            objectEach(xAxis.ticks, function (currentTick) {
+            objectEach(axis.ticks, function (currentTick) {
                 if (!moved &&
                     !currentTick.isNew &&
                     currentTick !== tick &&
@@ -460,10 +460,10 @@ var Tick = /** @class */ (function () {
         // Create new label if the actual one is moved
         if (!moved && (tick.labelPos || label)) {
             labelPos = tick.labelPos || label.xy;
-            xPos = inverted ?
-                labelPos.x : (reversed ? 0 : xAxis.width + xAxis.left);
-            yPos = inverted ?
-                (reversed ? (xAxis.width + xAxis.left) : 0) : labelPos.y;
+            xPos = axis.horiz ?
+                (reversed ? 0 : axis.width + axis.left) : labelPos.x;
+            yPos = axis.horiz ?
+                labelPos.y : (reversed ? (axis.width + axis.left) : 0);
             tick.movedLabel = tick.createLabel({ x: xPos, y: yPos }, str, labelOptions);
             if (tick.movedLabel) {
                 tick.movedLabel.attr({ opacity: 0 });
@@ -647,13 +647,13 @@ var Tick = /** @class */ (function () {
      * @return {void}
      */
     Tick.prototype.replaceMovedLabel = function () {
-        var tick = this, label = tick.label, axis = tick.axis, reversed = axis.reversed, chart = tick.axis.chart, inverted = chart.inverted, x, y;
+        var tick = this, label = tick.label, axis = tick.axis, reversed = axis.reversed, x, y;
         // Animate and destroy
         if (label && !tick.isNew) {
-            x = inverted ? label.xy.x : (reversed ? axis.left : axis.width + axis.left);
-            y = inverted ?
-                (reversed ? axis.width + axis.top : axis.top) :
-                label.xy.y;
+            x = axis.horiz ? (reversed ? axis.left : axis.width + axis.left) : label.xy.x;
+            y = axis.horiz ?
+                label.xy.y :
+                (reversed ? axis.width + axis.top : axis.top);
             label.animate({ x: x, y: y, opacity: 0 }, void 0, label.destroy);
             delete tick.label;
         }

js/Core/Axis/TreeGridAxis.js

@@ -13,7 +13,8 @@ import Axis from './Axis.js';
 import Tick from './Tick.js';
 import Tree from '../../Gantt/Tree.js';
 import TreeGridTick from './TreeGridTick.js';
-import TreeSeriesMixin from '../../mixins/tree-series.js';
+import mixinTreeSeries from '../../Mixins/TreeSeries.js';
+var getLevelOptions = mixinTreeSeries.getLevelOptions;
 import U from '../Utilities.js';
 var addEvent = U.addEvent, find = U.find, fireEvent = U.fireEvent, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, merge = U.merge, pick = U.pick, wrap = U.wrap;
 import './GridAxis.js';
@@ -218,7 +219,7 @@ var TreeGridAxis;
         axes.filter(function (axis) {
             return axis.options.type === 'treegrid';
         }).forEach(function (axis) {
-            var options = axis.options || {}, labelOptions = options.labels, uniqueNames = options.uniqueNames, numberOfSeries = 0, isDirty, data, treeGrid;
+            var options = axis.options || {}, labelOptions = options.labels, uniqueNames = options.uniqueNames, numberOfSeries = 0, isDirty, data, treeGrid, max = options.max;
             // Check whether any of series is rendering for the first time,
             // visibility has changed, or its data is dirty,
             // and only then update. #10570, #10580
@@ -249,6 +250,17 @@ var TreeGridAxis;
                     }
                     return arr;
                 }, []);
+                // If max is higher than set data - add a
+                // dummy data to render categories #10779
+                if (max && data.length < max) {
+                    for (var i = data.length; i <= max; i++) {
+                        data.push({
+                            // Use the zero-width character
+                            // to avoid conflict with uniqueNames
+                            name: i + '\u200B'
+                        });
+                    }
+                }
                 // setScale is fired after all the series is initialized,
                 // which is an ideal time to update the axis.categories.
                 treeGrid = getTreeGridFromData(data, uniqueNames || false, (uniqueNames === true) ? numberOfSeries : 1);
@@ -269,7 +281,7 @@ var TreeGridAxis;
                 });
                 // Calculate the label options for each level in the tree.
                 axis.treeGrid.mapOptionsToLevel =
-                    TreeSeriesMixin.getLevelOptions({
+                    getLevelOptions({
                         defaults: labelOptions,
                         from: 1,
                         levels: labelOptions && labelOptions.levels,