highcharts 9.2.2 → 9.3.0

package/es-modules/Data/Stores/GoogleSheetsStore.js

@@ -0,0 +1,167 @@
+/* *
+ *
+ *  (c) 2012-2021 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Torstein Hønsi
+ *  - Gøran Slettemark
+ *  - Wojciech Chmiel
+ *  - Sophie Bremer
+ *
+ * */
+'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import DataStore from './DataStore.js';
+import GoogleSheetsParser from '../Parsers/GoogleSheetsParser.js';
+import HU from '../../Core/HttpUtilities.js';
+var ajax = HU.ajax;
+import U from '../../Core/Utilities.js';
+var merge = U.merge;
+/* *
+ *
+ *  Class
+ *
+ * *7
+
+/* eslint-disable no-invalid-this, require-jsdoc, valid-jsdoc */
+/**
+ * @private
+ */
+var GoogleSheetsStore = /** @class */ (function (_super) {
+    __extends(GoogleSheetsStore, _super);
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    /**
+     * Constructs an instance of GoogleSheetsStore
+     *
+     * @param {DataTable} table
+     * Optional table to create the store from.
+     *
+     * @param {CSVStore.OptionsType} options
+     * Options for the store and parser.
+     *
+     * @param {DataParser} parser
+     * Optional parser to replace the default parser
+     */
+    function GoogleSheetsStore(table, options, parser) {
+        var _this = _super.call(this, table) || this;
+        _this.options = merge(GoogleSheetsStore.defaultOptions, options);
+        _this.parser = parser || new GoogleSheetsParser({ firstRowAsNames: _this.options.firstRowAsNames });
+        return _this;
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * @param {DataEventEmitter.EventDetail} [eventDetail]
+     * Custom information for pending events.
+     */
+    GoogleSheetsStore.prototype.fetchSheet = function (eventDetail) {
+        var store = this, _a = store.options, enablePolling = _a.enablePolling, dataRefreshRate = _a.dataRefreshRate, googleSpreadsheetKey = _a.googleSpreadsheetKey, worksheet = _a.worksheet, url = [
+            'https://spreadsheets.google.com/feeds/cells',
+            googleSpreadsheetKey,
+            worksheet,
+            'public/values?alt=json'
+        ].join('/');
+        // If already loaded, clear the current table
+        store.table.deleteColumns();
+        store.emit({
+            type: 'load',
+            detail: eventDetail,
+            table: store.table,
+            url: url
+        });
+        ajax({
+            url: url,
+            dataType: 'json',
+            success: function (json) {
+                store.parser.parse(json);
+                store.table.setColumns(store.parser.getTable().getColumns());
+                // Polling
+                if (enablePolling) {
+                    setTimeout(function () {
+                        store.fetchSheet();
+                    }, dataRefreshRate * 1000);
+                }
+                store.emit({
+                    type: 'afterLoad',
+                    detail: eventDetail,
+                    table: store.table,
+                    url: url
+                });
+            },
+            error: function (xhr, error) {
+                /* *
+                 * TODO:
+                 * catch error
+                 * ...
+                 *
+                 * */
+                // console.log(text);
+                store.emit({
+                    type: 'loadError',
+                    detail: eventDetail,
+                    error: error,
+                    table: store.table,
+                    xhr: xhr
+                });
+            }
+        });
+        // return true;
+    };
+    /**
+     * @param {DataEventEmitter.EventDetail} [eventDetail]
+     * Custom information for pending events.
+     */
+    GoogleSheetsStore.prototype.load = function (eventDetail) {
+        if (this.options.googleSpreadsheetKey) {
+            this.fetchSheet(eventDetail);
+        }
+    };
+    /* *
+     *
+     *  Static Properties
+     *
+     * */
+    GoogleSheetsStore.defaultOptions = {
+        googleSpreadsheetKey: '',
+        worksheet: 1,
+        enablePolling: false,
+        dataRefreshRate: 2,
+        firstRowAsNames: true
+    };
+    return GoogleSheetsStore;
+}(DataStore));
+/* *
+ *
+ *  Registry
+ *
+ * */
+DataStore.addStore(GoogleSheetsStore);
+/* *
+ *
+ *  Export
+ *
+ * */
+export default GoogleSheetsStore;

package/es-modules/Data/Stores/HTMLTableStore.js

@@ -0,0 +1,351 @@
+/* *
+ *
+ *  (c) 2012-2021 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Torstein Hønsi
+ *  - Gøran Slettemark
+ *  - Wojciech Chmiel
+ *  - Sophie Bremer
+ *
+ * */
+'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import DataStore from './DataStore.js';
+import DataTable from '../DataTable.js';
+import H from '../../Core/Globals.js';
+var win = H.win;
+import HTMLTableParser from '../Parsers/HTMLTableParser.js';
+import U from '../../Core/Utilities.js';
+var merge = U.merge, objectEach = U.objectEach;
+/** eslint-disable valid-jsdoc */
+/**
+ * Class that handles creating a datastore from an HTML table
+ *
+ * @private
+ */
+var HTMLTableStore = /** @class */ (function (_super) {
+    __extends(HTMLTableStore, _super);
+    /* *
+     *
+     *  Constructors
+     *
+     * */
+    /**
+     * Constructs an instance of HTMLTableDataStore
+     *
+     * @param {DataTable} table
+     * Optional table to create the store from
+     *
+     * @param {HTMLTableStore.OptionsType} options
+     * Options for the store and parser
+     *
+     * @param {DataParser} parser
+     * Optional parser to replace the default parser
+     */
+    function HTMLTableStore(table, options, parser) {
+        if (table === void 0) { table = new DataTable(); }
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, table) || this;
+        _this.tableElement = null;
+        _this.options = merge(HTMLTableStore.defaultOptions, options);
+        _this.parserOptions = _this.options;
+        _this.parser = parser || new HTMLTableParser(_this.options, _this.tableElement);
+        return _this;
+    }
+    /**
+     * Handles retrieving the HTML table by ID if an ID is provided
+     */
+    HTMLTableStore.prototype.fetchTable = function () {
+        var store = this, tableHTML = store.options.table;
+        var tableElement;
+        if (typeof tableHTML === 'string') {
+            store.tableID = tableHTML;
+            tableElement = win.document.getElementById(tableHTML);
+        }
+        else {
+            tableElement = tableHTML;
+            store.tableID = tableElement.id;
+        }
+        store.tableElement = tableElement;
+    };
+    /**
+     * Initiates creating the datastore from the HTML table
+     *
+     * @param {DataEventEmitter.EventDetail} [eventDetail]
+     * Custom information for pending events.
+     *
+     * @emits HTMLTableDataStore#load
+     * @emits HTMLTableDataStore#afterLoad
+     * @emits HTMLTableDataStore#loadError
+     */
+    HTMLTableStore.prototype.load = function (eventDetail) {
+        var store = this;
+        store.fetchTable();
+        // If already loaded, clear the current rows
+        store.table.deleteColumns();
+        store.emit({
+            type: 'load',
+            detail: eventDetail,
+            table: store.table,
+            tableElement: store.tableElement
+        });
+        if (!store.tableElement) {
+            store.emit({
+                type: 'loadError',
+                detail: eventDetail,
+                error: 'HTML table not provided, or element with ID not found',
+                table: store.table
+            });
+            return;
+        }
+        store.parser.parse(merge({ tableHTML: store.tableElement }, store.options), eventDetail);
+        store.table.setColumns(store.parser.getTable().getColumns());
+        store.emit({
+            type: 'afterLoad',
+            detail: eventDetail,
+            table: store.table,
+            tableElement: store.tableElement
+        });
+    };
+    /**
+     * Creates an HTML table from the datatable on the store instance.
+     *
+     * @param {HTMLTableStore.ExportOptions} [exportOptions]
+     * Options used for exporting.
+     *
+     * @return {string}
+     * The HTML table.
+     */
+    HTMLTableStore.prototype.getHTMLTableForExport = function (exportOptions) {
+        if (exportOptions === void 0) { exportOptions = {}; }
+        var options = exportOptions, decimalPoint = options.useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.', exportNames = (this.parserOptions.firstRowAsNames !== false), useMultiLevelHeaders = options.useMultiLevelHeaders, useRowspanHeaders = options.useRowspanHeaders;
+        var isRowEqual = function (row1, row2) {
+            var i = row1.length;
+            if (row2.length === i) {
+                while (i--) {
+                    if (row1[i] !== row2[i]) {
+                        return false;
+                    }
+                }
+            }
+            else {
+                return false;
+            }
+            return true;
+        };
+        // Get table header markup from row data
+        var getTableHeaderHTML = function (topheaders, subheaders, rowLength) {
+            var html = '<thead>', i = 0, len = rowLength || subheaders && subheaders.length, next, cur, curColspan = 0, rowspan;
+            // Clean up multiple table headers. Chart.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.
+            if (useMultiLevelHeaders &&
+                topheaders &&
+                subheaders &&
+                !isRowEqual(topheaders, subheaders)) {
+                html += '<tr>';
+                for (; i < len; ++i) {
+                    cur = topheaders[i];
+                    next = topheaders[i + 1];
+                    if (cur === next) {
+                        ++curColspan;
+                    }
+                    else if (curColspan) {
+                        // Ended colspan
+                        // Add cur to HTML with colspan.
+                        html += getCellHTMLFromValue('th', 'highcharts-table-topheading', 'scope="col" ' +
+                            'colspan="' + (curColspan + 1) + '"', cur);
+                        curColspan = 0;
+                    }
+                    else {
+                        // Cur is standalone. If it is same as sublevel,
+                        // remove sublevel and add just toplevel.
+                        if (cur === subheaders[i]) {
+                            if (useRowspanHeaders) {
+                                rowspan = 2;
+                                delete subheaders[i];
+                            }
+                            else {
+                                rowspan = 1;
+                                subheaders[i] = '';
+                            }
+                        }
+                        else {
+                            rowspan = 1;
+                        }
+                        html += getCellHTMLFromValue('th', 'highcharts-table-topheading', 'scope="col"' +
+                            (rowspan > 1 ?
+                                ' valign="top" rowspan="' + rowspan + '"' :
+                                ''), cur);
+                    }
+                }
+                html += '</tr>';
+            }
+            // Add the subheaders (the only headers if not using multilevels)
+            if (subheaders) {
+                html += '<tr>';
+                for (i = 0, len = subheaders.length; i < len; ++i) {
+                    if (typeof subheaders[i] !== 'undefined') {
+                        html += getCellHTMLFromValue('th', null, 'scope="col"', subheaders[i]);
+                    }
+                }
+                html += '</tr>';
+            }
+            html += '</thead>';
+            return html;
+        };
+        var getCellHTMLFromValue = function (tag, classes, attrs, value) {
+            var val = value, className = 'text' + (classes ? ' ' + classes : '');
+            // Convert to string if number
+            if (typeof val === 'number') {
+                val = val.toString();
+                if (decimalPoint === ',') {
+                    val = val.replace('.', decimalPoint);
+                }
+                className = 'number';
+            }
+            else if (!value) {
+                val = '';
+                className = 'empty';
+            }
+            return '<' + tag + (attrs ? ' ' + attrs : '') +
+                ' class="' + className + '">' +
+                val + '</' + tag + '>';
+        };
+        var _a = this.getColumnsForExport(options.usePresentationOrder), columnNames = _a.columnNames, columnValues = _a.columnValues, htmlRows = [], columnsCount = columnNames.length;
+        var rowArray = [];
+        var tableHead = '';
+        // Add the names as the first row if they should be exported
+        if (exportNames) {
+            var subcategories_1 = [];
+            // If using multilevel headers, the first value
+            // of each column is a subcategory
+            if (useMultiLevelHeaders) {
+                columnValues.forEach(function (column) {
+                    var subhead = (column.shift() || '').toString();
+                    subcategories_1.push(subhead);
+                });
+                tableHead = getTableHeaderHTML(columnNames, subcategories_1);
+            }
+            else {
+                tableHead = getTableHeaderHTML(null, columnNames);
+            }
+        }
+        for (var columnIndex = 0; columnIndex < columnsCount; columnIndex++) {
+            var columnName = columnNames[columnIndex], column = columnValues[columnIndex], columnLength = column.length;
+            var columnMeta = this.whatIs(columnName);
+            var columnDataType = void 0;
+            if (columnMeta) {
+                columnDataType = columnMeta.dataType;
+            }
+            for (var rowIndex = 0; rowIndex < columnLength; rowIndex++) {
+                var cellValue = column[rowIndex];
+                if (!rowArray[rowIndex]) {
+                    rowArray[rowIndex] = [];
+                }
+                // Handle datatype
+                // if(columnDataType && typeof cellValue !== columnDataType) {
+                //     do something?
+                // }
+                if (!(typeof cellValue === 'string' ||
+                    typeof cellValue === 'number' ||
+                    typeof cellValue === 'undefined')) {
+                    cellValue = (cellValue || '').toString();
+                }
+                rowArray[rowIndex][columnIndex] = getCellHTMLFromValue(columnIndex ? 'td' : 'th', null, columnIndex ? '' : 'scope="row"', cellValue);
+                // On the final column, push the row to the array
+                if (columnIndex === columnsCount - 1) {
+                    htmlRows.push('<tr>' +
+                        rowArray[rowIndex].join('') +
+                        '</tr>');
+                }
+            }
+        }
+        var caption = '';
+        // Add table caption
+        // Current exportdata falls back to chart title
+        // but that should probably be handled elsewhere?
+        if (options.tableCaption) {
+            caption = '<caption class="highcharts-table-caption">' +
+                options.tableCaption +
+                '</caption>';
+        }
+        return ('<table>' +
+            caption +
+            tableHead +
+            '<tbody>' +
+            htmlRows.join('') +
+            '</tbody>' +
+            '</table>');
+    };
+    /**
+     * Exports the datastore as an HTML string, using the options
+     * provided on import unless other options are provided.
+     *
+     * @param {HTMLTableStore.ExportOptions} [htmlExportOptions]
+     * Options that override default or existing export options.
+     *
+     * @param {DataEventEmitter.EventDetail} [eventDetail]
+     * Custom information for pending events.
+     *
+     * @return {string}
+     * HTML from the current dataTable.
+     *
+     */
+    HTMLTableStore.prototype.save = function (htmlExportOptions, eventDetail) {
+        var exportOptions = HTMLTableStore.defaultExportOptions;
+        // Merge in the provided parser options
+        objectEach(this.parserOptions, function (value, key) {
+            if (key in exportOptions) {
+                exportOptions[key] = value;
+            }
+        });
+        // Merge in provided options
+        return this.getHTMLTableForExport(merge(exportOptions, htmlExportOptions));
+    };
+    /* *
+     *
+     *  Static Properties
+     *
+     * */
+    HTMLTableStore.defaultOptions = {
+        table: ''
+    };
+    HTMLTableStore.defaultExportOptions = {
+        decimalPoint: null,
+        exportIDColumn: false,
+        useRowspanHeaders: true,
+        useMultiLevelHeaders: true
+    };
+    return HTMLTableStore;
+}(DataStore));
+/* *
+ *
+ *  Register
+ *
+ * */
+DataStore.addStore(HTMLTableStore);
+/* *
+ *
+ *  Export
+ *
+ * */
+export default HTMLTableStore;

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

@@ -15,6 +15,7 @@ var chartProto = Chart.prototype;
 import ControllableMixin from './Mixins/ControllableMixin.js';
 import ControllableRect from './Controllables/ControllableRect.js';
 import ControllableCircle from './Controllables/ControllableCircle.js';
+import ControllableEllipse from './Controllables/ControllableEllipse.js';
 import ControllablePath from './Controllables/ControllablePath.js';
 import ControllableImage from './Controllables/ControllableImage.js';
 import ControllableLabel from './Controllables/ControllableLabel.js';
@@ -24,7 +25,6 @@ import H from '../../Core/Globals.js';
 import MockPoint from './MockPoint.js';
 import Pointer from '../../Core/Pointer.js';
 import U from '../../Core/Utilities.js';
-import palette from '../../Core/Color/Palette.js';
 var addEvent = U.addEvent, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, extend = U.extend, find = U.find, fireEvent = U.fireEvent, merge = U.merge, pick = U.pick, splat = U.splat, wrap = U.wrap;
 /* *********************************************************************
  *
@@ -222,7 +222,10 @@ var Annotation = /** @class */ (function () {
     };
     Annotation.prototype.addClipPaths = function () {
         this.setClipAxes();
-        if (this.clipXAxis && this.clipYAxis) {
+        if (this.clipXAxis &&
+            this.clipYAxis &&
+            this.options.crop // #15399
+        ) {
             this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
         }
     };
@@ -321,8 +324,10 @@ var Annotation = /** @class */ (function () {
             .add();
         this.shapesGroup = renderer
             .g('annotation-shapes')
-            .add(this.graphic)
-            .clip(this.chart.plotBoxClip);
+            .add(this.graphic);
+        if (this.options.crop) { // #15399
+            this.shapesGroup.clip(this.chart.plotBoxClip);
+        }
         this.labelsGroup = renderer
             .g('annotation-labels')
             .attr({
@@ -430,6 +435,9 @@ var Annotation = /** @class */ (function () {
      * Initialisation of a single shape
      * @private
      * @param {Object} shapeOptions - a confg object for a single shape
+     * @param {number} index - annotation may have many shapes,
+     * this is the shape's index saved in shapes.index.
+
      */
     Annotation.prototype.initShape = function (shapeOptions, index) {
         var options = merge(this.options.shapeOptions, {
@@ -526,6 +534,7 @@ var Annotation = /** @class */ (function () {
     Annotation.shapesMap = {
         'rect': ControllableRect,
         'circle': ControllableCircle,
+        'ellipse': ControllableEllipse,
         'path': ControllablePath,
         'image': ControllableImage
     };
@@ -602,9 +611,18 @@ merge(Annotation.prototype,
          *          Animation defer settings
          * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
          * @since 8.2.0
-         * @apioption annotations.animation
          */
         animation: {},
+        /**
+         * Whether to hide the part of the annotation
+         * that is outside the plot area.
+         *
+         * @sample highcharts/annotations/label-crop-overflow/
+         *         Crop line annotation
+         * @type  {boolean}
+         * @since 9.3.0
+         */
+        crop: true,
         /**
          * The animation delay time in milliseconds.
          * Set to `0` renders annotation immediately.
@@ -669,7 +687,7 @@ merge(Annotation.prototype,
              *
              * @type {Highcharts.ColorString}
              */
-            borderColor: palette.neutralColor100,
+            borderColor: "#000000" /* neutralColor100 */,
             /**
              * The border radius in pixels for the annotaiton's label.
              *
@@ -964,6 +982,32 @@ merge(Annotation.prototype,
          * @requires  modules/annotations
          */
         shapeOptions: {
+            /**
+             *
+             * The radius of the shape in y direction.
+             * Used for the ellipse.
+             *
+             * @sample highcharts/annotations/ellipse/
+             *         Ellipse annotation
+             *
+             * @type      {number}
+             * @apioption annotations.shapeOptions.ry
+             **/
+            /**
+             *
+             * The xAxis index to which the points should be attached.
+             * Used for the ellipse.
+             *
+             * @type      {number}
+             * @apioption annotations.shapeOptions.xAxis
+             **/
+            /**
+             * The yAxis index to which the points should be attached.
+             * Used for the ellipse.
+             *
+             * @type      {number}
+             * @apioption annotations.shapeOptions.yAxis
+             **/
             /**
              * The width of the shape.
              *
@@ -983,11 +1027,15 @@ merge(Annotation.prototype,
              * @apioption annotations.shapeOptions.height
              */
             /**
-             * The type of the shape, e.g. circle or rectangle.
+             * The type of the shape.
+             * Avaliable options are circle, rect and ellipse.
              *
              * @sample highcharts/annotations/shape/
              *         Basic shape annotation
              *
+             * @sample highcharts/annotations/ellipse/
+             *         Ellipse annotation
+             *
              * @type      {string}
              * @default   rect
              * @apioption annotations.shapeOptions.type
@@ -1069,9 +1117,10 @@ merge(Annotation.prototype,
             width: 10,
             height: 10,
             style: {
-                stroke: palette.neutralColor100,
-                'stroke-width': 2,
-                fill: palette.backgroundColor
+                cursor: 'pointer',
+                fill: "#ffffff" /* backgroundColor */,
+                stroke: "#000000" /* neutralColor100 */,
+                'stroke-width': 2
             },
             visible: false,
             events: {}
@@ -1132,7 +1181,8 @@ extend(chartProto, /** @lends Highcharts.Chart# */ {
      * @param  {Highcharts.AnnotationsOptions} options
      *         The annotation options for the new, detailed annotation.
      * @param {boolean} [redraw]
-     *
+     * @sample highcharts/annotations/add-annotation/
+     *         Add annotation
      * @return {Highcharts.Annotation} - The newly generated annotation.
      */
     addAnnotation: function (userOptions, redraw) {

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

@@ -12,7 +12,7 @@
  * @return {Highcharts.PositionObject}
  */
 import U from '../../Core/Utilities.js';
-var extend = U.extend, merge = U.merge, pick = U.pick;
+var merge = U.merge, pick = U.pick;
 import eventEmitterMixin from './Mixins/EventEmitterMixin.js';
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**