highcharts 12.2.0 → 12.3.0

package/es-modules/Data/Connectors/JSONConnector.js

@@ -14,7 +14,7 @@
 import DataConnector from './DataConnector.js';
 import U from '../../Core/Utilities.js';
 import JSONConverter from '../Converters/JSONConverter.js';
-const { merge } = U;
+const { merge, defined } = U;
 /* *
  *
  *  Class
@@ -36,12 +36,15 @@ class JSONConnector extends DataConnector {
      *
      * @param {JSONConnector.UserOptions} [options]
      * Options for the connector and converter.
+     *
+     * @param {Array<DataTableOptions>} [dataTables]
+     * Multiple connector data tables options.
      */
-    constructor(options) {
+    constructor(options, dataTables) {
         const mergedOptions = merge(JSONConnector.defaultOptions, options);
-        super(mergedOptions);
-        this.converter = new JSONConverter(mergedOptions);
-        this.options = mergedOptions;
+        super(mergedOptions, dataTables);
+        this.options = defined(dataTables) ?
+            merge(mergedOptions, { dataTables }) : mergedOptions;
         if (mergedOptions.enablePolling) {
             this.startPolling(Math.max(mergedOptions.dataRefreshRate || 0, 1) * 1000);
         }
@@ -61,40 +64,58 @@ class JSONConnector extends DataConnector {
      * @emits JSONConnector#afterLoad
      */
     load(eventDetail) {
-        const connector = this, converter = connector.converter, table = connector.table, { data, dataUrl, dataModifier } = connector.options;
+        const connector = this, tables = connector.dataTables, { data, dataUrl, dataModifier, dataTables } = connector.options;
         connector.emit({
             type: 'load',
             data,
             detail: eventDetail,
-            table
+            tables
         });
         return Promise
             .resolve(dataUrl ?
-            fetch(dataUrl).then((response) => response.json())['catch']((error) => {
+            fetch(dataUrl, {
+                signal: connector?.pollingController?.signal
+            }).then((response) => response.json())['catch']((error) => {
                 connector.emit({
                     type: 'loadError',
                     detail: eventDetail,
                     error,
-                    table
+                    tables
                 });
                 console.warn(`Unable to fetch data from ${dataUrl}.`); // eslint-disable-line no-console
             }) :
             data || [])
             .then((data) => {
             if (data) {
-                // If already loaded, clear the current rows
-                table.deleteColumns();
-                converter.parse({ data });
-                table.setColumns(converter.getTable().getColumns());
+                this.initConverters(data, (key) => {
+                    const options = this.options;
+                    const tableOptions = dataTables?.find((dataTable) => dataTable.key === key);
+                    // Takes over the connector default options.
+                    const mergedTableOptions = {
+                        dataTableKey: key,
+                        columnNames: tableOptions?.columnNames ??
+                            options.columnNames,
+                        firstRowAsNames: tableOptions?.firstRowAsNames ??
+                            options.firstRowAsNames,
+                        orientation: tableOptions?.orientation ??
+                            options.orientation,
+                        beforeParse: tableOptions?.beforeParse ??
+                            options.beforeParse
+                    };
+                    return new JSONConverter(merge(this.options, mergedTableOptions));
+                }, (converter, data) => {
+                    converter.parse({ data });
+                });
             }
-            return connector.setModifierOptions(dataModifier).then(() => data);
+            return connector.setModifierOptions(dataModifier, dataTables)
+                .then(() => data);
         })
             .then((data) => {
             connector.emit({
                 type: 'afterLoad',
                 data,
                 detail: eventDetail,
-                table
+                tables
             });
             return connector;
         })['catch']((error) => {
@@ -102,7 +123,7 @@ class JSONConnector extends DataConnector {
                 type: 'loadError',
                 detail: eventDetail,
                 error,
-                table
+                tables
             });
             throw error;
         });

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

@@ -185,7 +185,7 @@ class HTMLTableConverter extends DataConverter {
     getTableHeaderHTML(topheaders = [], subheaders = [], options = this.options) {
         const { useMultiLevelHeaders, useRowspanHeaders } = options;
         let html = '<thead>', i = 0, len = subheaders && subheaders.length, next, cur, curColspan = 0, rowspan;
-        // Clean up multiple table headers. Chart.getDataRows() returns two
+        // Clean up multiple table headers. Exporting.getDataRows() returns two
         // levels of headers when using multilevel, not merged. We need to
         // merge identical headers, remove redundant headers, and keep it
         // all marked up nicely.

package/es-modules/Data/DataPool.js

@@ -70,7 +70,7 @@ class DataPool {
     getConnector(connectorId) {
         const connector = this.connectors[connectorId];
         // Already loaded
-        if (connector) {
+        if (connector?.loaded) {
             return Promise.resolve(connector);
         }
         let waitingList = this.waiting[connectorId];
@@ -185,12 +185,14 @@ class DataPool {
             if (!ConnectorClass) {
                 throw new Error(`Connector type not found. (${options.type})`);
             }
-            const connector = new ConnectorClass(options.options);
+            const connector = this.connectors[options.id] = new ConnectorClass(options.options, options.dataTables);
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             connector
                 .load()
-                .then((connector) => {
-                this.connectors[options.id] = connector;
+                .then(({ converter, dataTables }) => {
+                connector.dataTables = dataTables;
+                connector.converter = converter;
+                connector.loaded = true;
                 this.emit({
                     type: 'afterLoad',
                     options
@@ -199,6 +201,15 @@ class DataPool {
             })['catch'](reject);
         });
     }
+    /**
+     * Cancels all data connectors pending requests.
+     */
+    cancelPendingRequests() {
+        const { connectors } = this;
+        for (const connectorKey of Object.keys(connectors)) {
+            connectors[connectorKey].stopPolling();
+        }
+    }
     /**
      * Registers a callback for a specific event.
      *

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

@@ -20,6 +20,8 @@ import ControllableImage from './Controllables/ControllableImage.js';
 import ControllableLabel from './Controllables/ControllableLabel.js';
 import ControlPoint from './ControlPoint.js';
 import ControlTarget from './ControlTarget.js';
+import D from '../../Core/Defaults.js';
+const { defaultOptions } = D;
 import EventEmitter from './EventEmitter.js';
 import MockPoint from './MockPoint.js';
 import PopupComposition from './Popup/PopupComposition.js';
@@ -151,7 +153,7 @@ class Annotation extends EventEmitter {
          * @name Highcharts.Annotation#options
          * @type {Highcharts.AnnotationsOptions}
          */
-        this.options = merge(this.defaultOptions, userOptions);
+        this.setOptions(userOptions);
         /**
          * The user options for the annotations.
          *
@@ -492,7 +494,12 @@ class Annotation extends EventEmitter {
      *        User options for an annotation
      */
     setOptions(userOptions) {
-        this.options = merge(this.defaultOptions, userOptions);
+        this.options = merge(
+        // Shared for all annotation types
+        this.defaultOptions, 
+        // The static typeOptions from the class
+        (userOptions.type &&
+            this.defaultOptions.types[userOptions.type]) || {}, userOptions);
     }
     /**
      * Set the annotation's visibility.
@@ -544,11 +551,6 @@ class Annotation extends EventEmitter {
         this.isUpdating = false;
     }
 }
-/* *
- *
- *  Static Properties
- *
- * */
 /**
  * @private
  */
@@ -576,6 +578,7 @@ Annotation.shapesMap = {
  */
 Annotation.types = {};
 Annotation.prototype.defaultOptions = AnnotationDefaults;
+defaultOptions.annotations = AnnotationDefaults;
 /**
  * List of events for `annotation.options.events` that should not be
  * added to `annotation.graphic` but to the `annotation`.

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

@@ -9,7 +9,7 @@
  * */
 'use strict';
 import U from '../../Core/Utilities.js';
-const { addEvent, erase, find, fireEvent, pick, wrap } = U;
+const { addEvent, erase, find, fireEvent, isArray, isObject, pick, wrap } = U;
 /* *
  *
  *  Functions
@@ -217,11 +217,15 @@ function chartRemoveAnnotation(idOrAnnotation) {
  * @private
  */
 function onChartAfterInit() {
-    const chart = this;
+    const chart = this, annotationsOption = this.options.annotations, annotationsUserOption = this.userOptions.annotations;
     chart.annotations = [];
-    if (!this.options.annotations) {
+    if (!isArray(this.options.annotations)) {
         this.options.annotations = [];
     }
+    if (isObject(annotationsUserOption, true) &&
+        isObject(annotationsOption, true)) {
+        this.options.annotations.push(annotationsOption);
+    }
 }
 /**
  * @private

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

@@ -11,20 +11,25 @@ const { defined } = U;
  *
  * */
 /**
- * A basic type of an annotation. It allows to add custom labels
- * or shapes. The items can be tied to points, axis coordinates
- * or chart pixel coordinates.
+ * A collection of annotations to add to the chart. The basic annotation allows
+ * adding custom labels or shapes. The items can be tied to points, axis
+ * coordinates or chart pixel coordinates.
  *
- * @sample highcharts/annotations/basic/
- *         Basic annotations
- * @sample highcharts/demo/annotations/
- *         Advanced annotations
- * @sample highcharts/css/annotations
- *         Styled mode
- * @sample highcharts/annotations-advanced/controllable
- *         Controllable items
+ * General options for all annotations can be set using the
+ * `Highcharts.setOptions` function. In this case only single objects are
+ * supported, because it alters the defaults for all items. For initialization
+ * in the chart constructors however, arrays of annotations are supported.
+ *
+ * See more in the [general docs](https://www.highcharts.com/docs/advanced-chart-features/annotations).
+ *
+ * @sample highcharts/annotations/basic/ Basic annotations
+ * @sample highcharts/demo/annotations/ Annotated chart
+ * @sample highcharts/css/annotations Styled mode
+ * @sample highcharts/annotations-advanced/controllable Controllable items
  * @sample {highstock} stock/annotations/fibonacci-retracements
  *         Custom annotation, Fibonacci retracement
+ * @sample highcharts/annotations/shape/
+ *         Themed crooked line annotation
  *
  * @type         {Array<*>}
  * @since        6.0.0
@@ -40,6 +45,17 @@ const AnnotationDefaults = {
      * @type      {number|string}
      * @apioption annotations.id
      */
+    /**
+     * For advanced annotations, this option defines the type of annotation. Can
+     * be one of the keys listed under the [types option](#annotations.types).
+     *
+     * @sample    highcharts/annotations-advanced/crooked-line
+     *            Crooked line annotation
+     * @requires  modules/annotations-advanced
+     * @product   highstock
+     * @type      {string}
+     * @apioption annotations.type
+     */
     /**
      * Whether the annotation is visible.
      *
@@ -622,11 +638,21 @@ const AnnotationDefaults = {
      * @requires modules/annotations
      */
     events: {},
+    /**
+     * Option override for specific advanced annotation types. This collection
+     * is intended for general theming using `Highcharts.setOptions()`.
+     *
+     * @sample   highcharts/annotations/shape/
+     *           Themed crooked line annotation
+     * @product highstock
+     * @requires modules/annotations-advanced
+     */
+    types: {},
     /**
      * The Z index of the annotation.
      */
     zIndex: 6
-}; // Type options are expected but not set
+};
 /* *
  *
  *  Default Export

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

@@ -216,15 +216,22 @@ class ControllableLabel extends Controllable {
         labelOptions[this.collection][this.index].y = this.options.y;
     }
     render(parent) {
-        const options = this.options, attrs = this.attrsFromOptions(options), style = options.style;
+        const options = this.options, attrs = this.attrsFromOptions(options), style = options.style, optionsChart = this.annotation.chart.options.chart, chartBackground = optionsChart.plotBackgroundColor ||
+            optionsChart.backgroundColor;
         this.graphic = this.annotation.chart.renderer
             .label('', 0, -9999, // #10055
-        options.shape, null, null, options.useHTML, null, 'annotation-label')
+        options.shape, void 0, void 0, options.useHTML, void 0, 'annotation-label')
             .attr(attrs)
             .add(parent);
         if (!this.annotation.chart.styledMode) {
             if (style.color === 'contrast') {
-                style.color = this.annotation.chart.renderer.getContrast(ControllableLabel.shapesWithoutBackground.indexOf(options.shape) > -1 ? '#FFFFFF' : options.backgroundColor);
+                const background = (ControllableLabel.shapesWithoutBackground.indexOf(options.shape) > -1 ||
+                    options.backgroundColor === 'none') ?
+                    chartBackground :
+                    options.backgroundColor;
+                style.color = this.annotation.chart.renderer.getContrast(typeof background === 'string' ? background :
+                    typeof chartBackground === 'string' ? chartBackground :
+                        '#ffffff');
             }
             this.graphic
                 .css(options.style)

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

@@ -319,7 +319,7 @@ const navigation = {
      * from a different server.
      *
      * @type      {string}
-     * @default   https://code.highcharts.com/12.2.0/gfx/stock-icons/
+     * @default   https://code.highcharts.com/12.3.0/gfx/stock-icons/
      * @since     7.1.3
      * @apioption navigation.iconsURL
      */

package/es-modules/Extensions/Annotations/Popup/PopupAnnotations.js

@@ -87,12 +87,18 @@ function addToolbar(chart, options, callback) {
         showForm.call(this, 'annotation-edit', chart, options, callback);
     });
     button.className += ' highcharts-annotation-edit-button';
-    button.style['background-image'] = 'url(' +
-        this.iconsURL + 'edit.svg)';
+    createElement('span', {
+        className: 'highcharts-icon'
+    }, {
+        backgroundImage: `url(${this.iconsURL}edit.svg)`
+    }, button);
     button = this.addButton(popupDiv, lang.removeButton || 'Remove', 'remove', popupDiv, callback);
     button.className += ' highcharts-annotation-remove-button';
-    button.style['background-image'] = 'url(' +
-        this.iconsURL + 'destroy.svg)';
+    createElement('span', {
+        className: 'highcharts-icon'
+    }, {
+        backgroundImage: `url(${this.iconsURL}destroy.svg)`
+    }, button);
 }
 /**
  * Create annotation's form fields.

package/es-modules/Extensions/Annotations/Popup/PopupComposition.js

@@ -47,7 +47,7 @@ function onNavigationBindingsShowPopup(config) {
         this.popup = new Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
             (this.chart.options.stockTools &&
                 this.chart.options.stockTools.gui.iconsURL) ||
-            'https://code.highcharts.com/12.2.0/gfx/stock-icons/'), this.chart);
+            'https://code.highcharts.com/12.3.0/gfx/stock-icons/'), this.chart);
     }
     this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
 }

package/es-modules/Extensions/Annotations/Types/BasicAnnotation.js

@@ -6,8 +6,6 @@
 'use strict';
 import Annotation from '../Annotation.js';
 import MockPoint from '../MockPoint.js';
-import U from '../../../Core/Utilities.js';
-const { merge } = U;
 /* *
  *
  *  Class
@@ -214,7 +212,6 @@ BasicAnnotation.basicControlPoints = {
             }
         }]
 };
-BasicAnnotation.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions, {});
 Annotation.types.basicAnnotation = BasicAnnotation;
 /* *
  *

package/es-modules/Extensions/Annotations/Types/CrookedLine.js

@@ -6,9 +6,106 @@
 'use strict';
 import Annotation from '../Annotation.js';
 import ControlPoint from '../ControlPoint.js';
+import D from '../../../Core/Defaults.js';
+const { defaultOptions } = D;
 import MockPoint from '../MockPoint.js';
 import U from '../../../Core/Utilities.js';
 const { merge } = U;
+if (defaultOptions.annotations) {
+    /**
+    * Options for the crooked line annotation type.
+    *
+    * @sample highcharts/annotations-advanced/crooked-line/
+    *         Crooked line
+    *
+    * @product      highstock
+    * @optionparent annotations.types.crookedLine
+    */
+    defaultOptions.annotations.types.crookedLine = {
+        /**
+         * @extends   annotations.labelOptions
+         * @apioption annotations.types.crookedLine.labelOptions
+         */
+        /**
+         * @extends   annotations.shapeOptions
+         * @apioption annotations.types.crookedLine.shapeOptions
+         */
+        /**
+         * Additional options for an annotation with the type.
+         */
+        typeOptions: {
+            /**
+             * This number defines which xAxis the point is connected to.
+             * It refers to either the axis id or the index of the axis
+             * in the xAxis array.
+             */
+            xAxis: 0,
+            /**
+             * This number defines which yAxis the point is connected to.
+             * It refers to either the axis id or the index of the axis
+             * in the xAxis array.
+             */
+            yAxis: 0,
+            /**
+             * @type      {Array<*>}
+             * @apioption annotations.types.crookedLine.typeOptions.points
+             */
+            /**
+             * The x position of the point.
+             *
+             * @type      {number}
+             * @apioption annotations.types.crookedLine.typeOptions.points.x
+             */
+            /**
+             * The y position of the point.
+             *
+             * @type      {number}
+             * @apioption annotations.types.crookedLine.typeOptions.points.y
+             */
+            /**
+             * @type      {number}
+             * @excluding positioner, events
+             * @apioption annotations.types.crookedLine.typeOptions.points.controlPoint
+             */
+            /**
+             * Line options.
+             *
+             * @excluding height, point, points, r, type, width
+             */
+            line: {
+                fill: 'none'
+            }
+        },
+        /**
+         * @excluding positioner, events
+         */
+        controlPointOptions: {
+            positioner: function (target) {
+                const graphic = this.graphic, xy = MockPoint.pointToPixels(target.points[this.index]);
+                return {
+                    x: xy.x - (graphic.width || 0) / 2,
+                    y: xy.y - (graphic.height || 0) / 2
+                };
+            },
+            events: {
+                drag: function (e, target) {
+                    if (target.chart.isInsidePlot(e.chartX - target.chart.plotLeft, e.chartY - target.chart.plotTop, {
+                        visiblePlotOnly: true
+                    })) {
+                        const translation = this.mouseMoveToTranslation(e), typeOptions = target.options.typeOptions;
+                        target.translatePoint(translation.x, translation.y, this.index);
+                        // Update options:
+                        typeOptions.points[this.index].x =
+                            target.points[this.index].x;
+                        typeOptions.points[this.index].y =
+                            target.points[this.index].y;
+                        target.redraw(false);
+                    }
+                }
+            }
+        }
+    };
+}
 /* *
  *
  *  Class
@@ -57,100 +154,6 @@ class CrookedLine extends Annotation {
         typeOptions.line = shape.options;
     }
 }
-CrookedLine.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions, 
-/**
- * A crooked line annotation.
- *
- * @sample highcharts/annotations-advanced/crooked-line/
- *         Crooked line
- *
- * @product      highstock
- * @optionparent annotations.crookedLine
- */
-{
-    /**
-     * @extends   annotations.labelOptions
-     * @apioption annotations.crookedLine.labelOptions
-     */
-    /**
-     * @extends   annotations.shapeOptions
-     * @apioption annotations.crookedLine.shapeOptions
-     */
-    /**
-     * Additional options for an annotation with the type.
-     */
-    typeOptions: {
-        /**
-         * This number defines which xAxis the point is connected to.
-         * It refers to either the axis id or the index of the axis
-         * in the xAxis array.
-         */
-        xAxis: 0,
-        /**
-         * This number defines which yAxis the point is connected to.
-         * It refers to either the axis id or the index of the axis
-         * in the xAxis array.
-         */
-        yAxis: 0,
-        /**
-         * @type      {Array<*>}
-         * @apioption annotations.crookedLine.typeOptions.points
-         */
-        /**
-         * The x position of the point.
-         *
-         * @type      {number}
-         * @apioption annotations.crookedLine.typeOptions.points.x
-         */
-        /**
-         * The y position of the point.
-         *
-         * @type      {number}
-         * @apioption annotations.crookedLine.typeOptions.points.y
-         */
-        /**
-         * @type      {number}
-         * @excluding positioner, events
-         * @apioption annotations.crookedLine.typeOptions.points.controlPoint
-         */
-        /**
-         * Line options.
-         *
-         * @excluding height, point, points, r, type, width
-         */
-        line: {
-            fill: 'none'
-        }
-    },
-    /**
-     * @excluding positioner, events
-     */
-    controlPointOptions: {
-        positioner: function (target) {
-            const graphic = this.graphic, xy = MockPoint.pointToPixels(target.points[this.index]);
-            return {
-                x: xy.x - (graphic.width || 0) / 2,
-                y: xy.y - (graphic.height || 0) / 2
-            };
-        },
-        events: {
-            drag: function (e, target) {
-                if (target.chart.isInsidePlot(e.chartX - target.chart.plotLeft, e.chartY - target.chart.plotTop, {
-                    visiblePlotOnly: true
-                })) {
-                    const translation = this.mouseMoveToTranslation(e), typeOptions = target.options.typeOptions;
-                    target.translatePoint(translation.x, translation.y, this.index);
-                    // Update options:
-                    typeOptions.points[this.index].x =
-                        target.points[this.index].x;
-                    typeOptions.points[this.index].y =
-                        target.points[this.index].y;
-                    target.redraw(false);
-                }
-            }
-        }
-    }
-});
 Annotation.types.crookedLine = CrookedLine;
 /* *
  *