ikizmet-apexcharts
Version:
iKizmet fork of Apex Charts library
1,565 lines (1,361 loc) • 1.06 MB
JavaScript
define("ApexCharts", [], function() { return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 79);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = 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); } } return function (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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/*
** Generic functions which are not dependent on ApexCharts
*/
var Utils = 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)),
G = parseInt(f[1]),
B = parseInt(f[2]);
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) {
console.log(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 (color.length > 7) return this.shadeRGBColor(p, color);else return this.shadeHexColor(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 === 'undefined' ? 'undefined' : _typeof(item)) === 'object' && !Array.isArray(item) && item != null;
}
}, {
key: 'listToArray',
value: function listToArray(list) {
var i = void 0,
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) {
'use strict';
// We must check against these specific cases.
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: 'addProps',
value: function addProps(obj, arr, val) {
if (typeof arr === 'string') {
arr = arr.split('.');
}
obj[arr[0]] = obj[arr[0]] || {};
var tmpObj = obj[arr[0]];
if (arr.length > 1) {
arr.shift();
this.addProps(tmpObj, arr, val);
} else {
obj[arr[0]] = val;
}
return obj;
}
}, {
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 ((typeof source === 'undefined' ? 'undefined' : _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: '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: rect.width,
height: rect.height,
x: rect.x,
y: rect.y
};
}
// 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) {
rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return rgba[3];
}
}, {
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}$)/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: 'randomString',
value: function randomString(len) {
var text = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (var i = 0; i < len; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
}, {
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;
}();
exports.default = Utils;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
var _Animations = __webpack_require__(5);
var _Animations2 = _interopRequireDefault(_Animations);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* ApexCharts Graphics Class for all drawing operations.
*
* @module Graphics
**/
var Graphics = 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,
fill: color,
opacity: opacity,
'stroke-width': strokeWidth !== null ? strokeWidth : 0,
stroke: strokeColor !== null ? strokeColor : 'none',
'stroke-dasharray': strokeDashArray
});
return rect;
}
}, {
key: 'drawPolygon',
value: function drawPolygon(polygonString) {
var stroke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#e1e1e1';
var fill = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'none';
var w = this.w;
var polygon = w.globals.dom.Paper.polygon(polygonString).attr({
fill: fill,
stroke: stroke
});
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 === undefined ? '' : _ref$d,
_ref$stroke = _ref.stroke,
stroke = _ref$stroke === undefined ? '#a8a8a8' : _ref$stroke,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === undefined ? 1 : _ref$strokeWidth,
fill = _ref.fill,
_ref$fillOpacity = _ref.fillOpacity,
fillOpacity = _ref$fillOpacity === undefined ? 1 : _ref$fillOpacity,
_ref$strokeOpacity = _ref.strokeOpacity,
strokeOpacity = _ref$strokeOpacity === undefined ? 1 : _ref$strokeOpacity,
classes = _ref.classes,
_ref$strokeLinecap = _ref.strokeLinecap,
strokeLinecap = _ref$strokeLinecap === undefined ? null : _ref$strokeLinecap,
_ref$strokeDashArray = _ref.strokeDashArray,
strokeDashArray = _ref$strokeDashArray === undefined ? 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 ' + 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 i = _ref2.i,
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,
id = _ref2.id,
_ref2$shouldClipToGri = _ref2.shouldClipToGrid,
shouldClipToGrid = _ref2$shouldClipToGri === undefined ? true : _ref2$shouldClipToGri,
_ref2$bindEventsOnPat = _ref2.bindEventsOnPaths,
bindEventsOnPaths = _ref2$bindEventsOnPat === undefined ? true : _ref2$bindEventsOnPat;
var w = this.w;
var filters = new _Filters2.default(this.ctx);
var anim = new _Animations2.default(this.ctx);
var initialAnim = this.w.config.chart.animations.enabled;
var dynamicAnim = initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled;
var d = void 0;
var shouldAnimate = !!(initialAnim && !w.globals.resized || dynamicAnim && w.globals.dataChanged && w.globals.shouldAnimate);
if (shouldAnimate) {
d = pathFrom;
} else {
d = pathTo;
this.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('id', id + '-' + i);
el.attr('index', realIndex);
if (shouldClipToGrid) {
el.attr({
'clip-path': 'url(#gridRectMask' + w.globals.cuid + ')'
});
}
// const defaultFilter = el.filterer
if (w.config.states.normal.filter.type !== 'none') {
filters.getDefaultFilter(el, w.config.states.normal.filter.type, w.config.states.normal.filter.value);
} else {
if (w.config.chart.dropShadow.enabled) {
if (!w.config.chart.dropShadow.enabledSeries || w.config.chart.dropShadow.enabledSeries && w.config.chart.dropShadow.enabledSeries.indexOf(realIndex) !== -1) {
var shadow = w.config.chart.dropShadow;
filters.dropShadow(el, shadow);
}
}
}
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,
pathFrom: pathFrom,
pathTo: pathTo,
strokeWidth: strokeWidth
};
if (initialAnim && !w.globals.resized && !w.globals.dataChanged) {
anim.animatePathsGradually(_extends({}, defaultAnimateOpts, {
speed: initialSpeed,
delay: animationDelay
}));
} else {
if (w.globals.resized || !w.globals.dataChanged) {
anim.showDelayedElements();
}
}
if (w.globals.dataChanged && dynamicAnim && shouldAnimate) {
anim.animatePathsGradually(_extends({}, 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 opacity = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
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 = void 0;
gfrom = _Utils2.default.hexToRgba(gfrom, opacityFrom);
gto = _Utils2.default.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 === '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 stops = Array.isArray(colorStops[i]) ? colorStops[i] : colorStops;
stops.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(0, 1).to(2, 2);
}
} 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: 'drawText',
value: function drawText(opts) {
var w = this.w;
var x = opts.x,
y = opts.y,
text = opts.text,
textAnchor = opts.textAnchor,
fontSize = opts.fontSize,
fontFamily = opts.fontFamily,
foreColor = opts.foreColor,
opacity = opts.opacity;
if (!textAnchor) {
textAnchor = 'start';
}
if (!foreColor) {
foreColor = w.config.chart.foreColor;
}
fontFamily = fontFamily || w.config.chart.fontFamily;
var elText = void 0;
if (Array.isArray(text)) {
elText = w.globals.dom.Paper.text(function (add) {
for (var i = 0; i < text.length; i++) {
add.tspan(text[i]);
}
});
} else {
elText = w.globals.dom.Paper.plain(text);
}
elText.attr({
x: x,
y: y,
'text-anchor': textAnchor,
'dominant-baseline': 'auto',
'font-size': fontSize,
'font-family': fontFamily,
// Todo Pass in as props
'font-weight': '800',
fill: foreColor,
class: true ? opts.cssClass : ''
});
elText.node.style.fontFamily = fontFamily;
elText.node.style.opacity = opacity;
return elText;
}
}, {
key: 'addTspan',
value: function addTspan(textEl, text, fontFamily) {
var tspan = textEl.tspan(text);
if (!fontFamily) {
fontFamily = this.w.config.chart.fontFamily;
}
tspan.node.style.fontFamily = fontFamily;
}
}, {
key: 'drawMarker',
value: function drawMarker(x, y, opts) {
x = x || 0;
var size = opts.pSize || 0;
var elPoint = null;
if (opts.shape === 'square') {
var radius = opts.pRadius === undefined ? size / 2 : opts.pRadius;
if (y === null) {
size = 0;
radius = 0;
}
var nSize = size * 1.2 + radius;
var p = this.drawRect(nSize, nSize, nSize, nSize, radius);
p.attr({
x: x - nSize / 2,
y: y - nSize / 2,
cx: x,
cy: y,
class: opts.class ? opts.class : '',
fill: opts.pointFillColor,
'fill-opacity': opts.pointFillOpacity ? opts.pointFillOpacity : 1,
stroke: opts.pointStrokeColor,
'stroke-width': opts.pWidth ? opts.pWidth : 0,
'stroke-opacity': opts.pointStrokeOpacity ? opts.pointStrokeOpacity : 1
});
elPoint = p;
} else if (opts.shape === 'circle') {
if (!_Utils2.default.isNumber(y)) {
size = 0;
y = 0;
}
// let nSize = size - opts.pRadius / 2 < 0 ? 0 : size - opts.pRadius / 2
elPoint = this.drawCircle(size, {
cx: x,
cy: y,
class: opts.class ? opts.class : '',
stroke: opts.pointStrokeColor,
fill: opts.pointFillColor,
'fill-opacity': opts.pointFillOpacity ? opts.pointFillOpacity : 1,
'stroke-width': opts.pWidth ? opts.pWidth : 0,
'stroke-opacity': opts.pointStrokeOpacity ? opts.pointStrokeOpacity : 1
});
}
return elPoint;
}
}, {
key: 'pathMouseEnter',
value: function pathMouseEnter(path, e) {
var w = this.w;
var filters = new _Filters2.default(this.ctx);
var i = parseInt(path.node.getAttribute('index'));
var j = parseInt(path.node.getAttribute('j'));
if (typeof w.config.chart.events.dataPointMouseEnter === 'function') {
w.config.chart.events.dataPointMouseEnter(e, this.ctx, {
seriesIndex: i,
dataPointIndex: j,
w: w
});
}
this.ctx.fireEvent('dataPointMouseEnter', [e, this.ctx, { seriesIndex: i, dataPointIndex: j, w: w }]);
if (w.config.states.active.filter.type !== 'none') {
if (path.node.getAttribute('selected') === 'true') {
return;
}
}
if (w.config.states.hover.filter.type !== 'none') {
if (w.config.states.active.filter.type !== 'none' && !w.globals.isTouchDevice) {
var hoverFilter = w.config.states.hover.filter;
filters.applyFilter(path, hoverFilter.type, hoverFilter.value);
}
}
}
}, {
key: 'pathMouseLeave',
value: function pathMouseLeave(path, e) {
var w = this.w;
var filters = new _Filters2.default(this.ctx);
var i = parseInt(path.node.getAttribute('index'));
var j = parseInt(path.node.getAttribute('j'));
if (typeof w.config.chart.events.dataPointMouseLeave === 'function') {
w.config.chart.events.dataPointMouseLeave(e, this.ctx, {
seriesIndex: i,
dataPointIndex: j,
w: w
});
}
this.ctx.fireEvent('dataPointMouseLeave', [e, this.ctx, { seriesIndex: i, dataPointIndex: j, w: w }]);
if (w.config.states.active.filter.type !== 'none') {
if (path.node.getAttribute('selected') === 'true') {
return;
}
}
if (w.config.states.hover.filter.type !== 'none') {
filters.getDefaultFilter(path);
}
}
}, {
key: 'pathMouseDown',
value: function pathMouseDown(path, e) {
var w = this.w;
var filters = new _Filters2.default(this.ctx);
var i = parseInt(path.node.getAttribute('index'));
var j = parseInt(path.node.getAttribute('j'));
var selected = 'false';
if (path.node.getAttribute('selected') === 'true') {
path.node.setAttribute('selected', 'false');
if (w.globals.selectedDataPoints[i].indexOf(j) > -1) {
var index = w.globals.selectedDataPoints[i].indexOf(j);
w.globals.selectedDataPoints[i].splice(index, 1);
}
} else {
if (!w.config.states.active.allowMultipleDataPointsSelection && w.globals.selectedDataPoints.length > 0) {
w.globals.selectedDataPoints = [];
var elPaths = w.globals.dom.Paper.select('.apexcharts-series path').members;
var elCircles = w.globals.dom.Paper.select('.apexcharts-series circle, .apexcharts-series rect').members;
elPaths.forEach(function (elPath) {
elPath.node.setAttribute('selected', 'false');
filters.getDefaultFilter(elPath);
});
elCircles.forEach(function (circle) {
circle.node.setAttribute('selected', 'false');
filters.getDefaultFilter(circle);
});
}
path.node.setAttribute('selected', 'true');
selected = 'true';
if (typeof w.globals.selectedDataPoints[i] === 'undefined') {
w.globals.selectedDataPoints[i] = [];
}
w.globals.selectedDataPoints[i].push(j);
}
if (selected === 'true') {
var activeFilter = w.config.states.active.filter;
if (activeFilter !== 'none') {
filters.applyFilter(path, activeFilter.type, activeFilter.value);
}
} else {
if (w.config.states.active.filter.type !== 'none') {
filters.getDefaultFilter(path);
}
}
if (typeof w.config.chart.events.dataPointSelection === 'function') {
w.config.chart.events.dataPointSelection(e, this.ctx, {
selectedDataPoints: w.globals.selectedDataPoints,
seriesIndex: i,
dataPointIndex: j,
w: w
});
}
this.ctx.fireEvent('dataPointSelection', [e, this.ctx, {
selectedDataPoints: w.globals.selectedDataPoints,
seriesIndex: i,
dataPointIndex: j,
w: w
}]);
// if (this.w.config.chart.selection.selectedPoints !== undefined) {
// this.w.config.chart.selection.selectedPoints(w.globals.selectedDataPoints)
// }
}
}, {
key: 'rotateAroundCenter',
value: function rotateAroundCenter(el) {
var coord = el.getBBox();
var x = coord.x + coord.width / 2;
var y = coord.y + coord.height / 2;
return {
x: x,
y: y
};
}
}, {
key: 'getTextRects',
value: function getTextRects(text, fontSize, fontFamily, transform) {
var useBBox = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
var w = this.w;
var virtualText = this.drawText({
x: -200,
y: -200,
text: text,
textAnchor: 'start',
fontSize: fontSize,
fontFamily: fontFamily,
foreColor: '#fff',
opacity: 0
});
if (transform) {
virtualText.attr('transform', transform);
}
w.globals.dom.Paper.add(virtualText);
var rect = virtualText.bbox();
if (!useBBox) {
rect = virtualText.node.getBoundingClientRect();
}
virtualText.remove();
return {
width: rect.width,
height: rect.height
};
}
/**
* append ... to long text
* http://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg
* @memberof Graphics
**/
}, {
key: 'placeTextWithEllipsis',
value: function placeTextWithEllipsis(textObj, textString, width) {
textObj.textContent = textString;
if (textString.length > 0) {
// ellipsis is needed
if (textObj.getSubStringLength(0, textString.length) >= width) {
for (var x = textString.length - 3; x > 0; x -= 3) {
if (textObj.getSubStringLength(0, x) <= width) {
textObj.textContent = textString.substring(0, x) + '...';
return;
}
}
textObj.textContent = '...'; // can't place at all
}
}
}
}], [{
key: 'setAttrs',
value: function setAttrs(el, attrs) {
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
el.setAttribute(key, attrs[key]);
}
}
}
}]);
return Graphics;
}();
exports.default = Graphics;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/*
** Util functions which are dependent on ApexCharts instance
*/
var CoreUtils = function () {
function CoreUtils(ctx) {
_classCallCheck(this, CoreUtils);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(CoreUtils, [{
key: 'getStackedSeriesTotals',
/**
* @memberof CoreUtils
* returns the sum of all individual values in a multiple stacked series
* Eg. w.globals.series = [[32,33,43,12], [2,3,5,1]]
* @return [34,36,48,13]
**/
value: function getStackedSeriesTotals() {
var w = this.w;
var total = [];
for (var i = 0; i < w.globals.series[w.globals.maxValsInArrayIndex].length; i++) {
var t = 0;
for (var j = 0; j < w.globals.series.length; j++) {
t += w.globals.series[j][i];
}
total.push(t);
}
w.globals.stackedSeriesTotals = total;
return total;
}
// get total of the all values inside all series
}, {
key: 'getSeriesTotalByIndex',
value: function getSeriesTotalByIndex() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (index === null) {
// non-plot chart types - pie / donut / circle
return this.w.config.series.reduce(function (acc, cur) {
return acc + cur;
}, 0);
} else {
// axis charts - supporting multiple series
return this.w.globals.series[index].reduce(function (acc, cur) {
return acc + cur;
}, 0);
}
}
}, {
key: 'isSeriesNull',
value: function isSeriesNull() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var r = [];
if (index === null) {
// non-plot chart types - pie / donut / circle
r = this.w.config.series.filter(function (d) {
return d !== null;
});
} else {
// axis charts - supporting multiple series
r = this.w.globals.series[index].filter(function (d) {
return d !== null;
});
}
return r.length === 0;
}
}, {
key: 'seriesHaveSameValues',
value: function seriesHaveSameValues(index) {
return this.w.globals.series[index].every(function (val, i, arr) {
return val === arr[0];
});
}
// maxValsInArrayIndex is the index of series[] which has the largest number of items
}, {
key: 'getLargestSeries',
value: function getLargestSeries() {
var w = this.w;
w.globals.maxValsInArrayIndex = w.globals.series.map(function (a) {
return a.length;
}).indexOf(Math.max.apply(Math, w.globals.series.map(function (a) {
return a.length;
})));
}
}, {
key: 'getLargestMarkerSize',
value: function getLargestMarkerSize() {
var w = this.w;
var size = 0;
w.globals.markers.size.forEach(function (m) {
size = Math.max(size, m);
});
w.globals.markers.largestSize = size;
return size;
}
/**
* @memberof Core
* returns the sum of all values in a series
* Eg. w.globals.series = [[32,33,43,12], [2,3,5,1]]
* @return [120, 11]
**/
}, {
key: 'getSeriesTotals',
value: function getSeriesTotals() {
var w = this.w;
w.globals.seriesTotals = w.globals.series.map(function (ser, index) {
var total = 0;
if (Array.isArray(ser)) {
for (var j = 0; j < ser.length; j++) {
total += ser[j];
}
} else {
// for pie/donuts/gauges
total += ser;
}
return total;
});
}
}, {
key: 'getSeriesTotalsXRange',
value: function getSeriesTotalsXRange(minX, maxX) {
console.log(w);
var w = this.w;
var seriesTotalsXRange = w.globals.series.map(function (ser, index) {
var total = 0;
for (var j = 0; j < ser.length; j++) {
if (w.globals.seriesX[index][j] > minX && w.globals.seriesX[index][j] < maxX) {
total += ser[j];
}
}
return total;
});
return seriesTotalsXRange;
}
/**
* @memberof CoreUtils
* returns the percentage value of all individual values which can be used in a 100% stacked series
* Eg. w.globals.series = [[32, 33, 43, 12], [2, 3, 5, 1]]
* @return [[94.11, 91.66, 89.58, 92.30], [5.88, 8.33, 10.41, 7.7]]
**/
}, {
key: 'getPercentSeries',
value: function getPercentSeries() {
var w = this.w;
w.globals.seriesPercent = w.globals.series.map(function (ser, index) {
var seriesPercent = [];
if (Array.isArray(ser)) {
for (var j = 0; j < ser.length; j++) {
var total = w.globals.stackedSeriesTotals[j];
var percent = 100 * ser[j] / total;
seriesPercent.push(percent);
}
} else {
var _total = w.globals.seriesTotals.reduce(function (acc, val) {
return acc + val;
}, 0);
var _percent = 100 * ser / _total;
seriesPercent.push(_percent);
}
return seriesPercent;
});
}
}, {
key: 'getCalculatedRatios',
value: function getCalculatedRatios() {
var gl = this.w.globals;
var yRatio = [];
var invertedYRatio = 0;
var xRatio = 0;
var initialXRatio = 0;
var invertedXRatio = 0;
var zRatio = 0;
var baseLineY = [];
var baseLineInvertedY = 0.1;
var baseLineX = 0;
gl.yRange = [];
if (gl.isMultipleYAxis) {
for (var i = 0; i < gl.minYArr.length; i++) {
gl.yRange.push(Math.abs(gl.minYArr[i] - gl.maxYArr[i]));
baseLineY.push(0);
}
} else {
gl.yRange.push(Math.abs(gl.minY - gl.maxY));
}
gl.xRange = Math.abs(gl.maxX - gl.minX);
gl.zRange = Math.abs(gl.maxZ - gl.minZ);
// multiple y axis
for (var _i = 0; _i < gl.yRange.length; _i++) {
yRatio.push(gl.yRange[_i] / gl.gridHeight);
}
xRatio = gl.xRange / gl.gridWidth;
initialXRatio = Math.abs(gl.initialmaxX - gl.initialminX) / gl.gridWidth;
invertedYRatio = gl.yRange / gl.gridWidth;
invertedXRatio = gl.xRange / gl.gridHeight;
zRatio = gl.zRange / gl.gridHeight * 16;
if (gl.minY !== Number.MIN_VALUE && Math.abs(gl.minY) !== 0) {
// Negative numbers present in series
gl.hasNegs = true;
}
if (gl.isMultipleYAxis) {
baseLineY = [];
// baseline variables is the 0 of the yaxis which will be needed when there are negatives
for (var _i2 = 0; _i2 < yRatio.length; _i2++) {
baseLineY.push(-gl.minYArr[_i2] / yRatio[_i2]);
}
} else {
baseLineY.push(-gl.minY / yRatio[0]);
if (gl.minY !== Number.MIN_VALUE && Math.abs(gl.minY) !== 0) {
baseLineInvertedY = -gl.minY / invertedYRatio; // this is for bar chart
baseLineX = gl.minX / xRatio;
}
}
return {
yRatio: yRatio,
invertedYRatio: invertedYRatio,
zRatio: zRatio,
xRatio: xRatio,
initialXRatio: initialXRatio,
invertedXRatio: invertedXRatio,
baseLineInvertedY: baseLineInvertedY,
baseLineY: baseLineY,
baseLineX: baseLineX
};
}
}, {
key: 'getLogSer