highcharts 12.0.2 → 12.1.0

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "12.0.2",
+  "version": "12.1.0",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts"

package/es-modules/Accessibility/Options/A11yDefaults.js

@@ -266,6 +266,8 @@ const Options = {
             /**
              * When a series contains more points than this, we no longer expose
              * information about individual points to screen readers.
+             * Note that the keyboard navigation remains functional, but points
+             * won't have accessible descriptions unless handled separately.
              *
              * Set to `false` to disable.
              *

package/es-modules/Core/Color/Color.js

@@ -192,18 +192,11 @@ class Color {
         }
         // Check for has alpha, because rgba colors perform worse due to
         // lack of support in WebKit.
-        const hasAlpha = (toRgba[3] !== 1 || fromRgba[3] !== 1);
-        return (hasAlpha ? 'rgba(' : 'rgb(') +
-            Math.round(toRgba[0] + (fromRgba[0] - toRgba[0]) * (1 - pos)) +
-            ',' +
-            Math.round(toRgba[1] + (fromRgba[1] - toRgba[1]) * (1 - pos)) +
-            ',' +
-            Math.round(toRgba[2] + (fromRgba[2] - toRgba[2]) * (1 - pos)) +
-            (hasAlpha ?
-                (',' +
-                    (toRgba[3] + (fromRgba[3] - toRgba[3]) * (1 - pos))) :
-                '') +
-            ')';
+        const hasAlpha = (toRgba[3] !== 1 || fromRgba[3] !== 1), channel = (to, i) => to + (fromRgba[i] - to) * (1 - pos), rgba = toRgba.slice(0, 3).map(channel).map(Math.round);
+        if (hasAlpha) {
+            rgba.push(channel(toRgba[3], 3));
+        }
+        return (hasAlpha ? 'rgba(' : 'rgb(') + rgba.join(',') + ')';
     }
 }
 /* *

package/es-modules/Core/Renderer/HTML/HTMLElement.js

@@ -251,7 +251,7 @@ class HTMLElement extends SVGElement {
                 textWidth,
                 this.textAlign
             ].join(','), parentPadding = (this.parentGroup?.padding * -1) || 0;
-            let baseline, hasBoxWidthChanged = false;
+            let baseline;
             // Update textWidth. Use the memoized textPxLength if possible, to
             // avoid the getTextPxLength function using elem.offsetWidth.
             // Calling offsetWidth affects rendering time as it forces layout
@@ -274,10 +274,8 @@ class HTMLElement extends SVGElement {
                         whiteSpace: whiteSpace || 'normal' // #3331
                     });
                     this.oldTextWidth = textWidth;
-                    hasBoxWidthChanged = true; // #8159
                 }
             }
-            this.hasBoxWidthChanged = hasBoxWidthChanged; // #8159
             // Do the calculations and DOM access only if properties changed
             if (currentTextTransform !== this.cTT) {
                 baseline = renderer.fontMetrics(element).b;

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -213,7 +213,9 @@ class SVGElement {
      * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
      */
     align(alignOptions, alignByTranslate, alignTo, redraw = true) {
-        const attribs = {}, renderer = this.renderer, alignedObjects = renderer.alignedObjects, initialAlignment = Boolean(alignOptions);
+        const attribs = {
+            'text-align': alignOptions?.align
+        }, renderer = this.renderer, alignedObjects = renderer.alignedObjects, initialAlignment = Boolean(alignOptions);
         // First call on instanciate
         if (alignOptions) {
             this.alignOptions = alignOptions;

package/es-modules/Core/Renderer/SVG/SVGLabel.js

@@ -71,6 +71,7 @@ class SVGLabel extends SVGElement {
      * */
     alignSetter(value) {
         const alignFactor = getAlignFactor(value);
+        this.textAlign = value;
         if (alignFactor !== this.alignFactor) {
             this.alignFactor = alignFactor;
             // Bounding box exists, means we're dynamically changing
@@ -246,6 +247,7 @@ class SVGLabel extends SVGElement {
     }
     'text-alignSetter'(value) {
         this.textAlign = value;
+        this.updateTextPadding();
     }
     textSetter(text) {
         if (typeof text !== 'undefined') {
@@ -315,24 +317,19 @@ class SVGLabel extends SVGElement {
      * is changed.
      */
     updateTextPadding() {
-        const text = this.text;
+        const text = this.text, textAlign = text.styles.textAlign || this.textAlign;
         if (!text.textPath) {
             this.updateBoxSize();
             // Determine y based on the baseline
             const textY = this.baseline ? 0 : this.baselineOffset, textX = (this.paddingLeft ?? this.padding) +
                 // Compensate for alignment
-                ((defined(this.widthSetting) && this.bBox) ?
-                    getAlignFactor(this.textAlign) *
-                        (this.widthSetting - this.bBox.width) :
-                    0);
+                getAlignFactor(textAlign) * (this.widthSetting ?? this.bBox.width);
             // Update if anything changed
             if (textX !== text.x || textY !== text.y) {
-                text.attr('x', textX);
-                // #8159 - prevent misplaced data labels in treemap
-                // (useHTML: true)
-                if (text.hasBoxWidthChanged) {
-                    this.bBox = text.getBBox(true);
-                }
+                text.attr({
+                    align: textAlign,
+                    x: textX
+                });
                 if (typeof textY !== 'undefined') {
                     text.attr('y', textY);
                 }

package/es-modules/Core/Series/DataLabel.js

@@ -110,7 +110,9 @@ var DataLabel;
                 (unrotatedbBox.width - bBox.width);
             dataLabel.alignAttr.y += getAlignFactor(options.verticalAlign) *
                 (unrotatedbBox.height - bBox.height);
-            dataLabel[dataLabel.placed ? 'animate' : 'attr']({
+            dataLabel.attr({
+                'text-align': dataLabel.alignAttr['text-align'] || 'center'
+            })[dataLabel.placed ? 'animate' : 'attr']({
                 x: dataLabel.alignAttr.x +
                     (bBox.width - unrotatedbBox.width) / 2,
                 y: dataLabel.alignAttr.y +

package/es-modules/Core/Series/Series.js

@@ -2394,9 +2394,14 @@ class Series {
      * @private
      * @function Highcharts.Series#searchKDTree
      */
-    searchKDTree(point, compareX, e) {
+    searchKDTree(point, compareX, e, suppliedPointEvaluator, suppliedBSideCheckEvaluator) {
         const series = this, [kdX, kdY] = this.kdAxisArray, kdComparer = compareX ? 'distX' : 'dist', kdDimensions = (series.options.findNearestPointBy || '')
-            .indexOf('y') > -1 ? 2 : 1, useRadius = !!series.isBubble;
+            .indexOf('y') > -1 ? 2 : 1, useRadius = !!series.isBubble, pointEvaluator = suppliedPointEvaluator || ((p1, p2, comparisonProp) => [
+            (p1[comparisonProp] || 0) < (p2[comparisonProp] || 0) ?
+                p1 :
+                p2,
+            false
+        ]), bSideCheckEvaluator = suppliedBSideCheckEvaluator || ((a, b) => a < b);
         /**
          * Set the one and two dimensional distance on the point object.
          * @private
@@ -2411,28 +2416,21 @@ class Series {
          */
         function doSearch(search, tree, depth, dimensions) {
             const point = tree.point, axis = series.kdAxisArray[depth % dimensions];
-            let nPoint1, nPoint2, ret = point;
+            let ret = point, flip = false;
             setDistance(search, point);
             // Pick side based on distance to splitting point
             const tdist = (search[axis] || 0) - (point[axis] || 0) +
                 (useRadius ? (point.marker?.radius || 0) : 0), sideA = tdist < 0 ? 'left' : 'right', sideB = tdist < 0 ? 'right' : 'left';
             // End of tree
             if (tree[sideA]) {
-                nPoint1 = doSearch(search, tree[sideA], depth + 1, dimensions);
-                ret = (nPoint1[kdComparer] <
-                    ret[kdComparer] ?
-                    nPoint1 :
-                    point);
+                [ret, flip] = pointEvaluator(point, doSearch(search, tree[sideA], depth + 1, dimensions), kdComparer);
             }
             if (tree[sideB]) {
+                const sqrtTDist = Math.sqrt(tdist * tdist), retDist = ret[kdComparer];
                 // Compare distance to current best to splitting point to decide
-                // whether to check side B or not
-                if (Math.sqrt(tdist * tdist) < ret[kdComparer]) {
-                    nPoint2 = doSearch(search, tree[sideB], depth + 1, dimensions);
-                    ret = (nPoint2[kdComparer] <
-                        ret[kdComparer] ?
-                        nPoint2 :
-                        ret);
+                // whether to check side B or no
+                if (bSideCheckEvaluator(sqrtTDist, retDist, flip)) {
+                    ret = pointEvaluator(ret, doSearch(search, tree[sideB], depth + 1, dimensions), kdComparer)[0];
                 }
             }
             return ret;

package/es-modules/Core/Templating.js

@@ -13,7 +13,7 @@ const { defaultOptions, defaultTime } = D;
 import G from './Globals.js';
 const { doc } = G;
 import U from './Utilities.js';
-const { extend, getNestedProperty, isArray, isNumber, isObject, pick, ucfirst } = U;
+const { extend, getNestedProperty, isArray, isNumber, isObject, isString, pick, ucfirst } = U;
 const helpers = {
     // Built-in helpers
     add: (a, b) => a + b,
@@ -48,6 +48,8 @@ const numberFormatCache = {};
  *  Functions
  *
  * */
+// Internal convenience function
+const isQuotedString = (str) => /^["'].+["']$/.test(str);
 /**
  * Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) into a
  * human readable date string. The format is a subset of the formats for PHP's
@@ -125,11 +127,11 @@ function dateFormat(format, timestamp, upperCaseFirst) {
  *         The formatted string.
  */
 function format(str = '', ctx, chart) {
-    const regex = /\{([\p{L}\d:\.,;\-\/<>\[\]%_@"'’= #\(\)]+)\}/gu, 
+    const regex = /\{([\p{L}\d:\.,;\-\/<>\[\]%_@+"'’= #\(\)]+)\}/gu, 
     // The sub expression regex is the same as the top expression regex,
     // but except parens and block helpers (#), and surrounded by parens
     // instead of curly brackets.
-    subRegex = /\(([\p{L}\d:\.,;\-\/<>\[\]%_@"'= ]+)\)/gu, matches = [], floatRegex = /f$/, decRegex = /\.(\d)/, lang = chart?.options.lang || defaultOptions.lang, time = chart && chart.time || defaultTime, numberFormatter = chart && chart.numberFormatter || numberFormat;
+    subRegex = /\(([\p{L}\d:\.,;\-\/<>\[\]%_@+"'= ]+)\)/gu, matches = [], floatRegex = /f$/, decRegex = /\.(\d)/, lang = chart?.options.lang || defaultOptions.lang, time = chart && chart.time || defaultTime, numberFormatter = chart && chart.numberFormatter || numberFormat;
     /*
      * Get a literal or variable value inside a template expression. May be
      * extended with other types like string or null if needed, but keep it
@@ -147,7 +149,7 @@ function format(str = '', ctx, chart) {
         if ((n = Number(key)).toString() === key) {
             return n;
         }
-        if (/^["'].+["']$/.test(key)) {
+        if (isQuotedString(key)) {
             return key.slice(1, -1);
         }
         // Variables and constants
@@ -260,7 +262,8 @@ function format(str = '', ctx, chart) {
             // Simple variable replacement
         }
         else {
-            const valueAndFormat = expression.split(':');
+            const valueAndFormat = isQuotedString(expression) ?
+                [expression] : expression.split(':');
             replacement = resolveProperty(valueAndFormat.shift() || '');
             // Format the replacement
             if (valueAndFormat.length && typeof replacement === 'number') {
@@ -273,13 +276,14 @@ function format(str = '', ctx, chart) {
                 }
                 else {
                     replacement = time.dateFormat(segment, replacement);
-                    // Use string literal in order to be preserved in the outer
-                    // expression
-                    if (hasSub) {
-                        replacement = `"${replacement}"`;
-                    }
                 }
             }
+            // Use string literal in order to be preserved in the outer
+            // expression
+            subRegex.lastIndex = 0;
+            if (subRegex.test(match.find) && isString(replacement)) {
+                replacement = `"${replacement}"`;
+            }
         }
         str = str.replace(match.find, pick(replacement, ''));
     });

package/es-modules/Core/Time.js

@@ -91,7 +91,9 @@ class Time {
          *  Properties
          *
          * */
-        this.options = {};
+        this.options = {
+            timezone: 'UTC'
+        };
         this.variableTimezone = false;
         this.Date = win.Date;
         this.update(options);
@@ -113,12 +115,13 @@ class Time {
      *
      */
     update(options = {}) {
-        let timezone = options.timezone ?? 'UTC';
         this.dTLCache = {};
         this.options = options = merge(true, this.options, options);
         const { timezoneOffset, useUTC } = options;
         // Allow using a different Date class
         this.Date = options.Date || win.Date || Date;
+        // Assign the time zone. Handle the legacy, deprecated `useUTC` option.
+        let timezone = options.timezone;
         if (defined(useUTC)) {
             timezone = useUTC ? 'UTC' : void 0;
         }
@@ -561,7 +564,7 @@ class Time {
         }
         else if (isObject(format)) {
             const tzHours = (this.getTimezoneOffset(timestamp) || 0) /
-                (60000 * 60), timeZone = this.options.timezone || ('Etc/GMT' + (tzHours >= 0 ? '+' : '') + tzHours), { prefix = '', suffix = '' } = format;
+                (60000 * 60), timeZone = this.timezone || ('Etc/GMT' + (tzHours >= 0 ? '+' : '') + tzHours), { prefix = '', suffix = '' } = format;
             format = prefix + this.dateTimeFormat(extend({ timeZone }, format), timestamp) + suffix;
         }
         // Optionally sentence-case the string and return

package/es-modules/Core/Utilities.js

@@ -1094,7 +1094,7 @@ function getNestedProperty(path, parent) {
             }
             return thisProp ?? parent;
         }
-        const child = parent[pathElement];
+        const child = parent[pathElement.replace(/[\\'"]/g, '')];
         // Filter on the child
         if (!defined(child) ||
             typeof child === 'function' ||

package/es-modules/Data/Converters/CSVConverter.js

@@ -432,6 +432,7 @@ CSVConverter.defaultOptions = {
     ...DataConverter.defaultOptions,
     lineDelimiter: '\n'
 };
+DataConverter.registerType('CSV', CSVConverter);
 /* *
  *
  *  Default Export

package/es-modules/Data/Converters/DataConverter.js

@@ -12,6 +12,7 @@
  *  - Gøran Slettemark
  *  - Torstein Hønsi
  *  - Wojciech Chmiel
+ *  - Jomar Hønsi
  *
  * */
 'use strict';
@@ -560,11 +561,41 @@ DataConverter.defaultOptions = {
      *  Declarations
      *
      * */
+    /* *
+     *
+     *  Constants
+     *
+     * */
+    /**
+     * Registry as a record object with connector names and their class.
+     */
+    DataConverter.types = {};
     /* *
      *
      *  Functions
      *
      * */
+    /**
+     * Adds a converter class to the registry.
+     *
+     * @private
+     *
+     * @param {string} key
+     * Registry key of the converter class.
+     *
+     * @param {DataConverterTypes} DataConverterClass
+     * Connector class (aka class constructor) to register.
+     *
+     * @return {boolean}
+     * Returns true, if the registration was successful. False is returned, if
+     * their is already a converter registered with this key.
+     */
+    function registerType(key, DataConverterClass) {
+        return (!!key &&
+            !DataConverter.types[key] &&
+            !!(DataConverter.types[key] = DataConverterClass));
+    }
+    DataConverter.registerType = registerType;
     /**
      * Converts an array of columns to a table instance. Second dimension of the
      * array are the row cells.

package/es-modules/Data/Converters/GoogleSheetsConverter.js

@@ -127,6 +127,7 @@ class GoogleSheetsConverter extends DataConverter {
 GoogleSheetsConverter.defaultOptions = {
     ...DataConverter.defaultOptions
 };
+DataConverter.registerType('GoogleSheets', GoogleSheetsConverter);
 /* *
  *
  *  Default Export

package/es-modules/Data/Converters/HTMLTableConverter.js

@@ -352,6 +352,7 @@ HTMLTableConverter.defaultOptions = {
     useRowspanHeaders: true,
     useMultiLevelHeaders: true
 };
+DataConverter.registerType('HTMLTable', HTMLTableConverter);
 /* *
  *
  *  Default Export

package/es-modules/Data/Converters/JSONConverter.js

@@ -173,6 +173,7 @@ JSONConverter.defaultOptions = {
     data: [],
     orientation: 'rows'
 };
+DataConverter.registerType('JSON', JSONConverter);
 /* *
  *
  *  Default Export

package/es-modules/Extensions/Boost/BoostSeries.js

@@ -547,10 +547,17 @@ function getPoint(series, boostPoint) {
     if (boostPoint instanceof PointClass) {
         return boostPoint;
     }
-    const xData = ((series.getColumn('x').length ? series.getColumn('x') : void 0) ||
+    const isScatter = series.is('scatter'), xData = ((isScatter && series.getColumn('x', true).length ?
+        series.getColumn('x', true) :
+        void 0) ||
+        (series.getColumn('x').length ? series.getColumn('x') : void 0) ||
         seriesOptions.xData ||
         series.getColumn('x', true) ||
-        false), point = new PointClass(series, (isArray(series.options.data) ? series.options.data : [])[boostPoint.i], xData ? xData[boostPoint.i] : void 0);
+        false), yData = (series.getColumn('y', true) ||
+        seriesOptions.yData ||
+        false), point = new PointClass(series, (isScatter && xData && yData) ?
+        [xData[boostPoint.i], yData[boostPoint.i]] :
+        (isArray(series.options.data) ? series.options.data : [])[boostPoint.i], xData ? xData[boostPoint.i] : void 0);
     point.category = pick(xAxis.categories ?
         xAxis.categories[point.x] :
         point.x, // @todo simplify
@@ -569,7 +576,6 @@ function getPoint(series, boostPoint) {
  * @private
  */
 function scatterProcessData(force) {
-    var _a, _b, _c, _d;
     const series = this, { options, xAxis, yAxis } = series;
     // Process only on changes
     if (!series.isDirty &&
@@ -636,12 +642,12 @@ function scatterProcessData(force) {
         }
     }
     if (xRangeNeeded) {
-        (_a = xAxis.options).max ?? (_a.max = xDataMax);
-        (_b = xAxis.options).min ?? (_b.min = xDataMin);
+        xAxis.dataMax = Math.max(xDataMax, xAxis.dataMax || 0);
+        xAxis.dataMin = Math.min(xDataMin, xAxis.dataMin || 0);
     }
     if (yRangeNeeded) {
-        (_c = yAxis.options).max ?? (_c.max = yDataMax);
-        (_d = yAxis.options).min ?? (_d.min = yDataMin);
+        yAxis.dataMax = Math.max(yDataMax, yAxis.dataMax || 0);
+        yAxis.dataMin = Math.min(yDataMin, yAxis.dataMin || 0);
     }
     // Set properties as base processData
     series.cropped = cropped;

package/es-modules/Extensions/DragPanes/AxisResizer.js

@@ -214,7 +214,7 @@ class AxisResizer {
                 }
                 top = axis.top;
                 const minLength = Math.round(relativeLength(axisOptions.minLength || NaN, plotHeight)), maxLength = Math.round(relativeLength(axisOptions.maxLength || NaN, plotHeight));
-                if (!isFirst) {
+                if (!isFirst && axesGroup === nextAxes) {
                     // Try to change height first. yDelta could had changed
                     yDelta = chartY - resizer.lastPos;
                     // Normalize height to option limits

package/es-modules/Extensions/SeriesLabel/SeriesLabelDefaults.js

@@ -79,7 +79,9 @@ const SeriesLabelDefaults = {
      * small areas get a smaller font size. The default applies this
      * effect to area-like series but not line-like series.
      *
-     * @type {number|null}
+     * @sample highcharts/demo/streamgraph
+     *         Min and max font size on a streamgraph
+     * @type   {number|null}
      */
     minFontSize: null,
     /**
@@ -87,7 +89,10 @@ const SeriesLabelDefaults = {
      * small areas get a smaller font size. The default applies this
      * effect to area-like series but not line-like series.
      *
-     * @type {number|null}
+     * @sample highcharts/demo/streamgraph
+     *         Min and max font size on a streamgraph
+     *
+     * @type   {number|null}
      */
     maxFontSize: null,
     /**

package/es-modules/Series/Bubble/BubbleSeries.js

@@ -325,6 +325,30 @@ class BubbleSeries extends ScatterSeries {
             }
         }
     }
+    /**
+     * @private
+     * @function Highcharts.Series#searchKDTree
+     */
+    searchKDTree(point, compareX, e, suppliedPointEvaluator = noop, suppliedBSideCheckEvaluator = noop) {
+        suppliedPointEvaluator = (p1, p2, comparisonProp) => {
+            const p1Dist = p1[comparisonProp] || 0;
+            const p2Dist = p2[comparisonProp] || 0;
+            let ret, flip = false;
+            if (p1Dist < 0 && p2Dist < 0) {
+                ret = (p1Dist - (p1.marker?.radius || 0) >=
+                    p2Dist - (p2.marker?.radius || 0)) ?
+                    p1 :
+                    p2;
+                flip = true;
+            }
+            else {
+                ret = p1Dist < p2Dist ? p1 : p2;
+            }
+            return [ret, flip];
+        };
+        suppliedBSideCheckEvaluator = (a, b, flip) => !flip && (a > b) || (a < b);
+        return super.searchKDTree(point, compareX, e, suppliedPointEvaluator, suppliedBSideCheckEvaluator);
+    }
 }
 /* *
  *

package/es-modules/Series/Organization/OrganizationSeriesDefaults.js

@@ -209,7 +209,9 @@ const OrganizationSeriesDefaults = {
             /** @internal */
             fontWeight: 'normal',
             /** @internal */
-            fontSize: '0.9em'
+            fontSize: '0.9em',
+            /** @internal */
+            textAlign: 'left'
         },
         useHTML: true,
         linkTextPath: {

package/es-modules/Series/Timeline/TimelineSeriesDefaults.js

@@ -150,7 +150,9 @@ const TimelineSeriesDefaults = {
             /** @internal */
             fontWeight: 'normal',
             /** @internal */
-            fontSize: '0.8em'
+            fontSize: '0.8em',
+            /** @internal */
+            textAlign: 'left'
         },
         /**
          * Shadow options for the data label.

package/es-modules/Series/Treegraph/TreegraphSeriesDefaults.js

@@ -32,7 +32,7 @@
  *               alternateStartingDirection, borderRadius, breadcrumbs,
  *               interactByLeaf, layoutStartingDirection, levelIsConstant,
  *               lineWidth, negativeColor, nodes, sortIndex, zoneAxis,
- *               zones
+ *               zones, cluster
  *
  * @product      highcharts
  * @since 10.3.0
@@ -174,6 +174,7 @@ const TreegraphSeriesDefaults = {
     fillSpace: false,
     /**
      * @extends plotOptions.series.tooltip
+     * @excluding clusterFormat
      */
     tooltip: {
         /**
@@ -234,6 +235,7 @@ const TreegraphSeriesDefaults = {
         },
         enabled: true,
         linkFormatter: () => '',
+        padding: 5,
         style: {
             textOverflow: 'none'
         }

package/es-modules/Series/Treemap/TreemapPoint.js

@@ -28,6 +28,7 @@ class TreemapPoint extends ScatterPoint {
          *
          * */
         super(...arguments);
+        this.groupedPointsAmount = 0;
         this.shapeType = 'rect';
     }
     /* *
@@ -46,11 +47,15 @@ class TreemapPoint extends ScatterPoint {
             this.node.children.length) {
             className += ' highcharts-above-level';
         }
-        else if (!this.node.isLeaf &&
+        else if (!this.node.isGroup &&
+            !this.node.isLeaf &&
+            !series.nodeMap[series.rootNode].isGroup &&
             !pick(options.interactByLeaf, !options.allowTraversingTree)) {
             className += ' highcharts-internal-node-interactive';
         }
-        else if (!this.node.isLeaf) {
+        else if (!this.node.isGroup &&
+            !this.node.isLeaf &&
+            !series.nodeMap[series.rootNode].isGroup) {
             className += ' highcharts-internal-node';
         }
         return className;