highcharts 10.2.0 → 10.2.1

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

@@ -0,0 +1,192 @@
+/* *
+ *
+ *  Copyright (c) 2019-2021 Highsoft AS
+ *
+ *  Boost module: stripped-down renderer for higher performance
+ *
+ *  License: highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Vertex Buffer abstraction.
+ * A vertex buffer is a set of vertices which are passed to the GPU
+ * in a single call.
+ *
+ * @private
+ * @class
+ * @name WGLVertexBuffer
+ *
+ * @param {WebGLContext} gl
+ * Context in which to create the buffer.
+ * @param {WGLShader} shader
+ * Shader to use.
+ */
+var WGLVertexBuffer = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function WGLVertexBuffer(gl, shader, dataComponents
+    /* , type */
+    ) {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        this.buffer = false;
+        this.iterator = 0;
+        this.preAllocated = false;
+        this.vertAttribute = false;
+        this.components = dataComponents || 2;
+        this.dataComponents = dataComponents;
+        this.gl = gl;
+        this.shader = shader;
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Note about pre-allocated buffers:
+     *     - This is slower for charts with many series
+     * @private
+     */
+    WGLVertexBuffer.prototype.allocate = function (size) {
+        this.iterator = -1;
+        this.preAllocated = new Float32Array(size * 4);
+    };
+    /**
+     * Bind the buffer
+     * @private
+     */
+    WGLVertexBuffer.prototype.bind = function () {
+        if (!this.buffer) {
+            return false;
+        }
+        // gl.bindAttribLocation(shader.program(), 0, 'aVertexPosition');
+        // gl.enableVertexAttribArray(vertAttribute);
+        // gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        this.gl.vertexAttribPointer(this.vertAttribute, this.components, this.gl.FLOAT, false, 0, 0);
+        // gl.enableVertexAttribArray(vertAttribute);
+    };
+    /**
+     * Build the buffer
+     * @private
+     * @param {Array<number>} dataIn
+     * Zero padded array of indices
+     * @param {string} attrib
+     * Name of the Attribute to bind the buffer to
+     * @param {number} dataComponents
+     * Mumber of components per. indice
+     */
+    WGLVertexBuffer.prototype.build = function (dataIn, attrib, dataComponents) {
+        var farray;
+        this.data = dataIn || [];
+        if ((!this.data || this.data.length === 0) && !this.preAllocated) {
+            // console.error('trying to render empty vbuffer');
+            this.destroy();
+            return false;
+        }
+        this.components = dataComponents || this.components;
+        if (this.buffer) {
+            this.gl.deleteBuffer(this.buffer);
+        }
+        if (!this.preAllocated) {
+            farray = new Float32Array(this.data);
+        }
+        this.buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, this.preAllocated || farray, this.gl.STATIC_DRAW);
+        // gl.bindAttribLocation(shader.program(), 0, 'aVertexPosition');
+        this.vertAttribute = this.gl
+            .getAttribLocation(this.shader.getProgram(), attrib);
+        this.gl.enableVertexAttribArray(this.vertAttribute);
+        // Trigger cleanup
+        farray = false;
+        return true;
+    };
+    /**
+     * @private
+     */
+    WGLVertexBuffer.prototype.destroy = function () {
+        if (this.buffer) {
+            this.gl.deleteBuffer(this.buffer);
+            this.buffer = false;
+            this.vertAttribute = false;
+        }
+        this.iterator = 0;
+        this.components = this.dataComponents || 2;
+        this.data = [];
+    };
+    /**
+     * Adds data to the pre-allocated buffer.
+     * @private
+     * @param {number} x
+     * X data
+     * @param {number} y
+     * Y data
+     * @param {number} a
+     * A data
+     * @param {number} b
+     * B data
+     */
+    WGLVertexBuffer.prototype.push = function (x, y, a, b) {
+        if (this.preAllocated) { // && iterator <= preAllocated.length - 4) {
+            this.preAllocated[++this.iterator] = x;
+            this.preAllocated[++this.iterator] = y;
+            this.preAllocated[++this.iterator] = a;
+            this.preAllocated[++this.iterator] = b;
+        }
+    };
+    /**
+     * Render the buffer
+     *
+     * @private
+     * @param {number} from
+     * Start indice.
+     * @param {number} to
+     * End indice.
+     * @param {WGLDrawModeValue} drawMode
+     * Draw mode.
+     */
+    WGLVertexBuffer.prototype.render = function (from, to, drawMode) {
+        var length = this.preAllocated ?
+            this.preAllocated.length : this.data.length;
+        if (!this.buffer) {
+            return false;
+        }
+        if (!length) {
+            return false;
+        }
+        if (!from || from > length || from < 0) {
+            from = 0;
+        }
+        if (!to || to > length) {
+            to = length;
+        }
+        if (from >= to) {
+            return false;
+        }
+        drawMode = drawMode || 'POINTS';
+        this.gl.drawArrays(this.gl[drawMode], from / this.components, (to - from) / this.components);
+        return true;
+    };
+    return WGLVertexBuffer;
+}());
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default WGLVertexBuffer;

package/es-modules/Extensions/BoostCanvas.js

@@ -13,6 +13,10 @@
  *
  * */
 'use strict';
+import BoostChart from './Boost/BoostChart.js';
+var getBoostClipRect = BoostChart.getBoostClipRect, isChartSeriesBoosting = BoostChart.isChartSeriesBoosting;
+import BoostSeries from './Boost/BoostSeries.js';
+var destroyGraphics = BoostSeries.destroyGraphics;
 import Chart from '../Core/Chart/Chart.js';
 import Color from '../Core/Color/Color.js';
 var color = Color.parse;
@@ -83,52 +87,55 @@ var initCanvasBoost = function () {
          * @function Highcharts.Series#getContext
          */
         getContext: function () {
-            var chart = this.chart, width = chart.chartWidth, height = chart.chartHeight, targetGroup = chart.seriesGroup || this.group, target = this, ctx, swapXY = function (proceed, x, y, a, b, c, d) {
+            var chart = this.chart, target = isChartSeriesBoosting(chart) ? chart : this, targetGroup = (target === chart ?
+                chart.seriesGroup :
+                chart.seriesGroup || this.group);
+            var width = chart.chartWidth, height = chart.chartHeight, ctx, swapXY = function (proceed, x, y, a, b, c, d) {
                 proceed.call(this, y, x, a, b, c, d);
             };
-            if (chart.isChartSeriesBoosting()) {
-                target = chart;
-                targetGroup = chart.seriesGroup;
-            }
-            ctx = target.ctx;
-            if (!target.canvas) {
-                target.canvas = doc.createElement('canvas');
-                target.renderTarget = chart.renderer
+            var boost = target.boost =
+                target.boost ||
+                    {};
+            ctx = boost.targetCtx;
+            if (!boost.canvas) {
+                boost.canvas = doc.createElement('canvas');
+                boost.target = chart.renderer
                     .image('', 0, 0, width, height)
                     .addClass('highcharts-boost-canvas')
                     .add(targetGroup);
-                target.ctx = ctx = target.canvas.getContext('2d');
+                ctx = boost.targetCtx =
+                    boost.canvas.getContext('2d');
                 if (chart.inverted) {
                     ['moveTo', 'lineTo', 'rect', 'arc'].forEach(function (fn) {
                         wrap(ctx, fn, swapXY);
                     });
                 }
-                target.boostCopy = function () {
-                    target.renderTarget.attr({
-                        href: target.canvas.toDataURL('image/png')
+                boost.copy = function () {
+                    boost.target.attr({
+                        href: boost.canvas.toDataURL('image/png')
                     });
                 };
-                target.boostClear = function () {
-                    ctx.clearRect(0, 0, target.canvas.width, target.canvas.height);
-                    if (target === this) {
-                        target.renderTarget.attr({
+                boost.clear = function () {
+                    ctx.clearRect(0, 0, boost.canvas.width, boost.canvas.height);
+                    if (target === boost.target) {
+                        boost.target.attr({
                             href: b64BlankPixel
                         });
                     }
                 };
-                target.boostClipRect = chart.renderer.clipRect();
-                target.renderTarget.clip(target.boostClipRect);
+                boost.clipRect = chart.renderer.clipRect();
+                boost.target.clip(boost.clipRect);
             }
             else if (!(target instanceof Chart)) {
                 // ctx.clearRect(0, 0, width, height);
             }
-            if (target.canvas.width !== width) {
-                target.canvas.width = width;
+            if (boost.canvas.width !== width) {
+                boost.canvas.width = width;
             }
-            if (target.canvas.height !== height) {
-                target.canvas.height = height;
+            if (boost.canvas.height !== height) {
+                boost.canvas.height = height;
             }
-            target.renderTarget.attr({
+            boost.target.attr({
                 x: 0,
                 y: 0,
                 width: width,
@@ -136,7 +143,9 @@ var initCanvasBoost = function () {
                 style: 'pointer-events: none',
                 href: b64BlankPixel
             });
-            target.boostClipRect.attr(chart.getBoostClipRect(target));
+            if (boost.clipRect) {
+                boost.clipRect.attr(getBoostClipRect(chart, target));
+            }
             return ctx;
         },
         /**
@@ -146,16 +155,17 @@ var initCanvasBoost = function () {
          * @function Highcharts.Series#canvasToSVG
          */
         canvasToSVG: function () {
-            if (!this.chart.isChartSeriesBoosting()) {
-                if (this.boostCopy || this.chart.boostCopy) {
-                    (this.boostCopy || this.chart.boostCopy)();
+            if (!isChartSeriesBoosting(this.chart)) {
+                if (this.boost && this.boost.copy) {
+                    this.boost.copy();
                 }
-            }
-            else {
-                if (this.boostClear) {
-                    this.boostClear();
+                else if (this.chart.boost && this.chart.boost.copy) {
+                    this.chart.boost.copy();
                 }
             }
+            else if (this.boost && this.boost.clear) {
+                this.boost.clear();
+            }
         },
         cvsLineTo: function (ctx, clientX, plotY) {
             ctx.lineTo(clientX, plotY);
@@ -264,13 +274,13 @@ var initCanvasBoost = function () {
                         i: cropStart + i
                     });
                 }
-            };
-            if (this.renderTarget) {
-                this.renderTarget.attr({ href: b64BlankPixel });
+            }, boost = this.boost || {};
+            if (boost.target) {
+                boost.target.attr({ href: b64BlankPixel });
             }
             // If we are zooming out from SVG mode, destroy the graphics
             if (this.points || this.graph) {
-                this.destroyGraphics();
+                destroyGraphics(this);
             }
             // The group
             series.plotGroup('group', 'series', series.visible ? 'visible' : 'hidden', options.zIndex, chart.seriesGroup);
@@ -282,8 +292,8 @@ var initCanvasBoost = function () {
             points = this.points = [];
             ctx = this.getContext();
             series.buildKDTree = noop; // Do not start building while drawing
-            if (this.boostClear) {
-                this.boostClear();
+            if (boost.clear) {
+                boost.clear();
             }
             // if (this.canvas) {
             //     ctx.clearRect(
@@ -410,8 +420,13 @@ var initCanvasBoost = function () {
                     }
                     wasNull = isNull && !connectNulls;
                     if (i % CHUNK_SIZE === 0) {
-                        if (series.boostCopy || series.chart.boostCopy) {
-                            (series.boostCopy || series.chart.boostCopy)();
+                        if (series.boost &&
+                            series.boost.copy) {
+                            series.boost.copy();
+                        }
+                        else if (series.chart.boost &&
+                            series.chart.boost.copy) {
+                            series.chart.boost.copy();
                         }
                     }
                 }
@@ -493,19 +508,20 @@ var initCanvasBoost = function () {
          * @private
          */
         function canvasToSVG() {
-            if (chart.boostCopy) {
-                chart.boostCopy();
+            if (chart.boost && chart.boost.copy) {
+                chart.boost.copy();
             }
         }
         /**
          * @private
          */
         function clear() {
-            if (chart.renderTarget) {
-                chart.renderTarget.attr({ href: b64BlankPixel });
+            var boost = this.boost || {};
+            if (boost.target) {
+                boost.target.attr({ href: b64BlankPixel });
             }
-            if (chart.canvas) {
-                chart.canvas.getContext('2d').clearRect(0, 0, chart.canvas.width, chart.canvas.height);
+            if (boost.canvas) {
+                boost.canvas.getContext('2d').clearRect(0, 0, boost.canvas.width, boost.canvas.height);
             }
         }
         addEvent(chart, 'predraw', clear);

package/es-modules/Extensions/Breadcrumbs.js

@@ -22,11 +22,15 @@ var addEvent = U.addEvent, objectEach = U.objectEach, extend = U.extend, fireEve
 extend(defaultOptions.lang, 
 /**
  * @optionparent lang
+ *
+ * @private
  */
 {
     /**
      * @since 10.0.0
      * @product  highcharts
+     *
+     * @private
      */
     mainBreadcrumb: 'Main'
 });

package/es-modules/Extensions/DataGrouping.js

@@ -20,32 +20,6 @@ import Tooltip from '../Core/Tooltip.js';
 import D from '../Core/DefaultOptions.js';
 import U from '../Core/Utilities.js';
 var addEvent = U.addEvent, arrayMax = U.arrayMax, arrayMin = U.arrayMin, correctFloat = U.correctFloat, defined = U.defined, error = U.error, extend = U.extend, isNumber = U.isNumber, merge = U.merge, pick = U.pick;
-/**
- * @typedef {"average"|"averages"|"open"|"high"|"low"|"close"|"sum"} Highcharts.DataGroupingApproximationValue
- */
-/**
- * The position of the point inside the group.
- *
- * @typedef    {"start"|"middle"|"end"} Highcharts.DataGroupingAnchor
- */
-/**
- * The position of the first or last point in the series inside the group.
- *
- * @typedef    {"start"|"middle"|"end"|"firstPoint"|"lastPoint"} Highcharts.DataGroupingAnchorExtremes
- */
-/**
- * @interface Highcharts.DataGroupingInfoObject
- */ /**
-* @name Highcharts.DataGroupingInfoObject#length
-* @type {number}
-*/ /**
-* @name Highcharts.DataGroupingInfoObject#options
-* @type {Highcharts.SeriesOptionsType|undefined}
-*/ /**
-* @name Highcharts.DataGroupingInfoObject#start
-* @type {number}
-*/
-''; // detach doclets above
 import '../Core/Axis/Axis.js';
 /* ************************************************************************** *
  *  Start data grouping module                                                *
@@ -842,9 +816,73 @@ addEvent(Axis, 'afterSetScale', function () {
         series.hasProcessed = false;
     });
 });
+/* *
+ *
+ *  Default Export
+ *
+ * */
+// @todo move to master
 H.dataGrouping = dataGrouping;
 export default dataGrouping;
-/* eslint-enable no-invalid-this, valid-jsdoc */
+/* *
+ *
+ *  API Declarations
+ *
+ * */
+/**
+ * @typedef {"average"|"averages"|"open"|"high"|"low"|"close"|"sum"} Highcharts.DataGroupingApproximationValue
+ */
+/**
+ * The position of the point inside the group.
+ *
+ * @typedef    {"start"|"middle"|"end"} Highcharts.DataGroupingAnchor
+ */
+/**
+ * The position of the first or last point in the series inside the group.
+ *
+ * @typedef    {"start"|"middle"|"end"|"firstPoint"|"lastPoint"} Highcharts.DataGroupingAnchorExtremes
+ */
+/**
+ * Highcharts Stock only.
+ *
+ * @product highstock
+ * @interface Highcharts.DataGroupingInfoObject
+ */ /**
+* @name Highcharts.DataGroupingInfoObject#length
+* @type {number}
+*/ /**
+* @name Highcharts.DataGroupingInfoObject#options
+* @type {Highcharts.SeriesOptionsType|undefined}
+*/ /**
+* @name Highcharts.DataGroupingInfoObject#start
+* @type {number}
+*/
+/**
+ * Highcharts Stock only. If a point object is created by data
+ * grouping, it doesn't reflect actual points in the raw
+ * data. In this case, the `dataGroup` property holds
+ * information that points back to the raw data.
+ *
+ * - `dataGroup.start` is the index of the first raw data
+ *   point in the group.
+ *
+ * - `dataGroup.length` is the amount of points in the
+ *   group.
+ *
+ * @sample stock/members/point-datagroup
+ *         Click to inspect raw data points
+ *
+ * @product highstock
+ *
+ * @name Highcharts.Point#dataGroup
+ * @type {Highcharts.DataGroupingInfoObject|undefined}
+ */
+(''); // detach doclets above
+/* *
+ *
+ *  API Options
+ *
+ * */
 /**
  * Data grouping is the concept of sampling the data values into larger
  * blocks in order to ease readability and increase performance of the

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

@@ -8,20 +8,19 @@
  *
  * */
 'use strict';
-import Chart from '../../Core/Chart/Chart.js';
 import ErrorMessages from './ErrorMessages.js';
 import H from '../../Core/Globals.js';
-var charts = H.charts;
 import D from '../../Core/DefaultOptions.js';
 var setOptions = D.setOptions;
 import U from '../../Core/Utilities.js';
 var addEvent = U.addEvent, find = U.find, isNumber = U.isNumber;
 /* *
  *
- *  Compositions
+ *  Constants
  *
  * */
-setOptions({
+var composedClasses = [];
+var defaultOptions = {
     /**
      * @optionparent chart
      */
@@ -38,22 +37,61 @@ setOptions({
          */
         displayErrors: true
     }
-});
-/* eslint-disable no-invalid-this */
-addEvent(H, 'displayError', function (e) {
+};
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * @private
+ */
+function compose(ChartClass) {
+    if (composedClasses.indexOf(ChartClass) === -1) {
+        composedClasses.push(ChartClass);
+        addEvent(ChartClass, 'beforeRedraw', onChartBeforeRedraw);
+    }
+    if (composedClasses.indexOf(H) === -1) {
+        composedClasses.push(H);
+        addEvent(H, 'displayError', onHighchartsDisplayError);
+    }
+    if (composedClasses.indexOf(setOptions) === -1) {
+        composedClasses.push(setOptions);
+        setOptions(defaultOptions);
+    }
+}
+/**
+ * @private
+ */
+function onChartBeforeRedraw() {
+    var errorElements = this.errorElements;
+    if (errorElements && errorElements.length) {
+        for (var _i = 0, errorElements_1 = errorElements; _i < errorElements_1.length; _i++) {
+            var el = errorElements_1[_i];
+            el.destroy();
+        }
+    }
+    delete this.errorElements;
+}
+/**
+ * @private
+ */
+function onHighchartsDisplayError(e) {
     // Display error on the chart causing the error or the last created chart.
-    var chart = e.chart ||
-        find(charts.slice().reverse(), function (c) { return !!c; });
+    var chart = (e.chart ||
+        find(this.charts.slice().reverse(), function (c) { return !!c; }));
     if (!chart) {
         return;
     }
-    var code = e.code, msg, options = chart.options.chart, renderer = chart.renderer, chartWidth, chartHeight;
+    var code = e.code, options = chart.options.chart, renderer = chart.renderer;
+    var msg, chartWidth, chartHeight;
     if (chart.errorElements) {
-        chart.errorElements.forEach(function (el) {
+        for (var _i = 0, _a = chart.errorElements; _i < _a.length; _i++) {
+            var el = _a[_i];
             if (el) {
                 el.destroy();
             }
-        });
+        }
     }
     if (options && options.displayErrors && renderer) {
         chart.errorElements = [];
@@ -89,13 +127,13 @@ addEvent(H, 'displayError', function (e) {
             y: chartHeight - chart.errorElements[1].getBBox().height
         });
     }
-});
-addEvent(Chart, 'beforeRedraw', function () {
-    var errorElements = this.errorElements;
-    if (errorElements && errorElements.length) {
-        errorElements.forEach(function (el) {
-            el.destroy();
-        });
-    }
-    delete this.errorElements;
-});
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+var Debugger = {
+    compose: compose
+};
+export default Debugger;

package/es-modules/Extensions/DraggablePoints.js

@@ -336,7 +336,7 @@ if (seriesTypes.boxplot) {
             }
         },
         median: {
-            // Median can not be dragged individually, just move the whole
+            // Median cannot be dragged individually, just move the whole
             // point for this.
             axis: 'y',
             move: true
@@ -989,6 +989,7 @@ var defaultDragHandleOptions = {
  * @type       {string}
  * @since      6.2.0
  * @validvalue ["alt", "ctrl", "meta", "shift"]
+ * @deprecated
  * @requires  modules/draggable-points
  * @apioption  chart.zoomKey
  */
@@ -1268,7 +1269,7 @@ function getPositionSnapshot(e, points, guideBox) {
  */
 function getGroupedPoints(point) {
     var series = point.series, points = [], groupKey = series.options.dragDrop.groupBy;
-    if (series.isSeriesBoosting) { // #11156
+    if (series.boosted) { // #11156
         series.options.data.forEach(function (pointOptions, i) {
             points.push((new series.pointClass()).init(// eslint-disable-line new-cap
             series, pointOptions));
@@ -2052,7 +2053,7 @@ addEvent(Point, 'remove', function () {
  */
 Chart.prototype.zoomOrPanKeyPressed = function (e) {
     // Check whether the panKey and zoomKey are set in chart.userOptions
-    var chartOptions = this.userOptions.chart || {}, panKey = chartOptions.panKey && chartOptions.panKey + 'Key', zoomKey = chartOptions.zoomKey && chartOptions.zoomKey + 'Key';
+    var chartOptions = this.options.chart || {}, panKey = chartOptions.panKey && chartOptions.panKey + 'Key', zoomKey = chartOptions.zooming.key && chartOptions.zooming.key + 'Key';
     return (e[zoomKey] || e[panKey]);
 };
 /**