highcharts 9.2.2 → 9.3.3

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

@@ -15,6 +15,7 @@ var chartProto = Chart.prototype;
 import ControllableMixin from './Mixins/ControllableMixin.js';
 import ControllableRect from './Controllables/ControllableRect.js';
 import ControllableCircle from './Controllables/ControllableCircle.js';
+import ControllableEllipse from './Controllables/ControllableEllipse.js';
 import ControllablePath from './Controllables/ControllablePath.js';
 import ControllableImage from './Controllables/ControllableImage.js';
 import ControllableLabel from './Controllables/ControllableLabel.js';
@@ -24,7 +25,6 @@ import H from '../../Core/Globals.js';
 import MockPoint from './MockPoint.js';
 import Pointer from '../../Core/Pointer.js';
 import U from '../../Core/Utilities.js';
-import palette from '../../Core/Color/Palette.js';
 var addEvent = U.addEvent, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, extend = U.extend, find = U.find, fireEvent = U.fireEvent, merge = U.merge, pick = U.pick, splat = U.splat, wrap = U.wrap;
 /* *********************************************************************
  *
@@ -222,7 +222,10 @@ var Annotation = /** @class */ (function () {
     };
     Annotation.prototype.addClipPaths = function () {
         this.setClipAxes();
-        if (this.clipXAxis && this.clipYAxis) {
+        if (this.clipXAxis &&
+            this.clipYAxis &&
+            this.options.crop // #15399
+        ) {
             this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
         }
     };
@@ -321,8 +324,10 @@ var Annotation = /** @class */ (function () {
             .add();
         this.shapesGroup = renderer
             .g('annotation-shapes')
-            .add(this.graphic)
-            .clip(this.chart.plotBoxClip);
+            .add(this.graphic);
+        if (this.options.crop) { // #15399
+            this.shapesGroup.clip(this.chart.plotBoxClip);
+        }
         this.labelsGroup = renderer
             .g('annotation-labels')
             .attr({
@@ -405,7 +410,6 @@ var Annotation = /** @class */ (function () {
      * @param {Partial<Highcharts.AnnotationsOptions>} userOptions
      * New user options for the annotation.
      *
-     * @return {void}
      */
     Annotation.prototype.update = function (userOptions, redraw) {
         var chart = this.chart, labelsAndShapes = this.getLabelsAndShapesOptions(this.userOptions, userOptions), userOptionsIndex = chart.annotations.indexOf(this), options = merge(true, this.userOptions, userOptions);
@@ -429,7 +433,11 @@ var Annotation = /** @class */ (function () {
     /**
      * Initialisation of a single shape
      * @private
-     * @param {Object} shapeOptions - a confg object for a single shape
+     * @param {Object} shapeOptions
+     * a confg object for a single shape
+     * @param {number} index
+     * annotation may have many shapes, this is the shape's index saved in
+     * shapes.index.
      */
     Annotation.prototype.initShape = function (shapeOptions, index) {
         var options = merge(this.options.shapeOptions, {
@@ -526,6 +534,7 @@ var Annotation = /** @class */ (function () {
     Annotation.shapesMap = {
         'rect': ControllableRect,
         'circle': ControllableCircle,
+        'ellipse': ControllableEllipse,
         'path': ControllablePath,
         'image': ControllableImage
     };
@@ -602,9 +611,18 @@ merge(Annotation.prototype,
          *          Animation defer settings
          * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
          * @since 8.2.0
-         * @apioption annotations.animation
          */
         animation: {},
+        /**
+         * Whether to hide the part of the annotation
+         * that is outside the plot area.
+         *
+         * @sample highcharts/annotations/label-crop-overflow/
+         *         Crop line annotation
+         * @type  {boolean}
+         * @since 9.3.0
+         */
+        crop: true,
         /**
          * The animation delay time in milliseconds.
          * Set to `0` renders annotation immediately.
@@ -669,7 +687,7 @@ merge(Annotation.prototype,
              *
              * @type {Highcharts.ColorString}
              */
-            borderColor: palette.neutralColor100,
+            borderColor: "#000000" /* neutralColor100 */,
             /**
              * The border radius in pixels for the annotaiton's label.
              *
@@ -964,6 +982,32 @@ merge(Annotation.prototype,
          * @requires  modules/annotations
          */
         shapeOptions: {
+            /**
+             *
+             * The radius of the shape in y direction.
+             * Used for the ellipse.
+             *
+             * @sample highcharts/annotations/ellipse/
+             *         Ellipse annotation
+             *
+             * @type      {number}
+             * @apioption annotations.shapeOptions.ry
+             **/
+            /**
+             *
+             * The xAxis index to which the points should be attached.
+             * Used for the ellipse.
+             *
+             * @type      {number}
+             * @apioption annotations.shapeOptions.xAxis
+             **/
+            /**
+             * The yAxis index to which the points should be attached.
+             * Used for the ellipse.
+             *
+             * @type      {number}
+             * @apioption annotations.shapeOptions.yAxis
+             **/
             /**
              * The width of the shape.
              *
@@ -983,11 +1027,15 @@ merge(Annotation.prototype,
              * @apioption annotations.shapeOptions.height
              */
             /**
-             * The type of the shape, e.g. circle or rectangle.
+             * The type of the shape.
+             * Avaliable options are circle, rect and ellipse.
              *
              * @sample highcharts/annotations/shape/
              *         Basic shape annotation
              *
+             * @sample highcharts/annotations/ellipse/
+             *         Ellipse annotation
+             *
              * @type      {string}
              * @default   rect
              * @apioption annotations.shapeOptions.type
@@ -1069,9 +1117,10 @@ merge(Annotation.prototype,
             width: 10,
             height: 10,
             style: {
-                stroke: palette.neutralColor100,
-                'stroke-width': 2,
-                fill: palette.backgroundColor
+                cursor: 'pointer',
+                fill: "#ffffff" /* backgroundColor */,
+                stroke: "#000000" /* neutralColor100 */,
+                'stroke-width': 2
             },
             visible: false,
             events: {}
@@ -1122,7 +1171,8 @@ H.extendAnnotation = function (Constructor, BaseConstructor, prototype, defaultO
  ******************************************************************** */
 extend(chartProto, /** @lends Highcharts.Chart# */ {
     initAnnotation: function (userOptions) {
-        var Constructor = Annotation.types[userOptions.type] || Annotation, annotation = new Constructor(this, userOptions);
+        var Constructor = Annotation
+            .types[userOptions.type] || Annotation, annotation = new Constructor(this, userOptions);
         this.annotations.push(annotation);
         return annotation;
     },
@@ -1132,7 +1182,8 @@ extend(chartProto, /** @lends Highcharts.Chart# */ {
      * @param  {Highcharts.AnnotationsOptions} options
      *         The annotation options for the new, detailed annotation.
      * @param {boolean} [redraw]
-     *
+     * @sample highcharts/annotations/add-annotation/
+     *         Add annotation
      * @return {Highcharts.Annotation} - The newly generated annotation.
      */
     addAnnotation: function (userOptions, redraw) {
@@ -1153,7 +1204,7 @@ extend(chartProto, /** @lends Highcharts.Chart# */ {
      * The annotation's id or direct annotation object.
      */
     removeAnnotation: function (idOrAnnotation) {
-        var annotations = this.annotations, annotation = idOrAnnotation.coll === 'annotations' ?
+        var annotations = this.annotations, annotation = (idOrAnnotation.coll === 'annotations') ?
             idOrAnnotation :
             find(annotations, function (annotation) {
                 return annotation.options.id === idOrAnnotation;
@@ -1266,15 +1317,15 @@ chartProto.callbacks.push(function (chart) {
                             // Annotation placed on a exported data point
                             // - add new column
                             if (!wasAdded) {
-                                event.dataRows.forEach(function (row, rowIndex) {
+                                event.dataRows.forEach(function (row) {
                                     if (!wasAdded &&
                                         row.xValues &&
                                         xAxisIndex !== void 0 &&
                                         annotationX === row.xValues[xAxisIndex]) {
                                         if (joinAnnotations &&
                                             row.length > startRowLength) {
-                                            row[row.length - 1] +=
-                                                annotationSeparator + annotationText_1;
+                                            row[row.length - 1] += (annotationSeparator +
+                                                annotationText_1);
                                         }
                                         else {
                                             row.push(annotationText_1);

package/es-modules/Extensions/Annotations/ControlPoint.js

@@ -12,7 +12,7 @@
  * @return {Highcharts.PositionObject}
  */
 import U from '../../Core/Utilities.js';
-var extend = U.extend, merge = U.merge, pick = U.pick;
+var merge = U.merge, pick = U.pick;
 import eventEmitterMixin from './Mixins/EventEmitterMixin.js';
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
@@ -80,7 +80,6 @@ var ControlPoint = /** @class */ (function () {
      * @param {boolean} visible
      * Visibility of the control point.
      *
-     * @return {void}
      */
     ControlPoint.prototype.setVisibility = function (visible) {
         this.graphic.attr('visibility', visible ? 'visible' : 'hidden');
@@ -129,7 +128,6 @@ var ControlPoint = /** @class */ (function () {
      * @param {Partial<Highcharts.AnnotationControlPointOptionsObject>} userOptions
      * New options for the control point.
      *
-     * @return {void}
      */
     ControlPoint.prototype.update = function (userOptions) {
         var chart = this.chart, target = this.target, index = this.index, options = merge(true, this.options, userOptions);

package/es-modules/Extensions/Annotations/Controllables/ControllableCircle.js

@@ -45,7 +45,7 @@ var ControllableCircle = /** @class */ (function () {
         this.point = ControllableMixin.point;
         this.rotate = ControllableMixin.rotate;
         this.scale = ControllableMixin.scale;
-        this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+        this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
         this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
         this.transform = ControllableMixin.transform;
         this.transformPoint = ControllableMixin.transformPoint;

package/es-modules/Extensions/Annotations/Controllables/ControllableEllipse.js

@@ -0,0 +1,199 @@
+/* *
+ *
+ * Author: Pawel Lysy
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import ControllableMixin from '../Mixins/ControllableMixin.js';
+import ControllablePath from './ControllablePath.js';
+import U from '../../../Core/Utilities.js';
+var merge = U.merge, defined = U.defined;
+/**
+ * A controllable ellipse class.
+ *
+ * @requires modules/annotations
+ *
+ * @private
+ * @class
+ * @name Highcharts.AnnotationControllableEllipse
+ *
+ * @param {Highcharts.Annotation} annotation an annotation instance
+ * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
+ * @param {number} index of the Ellipse
+ */
+var ControllableEllipse = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function ControllableEllipse(annotation, options, index) {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        this.addControlPoints = ControllableMixin.addControlPoints;
+        this.anchor = ControllableMixin.anchor;
+        this.attr = ControllableMixin.attr;
+        this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+        this.destroy = ControllableMixin.destroy;
+        this.getPointsOptions = ControllableMixin.getPointsOptions;
+        this.linkPoints = ControllableMixin.linkPoints;
+        this.point = ControllableMixin.point;
+        this.scale = ControllableMixin.scale;
+        this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
+        this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+        this.transform = ControllableMixin.transform;
+        this.translatePoint = ControllableMixin.translatePoint;
+        this.transformPoint = ControllableMixin.transformPoint;
+        /**
+         * @type 'ellipse'
+         */
+        this.type = 'ellipse';
+        this.init(annotation, options, index);
+        this.collection = 'shapes';
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    ControllableEllipse.prototype.init = function (annotation, options, index) {
+        if (defined(options.yAxis)) {
+            options.points.forEach(function (point) {
+                point.yAxis = options.yAxis;
+            });
+        }
+        if (defined(options.xAxis)) {
+            options.points.forEach(function (point) {
+                point.xAxis = options.xAxis;
+            });
+        }
+        ControllableMixin.init.call(this, annotation, options, index);
+    };
+    /**
+     *
+     * Render the element
+     * @param parent parent SVG element.
+     */
+    ControllableEllipse.prototype.render = function (parent) {
+        this.graphic = this.annotation.chart.renderer.createElement('ellipse')
+            .attr(this.attrsFromOptions(this.options))
+            .add(parent);
+        ControllableMixin.render.call(this);
+    };
+    /**
+     * Translate the points.
+     * Mostly used to handle dragging of the ellipse.
+     */
+    ControllableEllipse.prototype.translate = function (dx, dy) {
+        ControllableMixin.translateShape.call(this, dx, dy, true);
+    };
+    /**
+     * Get the distance from the line to the point.
+     * @param point1 first point which is on the line
+     * @param point2 second point
+     * @param x0 point's x value from which you want to calculate the distance from
+     * @param y0 point's y value from which you want to calculate the distance from
+     */
+    ControllableEllipse.prototype.getDistanceFromLine = function (point1, point2, x0, y0) {
+        return Math.abs((point2.y - point1.y) * x0 - (point2.x - point1.x) * y0 +
+            point2.x * point1.y - point2.y * point1.x) / Math.sqrt((point2.y - point1.y) * (point2.y - point1.y) +
+            (point2.x - point1.x) * (point2.x - point1.x));
+    };
+    /**
+     * The fuction calculates the svg attributes of the ellipse, and returns all
+     * parameters neccessary to draw the ellipse.
+     * @param position absolute position of the first point in points array
+     * @param position2 absolute position of the second point in points array
+     */
+    ControllableEllipse.prototype.getAttrs = function (position, position2) {
+        var x1 = position.x, y1 = position.y, x2 = position2.x, y2 = position2.y, cx = (x1 + x2) / 2, cy = (y1 + y2) / 2, rx = Math.sqrt((x1 - x2) * (x1 - x2) / 4 + (y1 - y2) * (y1 - y2) / 4), tan = (y2 - y1) / (x2 - x1);
+        var angle = Math.atan(tan) * 180 / Math.PI;
+        if (cx < x1) {
+            angle += 180;
+        }
+        var ry = this.getRY();
+        return { cx: cx, cy: cy, rx: rx, ry: ry, angle: angle };
+    };
+    /**
+     * Get the value of minor radius of the ellipse.
+     */
+    ControllableEllipse.prototype.getRY = function () {
+        var yAxis = this.getYAxis();
+        return defined(yAxis) ?
+            Math.abs(yAxis.toPixels(this.options.ry) - yAxis.toPixels(0)) :
+            this.options.ry;
+    };
+    /**
+     * get the yAxis object to which the ellipse is pinned.
+     */
+    ControllableEllipse.prototype.getYAxis = function () {
+        var yAxisIndex = this.options.yAxis;
+        return this.chart.yAxis[yAxisIndex];
+    };
+    /**
+     * Get the absolute coordinates of the MockPoint
+     * @param point MockPoint that is added through options
+     */
+    ControllableEllipse.prototype.getAbsolutePosition = function (point) {
+        return this.anchor(point).absolutePosition;
+    };
+    /**
+     *
+     * Redraw the element
+     * @param animation display an annimation
+     */
+    ControllableEllipse.prototype.redraw = function (animation) {
+        var position = this.getAbsolutePosition(this.points[0]), position2 = this.getAbsolutePosition(this.points[1]), attrs = this.getAttrs(position, position2);
+        if (position) {
+            this.graphic[animation ? 'animate' : 'attr']({
+                cx: attrs.cx,
+                cy: attrs.cy,
+                rx: attrs.rx,
+                ry: attrs.ry,
+                rotation: attrs.angle,
+                rotationOriginX: attrs.cx,
+                rotationOriginY: attrs.cy
+            });
+        }
+        else {
+            this.graphic.attr({
+                x: 0,
+                y: -9e9
+            });
+        }
+        this.graphic.placed = Boolean(position);
+        ControllableMixin.redraw.call(this, animation);
+    };
+    /**
+     * Set the radius Y.
+     *
+     * @param {number} ry a radius in y direction to be set
+     */
+    ControllableEllipse.prototype.setYRadius = function (ry) {
+        this.options.ry = ry;
+        this.annotation.userOptions.shapes[0].ry = ry;
+        this.annotation.options.shapes[0].ry = ry;
+    };
+    /* *
+     *
+     *  Static Properties
+     *
+     * */
+    /**
+     * A map object which allows to map options attributes to element
+     * attributes.
+     *
+     * @name Highcharts.AnnotationControllableEllipse.attrsMap
+     * @type {Highcharts.Dictionary<string>}
+     */
+    ControllableEllipse.attrsMap = merge(ControllablePath.attrsMap, {
+        ry: 'ry'
+    });
+    return ControllableEllipse;
+}());
+export default ControllableEllipse;

package/es-modules/Extensions/Annotations/Controllables/ControllableImage.js

@@ -48,7 +48,7 @@ var ControllableImage = /** @class */ (function () {
         this.point = ControllableMixin.point;
         this.rotate = ControllableMixin.rotate;
         this.scale = ControllableMixin.scale;
-        this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+        this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
         this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
         this.transform = ControllableMixin.transform;
         this.transformPoint = ControllableMixin.transformPoint;

package/es-modules/Extensions/Annotations/Controllables/ControllableLabel.js

@@ -58,7 +58,7 @@ var ControllableLabel = /** @class */ (function () {
         this.point = ControllableMixin.point;
         this.rotate = ControllableMixin.rotate;
         this.scale = ControllableMixin.scale;
-        this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+        this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
         this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
         this.transform = ControllableMixin.transform;
         this.transformPoint = ControllableMixin.transformPoint;
@@ -273,10 +273,6 @@ var ControllableLabel = /** @class */ (function () {
     };
     /**
      * Returns the label position relative to its anchor.
-     *
-     * @param {Highcharts.AnnotationAnchorObject} anchor
-     *
-     * @return {Highcharts.PositionObject|null}
      */
     ControllableLabel.prototype.position = function (anchor) {
         var item = this.graphic, chart = this.annotation.chart, point = this.points[0], itemOptions = this.options, anchorAbsolutePosition = anchor.absolutePosition, anchorRelativePosition = anchor.relativePosition;
@@ -293,7 +289,8 @@ var ControllableLabel = /** @class */ (function () {
                     plotY: anchorRelativePosition.y,
                     negative: point.negative,
                     ttBelow: point.ttBelow,
-                    h: (anchorRelativePosition.height || anchorRelativePosition.width)
+                    h: (anchorRelativePosition.height ||
+                        anchorRelativePosition.width)
                 });
             }
             else if (itemOptions.positioner) {

package/es-modules/Extensions/Annotations/Controllables/ControllablePath.js

@@ -53,7 +53,7 @@ var ControllablePath = /** @class */ (function () {
         this.point = ControllableMixin.point;
         this.rotate = ControllableMixin.rotate;
         this.scale = ControllableMixin.scale;
-        this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+        this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
         this.setMarkers = MarkerMixin.setItemMarkers;
         this.transform = ControllableMixin.transform;
         this.transformPoint = ControllableMixin.transformPoint;
@@ -110,7 +110,8 @@ var ControllablePath = /** @class */ (function () {
             null;
     };
     ControllablePath.prototype.shouldBeDrawn = function () {
-        return (ControllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
+        return (ControllableMixin.shouldBeDrawn.call(this) ||
+            Boolean(this.options.d));
     };
     ControllablePath.prototype.render = function (parent) {
         var options = this.options, attrs = this.attrsFromOptions(options);

package/es-modules/Extensions/Annotations/Controllables/ControllableRect.js

@@ -55,7 +55,7 @@ var ControllableRect = /** @class */ (function () {
         this.point = ControllableMixin.point;
         this.rotate = ControllableMixin.rotate;
         this.scale = ControllableMixin.scale;
-        this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+        this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
         this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
         this.transform = ControllableMixin.transform;
         this.transformPoint = ControllableMixin.transformPoint;

package/es-modules/Extensions/Annotations/Mixins/ControllableMixin.js

@@ -80,7 +80,8 @@ var controllableMixin = {
      */
     getPointsOptions: function () {
         var options = this.options;
-        return (options.points || (options.point && splat(options.point)));
+        return (options.points ||
+            (options.point && splat(options.point)));
     },
     /**
      * Utility function for mapping item's options
@@ -287,19 +288,27 @@ var controllableMixin = {
      *
      * @param {number} dx translation for x coordinate
      * @param {number} dy translation for y coordinate
+     * @param {boolean|undefined} translateSecondPoint If the shape has two
+     * points attached to it, this option allows you to translate also
+     * the second point
      */
-    translateShape: function (dx, dy) {
+    translateShape: function (dx, dy, translateSecondPoint) {
         var chart = this.annotation.chart, 
         // Annotation.options
         shapeOptions = this.annotation.userOptions, 
         // Chart.options.annotations
         annotationIndex = chart.annotations.indexOf(this.annotation), chartOptions = chart.options.annotations[annotationIndex];
         this.translatePoint(dx, dy, 0);
+        if (translateSecondPoint) {
+            this.translatePoint(dx, dy, 1);
+        }
         // Options stored in:
         // - chart (for exporting)
         // - current config (for redraws)
-        chartOptions[this.collection][this.index].point = this.options.point;
-        shapeOptions[this.collection][this.index].point = this.options.point;
+        chartOptions[this.collection][this.index]
+            .point = this.options.point;
+        shapeOptions[this.collection][this.index]
+            .point = this.options.point;
     },
     /**
      * Rotate a controllable.

package/es-modules/Extensions/Annotations/Mixins/EventEmitterMixin.js

@@ -16,7 +16,6 @@ var addEvent = U.addEvent, fireEvent = U.fireEvent, objectEach = U.objectEach, p
  *
  * @private
  * @mixin
- * @memberOf Annotation
  */
 var eventEmitterMixin = {
     /**

package/es-modules/Extensions/Annotations/Mixins/MarkerMixin.js

@@ -136,7 +136,8 @@ var markerMixin = {
     setItemMarkers: function (item) {
         var itemOptions = item.options, chart = item.chart, defs = chart.options.defs, fill = itemOptions.fill, color = defined(fill) && fill !== 'none' ?
             fill :
-            itemOptions.stroke, setMarker = function (markerType) {
+            itemOptions.stroke;
+        var setMarker = function (markerType) {
             var markerId = itemOptions[markerType], def, predefinedMarker, key, marker;
             if (markerId) {
                 for (key in defs) { // eslint-disable-line guard-for-in
@@ -152,13 +153,13 @@ var markerMixin = {
                 }
                 if (predefinedMarker) {
                     marker = item[markerType] = chart.renderer
-                        .addMarker((itemOptions.id || uniqueKey()) + '-' +
-                        markerId, merge(predefinedMarker, { color: color }));
+                        .addMarker((itemOptions.id || uniqueKey()) + '-' + markerId, merge(predefinedMarker, { color: color }));
                     item.attr(markerType, marker.getAttribute('id'));
                 }
             }
         };
-        ['markerStart', 'markerEnd'].forEach(setMarker);
+        ['markerStart', 'markerEnd']
+            .forEach(setMarker);
     }
 };
 addEvent(Chart, 'afterGetContainer', function () {