highcharts 12.0.1 → 12.1.0

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "12.0.1",
+  "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/Axis/Axis.js

@@ -556,7 +556,7 @@ class Axis {
      * Pixel position of the value on the chart or axis.
      */
     toPixels(value, paneCoordinates) {
-        return this.translate(this.chart.time.parse(value) ?? NaN, false, !this.horiz, void 0, true) + (paneCoordinates ? 0 : this.pos);
+        return this.translate(this.chart?.time.parse(value) ?? NaN, false, !this.horiz, void 0, true) + (paneCoordinates ? 0 : this.pos);
     }
     /**
      * Translate a pixel position along the axis to a value in terms of axis

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

@@ -12,9 +12,9 @@ import A from '../../Animation/AnimationUtilities.js';
 const { animate, animObject, stop } = A;
 import Color from '../../Color/Color.js';
 import H from '../../Globals.js';
-const { deg2rad, doc, svg, SVG_NS, win } = H;
+const { deg2rad, doc, svg, SVG_NS, win, isFirefox } = H;
 import U from '../../Utilities.js';
-const { addEvent, attr, createElement, crisp, css, defined, erase, extend, fireEvent, getAlignFactor, isArray, isFunction, isObject, isString, merge, objectEach, pick, pInt, pushUnique, replaceNested, syncTimeout, uniqueKey } = U;
+const { addEvent, attr, createElement, crisp, css, defined, erase, extend, fireEvent, getAlignFactor, isArray, isFunction, isNumber, isObject, isString, merge, objectEach, pick, pInt, pushUnique, replaceNested, syncTimeout, uniqueKey } = U;
 /* *
  *
  *  Class
@@ -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;
@@ -730,6 +732,12 @@ class SVGElement {
             if (textWidth && (!svg && this.renderer.forExport)) {
                 delete styles.width;
             }
+            const fontSize = isFirefox && styles.fontSize || null;
+            // Necessary in firefox to be able to set font-size, #22124
+            if (fontSize && (isNumber(fontSize) ||
+                /^\d+$/.test(fontSize))) {
+                styles.fontSize += 'px';
+            }
             const stylesToApply = merge(styles);
             if (elem.namespaceURI === this.SVG_NS) {
                 // These CSS properties are interpreted internally by the SVG

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/Renderer/SVG/TextBuilder.js

@@ -375,7 +375,7 @@ class TextBuilder {
                     // is "5" and end is 1.
                     try {
                         lengths[end] = startAt +
-                            parentNode.getSubStringLength(0, words && !startAt ? end + 1 : end);
+                            parentNode.getSubStringLength(0, words ? end + 1 : end);
                     }
                     catch (e) {
                         '';

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/Tooltip.js

@@ -730,7 +730,8 @@ class Tooltip {
                     if (this.outside) {
                         label.attr({
                             x: clamp(label.x || 0, 0, this.getPlayingField().width -
-                                (label.width || 0))
+                                (label.width || 0) -
+                                1)
                         });
                     }
                     if (!styledMode) {