highcharts 9.3.1 → 10.0.0

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

@@ -95,9 +95,12 @@ var Tunnel = /** @class */ (function (_super) {
     /**
      * Translate start or end ("left" or "right") side of the tunnel.
      * @private
-     * @param {number} dx - the amount of x translation
-     * @param {number} dy - the amount of y translation
-     * @param {boolean} [end] - whether to translate start or end side
+     * @param {number} dx
+     * the amount of x translation
+     * @param {number} dy
+     * the amount of y translation
+     * @param {boolean} [end]
+     * whether to translate start or end side
      */
     Tunnel.prototype.translateSide = function (dx, dy, end) {
         var topIndex = Number(end), bottomIndex = topIndex === 0 ? 3 : 2;
@@ -107,12 +110,14 @@ var Tunnel = /** @class */ (function (_super) {
     /**
      * Translate height of the tunnel.
      * @private
-     * @param {number} dh - the amount of height translation
+     * @param {number} dh
+     * the amount of height translation
      */
     Tunnel.prototype.translateHeight = function (dh) {
         this.translatePoint(0, dh, 2);
         this.translatePoint(0, dh, 3);
-        this.options.typeOptions.height = this.points[3].y - this.points[0].y;
+        this.options.typeOptions.height = this.points[3].y -
+            this.points[0].y;
     };
     return Tunnel;
 }(CrookedLine));

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

@@ -165,7 +165,7 @@ function init() {
                                 }
                             }
                             // Add points and reset
-                            if (clientX !== lastClientX) {
+                            if (!compareX || clientX !== lastClientX) {
                                 // maxI is number too:
                                 if (typeof minI !== 'undefined') {
                                     plotY =
@@ -242,6 +242,11 @@ function init() {
         fillOpacity: true,
         sampling: true
     });
+    extend(seriesTypes.areaspline.prototype, {
+        fill: true,
+        fillOpacity: true,
+        sampling: true
+    });
     extend(seriesTypes.column.prototype, {
         fill: true,
         sampling: true

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

@@ -149,6 +149,32 @@ import '../../Core/Globals.js';
  * @default   false
  * @apioption boost.debug.timeBufferCopy
  */
+/**
+ * The pixel ratio for the WebGL content. If 0, the `window.devicePixelRatio` is
+ * used. This ensures sharp graphics on high DPI displays like Apple's Retina,
+ * as well as when a page is zoomed.
+ *
+ * The default is left at 1 for now, as this is a new feature that has the
+ * potential to break existing setups. Over time, when it has been battle
+ * tested, the intention is to set it to 0 by default.
+ *
+ * Another use case for this option is to set it to 2 in order to make exported
+ * and upscaled charts render sharp.
+ *
+ * One limitation when using the `pixelRatio` is that the line width of graphs
+ * is scaled down. Since the Boost module currently can only render 1px line
+ * widths, it is scaled down to a thin 0.5 pixels on a Retina display.
+ *
+ * @sample    highcharts/boost/line-devicepixelratio
+ *            Enable the `devicePixelRatio`
+ * @sample    highcharts/boost/line-export-pixelratio
+ *            Sharper graphics in export
+ *
+ * @type      {number}
+ * @since 10.0.0
+ * @default   1
+ * @apioption boost.pixelRatio
+ */
 /**
  * Enable or disable GPU translations. GPU translations are faster than doing
  * the translation in JavaScript.

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

@@ -49,10 +49,6 @@ Chart.prototype.isChartSeriesBoosting = function () {
  *
  * @private
  * @function Highcharts.Chart#getBoostClipRect
- *
- * @param {Highcharts.Chart} target
- *
- * @return {Highcharts.BBoxObject}
  */
 Chart.prototype.getBoostClipRect = function (target) {
     var clipBox = {
@@ -65,7 +61,9 @@ Chart.prototype.getBoostClipRect = function (target) {
         var verticalAxes = this.inverted ? this.xAxis : this.yAxis; // #14444
         if (verticalAxes.length <= 1) {
             clipBox.y = Math.min(verticalAxes[0].pos, clipBox.y);
-            clipBox.height = verticalAxes[0].pos - this.plotTop + verticalAxes[0].len;
+            clipBox.height = (verticalAxes[0].pos -
+                this.plotTop +
+                verticalAxes[0].len);
         }
         else {
             clipBox.height = this.plotHeight;
@@ -332,10 +330,6 @@ Series.prototype.exitBoost = function () {
 /**
  * @private
  * @function Highcharts.Series#hasExtremes
- *
- * @param {boolean} checkX
- *
- * @return {boolean}
  */
 Series.prototype.hasExtremes = function (checkX) {
     var options = this.options, data = options.data, xAxis = this.xAxis && this.xAxis.options, yAxis = this.yAxis && this.yAxis.options, colorAxis = this.colorAxis && this.colorAxis.options;

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

@@ -194,8 +194,6 @@ function eachAsync(arr, fn, finalFunc, chunkSize, i, noTimeout) {
  *
  * @private
  * @function hasWebGLSupport
- *
- * @return {boolean}
  */
 function hasWebGLSupport() {
     var i = 0, canvas, contexts = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'], context = false;
@@ -221,10 +219,6 @@ function hasWebGLSupport() {
  *
  * @private
  * @function pointDrawHandler
- *
- * @param {Function} proceed
- *
- * @return {*}
  */
 function pointDrawHandler(proceed) {
     var enabled = true, renderer;

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

@@ -12,6 +12,7 @@
 // These are the series we allow boosting for.
 var boostables = [
     'area',
+    'areaspline',
     'arearange',
     'column',
     'columnrange',

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

@@ -15,7 +15,7 @@ var color = Color.parse;
 import GLShader from './WGLShader.js';
 import GLVertexBuffer from './WGLVBuffer.js';
 import H from '../../Core/Globals.js';
-var doc = H.doc;
+var doc = H.doc, win = H.win;
 import U from '../../Core/Utilities.js';
 var isNumber = U.isNumber, isObject = U.isObject, merge = U.merge, objectEach = U.objectEach, pick = U.pick;
 /* eslint-disable valid-jsdoc */
@@ -29,10 +29,6 @@ var isNumber = U.isNumber, isObject = U.isObject, merge = U.merge, objectEach =
  *
  * @private
  * @function GLRenderer
- *
- * @param {Function} postRenderCallback
- *
- * @return {*}
  */
 function GLRenderer(postRenderCallback) {
     //  // Shader
@@ -63,6 +59,7 @@ function GLRenderer(postRenderCallback) {
         'columnrange': true,
         'bar': true,
         'area': true,
+        'areaspline': true,
         'arearange': true
     }, asCircle = {
         'scatter': true,
@@ -86,10 +83,22 @@ function GLRenderer(postRenderCallback) {
         }
     };
     // /////////////////////////////////////////////////////////////////////////
+    /**
+     * @private
+     */
+    function getPixelRatio() {
+        return settings.pixelRatio || win.devicePixelRatio || 1;
+    }
     /**
      * @private
      */
     function setOptions(options) {
+        // The pixelRatio defaults to 1. This is an antipattern, we should
+        // refactor the Boost options to include an object of default options as
+        // base for the merge, like other components.
+        if (!('pixelRatio' in options)) {
+            options.pixelRatio = 1;
+        }
         merge(true, settings, options);
     }
     /**
@@ -149,8 +158,10 @@ function GLRenderer(postRenderCallback) {
     /**
      * Returns an orthographic perspective matrix
      * @private
-     * @param {number} width - the width of the viewport in pixels
-     * @param {number} height - the height of the viewport in pixels
+     * @param {number} width
+     * the width of the viewport in pixels
+     * @param {number} height
+     * the height of the viewport in pixels
      */
     function orthoMatrix(width, height) {
         var near = 0, far = 1;
@@ -171,7 +182,8 @@ function GLRenderer(postRenderCallback) {
     /**
      * Get the WebGL context
      * @private
-     * @returns {WebGLContext} - the context
+     * @return {WebGLContext}
+     * the context
      */
     function getGL() {
         return gl;
@@ -207,7 +219,7 @@ function GLRenderer(postRenderCallback) {
         //
         cullXThreshold = 1, cullYThreshold = 1, 
         // The following are used in the builder while loop
-        x, y, d, z, i = -1, px = false, nx = false, low, chartDestroyed = typeof chart.index === 'undefined', nextInside = false, prevInside = false, pcolor = false, drawAsBar = asBar[series.type], isXInside = false, isYInside = true, firstPoint = true, zoneAxis = options.zoneAxis || 'y', zones = options.zones || false, zoneColors, zoneDefColor = false, threshold = options.threshold, gapSize = false;
+        x, y, d, z, i = -1, px = false, nx = false, low, chartDestroyed = typeof chart.index === 'undefined', nextInside = false, prevInside = false, pcolor = false, drawAsBar = asBar[series.type], isXInside = false, isYInside = true, firstPoint = true, zoneAxis = options.zoneAxis || 'y', zones = options.zones || false, zoneColors, zoneDefColor = false, threshold = options.threshold, gapSize = false, pixelRatio = getPixelRatio();
         if (options.boostData && options.boostData.length > 0) {
             return;
         }
@@ -261,16 +273,24 @@ function GLRenderer(postRenderCallback) {
          * @private
          */
         function vertice(x, y, checkTreshold, pointSize, color) {
+            if (pointSize === void 0) { pointSize = 1; }
             pushColor(color);
+            // Correct for pixel ratio
+            if (pixelRatio !== 1 && (!settings.useGPUTranslations ||
+                inst.skipTranslation)) {
+                x *= pixelRatio;
+                y *= pixelRatio;
+                pointSize *= pixelRatio;
+            }
             if (settings.usePreallocated) {
-                vbuffer.push(x, y, checkTreshold ? 1 : 0, pointSize || 1);
+                vbuffer.push(x, y, checkTreshold ? 1 : 0, pointSize);
                 vlen += 4;
             }
             else {
                 data.push(x);
                 data.push(y);
-                data.push(checkTreshold ? 1 : 0);
-                data.push(pointSize || 1);
+                data.push(checkTreshold ? pixelRatio : 0);
+                data.push(pointSize);
             }
         }
         /**
@@ -366,7 +386,7 @@ function GLRenderer(postRenderCallback) {
                     // We could also use one color per. vertice to get
                     // better color interpolation.
                     // If there's stroking, we do an additional rect
-                    if (series.type === 'treemap') {
+                    if (series.is('treemap')) {
                         swidth = swidth || 1;
                         scolor = color(pointAttr.stroke).rgba;
                         scolor[0] /= 255.0;
@@ -378,12 +398,12 @@ function GLRenderer(postRenderCallback) {
                     // } else {
                     //     swidth = 0;
                     // }
-                    // Fixes issues with inverted heatmaps (see #6981)
-                    // The root cause is that the coordinate system is flipped.
-                    // In other words, instead of [0,0] being top-left, it's
+                    // Fixes issues with inverted heatmaps (see #6981). The root
+                    // cause is that the coordinate system is flipped. In other
+                    // words, instead of [0,0] being top-left, it's
                     // bottom-right. This causes a vertical and horizontal flip
                     // in the resulting image, making it rotated 180 degrees.
-                    if (series.type === 'heatmap' && chart.inverted) {
+                    if (series.is('heatmap') && chart.inverted) {
                         x_1 = xAxis.len - x_1;
                         y_1 = yAxis.len - y_1;
                         width_1 = -width_1;
@@ -530,8 +550,10 @@ function GLRenderer(postRenderCallback) {
                 zone, i) {
                     var last = zones[i - 1];
                     if (zoneAxis === 'x') {
-                        if (typeof zone.value !== 'undefined' && x <= zone.value) {
-                            if (zoneColors[i] && (!last || x >= last.value)) {
+                        if (typeof zone.value !== 'undefined' &&
+                            x <= zone.value) {
+                            if (zoneColors[i] &&
+                                (!last || x >= last.value)) {
                                 zoneColor_1 = zoneColors[i];
                             }
                             return true;
@@ -539,7 +561,8 @@ function GLRenderer(postRenderCallback) {
                         return false;
                     }
                     if (typeof zone.value !== 'undefined' && y <= zone.value) {
-                        if (zoneColors[i] && (!last || y >= last.value)) {
+                        if (zoneColors[i] &&
+                            (!last || y >= last.value)) {
                             zoneColor_1 = zoneColors[i];
                         }
                         return true;
@@ -721,7 +744,7 @@ function GLRenderer(postRenderCallback) {
             drawMode: {
                 'area': 'lines',
                 'arearange': 'lines',
-                'areaspline': 'line_strip',
+                'areaspline': 'lines',
                 'column': 'lines',
                 'columnrange': 'lines',
                 'bar': 'lines',
@@ -767,12 +790,13 @@ function GLRenderer(postRenderCallback) {
         if (!shader) {
             return;
         }
-        shader.setUniform('xAxisTrans', axis.transA);
+        var pixelRatio = getPixelRatio();
+        shader.setUniform('xAxisTrans', axis.transA * pixelRatio);
         shader.setUniform('xAxisMin', axis.min);
-        shader.setUniform('xAxisMinPad', axis.minPixelPadding);
+        shader.setUniform('xAxisMinPad', axis.minPixelPadding * pixelRatio);
         shader.setUniform('xAxisPointRange', axis.pointRange);
-        shader.setUniform('xAxisLen', axis.len);
-        shader.setUniform('xAxisPos', axis.pos);
+        shader.setUniform('xAxisLen', axis.len * pixelRatio);
+        shader.setUniform('xAxisPos', axis.pos * pixelRatio);
         shader.setUniform('xAxisCVSCoord', (!axis.horiz));
         shader.setUniform('xAxisIsLog', (!!axis.logarithmic));
         shader.setUniform('xAxisReversed', (!!axis.reversed));
@@ -786,12 +810,13 @@ function GLRenderer(postRenderCallback) {
         if (!shader) {
             return;
         }
-        shader.setUniform('yAxisTrans', axis.transA);
+        var pixelRatio = getPixelRatio();
+        shader.setUniform('yAxisTrans', axis.transA * pixelRatio);
         shader.setUniform('yAxisMin', axis.min);
-        shader.setUniform('yAxisMinPad', axis.minPixelPadding);
+        shader.setUniform('yAxisMinPad', axis.minPixelPadding * pixelRatio);
         shader.setUniform('yAxisPointRange', axis.pointRange);
-        shader.setUniform('yAxisLen', axis.len);
-        shader.setUniform('yAxisPos', axis.pos);
+        shader.setUniform('yAxisLen', axis.len * pixelRatio);
+        shader.setUniform('yAxisPos', axis.pos * pixelRatio);
         shader.setUniform('yAxisCVSCoord', (!axis.horiz));
         shader.setUniform('yAxisIsLog', (!!axis.logarithmic));
         shader.setUniform('yAxisReversed', (!!axis.reversed));
@@ -812,12 +837,10 @@ function GLRenderer(postRenderCallback) {
      * @private
      */
     function render(chart) {
+        var pixelRatio = getPixelRatio();
         if (chart) {
-            if (!chart.chartHeight || !chart.chartWidth) {
-                // chart.setChartSize();
-            }
-            width = chart.chartWidth || 800;
-            height = chart.chartHeight || 400;
+            width = chart.chartWidth * pixelRatio;
+            height = chart.chartHeight * pixelRatio;
         }
         else {
             return false;
@@ -920,18 +943,13 @@ function GLRenderer(postRenderCallback) {
             setYAxis(s.series.yAxis);
             setThreshold(hasThreshold, translatedThreshold);
             if (s.drawMode === 'points') {
-                if (options.marker && isNumber(options.marker.radius)) {
-                    shader.setPointSize(options.marker.radius * 2.0);
-                }
-                else {
-                    shader.setPointSize(1);
-                }
+                shader.setPointSize(pick(options.marker && options.marker.radius, 0.5) * 2 * pixelRatio);
             }
             // If set to true, the toPixels translations in the shader
             // is skipped, i.e it's assumed that the value is a pixel coord.
             shader.setSkipTranslation(s.skipTranslation);
             if (s.series.type === 'bubble') {
-                shader.setBubbleUniforms(s.series, s.zMin, s.zMax);
+                shader.setBubbleUniforms(s.series, s.zMin, s.zMax, pixelRatio);
             }
             shader.setDrawAsCircle(asCircle[s.series.type] || false);
             // Do the actual rendering
@@ -942,12 +960,7 @@ function GLRenderer(postRenderCallback) {
                 }
             }
             if (s.hasMarkers && showMarkers) {
-                if (options.marker && isNumber(options.marker.radius)) {
-                    shader.setPointSize(options.marker.radius * 2.0);
-                }
-                else {
-                    shader.setPointSize(10);
-                }
+                shader.setPointSize(pick(options.marker && options.marker.radius, 5) * 2 * pixelRatio);
                 shader.setDrawAsCircle(true);
                 for (sindex = 0; sindex < s.segments.length; sindex++) {
                     vbuffer.render(s.segments[sindex].from, s.segments[sindex].to, 'POINTS');
@@ -1128,7 +1141,8 @@ function GLRenderer(postRenderCallback) {
     /**
      * Check if we have a valid OGL context
      * @private
-     * @returns {Boolean} - true if the context is valid
+     * @return {boolean}
+     * true if the context is valid
      */
     function valid() {
         return gl !== false;
@@ -1136,7 +1150,8 @@ function GLRenderer(postRenderCallback) {
     /**
      * Check if the renderer has been initialized
      * @private
-     * @returns {Boolean} - true if it has, false if not
+     * @return {boolean}
+     * true if it has, false if not
      */
     function inited() {
         return isInited;

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

@@ -20,9 +20,7 @@ var clamp = U.clamp, error = U.error, pick = U.pick;
  * @function GLShader
  *
  * @param {WebGLContext} gl
- *        the context in which the shader is active
- *
- * @return {*}
+ * the context in which the shader is active
  */
 function GLShader(gl) {
     var vertShade = [
@@ -231,9 +229,10 @@ function GLShader(gl) {
     /**
      * String to shader program
      * @private
-     * @param {string} str - the program source
-     * @param {string} type - the program type: either `vertex` or `fragment`
-     * @returns {bool|shader}
+     * @param {string} str
+     * the program source
+     * @param {string} type
+     * the program type: either `vertex` or `fragment`
      */
     function stringToProgram(str, type) {
         var t = type === 'vertex' ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER, shader = gl.createShader(t);
@@ -328,7 +327,8 @@ function GLShader(gl) {
     /**
      * Set the active texture
      * @private
-     * @param texture - the texture
+     * @param texture
+     * the texture
      */
     function setTexture(texture) {
         if (gl && shaderProgram) {
@@ -338,7 +338,8 @@ function GLShader(gl) {
     /**
      * Set if inversion state
      * @private
-     * @flag is the state
+     * @param {number} flag
+     * is the state
      */
     function setInverted(flag) {
         if (gl && shaderProgram) {
@@ -369,7 +370,8 @@ function GLShader(gl) {
      * @private
      * @param series {Highcharts.Series} - the series to use
      */
-    function setBubbleUniforms(series, zCalcMin, zCalcMax) {
+    function setBubbleUniforms(series, zCalcMin, zCalcMax, pixelRatio) {
+        if (pixelRatio === void 0) { pixelRatio = 1; }
         var seriesOptions = series.options, zMin = Number.MAX_VALUE, zMax = -Number.MAX_VALUE;
         if (gl && shaderProgram && series.is('bubble')) {
             var pxSizes = series.getPxExtremes();
@@ -384,8 +386,8 @@ function GLShader(gl) {
             setUniform('bubbleZMin', zMin);
             setUniform('bubbleZMax', zMax);
             setUniform('bubbleZThreshold', series.options.zThreshold);
-            setUniform('bubbleMinSize', pxSizes.minPxSize);
-            setUniform('bubbleMaxSize', pxSizes.maxPxSize);
+            setUniform('bubbleMinSize', pxSizes.minPxSize * pixelRatio);
+            setUniform('bubbleMaxSize', pxSizes.maxPxSize * pixelRatio);
         }
     }
     /**

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

@@ -18,14 +18,10 @@
  *
  * @private
  * @function GLVertexBuffer
- *
  * @param {WebGLContext} gl
- *        the context in which to create the buffer
- *
+ * the context in which to create the buffer
  * @param {GLShader} shader
- *        the shader to use
- *
- * @return {*}
+ * the shader to use
  */
 function GLVertexBuffer(gl, shader, dataComponents
 /* , type */
@@ -101,7 +97,8 @@ function GLVertexBuffer(gl, shader, dataComponents
      * @param drawMode {String} - the draw mode
      */
     function render(from, to, drawMode) {
-        var length = preAllocated ? preAllocated.length : data.length;
+        var length = preAllocated ?
+            preAllocated.length : data.length;
         if (!buffer) {
             return false;
         }