highcharts 9.2.1 → 9.3.2

package/modules/sunburst.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.2.1 (2021-08-19)
+ * @license Highcharts JS v9.3.2 (2021-11-29)
  *
  * (c) 2016-2021 Highsoft AS
  * Authors: Jon Arild Nygard
@@ -27,7 +27,7 @@
             obj[path] = fn.apply(null, args);
         }
     }
-    _registerModule(_modules, 'Mixins/ColorMapSeries.js', [_modules['Core/Globals.js'], _modules['Core/Series/Point.js'], _modules['Core/Utilities.js']], function (H, Point, U) {
+    _registerModule(_modules, 'Series/ColorMapMixin.js', [_modules['Core/Globals.js'], _modules['Core/Series/Point.js'], _modules['Core/Utilities.js']], function (H, Point, U) {
         /* *
          *
          *  (c) 2010-2021 Torstein Honsi
@@ -37,17 +37,18 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var defined = U.defined,
-            addEvent = U.addEvent;
+        // @todo cleanup & reduction - consider composition
         var noop = H.noop,
             seriesTypes = H.seriesTypes;
+        var defined = U.defined,
+            addEvent = U.addEvent;
         // Move points to the top of the z-index order when hovered
         addEvent(Point, 'afterSetState', function (e) {
-            var point = this; // eslint-disable-line no-invalid-this
-                if (point.moveToTopOnHover && point.graphic) {
-                    point.graphic.attr({
-                        zIndex: e && e.state === 'hover' ? 1 : 0
-                    });
+            var point = this;
+            if (point.moveToTopOnHover && point.graphic) {
+                point.graphic.attr({
+                    zIndex: e && e.state === 'hover' ? 1 : 0
+                });
             }
         });
         /**
@@ -56,7 +57,7 @@
          * @private
          * @mixin Highcharts.colorMapPointMixin
          */
-        var colorMapPointMixin = {
+        var PointMixin = {
                 dataLabelOnNull: true,
                 moveToTopOnHover: true,
                 /* eslint-disable valid-jsdoc */
@@ -77,7 +78,7 @@
          * @private
          * @mixin Highcharts.colorMapSeriesMixin
          */
-        var colorMapSeriesMixin = {
+        var SeriesMixin = {
                 pointArrayMap: ['value'],
                 axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
                 trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
@@ -92,6 +93,7 @@
                  * @function Highcharts.colorMapSeriesMixin.colorAttribs
                  * @param {Highcharts.Point} point
                  * @return {Highcharts.SVGAttributes}
+                 *         The SVG attributes
                  */
                 colorAttribs: function (point) {
                     var ret = {};
@@ -103,12 +105,12 @@
                 return ret;
             }
         };
-        var exports = {
-                colorMapPointMixin: colorMapPointMixin,
-                colorMapSeriesMixin: colorMapSeriesMixin
+        var ColorMapMixin = {
+                PointMixin: PointMixin,
+                SeriesMixin: SeriesMixin
             };
 
-        return exports;
+        return ColorMapMixin;
     });
     _registerModule(_modules, 'Series/Treemap/TreemapAlgorithmGroup.js', [], function () {
         /* *
@@ -205,95 +207,123 @@
 
         return TreemapAlgorithmGroup;
     });
-    _registerModule(_modules, 'Mixins/DrawPoint.js', [], function () {
+    _registerModule(_modules, 'Series/DrawPointComposition.js', [], function () {
         /* *
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var isFn = function (x) {
-                return typeof x === 'function';
-        };
-        /* eslint-disable no-invalid-this, valid-jsdoc */
-        /**
-         * Handles the drawing of a component.
-         * Can be used for any type of component that reserves the graphic property, and
-         * provides a shouldDraw on its context.
+        /* *
          *
-         * @private
-         * @function draw
-         * @param {DrawPointParams} params
-         *        Parameters.
+         *  Composition
          *
-         * @todo add type checking.
-         * @todo export this function to enable usage
-         */
-        var draw = function draw(params) {
-                var _this = this;
-            var animatableAttribs = params.animatableAttribs,
-                onComplete = params.onComplete,
-                css = params.css,
-                renderer = params.renderer;
-            var animation = (this.series && this.series.chart.hasRendered) ?
-                    // Chart-level animation on updates
-                    void 0 :
-                    // Series-level animation on new points
-                    (this.series &&
-                        this.series.options.animation);
-            var graphic = this.graphic;
-            if (this.shouldDraw()) {
-                if (!graphic) {
-                    this.graphic = graphic =
-                        renderer[params.shapeType](params.shapeArgs)
-                            .add(params.group);
-                }
-                graphic
-                    .css(css)
-                    .attr(params.attribs)
-                    .animate(animatableAttribs, params.isNew ? false : animation, onComplete);
+         * */
+        var DrawPointComposition;
+        (function (DrawPointComposition) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * @private
+             */
+            function compose(PointClass) {
+                if (composedClasses.indexOf(PointClass) === -1) {
+                    composedClasses.push(PointClass);
+                    var pointProto = PointClass.prototype;
+                    pointProto.draw = draw;
+                    if (!pointProto.shouldDraw) {
+                        pointProto.shouldDraw = shouldDraw;
+                    }
+                }
+                return PointClass;
             }
-            else if (graphic) {
-                var destroy_1 = function () {
-                        _this.graphic = graphic = (graphic && graphic.destroy());
-                    if (isFn(onComplete)) {
-                        onComplete();
+            DrawPointComposition.compose = compose;
+            /**
+             * Handles the drawing of a component.
+             * Can be used for any type of component that reserves the graphic property,
+             * and provides a shouldDraw on its context.
+             *
+             * @private
+             *
+             * @todo add type checking.
+             * @todo export this function to enable usage
+             */
+            function draw(params) {
+                var _this = this;
+                var animatableAttribs = params.animatableAttribs,
+                    onComplete = params.onComplete,
+                    css = params.css,
+                    renderer = params.renderer;
+                var animation = (this.series && this.series.chart.hasRendered) ?
+                        // Chart-level animation on updates
+                        void 0 :
+                        // Series-level animation on new points
+                        (this.series &&
+                            this.series.options.animation);
+                var graphic = this.graphic;
+                params.attribs = params.attribs || {};
+                // Assigning class in dot notation does go well in IE8
+                // eslint-disable-next-line dot-notation
+                params.attribs['class'] = this.getClassName();
+                if (this.shouldDraw()) {
+                    if (!graphic) {
+                        this.graphic = graphic =
+                            renderer[params.shapeType](params.shapeArgs)
+                                .add(params.group);
                     }
-                };
-                // animate only runs complete callback if something was animated.
-                if (Object.keys(animatableAttribs).length) {
-                    graphic.animate(animatableAttribs, void 0, function () {
+                    graphic
+                        .css(css)
+                        .attr(params.attribs)
+                        .animate(animatableAttribs, params.isNew ? false : animation, onComplete);
+                }
+                else if (graphic) {
+                    var destroy_1 = function () {
+                            _this.graphic = graphic = (graphic && graphic.destroy());
+                        if (typeof onComplete === 'function') {
+                            onComplete();
+                        }
+                    };
+                    // animate only runs complete callback if something was animated.
+                    if (Object.keys(animatableAttribs).length) {
+                        graphic.animate(animatableAttribs, void 0, function () {
+                            destroy_1();
+                        });
+                    }
+                    else {
                         destroy_1();
-                    });
-                }
-                else {
-                    destroy_1();
+                    }
                 }
             }
-        };
-        /**
-         * An extended version of draw customized for points.
-         * It calls additional methods that is expected when rendering a point.
-         * @private
-         * @param {Highcharts.Dictionary<any>} params Parameters
-         */
-        var drawPoint = function drawPoint(params) {
-                var point = this,
-            attribs = params.attribs = params.attribs || {};
-            // Assigning class in dot notation does go well in IE8
-            // eslint-disable-next-line dot-notation
-            attribs['class'] = point.getClassName();
-            // Call draw to render component
-            draw.call(point, params);
-        };
-        var drawPointModule = {
-                draw: draw,
-                drawPoint: drawPoint,
-                isFn: isFn
-            };
+            /**
+             * @private
+             */
+            function shouldDraw() {
+                return !this.isNull;
+            }
+        })(DrawPointComposition || (DrawPointComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return drawPointModule;
+        return DrawPointComposition;
     });
-    _registerModule(_modules, 'Series/Treemap/TreemapPoint.js', [_modules['Mixins/DrawPoint.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DrawPointMixin, SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Treemap/TreemapPoint.js', [_modules['Series/DrawPointComposition.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DrawPointComposition, SeriesRegistry, U) {
         /* *
          *
          *  (c) 2014-2021 Highsoft AS
@@ -399,9 +429,9 @@
             return TreemapPoint;
         }(ScatterPoint));
         extend(TreemapPoint.prototype, {
-            draw: DrawPointMixin.drawPoint,
             setVisible: PiePoint.prototype.setVisible
         });
+        DrawPointComposition.compose(TreemapPoint);
         /* *
          *
          *  Default Export
@@ -476,8 +506,14 @@
 
         return TreemapUtilities;
     });
-    _registerModule(_modules, 'Mixins/TreeSeries.js', [_modules['Core/Color/Color.js'], _modules['Core/Utilities.js']], function (Color, U) {
+    _registerModule(_modules, 'Series/TreeUtilities.js', [_modules['Core/Color/Color.js'], _modules['Core/Utilities.js']], function (Color, U) {
         /* *
+         *
+         *  (c) 2014-2021 Highsoft AS
+         *
+         *  Authors: Jon Arild Nygard / Oystein Moseng
+         *
+         *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
@@ -488,96 +524,45 @@
             isObject = U.isObject,
             merge = U.merge,
             pick = U.pick;
-        var isBoolean = function (x) {
-                return typeof x === 'boolean';
-        }, isFn = function (x) {
-            return typeof x === 'function';
-        };
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /* eslint-disable valid-jsdoc */
-        /**
-         * @todo Combine buildTree and buildNode with setTreeValues
-         * @todo Remove logic from Treemap and make it utilize this mixin.
-         * @private
-         */
-        var setTreeValues = function setTreeValues(tree,
-            options) {
-                var before = options.before,
-            idRoot = options.idRoot,
-            mapIdToNode = options.mapIdToNode,
-            nodeRoot = mapIdToNode[idRoot],
-            levelIsConstant = (isBoolean(options.levelIsConstant) ?
-                    options.levelIsConstant :
-                    true),
-            points = options.points,
-            point = points[tree.i],
-            optionsPoint = point && point.options || {},
-            childrenTotal = 0,
-            children = [],
-            value;
-            tree.levelDynamic = tree.level - (levelIsConstant ? 0 : nodeRoot.level);
-            tree.name = pick(point && point.name, '');
-            tree.visible = (idRoot === tree.id ||
-                (isBoolean(options.visible) ? options.visible : false));
-            if (isFn(before)) {
-                tree = before(tree, options);
-            }
-            // First give the children some values
-            tree.children.forEach(function (child, i) {
-                var newOptions = extend({},
-                    options);
-                extend(newOptions, {
-                    index: i,
-                    siblings: tree.children.length,
-                    visible: tree.visible
-                });
-                child = setTreeValues(child, newOptions);
-                children.push(child);
-                if (child.visible) {
-                    childrenTotal += child.val;
-                }
-            });
-            // Set the values
-            value = pick(optionsPoint.value, childrenTotal);
-            tree.visible = value >= 0 && (childrenTotal > 0 || tree.visible);
-            tree.children = children;
-            tree.childrenTotal = childrenTotal;
-            tree.isLeaf = tree.visible && !childrenTotal;
-            tree.val = value;
-            return tree;
-        };
         /**
          * @private
          */
-        var getColor = function getColor(node,
-            options) {
-                var index = options.index,
-            mapOptionsToLevel = options.mapOptionsToLevel,
-            parentColor = options.parentColor,
-            parentColorIndex = options.parentColorIndex,
-            series = options.series,
-            colors = options.colors,
-            siblings = options.siblings,
-            points = series.points,
-            getColorByPoint,
-            chartOptionsChart = series.chart.options.chart,
-            point,
-            level,
-            colorByPoint,
-            colorIndexByPoint,
-            color,
-            colorIndex;
+        function getColor(node, options) {
+            var index = options.index,
+                mapOptionsToLevel = options.mapOptionsToLevel,
+                parentColor = options.parentColor,
+                parentColorIndex = options.parentColorIndex,
+                series = options.series,
+                colors = options.colors,
+                siblings = options.siblings,
+                points = series.points,
+                chartOptionsChart = series.chart.options.chart;
+            var getColorByPoint,
+                point,
+                level,
+                colorByPoint,
+                colorIndexByPoint,
+                color,
+                colorIndex;
             /**
              * @private
              */
-            function variation(color) {
-                var colorVariation = level && level.colorVariation;
-                if (colorVariation) {
-                    if (colorVariation.key === 'brightness') {
-                        return Color.parse(color).brighten(colorVariation.to * (index / siblings)).get();
-                    }
+            var variateColor = function (color) {
+                    var colorVariation = level && level.colorVariation;
+                if (colorVariation &&
+                    colorVariation.key === 'brightness' &&
+                    index &&
+                    siblings) {
+                    return Color.parse(color).brighten(colorVariation.to * (index / siblings)).get();
                 }
                 return color;
-            }
+            };
             if (node) {
                 point = points[node.i];
                 level = mapOptionsToLevel[node.level] || {};
@@ -590,7 +575,7 @@
                 }
                 // Select either point color, level color or inherited color.
                 if (!series.chart.styledMode) {
-                    color = pick(point && point.options.color, level && level.color, colorByPoint, parentColor && variation(parentColor), series.color);
+                    color = pick(point && point.options.color, level && level.color, colorByPoint, parentColor && variateColor(parentColor), series.color);
                 }
                 colorIndex = pick(point && point.options.colorIndex, level && level.colorIndex, colorIndexByPoint, parentColorIndex, options.colorIndex);
             }
@@ -598,31 +583,32 @@
                 color: color,
                 colorIndex: colorIndex
             };
-        };
+        }
         /**
          * Creates a map from level number to its given options.
          *
          * @private
-         * @function getLevelOptions
-         * @param {object} params
-         *        Object containing parameters.
-         *        - `defaults` Object containing default options. The default options
-         *           are merged with the userOptions to get the final options for a
-         *           specific level.
-         *        - `from` The lowest level number.
-         *        - `levels` User options from series.levels.
-         *        - `to` The highest level number.
+         *
+         * @param {Object} params
+         * Object containing parameters.
+         * - `defaults` Object containing default options. The default options are
+         *   merged with the userOptions to get the final options for a specific
+         *   level.
+         * - `from` The lowest level number.
+         * - `levels` User options from series.levels.
+         * - `to` The highest level number.
+         *
          * @return {Highcharts.Dictionary<object>|null}
-         *         Returns a map from level number to its given options.
+         * Returns a map from level number to its given options.
          */
-        var getLevelOptions = function getLevelOptions(params) {
-                var result = null,
-            defaults,
-            converted,
-            i,
-            from,
-            to,
-            levels;
+        function getLevelOptions(params) {
+            var result = null,
+                defaults,
+                converted,
+                i,
+                from,
+                to,
+                levels;
             if (isObject(params)) {
                 result = {};
                 from = isNumber(params.from) ? params.from : 1;
@@ -636,16 +622,14 @@
                             options;
                         if (isObject(item) && isNumber(item.level)) {
                             options = merge({}, item);
-                            levelIsConstant = (isBoolean(options.levelIsConstant) ?
-                                options.levelIsConstant :
-                                defaults.levelIsConstant);
+                            levelIsConstant = pick(options.levelIsConstant, defaults.levelIsConstant);
                             // Delete redundant properties.
                             delete options.levelIsConstant;
                             delete options.level;
                             // Calculate which level these options apply to.
                             level = item.level + (levelIsConstant ? 0 : from - 1);
                             if (isObject(obj[level])) {
-                                extend(obj[level], options);
+                                merge(true, obj[level], options); // #16329
                             }
                             else {
                                 obj[level] = options;
@@ -660,23 +644,70 @@
                 }
             }
             return result;
-        };
+        }
+        /**
+         * @private
+         * @todo Combine buildTree and buildNode with setTreeValues
+         * @todo Remove logic from Treemap and make it utilize this mixin.
+         */
+        function setTreeValues(tree, options) {
+            var before = options.before,
+                idRoot = options.idRoot,
+                mapIdToNode = options.mapIdToNode,
+                nodeRoot = mapIdToNode[idRoot],
+                levelIsConstant = (options.levelIsConstant !== false),
+                points = options.points,
+                point = points[tree.i],
+                optionsPoint = point && point.options || {},
+                children = [];
+            var childrenTotal = 0;
+            tree.levelDynamic = tree.level - (levelIsConstant ? 0 : nodeRoot.level);
+            tree.name = pick(point && point.name, '');
+            tree.visible = (idRoot === tree.id ||
+                options.visible === true);
+            if (typeof before === 'function') {
+                tree = before(tree, options);
+            }
+            // First give the children some values
+            tree.children.forEach(function (child, i) {
+                var newOptions = extend({},
+                    options);
+                extend(newOptions, {
+                    index: i,
+                    siblings: tree.children.length,
+                    visible: tree.visible
+                });
+                child = setTreeValues(child, newOptions);
+                children.push(child);
+                if (child.visible) {
+                    childrenTotal += child.val;
+                }
+            });
+            // Set the values
+            var value = pick(optionsPoint.value,
+                childrenTotal);
+            tree.visible = value >= 0 && (childrenTotal > 0 || tree.visible);
+            tree.children = children;
+            tree.childrenTotal = childrenTotal;
+            tree.isLeaf = tree.visible && !childrenTotal;
+            tree.val = value;
+            return tree;
+        }
         /**
          * Update the rootId property on the series. Also makes sure that it is
          * accessible to exporting.
          *
          * @private
-         * @function updateRootId
          *
-         * @param {object} series
-         *        The series to operate on.
+         * @param {Object} series
+         * The series to operate on.
          *
          * @return {string}
-         *         Returns the resulting rootId after update.
+         * Returns the resulting rootId after update.
          */
-        var updateRootId = function (series) {
-                var rootId,
-            options;
+        function updateRootId(series) {
+            var rootId,
+                options;
             if (isObject(series)) {
                 // Get the series options.
                 options = isObject(series.options) ? series.options : {};
@@ -690,15 +721,20 @@
                 series.rootNode = rootId;
             }
             return rootId;
-        };
-        var result = {
+        }
+        /* *
+         *
+         *  Default Export
+         *
+         * */
+        var TreeUtilities = {
                 getColor: getColor,
                 getLevelOptions: getLevelOptions,
                 setTreeValues: setTreeValues,
                 updateRootId: updateRootId
             };
 
-        return result;
+        return TreeUtilities;
     });
     _registerModule(_modules, 'Series/Treemap/TreemapComposition.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Series/Treemap/TreemapUtilities.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, TreemapUtilities, U) {
         /* *
@@ -761,7 +797,7 @@
         });
 
     });
-    _registerModule(_modules, 'Series/Treemap/TreemapSeries.js', [_modules['Core/Color/Color.js'], _modules['Mixins/ColorMapSeries.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Color/Palette.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Treemap/TreemapAlgorithmGroup.js'], _modules['Series/Treemap/TreemapPoint.js'], _modules['Series/Treemap/TreemapUtilities.js'], _modules['Mixins/TreeSeries.js'], _modules['Core/Utilities.js']], function (Color, ColorMapMixin, H, LegendSymbol, palette, SeriesRegistry, TreemapAlgorithmGroup, TreemapPoint, TreemapUtilities, TreeSeriesMixin, U) {
+    _registerModule(_modules, 'Series/Treemap/TreemapSeries.js', [_modules['Core/Color/Color.js'], _modules['Series/ColorMapMixin.js'], _modules['Core/Globals.js'], _modules['Core/Legend/LegendSymbol.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Treemap/TreemapAlgorithmGroup.js'], _modules['Series/Treemap/TreemapPoint.js'], _modules['Series/Treemap/TreemapUtilities.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (Color, ColorMapMixin, H, LegendSymbol, SeriesRegistry, TreemapAlgorithmGroup, TreemapPoint, TreemapUtilities, TU, U) {
         /* *
          *
          *  (c) 2014-2021 Highsoft AS
@@ -790,16 +826,15 @@
             };
         })();
         var color = Color.parse;
-        var colorMapSeriesMixin = ColorMapMixin.colorMapSeriesMixin;
         var noop = H.noop;
         var Series = SeriesRegistry.series,
             _a = SeriesRegistry.seriesTypes,
             ColumnSeries = _a.column,
             HeatmapSeries = _a.heatmap,
             ScatterSeries = _a.scatter;
-        var getColor = TreeSeriesMixin.getColor,
-            getLevelOptions = TreeSeriesMixin.getLevelOptions,
-            updateRootId = TreeSeriesMixin.updateRootId;
+        var getColor = TU.getColor,
+            getLevelOptions = TU.getLevelOptions,
+            updateRootId = TU.updateRootId;
         var addEvent = U.addEvent,
             correctFloat = U.correctFloat,
             defined = U.defined,
@@ -1057,11 +1092,11 @@
              * @private
              * @function Highcharts.Series#calculateChildrenAreas
              *
-             * @param {object} node
-             *        The node which is parent to the children.
+             * @param {Object} node
+             * The node which is parent to the children.
              *
-             * @param {object} area
-             *        The rectangular area of the parent.
+             * @param {Object} area
+             * The rectangular area of the parent.
              */
             TreemapSeries.prototype.calculateChildrenAreas = function (parent, area) {
                 var series = this,
@@ -1302,7 +1337,7 @@
              * @param {Array<string>} [existingIds]
              *        List of all point ids.
              *
-             * @return {object}
+             * @return {Object}
              *         Map from parent id to children index in data.
              */
             TreemapSeries.prototype.getListOfParents = function (data, existingIds) {
@@ -1355,9 +1390,7 @@
                 var series = this,
                     setOptionsEvent;
                 // If color series logic is loaded, add some properties
-                if (colorMapSeriesMixin) {
-                    this.colorAttribs = colorMapSeriesMixin.colorAttribs;
-                }
+                this.colorAttribs = ColorMapMixin.SeriesMixin.colorAttribs;
                 setOptionsEvent = addEvent(series, 'setOptions', function (event) {
                     var options = event.userOptions;
                     if (defined(options.allowDrillToNode) &&
@@ -1451,7 +1484,8 @@
                     nodeMap = series.nodeMap,
                     node = nodeMap[rootId],
                     name = node.name,
-                    buttonOptions = series.options.traverseUpButton,
+                    buttonOptions = series.options
+                        .traverseUpButton,
                     backText = pick(buttonOptions.text,
                     name, '◁ Back'),
                     attr,
@@ -1583,7 +1617,7 @@
              * @param {boolean} [redraw=true]
              * Wether to redraw the chart or not.
              *
-             * @param {object} [eventArguments]
+             * @param {Object} [eventArguments]
              * Arguments to be accessed in event handler.
              *
              * @param {string} [eventArguments.newRootId]
@@ -1595,14 +1629,14 @@
              * @param {boolean} [eventArguments.redraw]
              * Wether to redraw the chart after.
              *
-             * @param {object} [eventArguments.series]
+             * @param {Object} [eventArguments.series]
              * The series to update the root of.
              *
              * @param {string} [eventArguments.trigger]
              * The action which triggered the event. Undefined if the setRootNode is
              * called directly.
              *
-             * @fires Highcharts.Series#event:setRootNode
+             * @emits Highcharts.Series#event:setRootNode
              */
             TreemapSeries.prototype.setRootNode = function (id, redraw, eventArguments) {
                 var series = this,
@@ -1618,16 +1652,15 @@
                  * The default functionality of the setRootNode event.
                  *
                  * @private
-                 * @param {object} args The event arguments.
+                 * @param {Object} args The event arguments.
                  * @param {string} args.newRootId Id of the new root.
                  * @param {string} args.previousRootId Id of the previous root.
                  * @param {boolean} args.redraw Wether to redraw the chart after.
-                 * @param {object} args.series The series to update the root of.
+                 * @param {Object} args.series The series to update the root of.
                  * @param {string} [args.trigger=undefined] The action which
                  * triggered the event. Undefined if the setRootNode is called
                  * directly.
-                 * @return {void}
-                 */
+                     */
                 var defaultFn = function (args) {
                         var series = args.series;
                     // Store previous and new root ids on the series.
@@ -1858,10 +1891,11 @@
                  * additional properties `newRootId`, `previousRootId`, `redraw` and
                  * `trigger`.
                  *
-                 * @type {function}
-                 * @default undefined
                  * @sample {highcharts} highcharts/plotoptions/treemap-events-setrootnode/
                  *         Alert update information on setRootNode event.
+                 *
+                 * @type {Function}
+                 * @default undefined
                  * @since 7.0.3
                  * @product highcharts
                  * @apioption plotOptions.treemap.events.setRootNode
@@ -2204,7 +2238,7 @@
                  *
                  * @type {Highcharts.ColorString}
                  */
-                borderColor: palette.neutralColor10,
+                borderColor: "#e6e6e6" /* neutralColor10 */,
                 /**
                  * The width of the border surrounding each tree map item.
                  */
@@ -2233,7 +2267,7 @@
                         /**
                          * The border color for the hovered state.
                          */
-                        borderColor: palette.neutralColor40,
+                        borderColor: "#999999" /* neutralColor40 */,
                         /**
                          * Brightness for the hovered point. Defaults to 0 if the
                          * heatmap series is loaded first, otherwise 0.1.
@@ -2375,7 +2409,7 @@
 
         return TreemapSeries;
     });
-    _registerModule(_modules, 'Series/Sunburst/SunburstPoint.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, U) {
+    _registerModule(_modules, 'Series/Sunburst/SunburstPoint.js', [_modules['Series/DrawPointComposition.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (DrawPointComposition, SeriesRegistry, U) {
         /* *
          *
          *  This module implements sunburst charts in Highcharts.
@@ -2485,9 +2519,6 @@
             SunburstPoint.prototype.isValid = function () {
                 return true;
             };
-            SunburstPoint.prototype.shouldDraw = function () {
-                return !this.isNull;
-            };
             return SunburstPoint;
         }(TreemapPoint));
         extend(SunburstPoint.prototype, {
@@ -2495,6 +2526,7 @@
             haloPath: Point.prototype.haloPath,
             setState: Point.prototype.setState
         });
+        DrawPointComposition.compose(SunburstPoint);
         /* *
          *
          *  Defaul Export
@@ -2544,7 +2576,7 @@
              * @private
              * @function calculateLevelSizes
              *
-             * @param {object} levelOptions
+             * @param {Object} levelOptions
              * Map of level to its options.
              *
              * @param {Highcharts.Dictionary<number>} params
@@ -2571,7 +2603,8 @@
                     levelsNotIncluded = Object.keys(result).filter(function (k) {
                         return levels.indexOf(+k) === -1;
                     });
-                    diffRadius = remainingSize = isNumber(p.diffRadius) ? p.diffRadius : 0;
+                    diffRadius = remainingSize = isNumber(p.diffRadius) ?
+                        p.diffRadius : 0;
                     // Convert percentage to pixels.
                     // Calculate the remaining size to divide between "weight" levels.
                     // Calculate total weight to use in convertion from weight to
@@ -2655,7 +2688,7 @@
 
         return SunburstUtilities;
     });
-    _registerModule(_modules, 'Series/Sunburst/SunburstSeries.js', [_modules['Mixins/CenteredSeries.js'], _modules['Core/Globals.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Sunburst/SunburstPoint.js'], _modules['Series/Sunburst/SunburstUtilities.js'], _modules['Mixins/TreeSeries.js'], _modules['Core/Utilities.js']], function (CenteredSeriesMixin, H, SeriesRegistry, SunburstPoint, SunburstUtilities, TreeSeriesMixin, U) {
+    _registerModule(_modules, 'Series/Sunburst/SunburstSeries.js', [_modules['Series/CenteredUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Series/Sunburst/SunburstPoint.js'], _modules['Series/Sunburst/SunburstUtilities.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (CU, H, SeriesRegistry, SunburstPoint, SunburstUtilities, TU, U) {
         /* *
          *
          *  This module implements sunburst charts in Highcharts.
@@ -2685,17 +2718,17 @@
                 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
             };
         })();
-        var getCenter = CenteredSeriesMixin.getCenter,
-            getStartAndEndRadians = CenteredSeriesMixin.getStartAndEndRadians;
+        var getCenter = CU.getCenter,
+            getStartAndEndRadians = CU.getStartAndEndRadians;
         var noop = H.noop;
         var Series = SeriesRegistry.series,
             _a = SeriesRegistry.seriesTypes,
             ColumnSeries = _a.column,
             TreemapSeries = _a.treemap;
-        var getColor = TreeSeriesMixin.getColor,
-            getLevelOptions = TreeSeriesMixin.getLevelOptions,
-            setTreeValues = TreeSeriesMixin.setTreeValues,
-            updateRootId = TreeSeriesMixin.updateRootId;
+        var getColor = TU.getColor,
+            getLevelOptions = TU.getLevelOptions,
+            setTreeValues = TU.setTreeValues,
+            updateRootId = TU.updateRootId;
         var error = U.error,
             extend = U.extend,
             isNumber = U.isNumber,
@@ -3121,7 +3154,7 @@
                 points.forEach(function (point) {
                     var node = point.node,
                         level = mapOptionsToLevel[node.level],
-                        shapeExisting = point.shapeExisting || {},
+                        shapeExisting = (point.shapeExisting || {}),
                         shape = node.shapeArgs || {},
                         animationInfo,
                         onComplete,
@@ -3463,7 +3496,7 @@
                 /**
                  * Can set a `levelSize` on all points which lies on the same level.
                  *
-                 * @type      {object}
+                 * @type      {Object}
                  * @apioption plotOptions.sunburst.levels.levelSize
                  */
                 /**