/** * @license Highcharts JS v6.0.4 (2017-12-15) * Annotations module * * (c) 2009-2017 Torstein Honsi * * License: www.highcharts.com/license */ 'use strict'; (function(factory) { if (typeof module === 'object' && module.exports) { module.exports = factory; } else { factory(Highcharts); } }(function(Highcharts) { (function(H) { /** * (c) 2009-2017 Highsoft, Black Label * * License: www.highcharts.com/license */ var merge = H.merge, addEvent = H.addEvent, extend = H.extend, each = H.each, isString = H.isString, isNumber = H.isNumber, defined = H.defined, isObject = H.isObject, inArray = H.inArray, erase = H.erase, find = H.find, format = H.format, pick = H.pick, destroyObjectProperties = H.destroyObjectProperties, tooltipPrototype = H.Tooltip.prototype, seriesPrototype = H.Series.prototype, chartPrototype = H.Chart.prototype; /* *************************************************************************** * * MARKER SECTION * Contains objects and functions for adding a marker element to a path element * **************************************************************************** */ /** * Options for configuring markers for annotations. * * An example of the arrow marker: * 
         * {
         *   arrow: {
         *     id: 'arrow',
         *     refY: 5,
         *     refX: 5,
         *     markerWidth: 10,
         *     markerHeight: 10,
         *     children: [{
         *       tagName: 'path',
         *       attrs: {
         *         d: 'M 0 0 L 10 5 L 0 10 Z',
         *         strokeWidth: 0
         *       }
         *     }]
         *   }
         * }
         *
* @type {Object} * @sample highcharts/annotations/custom-markers/ * Define a custom marker for annotations * @since 6.0.0 * @apioption defs.markers */ var defaultMarkers = { arrow: { render: false, id: 'arrow', refY: 5, refX: 5, markerWidth: 10, markerHeight: 10, children: [{ tagName: 'path', attrs: { d: 'M 0 0 L 10 5 L 0 10 Z', // triangle (used as an arrow) strokeWidth: 0 } }] } }; var MarkerMixin = { markerSetter: function(markerType) { return function(value) { this.attr(markerType, 'url(#' + value + ')'); }; } }; extend(MarkerMixin, { markerEndSetter: MarkerMixin.markerSetter('marker-end'), markerStartSetter: MarkerMixin.markerSetter('marker-start') }); H.SVGRenderer.prototype.addMarker = function(id, markerOptions) { var markerId = pick(id, H.uniqueKey()), marker = this.createElement('marker').attr({ id: markerId, markerWidth: pick(markerOptions.markerWidth, 20), markerHeight: pick(markerOptions.markerHeight, 20), refX: markerOptions.refX || 0, refY: markerOptions.refY || 0, orient: markerOptions.orient || 'auto' }).add(this.defs), attrs = { stroke: markerOptions.color || 'none', fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)' }, children = markerOptions.children; marker.id = markerId; each(children, function(child) { this.createElement(child.tagName) .attr(merge(attrs, child.attrs)) .add(marker); }, this); return marker; }; /* *************************************************************************** * * MOCK POINT * **************************************************************************** */ /** * A mock point configuration. * * @typedef {Object} MockPointOptions * @property {Number} x - x value for the point in xAxis scale or pixels * @property {Number} y - y value for the point in yAxis scale or pixels * @property {String|Number} [xAxis] - xAxis index or id * @property {String|Number} [yAxis] - yAxis index or id */ /** * A trimmed point object which imitates {@link Highchart.Point} class. * It is created when there is a need of pointing to some chart's position * using axis values or pixel values * * @class MockPoint * @memberOf Highcharts * * @param {Highcharts.Chart} - the chart object * @param {MockPointOptions} - the options object */ var MockPoint = H.MockPoint = function(chart, options) { this.mock = true; this.series = { visible: true, chart: chart, getPlotBox: seriesPrototype.getPlotBox }; // this.plotX // this.plotY /* Those might not exist if a specific axis was not found/defined */ // this.x? // this.y? this.init(chart, options); }; /** * A factory function for creating a mock point object * * @function #mockPoint * @memberOf Highcharts * * @param {MockPointOptions} mockPointOptions * @return {MockPoint} a mock point */ var mockPoint = H.mockPoint = function(chart, mockPointOptions) { return new MockPoint(chart, mockPointOptions); }; MockPoint.prototype = { /** * Initialisation of the mock point * * @function #init * @memberOf Highcharts.MockPoint# * * @param {Highcharts.Chart} chart - a chart object to which the mock point * is attached * @param {MockPointOptions} options - a config for the mock point */ init: function(chart, options) { var xAxisId = options.xAxis, xAxis = defined(xAxisId) ? chart.xAxis[xAxisId] || chart.get(xAxisId) : null, yAxisId = options.yAxis, yAxis = defined(yAxisId) ? chart.yAxis[yAxisId] || chart.get(yAxisId) : null; if (xAxis) { this.x = options.x; this.series.xAxis = xAxis; } else { this.plotX = options.x; } if (yAxis) { this.y = options.y; this.series.yAxis = yAxis; } else { this.plotY = options.y; } }, /** * Update of the point's coordinates (plotX/plotY) * * @function #translate * @memberOf Highcharts.MockPoint# * * @return {undefined} */ translate: function() { var series = this.series, xAxis = series.xAxis, yAxis = series.yAxis, plotX = this.plotX, plotY = this.plotY, isInside = true; if (xAxis) { this.plotX = plotX = xAxis.toPixels(this.x, true); isInside = plotX >= 0 && plotX <= xAxis.len; } if (yAxis) { this.plotY = plotY = yAxis.toPixels(this.y, true); isInside = isInside && plotY >= 0 && plotY <= yAxis.len; } this.isInside = isInside; }, /** * Returns a box to which an item can be aligned to * * @function #alignToBox * @memberOf Highcharts.MockPoint# * * @param {Boolean} [forceTranslate=false] - whether to update the point's * coordinates * @return {Array.} A quadruple of numbers which denotes x, y, * width and height of the box **/ alignToBox: function(forceTranslate) { if (forceTranslate) { this.translate(); } var x = this.plotX, y = this.plotY, temp; if (this.series.chart.inverted) { temp = x; x = y; y = temp; } return [x, y, 0, 0]; }, /** * Returns a label config object - * the same as Highcharts.Point.prototype.getLabelConfig * * @function #getLabelConfig * @memberOf Highcharts.MockPoint# * * @return {Object} labelConfig - label config object * @return {Number|undefined} labelConfig.x - x value translated to x axis scale * @return {Number|undefined} labelConfig.y - y value translated to y axis scale * @return {MockPoint} labelConfig.point - the instance of the point */ getLabelConfig: function() { return { x: this.x, y: this.y, point: this }; } }; /* *************************************************************************** * * ANNOTATION * **************************************************************************** */ H.defaultOptions.annotations = []; /** * An annotation class which serves as a container for items like labels or shapes. * Created items are positioned on the chart either by linking them to * existing points or created mock points * * @class Annotation * @memberOf Highcharts * * @param {Highcharts.Chart} - the chart object * @param {AnnotationOptions} - the options object */ var Annotation = H.Annotation = function(chart, userOptions) { this.chart = chart; this.labels = []; this.shapes = []; this.options = merge(this.defaultOptions, userOptions); this.init(chart, userOptions); }; Annotation.prototype = { /** * Shapes which do not have background - the object is used for proper * setting of the contrast color * * @memberOf Highcharts.Annotation# * @type {Array.} */ shapesWithoutBackground: ['connector'], /** * A map object which allows to map options attributes to element attributes * * @memberOf Highcharts.Annotation# * @type {Object} */ attrsMap: { backgroundColor: 'fill', borderColor: 'stroke', borderWidth: 'stroke-width', strokeWidth: 'stroke-width', stroke: 'stroke', fill: 'fill', zIndex: 'zIndex', width: 'width', height: 'height', borderRadius: 'r', r: 'r', padding: 'padding', dashStyle: 'dashstyle' }, /** * Options for configuring annotations, for example labels, arrows or * shapes. Annotations can be tied to points, axis coordinates or chart * pixel coordinates. * * @type {Array} * @sample highcharts/annotations/basic/ * Basic annotations * @sample {highstock} stock/annotations/fibonacci-retracements * Custom annotation, Fibonacci retracement * @since 6.0.0 * @optionparent annotations **/ defaultOptions: { /** * Whether the annotation is visible. * * @sample highcharts/annotations/visible/ * Set annotation visibility */ visible: true, /** * Options for annotation's labels. Each label inherits options * from the labelOptions object. An option from the labelOptions can be * overwritten by config for a specific label. */ labelOptions: { /** * The alignment of the annotation's label. If right, * the right side of the label should be touching the point. * * @validvalue ["left", "center", "right"] * @sample highcharts/annotations/label-position/ * Set labels position */ align: 'center', /** * Whether to allow the annotation's labels to overlap. * To make the labels less sensitive for overlapping, * the can be set to 0. * * @sample highcharts/annotations/tooltip-like/ * Hide overlapping labels */ allowOverlap: false, /** * The background color or gradient for the annotation's label. * * @type {Color} * @sample highcharts/annotations/label-presentation/ * Set labels graphic options */ backgroundColor: 'rgba(0, 0, 0, 0.75)', /** * The border color for the annotation's label. * * @type {Color} * @sample highcharts/annotations/label-presentation/ * Set labels graphic options */ borderColor: 'black', /** * The border radius in pixels for the annotaiton's label. * * @sample highcharts/annotations/label-presentation/ * Set labels graphic options */ borderRadius: 1, /** * The border width in pixels for the annotation's label * * @sample highcharts/annotations/label-presentation/ * Set labels graphic options */ borderWidth: 1, /** * Whether to hide the annotation's label that is outside the plot area. * * @sample highcharts/annotations/label-crop-overflow/ * Crop or justify labels */ crop: false, /** * A [format](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting) string for the data label. * * @type {String} * @see [plotOptions.series.dataLabels.format](plotOptions.series.dataLabels.format.html) * @sample highcharts/annotations/label-text/ * Set labels text * @default undefined * @apioption annotations.labelOptions.format **/ /** * Alias for the format option. * * @type {String} * @see [format](annotations.labelOptions.format.html) * @sample highcharts/annotations/label-text/ * Set labels text * @default undefined * @apioption annotations.labelOptions.text */ /** * Callback JavaScript function to format the annotation's label. Note that * if a `format` or `text` are defined, the format or text take precedence * and the formatter is ignored. `This` refers to a point object. * * @type {Function} * @sample highcharts/annotations/label-text/ * Set labels text * @default function () { * return defined(this.y) ? this.y : 'Annotation label'; * } **/ formatter: function() { return defined(this.y) ? this.y : 'Annotation label'; }, /** * How to handle the annotation's label that flow outside the plot * area. The justify option aligns the label inside the plot area. * * @validvalue ["none", "justify"] * @sample highcharts/annotations/label-crop-overflow/ * Crop or justify labels **/ overflow: 'justify', /** * When either the borderWidth or the backgroundColor is set, * this is the padding within the box. * * @sample highcharts/annotations/label-presentation/ * Set labels graphic options */ padding: 5, /** * The shadow of the box. The shadow can be an object configuration * containing `color`, `offsetX`, `offsetY`, `opacity` and `width`. * * @type {Boolean|Object} * @sample highcharts/annotations/label-presentation/ * Set labels graphic options */ shadow: false, /** * The name of a symbol to use for the border around the label. * Symbols are predefined functions on the Renderer object. * * @type {String} * @sample highcharts/annotations/shapes/ * Available shapes for labels **/ shape: 'callout', /** * Styles for the annotation's label. * * @type {CSSObject} * @sample highcharts/annotations/label-presentation/ * Set labels graphic options * @see [plotOptions.series.dataLabels.style](plotOptions.series.dataLabels.style.html) **/ style: { fontSize: '11px', fontWeight: 'normal', color: 'contrast' }, /** * Whether to [use HTML](http://www.highcharts.com/docs/chart-concepts/labels- * and-string-formatting#html) to render the annotation's label. * * @type {Boolean} * @default false **/ useHTML: false, /** * The vertical alignment of the annotation's label. * * @type {String} * @validvalue ["top", "middle", "bottom"] * @sample highcharts/annotations/label-position/ * Set labels position **/ verticalAlign: 'bottom', /** * The x position offset of the label relative to the point. * Note that if a `distance` is defined, the distance takes * precedence over `x` and `y` options. * * @sample highcharts/annotations/label-position/ * Set labels position **/ x: 0, /** * The y position offset of the label relative to the point. * Note that if a `distance` is defined, the distance takes * precedence over `x` and `y` options. * * @sample highcharts/annotations/label-position/ * Set labels position **/ y: -16 /** * The label's pixel distance from the point. * * @type {Number} * @sample highcharts/annotations/label-position/ * Set labels position * @default undefined * @apioption annotations.labelOptions.distance **/ }, /** * An array of labels for the annotation. For options that apply to multiple * labels, they can be added to the [labelOptions](annotations.labelOptions.html). * * @type {Array} * @extends annotations.labelOptions * @apioption annotations.labels */ /** * This option defines the point to which the label will be connected. * It can be either the point which exists in the series - it is referenced * by the point's id - or a new point with defined x, y properies * and optionally axes. * * @type {String|Object} * @sample highcharts/annotations/mock-point/ * Attach annotation to a mock point * @apioption annotations.labels.point */ /** * The x position of the point. Units can be either in axis * or chart pixel coordinates. * * @type {Number} * @apioption annotations.labels.point.x */ /** * The y position of the point. Units can be either in axis * or chart pixel coordinates. * * @type {Number} * @apioption annotations.labels.point.y */ /** * This number defines which xAxis the point is connected to. It refers * to either the axis id or the index of the axis in the xAxis array. * If the option is not configured or the axis is not found the point's * x coordinate refers to the chart pixels. * * @type {Number|String} * @apioption annotations.labels.point.xAxis */ /** * This number defines which yAxis the point is connected to. It refers * to either the axis id or the index of the axis in the yAxis array. * If the option is not configured or the axis is not found the point's * y coordinate refers to the chart pixels. * * @type {Number|String} * @apioption annotations.labels.point.yAxis */ /** * Options for annotation's shapes. Each shape inherits options * from the shapeOptions object. An option from the shapeOptions can be * overwritten by config for a specific shape. * * @type {Object} **/ shapeOptions: { /** * The color of the shape's stroke. * * @type {Color} * @sample highcharts/annotations/shape/ * Basic shape annotation **/ stroke: 'rgba(0, 0, 0, 0.75)', /** * The pixel stroke width of the shape. * * @sample highcharts/annotations/shape/ * Basic shape annotation **/ strokeWidth: 1, /** * The color of the shape's fill. * * @type {Color} * @sample highcharts/annotations/shape/ * Basic shape annotation **/ fill: 'rgba(0, 0, 0, 0.75)', /** * The type of the shape, e.g. circle or rectangle. * * @type {String} * @sample highcharts/annotations/shape/ * Basic shape annotation * @default 'rect' * @apioption annotations.shapeOptions.type **/ /** * The radius of the shape. * * @sample highcharts/annotations/shape/ * Basic shape annotation **/ r: 0 /** * The width of the shape. * * @type {Number} * @sample highcharts/annotations/shape/ * Basic shape annotation * @apioption annotations.shapeOptions.width **/ /** * The height of the shape. * * @type {Number} * @sample highcharts/annotations/shape/ * Basic shape annotation * @apioption annotations.shapeOptions.height **/ }, /** * The Z index of the annotation. * * @type {Number} * @default 6 **/ zIndex: 6 /** * An array of shapes for the annotation. For options that apply to multiple * shapes, then can be added to the [shapeOptions](annotations.shapeOptions.html). * * @type {Array} * @extends annotations.shapeOptions * @apioption annotations.shapes */ /** * This option defines the point to which the shape will be connected. * It can be either the point which exists in the series - it is referenced * by the point's id - or a new point with defined x, y properties * and optionally axes. * * @type {String|Object} * @extends annotations.labels.point * @apioption annotations.shapes.point */ /** * An array of points for the shape. This option is available for shapes * which can use multiple points such as path. A point can be either * a point object or a point's id. * * @type {Array} * @see [annotations.shapes.point](annotations.shapes.point.html) * @apioption annotations.shapes.points */ /** * Id of the marker which will be drawn at the final vertex of the path. * Custom markers can be defined in defs property. * * @type {String} * @see [defs.markers](defs.markers.html) * @sample highcharts/annotations/custom-markers/ * Define a custom marker for annotations * @apioption annotations.shapes.markerEnd **/ /** * Id of the marker which will be drawn at the first vertex of the path. * Custom markers can be defined in defs property. * * @type {String} * @see [defs.markers](defs.markers.html) * @sample {highcharts} highcharts/annotations/custom-markers/ * Define a custom marker for annotations * @apioption annotations.shapes.markerStart **/ }, /** * Annotation initialisation * * @function #init * @memberOf Highcharts.Annotation# * * @return {undefined} **/ init: function() { var anno = this; each(this.options.labels || [], this.initLabel, this); each(this.options.shapes || [], this.initShape, this); // Push the callback that reports to the overlapping-labels module which // labels it should account for. this.chart.labelCollectors.push(function() { var labels = []; each(anno.labels, function(label) { if (!label.options.allowOverlap) { labels.push(label); } }); return labels; }); }, /** * Main method for drawing an annotation, it is called everytime on chart redraw * and once on chart's load * * @function #redraw * @memberOf Highcharts.Annotation# * * @return {undefined} **/ redraw: function() { if (!this.group) { this.render(); } this.redrawItems(this.shapes); this.redrawItems(this.labels); }, /** * @function #redrawItems * @memberOf Highcharts.Annotation# * * @param {Array} items * @return {undefined} **/ redrawItems: function(items) { var i = items.length; // needs a backward loop // labels/shapes array might be modified due to destruction of the item while (i--) { this.redrawItem(items[i]); } }, /** * @function #render * @memberOf Highcharts.Annotation# * * @return {undefined} **/ render: function() { var renderer = this.chart.renderer; var group = this.group = renderer.g('annotation') .attr({ zIndex: this.options.zIndex, visibility: this.options.visible ? 'visible' : 'hidden' }) .add(); this.shapesGroup = renderer.g('annotation-shapes').add(group); this.labelsGroup = renderer.g('annotation-labels').attr({ // hideOverlappingLabels requires translation translateX: 0, translateY: 0 }).add(group); this.shapesGroup.clip(this.chart.plotBoxClip); }, /** * @function #setVisible * @memberOf Highcharts.Annotation# * * @param {Boolean} [visibility] - whether to show or hide an annotation. * If the param is omitted, the annotation's visibility is toggled * @return {undefined} **/ setVisible: function(visibility) { var options = this.options, visible = pick(visibility, !options.visible); this.group.attr({ visibility: visible ? 'visible' : 'hidden' }); options.visible = visible; }, /** * Destroying an annotation * * @function #destroy * @memberOf Highcharts.Annotation# * * @return {undefined} **/ destroy: function() { var chart = this.chart; each(this.labels, function(label) { label.destroy(); }); each(this.shapes, function(shape) { shape.destroy(); }); destroyObjectProperties(this, chart); }, /* *********************************************************************** * ITEM SECTION * Contains methods for handling a single item in an annotation *********************************************************************** */ /** * Initialisation of a single shape * * @function #initShape * @memberOf Highcharts.Annotation# * * @param {Object} shapeOptions - a confg object for a single shape * @return {undefined} **/ initShape: function(shapeOptions) { var renderer = this.chart.renderer, options = merge(this.options.shapeOptions, shapeOptions), attr = this.attrsFromOptions(options), type = renderer[options.type] ? options.type : 'rect', shape = renderer[type](0, -9e9, 0, 0); shape.points = []; shape.type = type; shape.options = options; shape.itemType = 'shape'; if (type === 'path') { extend(shape, { markerStartSetter: MarkerMixin.markerStartSetter, markerEndSetter: MarkerMixin.markerEndSetter, markerStart: MarkerMixin.markerStart, markerEnd: MarkerMixin.markerEnd }); } shape.attr(attr); this.shapes.push(shape); }, /** * Initialisation of a single label * * @function #initShape * @memberOf Highcharts.Annotation# * * @param {Object} labelOptions * @return {undefined} **/ initLabel: function(labelOptions) { var options = merge(this.options.labelOptions, labelOptions), style = options.style, attr = this.attrsFromOptions(options), label = this.chart.renderer.label( '', 0, -9e9, options.shape, null, null, options.useHTML, null, 'annotation-label' ); if (style.color === 'contrast') { style.color = this.chart.renderer.getContrast( inArray(options.shape, this.shapesWithoutBackground) > -1 ? '#FFFFFF' : options.backgroundColor ); } label.points = []; label.options = options; label.itemType = 'label'; // Labelrank required for hideOverlappingLabels() label.labelrank = options.labelrank; label.annotation = this; label.attr(attr).css(style).shadow(options.shadow); this.labels.push(label); }, /** * Redrawing a single item * * @function #redrawItem * @memberOf Highcharts.Annotation# * * @param {Object} item * @return {undefined} */ redrawItem: function(item) { var points = this.linkPoints(item), itemOptions = item.options, text; if (!points.length) { this.destroyItem(item); } else { if (!item.parentGroup) { this.renderItem(item); } if (item.itemType === 'label') { text = itemOptions.format || itemOptions.text; item.attr({ text: text ? format(text, points[0].getLabelConfig()) : itemOptions.formatter.call(points[0]) }); } if (item.type === 'path') { this.redrawPath(item); } else { this.alignItem(item, !item.placed); } } }, /** * Destroing a single item * * @function #destroyItem * @memberOf Highcharts.Annotation# * * @param {Object} item * @return {undefined} */ destroyItem: function(item) { // erase from shapes or labels array erase(this[item.itemType + 's'], item); item.destroy(); }, /** * Returns a point object * * @function #pointItem * @memberOf Highcharts.Annotation# * * @param {Object} pointOptions * @param {Highcharts.MockPoint|Highcharts.Point} point * @return {Highcharts.MockPoint|Highcharts.Point|null} if the point is * found/exists returns this point, otherwise null */ pointItem: function(pointOptions, point) { if (!point || point.series === null) { if (isObject(pointOptions)) { point = mockPoint(this.chart, pointOptions); } else if (isString(pointOptions)) { point = this.chart.get(pointOptions) || null; } } return point; }, /** * Linking item with the point or points and returning an array of linked points * * @function #linkPoints * @memberOf Highcharts.Annotation# * * @param {Object} item * @return { * Highcharts.Point| * Highcharts.MockPoint| * Array * } */ linkPoints: function(item) { var pointsOptions = item.options.points || (item.options.point && H.splat(item.options.point)), points = item.points, len = pointsOptions && pointsOptions.length, i, point; for (i = 0; i < len; i++) { point = this.pointItem(pointsOptions[i], points[i]); if (!point) { return (item.points = []); } points[i] = point; } return points; }, /** * Aligning the item and setting its anchor * * @function #alignItem * @memberOf Highcharts.Annotation# * * @param {Object} item * @param {Boolean} isNew - if the label is re-positioned (is not new) it is animated * @return {undefined} */ alignItem: function(item, isNew) { var anchor = this.itemAnchor(item, item.points[0]), attrs = this.itemPosition(item, anchor); if (attrs) { item.alignAttr = attrs; item.placed = true; attrs.anchorX = anchor.absolutePosition.x; attrs.anchorY = anchor.absolutePosition.y; item[isNew ? 'attr' : 'animate'](attrs); } else { item.placed = false; item.attr({ x: 0, y: -9e9 }); } }, redrawPath: function(pathItem, isNew) { var points = pathItem.points, strokeWidth = pathItem['stroke-width'], d = ['M'], pointIndex = 0, dIndex = 0, len = points && points.length, crispSegmentIndex, anchor, point, showPath; if (len) { do { point = points[pointIndex]; anchor = this.itemAnchor(pathItem, point).absolutePosition; d[++dIndex] = anchor.x; d[++dIndex] = anchor.y; // crisping line, it might be replaced with Renderer.prototype.crispLine // but it requires creating many temporary arrays crispSegmentIndex = dIndex % 5; if (crispSegmentIndex === 0) { if (d[crispSegmentIndex + 1] === d[crispSegmentIndex + 4]) { d[crispSegmentIndex + 1] = d[crispSegmentIndex + 4] = Math.round(d[crispSegmentIndex + 1]) - (strokeWidth % 2 / 2); } if (d[crispSegmentIndex + 2] === d[crispSegmentIndex + 5]) { d[crispSegmentIndex + 2] = d[crispSegmentIndex + 5] = Math.round(d[crispSegmentIndex + 2]) + (strokeWidth % 2 / 2); } } if (pointIndex < len - 1) { d[++dIndex] = 'L'; } showPath = point.series.visible; } while (++pointIndex < len && showPath); } if (showPath) { pathItem[isNew ? 'attr' : 'animate']({ d: d }); } else { pathItem.attr({ d: 'M 0 ' + -9e9 }); } pathItem.placed = showPath; }, renderItem: function(item) { item.add(item.itemType === 'label' ? this.labelsGroup : this.shapesGroup); this.setItemMarkers(item); }, setItemMarkers: function(item) { var itemOptions = item.options, chart = this.chart, markers = chart.options.defs.markers, fill = itemOptions.fill, color = defined(fill) && fill !== 'none' ? fill : itemOptions.stroke, setMarker = function(markerType) { var markerId = itemOptions[markerType], marker, predefinedMarker, key; if (markerId) { for (key in markers) { marker = markers[key]; if (markerId === marker.id) { predefinedMarker = marker; break; } } if (predefinedMarker) { marker = item[markerType] = chart.renderer.addMarker( null, merge(predefinedMarker, { color: color }) ); item.attr(markerType, marker.id); } } }; each(['markerStart', 'markerEnd'], setMarker); }, /** * An object which denotes an anchor position * * @typedef {Object} AnchorPosition * @property {Number} AnchorPosition.x * @property {Number} AnchorPosition.y * @property {Number} AnchorPosition.height * @property {Number} AnchorPosition.width */ /** * Returns object which denotes anchor position - relative and absolute * * @function #itemAnchor * @memberOf Highcharts.Annotation# * * @param {Object} item * @param {Highcharts.Point|Highcharts.MockPoint} point * @return {Object} anchor * @return {AnchorPosition} anchor.relativePosition - relative to the plot area position * @return {AnchorPosition} anchor.absolutePosition - absolute position */ itemAnchor: function(item, point) { var plotBox = point.series.getPlotBox(), box = point.mock ? point.alignToBox(true) : tooltipPrototype.getAnchor.call({ chart: this.chart }, point), anchor = { x: box[0], y: box[1], height: box[2] || 0, width: box[3] || 0 }; return { relativePosition: anchor, absolutePosition: merge(anchor, { x: anchor.x + plotBox.translateX, y: anchor.y + plotBox.translateY }) }; }, /** * Returns the item position * * @function #itemPosition * @memberOf Highcharts.Annotation# * * @param {Object} item * @param {AnchorPosition} anchor * @return {Object|null} position * @return {Number} position.x * @return {Number} position.y */ itemPosition: function(item, anchor) { var chart = this.chart, point = item.points[0], itemOptions = item.options, anchorAbsolutePosition = anchor.absolutePosition, anchorRelativePosition = anchor.relativePosition, itemPosition, alignTo, itemPosRelativeX, itemPosRelativeY, showItem = point.series.visible && point.isInside !== false; if (showItem) { if (defined(itemOptions.distance) || itemOptions.positioner) { itemPosition = (itemOptions.positioner || tooltipPrototype.getPosition).call({ chart: chart, distance: pick(itemOptions.distance, 16) }, item.width, item.height, { plotX: anchorRelativePosition.x, plotY: anchorRelativePosition.y, negative: point.negative, ttBelow: point.ttBelow, h: anchorRelativePosition.height || anchorRelativePosition.width } ); } else { alignTo = { x: anchorAbsolutePosition.x, y: anchorAbsolutePosition.y, width: 0, height: 0 }; itemPosition = this.alignedPosition( extend(itemOptions, { width: item.width, height: item.height }), alignTo ); if (item.options.overflow === 'justify') { itemPosition = this.alignedPosition( this.justifiedOptions(item, itemOptions, itemPosition), alignTo ); } } if (itemOptions.crop) { itemPosRelativeX = itemPosition.x - chart.plotLeft; itemPosRelativeY = itemPosition.y - chart.plotTop; showItem = chart.isInsidePlot(itemPosRelativeX, itemPosRelativeY) && chart.isInsidePlot( itemPosRelativeX + item.width, itemPosRelativeY + item.height ); } } return showItem ? itemPosition : null; }, /** * Returns new aligned position based alignment options and box to align to. * It is almost a one-to-one copy from SVGElement.prototype.align * except it does not use and mutate an element * * @function #alignedPosition * @memberOf Highcharts.Annotation# * * @param {Object} alignOptions * @param {Object} box * @return {Object} aligned position **/ alignedPosition: function(alignOptions, box) { var align = alignOptions.align, vAlign = alignOptions.verticalAlign, x = (box.x || 0) + (alignOptions.x || 0), y = (box.y || 0) + (alignOptions.y || 0), alignFactor, vAlignFactor; if (align === 'right') { alignFactor = 1; } else if (align === 'center') { alignFactor = 2; } if (alignFactor) { x += (box.width - (alignOptions.width || 0)) / alignFactor; } if (vAlign === 'bottom') { vAlignFactor = 1; } else if (vAlign === 'middle') { vAlignFactor = 2; } if (vAlignFactor) { y += (box.height - (alignOptions.height || 0)) / vAlignFactor; } return { x: Math.round(x), y: Math.round(y) }; }, /** * Returns new alignment options for a label if the label is outside the plot area. * It is almost a one-to-one copy from Series.prototype.justifyDataLabel * except it does not mutate the label and it works with absolute instead of relative position * * @function #justifiedOptions * @memberOf Highcharts.Annotation# * * @param {Object} label * @param {Object} alignOptions * @param {Object} alignAttr * @return {Object} justified options **/ justifiedOptions: function(label, alignOptions, alignAttr) { var chart = this.chart, align = alignOptions.align, verticalAlign = alignOptions.verticalAlign, padding = label.box ? 0 : (label.padding || 0), bBox = label.getBBox(), off, options = { align: align, verticalAlign: verticalAlign, x: alignOptions.x, y: alignOptions.y, width: label.width, height: label.height }, x = alignAttr.x - chart.plotLeft, y = alignAttr.y - chart.plotTop; // Off left off = x + padding; if (off < 0) { if (align === 'right') { options.align = 'left'; } else { options.x = -off; } } // Off right off = x + bBox.width - padding; if (off > chart.plotWidth) { if (align === 'left') { options.align = 'right'; } else { options.x = chart.plotWidth - off; } } // Off top off = y + padding; if (off < 0) { if (verticalAlign === 'bottom') { options.verticalAlign = 'top'; } else { options.y = -off; } } // Off bottom off = y + bBox.height - padding; if (off > chart.plotHeight) { if (verticalAlign === 'top') { options.verticalAlign = 'bottom'; } else { options.y = chart.plotHeight - off; } } return options; }, /** * Utility function for mapping item's options to element's attribute * * @function #attrsFromOptions * @memberOf Highcharts.Annotation# * * @param {Object} options * @return {Object} mapped options **/ attrsFromOptions: function(options) { var map = this.attrsMap, attrs = {}, key, mappedKey; for (key in options) { mappedKey = map[key]; if (mappedKey) { attrs[mappedKey] = options[key]; } } return attrs; } }; /* *************************************************************************** * * EXTENDING CHART PROTOTYPE * **************************************************************************** */ H.extend(chartPrototype, { addAnnotation: function(userOptions, redraw) { var annotation = new Annotation(this, userOptions); this.annotations.push(annotation); if (pick(redraw, true)) { annotation.redraw(); } return annotation; }, removeAnnotation: function(id) { var annotations = this.annotations, annotation = find(annotations, function(annotation) { return annotation.options.id === id; }); if (annotation) { erase(annotations, annotation); annotation.destroy(); } }, drawAnnotations: function() { var clip = this.plotBoxClip, plotBox = this.plotBox; if (clip) { clip.attr(plotBox); } else { this.plotBoxClip = this.renderer.clipRect(plotBox); } each(this.annotations, function(annotation) { annotation.redraw(); }); } }); chartPrototype.callbacks.push(function(chart) { chart.annotations = []; each(chart.options.annotations, function(annotationOptions) { chart.addAnnotation(annotationOptions, false); }); chart.drawAnnotations(); addEvent(chart, 'redraw', chart.drawAnnotations); addEvent(chart, 'destroy', function() { var plotBoxClip = chart.plotBoxClip; if (plotBoxClip && plotBoxClip.destroy) { plotBoxClip.destroy(); } }); }); H.wrap(chartPrototype, 'getContainer', function(p) { p.call(this); var renderer = this.renderer, options = this.options, key, markers, marker; options.defs = merge(options.defs || {}, { markers: defaultMarkers }); markers = options.defs.markers; for (key in markers) { marker = markers[key]; if (pick(marker.render, true)) { renderer.addMarker(marker.id, marker); } } }); /* ************************************************************************* */ /** * General symbol definition for labels with connector */ H.SVGRenderer.prototype.symbols.connector = function(x, y, w, h, options) { var anchorX = options && options.anchorX, anchorY = options && options.anchorY, path, yOffset, lateral = w / 2; if (isNumber(anchorX) && isNumber(anchorY)) { path = ['M', anchorX, anchorY]; // Prefer 45 deg connectors yOffset = y - anchorY; if (yOffset < 0) { yOffset = -h - yOffset; } if (yOffset < w) { lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset; } // Anchor below label if (anchorY > y + h) { path.push('L', x + lateral, y + h); // Anchor above label } else if (anchorY < y) { path.push('L', x + lateral, y); // Anchor left of label } else if (anchorX < x) { path.push('L', x, y + h / 2); // Anchor right of label } else if (anchorX > x + w) { path.push('L', x + w, y + h / 2); } } return path || []; }; }(Highcharts)); }));