highcharts 11.4.3 → 11.4.5

package/es-modules/Data/DataTable.js

@@ -9,6 +9,7 @@
  *  Authors:
  *  - Sophie Bremer
  *  - Gøran Slettemark
+ *  - Jomar Hønsi
  *
  * */
 'use strict';
@@ -114,7 +115,7 @@ class DataTable {
         this.autoId = !options.id;
         this.columns = {};
         /**
-         * ID of the table for indentification purposes.
+         * ID of the table for identification purposes.
          *
          * @name Highcharts.DataTable#id
          * @type {string}
@@ -123,6 +124,7 @@ class DataTable {
         this.modified = this;
         this.rowCount = 0;
         this.versionTag = uniqueKey();
+        this.rowKeysId = options.rowKeysId;
         const columns = options.columns || {}, columnNames = Object.keys(columns), thisColumns = this.columns;
         let rowCount = 0;
         for (let i = 0, iEnd = columnNames.length, column, columnName; i < iEnd; ++i) {
@@ -140,6 +142,7 @@ class DataTable {
             alias = aliasKeys[i];
             thisAliases[alias] = aliases[alias];
         }
+        this.setRowKeysColumn(rowCount);
     }
     /* *
      *
@@ -175,6 +178,9 @@ class DataTable {
         if (!table.autoId) {
             tableOptions.id = table.id;
         }
+        if (table.rowKeysId) {
+            tableOptions.rowKeysId = table.rowKeysId;
+        }
         const tableClone = new DataTable(tableOptions);
         if (!skipColumns) {
             tableClone.versionTag = table.versionTag;
@@ -245,7 +251,13 @@ class DataTable {
                 }
                 delete columns[columnName];
             }
-            if (!Object.keys(columns).length) {
+            let nColumns = Object.keys(columns).length;
+            if (table.rowKeysId && nColumns === 1) {
+                // All columns deleted, remove row keys column
+                delete columns[table.rowKeysId];
+                nColumns = 0;
+            }
+            if (!nColumns) {
                 table.rowCount = 0;
             }
             if (modifier) {
@@ -415,7 +427,7 @@ class DataTable {
             case 'number':
                 return (isNaN(cellValue) && !useNaN ? null : cellValue);
         }
-        cellValue = parseFloat(`${cellValue}`);
+        cellValue = parseFloat(`${cellValue ?? ''}`);
         return (isNaN(cellValue) && !useNaN ? null : cellValue);
     }
     /**
@@ -437,6 +449,7 @@ class DataTable {
         columnNameOrAlias = (table.aliases[columnNameOrAlias] ||
             columnNameOrAlias);
         const column = table.columns[columnNameOrAlias];
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         return `${(column && column[rowIndex])}`;
     }
     /**
@@ -516,6 +529,7 @@ class DataTable {
      */
     getColumnNames() {
         const table = this, columnNames = Object.keys(table.columns);
+        this.removeRowKeysColumn(columnNames);
         return columnNames;
     }
     /**
@@ -536,6 +550,7 @@ class DataTable {
     getColumns(columnNamesOrAliases, asReference) {
         const table = this, tableAliasMap = table.aliases, tableColumns = table.columns, columns = {};
         columnNamesOrAliases = (columnNamesOrAliases || Object.keys(tableColumns));
+        this.removeRowKeysColumn(columnNamesOrAliases);
         for (let i = 0, iEnd = columnNamesOrAliases.length, column, columnName; i < iEnd; ++i) {
             columnName = columnNamesOrAliases[i];
             column = tableColumns[(tableAliasMap[columnName] || columnName)];
@@ -652,6 +667,7 @@ class DataTable {
     getRowObjects(rowIndex = 0, rowCount = (this.rowCount - rowIndex), columnNamesOrAliases) {
         const table = this, aliases = table.aliases, columns = table.columns, rows = new Array(rowCount);
         columnNamesOrAliases = (columnNamesOrAliases || Object.keys(columns));
+        this.removeRowKeysColumn(columnNamesOrAliases);
         for (let i = rowIndex, i2 = 0, iEnd = Math.min(table.rowCount, (rowIndex + rowCount)), column, row; i < iEnd; ++i, ++i2) {
             row = rows[i2] = {};
             for (const columnName of columnNamesOrAliases) {
@@ -788,6 +804,10 @@ class DataTable {
                 }
                 columns[newColumnName] = columns[columnName];
                 delete columns[columnName];
+                if (table.rowKeysId) {
+                    // Ensure that row keys column is last
+                    this.moveRowKeysColumnToLast(columns, table.rowKeysId);
+                }
             }
             return true;
         }
@@ -923,6 +943,10 @@ class DataTable {
         if (tableModifier) {
             tableModifier.modifyColumns(table, columns, (rowIndex || 0));
         }
+        if (table.rowKeysId) {
+            // Ensure that the row keys column is always last
+            this.moveRowKeysColumnToLast(tableColumns, table.rowKeysId);
+        }
         table.emit({
             type: 'afterSetColumns',
             columns,
@@ -931,6 +955,63 @@ class DataTable {
             rowIndex
         });
     }
+    /**
+     * Sets the row key column. This column is invisible and the cells
+     * serve as identifiers to the rows they are contained in. Accessing
+     * rows by keys instead of indexes is necessary in cases where rows
+     * are rearranged by a DataModifier (e.g. SortModifier or RangeModifier).
+     *
+     * @function Highcharts.DataTable#setRowKeysColumn
+     *
+     * @param {number} nRows
+     * Number of rows to add to the column.
+     *
+     */
+    setRowKeysColumn(nRows) {
+        const id = this.rowKeysId;
+        if (!id) {
+            return;
+        }
+        this.columns[id] = [];
+        const keysArray = this.columns[id];
+        for (let i = 0; i < nRows; i++) {
+            keysArray.push(id + '_' + i);
+        }
+    }
+    /**
+     * Get the row key column.
+     *
+     * @function Highcharts.DataTable#getRowKeysColumn
+     *     *
+     * @return {DataTable.Column|undefined}
+     * Returns row keys if rowKeysId is defined, else undefined.
+     */
+    getRowKeysColumn() {
+        const id = this.rowKeysId;
+        if (id) {
+            return this.columns[id];
+        }
+    }
+    /**
+     * Get the row index in the original (unmodified) data table.
+     *
+     * @function Highcharts.DataTable#getRowIndexOriginal
+     *
+     * @param {number} idx
+     * Row index in the modified data table.
+     *
+     * @return {string}
+     * Row index in the original data table.
+     */
+    getRowIndexOriginal(idx) {
+        const id = this.rowKeysId;
+        if (id) {
+            const rowKeyCol = this.columns[id];
+            const idxOrig = '' + rowKeyCol[idx];
+            return idxOrig.split('_')[1];
+        }
+        return String(idx);
+    }
     /**
      * Sets or unsets the modifier for the table.
      * @private
@@ -942,7 +1023,7 @@ class DataTable {
      * Custom information for pending events.
      *
      * @return {Promise<Highcharts.DataTable>}
-     * Resolves to this table if successfull, or rejects on failure.
+     * Resolves to this table if successful, or rejects on failure.
      *
      * @emits #setModifier
      * @emits #afterSetModifier
@@ -1018,7 +1099,7 @@ class DataTable {
      * Row values to set.
      *
      * @param {number} [rowIndex]
-     * Index of the first row to set. Leave `undefind` to add as new rows.
+     * Index of the first row to set. Leave `undefined` to add as new rows.
      *
      * @param {Highcharts.DataTableEventDetail} [eventDetail]
      * Custom information for pending events.
@@ -1066,6 +1147,9 @@ class DataTable {
                 columns[columnNames[i]].length = indexRowCount;
             }
         }
+        if (this.rowKeysId && !columnNames.includes(this.rowKeysId)) {
+            this.setRowKeysColumn(rowCount);
+        }
         if (modifier) {
             modifier.modifyRows(table, rows, rowIndex);
         }
@@ -1077,6 +1161,23 @@ class DataTable {
             rows
         });
     }
+    // The row keys column must always be the last column
+    moveRowKeysColumnToLast(columns, id) {
+        const rowKeyColumn = columns[id];
+        delete columns[id];
+        columns[id] = rowKeyColumn;
+    }
+    // The row keys column must be removed in some methods
+    // (API backwards compatibility)
+    removeRowKeysColumn(columnNamesOrAliases) {
+        if (this.rowKeysId) {
+            const pos = columnNamesOrAliases.indexOf(this.rowKeysId);
+            if (pos !== -1) {
+                // Always the last column
+                columnNamesOrAliases.pop();
+            }
+        }
+    }
 }
 /* *
  *

package/es-modules/Data/Formula/FormulaParser.js

@@ -24,12 +24,12 @@ const booleanRegExp = /^(?:FALSE|TRUE)/;
  * `.`-separated decimal.
  * @private
  */
-const decimal1RegExp = /^[+-]?\d+(?:\.\d+)?(?:e[+-]\d+)?/;
+const decimal1RegExp = /^[+\-]?\d+(?:\.\d+)?(?:e[+\-]\d+)?/;
 /**
  * `,`-separated decimal.
  * @private
  */
-const decimal2RegExp = /^[+-]?\d+(?:,\d+)?(?:e[+-]\d+)?/;
+const decimal2RegExp = /^[+\-]?\d+(?:,\d+)?(?:e[+\-]\d+)?/;
 /**
  * - Group 1: Function name
  * @private

package/es-modules/Extensions/Annotations/Controllables/ControllableDefaults.js

@@ -57,7 +57,7 @@ const defaultMarkers = {
         children: [{
                 tagName: 'path',
                 attributes: {
-                    d: 'M 0 0 L 10 5 L 0 10 Z',
+                    d: 'M 0 0 L 10 5 L 0 10 Z', // Triangle (used as an arrow)
                     'stroke-width': 0
                 }
             }]

package/es-modules/Extensions/Annotations/Controllables/ControllablePath.js

@@ -185,7 +185,7 @@ class ControllablePath extends Controllable {
             .add(parent);
         if (!this.annotation.chart.styledMode) {
             this.tracker.attr({
-                'stroke-linejoin': 'round',
+                'stroke-linejoin': 'round', // #1225
                 stroke: TRACKER_FILL,
                 fill: TRACKER_FILL,
                 'stroke-width': this.graphic.strokeWidth() +

package/es-modules/Extensions/Annotations/NavigationBindings.js

@@ -375,8 +375,7 @@ class NavigationBindings {
             }
         }
         else {
-            chart.stockTools &&
-                chart.stockTools.toggleButtonActiveClass(button);
+            chart.stockTools && button.classList.remove('highcharts-active');
             svgContainer.removeClass('highcharts-draw-mode');
             navigation.nextEvent = false;
             navigation.mouseMoveEvent = false;

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

@@ -92,7 +92,7 @@ function compose(ChartClass, AxisClass, SeriesClass, seriesTypes, ColorClass) {
 /**
  * Returns true if the current browser supports WebGL.
  *
- * @requires module:modules/boost
+ * @requires modules/boost
  *
  * @function Highcharts.hasWebGLSupport
  *

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

@@ -202,14 +202,20 @@ function onChartCallback(chart) {
     addEvent(chart, 'redraw', canvasToSVG);
     let prevX = -1;
     let prevY = -1;
-    addEvent(chart.pointer, 'afterGetHoverData', () => {
-        const series = chart.hoverSeries;
+    addEvent(chart.pointer, 'afterGetHoverData', (e) => {
+        const series = e.hoverPoint?.series;
         chart.boost = chart.boost || {};
         if (chart.boost.markerGroup && series) {
             const xAxis = chart.inverted ? series.yAxis : series.xAxis;
             const yAxis = chart.inverted ? series.xAxis : series.yAxis;
             if ((xAxis && xAxis.pos !== prevX) ||
                 (yAxis && yAxis.pos !== prevY)) {
+                // #21176: If the axis is changed, hide teh halo without
+                // animation  to prevent flickering of halos sharing the
+                // same marker group
+                chart.series.forEach((s) => {
+                    s.halo?.hide();
+                });
                 // #10464: Keep the marker group position in sync with the
                 // position of the hovered series axes since there is only
                 // one shared marker group when boosting.

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

@@ -242,7 +242,7 @@ function createAndAttachRenderer(chart, series) {
             })
                 .addClass(hasClickHandler ? 'highcharts-tracker' : '');
             if (target instanceof ChartClass) {
-                target.boost.markerGroup.translate(chart.plotLeft, chart.plotTop);
+                target.boost?.markerGroup?.translate(chart.plotLeft, chart.plotTop);
             }
         };
         boost.clipRect = chart.renderer.clipRect();
@@ -421,7 +421,15 @@ function enterBoost(series) {
  * @function Highcharts.Series#exitBoost
  */
 function exitBoost(series) {
-    const boost = series.boost;
+    const boost = series.boost, chart = series.chart, chartBoost = chart.boost;
+    if (chartBoost?.markerGroup) {
+        chartBoost.markerGroup.destroy();
+        chartBoost.markerGroup = void 0;
+        for (const s of chart.series) {
+            s.markerGroup = void 0;
+            s.markerGroup = s.plotGroup('markerGroup', 'markers', 'visible', 1, chart.seriesGroup).addClass('highcharts-tracker');
+        }
+    }
     // Reset instance properties and/or delete instance properties and go back
     // to prototype
     if (boost) {
@@ -641,13 +649,13 @@ function scatterProcessData(force) {
  * @function Highcharts.Series#renderCanvas
  */
 function seriesRenderCanvas() {
-    const options = this.options || {}, chart = this.chart, xAxis = this.xAxis, yAxis = this.yAxis, xData = options.xData || this.processedXData, yData = options.yData || this.processedYData, rawData = this.processedData || options.data, xExtremes = xAxis.getExtremes(), 
+    const options = this.options || {}, chart = this.chart, chartBoost = chart.boost, seriesBoost = this.boost, xAxis = this.xAxis, yAxis = this.yAxis, xData = options.xData || this.processedXData, yData = options.yData || this.processedYData, rawData = this.processedData || options.data, xExtremes = xAxis.getExtremes(), 
     // Taking into account the offset of the min point #19497
     xMin = xExtremes.min - (xAxis.minPointOffset || 0), xMax = xExtremes.max + (xAxis.minPointOffset || 0), yExtremes = yAxis.getExtremes(), yMin = yExtremes.min - (yAxis.minPointOffset || 0), yMax = yExtremes.max + (yAxis.minPointOffset || 0), pointTaken = {}, sampling = !!this.sampling, enableMouseTracking = options.enableMouseTracking, threshold = options.threshold, isRange = this.pointArrayMap &&
         this.pointArrayMap.join(',') === 'low,high', isStacked = !!options.stacking, cropStart = this.cropStart || 0, requireSorting = this.requireSorting, useRaw = !xData, compareX = options.findNearestPointBy === 'x', xDataFull = (this.xData ||
         this.options.xData ||
         this.processedXData ||
-        false);
+        false), lineWidth = pick(options.lineWidth, 1);
     let renderer = false, lastClientX, yBottom = yAxis.getThreshold(threshold), minVal, maxVal, minI, maxI;
     // When touch-zooming or mouse-panning, re-rendering the canvas would not
     // perform fast enough. Instead, let the axes redraw, but not the series.
@@ -671,8 +679,7 @@ function seriesRenderCanvas() {
     if (!isChartSeriesBoosting(chart)) {
         // If all series were boosting, but are not anymore
         // restore private markerGroup
-        if (chart.boost &&
-            this.markerGroup === chart.boost.markerGroup) {
+        if (this.markerGroup === chartBoost?.markerGroup) {
             this.markerGroup = void 0;
         }
         this.markerGroup = this.plotGroup('markerGroup', 'markers', 'visible', 1, chart.seriesGroup).addClass('highcharts-tracker');
@@ -681,15 +688,17 @@ function seriesRenderCanvas() {
         // If series has a private markerGroup, remove that
         // and use common markerGroup
         if (this.markerGroup &&
-            this.markerGroup !== chart.boost.markerGroup) {
+            this.markerGroup !== chartBoost?.markerGroup) {
             this.markerGroup.destroy();
         }
         // Use a single group for the markers
-        this.markerGroup = chart.boost.markerGroup;
+        this.markerGroup = chartBoost?.markerGroup;
         // When switching from chart boosting mode, destroy redundant
         // series boosting targets
-        if (this.boost && this.boost.target) {
-            this.renderTarget = this.boost.target = this.boost.target.destroy();
+        if (seriesBoost && seriesBoost.target) {
+            this.renderTarget =
+                seriesBoost.target =
+                    seriesBoost.target.destroy();
         }
     }
     const points = this.points = [], addKDPoint = (clientX, plotY, i, percentage) => {
@@ -733,6 +742,28 @@ function seriesRenderCanvas() {
     // Do not start building while drawing
     this.buildKDTree = noop;
     fireEvent(this, 'renderCanvas');
+    if (this.is('line') &&
+        lineWidth > 1 &&
+        seriesBoost?.target &&
+        chartBoost &&
+        !chartBoost.lineWidthFilter) {
+        chartBoost.lineWidthFilter = chart.renderer.definition({
+            tagName: 'filter',
+            children: [
+                {
+                    tagName: 'feMorphology',
+                    attributes: {
+                        operator: 'dilate',
+                        radius: 0.25 * lineWidth
+                    }
+                }
+            ],
+            attributes: { id: 'linewidth' }
+        });
+        seriesBoost.target.attr({
+            filter: 'url(#linewidth)'
+        });
+    }
     if (renderer) {
         allocateIfNotSeriesBoosting(renderer, this);
         renderer.pushSeries(this);

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

@@ -143,7 +143,7 @@ const vertexShader = [
     'cvsOffset -= sign * len;',
     '}',
     'return sign * (val - localMin) * localA + cvsOffset + ',
-    '(sign * minPixelPadding);',
+    '(sign * minPixelPadding);', // ' + localA * pointPlacement * pointRange;',
     '}',
     'float xToPixels(float value) {',
     'if (skipTranslation){',

package/es-modules/Extensions/BorderRadius.js

@@ -88,9 +88,9 @@ function applyBorderRadius(path, i, r) {
                 'A',
                 r,
                 r,
-                0,
-                0,
-                1,
+                0, // Slanting,
+                0, // Long arc
+                1, // Clockwise
                 cx + bigR * Math.cos(params.start),
                 cy + bigR * Math.sin(params.start)
             ]);

package/es-modules/Extensions/Breadcrumbs/Breadcrumbs.js

@@ -146,8 +146,6 @@ class Breadcrumbs {
     /**
      * Update Breadcrumbs properties, like level and list.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#updateProperties
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -161,8 +159,6 @@ class Breadcrumbs {
      * Set breadcrumbs list.
      * @function Highcharts.Breadcrumbs#setList
      *
-     * @requires  modules/breadcrumbs
-     *
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
      * @param {Highcharts.BreadcrumbsOptions} list
@@ -174,8 +170,6 @@ class Breadcrumbs {
     /**
      * Calculate level on which chart currently is.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#setLevel
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -186,8 +180,6 @@ class Breadcrumbs {
     /**
      * Get Breadcrumbs level
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#getLevel
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -198,8 +190,6 @@ class Breadcrumbs {
     /**
      * Default button text formatter.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#getButtonText
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -227,8 +217,6 @@ class Breadcrumbs {
     /**
      * Redraw.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#redraw
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -245,8 +233,6 @@ class Breadcrumbs {
     /**
      * Create a group, then draw breadcrumbs together with the separators.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#render
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -275,8 +261,6 @@ class Breadcrumbs {
     /**
      * Draw breadcrumbs together with the separators.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#renderFullPathButtons
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -292,8 +276,6 @@ class Breadcrumbs {
      * Render Single button - when showFullPath is not used. The button is
      * similar to the old drillUpButton
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#renderSingleButton
      * @param {Highcharts.Breadcrumbs} this Breadcrumbs class.
      */
@@ -323,8 +305,6 @@ class Breadcrumbs {
     /**
      * Update group position based on align and it's width.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#renderSingleButton
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -355,8 +335,6 @@ class Breadcrumbs {
     /**
      * Render a button.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#renderButton
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -403,8 +381,6 @@ class Breadcrumbs {
     /**
      * Render a separator.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#renderSeparator
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -430,8 +406,6 @@ class Breadcrumbs {
      * Update.
      * @function Highcharts.Breadcrumbs#update
      *
-     * @requires  modules/breadcrumbs
-     *
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
      * @param {Highcharts.BreadcrumbsOptions} options
@@ -448,8 +422,6 @@ class Breadcrumbs {
      * Update button text when the showFullPath set to false.
      * @function Highcharts.Breadcrumbs#updateSingleButton
      *
-     * @requires  modules/breadcrumbs
-     *
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
      */
@@ -464,8 +436,6 @@ class Breadcrumbs {
     /**
      * Destroy the chosen breadcrumbs group
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#destroy
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -484,8 +454,6 @@ class Breadcrumbs {
     /**
      * Destroy the elements' buttons and separators.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#destroyListElements
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -510,8 +478,6 @@ class Breadcrumbs {
     /**
      * Destroy the single button if exists.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#destroySingleButton
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -525,8 +491,6 @@ class Breadcrumbs {
     /**
      * Reset state for all buttons in elementList.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#resetElementListState
      * @param {Highcharts.Breadcrumbs} this
      *        Breadcrumbs class.
@@ -539,8 +503,6 @@ class Breadcrumbs {
     /**
      * Update rendered elements inside the elementList.
      *
-     * @requires  modules/breadcrumbs
-     *
      * @function Highcharts.Breadcrumbs#updateListElements
      *
      * @param {Highcharts.Breadcrumbs} this