highcharts 11.4.3 → 11.4.5

package/es-modules/Core/Legend/Legend.js

@@ -10,13 +10,16 @@
 'use strict';
 import A from '../Animation/AnimationUtilities.js';
 const { animObject, setAnimation } = A;
-import F from '../Templating.js';
-const { format } = F;
+import F from '../Foundation.js';
+const { registerEventOptions } = F;
 import H from '../Globals.js';
 const { composed, marginNames } = H;
+import Series from '../Series/Series.js';
 import Point from '../Series/Point.js';
 import R from '../Renderer/RendererUtilities.js';
 const { distribute } = R;
+import T from '../Templating.js';
+const { format } = T;
 import U from '../Utilities.js';
 const { addEvent, createElement, css, defined, discardElement, find, fireEvent, isNumber, merge, pick, pushUnique, relativeLength, stableSort, syncTimeout } = U;
 /* *
@@ -95,6 +98,7 @@ class Legend {
         if (options.enabled) {
             // Render it
             this.render();
+            registerEventOptions(this, options);
             // Move checkboxes
             addEvent(this.chart, 'endResize', function () {
                 this.legend.positionCheckboxes();
@@ -160,6 +164,10 @@ class Legend {
     update(options, redraw) {
         const chart = this.chart;
         this.setOptions(merge(true, this.options, options));
+        if ('events' in this.options) {
+            // Legend event handlers
+            registerEventOptions(this, this.options);
+        }
         this.destroy();
         chart.isDirtyLegend = chart.isDirtyBox = true;
         if (pick(redraw, true)) {
@@ -1045,11 +1053,10 @@ class Legend {
      * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
      * @param {Highcharts.SVGElement} legendLabel
      * @param {boolean} [useHTML=false]
-     * @emits Highcharts.Point#event:legendItemClick
-     * @emits Highcharts.Series#event:legendItemClick
+     * @emits Highcharts.Legend#event:itemClick
      */
     setItemEvents(item, legendLabel, useHTML) {
-        const legend = this, legendItem = item.legendItem || {}, boxWrapper = legend.chart.renderer.boxWrapper, isPoint = item instanceof Point, activeClass = 'highcharts-legend-' +
+        const legend = this, legendItem = item.legendItem || {}, boxWrapper = legend.chart.renderer.boxWrapper, isPoint = item instanceof Point, isSeries = item instanceof Series, activeClass = 'highcharts-legend-' +
             (isPoint ? 'point' : 'series') + '-active', styledMode = legend.chart.styledMode, 
         // When `useHTML`, the symbol is rendered in other group, so
         // we need to apply events listeners to both places
@@ -1100,7 +1107,7 @@ class Legend {
                     item.setState();
                 })
                     .on('click', function (event) {
-                    const strLegendItemClick = 'legendItemClick', fnLegendItemClick = function () {
+                    const defaultItemClick = function () {
                         if (item.setVisible) {
                             item.setVisible();
                         }
@@ -1111,16 +1118,22 @@ class Legend {
                     // series. Event handling in iOS causes the activeClass
                     // to be added prior to click in some cases (#7418).
                     boxWrapper.removeClass(activeClass);
-                    // Pass over the click/touch event. #4.
-                    event = {
-                        browserEvent: event
-                    };
+                    fireEvent(legend, 'itemClick', {
+                        // Pass over the click/touch event. #4.
+                        browserEvent: event,
+                        legendItem: item
+                    }, defaultItemClick);
+                    // Deprecated logic
                     // Click the name or symbol
-                    if (item.firePointEvent) { // Point
-                        item.firePointEvent(strLegendItemClick, event, fnLegendItemClick);
+                    if (isPoint) {
+                        item.firePointEvent('legendItemClick', {
+                            browserEvent: event
+                        });
                     }
-                    else {
-                        fireEvent(item, strLegendItemClick, event, fnLegendItemClick);
+                    else if (isSeries) {
+                        fireEvent(item, 'legendItemClick', {
+                            browserEvent: event
+                        });
                     }
                 });
             }
@@ -1211,11 +1224,54 @@ export default Legend;
 * @name Highcharts.LegendItemObject#symbol
 * @type {Highcharts.SVGElement|undefined}
 */
+/**
+ * Gets fired when the legend item is clicked. The default
+ * action is to toggle the visibility of the series or point. This can be
+ * prevented by returning `false` or calling `event.preventDefault()`.
+ *
+ * @callback Highcharts.LegendItemClickCallbackFunction
+ *
+ * @param {Highcharts.Legend} this
+ *        The legend on which the event occurred.
+ *
+ * @param {Highcharts.LegendItemClickEventObject} event
+ *        The event that occurred.
+ */
+/**
+ * Information about the legend click event.
+ *
+ * @interface Highcharts.LegendItemClickEventObject
+ */ /**
+* Related browser event.
+* @name Highcharts.LegendItemClickEventObject#browserEvent
+* @type {Highcharts.PointerEvent}
+*/ /**
+* Prevent the default action of toggle the visibility of the series or point.
+* @name Highcharts.LegendItemClickEventObject#preventDefault
+* @type {Function}
+* */ /**
+* Related legend item, it can be series, point, color axis or data class from
+* color axis.
+* @name Highcharts.LegendItemClickEventObject#legendItem
+* @type {Highcharts.Series|Highcharts.Point|Highcharts.LegendItemObject}
+* */ /**
+* Related legend.
+* @name Highcharts.LegendItemClickEventObject#target
+* @type {Highcharts.Legend}
+*/ /**
+* Event type.
+* @name Highcharts.LegendItemClickEventObject#type
+* @type {"itemClick"}
+*/
 /**
  * Gets fired when the legend item belonging to a point is clicked. The default
  * action is to toggle the visibility of the point. This can be prevented by
  * returning `false` or calling `event.preventDefault()`.
  *
+ * **Note:** This option is deprecated in favor of
+ * Highcharts.LegendItemClickCallbackFunction.
+ *
+ * @deprecated 11.4.4
  * @callback Highcharts.PointLegendItemClickCallbackFunction
  *
  * @param {Highcharts.Point} this
@@ -1227,6 +1283,10 @@ export default Legend;
 /**
  * Information about the legend click event.
  *
+ * **Note:** This option is deprecated in favor of
+ * Highcharts.LegendItemClickEventObject.
+ *
+ * @deprecated 11.4.4
  * @interface Highcharts.PointLegendItemClickEventObject
  */ /**
 * Related browser event.
@@ -1260,6 +1320,10 @@ export default Legend;
  * action is to toggle the visibility of the series. This can be prevented by
  * returning `false` or calling `event.preventDefault()`.
  *
+ * **Note:** This option is deprecated in favor of
+ * Highcharts.LegendItemClickCallbackFunction.
+ *
+ * @deprecated 11.4.4
  * @callback Highcharts.SeriesLegendItemClickCallbackFunction
  *
  * @param {Highcharts.Series} this
@@ -1271,6 +1335,10 @@ export default Legend;
 /**
  * Information about the legend click event.
  *
+ * **Note:** This option is deprecated in favor of
+ * Highcharts.LegendItemClickEventObject.
+ *
+ * @deprecated 11.4.4
  * @interface Highcharts.SeriesLegendItemClickEventObject
  */ /**
 * Related browser event.

package/es-modules/Core/MSPointer.js

@@ -12,7 +12,7 @@ import H from './Globals.js';
 const { charts, composed, doc, noop, win } = H;
 import Pointer from './Pointer.js';
 import U from './Utilities.js';
-const { addEvent, css, objectEach, pick, pushUnique, removeEvent } = U;
+const { addEvent, attr, css, defined, objectEach, pick, pushUnique, removeEvent } = U;
 /* *
  *
  *  Constants
@@ -102,6 +102,47 @@ class MSPointer extends Pointer {
             });
         }
     }
+    /**
+     * Utility to detect whether an element has, or has a parent with, a
+     * specific class name. Used on detection of tracker objects and on deciding
+     * whether hovering the tooltip should cause the active series to mouse out.
+     *
+     * @function Highcharts.Pointer#inClass
+     *
+     * @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
+     * The element to investigate.
+     *
+     * @param {string} className
+     * The class name to look for.
+     *
+     * @return {boolean|undefined}
+     * True if either the element or one of its parents has the given class
+     * name.
+     */
+    inClass(element, className) {
+        let elem = element, elemClassName;
+        while (elem) {
+            elemClassName = attr(elem, 'class');
+            if (elemClassName) {
+                if (elemClassName.indexOf(className) !== -1) {
+                    return true;
+                }
+                if (elemClassName.indexOf('highcharts-container') !== -1) {
+                    return false;
+                }
+            }
+            // #21098 IE11 compatibility
+            elem = elem.parentNode;
+            if (elem && (
+            // HTMLElement
+            elem === document.documentElement ||
+                // Document
+                defined(elem.nodeType) &&
+                    elem.nodeType === document.nodeType)) {
+                elem = null;
+            }
+        }
+    }
     /**
      * @private
      * @function Highcharts.Pointer#onContainerPointerDown

package/es-modules/Core/Pointer.js

@@ -276,7 +276,7 @@ class Pointer {
                         ((a.coll === 'xAxis' && this.zoomX) ||
                             (a.coll === 'yAxis' && this.zoomY))),
                     selection: {
-                        originalEvent: e,
+                        originalEvent: e, // #4890
                         xAxis: [],
                         yAxis: [],
                         ...from
@@ -741,7 +741,6 @@ class Pointer {
         this.onContainerMouseMove(e);
         // #4886, MS Touch end fires mouseleave but with no related target
         if (pointer &&
-            e.relatedTarget &&
             !this.inClass(e.relatedTarget, 'highcharts-tooltip')) {
             pointer.reset();
             // Also reset the chart position, used in #149 fix
@@ -836,8 +835,8 @@ class Pointer {
                 visiblePlotOnly: true
             }) &&
             !(tooltip &&
-                tooltip.shouldStickOnContact(pEvt)) &&
-            !this.inClass(pEvt.target, 'highcharts-tracker')) {
+                tooltip.shouldStickOnContact(pEvt)) && (pEvt.target === chart.container.ownerDocument ||
+            !this.inClass(pEvt.target, 'highcharts-tracker'))) {
             this.reset();
         }
     }
@@ -885,6 +884,7 @@ class Pointer {
         if (e.type === 'touchstart') {
             pointer.pinchDown = touches;
             pointer.res = true; // Reset on next move
+            chart.mouseDownX = e.chartX;
             // Optionally move the tooltip on touchmove
         }
         else if (followTouchMove) {
@@ -1359,7 +1359,11 @@ class Pointer {
         const hoverChart = H.charts[pick(Pointer.hoverChartIndex, -1)];
         if (hoverChart &&
             hoverChart !== chart) {
-            hoverChart.pointer?.onContainerMouseLeave(e || { relatedTarget: chart.container });
+            const relatedTargetObj = { relatedTarget: chart.container };
+            if (e && !e?.relatedTarget) {
+                e = { ...relatedTargetObj, ...e };
+            }
+            hoverChart.pointer?.onContainerMouseLeave(e || relatedTargetObj);
         }
         if (!hoverChart ||
             !hoverChart.mouseIsDown) {
@@ -1375,8 +1379,8 @@ class Pointer {
         const { chart, pinchDown = [] } = this;
         let hasMoved, isInside;
         this.setHoverChartIndex();
+        e = this.normalize(e);
         if (e.touches.length === 1) {
-            e = this.normalize(e);
             isInside = chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop, {
                 visiblePlotOnly: true
             });

package/es-modules/Core/Renderer/HTML/AST.js

@@ -347,16 +347,19 @@ AST.allowedAttributes = [
     'href',
     'id',
     'in',
+    'in2',
     'markerHeight',
     'markerWidth',
     'offset',
     'opacity',
+    'operator',
     'orient',
     'padding',
     'paddingLeft',
     'paddingRight',
     'patternUnits',
     'r',
+    'radius',
     'refX',
     'refY',
     'role',
@@ -447,12 +450,15 @@ AST.allowedTags = [
     'dt',
     'em',
     'feComponentTransfer',
+    'feComposite',
     'feDropShadow',
+    'feFlood',
     'feFuncA',
     'feFuncB',
     'feFuncG',
     'feFuncR',
     'feGaussianBlur',
+    'feMorphology',
     'feOffset',
     'feMerge',
     'feMergeNode',

package/es-modules/Core/Renderer/HTML/HTMLElement.js

@@ -49,7 +49,7 @@ const decorateSVGGroup = (g, container) => {
             ...g.styles,
             // Add g attributes that correspond to CSS
             display: g.display,
-            opacity: g.opacity,
+            opacity: g.opacity, // #5075
             visibility: g.visibility
         }, 
         // The top group is appended to container
@@ -260,7 +260,7 @@ class HTMLElement extends SVGElement {
                     css(element, {
                         width: (textPxLength > textWidthNum) || rotation ?
                             textWidth + 'px' :
-                            'auto',
+                            'auto', // #16261
                         display: 'block',
                         whiteSpace: whiteSpace || 'normal' // #3331
                     });

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -71,7 +71,7 @@ class SVGElement {
     _defaultGetter(key) {
         let ret = pick(this[key + 'Value'], // Align getter
         this[key], this.element ? this.element.getAttribute(key) : null, 0);
-        if (/^[\-0-9\.]+$/.test(ret)) { // Is numerical
+        if (/^-?[\d\.]+$/.test(ret)) { // Is numerical
             ret = parseFloat(ret);
         }
         return ret;
@@ -970,7 +970,7 @@ class SVGElement {
             // bounding box as others of the same length. Unless there is inner
             // HTML in the label. In that case, leave the numbers as is (#5899).
             if (cacheKey.indexOf('<') === -1) {
-                cacheKey = cacheKey.replace(/[0-9]/g, '0');
+                cacheKey = cacheKey.replace(/\d/g, '0');
             }
             // Properties that affect bounding box
             cacheKey += [
@@ -978,9 +978,9 @@ class SVGElement {
                 renderer.rootFontSize,
                 fontSize,
                 rotation,
-                wrapper.textWidth,
+                wrapper.textWidth, // #7874, also useHTML
                 alignValue,
-                styles.textOverflow,
+                styles.textOverflow, // #5968
                 styles.fontWeight // #12163
             ].join(',');
         }
@@ -988,7 +988,7 @@ class SVGElement {
             bBox = cache[cacheKey];
         }
         // No cache found
-        if (!bBox) {
+        if (!bBox || bBox.polygon) {
             // SVG elements
             if (isSVG || renderer.forExport) {
                 try { // Fails in Firefox if the container has display: none.
@@ -1057,6 +1057,11 @@ class SVGElement {
             if (rotation) {
                 bBox = this.getRotatedBox(bBox, rotation);
             }
+            // Create a reference to catch changes to bBox
+            const e = { bBox };
+            fireEvent(this, 'afterGetBBox', e);
+            // Pick up any changes after the fired event
+            bBox = e.bBox;
         }
         // Cache it. When loading a chart in a hidden iframe in Firefox and
         // IE/Edge, the bounding box height is 0, so don't cache it (#5620).
@@ -1097,11 +1102,31 @@ class SVGElement {
         aX = pX + baseline * cosRad90, bX = aX + wCosRad, cX = bX - height * cosRad90, dX = cX - wCosRad, aY = pY + baseline * sinRad90, bY = aY + wSinRad, cY = bY - height * sinRad90, dY = cY - wSinRad;
         // Deduct the bounding box from the corners
         const x = Math.min(aX, bX, cX, dX), y = Math.min(aY, bY, cY, dY), boxWidth = Math.max(aX, bX, cX, dX) - x, boxHeight = Math.max(aY, bY, cY, dY) - y;
+        /* Uncomment to debug boxes
+        this.renderer.path([
+            ['M', aX, aY],
+            ['L', bX, bY],
+            ['L', cX, cY],
+            ['L', dX, dY],
+            ['Z']
+        ])
+            .attr({
+                stroke: 'red',
+                'stroke-width': 1
+            })
+            .add();
+        // */
         return {
             x,
             y,
             width: boxWidth,
-            height: boxHeight
+            height: boxHeight,
+            polygon: [
+                [aX, aY],
+                [bX, bY],
+                [cX, cY],
+                [dX, dY]
+            ]
         };
     }
     /**
@@ -1318,98 +1343,6 @@ class SVGElement {
         }
         return this;
     }
-    /**
-     * Set a text path for a `text` or `label` element, allowing the text to
-     * flow along a path.
-     *
-     * In order to unset the path for an existing element, call `setTextPath`
-     * with `{ enabled: false }` as the second argument.
-     *
-     * @sample highcharts/members/renderer-textpath/ Text path demonstrated
-     *
-     * @function Highcharts.SVGElement#setTextPath
-     *
-     * @param {Highcharts.SVGElement|undefined} path
-     *        Path to follow. If undefined, it allows changing options for the
-     *        existing path.
-     *
-     * @param {Highcharts.DataLabelsTextPathOptionsObject} textPathOptions
-     *        Options.
-     *
-     * @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
-     */
-    setTextPath(path, textPathOptions) {
-        // Defaults
-        textPathOptions = merge(true, {
-            enabled: true,
-            attributes: {
-                dy: -5,
-                startOffset: '50%',
-                textAnchor: 'middle'
-            }
-        }, textPathOptions);
-        const url = this.renderer.url, textWrapper = this.text || this, textPath = textWrapper.textPath, { attributes, enabled } = textPathOptions;
-        path = path || (textPath && textPath.path);
-        // Remove previously added event
-        if (textPath) {
-            textPath.undo();
-        }
-        if (path && enabled) {
-            const undo = addEvent(textWrapper, 'afterModifyTree', (e) => {
-                if (path && enabled) {
-                    // Set ID for the path
-                    let textPathId = path.attr('id');
-                    if (!textPathId) {
-                        path.attr('id', textPathId = uniqueKey());
-                    }
-                    // Set attributes for the <text>
-                    const textAttribs = {
-                        // `dx`/`dy` options must by set on <text> (parent), the
-                        // rest should be set on <textPath>
-                        x: 0,
-                        y: 0
-                    };
-                    if (defined(attributes.dx)) {
-                        textAttribs.dx = attributes.dx;
-                        delete attributes.dx;
-                    }
-                    if (defined(attributes.dy)) {
-                        textAttribs.dy = attributes.dy;
-                        delete attributes.dy;
-                    }
-                    textWrapper.attr(textAttribs);
-                    // Handle label properties
-                    this.attr({ transform: '' });
-                    if (this.box) {
-                        this.box = this.box.destroy();
-                    }
-                    // Wrap the nodes in a textPath
-                    const children = e.nodes.slice(0);
-                    e.nodes.length = 0;
-                    e.nodes[0] = {
-                        tagName: 'textPath',
-                        attributes: extend(attributes, {
-                            'text-anchor': attributes.textAnchor,
-                            href: `${url}#${textPathId}`
-                        }),
-                        children
-                    };
-                }
-            });
-            // Set the reference
-            textWrapper.textPath = { path, undo };
-        }
-        else {
-            textWrapper.attr({ dx: 0, dy: 0 });
-            delete textWrapper.textPath;
-        }
-        if (this.added) {
-            // Rebuild text after added
-            textWrapper.textCache = '';
-            this.renderer.buildText(textWrapper);
-        }
-        return this;
-    }
     /**
      * Add a shadow to the element. In styled mode, this method is not used,
      * instead use `defs` and filters.

package/es-modules/Core/Renderer/SVG/SVGLabel.js

@@ -32,6 +32,7 @@ class SVGLabel extends SVGElement {
         super(renderer, 'g');
         this.paddingLeftSetter = this.paddingSetter;
         this.paddingRightSetter = this.paddingSetter;
+        this.doUpdate = false;
         this.textStr = str;
         this.x = x;
         this.y = y;
@@ -184,6 +185,24 @@ class SVGLabel extends SVGElement {
     }
     heightSetter(value) {
         this.heightSetting = value;
+        this.doUpdate = true;
+    }
+    /**
+     * This method is executed in the end of `attr()`, after setting all
+     * attributes in the hash. In can be used to efficiently consolidate
+     * multiple attributes in one SVG property -- e.g., translate, rotate and
+     * scale are merged in one "transform" attribute in the SVG node.
+     * Also updating height or width should trigger update of the box size.
+     *
+     * @private
+     * @function Highcharts.SVGLabel#afterSetters
+     */
+    afterSetters() {
+        super.afterSetters();
+        if (this.doUpdate) {
+            this.updateBoxSize();
+            this.doUpdate = false;
+        }
     }
     /*
      * After the text element is added, get the desired size of the border
@@ -332,6 +351,7 @@ class SVGLabel extends SVGElement {
     widthSetter(value) {
         // `width:auto` => null
         this.widthSetting = isNumber(value) ? value : void 0;
+        this.doUpdate = true;
     }
     getPaddedWidth() {
         const padding = this.padding;

package/es-modules/Core/Renderer/SVG/SVGRenderer.js

@@ -429,7 +429,7 @@ class SVGRenderer {
             `highcharts-drop-shadow-${this.chartIndex}`,
             ...Object.keys(shadowOptions)
                 .map((key) => `${key}-${shadowOptions[key]}`)
-        ].join('-').toLowerCase().replace(/[^a-z0-9\-]/g, ''), options = merge({
+        ].join('-').toLowerCase().replace(/[^a-z\d\-]/g, ''), options = merge({
             color: '#000000',
             offsetX: 1,
             offsetY: 1,
@@ -443,22 +443,37 @@ class SVGRenderer {
                     id,
                     filterUnits: options.filterUnits
                 },
-                children: [{
-                        tagName: 'feDropShadow',
-                        attributes: {
-                            dx: options.offsetX,
-                            dy: options.offsetY,
-                            'flood-color': options.color,
-                            // Tuned and modified to keep a preserve compatibility
-                            // with the old settings
-                            'flood-opacity': Math.min(options.opacity * 5, 1),
-                            stdDeviation: options.width / 2
-                        }
-                    }]
+                children: this.getShadowFilterContent(options)
             });
         }
         return id;
     }
+    /**
+     * Get shadow filter content.
+     * NOTE! Overridden in es5 module for IE11 compatibility.
+     *
+     * @private
+     * @function Highcharts.SVGRenderer#getShadowFilterContent
+     *
+     * @param {ShadowOptionsObject} options
+     * The shadow options.
+     * @return {Array<AST.Node>}
+     * The shadow filter content.
+     */
+    getShadowFilterContent(options) {
+        return [{
+                tagName: 'feDropShadow',
+                attributes: {
+                    dx: options.offsetX,
+                    dy: options.offsetY,
+                    'flood-color': options.color,
+                    // Tuned and modified to keep a preserve compatibility
+                    // with the old settings
+                    'flood-opacity': Math.min(options.opacity * 5, 1),
+                    stdDeviation: options.width / 2
+                }
+            }];
+    }
     /**
      * Parse a simple HTML string into SVG tspans. Called internally when text
      * is set on an SVGElement. The function supports a subset of HTML tags, CSS
@@ -1629,7 +1644,7 @@ extend(SVGRenderer.prototype, {
         '&': '&amp;',
         '<': '&lt;',
         '>': '&gt;',
-        "'": '&#39;',
+        "'": '&#39;', // eslint-disable-line quotes
         '"': '&quot;'
     },
     /**