highcharts 10.2.0 → 10.2.1

package/modules/treegrid.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts Gantt JS v10.2.0 (2022-07-05)
+ * @license Highcharts Gantt JS v10.2.1 (2022-08-29)
  *
  * Tree Grid
  *
@@ -37,7 +37,7 @@
             }
         }
     }
-    _registerModule(_modules, 'Core/Axis/BrokenAxis.js', [_modules['Extensions/Stacking.js'], _modules['Core/Utilities.js']], function (StackItem, U) {
+    _registerModule(_modules, 'Core/Axis/BrokenAxis.js', [_modules['Core/Axis/Stacking/StackItem.js'], _modules['Core/Utilities.js']], function (StackItem, U) {
         /* *
          *
          *  (c) 2009-2021 Torstein Honsi
@@ -1940,7 +1940,7 @@
 
         return Tree;
     });
-    _registerModule(_modules, 'Core/Axis/TreeGridTick.js', [_modules['Core/Utilities.js']], function (U) {
+    _registerModule(_modules, 'Core/Axis/TreeGrid/TreeGridTick.js', [_modules['Core/Utilities.js']], function (U) {
         /* *
          *
          *  (c) 2016 Highsoft AS
@@ -1956,34 +1956,237 @@
             isNumber = U.isNumber,
             pick = U.pick,
             wrap = U.wrap;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /**
          * @private
          */
-        var TreeGridTick;
-        (function (TreeGridTick) {
-            /* *
-             *
-             *  Interfaces
-             *
-             * */
-            /* *
-             *
-             *  Variables
-             *
-             * */
-            var applied = false;
+        function onTickInit() {
+            var tick = this;
+            if (!tick.treeGrid) {
+                tick.treeGrid = new TreeGridTickAdditions(tick);
+            }
+        }
+        /**
+         * @private
+         */
+        function onTickHover(label) {
+            label.addClass('highcharts-treegrid-node-active');
+            if (!label.renderer.styledMode) {
+                label.css({
+                    textDecoration: 'underline'
+                });
+            }
+        }
+        /**
+         * @private
+         */
+        function onTickHoverExit(label, options) {
+            var css = isObject(options.style) ? options.style : {};
+            label.removeClass('highcharts-treegrid-node-active');
+            if (!label.renderer.styledMode) {
+                label.css({ textDecoration: css.textDecoration });
+            }
+        }
+        /**
+         * @private
+         */
+        function renderLabelIcon(tick, params) {
+            var treeGrid = tick.treeGrid,
+                isNew = !treeGrid.labelIcon,
+                renderer = params.renderer,
+                labelBox = params.xy,
+                options = params.options,
+                width = options.width || 0,
+                height = options.height || 0,
+                iconCenter = {
+                    x: labelBox.x - (width / 2) - (options.padding || 0),
+                    y: labelBox.y - (height / 2)
+                },
+                rotation = params.collapsed ? 90 : 180,
+                shouldRender = params.show && isNumber(iconCenter.y);
+            var icon = treeGrid.labelIcon;
+            if (!icon) {
+                treeGrid.labelIcon = icon = renderer
+                    .path(renderer.symbols[options.type](options.x || 0, options.y || 0, width, height))
+                    .addClass('highcharts-label-icon')
+                    .add(params.group);
+            }
+            // Set the new position, and show or hide
+            icon[shouldRender ? 'show' : 'hide'](); // #14904, #1338
+            // Presentational attributes
+            if (!renderer.styledMode) {
+                icon
+                    .attr({
+                    cursor: 'pointer',
+                    'fill': pick(params.color, "#666666" /* Palette.neutralColor60 */),
+                    'stroke-width': 1,
+                    stroke: options.lineColor,
+                    strokeWidth: options.lineWidth || 0
+                });
+            }
+            // Update the icon positions
+            icon[isNew ? 'attr' : 'animate']({
+                translateX: iconCenter.x,
+                translateY: iconCenter.y,
+                rotation: rotation
+            });
+        }
+        /**
+         * @private
+         */
+        function wrapGetLabelPosition(proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
+            var tick = this,
+                lbOptions = pick(tick.options && tick.options.labels,
+                labelOptions),
+                pos = tick.pos,
+                axis = tick.axis,
+                options = axis.options,
+                isTreeGrid = options.type === 'treegrid',
+                result = proceed.apply(tick,
+                [x,
+                y,
+                label,
+                horiz,
+                lbOptions,
+                tickmarkOffset,
+                index,
+                step]);
+            var symbolOptions,
+                indentation,
+                mapOfPosToGridNode,
+                node,
+                level;
+            if (isTreeGrid) {
+                symbolOptions = (lbOptions && isObject(lbOptions.symbol, true) ?
+                    lbOptions.symbol :
+                    {});
+                indentation = (lbOptions && isNumber(lbOptions.indentation) ?
+                    lbOptions.indentation :
+                    0);
+                mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode;
+                node = mapOfPosToGridNode && mapOfPosToGridNode[pos];
+                level = (node && node.depth) || 1;
+                result.x += (
+                // Add space for symbols
+                ((symbolOptions.width || 0) +
+                    ((symbolOptions.padding || 0) * 2)) +
+                    // Apply indentation
+                    ((level - 1) * indentation));
+            }
+            return result;
+        }
+        /**
+         * @private
+         */
+        function wrapRenderLabel(proceed) {
+            var tick = this, pos = tick.pos, axis = tick.axis, label = tick.label, mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode, options = axis.options, labelOptions = pick(tick.options && tick.options.labels, options && options.labels), symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ?
+                    labelOptions.symbol :
+                    {}), node = mapOfPosToGridNode && mapOfPosToGridNode[pos], level = node && node.depth, isTreeGrid = options.type === 'treegrid', shouldRender = axis.tickPositions.indexOf(pos) > -1, prefixClassName = 'highcharts-treegrid-node-', styledMode = axis.chart.styledMode;
+            var collapsed,
+                addClassName,
+                removeClassName;
+            if (isTreeGrid && node) {
+                // Add class name for hierarchical styling.
+                if (label &&
+                    label.element) {
+                    label.addClass(prefixClassName + 'level-' + level);
+                }
+            }
+            proceed.apply(tick, Array.prototype.slice.call(arguments, 1));
+            if (isTreeGrid &&
+                label &&
+                label.element &&
+                node &&
+                node.descendants &&
+                node.descendants > 0) {
+                collapsed = axis.treeGrid.isCollapsed(node);
+                renderLabelIcon(tick, {
+                    color: (!styledMode &&
+                        label.styles &&
+                        label.styles.color ||
+                        ''),
+                    collapsed: collapsed,
+                    group: label.parentGroup,
+                    options: symbolOptions,
+                    renderer: label.renderer,
+                    show: shouldRender,
+                    xy: label.xy
+                });
+                // Add class name for the node.
+                addClassName = prefixClassName +
+                    (collapsed ? 'collapsed' : 'expanded');
+                removeClassName = prefixClassName +
+                    (collapsed ? 'expanded' : 'collapsed');
+                label
+                    .addClass(addClassName)
+                    .removeClass(removeClassName);
+                if (!styledMode) {
+                    label.css({
+                        cursor: 'pointer'
+                    });
+                }
+                // Add events to both label text and icon
+                [label, tick.treeGrid.labelIcon].forEach(function (object) {
+                    if (object && !object.attachedTreeGridEvents) {
+                        // On hover
+                        addEvent(object.element, 'mouseover', function () {
+                            onTickHover(label);
+                        });
+                        // On hover out
+                        addEvent(object.element, 'mouseout', function () {
+                            onTickHoverExit(label, labelOptions);
+                        });
+                        addEvent(object.element, 'click', function () {
+                            tick.treeGrid.toggleCollapse();
+                        });
+                        object.attachedTreeGridEvents = true;
+                    }
+                });
+            }
+        }
+        /* *
+         *
+         *  Classes
+         *
+         * */
+        /**
+         * @private
+         * @class
+         */
+        var TreeGridTickAdditions = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                /**
+                 * @private
+                 */
+                function TreeGridTickAdditions(tick) {
+                    this.tick = tick;
+            }
             /* *
              *
-             *  Functions
+             *  Static Functions
              *
              * */
             /**
              * @private
              */
-            function compose(TickClass) {
-                if (!applied) {
-                    addEvent(TickClass, 'init', onInit);
+            TreeGridTickAdditions.compose = function (TickClass) {
+                if (composedClasses.indexOf(TickClass) === -1) {
+                    composedClasses.push(TickClass);
+                    addEvent(TickClass, 'init', onTickInit);
                     wrap(TickClass.prototype, 'getLabelPosition', wrapGetLabelPosition);
                     wrap(TickClass.prototype, 'renderLabel', wrapRenderLabel);
                     // backwards compatibility
@@ -1996,313 +2199,106 @@
                     TickClass.prototype.toggleCollapse = function (redraw) {
                         this.treeGrid.toggleCollapse(redraw);
                     };
-                    applied = true;
-                }
-            }
-            TreeGridTick.compose = compose;
-            /**
-             * @private
-             */
-            function onInit() {
-                var tick = this;
-                if (!tick.treeGrid) {
-                    tick.treeGrid = new Additions(tick);
                 }
-            }
-            /**
-             * @private
-             */
-            function onTickHover(label) {
-                label.addClass('highcharts-treegrid-node-active');
-                if (!label.renderer.styledMode) {
-                    label.css({
-                        textDecoration: 'underline'
-                    });
-                }
-            }
+            };
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
+             * Collapse the grid cell. Used when axis is of type treegrid.
+             *
+             * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
+             *
              * @private
+             * @function Highcharts.Tick#collapse
+             *
+             * @param {boolean} [redraw=true]
+             * Whether to redraw the chart or wait for an explicit call to
+             * {@link Highcharts.Chart#redraw}
              */
-            function onTickHoverExit(label, options) {
-                var css = isObject(options.style) ? options.style : {};
-                label.removeClass('highcharts-treegrid-node-active');
-                if (!label.renderer.styledMode) {
-                    label.css({ textDecoration: css.textDecoration });
+            TreeGridTickAdditions.prototype.collapse = function (redraw) {
+                var tick = this.tick,
+                    axis = tick.axis,
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    axis.treeGrid.mapOfPosToGridNode) {
+                    var pos = tick.pos,
+                        node = axis.treeGrid.mapOfPosToGridNode[pos],
+                        breaks = axis.treeGrid.collapse(node);
+                    brokenAxis.setBreaks(breaks, pick(redraw, true));
                 }
-            }
+            };
             /**
+             * Destroy remaining labelIcon if exist.
+             *
              * @private
+             * @function Highcharts.Tick#destroy
              */
-            function renderLabelIcon(tick, params) {
-                var treeGrid = tick.treeGrid,
-                    isNew = !treeGrid.labelIcon,
-                    renderer = params.renderer,
-                    labelBox = params.xy,
-                    options = params.options,
-                    width = options.width || 0,
-                    height = options.height || 0,
-                    iconCenter = {
-                        x: labelBox.x - (width / 2) - (options.padding || 0),
-                        y: labelBox.y - (height / 2)
-                    },
-                    rotation = params.collapsed ? 90 : 180,
-                    shouldRender = params.show && isNumber(iconCenter.y);
-                var icon = treeGrid.labelIcon;
-                if (!icon) {
-                    treeGrid.labelIcon = icon = renderer
-                        .path(renderer.symbols[options.type](options.x || 0, options.y || 0, width, height))
-                        .addClass('highcharts-label-icon')
-                        .add(params.group);
-                }
-                // Set the new position, and show or hide
-                icon[shouldRender ? 'show' : 'hide'](); // #14904, #1338
-                // Presentational attributes
-                if (!renderer.styledMode) {
-                    icon
-                        .attr({
-                        cursor: 'pointer',
-                        'fill': pick(params.color, "#666666" /* Palette.neutralColor60 */),
-                        'stroke-width': 1,
-                        stroke: options.lineColor,
-                        strokeWidth: options.lineWidth || 0
-                    });
+            TreeGridTickAdditions.prototype.destroy = function () {
+                if (this.labelIcon) {
+                    this.labelIcon.destroy();
                 }
-                // Update the icon positions
-                icon[isNew ? 'attr' : 'animate']({
-                    translateX: iconCenter.x,
-                    translateY: iconCenter.y,
-                    rotation: rotation
-                });
-            }
+            };
             /**
+             * Expand the grid cell. Used when axis is of type treegrid.
+             *
+             * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
+             *
              * @private
+             * @function Highcharts.Tick#expand
+             *
+             * @param {boolean} [redraw=true]
+             * Whether to redraw the chart or wait for an explicit call to
+             * {@link Highcharts.Chart#redraw}
              */
-            function wrapGetLabelPosition(proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
-                var tick = this,
-                    lbOptions = pick(tick.options && tick.options.labels,
-                    labelOptions),
-                    pos = tick.pos,
+            TreeGridTickAdditions.prototype.expand = function (redraw) {
+                var tick = this.tick,
                     axis = tick.axis,
-                    options = axis.options,
-                    isTreeGrid = options.type === 'treegrid',
-                    result = proceed.apply(tick,
-                    [x,
-                    y,
-                    label,
-                    horiz,
-                    lbOptions,
-                    tickmarkOffset,
-                    index,
-                    step]);
-                var symbolOptions,
-                    indentation,
-                    mapOfPosToGridNode,
-                    node,
-                    level;
-                if (isTreeGrid) {
-                    symbolOptions = (lbOptions && isObject(lbOptions.symbol, true) ?
-                        lbOptions.symbol :
-                        {});
-                    indentation = (lbOptions && isNumber(lbOptions.indentation) ?
-                        lbOptions.indentation :
-                        0);
-                    mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode;
-                    node = mapOfPosToGridNode && mapOfPosToGridNode[pos];
-                    level = (node && node.depth) || 1;
-                    result.x += (
-                    // Add space for symbols
-                    ((symbolOptions.width || 0) +
-                        ((symbolOptions.padding || 0) * 2)) +
-                        // Apply indentation
-                        ((level - 1) * indentation));
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    axis.treeGrid.mapOfPosToGridNode) {
+                    var pos = tick.pos,
+                        node = axis.treeGrid.mapOfPosToGridNode[pos],
+                        breaks = axis.treeGrid.expand(node);
+                    brokenAxis.setBreaks(breaks, pick(redraw, true));
                 }
-                return result;
-            }
+            };
             /**
-             * @private
-             */
-            function wrapRenderLabel(proceed) {
-                var tick = this, pos = tick.pos, axis = tick.axis, label = tick.label, mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode, options = axis.options, labelOptions = pick(tick.options && tick.options.labels, options && options.labels), symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ?
-                        labelOptions.symbol :
-                        {}), node = mapOfPosToGridNode && mapOfPosToGridNode[pos], level = node && node.depth, isTreeGrid = options.type === 'treegrid', shouldRender = axis.tickPositions.indexOf(pos) > -1, prefixClassName = 'highcharts-treegrid-node-', styledMode = axis.chart.styledMode;
-                var collapsed,
-                    addClassName,
-                    removeClassName;
-                if (isTreeGrid && node) {
-                    // Add class name for hierarchical styling.
-                    if (label &&
-                        label.element) {
-                        label.addClass(prefixClassName + 'level-' + level);
-                    }
-                }
-                proceed.apply(tick, Array.prototype.slice.call(arguments, 1));
-                if (isTreeGrid &&
-                    label &&
-                    label.element &&
-                    node &&
-                    node.descendants &&
-                    node.descendants > 0) {
-                    collapsed = axis.treeGrid.isCollapsed(node);
-                    renderLabelIcon(tick, {
-                        color: (!styledMode &&
-                            label.styles &&
-                            label.styles.color ||
-                            ''),
-                        collapsed: collapsed,
-                        group: label.parentGroup,
-                        options: symbolOptions,
-                        renderer: label.renderer,
-                        show: shouldRender,
-                        xy: label.xy
-                    });
-                    // Add class name for the node.
-                    addClassName = prefixClassName +
-                        (collapsed ? 'collapsed' : 'expanded');
-                    removeClassName = prefixClassName +
-                        (collapsed ? 'expanded' : 'collapsed');
-                    label
-                        .addClass(addClassName)
-                        .removeClass(removeClassName);
-                    if (!styledMode) {
-                        label.css({
-                            cursor: 'pointer'
-                        });
-                    }
-                    // Add events to both label text and icon
-                    [label, tick.treeGrid.labelIcon].forEach(function (object) {
-                        if (object && !object.attachedTreeGridEvents) {
-                            // On hover
-                            addEvent(object.element, 'mouseover', function () {
-                                onTickHover(label);
-                            });
-                            // On hover out
-                            addEvent(object.element, 'mouseout', function () {
-                                onTickHoverExit(label, labelOptions);
-                            });
-                            addEvent(object.element, 'click', function () {
-                                tick.treeGrid.toggleCollapse();
-                            });
-                            object.attachedTreeGridEvents = true;
-                        }
-                    });
-                }
-            }
-            /* *
+             * Toggle the collapse/expand state of the grid cell. Used when axis is
+             * of type treegrid.
              *
-             *  Classes
+             * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
              *
-             * */
-            /**
              * @private
-             * @class
+             * @function Highcharts.Tick#toggleCollapse
+             *
+             * @param {boolean} [redraw=true]
+             * Whether to redraw the chart or wait for an explicit call to
+             * {@link Highcharts.Chart#redraw}
              */
-            var Additions = /** @class */ (function () {
-                    /* *
-                     *
-                     *  Constructors
-                     *
-                     * */
-                    /**
-                     * @private
-                     */
-                    function Additions(tick) {
-                        this.tick = tick;
+            TreeGridTickAdditions.prototype.toggleCollapse = function (redraw) {
+                var tick = this.tick,
+                    axis = tick.axis,
+                    brokenAxis = axis.brokenAxis;
+                if (brokenAxis &&
+                    axis.treeGrid.mapOfPosToGridNode) {
+                    var pos = tick.pos,
+                        node = axis.treeGrid.mapOfPosToGridNode[pos],
+                        breaks = axis.treeGrid.toggleCollapse(node);
+                    brokenAxis.setBreaks(breaks, pick(redraw, true));
                 }
-                /* *
-                 *
-                 *  Functions
-                 *
-                 * */
-                /**
-                 * Collapse the grid cell. Used when axis is of type treegrid.
-                 *
-                 * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
-                 *
-                 * @private
-                 * @function Highcharts.Tick#collapse
-                 *
-                 * @param {boolean} [redraw=true]
-                 * Whether to redraw the chart or wait for an explicit call to
-                 * {@link Highcharts.Chart#redraw}
-                 */
-                Additions.prototype.collapse = function (redraw) {
-                    var tick = this.tick,
-                        axis = tick.axis,
-                        brokenAxis = axis.brokenAxis;
-                    if (brokenAxis &&
-                        axis.treeGrid.mapOfPosToGridNode) {
-                        var pos = tick.pos,
-                            node = axis.treeGrid.mapOfPosToGridNode[pos],
-                            breaks = axis.treeGrid.collapse(node);
-                        brokenAxis.setBreaks(breaks, pick(redraw, true));
-                    }
-                };
-                /**
-                 * Destroy remaining labelIcon if exist.
-                 *
-                 * @private
-                 * @function Highcharts.Tick#destroy
-                 */
-                Additions.prototype.destroy = function () {
-                    if (this.labelIcon) {
-                        this.labelIcon.destroy();
-                    }
-                };
-                /**
-                 * Expand the grid cell. Used when axis is of type treegrid.
-                 *
-                 * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
-                 *
-                 * @private
-                 * @function Highcharts.Tick#expand
-                 *
-                 * @param {boolean} [redraw=true]
-                 * Whether to redraw the chart or wait for an explicit call to
-                 * {@link Highcharts.Chart#redraw}
-                 */
-                Additions.prototype.expand = function (redraw) {
-                    var tick = this.tick,
-                        axis = tick.axis,
-                        brokenAxis = axis.brokenAxis;
-                    if (brokenAxis &&
-                        axis.treeGrid.mapOfPosToGridNode) {
-                        var pos = tick.pos,
-                            node = axis.treeGrid.mapOfPosToGridNode[pos],
-                            breaks = axis.treeGrid.expand(node);
-                        brokenAxis.setBreaks(breaks, pick(redraw, true));
-                    }
-                };
-                /**
-                 * Toggle the collapse/expand state of the grid cell. Used when axis is
-                 * of type treegrid.
-                 *
-                 * @see gantt/treegrid-axis/collapsed-dynamically/demo.js
-                 *
-                 * @private
-                 * @function Highcharts.Tick#toggleCollapse
-                 *
-                 * @param {boolean} [redraw=true]
-                 * Whether to redraw the chart or wait for an explicit call to
-                 * {@link Highcharts.Chart#redraw}
-                 */
-                Additions.prototype.toggleCollapse = function (redraw) {
-                    var tick = this.tick,
-                        axis = tick.axis,
-                        brokenAxis = axis.brokenAxis;
-                    if (brokenAxis &&
-                        axis.treeGrid.mapOfPosToGridNode) {
-                        var pos = tick.pos,
-                            node = axis.treeGrid.mapOfPosToGridNode[pos],
-                            breaks = axis.treeGrid.toggleCollapse(node);
-                        brokenAxis.setBreaks(breaks, pick(redraw, true));
-                    }
-                };
-                return Additions;
-            }());
-            TreeGridTick.Additions = Additions;
-        })(TreeGridTick || (TreeGridTick = {}));
+            };
+            return TreeGridTickAdditions;
+        }());
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return TreeGridTick;
+        return TreeGridTickAdditions;
     });
     _registerModule(_modules, 'Series/TreeUtilities.js', [_modules['Core/Color/Color.js'], _modules['Core/Utilities.js']], function (Color, U) {
         /* *
@@ -2534,7 +2530,7 @@
 
         return TreeUtilities;
     });
-    _registerModule(_modules, 'Core/Axis/TreeGridAxis.js', [_modules['Core/Axis/BrokenAxis.js'], _modules['Core/Axis/GridAxis.js'], _modules['Gantt/Tree.js'], _modules['Core/Axis/TreeGridTick.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (BrokenAxis, GridAxis, Tree, TreeGridTick, TU, U) {
+    _registerModule(_modules, 'Core/Axis/TreeGrid/TreeGridAxis.js', [_modules['Core/Axis/BrokenAxis.js'], _modules['Core/Axis/GridAxis.js'], _modules['Gantt/Tree.js'], _modules['Core/Axis/TreeGrid/TreeGridTick.js'], _modules['Series/TreeUtilities.js'], _modules['Core/Utilities.js']], function (BrokenAxis, GridAxis, Tree, TreeGridTick, TU, U) {
         /* *
          *
          *  (c) 2016 Highsoft AS
@@ -2555,757 +2551,769 @@
             merge = U.merge,
             pick = U.pick,
             wrap = U.wrap;
+        /* *
+         *
+         *  Constants
+         *
+         * */
+        var composedClasses = [];
+        /* *
+         *
+         *  Variables
+         *
+         * */
+        var TickConstructor;
+        /* *
+         *
+         *  Functions
+         *
+         * */
         /**
          * @private
          */
-        var TreeGridAxis;
-        (function (TreeGridAxis) {
-            /* *
-             *
-             *  Declarations
-             *
-             * */
-            /* *
-             *
-             *  Variables
-             *
-             * */
-            var TickConstructor;
-            /* *
-             *
-             *  Functions
-             *
-             * */
-            /**
-             * @private
-             */
-            function compose(AxisClass, ChartClass, SeriesClass, TickClass) {
-                if (AxisClass.keepProps.indexOf('treeGrid') === -1) {
-                    AxisClass.keepProps.push('treeGrid');
-                    TickConstructor = TickClass;
-                    wrap(AxisClass.prototype, 'generateTick', wrapGenerateTick);
-                    wrap(AxisClass.prototype, 'init', wrapInit);
-                    wrap(AxisClass.prototype, 'setTickInterval', wrapSetTickInterval);
-                    // Make utility functions available for testing.
-                    AxisClass.prototype.utils = {
-                        getNode: Tree.getNode
-                    };
-                    GridAxis.compose(AxisClass, ChartClass, TickClass);
-                    BrokenAxis.compose(AxisClass, SeriesClass);
-                    TreeGridTick.compose(TickClass);
-                }
-                return AxisClass;
-            }
-            TreeGridAxis.compose = compose;
-            /**
-             * @private
-             */
-            function getBreakFromNode(node, max) {
-                var to = node.collapseEnd || 0;
-                var from = node.collapseStart || 0;
-                // In broken-axis, the axis.max is minimized until it is not within a
-                // break. Therefore, if break.to is larger than axis.max, the axis.to
-                // should not add the 0.5 axis.tickMarkOffset, to avoid adding a break
-                // larger than axis.max.
-                // TODO consider simplifying broken-axis and this might solve itself
-                if (to >= max) {
-                    from -= 0.5;
-                }
-                return {
-                    from: from,
-                    to: to,
-                    showPoints: false
-                };
+        function getBreakFromNode(node, max) {
+            var to = node.collapseEnd || 0;
+            var from = node.collapseStart || 0;
+            // In broken-axis, the axis.max is minimized until it is not within a
+            // break. Therefore, if break.to is larger than axis.max, the axis.to
+            // should not add the 0.5 axis.tickMarkOffset, to avoid adding a break
+            // larger than axis.max.
+            // TODO consider simplifying broken-axis and this might solve itself
+            if (to >= max) {
+                from -= 0.5;
             }
-            /**
-             * Creates a tree structure of the data, and the treegrid. Calculates
-             * categories, and y-values of points based on the tree.
-             *
-             * @private
-             * @function getTreeGridFromData
-             *
-             * @param {Array<Highcharts.GanttPointOptions>} data
-             * All the data points to display in the axis.
-             *
-             * @param {boolean} uniqueNames
-             * Wether or not the data node with the same name should share grid cell. If
-             * true they do share cell. False by default.
-             *
-             * @param {number} numberOfSeries
-             *
-             * @return {Object}
-             * Returns an object containing categories, mapOfIdToNode,
-             * mapOfPosToGridNode, and tree.
-             *
-             * @todo There should be only one point per line.
-             * @todo It should be optional to have one category per point, or merge
-             *       cells
-             * @todo Add unit-tests.
-             */
-            function getTreeGridFromData(data, uniqueNames, numberOfSeries) {
-                var categories = [],
-                    collapsedNodes = [],
-                    mapOfIdToNode = {},
-                    uniqueNamesEnabled = typeof uniqueNames === 'boolean' ?
-                        uniqueNames : false;
-                var mapOfPosToGridNode = {},
-                    posIterator = -1;
-                // Build the tree from the series data.
-                var treeParams = {
-                        // After the children has been created.
-                        after: function (node) {
-                            var gridNode = mapOfPosToGridNode[node.pos];
-                        var height = 0,
-                            descendants = 0;
-                        gridNode.children.forEach(function (child) {
-                            descendants += (child.descendants || 0) + 1;
-                            height = Math.max((child.height || 0) + 1, height);
-                        });
-                        gridNode.descendants = descendants;
-                        gridNode.height = height;
-                        if (gridNode.collapsed) {
-                            collapsedNodes.push(gridNode);
-                        }
-                    },
-                    // Before the children has been created.
-                    before: function (node) {
-                        var data = isObject(node.data,
-                            true) ?
-                                node.data :
-                                {},
-                            name = isString(data.name) ? data.name : '',
-                            parentNode = mapOfIdToNode[node.parent],
-                            parentGridNode = (isObject(parentNode,
-                            true) ?
-                                mapOfPosToGridNode[parentNode.pos] :
-                                null),
-                            hasSameName = function (x) {
-                                return x.name === name;
+            return {
+                from: from,
+                to: to,
+                showPoints: false
+            };
+        }
+        /**
+         * Creates a tree structure of the data, and the treegrid. Calculates
+         * categories, and y-values of points based on the tree.
+         *
+         * @private
+         * @function getTreeGridFromData
+         *
+         * @param {Array<Highcharts.GanttPointOptions>} data
+         * All the data points to display in the axis.
+         *
+         * @param {boolean} uniqueNames
+         * Whether or not the data node with the same name should share grid cell. If
+         * true they do share cell. False by default.
+         *
+         * @param {number} numberOfSeries
+         *
+         * @return {Object}
+         * Returns an object containing categories, mapOfIdToNode,
+         * mapOfPosToGridNode, and tree.
+         *
+         * @todo There should be only one point per line.
+         * @todo It should be optional to have one category per point, or merge
+         *       cells
+         * @todo Add unit-tests.
+         */
+        function getTreeGridFromData(data, uniqueNames, numberOfSeries) {
+            var categories = [],
+                collapsedNodes = [],
+                mapOfIdToNode = {},
+                uniqueNamesEnabled = typeof uniqueNames === 'boolean' ?
+                    uniqueNames : false;
+            var mapOfPosToGridNode = {},
+                posIterator = -1;
+            // Build the tree from the series data.
+            var treeParams = {
+                    // After the children has been created.
+                    after: function (node) {
+                        var gridNode = mapOfPosToGridNode[node.pos];
+                    var height = 0,
+                        descendants = 0;
+                    gridNode.children.forEach(function (child) {
+                        descendants += (child.descendants || 0) + 1;
+                        height = Math.max((child.height || 0) + 1, height);
+                    });
+                    gridNode.descendants = descendants;
+                    gridNode.height = height;
+                    if (gridNode.collapsed) {
+                        collapsedNodes.push(gridNode);
+                    }
+                },
+                // Before the children has been created.
+                before: function (node) {
+                    var data = isObject(node.data,
+                        true) ?
+                            node.data :
+                            {},
+                        name = isString(data.name) ? data.name : '',
+                        parentNode = mapOfIdToNode[node.parent],
+                        parentGridNode = (isObject(parentNode,
+                        true) ?
+                            mapOfPosToGridNode[parentNode.pos] :
+                            null),
+                        hasSameName = function (x) {
+                            return x.name === name;
+                    };
+                    var gridNode,
+                        pos;
+                    // If not unique names, look for sibling node with the same name
+                    if (uniqueNamesEnabled &&
+                        isObject(parentGridNode, true) &&
+                        !!(gridNode = find(parentGridNode.children, hasSameName))) {
+                        // If there is a gridNode with the same name, reuse position
+                        pos = gridNode.pos;
+                        // Add data node to list of nodes in the grid node.
+                        gridNode.nodes.push(node);
+                    }
+                    else {
+                        // If it is a new grid node, increment position.
+                        pos = posIterator++;
+                    }
+                    // Add new grid node to map.
+                    if (!mapOfPosToGridNode[pos]) {
+                        mapOfPosToGridNode[pos] = gridNode = {
+                            depth: parentGridNode ? parentGridNode.depth + 1 : 0,
+                            name: name,
+                            id: data.id,
+                            nodes: [node],
+                            children: [],
+                            pos: pos
                         };
-                        var gridNode,
-                            pos;
-                        // If not unique names, look for sibling node with the same name
-                        if (uniqueNamesEnabled &&
-                            isObject(parentGridNode, true) &&
-                            !!(gridNode = find(parentGridNode.children, hasSameName))) {
-                            // If there is a gridNode with the same name, reuse position
-                            pos = gridNode.pos;
-                            // Add data node to list of nodes in the grid node.
-                            gridNode.nodes.push(node);
-                        }
-                        else {
-                            // If it is a new grid node, increment position.
-                            pos = posIterator++;
-                        }
-                        // Add new grid node to map.
-                        if (!mapOfPosToGridNode[pos]) {
-                            mapOfPosToGridNode[pos] = gridNode = {
-                                depth: parentGridNode ? parentGridNode.depth + 1 : 0,
-                                name: name,
-                                id: data.id,
-                                nodes: [node],
-                                children: [],
-                                pos: pos
-                            };
-                            // If not root, then add name to categories.
-                            if (pos !== -1) {
-                                categories.push(name);
-                            }
-                            // Add name to list of children.
-                            if (isObject(parentGridNode, true)) {
-                                parentGridNode.children.push(gridNode);
-                            }
+                        // If not root, then add name to categories.
+                        if (pos !== -1) {
+                            categories.push(name);
                         }
-                        // Add data node to map
-                        if (isString(node.id)) {
-                            mapOfIdToNode[node.id] = node;
+                        // Add name to list of children.
+                        if (isObject(parentGridNode, true)) {
+                            parentGridNode.children.push(gridNode);
                         }
-                        // If one of the points are collapsed, then start the grid node
-                        // in collapsed state.
-                        if (gridNode &&
-                            data.collapsed === true) {
-                            gridNode.collapsed = true;
+                    }
+                    // Add data node to map
+                    if (isString(node.id)) {
+                        mapOfIdToNode[node.id] = node;
+                    }
+                    // If one of the points are collapsed, then start the grid node
+                    // in collapsed state.
+                    if (gridNode &&
+                        data.collapsed === true) {
+                        gridNode.collapsed = true;
+                    }
+                    // Assign pos to data node
+                    node.pos = pos;
+                }
+            };
+            var updateYValuesAndTickPos = function (map,
+                numberOfSeries) {
+                    var setValues = function (gridNode,
+                start,
+                result) {
+                        var nodes = gridNode.nodes,
+                padding = 0.5;
+                    var end = start + (start === -1 ? 0 : numberOfSeries - 1);
+                    var diff = (end - start) / 2,
+                        pos = start + diff;
+                    nodes.forEach(function (node) {
+                        var data = node.data;
+                        if (isObject(data, true)) {
+                            // Update point
+                            data.y = start + (data.seriesIndex || 0);
+                            // Remove the property once used
+                            delete data.seriesIndex;
                         }
-                        // Assign pos to data node
                         node.pos = pos;
-                    }
-                };
-                var updateYValuesAndTickPos = function (map,
-                    numberOfSeries) {
-                        var setValues = function (gridNode,
-                    start,
-                    result) {
-                            var nodes = gridNode.nodes,
-                    padding = 0.5;
-                        var end = start + (start === -1 ? 0 : numberOfSeries - 1);
-                        var diff = (end - start) / 2,
-                            pos = start + diff;
-                        nodes.forEach(function (node) {
-                            var data = node.data;
-                            if (isObject(data, true)) {
-                                // Update point
-                                data.y = start + (data.seriesIndex || 0);
-                                // Remove the property once used
-                                delete data.seriesIndex;
-                            }
-                            node.pos = pos;
-                        });
-                        result[pos] = gridNode;
-                        gridNode.pos = pos;
-                        gridNode.tickmarkOffset = diff + padding;
-                        gridNode.collapseStart = end + padding;
-                        gridNode.children.forEach(function (child) {
-                            setValues(child, end + 1, result);
-                            end = (child.collapseEnd || 0) - padding;
-                        });
-                        // Set collapseEnd to the end of the last child node.
-                        gridNode.collapseEnd = end + padding;
-                        return result;
-                    };
-                    return setValues(map['-1'], -1, {});
-                };
-                // Create tree from data
-                var tree = Tree.getTree(data,
-                    treeParams);
-                // Update y values of data, and set calculate tick positions.
-                mapOfPosToGridNode = updateYValuesAndTickPos(mapOfPosToGridNode, numberOfSeries);
-                // Return the resulting data.
-                return {
-                    categories: categories,
-                    mapOfIdToNode: mapOfIdToNode,
-                    mapOfPosToGridNode: mapOfPosToGridNode,
-                    collapsedNodes: collapsedNodes,
-                    tree: tree
+                    });
+                    result[pos] = gridNode;
+                    gridNode.pos = pos;
+                    gridNode.tickmarkOffset = diff + padding;
+                    gridNode.collapseStart = end + padding;
+                    gridNode.children.forEach(function (child) {
+                        setValues(child, end + 1, result);
+                        end = (child.collapseEnd || 0) - padding;
+                    });
+                    // Set collapseEnd to the end of the last child node.
+                    gridNode.collapseEnd = end + padding;
+                    return result;
                 };
-            }
-            /**
-             * Builds the tree of categories and calculates its positions.
-             * @private
-             * @param {Object} e Event object
-             * @param {Object} e.target The chart instance which the event was fired on.
-             * @param {object[]} e.target.axes The axes of the chart.
-             */
-            function onBeforeRender(e) {
-                var chart = e.target,
-                    axes = chart.axes;
-                axes.filter(function (axis) {
-                    return axis.options.type === 'treegrid';
-                }).forEach(function (axis) {
-                    var options = axis.options || {},
-                        labelOptions = options.labels,
-                        uniqueNames = options.uniqueNames,
-                        max = options.max, 
-                        // Check whether any of series is rendering for the first
-                        // time, visibility has changed, or its data is dirty, and
-                        // only then update. #10570, #10580. Also check if
-                        // mapOfPosToGridNode exists. #10887
-                        isDirty = (!axis.treeGrid.mapOfPosToGridNode ||
-                            axis.series.some(function (series) {
-                                return !series.hasRendered ||
-                                    series.isDirtyData ||
-                                    series.isDirty;
-                        }));
-                    var numberOfSeries = 0,
-                        data,
-                        treeGrid;
-                    if (isDirty) {
-                        // Concatenate data from all series assigned to this axis.
-                        data = axis.series.reduce(function (arr, s) {
-                            if (s.visible) {
-                                // Push all data to array
-                                (s.options.data || []).forEach(function (data) {
-                                    // For using keys - rebuild the data structure
-                                    if (s.options.keys && s.options.keys.length) {
-                                        data = s.pointClass.prototype
-                                            .optionsToObject
-                                            .call({ series: s }, data);
-                                        s.pointClass.setGanttPointAliases(data);
-                                    }
-                                    if (isObject(data, true)) {
-                                        // Set series index on data. Removed again
-                                        // after use.
-                                        data.seriesIndex = (numberOfSeries);
-                                        arr.push(data);
-                                    }
-                                });
-                                // Increment series index
-                                if (uniqueNames === true) {
-                                    numberOfSeries++;
+                return setValues(map['-1'], -1, {});
+            };
+            // Create tree from data
+            var tree = Tree.getTree(data,
+                treeParams);
+            // Update y values of data, and set calculate tick positions.
+            mapOfPosToGridNode = updateYValuesAndTickPos(mapOfPosToGridNode, numberOfSeries);
+            // Return the resulting data.
+            return {
+                categories: categories,
+                mapOfIdToNode: mapOfIdToNode,
+                mapOfPosToGridNode: mapOfPosToGridNode,
+                collapsedNodes: collapsedNodes,
+                tree: tree
+            };
+        }
+        /**
+         * Builds the tree of categories and calculates its positions.
+         * @private
+         * @param {Object} e Event object
+         * @param {Object} e.target The chart instance which the event was fired on.
+         * @param {object[]} e.target.axes The axes of the chart.
+         */
+        function onBeforeRender(e) {
+            var chart = e.target,
+                axes = chart.axes;
+            axes.filter(function (axis) {
+                return axis.options.type === 'treegrid';
+            }).forEach(function (axis) {
+                var options = axis.options || {},
+                    labelOptions = options.labels,
+                    uniqueNames = options.uniqueNames,
+                    max = options.max, 
+                    // Check whether any of series is rendering for the first
+                    // time, visibility has changed, or its data is dirty, and
+                    // only then update. #10570, #10580. Also check if
+                    // mapOfPosToGridNode exists. #10887
+                    isDirty = (!axis.treeGrid.mapOfPosToGridNode ||
+                        axis.series.some(function (series) {
+                            return !series.hasRendered ||
+                                series.isDirtyData ||
+                                series.isDirty;
+                    }));
+                var numberOfSeries = 0,
+                    data,
+                    treeGrid;
+                if (isDirty) {
+                    // Concatenate data from all series assigned to this axis.
+                    data = axis.series.reduce(function (arr, s) {
+                        if (s.visible) {
+                            // Push all data to array
+                            (s.options.data || []).forEach(function (data) {
+                                // For using keys - rebuild the data structure
+                                if (s.options.keys && s.options.keys.length) {
+                                    data = s.pointClass.prototype
+                                        .optionsToObject
+                                        .call({ series: s }, data);
+                                    s.pointClass.setGanttPointAliases(data);
                                 }
-                            }
-                            return arr;
-                        }, []);
-                        // If max is higher than set data - add a
-                        // dummy data to render categories #10779
-                        if (max && data.length < max) {
-                            for (var i = data.length; i <= max; i++) {
-                                data.push({
-                                    // Use the zero-width character
-                                    // to avoid conflict with uniqueNames
-                                    name: i + '\u200B'
-                                });
-                            }
-                        }
-                        // setScale is fired after all the series is initialized,
-                        // which is an ideal time to update the axis.categories.
-                        treeGrid = getTreeGridFromData(data, uniqueNames || false, (uniqueNames === true) ? numberOfSeries : 1);
-                        // Assign values to the axis.
-                        axis.categories = treeGrid.categories;
-                        axis.treeGrid.mapOfPosToGridNode = (treeGrid.mapOfPosToGridNode);
-                        axis.hasNames = true;
-                        axis.treeGrid.tree = treeGrid.tree;
-                        // Update yData now that we have calculated the y values
-                        axis.series.forEach(function (series) {
-                            var axisData = (series.options.data || []).map(function (d) {
-                                    if (isArray(d) &&
-                                        series.options.keys &&
-                                        series.options.keys.length) {
-                                        // Get the axisData from the data array used to
-                                        // build the treeGrid where has been modified
-                                        data.forEach(function (point) {
-                                            if (d.indexOf(point.x) >= 0 &&
-                                                d.indexOf(point.x2) >= 0) {
-                                                d = point;
-                                        }
-                                    });
+                                if (isObject(data, true)) {
+                                    // Set series index on data. Removed again
+                                    // after use.
+                                    data.seriesIndex = (numberOfSeries);
+                                    arr.push(data);
                                 }
-                                return isObject(d, true) ? merge(d) : d;
                             });
-                            // Avoid destroying points when series is not visible
-                            if (series.visible) {
-                                series.setData(axisData, false);
+                            // Increment series index
+                            if (uniqueNames === true) {
+                                numberOfSeries++;
                             }
-                        });
-                        // Calculate the label options for each level in the tree.
-                        axis.treeGrid.mapOptionsToLevel =
-                            getLevelOptions({
-                                defaults: labelOptions,
-                                from: 1,
-                                levels: labelOptions && labelOptions.levels,
-                                to: axis.treeGrid.tree && axis.treeGrid.tree.height
-                            });
-                        // Setting initial collapsed nodes
-                        if (e.type === 'beforeRender') {
-                            axis.treeGrid.collapsedNodes = treeGrid.collapsedNodes;
                         }
-                    }
-                });
-            }
-            /**
-             * Generates a tick for initial positioning.
-             *
-             * @private
-             * @function Highcharts.GridAxis#generateTick
-             *
-             * @param {Function} proceed
-             * The original generateTick function.
-             *
-             * @param {number} pos
-             * The tick position in axis values.
-             */
-            function wrapGenerateTick(proceed, pos) {
-                var axis = this,
-                    mapOptionsToLevel = axis.treeGrid.mapOptionsToLevel || {},
-                    isTreeGrid = axis.options.type === 'treegrid',
-                    ticks = axis.ticks;
-                var tick = ticks[pos],
-                    levelOptions,
-                    options,
-                    gridNode;
-                if (isTreeGrid &&
-                    axis.treeGrid.mapOfPosToGridNode) {
-                    gridNode = axis.treeGrid.mapOfPosToGridNode[pos];
-                    levelOptions = mapOptionsToLevel[gridNode.depth];
-                    if (levelOptions) {
-                        options = {
-                            labels: levelOptions
-                        };
-                    }
-                    if (!tick &&
-                        TickConstructor) {
-                        ticks[pos] = tick =
-                            new TickConstructor(axis, pos, void 0, void 0, {
-                                category: gridNode.name,
-                                tickmarkOffset: gridNode.tickmarkOffset,
-                                options: options
+                        return arr;
+                    }, []);
+                    // If max is higher than set data - add a
+                    // dummy data to render categories #10779
+                    if (max && data.length < max) {
+                        for (var i = data.length; i <= max; i++) {
+                            data.push({
+                                // Use the zero-width character
+                                // to avoid conflict with uniqueNames
+                                name: i + '\u200B'
                             });
+                        }
                     }
-                    else {
-                        // update labels depending on tick interval
-                        tick.parameters.category = gridNode.name;
-                        tick.options = options;
-                        tick.addLabel();
+                    // setScale is fired after all the series is initialized,
+                    // which is an ideal time to update the axis.categories.
+                    treeGrid = getTreeGridFromData(data, uniqueNames || false, (uniqueNames === true) ? numberOfSeries : 1);
+                    // Assign values to the axis.
+                    axis.categories = treeGrid.categories;
+                    axis.treeGrid.mapOfPosToGridNode = (treeGrid.mapOfPosToGridNode);
+                    axis.hasNames = true;
+                    axis.treeGrid.tree = treeGrid.tree;
+                    // Update yData now that we have calculated the y values
+                    axis.series.forEach(function (series) {
+                        var axisData = (series.options.data || []).map(function (d) {
+                                if (isArray(d) &&
+                                    series.options.keys &&
+                                    series.options.keys.length) {
+                                    // Get the axisData from the data array used to
+                                    // build the treeGrid where has been modified
+                                    data.forEach(function (point) {
+                                        if (d.indexOf(point.x) >= 0 &&
+                                            d.indexOf(point.x2) >= 0) {
+                                            d = point;
+                                    }
+                                });
+                            }
+                            return isObject(d, true) ? merge(d) : d;
+                        });
+                        // Avoid destroying points when series is not visible
+                        if (series.visible) {
+                            series.setData(axisData, false);
+                        }
+                    });
+                    // Calculate the label options for each level in the tree.
+                    axis.treeGrid.mapOptionsToLevel =
+                        getLevelOptions({
+                            defaults: labelOptions,
+                            from: 1,
+                            levels: labelOptions && labelOptions.levels,
+                            to: axis.treeGrid.tree && axis.treeGrid.tree.height
+                        });
+                    // Setting initial collapsed nodes
+                    if (e.type === 'beforeRender') {
+                        axis.treeGrid.collapsedNodes = treeGrid.collapsedNodes;
                     }
                 }
+            });
+        }
+        /**
+         * Generates a tick for initial positioning.
+         *
+         * @private
+         * @function Highcharts.GridAxis#generateTick
+         *
+         * @param {Function} proceed
+         * The original generateTick function.
+         *
+         * @param {number} pos
+         * The tick position in axis values.
+         */
+        function wrapGenerateTick(proceed, pos) {
+            var axis = this,
+                mapOptionsToLevel = axis.treeGrid.mapOptionsToLevel || {},
+                isTreeGrid = axis.options.type === 'treegrid',
+                ticks = axis.ticks;
+            var tick = ticks[pos],
+                levelOptions,
+                options,
+                gridNode;
+            if (isTreeGrid &&
+                axis.treeGrid.mapOfPosToGridNode) {
+                gridNode = axis.treeGrid.mapOfPosToGridNode[pos];
+                levelOptions = mapOptionsToLevel[gridNode.depth];
+                if (levelOptions) {
+                    options = {
+                        labels: levelOptions
+                    };
+                }
+                if (!tick &&
+                    TickConstructor) {
+                    ticks[pos] = tick =
+                        new TickConstructor(axis, pos, void 0, void 0, {
+                            category: gridNode.name,
+                            tickmarkOffset: gridNode.tickmarkOffset,
+                            options: options
+                        });
+                }
                 else {
-                    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
+                    // update labels depending on tick interval
+                    tick.parameters.category = gridNode.name;
+                    tick.options = options;
+                    tick.addLabel();
                 }
             }
-            /**
-             * @private
-             */
-            function wrapInit(proceed, chart, userOptions) {
-                var axis = this,
-                    isTreeGrid = userOptions.type === 'treegrid';
-                if (!axis.treeGrid) {
-                    axis.treeGrid = new Additions(axis);
-                }
-                // Set default and forced options for TreeGrid
-                if (isTreeGrid) {
-                    // Add event for updating the categories of a treegrid.
-                    // NOTE Preferably these events should be set on the axis.
-                    addEvent(chart, 'beforeRender', onBeforeRender);
-                    addEvent(chart, 'beforeRedraw', onBeforeRender);
-                    // Add new collapsed nodes on addseries
-                    addEvent(chart, 'addSeries', function (e) {
-                        if (e.options.data) {
-                            var treeGrid = getTreeGridFromData(e.options.data,
-                                userOptions.uniqueNames || false, 1);
-                            axis.treeGrid.collapsedNodes = (axis.treeGrid.collapsedNodes || []).concat(treeGrid.collapsedNodes);
-                        }
-                    });
-                    // Collapse all nodes in axis.treegrid.collapsednodes
-                    // where collapsed equals true.
-                    addEvent(axis, 'foundExtremes', function () {
-                        if (axis.treeGrid.collapsedNodes) {
-                            axis.treeGrid.collapsedNodes.forEach(function (node) {
-                                var breaks = axis.treeGrid.collapse(node);
-                                if (axis.brokenAxis) {
-                                    axis.brokenAxis.setBreaks(breaks, false);
-                                    // remove the node from the axis collapsedNodes
-                                    if (axis.treeGrid.collapsedNodes) {
-                                        axis.treeGrid.collapsedNodes = axis.treeGrid
-                                            .collapsedNodes
-                                            .filter(function (n) { return ((node.collapseStart !==
-                                            n.collapseStart) ||
-                                            node.collapseEnd !== n.collapseEnd); });
-                                    }
+            else {
+                proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
+            }
+        }
+        /**
+         * @private
+         */
+        function wrapInit(proceed, chart, userOptions) {
+            var axis = this,
+                isTreeGrid = userOptions.type === 'treegrid';
+            if (!axis.treeGrid) {
+                axis.treeGrid = new TreeGridAxisAdditions(axis);
+            }
+            // Set default and forced options for TreeGrid
+            if (isTreeGrid) {
+                // Add event for updating the categories of a treegrid.
+                // NOTE Preferably these events should be set on the axis.
+                addEvent(chart, 'beforeRender', onBeforeRender);
+                addEvent(chart, 'beforeRedraw', onBeforeRender);
+                // Add new collapsed nodes on addseries
+                addEvent(chart, 'addSeries', function (e) {
+                    if (e.options.data) {
+                        var treeGrid = getTreeGridFromData(e.options.data,
+                            userOptions.uniqueNames || false, 1);
+                        axis.treeGrid.collapsedNodes = (axis.treeGrid.collapsedNodes || []).concat(treeGrid.collapsedNodes);
+                    }
+                });
+                // Collapse all nodes in axis.treegrid.collapsednodes
+                // where collapsed equals true.
+                addEvent(axis, 'foundExtremes', function () {
+                    if (axis.treeGrid.collapsedNodes) {
+                        axis.treeGrid.collapsedNodes.forEach(function (node) {
+                            var breaks = axis.treeGrid.collapse(node);
+                            if (axis.brokenAxis) {
+                                axis.brokenAxis.setBreaks(breaks, false);
+                                // remove the node from the axis collapsedNodes
+                                if (axis.treeGrid.collapsedNodes) {
+                                    axis.treeGrid.collapsedNodes = axis.treeGrid
+                                        .collapsedNodes
+                                        .filter(function (n) { return ((node.collapseStart !==
+                                        n.collapseStart) ||
+                                        node.collapseEnd !== n.collapseEnd); });
                                 }
-                            });
-                        }
-                    });
-                    // If staticScale is not defined on the yAxis
-                    // and chart height is set, set axis.isDirty
-                    // to ensure collapsing works (#12012)
-                    addEvent(axis, 'afterBreaks', function () {
-                        if (axis.coll === 'yAxis' &&
-                            !axis.staticScale &&
-                            axis.chart.options.chart.height) {
-                            axis.isDirty = true;
-                        }
-                    });
-                    userOptions = merge({
-                        // Default options
-                        grid: {
-                            enabled: true
-                        },
-                        // TODO: add support for align in treegrid.
-                        labels: {
-                            align: 'left',
-                            /**
-                            * Set options on specific levels in a tree grid axis. Takes
-                            * precedence over labels options.
-                            *
-                            * @sample {gantt} gantt/treegrid-axis/labels-levels
-                            *         Levels on TreeGrid Labels
-                            *
-                            * @type      {Array<*>}
-                            * @product   gantt
-                            * @apioption yAxis.labels.levels
-                            *
-                            * @private
-                            */
-                            levels: [{
-                                    /**
-                                    * Specify the level which the options within this object
-                                    * applies to.
-                                    *
-                                    * @type      {number}
-                                    * @product   gantt
-                                    * @apioption yAxis.labels.levels.level
-                                    *
-                                    * @private
-                                    */
-                                    level: void 0
-                                }, {
-                                    level: 1,
-                                    /**
-                                     * @type      {Highcharts.CSSObject}
-                                     * @product   gantt
-                                     * @apioption yAxis.labels.levels.style
-                                     *
-                                     * @private
-                                     */
-                                    style: {
-                                        /** @ignore-option */
-                                        fontWeight: 'bold'
-                                    }
-                                }],
+                            }
+                        });
+                    }
+                });
+                // If staticScale is not defined on the yAxis
+                // and chart height is set, set axis.isDirty
+                // to ensure collapsing works (#12012)
+                addEvent(axis, 'afterBreaks', function () {
+                    if (axis.coll === 'yAxis' &&
+                        !axis.staticScale &&
+                        axis.chart.options.chart.height) {
+                        axis.isDirty = true;
+                    }
+                });
+                userOptions = merge({
+                    // Default options
+                    grid: {
+                        enabled: true
+                    },
+                    // TODO: add support for align in treegrid.
+                    labels: {
+                        align: 'left',
+                        /**
+                        * Set options on specific levels in a tree grid axis. Takes
+                        * precedence over labels options.
+                        *
+                        * @sample {gantt} gantt/treegrid-axis/labels-levels
+                        *         Levels on TreeGrid Labels
+                        *
+                        * @type      {Array<*>}
+                        * @product   gantt
+                        * @apioption yAxis.labels.levels
+                        *
+                        * @private
+                        */
+                        levels: [{
+                                /**
+                                * Specify the level which the options within this object
+                                * applies to.
+                                *
+                                * @type      {number}
+                                * @product   gantt
+                                * @apioption yAxis.labels.levels.level
+                                *
+                                * @private
+                                */
+                                level: void 0
+                            }, {
+                                level: 1,
+                                /**
+                                 * @type      {Highcharts.CSSObject}
+                                 * @product   gantt
+                                 * @apioption yAxis.labels.levels.style
+                                 *
+                                 * @private
+                                 */
+                                style: {
+                                    /** @ignore-option */
+                                    fontWeight: 'bold'
+                                }
+                            }],
+                        /**
+                         * The symbol for the collapse and expand icon in a
+                         * treegrid.
+                         *
+                         * @product      gantt
+                         * @optionparent yAxis.labels.symbol
+                         *
+                         * @private
+                         */
+                        symbol: {
                             /**
-                             * The symbol for the collapse and expand icon in a
-                             * treegrid.
+                             * The symbol type. Points to a definition function in
+                             * the `Highcharts.Renderer.symbols` collection.
                              *
-                             * @product      gantt
-                             * @optionparent yAxis.labels.symbol
+                             * @type {Highcharts.SymbolKeyValue}
                              *
                              * @private
                              */
-                            symbol: {
-                                /**
-                                 * The symbol type. Points to a definition function in
-                                 * the `Highcharts.Renderer.symbols` collection.
-                                 *
-                                 * @type {Highcharts.SymbolKeyValue}
-                                 *
-                                 * @private
-                                 */
-                                type: 'triangle',
-                                x: -5,
-                                y: -5,
-                                height: 10,
-                                width: 10,
-                                padding: 5
-                            }
-                        },
-                        uniqueNames: false
-                    }, userOptions, {
-                        // Forced options
-                        reversed: true,
-                        // grid.columns is not supported in treegrid
-                        grid: {
-                            columns: void 0
+                            type: 'triangle',
+                            x: -5,
+                            y: -5,
+                            height: 10,
+                            width: 10,
+                            padding: 5
                         }
-                    });
-                }
-                // Now apply the original function with the original arguments,
-                // which are sliced off this function's arguments
-                proceed.apply(axis, [chart, userOptions]);
-                if (isTreeGrid) {
-                    axis.hasNames = true;
-                    axis.options.showLastLabel = true;
-                }
+                    },
+                    uniqueNames: false
+                }, userOptions, {
+                    // Forced options
+                    reversed: true,
+                    // grid.columns is not supported in treegrid
+                    grid: {
+                        columns: void 0
+                    }
+                });
             }
-            /**
-             * Set the tick positions, tickInterval, axis min and max.
+            // Now apply the original function with the original arguments,
+            // which are sliced off this function's arguments
+            proceed.apply(axis, [chart, userOptions]);
+            if (isTreeGrid) {
+                axis.hasNames = true;
+                axis.options.showLastLabel = true;
+            }
+        }
+        /**
+         * Set the tick positions, tickInterval, axis min and max.
+         *
+         * @private
+         * @function Highcharts.GridAxis#setTickInterval
+         *
+         * @param {Function} proceed
+         * The original setTickInterval function.
+         */
+        function wrapSetTickInterval(proceed) {
+            var axis = this,
+                options = axis.options,
+                isTreeGrid = options.type === 'treegrid';
+            if (isTreeGrid) {
+                axis.min = pick(axis.userMin, options.min, axis.dataMin);
+                axis.max = pick(axis.userMax, options.max, axis.dataMax);
+                fireEvent(axis, 'foundExtremes');
+                // setAxisTranslation modifies the min and max according to
+                // axis breaks.
+                axis.setAxisTranslation();
+                axis.tickmarkOffset = 0.5;
+                axis.tickInterval = 1;
+                axis.tickPositions = axis.treeGrid.mapOfPosToGridNode ?
+                    axis.treeGrid.getTickPositions() :
+                    [];
+            }
+            else {
+                proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
+            }
+        }
+        /* *
+         *
+         *  Classes
+         *
+         * */
+        /**
+         * @private
+         * @class
+         */
+        var TreeGridAxisAdditions = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructors
+                 *
+                 * */
+                /**
+                 * @private
+                 */
+                function TreeGridAxisAdditions(axis) {
+                    this.axis = axis;
+            }
+            /* *
              *
-             * @private
-             * @function Highcharts.GridAxis#setTickInterval
+             *  Static Functions
              *
-             * @param {Function} proceed
-             * The original setTickInterval function.
+             * */
+            /**
+             * @private
              */
-            function wrapSetTickInterval(proceed) {
-                var axis = this,
-                    options = axis.options,
-                    isTreeGrid = options.type === 'treegrid';
-                if (isTreeGrid) {
-                    axis.min = pick(axis.userMin, options.min, axis.dataMin);
-                    axis.max = pick(axis.userMax, options.max, axis.dataMax);
-                    fireEvent(axis, 'foundExtremes');
-                    // setAxisTranslation modifies the min and max according to
-                    // axis breaks.
-                    axis.setAxisTranslation();
-                    axis.tickmarkOffset = 0.5;
-                    axis.tickInterval = 1;
-                    axis.tickPositions = axis.treeGrid.mapOfPosToGridNode ?
-                        axis.treeGrid.getTickPositions() :
-                        [];
+            TreeGridAxisAdditions.compose = function (AxisClass, ChartClass, SeriesClass, TickClass) {
+                if (composedClasses.indexOf(AxisClass) === -1) {
+                    composedClasses.push(AxisClass);
+                    if (AxisClass.keepProps.indexOf('treeGrid') === -1) {
+                        AxisClass.keepProps.push('treeGrid');
+                    }
+                    var axisProps = AxisClass.prototype;
+                    wrap(axisProps, 'generateTick', wrapGenerateTick);
+                    wrap(axisProps, 'init', wrapInit);
+                    wrap(axisProps, 'setTickInterval', wrapSetTickInterval);
+                    // Make utility functions available for testing.
+                    axisProps.utils = {
+                        getNode: Tree.getNode
+                    };
                 }
-                else {
-                    proceed.apply(axis, Array.prototype.slice.call(arguments, 1));
+                if (composedClasses.indexOf(TickClass) === -1) {
+                    composedClasses.push(TickClass);
+                    if (!TickConstructor) {
+                        TickConstructor = TickClass;
+                    }
                 }
-            }
+                GridAxis.compose(AxisClass, ChartClass, TickClass);
+                BrokenAxis.compose(AxisClass, SeriesClass);
+                TreeGridTick.compose(TickClass);
+                return AxisClass;
+            };
             /* *
              *
-             *  Classes
+             *  Functions
              *
              * */
             /**
+             * Set the collapse status.
+             *
              * @private
-             * @class
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to collapse.
              */
-            var Additions = /** @class */ (function () {
-                    /* *
-                     *
-                     *  Constructors
-                     *
-                     * */
-                    /**
-                     * @private
-                     */
-                    function Additions(axis) {
-                        this.axis = axis;
-                }
-                /* *
-                 *
-                 *  Functions
-                 *
-                 * */
-                /**
-                 * Set the collapse status.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to collapse.
-                 */
-                Additions.prototype.setCollapsedStatus = function (node) {
-                    var axis = this.axis,
-                        chart = axis.chart;
-                    axis.series.forEach(function (series) {
-                        var data = series.options.data;
-                        if (node.id && data) {
-                            var point = chart.get(node.id),
-                                dataPoint = data[series.data.indexOf(point)];
-                            if (point && dataPoint) {
-                                point.collapsed = node.collapsed;
-                                dataPoint.collapsed = node.collapsed;
-                            }
-                        }
-                    });
-                };
-                /**
-                 * Calculates the new axis breaks to collapse a node.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to collapse.
-                 *
-                 * @param {number} pos
-                 * The tick position to collapse.
-                 *
-                 * @return {Array<object>}
-                 * Returns an array of the new breaks for the axis.
-                 */
-                Additions.prototype.collapse = function (node) {
-                    var axis = this.axis,
-                        breaks = (axis.options.breaks || []),
-                        obj = getBreakFromNode(node,
-                        axis.max);
-                    breaks.push(obj);
-                    // Change the collapsed flag #13838
-                    node.collapsed = true;
-                    axis.treeGrid.setCollapsedStatus(node);
-                    return breaks;
-                };
-                /**
-                 * Calculates the new axis breaks to expand a node.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to expand.
-                 *
-                 * @param {number} pos
-                 * The tick position to expand.
-                 *
-                 * @return {Array<object>}
-                 * Returns an array of the new breaks for the axis.
-                 */
-                Additions.prototype.expand = function (node) {
-                    var axis = this.axis,
-                        breaks = (axis.options.breaks || []),
-                        obj = getBreakFromNode(node,
-                        axis.max);
-                    // Change the collapsed flag #13838
-                    node.collapsed = false;
-                    axis.treeGrid.setCollapsedStatus(node);
-                    // Remove the break from the axis breaks array.
-                    return breaks.reduce(function (arr, b) {
-                        if (b.to !== obj.to || b.from !== obj.from) {
-                            arr.push(b);
-                        }
-                        return arr;
-                    }, []);
-                };
-                /**
-                 * Creates a list of positions for the ticks on the axis. Filters out
-                 * positions that are outside min and max, or is inside an axis break.
-                 *
-                 * @private
-                 *
-                 * @return {Array<number>}
-                 * List of positions.
-                 */
-                Additions.prototype.getTickPositions = function () {
-                    var axis = this.axis,
-                        roundedMin = Math.floor(axis.min / axis.tickInterval) * axis.tickInterval,
-                        roundedMax = Math.ceil(axis.max / axis.tickInterval) * axis.tickInterval;
-                    return Object.keys(axis.treeGrid.mapOfPosToGridNode || {}).reduce(function (arr, key) {
-                        var pos = +key;
-                        if (pos >= roundedMin &&
-                            pos <= roundedMax &&
-                            !(axis.brokenAxis && axis.brokenAxis.isInAnyBreak(pos))) {
-                            arr.push(pos);
+            TreeGridAxisAdditions.prototype.setCollapsedStatus = function (node) {
+                var axis = this.axis,
+                    chart = axis.chart;
+                axis.series.forEach(function (series) {
+                    var data = series.options.data;
+                    if (node.id && data) {
+                        var point = chart.get(node.id),
+                            dataPoint = data[series.data.indexOf(point)];
+                        if (point && dataPoint) {
+                            point.collapsed = node.collapsed;
+                            dataPoint.collapsed = node.collapsed;
                         }
-                        return arr;
-                    }, []);
-                };
-                /**
-                 * Check if a node is collapsed.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Object} node
-                 * The node to check if is collapsed.
-                 *
-                 * @param {number} pos
-                 * The tick position to collapse.
-                 *
-                 * @return {boolean}
-                 * Returns true if collapsed, false if expanded.
-                 */
-                Additions.prototype.isCollapsed = function (node) {
-                    var axis = this.axis,
-                        breaks = (axis.options.breaks || []),
-                        obj = getBreakFromNode(node,
-                        axis.max);
-                    return breaks.some(function (b) {
-                        return b.from === obj.from && b.to === obj.to;
-                    });
-                };
-                /**
-                 * Calculates the new axis breaks after toggling the collapse/expand
-                 * state of a node. If it is collapsed it will be expanded, and if it is
-                 * exapended it will be collapsed.
-                 *
-                 * @private
-                 *
-                 * @param {Highcharts.Axis} axis
-                 * The axis to check against.
-                 *
-                 * @param {Highcharts.GridNode} node
-                 * The node to toggle.
-                 *
-                 * @return {Array<object>}
-                 * Returns an array of the new breaks for the axis.
-                 */
-                Additions.prototype.toggleCollapse = function (node) {
-                    return (this.isCollapsed(node) ?
-                        this.expand(node) :
-                        this.collapse(node));
-                };
-                return Additions;
-            }());
-            TreeGridAxis.Additions = Additions;
-        })(TreeGridAxis || (TreeGridAxis = {}));
+                    }
+                });
+            };
+            /**
+             * Calculates the new axis breaks to collapse a node.
+             *
+             * @private
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to collapse.
+             *
+             * @param {number} pos
+             * The tick position to collapse.
+             *
+             * @return {Array<object>}
+             * Returns an array of the new breaks for the axis.
+             */
+            TreeGridAxisAdditions.prototype.collapse = function (node) {
+                var axis = this.axis,
+                    breaks = (axis.options.breaks || []),
+                    obj = getBreakFromNode(node,
+                    axis.max);
+                breaks.push(obj);
+                // Change the collapsed flag #13838
+                node.collapsed = true;
+                axis.treeGrid.setCollapsedStatus(node);
+                return breaks;
+            };
+            /**
+             * Calculates the new axis breaks to expand a node.
+             *
+             * @private
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to expand.
+             *
+             * @param {number} pos
+             * The tick position to expand.
+             *
+             * @return {Array<object>}
+             * Returns an array of the new breaks for the axis.
+             */
+            TreeGridAxisAdditions.prototype.expand = function (node) {
+                var axis = this.axis,
+                    breaks = (axis.options.breaks || []),
+                    obj = getBreakFromNode(node,
+                    axis.max);
+                // Change the collapsed flag #13838
+                node.collapsed = false;
+                axis.treeGrid.setCollapsedStatus(node);
+                // Remove the break from the axis breaks array.
+                return breaks.reduce(function (arr, b) {
+                    if (b.to !== obj.to || b.from !== obj.from) {
+                        arr.push(b);
+                    }
+                    return arr;
+                }, []);
+            };
+            /**
+             * Creates a list of positions for the ticks on the axis. Filters out
+             * positions that are outside min and max, or is inside an axis break.
+             *
+             * @private
+             *
+             * @return {Array<number>}
+             * List of positions.
+             */
+            TreeGridAxisAdditions.prototype.getTickPositions = function () {
+                var axis = this.axis,
+                    roundedMin = Math.floor(axis.min / axis.tickInterval) * axis.tickInterval,
+                    roundedMax = Math.ceil(axis.max / axis.tickInterval) * axis.tickInterval;
+                return Object.keys(axis.treeGrid.mapOfPosToGridNode || {}).reduce(function (arr, key) {
+                    var pos = +key;
+                    if (pos >= roundedMin &&
+                        pos <= roundedMax &&
+                        !(axis.brokenAxis && axis.brokenAxis.isInAnyBreak(pos))) {
+                        arr.push(pos);
+                    }
+                    return arr;
+                }, []);
+            };
+            /**
+             * Check if a node is collapsed.
+             *
+             * @private
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Object} node
+             * The node to check if is collapsed.
+             *
+             * @param {number} pos
+             * The tick position to collapse.
+             *
+             * @return {boolean}
+             * Returns true if collapsed, false if expanded.
+             */
+            TreeGridAxisAdditions.prototype.isCollapsed = function (node) {
+                var axis = this.axis,
+                    breaks = (axis.options.breaks || []),
+                    obj = getBreakFromNode(node,
+                    axis.max);
+                return breaks.some(function (b) {
+                    return b.from === obj.from && b.to === obj.to;
+                });
+            };
+            /**
+             * Calculates the new axis breaks after toggling the collapse/expand
+             * state of a node. If it is collapsed it will be expanded, and if it is
+             * exapended it will be collapsed.
+             *
+             * @private
+             *
+             * @param {Highcharts.Axis} axis
+             * The axis to check against.
+             *
+             * @param {Highcharts.GridNode} node
+             * The node to toggle.
+             *
+             * @return {Array<object>}
+             * Returns an array of the new breaks for the axis.
+             */
+            TreeGridAxisAdditions.prototype.toggleCollapse = function (node) {
+                return (this.isCollapsed(node) ?
+                    this.expand(node) :
+                    this.collapse(node));
+            };
+            return TreeGridAxisAdditions;
+        }());
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return TreeGridAxis;
+        return TreeGridAxisAdditions;
     });
-    _registerModule(_modules, 'masters/modules/treegrid.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/TreeGridAxis.js']], function (Highcharts, TreeGridAxis) {
+    _registerModule(_modules, 'masters/modules/treegrid.src.js', [_modules['Core/Globals.js'], _modules['Core/Axis/TreeGrid/TreeGridAxis.js']], function (Highcharts, TreeGridAxis) {
 
         var G = Highcharts;
         // Compositions