@29aries/apexcharts
Version:
Interactive JavaScript Charts built on SVG - forked by 29aries to allow custom labels - forked from 3.20.0
1,566 lines (1,373 loc) • 1.04 MB
JavaScript
/*!
* ApexCharts v1.1.18
* (c) 2018-2020 Juned Chhipa
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.ApexCharts = factory());
}(this, (function () { 'use strict';
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
/*
** Generic functions which are not dependent on ApexCharts
*/
var Utils = /*#__PURE__*/function () {
function Utils() {
_classCallCheck(this, Utils);
}
_createClass(Utils, [{
key: "shadeRGBColor",
value: function shadeRGBColor(percent, color) {
var f = color.split(','),
t = percent < 0 ? 0 : 255,
p = percent < 0 ? percent * -1 : percent,
R = parseInt(f[0].slice(4), 10),
G = parseInt(f[1], 10),
B = parseInt(f[2], 10);
return 'rgb(' + (Math.round((t - R) * p) + R) + ',' + (Math.round((t - G) * p) + G) + ',' + (Math.round((t - B) * p) + B) + ')';
}
}, {
key: "shadeHexColor",
value: function shadeHexColor(percent, color) {
var f = parseInt(color.slice(1), 16),
t = percent < 0 ? 0 : 255,
p = percent < 0 ? percent * -1 : percent,
R = f >> 16,
G = f >> 8 & 0x00ff,
B = f & 0x0000ff;
return '#' + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
} // beautiful color shading blending code
// http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
}, {
key: "shadeColor",
value: function shadeColor(p, color) {
if (Utils.isColorHex(color)) {
return this.shadeHexColor(p, color);
} else {
return this.shadeRGBColor(p, color);
}
}
}], [{
key: "bind",
value: function bind(fn, me) {
return function () {
return fn.apply(me, arguments);
};
}
}, {
key: "isObject",
value: function isObject(item) {
return item && _typeof(item) === 'object' && !Array.isArray(item) && item != null;
}
}, {
key: "listToArray",
value: function listToArray(list) {
var i,
array = [];
for (i = 0; i < list.length; i++) {
array[i] = list[i];
}
return array;
} // to extend defaults with user options
// credit: http://stackoverflow.com/questions/27936772/deep-object-merging-in-es6-es7#answer-34749873
}, {
key: "extend",
value: function extend(target, source) {
var _this = this;
if (typeof Object.assign !== 'function') {
(function () {
Object.assign = function (target) {
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var output = Object(target);
for (var index = 1; index < arguments.length; index++) {
var _source = arguments[index];
if (_source !== undefined && _source !== null) {
for (var nextKey in _source) {
if (_source.hasOwnProperty(nextKey)) {
output[nextKey] = _source[nextKey];
}
}
}
}
return output;
};
})();
}
var output = Object.assign({}, target);
if (this.isObject(target) && this.isObject(source)) {
Object.keys(source).forEach(function (key) {
if (_this.isObject(source[key])) {
if (!(key in target)) {
Object.assign(output, _defineProperty({}, key, source[key]));
} else {
output[key] = _this.extend(target[key], source[key]);
}
} else {
Object.assign(output, _defineProperty({}, key, source[key]));
}
});
}
return output;
}
}, {
key: "extendArray",
value: function extendArray(arrToExtend, resultArr) {
var extendedArr = [];
arrToExtend.map(function (item) {
extendedArr.push(Utils.extend(resultArr, item));
});
arrToExtend = extendedArr;
return arrToExtend;
} // If month counter exceeds 12, it starts again from 1
}, {
key: "monthMod",
value: function monthMod(month) {
return month % 12;
}
}, {
key: "clone",
value: function clone(source) {
if (Object.prototype.toString.call(source) === '[object Array]') {
var cloneResult = [];
for (var i = 0; i < source.length; i++) {
cloneResult[i] = this.clone(source[i]);
}
return cloneResult;
} else if (Object.prototype.toString.call(source) === '[object Null]') {
// fixes an issue where null values were converted to {}
return null;
} else if (Object.prototype.toString.call(source) === '[object Date]') {
return source;
} else if (_typeof(source) === 'object') {
var _cloneResult = {};
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
_cloneResult[prop] = this.clone(source[prop]);
}
}
return _cloneResult;
} else {
return source;
}
}
}, {
key: "log10",
value: function log10(x) {
return Math.log(x) / Math.LN10;
}
}, {
key: "roundToBase10",
value: function roundToBase10(x) {
return Math.pow(10, Math.floor(Math.log10(x)));
}
}, {
key: "roundToBase",
value: function roundToBase(x, base) {
return Math.pow(base, Math.floor(Math.log(x) / Math.log(base)));
}
}, {
key: "parseNumber",
value: function parseNumber(val) {
if (val === null) return val;
return parseFloat(val);
}
}, {
key: "randomId",
value: function randomId() {
return (Math.random() + 1).toString(36).substring(4);
}
}, {
key: "noExponents",
value: function noExponents(val) {
var data = String(val).split(/[eE]/);
if (data.length === 1) return data[0];
var z = '',
sign = val < 0 ? '-' : '',
str = data[0].replace('.', ''),
mag = Number(data[1]) + 1;
if (mag < 0) {
z = sign + '0.';
while (mag++) {
z += '0';
}
return z + str.replace(/^-/, '');
}
mag -= str.length;
while (mag--) {
z += '0';
}
return str + z;
}
}, {
key: "getDimensions",
value: function getDimensions(el) {
var computedStyle = getComputedStyle(el);
var ret = [];
var elementHeight = el.clientHeight;
var elementWidth = el.clientWidth;
elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
ret.push(elementWidth);
ret.push(elementHeight);
return ret;
}
}, {
key: "getBoundingClientRect",
value: function getBoundingClientRect(element) {
var rect = element.getBoundingClientRect();
return {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: element.clientWidth,
height: element.clientHeight,
x: rect.left,
y: rect.top
};
}
}, {
key: "getLargestStringFromArr",
value: function getLargestStringFromArr(arr) {
return arr.reduce(function (a, b) {
if (Array.isArray(b)) {
b = b.reduce(function (aa, bb) {
return aa.length > bb.length ? aa : bb;
});
}
return a.length > b.length ? a : b;
}, 0);
} // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#answer-12342275
}, {
key: "hexToRgba",
value: function hexToRgba() {
var hex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#999999';
var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
if (hex.substring(0, 1) !== '#') {
hex = '#999999';
}
var h = hex.replace('#', '');
h = h.match(new RegExp('(.{' + h.length / 3 + '})', 'g'));
for (var i = 0; i < h.length; i++) {
h[i] = parseInt(h[i].length === 1 ? h[i] + h[i] : h[i], 16);
}
if (typeof opacity !== 'undefined') h.push(opacity);
return 'rgba(' + h.join(',') + ')';
}
}, {
key: "getOpacityFromRGBA",
value: function getOpacityFromRGBA(rgba) {
return parseFloat(rgba.replace(/^.*,(.+)\)/, '$1'));
}
}, {
key: "rgb2hex",
value: function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return rgb && rgb.length === 4 ? '#' + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
}, {
key: "isColorHex",
value: function isColorHex(color) {
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i.test(color);
}
}, {
key: "polarToCartesian",
value: function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + radius * Math.cos(angleInRadians),
y: centerY + radius * Math.sin(angleInRadians)
};
}
}, {
key: "escapeString",
value: function escapeString(str) {
var escapeWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'x';
var newStr = str.toString().slice();
newStr = newStr.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi, escapeWith);
return newStr;
}
}, {
key: "negToZero",
value: function negToZero(val) {
return val < 0 ? 0 : val;
}
}, {
key: "moveIndexInArray",
value: function moveIndexInArray(arr, old_index, new_index) {
if (new_index >= arr.length) {
var k = new_index - arr.length + 1;
while (k--) {
arr.push(undefined);
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
return arr;
}
}, {
key: "extractNumber",
value: function extractNumber(s) {
return parseFloat(s.replace(/[^\d.]*/g, ''));
}
}, {
key: "findAncestor",
value: function findAncestor(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls)) {
}
return el;
}
}, {
key: "setELstyles",
value: function setELstyles(el, styles) {
for (var key in styles) {
if (styles.hasOwnProperty(key)) {
el.style.key = styles[key];
}
}
}
}, {
key: "isNumber",
value: function isNumber(value) {
return !isNaN(value) && parseFloat(Number(value)) === value && !isNaN(parseInt(value, 10));
}
}, {
key: "isFloat",
value: function isFloat(n) {
return Number(n) === n && n % 1 !== 0;
}
}, {
key: "isSafari",
value: function isSafari() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}
}, {
key: "isFirefox",
value: function isFirefox() {
return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
}
}, {
key: "isIE11",
value: function isIE11() {
if (window.navigator.userAgent.indexOf('MSIE') !== -1 || window.navigator.appVersion.indexOf('Trident/') > -1) {
return true;
}
}
}, {
key: "isIE",
value: function isIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
} // other browser
return false;
}
}]);
return Utils;
}();
/**
* ApexCharts Filters Class for setting hover/active states on the paths.
*
* @module Formatters
**/
var Filters = /*#__PURE__*/function () {
function Filters(ctx) {
_classCallCheck(this, Filters);
this.ctx = ctx;
this.w = ctx.w;
} // create a re-usable filter which can be appended other filter effects and applied to multiple elements
_createClass(Filters, [{
key: "getDefaultFilter",
value: function getDefaultFilter(el, i) {
var w = this.w;
el.unfilter(true);
var filter = new window.SVG.Filter();
filter.size('120%', '180%', '-5%', '-40%');
if (w.config.states.normal.filter !== 'none') {
this.applyFilter(el, i, w.config.states.normal.filter.type, w.config.states.normal.filter.value);
} else {
if (w.config.chart.dropShadow.enabled) {
this.dropShadow(el, w.config.chart.dropShadow, i);
}
}
}
}, {
key: "addNormalFilter",
value: function addNormalFilter(el, i) {
var w = this.w; // revert shadow if it was there
// but, ignore marker as marker don't have dropshadow yet
if (w.config.chart.dropShadow.enabled && !el.node.classList.contains('apexcharts-marker')) {
this.dropShadow(el, w.config.chart.dropShadow, i);
}
} // appends dropShadow to the filter object which can be chained with other filter effects
}, {
key: "addLightenFilter",
value: function addLightenFilter(el, i, attrs) {
var _this = this;
var w = this.w;
var intensity = attrs.intensity;
if (Utils.isFirefox()) {
return;
}
el.unfilter(true);
var filter = new window.SVG.Filter();
el.filter(function (add) {
var shadowAttr = w.config.chart.dropShadow;
if (shadowAttr.enabled) {
filter = _this.addShadow(add, i, shadowAttr);
} else {
filter = add;
}
filter.componentTransfer({
rgb: {
type: 'linear',
slope: 1.5,
intercept: intensity
}
});
});
el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse');
this._scaleFilterSize(el.filterer.node);
} // appends dropShadow to the filter object which can be chained with other filter effects
}, {
key: "addDarkenFilter",
value: function addDarkenFilter(el, i, attrs) {
var _this2 = this;
var w = this.w;
var intensity = attrs.intensity;
if (Utils.isFirefox()) {
return;
}
el.unfilter(true);
var filter = new window.SVG.Filter();
el.filter(function (add) {
var shadowAttr = w.config.chart.dropShadow;
if (shadowAttr.enabled) {
filter = _this2.addShadow(add, i, shadowAttr);
} else {
filter = add;
}
filter.componentTransfer({
rgb: {
type: 'linear',
slope: intensity
}
});
});
el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse');
this._scaleFilterSize(el.filterer.node);
}
}, {
key: "applyFilter",
value: function applyFilter(el, i, filter) {
var intensity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.5;
switch (filter) {
case 'none':
{
this.addNormalFilter(el, i);
break;
}
case 'lighten':
{
this.addLightenFilter(el, i, {
intensity: intensity
});
break;
}
case 'darken':
{
this.addDarkenFilter(el, i, {
intensity: intensity
});
break;
}
}
} // appends dropShadow to the filter object which can be chained with other filter effects
}, {
key: "addShadow",
value: function addShadow(add, i, attrs) {
var blur = attrs.blur,
top = attrs.top,
left = attrs.left,
color = attrs.color,
opacity = attrs.opacity;
var shadowBlur = add.flood(Array.isArray(color) ? color[i] : color, opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur).merge(add.source);
return add.blend(add.source, shadowBlur);
} // directly adds dropShadow to the element and returns the same element.
// the only way it is different from the addShadow() function is that addShadow is chainable to other filters, while this function discards all filters and add dropShadow
}, {
key: "dropShadow",
value: function dropShadow(el, attrs) {
var i = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var top = attrs.top,
left = attrs.left,
blur = attrs.blur,
color = attrs.color,
opacity = attrs.opacity,
noUserSpaceOnUse = attrs.noUserSpaceOnUse;
var w = this.w;
el.unfilter(true);
if (Utils.isIE() && w.config.chart.type === 'radialBar') {
// in radialbar charts, dropshadow is clipping actual drawing in IE
return el;
}
color = Array.isArray(color) ? color[i] : color;
el.filter(function (add) {
var shadowBlur = null;
if (Utils.isSafari() || Utils.isFirefox() || Utils.isIE()) {
// safari/firefox has some alternative way to use this filter
shadowBlur = add.flood(color, opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur);
} else {
shadowBlur = add.flood(color, opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur).merge(add.source);
}
add.blend(add.source, shadowBlur);
});
if (!noUserSpaceOnUse) {
el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse');
}
this._scaleFilterSize(el.filterer.node);
return el;
}
}, {
key: "setSelectionFilter",
value: function setSelectionFilter(el, realIndex, dataPointIndex) {
var w = this.w;
if (typeof w.globals.selectedDataPoints[realIndex] !== 'undefined') {
if (w.globals.selectedDataPoints[realIndex].indexOf(dataPointIndex) > -1) {
el.node.setAttribute('selected', true);
var activeFilter = w.config.states.active.filter;
if (activeFilter !== 'none') {
this.applyFilter(el, realIndex, activeFilter.type, activeFilter.value);
}
}
}
}
}, {
key: "_scaleFilterSize",
value: function _scaleFilterSize(el) {
var setAttributes = function setAttributes(attrs) {
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
el.setAttribute(key, attrs[key]);
}
}
};
setAttributes({
width: '200%',
height: '200%',
x: '-50%',
y: '-50%'
});
}
}]);
return Filters;
}();
/**
* ApexCharts Animation Class.
*
* @module Animations
**/
var Animations = /*#__PURE__*/function () {
function Animations(ctx) {
_classCallCheck(this, Animations);
this.ctx = ctx;
this.w = ctx.w;
this.setEasingFunctions();
}
_createClass(Animations, [{
key: "setEasingFunctions",
value: function setEasingFunctions() {
var easing;
if (this.w.globals.easing) return;
var userDefinedEasing = this.w.config.chart.animations.easing;
switch (userDefinedEasing) {
case 'linear':
{
easing = '-';
break;
}
case 'easein':
{
easing = '<';
break;
}
case 'easeout':
{
easing = '>';
break;
}
case 'easeinout':
{
easing = '<>';
break;
}
case 'swing':
{
easing = function easing(pos) {
var s = 1.70158;
var ret = (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
return ret;
};
break;
}
case 'bounce':
{
easing = function easing(pos) {
var ret = '';
if (pos < 1 / 2.75) {
ret = 7.5625 * pos * pos;
} else if (pos < 2 / 2.75) {
ret = 7.5625 * (pos -= 1.5 / 2.75) * pos + 0.75;
} else if (pos < 2.5 / 2.75) {
ret = 7.5625 * (pos -= 2.25 / 2.75) * pos + 0.9375;
} else {
ret = 7.5625 * (pos -= 2.625 / 2.75) * pos + 0.984375;
}
return ret;
};
break;
}
case 'elastic':
{
easing = function easing(pos) {
if (pos === !!pos) return pos;
return Math.pow(2, -10 * pos) * Math.sin((pos - 0.075) * (2 * Math.PI) / 0.3) + 1;
};
break;
}
default:
{
easing = '<>';
}
}
this.w.globals.easing = easing;
}
}, {
key: "animateLine",
value: function animateLine(el, from, to, speed) {
el.attr(from).animate(speed).attr(to);
}
/*
** Animate radius of a circle element
*/
}, {
key: "animateCircleRadius",
value: function animateCircleRadius(el, from, to, speed, easing, cb) {
if (!from) from = 0;
el.attr({
r: from
}).animate(speed, easing).attr({
r: to
}).afterAll(function () {
cb();
});
}
/*
** Animate radius and position of a circle element
*/
}, {
key: "animateCircle",
value: function animateCircle(el, from, to, speed, easing) {
el.attr({
r: from.r,
cx: from.cx,
cy: from.cy
}).animate(speed, easing).attr({
r: to.r,
cx: to.cx,
cy: to.cy
});
}
/*
** Animate rect properties
*/
}, {
key: "animateRect",
value: function animateRect(el, from, to, speed, fn) {
el.attr(from).animate(speed).attr(to).afterAll(function () {
return fn();
});
}
}, {
key: "animatePathsGradually",
value: function animatePathsGradually(params) {
var el = params.el,
realIndex = params.realIndex,
j = params.j,
fill = params.fill,
pathFrom = params.pathFrom,
pathTo = params.pathTo,
speed = params.speed,
delay = params.delay;
var me = this;
var w = this.w;
var delayFactor = 0;
if (w.config.chart.animations.animateGradually.enabled) {
delayFactor = w.config.chart.animations.animateGradually.delay;
}
if (w.config.chart.animations.dynamicAnimation.enabled && w.globals.dataChanged && w.config.chart.type !== 'bar') {
// disabled due to this bug - https://github.com/apexcharts/vue-apexcharts/issues/75
delayFactor = 0;
}
me.morphSVG(el, realIndex, j, w.config.chart.type === 'line' && !w.globals.comboCharts ? 'stroke' : fill, pathFrom, pathTo, speed, delay * delayFactor);
}
}, {
key: "showDelayedElements",
value: function showDelayedElements() {
this.w.globals.delayedElements.forEach(function (d) {
var ele = d.el;
ele.classList.remove('apexcharts-element-hidden');
});
}
}, {
key: "animationCompleted",
value: function animationCompleted(el) {
var w = this.w;
if (w.globals.animationEnded) return;
w.globals.animationEnded = true;
this.showDelayedElements();
if (typeof w.config.chart.events.animationEnd === 'function') {
w.config.chart.events.animationEnd(this.ctx, {
el: el,
w: w
});
}
} // SVG.js animation for morphing one path to another
}, {
key: "morphSVG",
value: function morphSVG(el, realIndex, j, fill, pathFrom, pathTo, speed, delay) {
var _this = this;
var w = this.w;
if (!pathFrom) {
pathFrom = el.attr('pathFrom');
}
if (!pathTo) {
pathTo = el.attr('pathTo');
}
var disableAnimationForCorrupPath = function disableAnimationForCorrupPath(path) {
if (w.config.chart.type === 'radar') {
// radar chart drops the path to bottom and hence a corrup path looks ugly
// therefore, disable animation for such a case
speed = 1;
}
return "M 0 ".concat(w.globals.gridHeight);
};
if (!pathFrom || pathFrom.indexOf('undefined') > -1 || pathFrom.indexOf('NaN') > -1) {
pathFrom = disableAnimationForCorrupPath();
}
if (!pathTo || pathTo.indexOf('undefined') > -1 || pathTo.indexOf('NaN') > -1) {
pathTo = disableAnimationForCorrupPath();
}
if (!w.globals.shouldAnimate) {
speed = 1;
}
el.plot(pathFrom).animate(1, w.globals.easing, delay).plot(pathFrom).animate(speed, w.globals.easing, delay).plot(pathTo).afterAll(function () {
// a flag to indicate that the original mount function can return true now as animation finished here
if (Utils.isNumber(j)) {
if (j === w.globals.series[w.globals.maxValsInArrayIndex].length - 2 && w.globals.shouldAnimate) {
_this.animationCompleted(el);
}
} else if (fill !== 'none' && w.globals.shouldAnimate) {
if (!w.globals.comboCharts && realIndex === w.globals.series.length - 1 || w.globals.comboCharts) {
_this.animationCompleted(el);
}
}
_this.showDelayedElements();
});
}
}]);
return Animations;
}();
/**
* ApexCharts Graphics Class for all drawing operations.
*
* @module Graphics
**/
var Graphics = /*#__PURE__*/function () {
function Graphics(ctx) {
_classCallCheck(this, Graphics);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(Graphics, [{
key: "drawLine",
value: function drawLine(x1, y1, x2, y2) {
var lineColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '#a8a8a8';
var dashArray = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
var strokeWidth = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
var w = this.w;
var line = w.globals.dom.Paper.line().attr({
x1: x1,
y1: y1,
x2: x2,
y2: y2,
stroke: lineColor,
'stroke-dasharray': dashArray,
'stroke-width': strokeWidth
});
return line;
}
}, {
key: "drawRect",
value: function drawRect() {
var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var radius = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
var color = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '#fefefe';
var opacity = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
var strokeWidth = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
var strokeColor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
var strokeDashArray = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 0;
var w = this.w;
var rect = w.globals.dom.Paper.rect();
rect.attr({
x: x1,
y: y1,
width: x2 > 0 ? x2 : 0,
height: y2 > 0 ? y2 : 0,
rx: radius,
ry: radius,
opacity: opacity,
'stroke-width': strokeWidth !== null ? strokeWidth : 0,
stroke: strokeColor !== null ? strokeColor : 'none',
'stroke-dasharray': strokeDashArray
}); // fix apexcharts.js#1410
rect.node.setAttribute('fill', color);
return rect;
}
}, {
key: "drawPolygon",
value: function drawPolygon(polygonString) {
var stroke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#e1e1e1';
var strokeWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var fill = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none';
var w = this.w;
var polygon = w.globals.dom.Paper.polygon(polygonString).attr({
fill: fill,
stroke: stroke,
'stroke-width': strokeWidth
});
return polygon;
}
}, {
key: "drawCircle",
value: function drawCircle(radius) {
var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var w = this.w;
var c = w.globals.dom.Paper.circle(radius * 2);
if (attrs !== null) {
c.attr(attrs);
}
return c;
}
}, {
key: "drawPath",
value: function drawPath(_ref) {
var _ref$d = _ref.d,
d = _ref$d === void 0 ? '' : _ref$d,
_ref$stroke = _ref.stroke,
stroke = _ref$stroke === void 0 ? '#a8a8a8' : _ref$stroke,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth,
fill = _ref.fill,
_ref$fillOpacity = _ref.fillOpacity,
fillOpacity = _ref$fillOpacity === void 0 ? 1 : _ref$fillOpacity,
_ref$strokeOpacity = _ref.strokeOpacity,
strokeOpacity = _ref$strokeOpacity === void 0 ? 1 : _ref$strokeOpacity,
classes = _ref.classes,
_ref$strokeLinecap = _ref.strokeLinecap,
strokeLinecap = _ref$strokeLinecap === void 0 ? null : _ref$strokeLinecap,
_ref$strokeDashArray = _ref.strokeDashArray,
strokeDashArray = _ref$strokeDashArray === void 0 ? 0 : _ref$strokeDashArray;
var w = this.w;
if (strokeLinecap === null) {
strokeLinecap = w.config.stroke.lineCap;
}
if (d.indexOf('undefined') > -1 || d.indexOf('NaN') > -1) {
d = "M 0 ".concat(w.globals.gridHeight);
}
var p = w.globals.dom.Paper.path(d).attr({
fill: fill,
'fill-opacity': fillOpacity,
stroke: stroke,
'stroke-opacity': strokeOpacity,
'stroke-linecap': strokeLinecap,
'stroke-width': strokeWidth,
'stroke-dasharray': strokeDashArray,
class: classes
});
return p;
}
}, {
key: "group",
value: function group() {
var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var w = this.w;
var g = w.globals.dom.Paper.group();
if (attrs !== null) {
g.attr(attrs);
}
return g;
}
}, {
key: "move",
value: function move(x, y) {
var move = ['M', x, y].join(' ');
return move;
}
}, {
key: "line",
value: function line(x, y) {
var hORv = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var line = null;
if (hORv === null) {
line = ['L', x, y].join(' ');
} else if (hORv === 'H') {
line = ['H', x].join(' ');
} else if (hORv === 'V') {
line = ['V', y].join(' ');
}
return line;
}
}, {
key: "curve",
value: function curve(x1, y1, x2, y2, x, y) {
var curve = ['C', x1, y1, x2, y2, x, y].join(' ');
return curve;
}
}, {
key: "quadraticCurve",
value: function quadraticCurve(x1, y1, x, y) {
var curve = ['Q', x1, y1, x, y].join(' ');
return curve;
}
}, {
key: "arc",
value: function arc(rx, ry, axisRotation, largeArcFlag, sweepFlag, x, y) {
var relative = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
var coord = 'A';
if (relative) coord = 'a';
var arc = [coord, rx, ry, axisRotation, largeArcFlag, sweepFlag, x, y].join(' ');
return arc;
}
/**
* @memberof Graphics
* @param {object}
* i = series's index
* realIndex = realIndex is series's actual index when it was drawn time. After several redraws, the iterating "i" may change in loops, but realIndex doesn't
* pathFrom = existing pathFrom to animateTo
* pathTo = new Path to which d attr will be animated from pathFrom to pathTo
* stroke = line Color
* strokeWidth = width of path Line
* fill = it can be gradient, single color, pattern or image
* animationDelay = how much to delay when starting animation (in milliseconds)
* dataChangeSpeed = for dynamic animations, when data changes
* className = class attribute to add
* @return {object} svg.js path object
**/
}, {
key: "renderPaths",
value: function renderPaths(_ref2) {
var j = _ref2.j,
realIndex = _ref2.realIndex,
pathFrom = _ref2.pathFrom,
pathTo = _ref2.pathTo,
stroke = _ref2.stroke,
strokeWidth = _ref2.strokeWidth,
strokeLinecap = _ref2.strokeLinecap,
fill = _ref2.fill,
animationDelay = _ref2.animationDelay,
initialSpeed = _ref2.initialSpeed,
dataChangeSpeed = _ref2.dataChangeSpeed,
className = _ref2.className,
_ref2$shouldClipToGri = _ref2.shouldClipToGrid,
shouldClipToGrid = _ref2$shouldClipToGri === void 0 ? true : _ref2$shouldClipToGri,
_ref2$bindEventsOnPat = _ref2.bindEventsOnPaths,
bindEventsOnPaths = _ref2$bindEventsOnPat === void 0 ? true : _ref2$bindEventsOnPat,
_ref2$drawShadow = _ref2.drawShadow,
drawShadow = _ref2$drawShadow === void 0 ? true : _ref2$drawShadow;
var w = this.w;
var filters = new Filters(this.ctx);
var anim = new Animations(this.ctx);
var initialAnim = this.w.config.chart.animations.enabled;
var dynamicAnim = initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled;
var d;
var shouldAnimate = !!(initialAnim && !w.globals.resized || dynamicAnim && w.globals.dataChanged && w.globals.shouldAnimate);
if (shouldAnimate) {
d = pathFrom;
} else {
d = pathTo;
w.globals.animationEnded = true;
}
var strokeDashArrayOpt = w.config.stroke.dashArray;
var strokeDashArray = 0;
if (Array.isArray(strokeDashArrayOpt)) {
strokeDashArray = strokeDashArrayOpt[realIndex];
} else {
strokeDashArray = w.config.stroke.dashArray;
}
var el = this.drawPath({
d: d,
stroke: stroke,
strokeWidth: strokeWidth,
fill: fill,
fillOpacity: 1,
classes: className,
strokeLinecap: strokeLinecap,
strokeDashArray: strokeDashArray
});
el.attr('index', realIndex);
if (shouldClipToGrid) {
el.attr({
'clip-path': "url(#gridRectMask".concat(w.globals.cuid, ")")
});
} // const defaultFilter = el.filterer
if (w.config.states.normal.filter.type !== 'none') {
filters.getDefaultFilter(el, realIndex);
} else {
if (w.config.chart.dropShadow.enabled && drawShadow) {
if (!w.config.chart.dropShadow.enabledOnSeries || w.config.chart.dropShadow.enabledOnSeries && w.config.chart.dropShadow.enabledOnSeries.indexOf(realIndex) !== -1) {
var shadow = w.config.chart.dropShadow;
filters.dropShadow(el, shadow, realIndex);
}
}
}
if (bindEventsOnPaths) {
el.node.addEventListener('mouseenter', this.pathMouseEnter.bind(this, el));
el.node.addEventListener('mouseleave', this.pathMouseLeave.bind(this, el));
el.node.addEventListener('mousedown', this.pathMouseDown.bind(this, el));
}
el.attr({
pathTo: pathTo,
pathFrom: pathFrom
});
var defaultAnimateOpts = {
el: el,
j: j,
realIndex: realIndex,
pathFrom: pathFrom,
pathTo: pathTo,
fill: fill,
strokeWidth: strokeWidth,
delay: animationDelay
};
if (initialAnim && !w.globals.resized && !w.globals.dataChanged) {
anim.animatePathsGradually(_objectSpread2(_objectSpread2({}, defaultAnimateOpts), {}, {
speed: initialSpeed
}));
} else {
if (w.globals.resized || !w.globals.dataChanged) {
anim.showDelayedElements();
}
}
if (w.globals.dataChanged && dynamicAnim && shouldAnimate) {
anim.animatePathsGradually(_objectSpread2(_objectSpread2({}, defaultAnimateOpts), {}, {
speed: dataChangeSpeed
}));
}
return el;
}
}, {
key: "drawPattern",
value: function drawPattern(style, width, height) {
var stroke = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#a8a8a8';
var strokeWidth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
var w = this.w;
var p = w.globals.dom.Paper.pattern(width, height, function (add) {
if (style === 'horizontalLines') {
add.line(0, 0, height, 0).stroke({
color: stroke,
width: strokeWidth + 1
});
} else if (style === 'verticalLines') {
add.line(0, 0, 0, width).stroke({
color: stroke,
width: strokeWidth + 1
});
} else if (style === 'slantedLines') {
add.line(0, 0, width, height).stroke({
color: stroke,
width: strokeWidth
});
} else if (style === 'squares') {
add.rect(width, height).fill('none').stroke({
color: stroke,
width: strokeWidth
});
} else if (style === 'circles') {
add.circle(width).fill('none').stroke({
color: stroke,
width: strokeWidth
});
}
});
return p;
}
}, {
key: "drawGradient",
value: function drawGradient(style, gfrom, gto, opacityFrom, opacityTo) {
var size = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
var stops = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
var colorStops = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
var i = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0;
var w = this.w;
var g;
if (gfrom.length < 9 && gfrom.indexOf('#') === 0) {
// if the hex contains alpha and is of 9 digit, skip the opacity
gfrom = Utils.hexToRgba(gfrom, opacityFrom);
}
if (gto.length < 9 && gto.indexOf('#') === 0) {
gto = Utils.hexToRgba(gto, opacityTo);
}
var stop1 = 0;
var stop2 = 1;
var stop3 = 1;
var stop4 = null;
if (stops !== null) {
stop1 = typeof stops[0] !== 'undefined' ? stops[0] / 100 : 0;
stop2 = typeof stops[1] !== 'undefined' ? stops[1] / 100 : 1;
stop3 = typeof stops[2] !== 'undefined' ? stops[2] / 100 : 1;
stop4 = typeof stops[3] !== 'undefined' ? stops[3] / 100 : null;
}
var radial = !!(w.config.chart.type === 'donut' || w.config.chart.type === 'pie' || w.config.chart.type === 'polarArea' || w.config.chart.type === 'bubble');
if (colorStops === null || colorStops.length === 0) {
g = w.globals.dom.Paper.gradient(radial ? 'radial' : 'linear', function (stop) {
stop.at(stop1, gfrom, opacityFrom);
stop.at(stop2, gto, opacityTo);
stop.at(stop3, gto, opacityTo);
if (stop4 !== null) {
stop.at(stop4, gfrom, opacityFrom);
}
});
} else {
g = w.globals.dom.Paper.gradient(radial ? 'radial' : 'linear', function (stop) {
var gradientStops = Array.isArray(colorStops[i]) ? colorStops[i] : colorStops;
gradientStops.forEach(function (s) {
stop.at(s.offset / 100, s.color, s.opacity);
});
});
}
if (!radial) {
if (style === 'vertical') {
g.from(0, 0).to(0, 1);
} else if (style === 'diagonal') {
g.from(0, 0).to(1, 1);
} else if (style === 'horizontal') {
g.from(0, 1).to(1, 1);
} else if (style === 'diagonal2') {
g.from(1, 0).to(0, 1);
}
} else {
var offx = w.globals.gridWidth / 2;
var offy = w.globals.gridHeight / 2;
if (w.config.chart.type !== 'bubble') {
g.attr({
gradientUnits: 'userSpaceOnUse',
cx: offx,
cy: offy,
r: size
});
} else {
g.attr({
cx: 0.5,
cy: 0.5,
r: 0.8,
fx: 0.2,
fy: 0.2
});
}
}
return g;
}
}, {
key: "drawImage",
value: function drawImage(_ref3) {
var x = _ref3.x,
y = _ref3.y,
width = _ref3.width,
height = _ref3.height,
path = _ref3.path;
var w = this.w;
var img = w.globals.dom.Paper.image(path);
img.size(width, height).move(x, y);
return img;
}
}, {
key: "draw