highcharts
Version:
JavaScript charting framework
1,300 lines • 83.9 kB
JavaScript
/* *
*
* (c) 2010-2021 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
import A from '../../Animation/AnimationUtilities.js';
import AST from '../HTML/AST.js';
var animate = A.animate, animObject = A.animObject, stop = A.stop;
import Color from '../../Color/Color.js';
import H from '../../Globals.js';
var deg2rad = H.deg2rad, doc = H.doc, hasTouch = H.hasTouch, noop = H.noop, svg = H.svg, SVG_NS = H.SVG_NS, win = H.win;
import palette from '../../Color/Palette.js';
import U from '../../Utilities.js';
var attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, erase = U.erase, extend = U.extend, fireEvent = U.fireEvent, isArray = U.isArray, isFunction = U.isFunction, isNumber = U.isNumber, isString = U.isString, merge = U.merge, objectEach = U.objectEach, pick = U.pick, pInt = U.pInt, syncTimeout = U.syncTimeout, uniqueKey = U.uniqueKey;
/**
* The horizontal alignment of an element.
*
* @typedef {"center"|"left"|"right"} Highcharts.AlignValue
*/
/**
* Options to align the element relative to the chart or another box.
*
* @interface Highcharts.AlignObject
*/ /**
* Horizontal alignment. Can be one of `left`, `center` and `right`.
*
* @name Highcharts.AlignObject#align
* @type {Highcharts.AlignValue|undefined}
*
* @default left
*/ /**
* Vertical alignment. Can be one of `top`, `middle` and `bottom`.
*
* @name Highcharts.AlignObject#verticalAlign
* @type {Highcharts.VerticalAlignValue|undefined}
*
* @default top
*/ /**
* Horizontal pixel offset from alignment.
*
* @name Highcharts.AlignObject#x
* @type {number|undefined}
*
* @default 0
*/ /**
* Vertical pixel offset from alignment.
*
* @name Highcharts.AlignObject#y
* @type {number|undefined}
*
* @default 0
*/ /**
* Use the `transform` attribute with translateX and translateY custom
* attributes to align this elements rather than `x` and `y` attributes.
*
* @name Highcharts.AlignObject#alignByTranslate
* @type {boolean|undefined}
*
* @default false
*/
/**
* Bounding box of an element.
*
* @interface Highcharts.BBoxObject
* @extends Highcharts.PositionObject
*/ /**
* Height of the bounding box.
*
* @name Highcharts.BBoxObject#height
* @type {number}
*/ /**
* Width of the bounding box.
*
* @name Highcharts.BBoxObject#width
* @type {number}
*/ /**
* Horizontal position of the bounding box.
*
* @name Highcharts.BBoxObject#x
* @type {number}
*/ /**
* Vertical position of the bounding box.
*
* @name Highcharts.BBoxObject#y
* @type {number}
*/
/**
* An object of key-value pairs for SVG attributes. Attributes in Highcharts
* elements for the most parts correspond to SVG, but some are specific to
* Highcharts, like `zIndex`, `rotation`, `rotationOriginX`,
* `rotationOriginY`, `translateX`, `translateY`, `scaleX` and `scaleY`. SVG
* attributes containing a hyphen are _not_ camel-cased, they should be
* quoted to preserve the hyphen.
*
* @example
* {
* 'stroke': '#ff0000', // basic
* 'stroke-width': 2, // hyphenated
* 'rotation': 45 // custom
* 'd': ['M', 10, 10, 'L', 30, 30, 'z'] // path definition, note format
* }
*
* @interface Highcharts.SVGAttributes
*/ /**
* @name Highcharts.SVGAttributes#[key:string]
* @type {*}
*/ /**
* @name Highcharts.SVGAttributes#d
* @type {string|Highcharts.SVGPathArray|undefined}
*/ /**
* @name Highcharts.SVGAttributes#fill
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
*/ /**
* @name Highcharts.SVGAttributes#inverted
* @type {boolean|undefined}
*/ /**
* @name Highcharts.SVGAttributes#matrix
* @type {Array<number>|undefined}
*/ /**
* @name Highcharts.SVGAttributes#rotation
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#rotationOriginX
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#rotationOriginY
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#scaleX
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#scaleY
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#stroke
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
*/ /**
* @name Highcharts.SVGAttributes#style
* @type {string|Highcharts.CSSObject|undefined}
*/ /**
* @name Highcharts.SVGAttributes#translateX
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#translateY
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#zIndex
* @type {number|undefined}
*/
/**
* An SVG DOM element. The type is a reference to the regular SVGElement in the
* global scope.
*
* @typedef {globals.GlobalSVGElement} Highcharts.SVGDOMElement
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
*/
/**
* The vertical alignment of an element.
*
* @typedef {"bottom"|"middle"|"top"} Highcharts.VerticalAlignValue
*/
''; // detach doclets above
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* The SVGElement prototype is a JavaScript wrapper for SVG elements used in the
* rendering layer of Highcharts. Combined with the
* {@link Highcharts.SVGRenderer}
* object, these prototypes allow freeform annotation in the charts or even in
* HTML pages without instanciating a chart. The SVGElement can also wrap HTML
* labels, when `text` or `label` elements are created with the `useHTML`
* parameter.
*
* The SVGElement instances are created through factory functions on the
* {@link Highcharts.SVGRenderer}
* object, like
* {@link Highcharts.SVGRenderer#rect|rect},
* {@link Highcharts.SVGRenderer#path|path},
* {@link Highcharts.SVGRenderer#text|text},
* {@link Highcharts.SVGRenderer#label|label},
* {@link Highcharts.SVGRenderer#g|g}
* and more.
*
* @class
* @name Highcharts.SVGElement
*/
var SVGElement = /** @class */ (function () {
function SVGElement() {
/* *
*
* Properties
*
* */
this.element = void 0;
this.height = void 0;
this.opacity = 1; // Default base for animation
this.renderer = void 0;
this.SVG_NS = SVG_NS;
// Custom attributes used for symbols, these should be filtered out when
// setting SVGElement attributes (#9375).
this.symbolCustomAttribs = [
'x',
'y',
'width',
'height',
'r',
'start',
'end',
'innerR',
'anchorX',
'anchorY',
'rounded'
];
this.width = void 0;
}
/* *
*
* Functions
*
* */
/**
* Get the current value of an attribute or pseudo attribute,
* used mainly for animation. Called internally from
* the {@link Highcharts.SVGRenderer#attr} function.
*
* @private
* @function Highcharts.SVGElement#_defaultGetter
*
* @param {string} key
* Property key.
*
* @return {number|string}
* Property value.
*/
SVGElement.prototype._defaultGetter = function (key) {
var ret = pick(this[key + 'Value'], // align getter
this[key], this.element ? this.element.getAttribute(key) : null, 0);
if (/^[\-0-9\.]+$/.test(ret)) { // is numerical
ret = parseFloat(ret);
}
return ret;
};
/**
* @private
* @function Highcharts.SVGElement#_defaultSetter
*
* @param {string} value
*
* @param {string} key
*
* @param {Highcharts.SVGDOMElement} element
*
* @return {void}
*/
SVGElement.prototype._defaultSetter = function (value, key, element) {
element.setAttribute(key, value);
};
/**
* Add the element to the DOM. All elements must be added this way.
*
* @sample highcharts/members/renderer-g
* Elements added to a group
*
* @function Highcharts.SVGElement#add
*
* @param {Highcharts.SVGElement} [parent]
* The parent item to add it to. If undefined, the element is added
* to the {@link Highcharts.SVGRenderer.box}.
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.add = function (parent) {
var renderer = this.renderer, element = this.element, inserted;
if (parent) {
this.parentGroup = parent;
}
// Mark as inverted
this.parentInverted = parent && parent.inverted;
// Build formatted text
if (typeof this.textStr !== 'undefined' &&
this.element.nodeName === 'text' // Not for SVGLabel instances
) {
renderer.buildText(this);
}
// Mark as added
this.added = true;
// If we're adding to renderer root, or other elements in the group
// have a z index, we need to handle it
if (!parent || parent.handleZ || this.zIndex) {
inserted = this.zIndexSetter();
}
// If zIndex is not handled, append at the end
if (!inserted) {
(parent ?
parent.element :
renderer.box).appendChild(element);
}
// fire an event for internal hooks
if (this.onAdd) {
this.onAdd();
}
return this;
};
/**
* Add a class name to an element.
*
* @function Highcharts.SVGElement#addClass
*
* @param {string} className
* The new class name to add.
*
* @param {boolean} [replace=false]
* When true, the existing class name(s) will be overwritten with the new
* one. When false, the new one is added.
*
* @return {Highcharts.SVGElement}
* Return the SVG element for chainability.
*/
SVGElement.prototype.addClass = function (className, replace) {
var currentClassName = replace ? '' : (this.attr('class') || '');
// Trim the string and remove duplicates
className = (className || '')
.split(/ /g)
.reduce(function (newClassName, name) {
if (currentClassName.indexOf(name) === -1) {
newClassName.push(name);
}
return newClassName;
}, (currentClassName ?
[currentClassName] :
[]))
.join(' ');
if (className !== currentClassName) {
this.attr('class', className);
}
return this;
};
/**
* This method is executed in the end of `attr()`, after setting all
* attributes in the hash. In can be used to efficiently consolidate
* multiple attributes in one SVG property -- e.g., translate, rotate and
* scale are merged in one "transform" attribute in the SVG node.
*
* @private
* @function Highcharts.SVGElement#afterSetters
*/
SVGElement.prototype.afterSetters = function () {
// Update transform. Do this outside the loop to prevent redundant
// updating for batch setting of attributes.
if (this.doTransform) {
this.updateTransform();
this.doTransform = false;
}
};
/**
* Align the element relative to the chart or another box.
*
* @function Highcharts.SVGElement#align
*
* @param {Highcharts.AlignObject} [alignOptions]
* The alignment options. The function can be called without this
* parameter in order to re-align an element after the box has been
* updated.
*
* @param {boolean} [alignByTranslate]
* Align element by translation.
*
* @param {string|Highcharts.BBoxObject} [box]
* The box to align to, needs a width and height. When the box is a
* string, it refers to an object in the Renderer. For example, when
* box is `spacingBox`, it refers to `Renderer.spacingBox` which
* holds `width`, `height`, `x` and `y` properties.
*
* @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
*/
SVGElement.prototype.align = function (alignOptions, alignByTranslate, box) {
var align, vAlign, x, y, attribs = {}, alignTo, renderer = this.renderer, alignedObjects = renderer.alignedObjects, alignFactor, vAlignFactor;
// First call on instanciate
if (alignOptions) {
this.alignOptions = alignOptions;
this.alignByTranslate = alignByTranslate;
if (!box || isString(box)) {
this.alignTo = alignTo = box || 'renderer';
// prevent duplicates, like legendGroup after resize
erase(alignedObjects, this);
alignedObjects.push(this);
box = void 0; // reassign it below
}
// When called on resize, no arguments are supplied
}
else {
alignOptions = this.alignOptions;
alignByTranslate = this.alignByTranslate;
alignTo = this.alignTo;
}
box = pick(box, renderer[alignTo], renderer);
// Assign variables
align = alignOptions.align;
vAlign = alignOptions.verticalAlign;
// default: left align
x = (box.x || 0) + (alignOptions.x || 0);
// default: top align
y = (box.y || 0) + (alignOptions.y || 0);
// Align
if (align === 'right') {
alignFactor = 1;
}
else if (align === 'center') {
alignFactor = 2;
}
if (alignFactor) {
x += (box.width - (alignOptions.width || 0)) /
alignFactor;
}
attribs[alignByTranslate ? 'translateX' : 'x'] = Math.round(x);
// Vertical align
if (vAlign === 'bottom') {
vAlignFactor = 1;
}
else if (vAlign === 'middle') {
vAlignFactor = 2;
}
if (vAlignFactor) {
y += (box.height - (alignOptions.height || 0)) /
vAlignFactor;
}
attribs[alignByTranslate ? 'translateY' : 'y'] = Math.round(y);
// Animate only if already placed
this[this.placed ? 'animate' : 'attr'](attribs);
this.placed = true;
this.alignAttr = attribs;
return this;
};
/**
* @private
* @function Highcharts.SVGElement#alignSetter
* @param {"left"|"center"|"right"} value
*/
SVGElement.prototype.alignSetter = function (value) {
var convert = {
left: 'start',
center: 'middle',
right: 'end'
};
if (convert[value]) {
this.alignValue = value;
this.element.setAttribute('text-anchor', convert[value]);
}
};
/**
* Animate to given attributes or CSS properties.
*
* @sample highcharts/members/element-on/
* Setting some attributes by animation
*
* @function Highcharts.SVGElement#animate
*
* @param {Highcharts.SVGAttributes} params
* SVG attributes or CSS to animate.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [options]
* Animation options.
*
* @param {Function} [complete]
* Function to perform at the end of animation.
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.animate = function (params, options, complete) {
var _this = this;
var animOptions = animObject(pick(options, this.renderer.globalAnimation, true)), deferTime = animOptions.defer;
// When the page is hidden save resources in the background by not
// running animation at all (#9749).
if (pick(doc.hidden, doc.msHidden, doc.webkitHidden, false)) {
animOptions.duration = 0;
}
if (animOptions.duration !== 0) {
// allows using a callback with the global animation without
// overwriting it
if (complete) {
animOptions.complete = complete;
}
// If defer option is defined delay the animation #12901
syncTimeout(function () {
if (_this.element) {
animate(_this, params, animOptions);
}
}, deferTime);
}
else {
this.attr(params, void 0, complete);
// Call the end step synchronously
objectEach(params, function (val, prop) {
if (animOptions.step) {
animOptions.step.call(this, val, { prop: prop, pos: 1, elem: this });
}
}, this);
}
return this;
};
/**
* Apply a text outline through a custom CSS property, by copying the text
* element and apply stroke to the copy. Used internally. Contrast checks at
* [example](https://jsfiddle.net/highcharts/43soe9m1/2/).
*
* @example
* // Specific color
* text.css({
* textOutline: '1px black'
* });
* // Automatic contrast
* text.css({
* color: '#000000', // black text
* textOutline: '1px contrast' // => white outline
* });
*
* @private
* @function Highcharts.SVGElement#applyTextOutline
*
* @param {string} textOutline
* A custom CSS `text-outline` setting, defined by `width color`.
*/
SVGElement.prototype.applyTextOutline = function (textOutline) {
var elem = this.element, hasContrast = textOutline.indexOf('contrast') !== -1, styles = {};
// When the text shadow is set to contrast, use dark stroke for light
// text and vice versa.
if (hasContrast) {
styles.textOutline = textOutline = textOutline.replace(/contrast/g, this.renderer.getContrast(elem.style.fill));
}
// Extract the stroke width and color
var parts = textOutline.split(' ');
var color = parts[parts.length - 1];
var strokeWidth = parts[0];
if (strokeWidth && strokeWidth !== 'none' && H.svg) {
this.fakeTS = true; // Fake text shadow
// In order to get the right y position of the clone,
// copy over the y setter
this.ySetter = this.xSetter;
// Since the stroke is applied on center of the actual outline, we
// need to double it to get the correct stroke-width outside the
// glyphs.
strokeWidth = strokeWidth.replace(/(^[\d\.]+)(.*?)$/g, function (match, digit, unit) {
return (2 * Number(digit)) + unit;
});
// Remove shadows from previous runs.
this.removeTextOutline();
var outline_1 = doc.createElementNS(SVG_NS, 'tspan');
attr(outline_1, {
'class': 'highcharts-text-outline',
fill: color,
stroke: color,
'stroke-width': strokeWidth,
'stroke-linejoin': 'round'
});
// For each of the tspans and text nodes, create a copy in the
// outline.
[].forEach.call(elem.childNodes, function (childNode) {
var clone = childNode.cloneNode(true);
if (clone.removeAttribute) {
['fill', 'stroke', 'stroke-width', 'stroke'].forEach(function (prop) { return clone.removeAttribute(prop); });
}
outline_1.appendChild(clone);
});
// Insert an absolutely positioned break before the original text
// to keep it in place
var br = doc.createElementNS(SVG_NS, 'tspan');
br.textContent = '\u200B';
attr(br, {
x: elem.getAttribute('x'),
y: elem.getAttribute('y')
});
// Insert the outline
outline_1.appendChild(br);
elem.insertBefore(outline_1, elem.firstChild);
}
};
/**
* @function Highcharts.SVGElement#attr
* @param {string} key
* @return {number|string}
*/ /**
* Apply native and custom attributes to the SVG elements.
*
* In order to set the rotation center for rotation, set x and y to 0 and
* use `translateX` and `translateY` attributes to position the element
* instead.
*
* Attributes frequently used in Highcharts are `fill`, `stroke`,
* `stroke-width`.
*
* @sample highcharts/members/renderer-rect/
* Setting some attributes
*
* @example
* // Set multiple attributes
* element.attr({
* stroke: 'red',
* fill: 'blue',
* x: 10,
* y: 10
* });
*
* // Set a single attribute
* element.attr('stroke', 'red');
*
* // Get an attribute
* element.attr('stroke'); // => 'red'
*
* @function Highcharts.SVGElement#attr
*
* @param {string|Highcharts.SVGAttributes} [hash]
* The native and custom SVG attributes.
*
* @param {number|string|Highcharts.SVGPathArray} [val]
* If the type of the first argument is `string`, the second can be a
* value, which will serve as a single attribute setter. If the first
* argument is a string and the second is undefined, the function
* serves as a getter and the current value of the property is
* returned.
*
* @param {Function} [complete]
* A callback function to execute after setting the attributes. This
* makes the function compliant and interchangeable with the
* {@link SVGElement#animate} function.
*
* @param {boolean} [continueAnimation=true]
* Used internally when `.attr` is called as part of an animation
* step. Otherwise, calling `.attr` for an attribute will stop
* animation for that attribute.
*
* @return {Highcharts.SVGElement}
* If used as a setter, it returns the current
* {@link Highcharts.SVGElement} so the calls can be chained. If
* used as a getter, the current value of the attribute is returned.
*/
SVGElement.prototype.attr = function (hash, val, complete, continueAnimation) {
var key, element = this.element, hasSetSymbolSize, ret = this, skipAttr, setter, symbolCustomAttribs = this.symbolCustomAttribs;
// single key-value pair
if (typeof hash === 'string' && typeof val !== 'undefined') {
key = hash;
hash = {};
hash[key] = val;
}
// used as a getter: first argument is a string, second is undefined
if (typeof hash === 'string') {
ret = (this[hash + 'Getter'] ||
this._defaultGetter).call(this, hash, element);
// setter
}
else {
objectEach(hash, function eachAttribute(val, key) {
skipAttr = false;
// Unless .attr is from the animator update, stop current
// running animation of this property
if (!continueAnimation) {
stop(this, key);
}
// Special handling of symbol attributes
if (this.symbolName &&
symbolCustomAttribs.indexOf(key) !== -1) {
if (!hasSetSymbolSize) {
this.symbolAttr(hash);
hasSetSymbolSize = true;
}
skipAttr = true;
}
if (this.rotation && (key === 'x' || key === 'y')) {
this.doTransform = true;
}
if (!skipAttr) {
setter = (this[key + 'Setter'] ||
this._defaultSetter);
setter.call(this, val, key, element);
// Let the shadow follow the main element
if (!this.styledMode &&
this.shadows &&
/^(width|height|visibility|x|y|d|transform|cx|cy|r)$/.test(key)) {
this.updateShadows(key, val, setter);
}
}
}, this);
this.afterSetters();
}
// In accordance with animate, run a complete callback
if (complete) {
complete.call(this);
}
return ret;
};
/**
* Apply a clipping rectangle to this element.
*
* @function Highcharts.SVGElement#clip
*
* @param {Highcharts.ClipRectElement} [clipRect]
* The clipping rectangle. If skipped, the current clip is removed.
*
* @return {Highcharts.SVGElement}
* Returns the SVG element to allow chaining.
*/
SVGElement.prototype.clip = function (clipRect) {
return this.attr('clip-path', clipRect ?
'url(' + this.renderer.url + '#' + clipRect.id + ')' :
'none');
};
/**
* Calculate the coordinates needed for drawing a rectangle crisply and
* return the calculated attributes.
*
* @function Highcharts.SVGElement#crisp
*
* @param {Highcharts.RectangleObject} rect
* Rectangle to crisp.
*
* @param {number} [strokeWidth]
* The stroke width to consider when computing crisp positioning. It can
* also be set directly on the rect parameter.
*
* @return {Highcharts.RectangleObject}
* The modified rectangle arguments.
*/
SVGElement.prototype.crisp = function (rect, strokeWidth) {
var wrapper = this, normalizer;
strokeWidth = strokeWidth || rect.strokeWidth || 0;
// Math.round because strokeWidth can sometimes have roundoff errors
normalizer = Math.round(strokeWidth) % 2 / 2;
// normalize for crisp edges
rect.x = Math.floor(rect.x || wrapper.x || 0) + normalizer;
rect.y = Math.floor(rect.y || wrapper.y || 0) + normalizer;
rect.width = Math.floor((rect.width || wrapper.width || 0) - 2 * normalizer);
rect.height = Math.floor((rect.height || wrapper.height || 0) - 2 * normalizer);
if (defined(rect.strokeWidth)) {
rect.strokeWidth = strokeWidth;
}
return rect;
};
/**
* Build and apply an SVG gradient out of a common JavaScript configuration
* object. This function is called from the attribute setters. An event
* hook is added for supporting other complex color types.
*
* @private
* @function Highcharts.SVGElement#complexColor
*
* @param {Highcharts.GradientColorObject|Highcharts.PatternObject} colorOptions
* The gradient or pattern options structure.
*
* @param {string} prop
* The property to apply, can either be `fill` or `stroke`.
*
* @param {Highcharts.SVGDOMElement} elem
* SVG element to apply the gradient on.
*/
SVGElement.prototype.complexColor = function (colorOptions, prop, elem) {
var renderer = this.renderer, colorObject, gradName, gradAttr, radAttr, gradients, stops, stopColor, stopOpacity, radialReference, id, key = [], value;
fireEvent(this.renderer, 'complexColor', {
args: arguments
}, function () {
// Apply linear or radial gradients
if (colorOptions.radialGradient) {
gradName = 'radialGradient';
}
else if (colorOptions.linearGradient) {
gradName = 'linearGradient';
}
if (gradName) {
gradAttr = colorOptions[gradName];
gradients = renderer.gradients;
stops = colorOptions.stops;
radialReference = elem.radialReference;
// Keep < 2.2 kompatibility
if (isArray(gradAttr)) {
colorOptions[gradName] = gradAttr = {
x1: gradAttr[0],
y1: gradAttr[1],
x2: gradAttr[2],
y2: gradAttr[3],
gradientUnits: 'userSpaceOnUse'
};
}
// Correct the radial gradient for the radial reference system
if (gradName === 'radialGradient' &&
radialReference &&
!defined(gradAttr.gradientUnits)) {
// Save the radial attributes for updating
radAttr = gradAttr;
gradAttr = merge(gradAttr, renderer.getRadialAttr(radialReference, radAttr), { gradientUnits: 'userSpaceOnUse' });
}
// Build the unique key to detect whether we need to create a
// new element (#1282)
objectEach(gradAttr, function (val, n) {
if (n !== 'id') {
key.push(n, val);
}
});
objectEach(stops, function (val) {
key.push(val);
});
key = key.join(',');
// Check if a gradient object with the same config object is
// created within this renderer
if (gradients[key]) {
id = gradients[key].attr('id');
}
else {
// Set the id and create the element
gradAttr.id = id = uniqueKey();
var gradientObject_1 = gradients[key] =
renderer.createElement(gradName)
.attr(gradAttr)
.add(renderer.defs);
gradientObject_1.radAttr = radAttr;
// The gradient needs to keep a list of stops to be able to
// destroy them
gradientObject_1.stops = [];
stops.forEach(function (stop) {
var stopObject;
if (stop[1].indexOf('rgba') === 0) {
colorObject = Color.parse(stop[1]);
stopColor = colorObject.get('rgb');
stopOpacity = colorObject.get('a');
}
else {
stopColor = stop[1];
stopOpacity = 1;
}
stopObject = renderer.createElement('stop').attr({
offset: stop[0],
'stop-color': stopColor,
'stop-opacity': stopOpacity
}).add(gradientObject_1);
// Add the stop element to the gradient
gradientObject_1.stops.push(stopObject);
});
}
// Set the reference to the gradient object
value = 'url(' + renderer.url + '#' + id + ')';
elem.setAttribute(prop, value);
elem.gradient = key;
// Allow the color to be concatenated into tooltips formatters
// etc. (#2995)
colorOptions.toString = function () {
return value;
};
}
});
};
/**
* Set styles for the element. In addition to CSS styles supported by
* native SVG and HTML elements, there are also some custom made for
* Highcharts, like `width`, `ellipsis` and `textOverflow` for SVG text
* elements.
*
* @sample highcharts/members/renderer-text-on-chart/
* Styled text
*
* @function Highcharts.SVGElement#css
*
* @param {Highcharts.CSSObject} styles
* The new CSS styles.
*
* @return {Highcharts.SVGElement}
* Return the SVG element for chaining.
*/
SVGElement.prototype.css = function (styles) {
var oldStyles = this.styles, newStyles = {}, elem = this.element, textWidth, serializedCss = '', hyphenate, hasNew = !oldStyles,
// These CSS properties are interpreted internally by the SVG
// renderer, but are not supported by SVG and should not be added to
// the DOM. In styled mode, no CSS should find its way to the DOM
// whatsoever (#6173, #6474).
svgPseudoProps = ['textOutline', 'textOverflow', 'width'];
// convert legacy
if (styles && styles.color) {
styles.fill = styles.color;
}
// Filter out existing styles to increase performance (#2640)
if (oldStyles) {
objectEach(styles, function (style, n) {
if (oldStyles && oldStyles[n] !== style) {
newStyles[n] = style;
hasNew = true;
}
});
}
if (hasNew) {
// Merge the new styles with the old ones
if (oldStyles) {
styles = extend(oldStyles, newStyles);
}
// Get the text width from style
if (styles) {
// Previously set, unset it (#8234)
if (styles.width === null || styles.width === 'auto') {
delete this.textWidth;
// Apply new
}
else if (elem.nodeName.toLowerCase() === 'text' &&
styles.width) {
textWidth = this.textWidth = pInt(styles.width);
}
}
// store object
this.styles = styles;
if (textWidth && (!svg && this.renderer.forExport)) {
delete styles.width;
}
// Serialize and set style attribute
if (elem.namespaceURI === this.SVG_NS) { // #7633
hyphenate = function (a, b) {
return '-' + b.toLowerCase();
};
objectEach(styles, function (style, n) {
if (svgPseudoProps.indexOf(n) === -1) {
serializedCss +=
n.replace(/([A-Z])/g, hyphenate) + ':' +
style + ';';
}
});
if (serializedCss) {
attr(elem, 'style', serializedCss); // #1881
}
}
else {
css(elem, styles);
}
if (this.added) {
// Rebuild text after added. Cache mechanisms in the buildText
// will prevent building if there are no significant changes.
if (this.element.nodeName === 'text') {
this.renderer.buildText(this);
}
// Apply text outline after added
if (styles && styles.textOutline) {
this.applyTextOutline(styles.textOutline);
}
}
}
return this;
};
/**
* @private
* @function Highcharts.SVGElement#dashstyleSetter
* @param {string} value
*/
SVGElement.prototype.dashstyleSetter = function (value) {
var i, strokeWidth = this['stroke-width'];
// If "inherit", like maps in IE, assume 1 (#4981). With HC5 and the new
// strokeWidth function, we should be able to use that instead.
if (strokeWidth === 'inherit') {
strokeWidth = 1;
}
value = value && value.toLowerCase();
if (value) {
var v = value
.replace('shortdashdotdot', '3,1,1,1,1,1,')
.replace('shortdashdot', '3,1,1,1')
.replace('shortdot', '1,1,')
.replace('shortdash', '3,1,')
.replace('longdash', '8,3,')
.replace(/dot/g, '1,3,')
.replace('dash', '4,3,')
.replace(/,$/, '')
.split(','); // ending comma
i = v.length;
while (i--) {
v[i] = '' + (pInt(v[i]) * pick(strokeWidth, NaN));
}
value = v.join(',').replace(/NaN/g, 'none'); // #3226
this.element.setAttribute('stroke-dasharray', value);
}
};
/**
* Destroy the element and element wrapper and clear up the DOM and event
* hooks.
*
* @function Highcharts.SVGElement#destroy
*/
SVGElement.prototype.destroy = function () {
var wrapper = this, element = wrapper.element || {}, renderer = wrapper.renderer, parentToClean = (renderer.isSVG &&
element.nodeName === 'SPAN' &&
wrapper.parentGroup ||
void 0), grandParent, ownerSVGElement = element.ownerSVGElement, i;
// remove events
element.onclick = element.onmouseout = element.onmouseover =
element.onmousemove = element.point = null;
stop(wrapper); // stop running animations
if (wrapper.clipPath && ownerSVGElement) {
var clipPath_1 = wrapper.clipPath;
// Look for existing references to this clipPath and remove them
// before destroying the element (#6196).
// The upper case version is for Edge
[].forEach.call(ownerSVGElement.querySelectorAll('[clip-path],[CLIP-PATH]'), function (el) {
var clipPathAttr = el.getAttribute('clip-path');
if (clipPathAttr.indexOf(clipPath_1.element.id) > -1) {
el.removeAttribute('clip-path');
}
});
wrapper.clipPath = clipPath_1.destroy();
}
// Destroy stops in case this is a gradient object @todo old code?
if (wrapper.stops) {
for (i = 0; i < wrapper.stops.length; i++) {
wrapper.stops[i].destroy();
}
wrapper.stops.length = 0;
wrapper.stops = void 0;
}
// remove element
wrapper.safeRemoveChild(element);
if (!renderer.styledMode) {
wrapper.destroyShadows();
}
// In case of useHTML, clean up empty containers emulating SVG groups
// (#1960, #2393, #2697).
while (parentToClean &&
parentToClean.div &&
parentToClean.div.childNodes.length === 0) {
grandParent = parentToClean.parentGroup;
wrapper.safeRemoveChild(parentToClean.div);
delete parentToClean.div;
parentToClean = grandParent;
}
// remove from alignObjects
if (wrapper.alignTo) {
erase(renderer.alignedObjects, wrapper);
}
objectEach(wrapper, function (val, key) {
// Destroy child elements of a group
if (wrapper[key] &&
wrapper[key].parentGroup === wrapper &&
wrapper[key].destroy) {
wrapper[key].destroy();
}
// Delete all properties
delete wrapper[key];
});
return;
};
/**
* Destroy shadows on the element.
*
* @private
* @function Highcharts.SVGElement#destroyShadows
*
* @return {void}
*/
SVGElement.prototype.destroyShadows = function () {
(this.shadows || []).forEach(function (shadow) {
this.safeRemoveChild(shadow);
}, this);
this.shadows = void 0;
};
/**
* @private
*/
SVGElement.prototype.destroyTextPath = function (elem, path) {
var textElement = elem.getElementsByTagName('text')[0];
var childNodes;
if (textElement) {
// Remove textPath attributes
textElement.removeAttribute('dx');
textElement.removeAttribute('dy');
// Remove ID's:
path.element.setAttribute('id', '');
// Check if textElement includes textPath,
if (this.textPathWrapper &&
textElement.getElementsByTagName('textPath').length) {
// Move nodes to <text>
childNodes = this.textPathWrapper.element.childNodes;
// Now move all <tspan>'s and text nodes to the <textPath> node
while (childNodes.length) {
textElement.appendChild(childNodes[0]);
}
// Remove <textPath> from the DOM
textElement.removeChild(this.textPathWrapper.element);
}
}
else if (elem.getAttribute('dx') || elem.getAttribute('dy')) {
// Remove textPath attributes from elem
// to get correct text-outline position
elem.removeAttribute('dx');
elem.removeAttribute('dy');
}
if (this.textPathWrapper) {
// Set textPathWrapper to undefined and destroy it
this.textPathWrapper = this.textPathWrapper.destroy();
}
};
/**
* @private
* @function Highcharts.SVGElement#dSettter
* @param {number|string|Highcharts.SVGPathArray} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype.dSetter = function (value, key, element) {
if (isArray(value)) {
// Backwards compatibility, convert one-dimensional array into an
// array of segments
if (typeof value[0] === 'string') {
value = this.renderer.pathToSegments(value);
}
this.pathArray = value;
value = value.reduce(function (acc, seg, i) {
if (!seg || !seg.join) {
return (seg || '').toString();
}
return (i ? acc + ' ' : '') + seg.join(' ');
}, '');
}
if (/(NaN| {2}|^$)/.test(value)) {
value = 'M 0 0';
}
// Check for cache before resetting. Resetting causes disturbance in the
// DOM, causing flickering in some cases in Edge/IE (#6747). Also
// possible performance gain.
if (this[key] !== value) {
element.setAttribute(key, value);
this[key] = value;
}
};
/**
* Fade out an element by animating its opacity down to 0, and hide it on
* complete. Used internally for the tooltip.
*
* @function Highcharts.SVGElement#fadeOut
*
* @param {number} [duration=150]
* The fade duration in milliseconds.
*/
SVGElement.prototype.fadeOut = function (duration) {
var elemWrapper = this;
elemWrapper.animate({
opacity: 0
}, {
duration: pick(duration, 150),
complete: function () {
// #3088, assuming we're only using this for tooltips
elemWrapper.attr({ y: -9999 }).hide();
}
});
};
/**
* @private
* @function Highcharts.SVGElement#fillSetter
* @param {Highcharts.ColorType} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype.fillSetter = function (value, key, element) {
if (typeof value === 'string') {
element.setAttribute(key, value);
}
else if (value) {
this.complexColor(value, key, element);
}
};
/**
* Get the bounding box (width, height, x and y) for the element. Generally
* used to get rendered text size. Since this is called a lot in charts,
* the results are cached based on text properties, in order to save DOM
* traffic. The returned bounding box includes the rotation, so for example
* a single text line of rotation 90 will report a greater height, and a
* width corresponding to the line-height.
*
* @sample highcharts/members/renderer-on-chart/
* Draw a rectangle based on a text's bounding box
*
* @function Highcharts.SVGElement#getBBox
*
* @param {boolean} [reload]
* Skip the cache and get the updated DOM bouding box.
*
* @param {number} [rot]
* Override the element's rotation. This is internally used on axis
* labels with a value of 0 to find out what the bounding box would
* be have been if it were not rotated.
*
* @return {Highcharts.BBoxObject}
* The bounding box with `x`, `y`, `width` and `height` properties.
*/
SVGElement.prototype.getBBox = function (reload, rot) {
var wrapper = this, bBox, // = wrapper.bBox,
renderer = wrapper.renderer, width, height, element = wrapper.element, styles = wrapper.styles, fontSize, textStr = wrapper.textStr, toggleTextShadowShim, cache = renderer.cache, cacheKeys = renderer.cacheKeys, isSVG = element.namespaceURI === wrapper.SVG_NS, cacheKey;
var rotation = pick(rot, wrapper.rotation, 0);
fontSize = renderer.styledMode ? (element &&
SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles && styles.fontSize);
// Avoid undefined and null (#7316)
if (defined(textStr)) {
cacheKey = textStr.toString();
// Since numbers are monospaced, and numerical labels appear a lot
// in a chart, we assume that a label of n characters has the same
// bounding box as others of the same length. Unless there is inner
// HTML in the label. In that case, leave the numbers as is (#5899).
if (cacheKey.indexOf('<') === -1) {
cacheKey = cacheKey.replace(/[0-9]/g, '0');
}
// Properties that affect bounding box
cacheKey += [
'',
rotation,
fontSize,
wrapper.textWidth,
styles && styles.textOverflow,
styles && styles.fontWeight // #12163
].join(',');
}
if (cacheKey && !reload) {
bBox = cache[cacheKey];
}
// No cache found
if (!bBox) {
// SVG elements
if (isSVG || renderer.forExport) {
try { // Fails in Firefox if the container has display: none.
// When the text shadow shim is used, we need to hide the
// fake shadows to get the correct bounding box (#3872)
toggleTextShadowShim = this.fakeTS && function (display) {
var outline = element.querySelector('.highcharts-text-outline');
if (outline) {
css(outline, { display: display });
}
};
// Workaround for #3842, Firefox reporting wrong bounding
// box for shadows
if (isFunction(toggleTextShadowShim)) {
toggleTextShadowShim('none');
}
bBox = element.getBBox ?
// SVG: use extend because IE9 is not allowed to change
// width and height in case of rotation (below)
extend({}, element.getBBox()) : {
// Legacy IE in export mode
width: element.offsetWidth,
height: element.offsetHeight
};
// #3842
if (isFunction(toggleTextShadowShim)) {
toggleTextShadowShim('');
}
}
catch (e) {
'';
}
// If the bBox is not set, the try-catch block above failed. The
// other condition is for Opera that returns a width of
// -Infinity on hidden elements.
if (!bBox || bBox.width < 0) {
bBox = { width: 0, height: 0 };
}
// VML Renderer or useHTML within SVG
}
else {
bBox = wrapper.htmlGetBBox();
}
// True SVG elements as well as HTML elements in modern browsers
// using the .useHTML option need to compensated for rotation
if (renderer.isSVG) {
width = bBox.width;
height = bBox.height;
// Workaround for wrong bounding box in IE, Edge and Chrome on
// Windows. With Highcharts' default font, IE and Edge report
// a box height of 16.899 and Chrome rounds it to 17. If this
// stands uncorrected, it results in more padding added below
// the text than above when adding a label border or background.
// Also vertical positioning is affected.
// https://jsfiddle.net/highcharts/em37nvuj/
// (#1101, #1505, #1669, #2568, #6213).
if (isSVG) {
bBox.height = height = ({
'11px,17': 14,
'13px,20': 16
}[styles &&
styles.fontSize + ',' + Math.round(height)] ||
height);
}
// Adjust for rotated text
if (rotation) {
var rad = rotation * deg2rad;
bBox.width = Math.abs(height * Math.sin(rad)) +
Math.abs(width * Math.cos(rad));
bBox.height = Math.abs(height * Math.cos(rad)) +
Math.abs(width * Math.sin(rad));
}
}
// Cache it. When loading a chart in a hidden iframe in Firefox and
// IE/Edge, the bounding box height is 0, so don't cache it (#5620).
if (cacheKey && bBox.height > 0) {
// Rotate (#4681)
while (cacheKeys.length > 250) {
delete cache[cacheKeys.shift()];
}
if (!cache[cacheKey]) {
cacheKey