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) {
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: '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: 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,
_ref2$drawShadow = _ref2.drawShadow,
drawShadow = _ref2$drawShadow === undefined ? true : _ref2$drawShadow;
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, realIndex);
} else {
if (w.config.chart.dropShadow.enabled && drawShadow) {
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, 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,
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 (typeof text === 'undefined') text = '';
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,
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, i, 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, i);
}
}
}, {
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, i);
});
elCircles.forEach(function (circle) {
circle.node.setAttribute('selected', 'false');
filters.getDefaultFilter(circle, i);
});
}
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, i, activeFilter.type, activeFilter.value);
}
} else {
if (w.config.states.active.filter.type !== 'none') {
filters.getDefaultFilter(path, i);
}
}
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) {
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: 'getLogSeries',
value: function getLogSeries(series) {
var w = this.w;
w.globals.seriesLog = series.map(function (s, i) {
if (w.config.yaxis[i] && w.config.yaxis[i].logarithmic) {
return s.map(function (d) {
if (d === null) return null;
var logVal = (Math.log(d) - Math.log(w.globals.minYArr[i])) / (Math.log(w.globals.maxYArr[i]) - Math.log(w.globals.minYArr[i]));
return logVal;
});
} else {
return s;
}
});
return w.globals.seriesLog;
}
}, {
key: 'getLogYRatios',
value: function getLogYRatios(yRatio) {
var _this = this;
var w = this.w;
var gl = this.w.globals;
gl.yLogRatio = yRatio.slice();
gl.logYRange = gl.yRange.map(function (yRange, i) {
if (w.config.yaxis[i] && _this.w.config.yaxis[i].logarithmic) {
var maxY = -Number.MAX_VALUE;
var minY = Number.MIN_VALUE;
var range = 1;
gl.seriesLog.forEach(function (s, si) {
s.forEach(function (v) {
if (w.config.yaxis[si] && w.config.yaxis[si].logarithmic) {
maxY = Math.max(v, maxY);
minY = Math.min(v, minY);
}
});
});
range = Math.pow(gl.yRange[i], Math.abs(minY - maxY) / gl.yRange[i]);
gl.yLogRatio[i] = range / gl.gridHeight;
return range;
}
});
return gl.yLogRatio;
}
// Some config objects can be array - and we need to extend them correctly
}], [{
key: 'checkComboSeries',
value: function checkComboSeries(series) {
var comboCharts = false;
var comboChartsHasBars = false;
// if user specified a type in series too, turn on comboCharts flag
if (series.length && typeof series[0].type !== 'undefined') {
comboCharts = true;
series.forEach(function (s) {
if (s.type === 'bar' || s.type === 'column') {
comboChartsHasBars = true;
}
});
}
return {
comboCharts: comboCharts,
comboChartsHasBars: comboChartsHasBars
};
}
}, {
key: 'extendArrayProps',
value: function extendArrayProps(configInstance, options) {
if (options.yaxis) {
options = configInstance.extendYAxis(options);
}
if (options.annotations) {
if (options.annotations.yaxis) {
options = configInstance.extendYAxisAnnotations(options);
}
if (options.annotations.xaxis) {
options = configInstance.extendXAxisAnnotations(options);
}
if (options.annotations.points) {
options = configInstance.extendPointAnnotations(options);
}
}
return options;
}
}]);
return CoreUtils;
}();
exports.default = CoreUtils;
/***/ }),
/* 3 */
/***/ (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; }; }();
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Filters Class for setting hover/active states on the paths.
*
* @module Formatters
**/
var Filters = 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;
if (w.config.chart.dropShadow.enabled) {
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 (_Utils2.default.isFirefox()) {
return;
}
el.unfilter(true);
var filter = new window.SVG.Filter();
filter.size('120%', '180%', '-5%', '-40%');
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');
}
// 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 (_Utils2.default.isFirefox()) {
return;
}
el.unfilter(true);
var filter = new window.SVG.Filter();
filter.size('120%', '180%', '-5%', '-40%');
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');
}
}, {
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;
}
default:
// do nothing
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;
el.unfilter(true);
color = Array.isArray(color) ? color[i] : color;
var filter = new window.SVG.Filter();
filter.size('120%', '180%', '-5%', '-40%');
el.filter(function (add) {
var shadowBlur = null;
if (_Utils2.default.isSafari() || _Utils2.default.isFirefox() || _Utils2.default.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');
}
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);
}
}
}
}
}]);
return Filters;
}();
exports.default = Filters;
/***/ }),
/* 4 */
/***/ (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; }; }();
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Fill Class for setting fill options of the paths.
*
* @module Fill
**/
var Fill = function () {
function Fill(ctx) {
_classCallCheck(this, Fill);
this.ctx = ctx;
this.w = ctx.w;
this.opts = null;
this.seriesIndex = 0;
}
_createClass(Fill, [{
key: 'clippedImgArea',
value: function clippedImgArea(params) {
var w = this.w;
var cnf = w.config;
var svgW = parseInt(w.globals.gridWidth);
var svgH = parseInt(w.globals.gridHeight);
var size = svgW > svgH ? svgW : svgH;
var fillImg = params.image;
var imgWidth = 0;
var imgHeight = 0;
if (typeof params.width === 'undefined' && typeof params.height === 'undefined') {
if (cnf.fill.image.width !== undefined && cnf.fill.image.height !== undefined) {
imgWidth = cnf.fill.image.width + 1;
imgHeight = cnf.fill.image.height;
} else {
imgWidth = size + 1;
imgHeight = size;
}
} else {
imgWidth = params.width;
imgHeight = params.height;
}
var elPattern = document.createElementNS(w.globals.SVGNS, 'pattern');
_Graphics2.default.setAttrs(elPattern, {
id: params.patternID,
patternUnits: params.patternUnits ? params.patternUnits : 'userSpaceOnUse',
width: imgWidth + 'px',
height: imgHeight + 'px'
});
var elImage = document.createElementNS(w.globals.SVGNS, 'image');
elPattern.appendChild(elImage);
elImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', fillImg);
_Graphics2.default.setAttrs(elImage, {
x: 0,
y: 0,
preserveAspectRatio: 'none',
width: imgWidth + 'px',
height: imgHeight + 'px'
});
elImage.style.opacity = params.opacity;
w.globals.dom.elDefs.node.appendChild(elPattern);
}
}, {
key: 'getSeriesIndex',
value: function getSeriesIndex(opts) {
var w = this.w;
if (w.config.chart.type === 'bar' && w.config.plotOptions.bar.distributed || w.config.chart.type === 'heatmap') {
this.seriesIndex = opts.seriesNumber;
} else {
this.seriesIndex = opts.seriesNumber % w.globals.series.length;
}
return this.seriesIndex;
}
}, {
key: 'fillPath',
value: function fillPath(opts) {
var w = this.w;
this.opts = opts;
var cnf = this.w.config;
var pathFill = void 0;
var patternFill = void 0,
gradientFill = void 0;
this.seriesIndex = this.getSeriesIndex(opts);
var fillColors = this.getFillColors();
var fillColor = fillColors[this.seriesIndex];
if (typeof fillColor === 'function') {
fillColor = fillColor({
seriesIndex: this.seriesIndex,
value: opts.value,
w: w
});
}
var fillType = this.getFillType(this.seriesIndex);
var fillOpacity = Array.isArray(cnf.fill.opacity) ? cnf.fill.opacity[this.seriesIndex] : cnf.fill.opacity;
var defaultColor = fillColor;
if (opts.color) {
fillColor = opts.color;
}
if (fillColor.indexOf('rgb') === -1) {
defaultColor = _Utils2.default.hexToRgba(fillColor, fillOpacity);
} else {
if (fillColor.indexOf('rgba') > -1) {
fillOpacity = 0 + '.' + _Utils2.default.getOpacityFromRGBA(fillColors[this.seriesIndex]);
}
}
if (fillType === 'pattern') {
patternFill = this.handlePatternFill(patternFill, fillColor, fillOpacity, defaultColor);
}
if (fillType === 'gradient') {
gradientFill = this.handleGradientFill(gradientFill, fillColor, fillOpacity, this.seriesIndex);
}
if (cnf.fill.image.src.length > 0 && fillType === 'image') {
if (opts.seriesNumber < cnf.fill.image.src.length) {
this.clippedImgArea({
opacity: fillOpacity,
image: cnf.fill.image.src[opts.seriesNumber],
patternUnits: opts.patternUnits,
patternID: 'pattern' + w.globals.cuid + (opts.seriesNumber + 1)
});
pathFill = 'url(#pattern' + w.globals.cuid + (opts.seriesNumber + 1) + ')';
} else {
pathFill = defaultColor;
}
} else if (fillType === 'gradient') {
pathFill = gradientFill;
} else if (fillType === 'pattern') {
pathFill = patternFill;
} else {
pathFill = defaultColor;
}
// override pattern/gradient if opts.solid is true
if (opts.solid) {
pathFill = defaultColor;
}
return pathFill;
}
}, {
key: 'getFillType',
value: function getFillType(seriesIndex) {
var w = this.w;
if (Array.isArray(w.config.fill.type)) {
return w.config.fill.type[seriesIndex];
} else {
return w.config.fill.type;
}
}
}, {
key: 'getFillColors',
value: function getFillColors() {
var w = this.w;
var cnf = w.config;
var opts = this.opts;
var fillColors = [];
if (w.globals.comboCharts) {
if (w.config.series[this.seriesIndex].type === 'line') {
if (w.globals.stroke.colors instanceof Array) {
fillColors = w.globals.stroke.colors;
} else {
fillColors.push(w.globals.stroke.colors);
}
} else {
if (w.globals.fill.colors instanceof Array) {
fillColors = w.globals.fill.colors;
} else {
fillColors.push(w.globals.fill.colors);
}
}
} else {
if (cnf.chart.type === 'line') {
if (w.globals.stroke.colors instanceof Array) {
fillColors = w.globals.stroke.colors;
} else {
fillColors.push(w.globals.stroke.colors);
}
} else {
if (w.globals.fill.colors instanceof Array) {
fillColors = w.globals.fill.colors;
} else {
fillColors.push(w.globals.fill.colors);
}
}
}
// colors passed in arguments
if (typeof opts.fillColors !== 'undefined') {
fillColors = [];
if (opts.fillColors instanceof Array) {
fillColors = opts.fillColors.slice();
} else {
fillColors.push(opts.fillColors);
}
}
return fillColors;
}
}, {
key: 'handlePatternFill',
value: function handlePatternFill(patternFill, fillColor, fillOpacity, defaultColor) {
var cnf = this.w.config;
var opts = this.opts;
var graphics = new _Graphics2.default(this.ctx);
var patternStrokeWidth = cnf.fill.pattern.strokeWidth === undefined ? Array.isArray(cnf.stroke.width) ? cnf.stroke.width[this.seriesIndex] : cnf.stroke.width : Array.isArray(cnf.fill.pattern.strokeWidth) ? cnf.fill.pattern.strokeWidth[this.seriesIndex] : cnf.fill.pattern.strokeWidth;
var patternLineColor = fillColor;
if (cnf.fill.pattern.style instanceof Array) {
if (typeof cnf.fill.pattern.style[opts.seriesNumber] !== 'undefined') {
var pf = graphics.drawPattern(cnf.fill.pattern.style[opts.seriesNumber], cnf.fill.pattern.width, cnf.fill.pattern.height, patternLineColor, patternStrokeWidth, fillOpacity);
patternFill = pf;
} else {
patternFill = defaultColor;
}
} else {
patternFill = graphics.drawPattern(cnf.fill.pattern.style, cnf.fill.pattern.width, cnf.fill.pattern.height, patternLineColor, patternStrokeWidth, fillOpacity);
}
return patternFill;
}
}, {
key: 'handleGradientFill',
value: function handleGradientFill(gradientFill, fillColor, fillOpacity, i) {
var cnf = this.w.config;
var opts = this.opts;
var graphics = new _Graphics2.default(this.ctx);
var utils = new _Utils2.default();
var type = cnf.fill.gradient.type;
var gradientFrom = void 0,
gradientTo = void 0;
var opacityFrom = cnf.fill.gradient.opacityFrom === undefined ? fillOpacity : Array.isArray(cnf.fill.gradient.opacityFrom) ? cnf.fill.gradient.opacityFrom[i] : cnf.fill.gradient.opacityFrom;
var opacityTo = cnf.fill.gradient.opacityTo === undefined ? fillOpacity : Array.isArray(cnf.fill.gradient.opacityTo) ? cnf.fill.gradient.opacityTo[i] : cnf.fill.gradient.opacityTo;
gradientFrom = fillColor;
if (cnf.fill.gradient.gradientToColors === undefined || cnf.fill.gradient.gradientToColors.length === 0) {
if (cnf.fill.gradient.shade === 'dark') {
gradientTo = utils.shadeColor(parseFloat(cnf.fill.gradient.shadeIntensity) * -1, fillColor);
} else {
gradientTo = utils.shadeColor(parseFloat(cnf.fill.gradient.shadeIntensity), fillColor);
}
} else {
gradientTo = cnf.fill.gradient.gradientToColors[opts.seriesNumber];
}
if (cnf.fill.gradient.inverseColors) {
var t = gradientFrom;
gradientFrom = gradientTo;
gradientTo = t;
}
gradientFill = graphics.drawGradient(type, gradientFrom, gradientTo, opacityFrom, opacityTo, opts.size, cnf.fill.gradient.stops, cnf.fill.gradient.colorStops, i);
return gradientFill;
}
}]);
return Fill;
}();
exports.default = Fill;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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);
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 Animation Class.
*
* @module Animations
**/
var Animations = 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 = void 0;
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;
return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
};
break;
}
case 'bounce':
{
easing = function easing(pos) {
if (pos < 1 / 2.75) {
return 7.5625 * pos * pos;
} else if (pos < 2 / 2.75) {
return 7.5625 * (pos -= 1.5 / 2.75) * pos + 0.75;
} else if (pos < 2.5 / 2.75) {
return 7.5625 * (pos -= 2.25 / 2.75) * pos + 0.9375;
} else {
return 7.5625 * (pos -= 2.625 / 2.75) * pos + 0.984375;
}
};
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) {
if (!from) from = 0;
el.attr({
r: from
}).animate(speed, easing).attr({
r: to
});
}
/*
** 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 () {
fn();
});
}
}, {
key: 'animatePathsGradually',
value: function animatePathsGradually(params) {
var el = params.el,
j = params.j,
pathFrom = params.pathFrom,
pathTo = params.pathTo,
speed = params.speed,
delay = params.delay,
strokeWidth = params.strokeWidth;
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) {
delayFactor = 0;
}
me.morphSVG(el, j, pathFrom, pathTo, speed, strokeWidth, delay * delayFactor);
}
}, {
key: 'showDelayedElements',
value: function showDelayedElements() {
this.w.globals.delayedElements.forEach(function (d) {
var ele = d.el;
ele.classList.remove('hidden');
});
}
// SVG.js animation for morphing one path to another
}, {
key: 'morphSVG',
value: function morphSVG(el, j, pathFrom, pathTo, speed, strokeWidth, delay) {
var _this = this;
var w = this.w;
if (!pathFrom) {
pathFrom = el.attr('pathFrom');
}
if (!pathTo) {
pathTo = el.attr('pathTo');
}
if (!pathFrom || pathFrom.indexOf('undefined') > -1 || pathFrom.indexOf('NaN') > -1) {
pathFrom = 'M 0 ' + w.globals.gridHeight;
speed = 1;
}
if (pathTo.indexOf('undefined') > -1 || pathTo.indexOf('NaN') > -1) {
pathTo = 'M 0 ' + w.globals.gridHeight;
speed = 1;
}
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 (_Utils2.default.isNumber(j)) {
if (j === w.globals.series[w.globals.maxValsInArrayIndex].length - 2 && w.globals.shouldAnimate) {
w.globals.animationEnded = true;
}
} else if (w.globals.shouldAnimate) {
w.globals.animationEnded = true;
if (typeof w.config.chart.events.animationEnd === 'function') {
w.config.chart.events.animationEnd(_this.ctx, w);
}
}
_this.showDelayedElements();
});
}
}]);
return Animations;
}();
exports.default = Animations;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Markers Class for drawing points on y values in axes charts.
*
* @module Markers
**/
var Markers = function () {
function Markers(ctx, opts) {
_classCallCheck(this, Markers);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(Markers, [{
key: 'setGlobalMarkerSize',
value: function setGlobalMarkerSize() {
var w = this.w;
w.globals.markers.size = Array.isArray(w.config.markers.size) ? w.config.markers.size : [w.config.markers.size];
if (w.globals.markers.size.length > 0) {
if (w.globals.markers.size.length < w.globals.series.length + 1) {
for (var i = 0; i <= w.globals.series.length; i++) {
if (typeof w.globals.markers.size[i] === 'undefined') {
w.globals.markers.size.push(w.globals.markers.size[0]);
}
}
}
} else {
w.globals.markers.size = w.config.series.map(function (s) {
return w.config.markers.size;
});
}
}
}, {
key: 'plotChartMarkers',
value: function plotChartMarkers(pointsPos, seriesIndex, j) {
var _this = this;
var w = this.w;
var i = seriesIndex;
var p = pointsPos;
var elPointsWrap = null;
var graphics = new _Graphics2.default(this.ctx);
var point = void 0;
if (w.globals.markers.size[seriesIndex] > 0) {
elPointsWrap = graphics.group({
class: 'apexcharts-series-markers'
});
elPointsWrap.attr('clip-path', 'url(#gridRectMarkerMask' + w.globals.cuid + ')');
}
if (p.x instanceof Array) {
var _loop = function _loop(q) {
var dataPointIndex = j;
// a small hack as we have 2 points for the first val to connect it
if (j === 1 && q === 0) dataPointIndex = 0;
if (j === 1 && q === 1) dataPointIndex = 1;
var PointClasses = 'apexcharts-marker';
if ((w.config.chart.type === 'line' || w.config.chart.type === 'area') && !w.globals.comboCharts && !w.config.tooltip.intersect) {
PointClasses += ' no-pointer-events';
}
var shouldMarkerDraw = Array.isArray(w.config.markers.size) ? w.globals.markers.size[seriesIndex] > 0 : w.config.markers.size > 0;
if (shouldMarkerDraw) {
if (_Utils2.default.isNumber(p.y[q])) {
PointClasses += ' w' + (Math.random() + 1).toString(36).substring(4);
} else {
PointClasses = 'apexcharts-nullpoint';
}
var opts = _this.getMarkerConfig(PointClasses, seriesIndex);
// discrete markers is an option where user can specify a particular marker with different size and color
w.config.markers.discrete.map(function (marker) {
if (marker.seriesIndex === seriesIndex && marker.dataPointIndex === dataPointIndex) {
opts.pointStrokeColor = marker.strokeColor;
opts.pointFillColor = marker.fillColor;
opts.pSize = marker.size;
}
});
if (w.config.series[i].data[j]) {
if (w.config.series[i].data[j].fillColor) {
opts.pointFillColor = w.config.series[i].data[j].fillColor;
}
if (w.config.series[i].data[j].strokeColor) {
opts.pointStrokeColor = w.config.series[i].data[j].strokeColor;
}
}
point = graphics.drawMarker(p.x[q], p.y[q], opts);
point.attr('rel', dataPointIndex);
point.attr('j', dataPointIndex);
point.attr('index', seriesIndex);
point.node.setAttribute('default-marker-size', opts.pSize);
var filters = new _Filters2.default(_this.ctx);
filters.setSelectionFilter(point, seriesIndex, dataPointIndex);
_this.addEvents(point);
if (elPointsWrap) {
elPointsWrap.add(point);
}
} else {
// dynamic array creation - multidimensional
if (typeof w.globals.pointsArray[seriesIndex] === 'undefined') w.globals.pointsArray[seriesIndex] = [];
w.globals.pointsArray[seriesIndex].push([p.x[q], p.y[q]]);
}
};
for (var q = 0; q < p.x.length; q++) {
_loop(q);
}
}
return elPointsWrap;
}
}, {
key: 'getMarkerConfig',
value: function getMarkerConfig(cssClass, seriesIndex) {
var w = this.w;
var pStyle = this.getMarkerStyle(seriesIndex);
var pSize = w.globals.markers.size[seriesIndex];
return {
pSize: pSize,
pRadius: w.config.markers.radius,
pWidth: w.config.markers.strokeWidth,
pointStrokeColor: pStyle.pointStrokeColor,
pointFillColor: pStyle.pointFillColor,
shape: w.config.markers.shape instanceof Array ? w.config.markers.shape[seriesIndex] : w.config.markers.shape,
class: cssClass,
pointStrokeOpacity: w.config.markers.strokeOpacity,
pointFillOpacity: w.config.markers.fillOpacity,
seriesIndex: seriesIndex
};
}
}, {
key: 'addEvents',
value: function addEvents(circle) {
var graphics = new _Graphics2.default(this.ctx);
circle.node.addEventListener('mouseenter', graphics.pathMouseEnter.bind(this.ctx, circle));
circle.node.addEventListener('mouseleave', graphics.pathMouseLeave.bind(this.ctx, circle));
circle.node.addEventListener('mousedown', graphics.pathMouseDown.bind(this.ctx, circle));
circle.node.addEventListener('touchstart', graphics.pathMouseDown.bind(this.ctx, circle), { passive: true });
}
}, {
key: 'getMarkerStyle',
value: function getMarkerStyle(seriesIndex) {
var w = this.w;
var colors = w.globals.markers.colors;
var strokeColors = w.config.markers.strokeColor || w.config.markers.strokeColors;
var pointStrokeColor = strokeColors instanceof Array ? strokeColors[seriesIndex] : strokeColors;
var pointFillColor = colors instanceof Array ? colors[seriesIndex] : colors;
return {
pointStrokeColor: pointStrokeColor,
pointFillColor: pointFillColor
};
}
}]);
return Markers;
}();
exports.default = Markers;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Series Class for interation with the Series of the chart.
*
* @module Series
**/
var Series = function () {
function Series(ctx) {
_classCallCheck(this, Series);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(Series, [{
key: 'getAllSeriesEls',
value: function getAllSeriesEls() {
return this.w.globals.dom.baseEl.querySelectorAll('.apexcharts-series');
}
}, {
key: 'getSeriesByName',
value: function getSeriesByName(seriesName) {
return this.w.globals.dom.baseEl.querySelector('[seriesName=\'' + _Utils2.default.escapeString(seriesName) + '\']');
}
}, {
key: 'addCollapsedClassToSeries',
value: function addCollapsedClassToSeries(elSeries, index) {
var w = this.w;
function iterateOnAllCollapsedSeries(series) {
for (var cs = 0; cs < series.length; cs++) {
if (series[cs].index === index) {
elSeries.node.classList.add('apexcharts-series-collapsed');
}
}
}
iterateOnAllCollapsedSeries(w.globals.collapsedSeries);
iterateOnAllCollapsedSeries(w.globals.ancillaryCollapsedSeries);
}
}, {
key: 'toggleSeriesOnHover',
value: function toggleSeriesOnHover(e, targetElement) {
var w = this.w;
var allSeriesEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series');
if (e.type === 'mousemove') {
var seriesCnt = parseInt(targetElement.getAttribute('rel')) - 1;
var seriesEl = null;
if (w.globals.axisCharts || w.config.chart.type === 'radialBar') {
if (w.globals.axisCharts) {
seriesEl = w.globals.dom.baseEl.querySelector('.apexcharts-series[data\\:realIndex=\'' + seriesCnt + '\']');
} else {
seriesEl = w.globals.dom.baseEl.querySelector('.apexcharts-series[rel=\'' + (seriesCnt + 1) + '\']');
}
} else {
seriesEl = w.globals.dom.baseEl.querySelector('.apexcharts-series[rel=\'' + (seriesCnt + 1) + '\'] path');
}
for (var se = 0; se < allSeriesEls.length; se++) {
allSeriesEls[se].classList.add('legend-mouseover-inactive');
}
if (seriesEl !== null) {
if (!w.globals.axisCharts) {
seriesEl.parentNode.classList.remove('legend-mouseover-inactive');
}
seriesEl.classList.remove('legend-mouseover-inactive');
}
} else if (e.type === 'mouseout') {
for (var _se = 0; _se < allSeriesEls.length; _se++) {
allSeriesEls[_se].classList.remove('legend-mouseover-inactive');
}
}
}
}, {
key: 'highlightRangeInSeries',
value: function highlightRangeInSeries(e, targetElement) {
var w = this.w;
var allHeatMapElements = w.globals.dom.baseEl.querySelectorAll('.apexcharts-heatmap-rect');
var allActive = function allActive() {
for (var i = 0; i < allHeatMapElements.length; i++) {
allHeatMapElements[i].classList.remove('legend-mouseover-inactive');
}
};
var allInactive = function allInactive() {
for (var i = 0; i < allHeatMapElements.length; i++) {
allHeatMapElements[i].classList.add('legend-mouseover-inactive');
}
};
var selectedActive = function selectedActive(range) {
for (var i = 0; i < allHeatMapElements.length; i++) {
var val = parseInt(allHeatMapElements[i].getAttribute('val'));
if (val >= range.from && val <= range.to) {
allHeatMapElements[i].classList.remove('legend-mouseover-inactive');
}
}
};
if (e.type === 'mousemove') {
var seriesCnt = parseInt(targetElement.getAttribute('rel')) - 1;
allActive();
allInactive();
var range = w.config.plotOptions.heatmap.colorScale.ranges[seriesCnt];
selectedActive(range);
} else if (e.type === 'mouseout') {
allActive();
}
}
}, {
key: 'getActiveSeriesIndex',
value: function getActiveSeriesIndex() {
var w = this.w;
var activeIndex = 0;
if (w.globals.series.length > 1) {
// active series flag is required to know if user has not deactivated via legend click
var firstActiveSeriesIndex = w.globals.series.map(function (series, index) {
if (series.length > 0 && w.config.series[index].type !== 'bar' && w.config.series[index].type !== 'column') {
return index;
} else {
return -1;
}
});
for (var a = 0; a < firstActiveSeriesIndex.length; a++) {
if (firstActiveSeriesIndex[a] !== -1) {
activeIndex = firstActiveSeriesIndex[a];
break;
}
}
}
return activeIndex;
}
}, {
key: 'getActiveConfigSeriesIndex',
value: function getActiveConfigSeriesIndex() {
var w = this.w;
var activeIndex = 0;
if (w.config.series.length > 1) {
// active series flag is required to know if user has not deactivated via legend click
var firstActiveSeriesIndex = w.config.series.map(function (series, index) {
if (series.data && series.data.length > 0) {
return index;
} else {
return -1;
}
});
for (var a = 0; a < firstActiveSeriesIndex.length; a++) {
if (firstActiveSeriesIndex[a] !== -1) {
activeIndex = firstActiveSeriesIndex[a];
break;
}
}
}
return activeIndex;
}
}, {
key: 'getPreviousPaths',
value: function getPreviousPaths() {
var w = this.w;
w.globals.previousPaths = [];
function pushPaths(seriesEls, i, type) {
var paths = seriesEls[i].childNodes;
var dArr = {
type: type,
paths: [],
realIndex: seriesEls[i].getAttribute('data:realIndex')
};
for (var j = 0; j < paths.length; j++) {
if (paths[j].hasAttribute('pathTo')) {
var d = paths[j].getAttribute('pathTo');
dArr.paths.push({
d: d
});
}
}
w.globals.previousPaths.push(dArr);
}
var linePaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-line-series .apexcharts-series');
if (linePaths.length > 0) {
for (var p = linePaths.length - 1; p >= 0; p--) {
pushPaths(linePaths, p, 'line');
}
}
var areapaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-area-series .apexcharts-series');
if (areapaths.length > 0) {
for (var i = areapaths.length - 1; i >= 0; i--) {
pushPaths(areapaths, i, 'area');
}
}
var barPaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-bar-series .apexcharts-series');
if (barPaths.length > 0) {
for (var _p = 0; _p < barPaths.length; _p++) {
pushPaths(barPaths, _p, 'bar');
}
}
var candlestickPaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-candlestick-series .apexcharts-series');
if (candlestickPaths.length > 0) {
for (var _p2 = 0; _p2 < candlestickPaths.length; _p2++) {
pushPaths(candlestickPaths, _p2, 'candlestick');
}
}
var radarPaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-radar-series .apexcharts-series');
if (radarPaths.length > 0) {
for (var _p3 = 0; _p3 < radarPaths.length; _p3++) {
pushPaths(radarPaths, _p3, 'radar');
}
}
var bubblepaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-bubble-series .apexcharts-series');
if (bubblepaths.length > 0) {
for (var s = 0; s < bubblepaths.length; s++) {
var seriesEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-bubble-series .apexcharts-series[data\\:realIndex=\'' + s + '\'] circle');
var dArr = [];
for (var _i = 0; _i < seriesEls.length; _i++) {
dArr.push({
x: seriesEls[_i].getAttribute('cx'),
y: seriesEls[_i].getAttribute('cy'),
r: seriesEls[_i].getAttribute('r')
});
}
w.globals.previousPaths.push(dArr);
}
}
var scatterpaths = w.globals.dom.baseEl.querySelectorAll('.apexcharts-scatter-series .apexcharts-series');
if (scatterpaths.length > 0) {
for (var _s = 0; _s < scatterpaths.length; _s++) {
var _seriesEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-scatter-series .apexcharts-series[data\\:realIndex=\'' + _s + '\'] circle');
var _dArr = [];
for (var _i2 = 0; _i2 < _seriesEls.length; _i2++) {
_dArr.push({
x: _seriesEls[_i2].getAttribute('cx'),
y: _seriesEls[_i2].getAttribute('cy'),
r: _seriesEls[_i2].getAttribute('r')
});
}
w.globals.previousPaths.push(_dArr);
}
}
var heatmapColors = w.globals.dom.baseEl.querySelectorAll('.apexcharts-heatmap .apexcharts-series');
if (heatmapColors.length > 0) {
for (var h = 0; h < heatmapColors.length; h++) {
var _seriesEls2 = w.globals.dom.baseEl.querySelectorAll('.apexcharts-heatmap .apexcharts-series[data\\:realIndex=\'' + h + '\'] rect');
var _dArr2 = [];
for (var _i3 = 0; _i3 < _seriesEls2.length; _i3++) {
_dArr2.push({
color: _seriesEls2[_i3].getAttribute('color')
});
}
w.globals.previousPaths.push(_dArr2);
}
}
if (!w.globals.axisCharts) {
// for non-axis charts (i.e., circular charts, pathFrom is not usable. We need whole series)
w.globals.previousPaths = w.globals.series;
}
}
}, {
key: 'handleNoData',
value: function handleNoData() {
var w = this.w;
var me = this;
var noDataOpts = w.config.noData;
var graphics = new _Graphics2.default(me.ctx);
var x = w.globals.svgWidth / 2;
var y = w.globals.svgHeight / 2;
var textAnchor = 'middle';
w.globals.noData = true;
w.globals.animationEnded = true;
if (noDataOpts.align === 'left') {
x = 10;
textAnchor = 'start';
} else if (noDataOpts.align === 'right') {
x = w.globals.svgWidth - 10;
textAnchor = 'end';
}
if (noDataOpts.verticalAlign === 'top') {
y = 50;
} else if (noDataOpts.verticalAlign === 'bottom') {
y = w.globals.svgHeight - 50;
}
x = x + noDataOpts.offsetX;
y = y + parseInt(noDataOpts.style.fontSize) + 2;
if (noDataOpts.text !== undefined && noDataOpts.text !== '') {
var titleText = graphics.drawText({
x: x,
y: y,
text: noDataOpts.text,
textAnchor: textAnchor,
fontSize: noDataOpts.style.fontSize,
fontFamily: noDataOpts.style.fontFamily,
foreColor: noDataOpts.style.color,
opacity: 1,
class: 'apexcharts-text-nodata'
});
titleText.node.setAttribute('class', 'apexcharts-title-text');
w.globals.dom.Paper.add(titleText);
}
}
// When user clicks on legends, the collapsed series is filled with [0,0,0,...,0]
// This is because we don't want to alter the series' length as it is used at many places
}, {
key: 'setNullSeriesToZeroValues',
value: function setNullSeriesToZeroValues(series) {
var w = this.w;
for (var sl = 0; sl < series.length; sl++) {
if (series[sl].length === 0) {
for (var j = 0; j < series[w.globals.maxValsInArrayIndex].length; j++) {
series[sl].push(0);
}
}
}
return series;
}
}, {
key: 'hasAllSeriesEqualX',
value: function hasAllSeriesEqualX() {
var equalLen = true;
var w = this.w;
var filteredSerX = this.filteredSeriesX();
for (var i = 0; i < filteredSerX.length - 1; i++) {
if (filteredSerX[i][0] !== filteredSerX[i + 1][0]) {
equalLen = false;
break;
}
}
w.globals.allSeriesHasEqualX = equalLen;
return equalLen;
}
}, {
key: 'filteredSeriesX',
value: function filteredSeriesX() {
var w = this.w;
var filteredSeriesX = w.globals.seriesX.map(function (ser, index) {
if (ser.length > 0) {
return ser;
} else {
return [];
}
});
return filteredSeriesX;
}
}]);
return Series;
}();
exports.default = Series;
/***/ }),
/* 8 */
/***/ (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; }; }();
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _DataLabels = __webpack_require__(9);
var _DataLabels2 = _interopRequireDefault(_DataLabels);
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 Bar Class responsible for drawing both Columns and Bars.
*
* @module Bar
**/
var Bar = function () {
function Bar(ctx, xyRatios) {
_classCallCheck(this, Bar);
this.ctx = ctx;
this.w = ctx.w;
var w = this.w;
this.barOptions = w.config.plotOptions.bar;
this.isHorizontal = this.barOptions.horizontal;
this.strokeWidth = w.config.stroke.width;
this.isNullValue = false;
this.xyRatios = xyRatios;
if (this.xyRatios !== null) {
this.xRatio = xyRatios.xRatio;
this.yRatio = xyRatios.yRatio;
this.invertedXRatio = xyRatios.invertedXRatio;
this.invertedYRatio = xyRatios.invertedYRatio;
this.baseLineY = xyRatios.baseLineY;
this.baseLineInvertedY = xyRatios.baseLineInvertedY;
}
this.yaxisIndex = 0;
this.seriesLen = 0;
}
/** primary draw method which is called on bar object
* @memberof Bar
* @param {array} series - user supplied series values
* @param {int} seriesIndex - the index by which series will be drawn on the svg
* @return {node} element which is supplied to parent chart draw method for appending
**/
_createClass(Bar, [{
key: 'draw',
value: function draw(series, seriesIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var coreUtils = new _CoreUtils2.default(this.ctx, w);
series = coreUtils.getLogSeries(series);
this.series = series;
this.yRatio = coreUtils.getLogYRatios(this.yRatio);
this.initVariables(series);
var ret = graphics.group({
class: 'apexcharts-bar-series apexcharts-plot-series'
});
if (w.config.dataLabels.enabled) {
if (this.totalItems > w.config.plotOptions.bar.dataLabels.maxItems) {
console.warn('WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.');
}
}
for (var i = 0, bc = 0; i < series.length; i++, bc++) {
var pathTo = void 0,
pathFrom = void 0;
var x = void 0,
y = void 0,
xDivision = void 0,
// xDivision is the GRIDWIDTH divided by number of datapoints (columns)
yDivision = void 0,
// yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
zeroH = void 0,
// zeroH is the baseline where 0 meets y axis
zeroW = void 0; // zeroW is the baseline where 0 meets x axis
var yArrj = []; // hold y values of current iterating series
var xArrj = []; // hold x values of current iterating series
var realIndex = w.globals.comboCharts ? seriesIndex[i] : i;
// el to which series will be drawn
var elSeries = graphics.group({
class: 'apexcharts-series',
rel: i + 1,
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[realIndex]),
'data:realIndex': realIndex
});
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex);
if (series[i].length > 0) {
this.visibleI = this.visibleI + 1;
}
var strokeWidth = 0;
var barHeight = 0;
var barWidth = 0;
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex;
}
this.isReversed = w.config.yaxis[this.yaxisIndex] && w.config.yaxis[this.yaxisIndex].reversed;
var initPositions = this.initialPositions();
y = initPositions.y;
barHeight = initPositions.barHeight;
yDivision = initPositions.yDivision;
zeroW = initPositions.zeroW;
x = initPositions.x;
barWidth = initPositions.barWidth;
xDivision = initPositions.xDivision;
zeroH = initPositions.zeroH;
if (!this.horizontal) {
xArrj.push(x + barWidth / 2);
}
// eldatalabels
var elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels'
});
for (var j = 0, tj = w.globals.dataPoints; j < w.globals.dataPoints; j++, tj--) {
if (typeof this.series[i][j] === 'undefined' || series[i][j] === null) {
this.isNullValue = true;
} else {
this.isNullValue = false;
}
if (w.config.stroke.show) {
if (this.isNullValue) {
strokeWidth = 0;
} else {
strokeWidth = Array.isArray(this.strokeWidth) ? this.strokeWidth[realIndex] : this.strokeWidth;
}
}
var paths = null;
if (this.isHorizontal) {
paths = this.drawBarPaths({
indexes: { i: i, j: j, realIndex: realIndex, bc: bc },
barHeight: barHeight,
strokeWidth: strokeWidth,
pathTo: pathTo,
pathFrom: pathFrom,
zeroW: zeroW,
x: x,
y: y,
yDivision: yDivision,
elSeries: elSeries
});
barWidth = this.series[i][j] / this.invertedYRatio;
} else {
paths = this.drawColumnPaths({
indexes: { i: i, j: j, realIndex: realIndex, bc: bc },
x: x,
y: y,
xDivision: xDivision,
pathTo: pathTo,
pathFrom: pathFrom,
barWidth: barWidth,
zeroH: zeroH,
strokeWidth: strokeWidth,
elSeries: elSeries
});
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex];
}
pathTo = paths.pathTo;
pathFrom = paths.pathFrom;
y = paths.y;
x = paths.x;
// push current X
if (j > 0) {
xArrj.push(x + barWidth / 2);
}
yArrj.push(y);
var pathFill = this.getPathFillColor(series, i, j, realIndex);
elSeries = this.renderSeries({
realIndex: realIndex,
pathFill: pathFill,
j: j,
i: i,
pathFrom: pathFrom,
pathTo: pathTo,
strokeWidth: strokeWidth,
elSeries: elSeries,
x: x,
y: y,
series: series,
barHeight: barHeight,
barWidth: barWidth,
elDataLabelsWrap: elDataLabelsWrap,
visibleSeries: this.visibleI,
type: 'bar'
});
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrj;
w.globals.seriesYvalues[realIndex] = yArrj;
ret.add(elSeries);
}
return ret;
}
}, {
key: 'getPathFillColor',
value: function getPathFillColor(series, i, j, realIndex) {
var w = this.w;
var fill = new _Fill2.default(this.ctx);
var fillColor = null;
var seriesNumber = this.barOptions.distributed ? j : i;
if (this.barOptions.colors.ranges.length > 0) {
var colorRange = this.barOptions.colors.ranges;
colorRange.map(function (range) {
if (series[i][j] >= range.from && series[i][j] <= range.to) {
fillColor = range.color;
}
});
}
if (w.config.series[i].data[j] && w.config.series[i].data[j].fillColor) {
fillColor = w.config.series[i].data[j].fillColor;
}
var pathFill = fill.fillPath({
seriesNumber: this.barOptions.distributed ? seriesNumber : realIndex,
color: fillColor,
value: series[i][j]
});
return pathFill;
}
}, {
key: 'renderSeries',
value: function renderSeries(_ref) {
var realIndex = _ref.realIndex,
pathFill = _ref.pathFill,
lineFill = _ref.lineFill,
j = _ref.j,
i = _ref.i,
pathFrom = _ref.pathFrom,
pathTo = _ref.pathTo,
strokeWidth = _ref.strokeWidth,
elSeries = _ref.elSeries,
x = _ref.x,
y = _ref.y,
series = _ref.series,
barHeight = _ref.barHeight,
barWidth = _ref.barWidth,
elDataLabelsWrap = _ref.elDataLabelsWrap,
visibleSeries = _ref.visibleSeries,
type = _ref.type;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
if (!lineFill) {
/* fix apexcharts#341 */
lineFill = this.barOptions.distributed ? w.globals.stroke.colors[j] : w.globals.stroke.colors[realIndex];
}
if (w.config.series[i].data[j] && w.config.series[i].data[j].strokeColor) {
lineFill = w.config.series[i].data[j].strokeColor;
}
if (this.isNullValue) {
pathFill = 'none';
}
var delay = j / w.config.chart.animations.animateGradually.delay * (w.config.chart.animations.speed / w.globals.dataPoints) / 2.4;
var renderedPath = graphics.renderPaths({
i: i,
j: j,
realIndex: realIndex,
pathFrom: pathFrom,
pathTo: pathTo,
stroke: lineFill,
strokeWidth: strokeWidth,
strokeLineCap: w.config.stroke.lineCap,
fill: pathFill,
animationDelay: delay,
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: 'apexcharts-' + type + '-area',
id: 'apexcharts-' + type + '-area'
});
renderedPath.attr('clip-path', 'url(#gridRectMask' + w.globals.cuid + ')');
var filters = new _Filters2.default(this.ctx);
filters.setSelectionFilter(renderedPath, realIndex, j);
elSeries.add(renderedPath);
var dataLabels = this.calculateDataLabelsPos({
x: x,
y: y,
i: i,
j: j,
series: series,
realIndex: realIndex,
barHeight: barHeight,
barWidth: barWidth,
renderedPath: renderedPath,
visibleSeries: visibleSeries
});
if (dataLabels !== null) {
elDataLabelsWrap.add(dataLabels);
}
elSeries.add(elDataLabelsWrap);
return elSeries;
}
}, {
key: 'initVariables',
value: function initVariables(series) {
var w = this.w;
this.series = series;
this.totalItems = 0;
this.seriesLen = 0;
this.visibleI = -1;
this.visibleItems = 1; // number of visible bars after user zoomed in/out
for (var sl = 0; sl < series.length; sl++) {
if (series[sl].length > 0) {
this.seriesLen = this.seriesLen + 1;
this.totalItems += series[sl].length;
}
if (w.globals.isXNumeric) {
// get max visible items
for (var j = 0; j < series[sl].length; j++) {
if (w.globals.seriesX[sl][j] > w.globals.minX && w.globals.seriesX[sl][j] < w.globals.maxX) {
this.visibleItems++;
}
}
} else {
this.visibleItems = w.globals.dataPoints;
}
}
if (this.seriesLen === 0) {
// A small adjustment when combo charts are used
this.seriesLen = 1;
}
}
}, {
key: 'initialPositions',
value: function initialPositions() {
var w = this.w;
var x = void 0,
y = void 0,
yDivision = void 0,
xDivision = void 0,
barHeight = void 0,
barWidth = void 0,
zeroH = void 0,
zeroW = void 0;
if (this.isHorizontal) {
// height divided into equal parts
yDivision = w.globals.gridHeight / w.globals.dataPoints;
barHeight = yDivision / this.seriesLen;
if (w.globals.isXNumeric) {
yDivision = w.globals.gridHeight / this.totalItems;
barHeight = yDivision / this.seriesLen;
}
barHeight = barHeight * parseInt(this.barOptions.barHeight) / 100;
zeroW = this.baseLineInvertedY + w.globals.padHorizontal + (this.isReversed ? w.globals.gridWidth : 0) - (this.isReversed ? this.baseLineInvertedY * 2 : 0);
y = (yDivision - barHeight * this.seriesLen) / 2;
} else {
// width divided into equal parts
xDivision = w.globals.gridWidth / this.visibleItems;
barWidth = xDivision / this.seriesLen * parseInt(this.barOptions.columnWidth) / 100;
if (w.globals.isXNumeric) {
// max barwidth should be equal to minXDiff to avoid overlap
xDivision = w.globals.minXDiff / this.xRatio;
barWidth = xDivision / this.seriesLen * parseInt(this.barOptions.columnWidth) / 100;
}
zeroH = w.globals.gridHeight - this.baseLineY[this.yaxisIndex] - (this.isReversed ? w.globals.gridHeight : 0) + (this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0);
x = w.globals.padHorizontal + (xDivision - barWidth * this.seriesLen) / 2;
}
return {
x: x,
y: y,
yDivision: yDivision,
xDivision: xDivision,
barHeight: barHeight,
barWidth: barWidth,
zeroH: zeroH,
zeroW: zeroW
};
}
}, {
key: 'drawBarPaths',
value: function drawBarPaths(_ref2) {
var indexes = _ref2.indexes,
barHeight = _ref2.barHeight,
strokeWidth = _ref2.strokeWidth,
pathTo = _ref2.pathTo,
pathFrom = _ref2.pathFrom,
zeroW = _ref2.zeroW,
x = _ref2.x,
y = _ref2.y,
yDivision = _ref2.yDivision,
elSeries = _ref2.elSeries;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var i = indexes.i;
var j = indexes.j;
var realIndex = indexes.realIndex;
var bc = indexes.bc;
if (w.globals.isXNumeric) {
y = (w.globals.seriesX[i][j] - w.globals.minX) / this.invertedXRatio - barHeight;
}
var barYPosition = y + barHeight * this.visibleI;
pathTo = graphics.move(zeroW, barYPosition);
pathFrom = graphics.move(zeroW, barYPosition);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPathFrom(realIndex, j);
}
if (typeof this.series[i][j] === 'undefined' || this.series[i][j] === null) {
x = zeroW;
} else {
x = zeroW + this.series[i][j] / this.invertedYRatio - (this.isReversed ? this.series[i][j] / this.invertedYRatio : 0) * 2;
}
var endingShapeOpts = {
barHeight: barHeight,
strokeWidth: strokeWidth,
barYPosition: barYPosition,
x: x,
zeroW: zeroW
};
var endingShape = this.barEndingShape(w, endingShapeOpts, this.series, i, j);
pathTo = pathTo + graphics.line(endingShape.newX, barYPosition) + endingShape.path + graphics.line(zeroW, barYPosition + barHeight - strokeWidth) + graphics.line(zeroW, barYPosition);
pathFrom = pathFrom + graphics.line(zeroW, barYPosition) + endingShape.ending_p_from + graphics.line(zeroW, barYPosition + barHeight - strokeWidth) + graphics.line(zeroW, barYPosition + barHeight - strokeWidth) + graphics.line(zeroW, barYPosition);
if (!w.globals.isXNumeric) {
y = y + yDivision;
}
if (this.barOptions.colors.backgroundBarColors.length > 0 && i === 0) {
if (bc >= this.barOptions.colors.backgroundBarColors.length) {
bc = 0;
}
var bcolor = this.barOptions.colors.backgroundBarColors[bc];
var rect = graphics.drawRect(0, barYPosition - barHeight * this.visibleI, w.globals.gridWidth, barHeight * this.seriesLen, 0, bcolor, this.barOptions.colors.backgroundBarOpacity);
elSeries.add(rect);
rect.node.classList.add('apexcharts-backgroundBar');
}
return {
pathTo: pathTo,
pathFrom: pathFrom,
x: x,
y: y,
barYPosition: barYPosition
};
}
}, {
key: 'drawColumnPaths',
value: function drawColumnPaths(_ref3) {
var indexes = _ref3.indexes,
x = _ref3.x,
y = _ref3.y,
xDivision = _ref3.xDivision,
pathTo = _ref3.pathTo,
pathFrom = _ref3.pathFrom,
barWidth = _ref3.barWidth,
zeroH = _ref3.zeroH,
strokeWidth = _ref3.strokeWidth,
elSeries = _ref3.elSeries;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var i = indexes.i;
var j = indexes.j;
var realIndex = indexes.realIndex;
var bc = indexes.bc;
if (w.globals.isXNumeric) {
x = (w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2;
}
var barXPosition = x + barWidth * this.visibleI;
pathTo = graphics.move(barXPosition, zeroH);
pathFrom = graphics.move(barXPosition, zeroH);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPathFrom(realIndex, j);
}
if (typeof this.series[i][j] === 'undefined' || this.series[i][j] === null) {
y = zeroH;
} else {
y = zeroH - this.series[i][j] / this.yRatio[this.yaxisIndex] + (this.isReversed ? this.series[i][j] / this.yRatio[this.yaxisIndex] : 0) * 2;
}
var endingShapeOpts = {
barWidth: barWidth,
strokeWidth: strokeWidth,
barXPosition: barXPosition,
y: y,
zeroH: zeroH
};
var endingShape = this.barEndingShape(w, endingShapeOpts, this.series, i, j);
pathTo = pathTo + graphics.line(barXPosition, endingShape.newY) + endingShape.path + graphics.line(barXPosition + barWidth - strokeWidth, zeroH) + graphics.line(barXPosition - strokeWidth / 2, zeroH);
pathFrom = pathFrom + graphics.line(barXPosition, zeroH) + endingShape.ending_p_from + graphics.line(barXPosition + barWidth - strokeWidth, zeroH) + graphics.line(barXPosition + barWidth - strokeWidth, zeroH) + graphics.line(barXPosition - strokeWidth / 2, zeroH);
if (!w.globals.isXNumeric) {
x = x + xDivision;
}
if (this.barOptions.colors.backgroundBarColors.length > 0 && i === 0) {
if (bc >= this.barOptions.colors.backgroundBarColors.length) {
bc = 0;
}
var bcolor = this.barOptions.colors.backgroundBarColors[bc];
var rect = graphics.drawRect(barXPosition - barWidth * this.visibleI, 0, barWidth * this.seriesLen, w.globals.gridHeight, 0, bcolor, this.barOptions.colors.backgroundBarOpacity);
elSeries.add(rect);
rect.node.classList.add('apexcharts-backgroundBar');
}
return {
pathTo: pathTo,
pathFrom: pathFrom,
x: x,
y: y,
barXPosition: barXPosition
};
}
/** getPathFrom is a common function for bars/columns which is used to get previous paths when data changes.
* @memberof Bar
* @param {int} realIndex - current iterating i
* @param {int} j - current iterating series's j index
* @return {string} pathFrom is the string which will be appended in animations
**/
}, {
key: 'getPathFrom',
value: function getPathFrom(realIndex, j) {
var w = this.w;
var pathFrom = void 0;
for (var pp = 0; pp < w.globals.previousPaths.length; pp++) {
var gpp = w.globals.previousPaths[pp];
if (gpp.paths.length > 0 && parseInt(gpp.realIndex) === parseInt(realIndex)) {
if (typeof w.globals.previousPaths[pp].paths[j] !== 'undefined') {
pathFrom = w.globals.previousPaths[pp].paths[j].d;
}
}
}
return pathFrom;
}
/** calculateBarDataLabels is used to calculate the positions for the data-labels
* It also sets the element's data attr for bars and calls drawCalculatedBarDataLabels()
* @memberof Bar
* @param {object} {barProps} most of the bar properties used throughout the bar
* drawing function
* @return {object} dataLabels node-element which you can append later
**/
}, {
key: 'calculateDataLabelsPos',
value: function calculateDataLabelsPos(_ref4) {
var x = _ref4.x,
y = _ref4.y,
i = _ref4.i,
j = _ref4.j,
realIndex = _ref4.realIndex,
series = _ref4.series,
barHeight = _ref4.barHeight,
barWidth = _ref4.barWidth,
visibleSeries = _ref4.visibleSeries,
renderedPath = _ref4.renderedPath;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var strokeWidth = Array.isArray(this.strokeWidth) ? this.strokeWidth[realIndex] : this.strokeWidth;
var bcx = x + parseFloat(barWidth * visibleSeries);
var bcy = y + parseFloat(barHeight * visibleSeries);
if (w.globals.isXNumeric && !w.globals.isBarHorizontal) {
bcx = x + parseFloat(barWidth * (visibleSeries + 1)) - strokeWidth;
bcy = y + parseFloat(barHeight * (visibleSeries + 1)) - strokeWidth;
}
var dataLabels = null;
var dataLabelsX = x;
var dataLabelsY = y;
var dataLabelsPos = {};
var dataLabelsConfig = w.config.dataLabels;
var barDataLabelsConfig = this.barOptions.dataLabels;
var offX = dataLabelsConfig.offsetX;
var offY = dataLabelsConfig.offsetY;
var textRects = { width: 0, height: 0 };
if (w.config.dataLabels.enabled) {
textRects = graphics.getTextRects(w.globals.yLabelFormatters[0](w.globals.maxY), parseInt(dataLabelsConfig.style.fontSize));
}
if (this.isHorizontal) {
dataLabelsPos = this.calculateBarsDataLabelsPosition({
x: x,
y: y,
i: i,
j: j,
renderedPath: renderedPath,
bcy: bcy,
barHeight: barHeight,
barWidth: barWidth,
textRects: textRects,
strokeWidth: strokeWidth,
dataLabelsX: dataLabelsX,
dataLabelsY: dataLabelsY,
barDataLabelsConfig: barDataLabelsConfig,
offX: offX,
offY: offY
});
} else {
dataLabelsPos = this.calculateColumnsDataLabelsPosition({
x: x,
y: y,
i: i,
j: j,
renderedPath: renderedPath,
realIndex: realIndex,
bcx: bcx,
bcy: bcy,
barHeight: barHeight,
barWidth: barWidth,
textRects: textRects,
strokeWidth: strokeWidth,
dataLabelsY: dataLabelsY,
barDataLabelsConfig: barDataLabelsConfig,
offX: offX,
offY: offY
});
}
renderedPath.attr({
cy: dataLabelsPos.bcy,
cx: dataLabelsPos.bcx,
j: j,
val: series[i][j],
barHeight: barHeight,
barWidth: barWidth
});
dataLabels = this.drawCalculatedDataLabels({
x: dataLabelsPos.dataLabelsX,
y: dataLabelsPos.dataLabelsY,
val: series[i][j],
i: realIndex,
j: j,
barWidth: barWidth,
barHeight: barHeight,
textRects: textRects,
dataLabelsConfig: dataLabelsConfig
});
return dataLabels;
}
}, {
key: 'calculateColumnsDataLabelsPosition',
value: function calculateColumnsDataLabelsPosition(opts) {
var w = this.w;
var i = opts.i,
j = opts.j,
y = opts.y,
bcx = opts.bcx,
barWidth = opts.barWidth,
barHeight = opts.barHeight,
textRects = opts.textRects,
dataLabelsY = opts.dataLabelsY,
barDataLabelsConfig = opts.barDataLabelsConfig,
strokeWidth = opts.strokeWidth,
offX = opts.offX,
offY = opts.offY;
var dataLabelsX = void 0;
var dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints;
bcx = bcx - strokeWidth / 2;
if (w.globals.isXNumeric) {
dataLabelsX = bcx - barWidth / 2 + offX;
} else {
dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX;
}
var valIsNegative = this.series[i][j] <= 0;
if (this.isReversed) {
y = y - barHeight;
}
switch (barDataLabelsConfig.position) {
case 'center':
if (valIsNegative) {
dataLabelsY = y + barHeight / 2 + textRects.height / 2 + offY;
} else {
dataLabelsY = y + barHeight / 2 + textRects.height / 2 - offY;
}
break;
case 'bottom':
if (valIsNegative) {
dataLabelsY = y + barHeight + textRects.height + strokeWidth + offY;
} else {
dataLabelsY = y + barHeight - textRects.height / 2 + strokeWidth - offY;
}
break;
case 'top':
if (valIsNegative) {
dataLabelsY = y - textRects.height / 2 - offY;
} else {
dataLabelsY = y + textRects.height + offY;
}
break;
}
if (!w.config.chart.stacked) {
if (dataLabelsY < 0) {
dataLabelsY = 0 + strokeWidth;
} else if (dataLabelsY + textRects.height / 3 > w.globals.gridHeight) {
dataLabelsY = w.globals.gridHeight - strokeWidth;
}
}
return {
bcx: bcx,
bcy: y,
dataLabelsX: dataLabelsX,
dataLabelsY: dataLabelsY
};
}
}, {
key: 'calculateBarsDataLabelsPosition',
value: function calculateBarsDataLabelsPosition(opts) {
var w = this.w;
var x = opts.x,
i = opts.i,
j = opts.j,
bcy = opts.bcy,
barHeight = opts.barHeight,
barWidth = opts.barWidth,
textRects = opts.textRects,
dataLabelsX = opts.dataLabelsX,
strokeWidth = opts.strokeWidth,
barDataLabelsConfig = opts.barDataLabelsConfig,
offX = opts.offX,
offY = opts.offY;
var dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints;
var dataLabelsY = bcy - dataPointsDividedHeight + barHeight / 2 + textRects.height / 2 + offY - 3;
var valIsNegative = this.series[i][j] <= 0;
if (this.isReversed) {
x = x + barWidth;
}
switch (barDataLabelsConfig.position) {
case 'center':
if (valIsNegative) {
dataLabelsX = x - barWidth / 2 - offX;
} else {
dataLabelsX = x - barWidth / 2 + offX;
}
break;
case 'bottom':
if (valIsNegative) {
dataLabelsX = x - barWidth - strokeWidth - Math.round(textRects.width / 2) - offX;
} else {
dataLabelsX = x - barWidth + strokeWidth + Math.round(textRects.width / 2) + offX;
}
break;
case 'top':
if (valIsNegative) {
dataLabelsX = x - strokeWidth + Math.round(textRects.width / 2) - offX;
} else {
dataLabelsX = x - strokeWidth - Math.round(textRects.width / 2) + offX;
}
break;
}
if (!w.config.chart.stacked) {
if (dataLabelsX < 0) {
dataLabelsX = dataLabelsX + textRects.width + strokeWidth;
} else if (dataLabelsX + textRects.width / 2 > w.globals.gridWidth) {
dataLabelsX = w.globals.gridWidth - textRects.width - strokeWidth;
}
}
return {
bcx: x,
bcy: bcy,
dataLabelsX: dataLabelsX,
dataLabelsY: dataLabelsY
};
}
}, {
key: 'drawCalculatedDataLabels',
value: function drawCalculatedDataLabels(_ref5) {
var x = _ref5.x,
y = _ref5.y,
val = _ref5.val,
i = _ref5.i,
j = _ref5.j,
textRects = _ref5.textRects,
barHeight = _ref5.barHeight,
barWidth = _ref5.barWidth,
dataLabelsConfig = _ref5.dataLabelsConfig;
var w = this.w;
var dataLabels = new _DataLabels2.default(this.ctx);
var graphics = new _Graphics2.default(this.ctx);
var formatter = dataLabelsConfig.formatter;
var elDataLabelsWrap = null;
var isSeriesNotCollapsed = w.globals.collapsedSeriesIndices.indexOf(i) > -1;
if (dataLabelsConfig.enabled && !isSeriesNotCollapsed) {
elDataLabelsWrap = graphics.group({
class: 'apexcharts-data-labels'
});
var text = '';
if (typeof val !== 'undefined' && val !== null) {
text = formatter(val, { seriesIndex: i, dataPointIndex: j, w: w });
}
if (val === 0 && w.config.chart.stacked) {
// in a stacked bar/column chart, 0 value should be neglected as it will overlap on the next element
text = '';
}
if (w.config.chart.stacked && this.barOptions.dataLabels.hideOverflowingLabels) {
// if there is not enough space to draw the label in the bar/column rect, check hideOverflowingLabels property to prevent overflowing on wrong rect
// Note: This issue is only seen in stacked charts
if (this.isHorizontal) {
barWidth = this.series[i][j] / this.yRatio[this.yaxisIndex];
if (textRects.width / 1.6 > barWidth) {
text = '';
}
} else {
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex];
if (textRects.height / 1.6 > barHeight) {
text = '';
}
}
}
dataLabels.plotDataLabelsText({
x: x,
y: y,
text: text,
i: i,
j: j,
parent: elDataLabelsWrap,
dataLabelsConfig: dataLabelsConfig,
alwaysDrawDataLabel: true,
offsetCorrection: true
});
}
return elDataLabelsWrap;
}
/** barEndingShape draws the various shapes on top of bars/columns
* @memberof Bar
* @param {object} w - chart context
* @param {object} opts - consists several properties like barHeight/barWidth
* @param {array} series - global primary series
* @param {int} i - current iterating series's index
* @param {int} j - series's j of i
* @return {object} path - ending shape whether round/arrow
* ending_p_from - similar to pathFrom
* newY - which is calculated from existing y and new shape's top
**/
}, {
key: 'barEndingShape',
value: function barEndingShape(w, opts, series, i, j) {
var graphics = new _Graphics2.default(this.ctx);
if (this.isHorizontal) {
var endingShape = null;
var endingShapeFrom = '';
var x = opts.x;
if (typeof series[i][j] !== 'undefined' || series[i][j] !== null) {
var inverse = series[i][j] < 0;
var eX = opts.barHeight / 2 - opts.strokeWidth;
if (inverse) eX = -opts.barHeight / 2 - opts.strokeWidth;
if (!w.config.chart.stacked) {
if (this.barOptions.endingShape === 'rounded') {
x = opts.x - eX / 2;
}
}
switch (this.barOptions.endingShape) {
case 'flat':
endingShape = graphics.line(x, opts.barYPosition + opts.barHeight - opts.strokeWidth);
break;
case 'rounded':
endingShape = graphics.quadraticCurve(x + eX, opts.barYPosition + (opts.barHeight - opts.strokeWidth) / 2, x, opts.barYPosition + opts.barHeight - opts.strokeWidth);
break;
}
}
return {
path: endingShape,
ending_p_from: endingShapeFrom,
newX: x
};
} else {
var _endingShape = null;
var _endingShapeFrom = '';
var y = opts.y;
if (typeof series[i][j] !== 'undefined' || series[i][j] !== null) {
var _inverse = series[i][j] < 0;
var eY = opts.barWidth / 2 - opts.strokeWidth;
if (_inverse) eY = -opts.barWidth / 2 - opts.strokeWidth;
if (!w.config.chart.stacked) {
// the shape exceeds the chart height, hence reduce y
if (this.barOptions.endingShape === 'rounded') {
y = y + eY / 2;
}
}
switch (this.barOptions.endingShape) {
case 'flat':
_endingShape = graphics.line(opts.barXPosition + opts.barWidth - opts.strokeWidth, y);
break;
case 'rounded':
_endingShape = graphics.quadraticCurve(opts.barXPosition + (opts.barWidth - opts.strokeWidth) / 2, y - eY, opts.barXPosition + opts.barWidth - opts.strokeWidth, y);
break;
}
}
return {
path: _endingShape,
ending_p_from: _endingShapeFrom,
newY: y
};
}
}
}]);
return Bar;
}();
exports.default = Bar;
/***/ }),
/* 9 */
/***/ (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; }; }();
var _Scatter = __webpack_require__(19);
var _Scatter2 = _interopRequireDefault(_Scatter);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
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 DataLabels Class for drawing dataLabels on Axes based Charts.
*
* @module DataLabels
**/
var DataLabels = function () {
function DataLabels(ctx) {
_classCallCheck(this, DataLabels);
this.ctx = ctx;
this.w = ctx.w;
}
// When there are many datalabels to be printed, and some of them overlaps each other in the same series, this method will take care of that
// Also, when datalabels exceeds the drawable area and get clipped off, we need to adjust and move some pixels to make them visible again
_createClass(DataLabels, [{
key: 'dataLabelsCorrection',
value: function dataLabelsCorrection(x, y, val, i, dataPointIndex, alwaysDrawDataLabel, fontSize) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var drawnextLabel = false; //
var textRects = graphics.getTextRects(val, fontSize);
var width = textRects.width;
var height = textRects.height;
// first value in series, so push an empty array
if (typeof w.globals.dataLabelsRects[i] === 'undefined') w.globals.dataLabelsRects[i] = [];
// then start pushing actual rects in that sub-array
w.globals.dataLabelsRects[i].push({ x: x, y: y, width: width, height: height });
var len = w.globals.dataLabelsRects[i].length - 2;
var lastDrawnIndex = typeof w.globals.lastDrawnDataLabelsIndexes[i] !== 'undefined' ? w.globals.lastDrawnDataLabelsIndexes[i][w.globals.lastDrawnDataLabelsIndexes[i].length - 1] : 0;
if (typeof w.globals.dataLabelsRects[i][len] !== 'undefined') {
var lastDataLabelRect = w.globals.dataLabelsRects[i][lastDrawnIndex];
if (
// next label forward and x not intersecting
x > lastDataLabelRect.x + lastDataLabelRect.width + 2 || y > lastDataLabelRect.y + lastDataLabelRect.height + 2 || x + width < lastDataLabelRect.x // next label is going to be drawn backwards
) {
// the 2 indexes don't override, so OK to draw next label
drawnextLabel = true;
}
}
if (dataPointIndex === 0 || alwaysDrawDataLabel) {
drawnextLabel = true;
}
return {
x: x,
y: y,
drawnextLabel: drawnextLabel
};
}
}, {
key: 'drawDataLabel',
value: function drawDataLabel(pos, i, j) {
var z = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var align = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'top';
// this method handles line, area, bubble, scatter charts as those charts contains markers/points which have pre-defined x/y positions
// all other charts like bars / heatmaps will define their own drawDataLabel routine
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var dataLabelsConfig = w.config.dataLabels;
var x = 0;
var y = 0;
var dataPointIndex = j;
var elDataLabelsWrap = null;
if (!dataLabelsConfig.enabled || pos.x instanceof Array !== true) {
return elDataLabelsWrap;
}
elDataLabelsWrap = graphics.group({
class: 'apexcharts-data-labels'
});
elDataLabelsWrap.attr('clip-path', 'url(#gridRectMarkerMask' + w.globals.cuid + ')');
for (var q = 0; q < pos.x.length; q++) {
x = pos.x[q] + dataLabelsConfig.offsetX;
y = pos.y[q] + dataLabelsConfig.offsetY - w.globals.markers.size[i] - 5;
if (align === 'bottom') {
y = y + w.globals.markers.size[i] * 2 + parseInt(dataLabelsConfig.style.fontSize) * 1.4;
}
if (!isNaN(x)) {
// a small hack as we have 2 points for the first val to connect it
if (j === 1 && q === 0) dataPointIndex = 0;
if (j === 1 && q === 1) dataPointIndex = 1;
var val = w.globals.series[i][dataPointIndex];
var text = '';
if (w.config.chart.type === 'bubble') {
text = w.globals.seriesZ[i][dataPointIndex];
y = pos.y[q] + w.config.dataLabels.offsetY;
var scatter = new _Scatter2.default(this.ctx);
var centerTextInBubbleCoords = scatter.centerTextInBubble(y, i, dataPointIndex);
y = centerTextInBubbleCoords.y;
} else {
if (typeof val !== 'undefined' && val !== null) {
text = w.config.dataLabels.formatter(val, {
ctx: this.ctx,
seriesIndex: i,
dataPointIndex: dataPointIndex,
w: w
});
}
}
this.plotDataLabelsText({
x: x,
y: y,
text: text,
i: i,
j: dataPointIndex,
parent: elDataLabelsWrap,
offsetCorrection: true,
dataLabelsConfig: w.config.dataLabels
});
}
}
return elDataLabelsWrap;
}
}, {
key: 'plotDataLabelsText',
value: function plotDataLabelsText(opts) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var x = opts.x,
y = opts.y,
i = opts.i,
j = opts.j,
text = opts.text,
textAnchor = opts.textAnchor,
parent = opts.parent,
dataLabelsConfig = opts.dataLabelsConfig,
alwaysDrawDataLabel = opts.alwaysDrawDataLabel,
offsetCorrection = opts.offsetCorrection;
if (Array.isArray(w.config.dataLabels.enabledOnSeries)) {
if (w.config.dataLabels.enabledOnSeries.indexOf(i) > -1) {
return;
}
}
var correctedLabels = {
x: x,
y: y,
drawnextLabel: true
};
if (offsetCorrection) {
correctedLabels = this.dataLabelsCorrection(x, y, text, i, j, alwaysDrawDataLabel, parseInt(dataLabelsConfig.style.fontSize));
}
// when zoomed, we don't need to correct labels offsets,
// but if normally, labels get cropped, correct them
if (!w.globals.zoomed) {
x = correctedLabels.x;
y = correctedLabels.y;
}
if (correctedLabels.drawnextLabel) {
var dataLabelText = graphics.drawText({
width: 100,
height: parseInt(dataLabelsConfig.style.fontSize),
x: x,
y: y,
foreColor: w.globals.dataLabels.style.colors[i],
textAnchor: textAnchor || dataLabelsConfig.textAnchor,
text: text,
fontSize: dataLabelsConfig.style.fontSize,
fontFamily: dataLabelsConfig.style.fontFamily
});
dataLabelText.attr({
class: 'apexcharts-datalabel',
cx: x,
cy: y
});
if (dataLabelsConfig.dropShadow.enabled) {
var textShadow = dataLabelsConfig.dropShadow;
var filters = new _Filters2.default(this.ctx);
filters.dropShadow(dataLabelText, textShadow);
}
parent.add(dataLabelText);
if (typeof w.globals.lastDrawnDataLabelsIndexes[i] === 'undefined') {
w.globals.lastDrawnDataLabelsIndexes[i] = [];
}
w.globals.lastDrawnDataLabelsIndexes[i].push(j);
}
}
}]);
return DataLabels;
}();
exports.default = DataLabels;
/***/ }),
/* 10 */
/***/ (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; }; }();
var _DateTime = __webpack_require__(11);
var _DateTime2 = _interopRequireDefault(_DateTime);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Formatter Class for setting value formatters for axes as well as tooltips.
*
* @module Formatters
**/
var Formatters = function () {
function Formatters(ctx) {
_classCallCheck(this, Formatters);
this.ctx = ctx;
this.w = ctx.w;
this.tooltipKeyFormat = 'dd MMM';
}
_createClass(Formatters, [{
key: 'xLabelFormat',
value: function xLabelFormat(fn, val) {
var w = this.w;
if (w.config.xaxis.type === 'datetime') {
// if user has not specified a custom formatter, use the default tooltip.x.format
if (w.config.tooltip.x.formatter === undefined) {
var datetimeObj = new _DateTime2.default(this.ctx);
return datetimeObj.formatDate(new Date(val), w.config.tooltip.x.format, true, true);
}
}
return fn(val);
}
}, {
key: 'setLabelFormatters',
value: function setLabelFormatters() {
var w = this.w;
w.globals.xLabelFormatter = function (val) {
return val;
};
w.globals.xaxisTooltipFormatter = function (val) {
return val;
};
w.globals.ttKeyFormatter = function (val) {
return val;
};
w.globals.ttZFormatter = function (val) {
return val;
};
w.globals.legendFormatter = function (val) {
return val;
};
if (typeof w.config.tooltip.x.formatter === 'function') {
w.globals.ttKeyFormatter = w.config.tooltip.x.formatter;
}
if (typeof w.config.xaxis.tooltip.formatter === 'function') {
w.globals.xaxisTooltipFormatter = w.config.xaxis.tooltip.formatter;
}
if (Array.isArray(w.config.tooltip.y)) {
w.globals.ttVal = w.config.tooltip.y;
} else {
if (w.config.tooltip.y.formatter !== undefined) {
w.globals.ttVal = w.config.tooltip.y;
}
}
if (w.config.tooltip.z.formatter !== undefined) {
w.globals.ttZFormatter = w.config.tooltip.z.formatter;
}
// legend formatter - if user wants to append any global values of series to legend text
if (w.config.legend.formatter !== undefined) {
w.globals.legendFormatter = w.config.legend.formatter;
}
// formatter function will always overwrite format property
if (w.config.xaxis.labels.formatter !== undefined) {
w.globals.xLabelFormatter = w.config.xaxis.labels.formatter;
} else {
w.globals.xLabelFormatter = function (val) {
if (_Utils2.default.isNumber(val)) {
// numeric xaxis may have smaller range, so defaulting to 1 decimal
if (w.config.xaxis.type === 'numeric' && w.globals.dataPoints < 50) {
return val.toFixed(1);
}
return val.toFixed(0);
}
return val;
};
}
// formatter function will always overwrite format property
w.config.yaxis.forEach(function (yaxe, i) {
if (yaxe.labels.formatter !== undefined) {
w.globals.yLabelFormatters[i] = yaxe.labels.formatter;
} else {
w.globals.yLabelFormatters[i] = function (val) {
if (_Utils2.default.isNumber(val)) {
if (w.globals.yValueDecimal !== 0) {
return val.toFixed(yaxe.decimalsInFloat !== undefined ? yaxe.decimalsInFloat : w.globals.yValueDecimal);
} else if (w.globals.maxY - w.globals.minY < 5) {
return val.toFixed(1);
} else {
return val.toFixed(0);
}
}
return val;
};
}
});
return w.globals;
}
}, {
key: 'heatmapLabelFormatters',
value: function heatmapLabelFormatters() {
var w = this.w;
if (w.config.chart.type === 'heatmap') {
w.globals.yAxisScale[0].result = w.globals.seriesNames.slice();
// get the longest string from the labels array and also apply label formatter to it
var longest = w.globals.seriesNames.reduce(function (a, b) {
return a.length > b.length ? a : b;
}, 0);
w.globals.yAxisScale[0].niceMax = longest;
w.globals.yAxisScale[0].niceMin = longest;
}
}
}]);
return Formatters;
}();
exports.default = Formatters;
/***/ }),
/* 11 */
/***/ (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; }; }();
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* DateTime Class to manipulate datetime values.
*
* @module DateTime
**/
var DateTime = function () {
function DateTime(ctx) {
_classCallCheck(this, DateTime);
this.ctx = ctx;
this.w = ctx.w;
this.months31 = [1, 3, 5, 7, 8, 10, 12];
this.months30 = [2, 4, 6, 9, 11];
this.daysCntOfYear = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
}
_createClass(DateTime, [{
key: 'isValidDate',
value: function isValidDate(date) {
return !isNaN(this.parseDate(date));
}
}, {
key: 'getUTCTimeStamp',
value: function getUTCTimeStamp(dateStr) {
if (!Date.parse(dateStr)) {
return dateStr;
}
return new Date(new Date(dateStr).toISOString().substr(0, 25)).getTime();
}
}, {
key: 'parseDate',
value: function parseDate(dateStr) {
var parsed = Date.parse(dateStr);
if (!isNaN(parsed)) {
return this.getUTCTimeStamp(dateStr);
}
var output = Date.parse(dateStr.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
output = this.getUTCTimeStamp(output);
return output;
}
// https://stackoverflow.com/a/11252167/6495043
}, {
key: 'treatAsUtc',
value: function treatAsUtc(dateStr) {
var result = new Date(dateStr);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
// http://stackoverflow.com/questions/14638018/current-time-formatting-with-javascript#answer-14638191
}, {
key: 'formatDate',
value: function formatDate(date, format) {
var utc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var convertToUTC = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var locale = this.w.globals.locale;
var MMMM = ['\x00'].concat(_toConsumableArray(locale.months));
var MMM = ['\x01'].concat(_toConsumableArray(locale.shortMonths));
var dddd = ['\x02'].concat(_toConsumableArray(locale.days));
var ddd = ['\x03'].concat(_toConsumableArray(locale.shortDays));
function ii(i, len) {
var s = i + '';
len = len || 2;
while (s.length < len) {
s = '0' + s;
}return s;
}
if (convertToUTC) {
date = this.treatAsUtc(date);
}
var y = utc ? date.getUTCFullYear() : date.getFullYear();
format = format.replace(/(^|[^\\])yyyy+/g, '$1' + y);
format = format.replace(/(^|[^\\])yy/g, '$1' + y.toString().substr(2, 2));
format = format.replace(/(^|[^\\])y/g, '$1' + y);
var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1;
format = format.replace(/(^|[^\\])MMMM+/g, '$1' + MMMM[0]);
format = format.replace(/(^|[^\\])MMM/g, '$1' + MMM[0]);
format = format.replace(/(^|[^\\])MM/g, '$1' + ii(M));
format = format.replace(/(^|[^\\])M/g, '$1' + M);
var d = utc ? date.getUTCDate() : date.getDate();
format = format.replace(/(^|[^\\])dddd+/g, '$1' + dddd[0]);
format = format.replace(/(^|[^\\])ddd/g, '$1' + ddd[0]);
format = format.replace(/(^|[^\\])dd/g, '$1' + ii(d));
format = format.replace(/(^|[^\\])d/g, '$1' + d);
var H = utc ? date.getUTCHours() : date.getHours();
format = format.replace(/(^|[^\\])HH+/g, '$1' + ii(H));
format = format.replace(/(^|[^\\])H/g, '$1' + H);
var h = H > 12 ? H - 12 : H === 0 ? 12 : H;
format = format.replace(/(^|[^\\])hh+/g, '$1' + ii(h));
format = format.replace(/(^|[^\\])h/g, '$1' + h);
var m = utc ? date.getUTCMinutes() : date.getMinutes();
format = format.replace(/(^|[^\\])mm+/g, '$1' + ii(m));
format = format.replace(/(^|[^\\])m/g, '$1' + m);
var s = utc ? date.getUTCSeconds() : date.getSeconds();
format = format.replace(/(^|[^\\])ss+/g, '$1' + ii(s));
format = format.replace(/(^|[^\\])s/g, '$1' + s);
var f = utc ? date.getUTCMilliseconds() : date.getMilliseconds();
format = format.replace(/(^|[^\\])fff+/g, '$1' + ii(f, 3));
f = Math.round(f / 10);
format = format.replace(/(^|[^\\])ff/g, '$1' + ii(f));
f = Math.round(f / 10);
format = format.replace(/(^|[^\\])f/g, '$1' + f);
var T = H < 12 ? 'AM' : 'PM';
format = format.replace(/(^|[^\\])TT+/g, '$1' + T);
format = format.replace(/(^|[^\\])T/g, '$1' + T.charAt(0));
var t = T.toLowerCase();
format = format.replace(/(^|[^\\])tt+/g, '$1' + t);
format = format.replace(/(^|[^\\])t/g, '$1' + t.charAt(0));
var tz = -date.getTimezoneOffset();
var K = utc || !tz ? 'Z' : tz > 0 ? '+' : '-';
if (!utc) {
tz = Math.abs(tz);
var tzHrs = Math.floor(tz / 60);
var tzMin = tz % 60;
K += ii(tzHrs) + ':' + ii(tzMin);
}
format = format.replace(/(^|[^\\])K/g, '$1' + K);
var day = (utc ? date.getUTCDay() : date.getDay()) + 1;
format = format.replace(new RegExp(dddd[0], 'g'), dddd[day]);
format = format.replace(new RegExp(ddd[0], 'g'), ddd[day]);
format = format.replace(new RegExp(MMMM[0], 'g'), MMMM[M]);
format = format.replace(new RegExp(MMM[0], 'g'), MMM[M]);
format = format.replace(/\\(.)/g, '$1');
return format;
}
}, {
key: 'getTimeUnitsfromTimestamp',
value: function getTimeUnitsfromTimestamp(minX, maxX) {
var w = this.w;
if (w.config.xaxis.min !== undefined) {
minX = w.config.xaxis.min;
}
if (w.config.xaxis.max !== undefined) {
maxX = w.config.xaxis.max;
}
var minYear = new Date(minX).getFullYear();
var maxYear = new Date(maxX).getFullYear();
var minMonth = new Date(minX).getMonth();
var maxMonth = new Date(maxX).getMonth();
var minDate = new Date(minX).getDate();
var maxDate = new Date(maxX).getDate();
var minHour = new Date(minX).getHours();
var maxHour = new Date(maxX).getHours();
var minMinute = new Date(minX).getMinutes();
var maxMinute = new Date(maxX).getMinutes();
return {
minMinute: minMinute,
maxMinute: maxMinute,
minHour: minHour,
maxHour: maxHour,
minDate: minDate,
maxDate: maxDate,
minMonth: minMonth,
maxMonth: maxMonth,
minYear: minYear,
maxYear: maxYear
};
}
}, {
key: 'isLeapYear',
value: function isLeapYear(year) {
return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
}
}, {
key: 'calculcateLastDaysOfMonth',
value: function calculcateLastDaysOfMonth(month, year, subtract) {
var days = this.determineDaysOfMonths(month, year);
// whatever days we get, subtract the number of days asked
return days - subtract;
}
}, {
key: 'determineDaysOfYear',
value: function determineDaysOfYear(year) {
var days = 365;
if (this.isLeapYear(year)) {
days = 366;
}
return days;
}
}, {
key: 'determineRemainingDaysOfYear',
value: function determineRemainingDaysOfYear(year, month, date) {
var dayOfYear = this.daysCntOfYear[month] + date;
if (month > 1 && this.isLeapYear()) dayOfYear++;
return dayOfYear;
}
}, {
key: 'determineDaysOfMonths',
value: function determineDaysOfMonths(month, year) {
var days = 30;
month = _Utils2.default.monthMod(month);
switch (true) {
case this.months30.indexOf(month) > -1:
if (month === 2) {
if (this.isLeapYear(year)) {
days = 29;
} else {
days = 28;
}
}
break;
case this.months31.indexOf(month) > -1:
days = 31;
break;
default:
days = 31;
break;
}
return days;
}
}]);
return DateTime;
}();
exports.default = DateTime;
/***/ }),
/* 12 */
/***/ (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; }; }();
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
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 Pie Class for drawing Pie / Donut Charts.
* @module Pie
**/
var Pie = function () {
function Pie(ctx) {
_classCallCheck(this, Pie);
this.ctx = ctx;
this.w = ctx.w;
this.chartType = this.w.config.chart.type;
this.initialAnim = this.w.config.chart.animations.enabled;
this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled;
this.animBeginArr = [0];
this.animDur = 0;
this.donutDataLabels = this.w.config.plotOptions.pie.donut.labels;
var w = this.w;
this.lineColorArr = w.globals.stroke.colors !== undefined ? w.globals.stroke.colors : w.globals.colors;
this.defaultSize = w.globals.svgHeight < w.globals.svgWidth ? w.globals.svgHeight - 35 : w.globals.gridWidth;
this.centerY = this.defaultSize / 2;
this.centerX = w.globals.gridWidth / 2;
this.fullAngle = 360;
this.size = 0;
this.donutSize = 0;
this.sliceLabels = [];
this.prevSectorAngleArr = []; // for dynamic animations
}
_createClass(Pie, [{
key: 'draw',
value: function draw(series) {
var self = this;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var ret = graphics.group({
class: 'apexcharts-pie'
});
var total = 0;
for (var k = 0; k < series.length; k++) {
// CALCULATE THE TOTAL
total += _Utils2.default.negToZero(series[k]);
}
var sectorAngleArr = [];
// el to which series will be drawn
var elSeries = graphics.group();
// prevent division by zero error if there is no data
if (total === 0) {
total = 0.00001;
}
for (var i = 0; i < series.length; i++) {
// CALCULATE THE ANGLES
var angle = this.fullAngle * _Utils2.default.negToZero(series[i]) / total;
sectorAngleArr.push(angle);
}
if (w.globals.dataChanged) {
var prevTotal = 0;
for (var _k = 0; _k < w.globals.previousPaths.length; _k++) {
// CALCULATE THE PREV TOTAL
prevTotal += _Utils2.default.negToZero(w.globals.previousPaths[_k]);
}
var previousAngle = void 0;
for (var _i = 0; _i < w.globals.previousPaths.length; _i++) {
// CALCULATE THE PREVIOUS ANGLES
previousAngle = this.fullAngle * _Utils2.default.negToZero(w.globals.previousPaths[_i]) / prevTotal;
this.prevSectorAngleArr.push(previousAngle);
}
}
this.size = this.defaultSize / 2.05 - w.config.stroke.width - w.config.chart.dropShadow.blur;
if (w.config.plotOptions.pie.size !== undefined) {
this.size = w.config.plotOptions.pie.size;
}
this.donutSize = this.size * parseInt(w.config.plotOptions.pie.donut.size) / 100;
var scaleSize = w.config.plotOptions.pie.customScale;
var halfW = w.globals.gridWidth / 2;
var halfH = w.globals.gridHeight / 2;
var translateX = halfW - w.globals.gridWidth / 2 * scaleSize;
var translateY = halfH - w.globals.gridHeight / 2 * scaleSize;
if (this.donutDataLabels.show) {
var dataLabels = this.renderInnerDataLabels(this.donutDataLabels, {
hollowSize: this.donutSize,
centerX: this.centerX,
centerY: this.centerY,
opacity: this.donutDataLabels.show,
translateX: translateX,
translateY: translateY
});
ret.add(dataLabels);
}
if (w.config.chart.type === 'donut') {
// draw the inner circle and add some text to it
var circle = graphics.drawCircle(this.donutSize);
circle.attr({
cx: this.centerX,
cy: this.centerY,
fill: w.config.plotOptions.pie.donut.background
});
elSeries.add(circle);
}
var elG = self.drawArcs(sectorAngleArr, series);
// add slice dataLabels at the end
this.sliceLabels.forEach(function (s) {
elG.add(s);
});
elSeries.attr({
transform: 'translate(' + translateX + ', ' + (translateY - 5) + ') scale(' + scaleSize + ')'
});
ret.attr({
'data:innerTranslateX': translateX,
'data:innerTranslateY': translateY - 25
});
elSeries.add(elG);
ret.add(elSeries);
return ret;
}
// core function for drawing pie arcs
}, {
key: 'drawArcs',
value: function drawArcs(sectorAngleArr, series) {
var w = this.w;
var filters = new _Filters2.default(this.ctx);
var graphics = new _Graphics2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
var g = graphics.group();
var startAngle = 0;
var prevStartAngle = 0;
var endAngle = 0;
var prevEndAngle = 0;
this.strokeWidth = w.config.stroke.show ? w.config.stroke.width : 0;
for (var i = 0; i < sectorAngleArr.length; i++) {
// if(sectorAngleArr[i]>0) {
var elPieArc = graphics.group({
class: 'apexcharts-series apexcharts-pie-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[i]),
id: 'apexcharts-series-' + i,
rel: i + 1
});
g.add(elPieArc);
startAngle = endAngle;
prevStartAngle = prevEndAngle;
endAngle = startAngle + sectorAngleArr[i];
prevEndAngle = prevStartAngle + this.prevSectorAngleArr[i];
var angle = endAngle - startAngle;
var pathFill = fill.fillPath({
seriesNumber: i,
size: this.size,
value: series[i]
}); // additionaly, pass size for gradient drawing in the fillPath function
var path = this.getChangedPath(prevStartAngle, prevEndAngle);
var elPath = graphics.drawPath({
d: path,
stroke: this.lineColorArr instanceof Array ? this.lineColorArr[i] : this.lineColorArr,
strokeWidth: this.strokeWidth,
fill: pathFill,
fillOpacity: w.config.fill.opacity,
classes: 'apexcharts-pie-area'
});
elPath.attr({
id: 'apexcharts-' + w.config.chart.type + '-slice-' + i,
index: 0,
j: i
});
if (w.config.chart.dropShadow.enabled) {
var shadow = w.config.chart.dropShadow;
filters.dropShadow(elPath, shadow, i);
}
this.addListeners(elPath, this.donutDataLabels);
_Graphics2.default.setAttrs(elPath.node, {
'data:angle': angle,
'data:startAngle': startAngle,
'data:strokeWidth': this.strokeWidth,
'data:value': series[i]
});
var labelPosition = {
x: 0,
y: 0
};
if (w.config.chart.type === 'pie') {
labelPosition = _Utils2.default.polarToCartesian(this.centerX, this.centerY, this.size / 1.25 + w.config.plotOptions.pie.dataLabels.offset, startAngle + (endAngle - startAngle) / 2);
} else if (w.config.chart.type === 'donut') {
labelPosition = _Utils2.default.polarToCartesian(this.centerX, this.centerY, (this.size + this.donutSize) / 2 + w.config.plotOptions.pie.dataLabels.offset, startAngle + (endAngle - startAngle) / 2);
}
elPieArc.add(elPath);
// Animation code starts
var dur = 0;
if (this.initialAnim && !w.globals.resized && !w.globals.dataChanged) {
dur = (endAngle - startAngle) / this.fullAngle * w.config.chart.animations.speed;
this.animDur = dur + this.animDur;
this.animBeginArr.push(this.animDur);
} else {
this.animBeginArr.push(0);
}
if (this.dynamicAnim && w.globals.dataChanged) {
this.animatePaths(elPath, {
endAngle: endAngle,
startAngle: startAngle,
prevStartAngle: prevStartAngle,
prevEndAngle: prevEndAngle,
animateStartingPos: true,
i: i,
animBeginArr: this.animBeginArr,
dur: w.config.chart.animations.dynamicAnimation.speed
});
} else {
this.animatePaths(elPath, {
endAngle: endAngle,
startAngle: startAngle,
i: i,
totalItems: sectorAngleArr.length - 1,
animBeginArr: this.animBeginArr,
dur: dur
});
}
// animation code ends
if (w.config.plotOptions.pie.expandOnClick) {
elPath.click(this.pieClicked.bind(this, i));
}
if (w.config.dataLabels.enabled) {
var xPos = labelPosition.x;
var yPos = labelPosition.y;
var text = 100 * (endAngle - startAngle) / 360 + '%';
if (angle !== 0 && w.config.plotOptions.pie.dataLabels.minAngleToShowLabel < sectorAngleArr[i]) {
var formatter = w.config.dataLabels.formatter;
if (formatter !== undefined) {
text = formatter(w.globals.seriesPercent[i][0], {
seriesIndex: i,
w: w
});
}
var foreColor = w.globals.dataLabels.style.colors[i];
var elPieLabel = graphics.drawText({
x: xPos,
y: yPos,
text: text,
textAnchor: 'middle',
fontSize: w.config.dataLabels.style.fontSize,
fontFamily: w.config.dataLabels.style.fontFamily,
foreColor: foreColor
});
if (w.config.dataLabels.dropShadow.enabled) {
var textShadow = w.config.dataLabels.dropShadow;
var _filters = new _Filters2.default(this.ctx);
_filters.dropShadow(elPieLabel, textShadow);
}
elPieLabel.node.classList.add('apexcharts-pie-label');
if (w.config.chart.animations.animate && w.globals.resized === false) {
elPieLabel.node.classList.add('apexcharts-pie-label-delay');
elPieLabel.node.style.animationDelay = w.config.chart.animations.speed / 940 + 's';
}
this.sliceLabels.push(elPieLabel);
}
}
// }
}
return g;
}
}, {
key: 'addListeners',
value: function addListeners(elPath, dataLabels) {
var graphics = new _Graphics2.default(this.ctx);
// append filters on mouseenter and mouseleave
elPath.node.addEventListener('mouseenter', graphics.pathMouseEnter.bind(this, elPath));
elPath.node.addEventListener('mouseenter', this.printDataLabelsInner.bind(this, elPath.node, dataLabels));
elPath.node.addEventListener('mouseleave', graphics.pathMouseLeave.bind(this, elPath));
elPath.node.addEventListener('mouseleave', this.revertDataLabelsInner.bind(this, elPath.node, dataLabels));
elPath.node.addEventListener('mousedown', graphics.pathMouseDown.bind(this, elPath));
elPath.node.addEventListener('mousedown', this.printDataLabelsInner.bind(this, elPath.node, dataLabels));
}
// This function can be used for other circle charts too
}, {
key: 'animatePaths',
value: function animatePaths(el, opts) {
var w = this.w;
var me = this;
var angle = opts.endAngle - opts.startAngle;
var prevAngle = angle;
var fromStartAngle = opts.startAngle;
var toStartAngle = opts.startAngle;
if (opts.prevStartAngle !== undefined && opts.prevEndAngle !== undefined) {
fromStartAngle = opts.prevEndAngle;
prevAngle = opts.prevEndAngle - opts.prevStartAngle;
}
if (opts.i === w.config.series.length - 1) {
// some adjustments for the last overlapping paths
if (angle + toStartAngle > this.fullAngle) {
opts.endAngle = opts.endAngle - (angle + toStartAngle);
} else if (angle + toStartAngle < this.fullAngle) {
opts.endAngle = opts.endAngle + (this.fullAngle - (angle + toStartAngle));
}
}
if (angle === this.fullAngle) angle = this.fullAngle - 0.01;
me.animateArc(el, fromStartAngle, toStartAngle, angle, prevAngle, opts);
}
}, {
key: 'animateArc',
value: function animateArc(el, fromStartAngle, toStartAngle, angle, prevAngle, opts) {
var me = this;
var w = this.w;
var size = me.size;
if (!size) {
size = opts.size;
}
var path = void 0;
if (isNaN(fromStartAngle) || isNaN(prevAngle)) {
fromStartAngle = toStartAngle;
prevAngle = angle;
opts.dur = 0;
}
var currAngle = angle;
var startAngle = toStartAngle;
var fromAngle = fromStartAngle - toStartAngle;
if (w.globals.dataChanged && opts.shouldSetPrevPaths) {
// to avoid flickering, set prev path first and then we will animate from there
path = me.getPiePath({
me: me,
startAngle: startAngle,
angle: prevAngle,
size: size
});
el.attr({ d: path });
}
if (opts.dur !== 0) {
el.animate(opts.dur, w.globals.easing, opts.animBeginArr[opts.i]).afterAll(function () {
if (w.config.chart.type === 'pie' || w.config.chart.type === 'donut') {
this.animate(300).attr({
'stroke-width': w.config.stroke.width
});
}
w.globals.animationEnded = true;
}).during(function (pos) {
currAngle = fromAngle + (angle - fromAngle) * pos;
if (opts.animateStartingPos) {
currAngle = prevAngle + (angle - prevAngle) * pos;
startAngle = fromStartAngle - prevAngle + (toStartAngle - (fromStartAngle - prevAngle)) * pos;
}
path = me.getPiePath({
me: me,
startAngle: startAngle,
angle: currAngle,
size: size
});
el.node.setAttribute('data:pathOrig', path);
el.attr({
d: path
});
});
} else {
path = me.getPiePath({
me: me,
startAngle: startAngle,
angle: angle,
size: size
});
if (!opts.isTrack) {
w.globals.animationEnded = true;
}
el.node.setAttribute('data:pathOrig', path);
el.attr({
d: path
});
}
}
}, {
key: 'pieClicked',
value: function pieClicked(i) {
var w = this.w;
var me = this;
var path = void 0;
var size = me.size + 4;
var elPath = w.globals.dom.Paper.select('#apexcharts-' + w.config.chart.type.toLowerCase() + '-slice-' + i).members[0];
var pathFrom = elPath.attr('d');
if (elPath.attr('data:pieClicked') === 'true') {
elPath.attr({
'data:pieClicked': 'false'
});
this.revertDataLabelsInner(elPath.node, this.donutDataLabels);
var origPath = elPath.attr('data:pathOrig');
elPath.attr({
d: origPath
});
return;
} else {
// reset all elems
var allEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-pie-area');
Array.prototype.forEach.call(allEls, function (pieSlice) {
pieSlice.setAttribute('data:pieClicked', 'false');
var origPath = pieSlice.getAttribute('data:pathOrig');
pieSlice.setAttribute('d', origPath);
});
elPath.attr('data:pieClicked', 'true');
}
var startAngle = parseInt(elPath.attr('data:startAngle'));
var angle = parseInt(elPath.attr('data:angle'));
path = me.getPiePath({
me: me,
startAngle: startAngle,
angle: angle,
size: size
});
if (angle === 360) return;
elPath.plot(path).animate(1).plot(pathFrom).animate(100).plot(path);
}
}, {
key: 'getChangedPath',
value: function getChangedPath(prevStartAngle, prevEndAngle) {
var path = '';
if (this.dynamicAnim && this.w.globals.dataChanged) {
path = this.getPiePath({
me: this,
startAngle: prevStartAngle,
angle: prevEndAngle - prevStartAngle,
size: this.size
});
}
return path;
}
}, {
key: 'getPiePath',
value: function getPiePath(_ref) {
var me = _ref.me,
startAngle = _ref.startAngle,
angle = _ref.angle,
size = _ref.size;
var w = this.w;
var path = void 0;
var startDeg = startAngle;
var startRadians = Math.PI * (startDeg - 90) / 180;
var endDeg = angle + startAngle;
if (Math.ceil(endDeg) >= 360) endDeg = 359.99;
var endRadians = Math.PI * (endDeg - 90) / 180;
var x1 = me.centerX + size * Math.cos(startRadians);
var y1 = me.centerY + size * Math.sin(startRadians);
var x2 = me.centerX + size * Math.cos(endRadians);
var y2 = me.centerY + size * Math.sin(endRadians);
var startInner = _Utils2.default.polarToCartesian(me.centerX, me.centerY, me.donutSize, endDeg);
var endInner = _Utils2.default.polarToCartesian(me.centerX, me.centerY, me.donutSize, startDeg);
var largeArc = angle > 180 ? 1 : 0;
if (w.config.chart.type === 'donut') {
path = ['M', x1, y1, 'A', size, size, 0, largeArc, 1, x2, y2, 'L', startInner.x, startInner.y, 'A', me.donutSize, me.donutSize, 0, largeArc, 0, endInner.x, endInner.y, 'L', x1, y1, 'z'].join(' ');
} else if (w.config.chart.type === 'pie') {
path = ['M', x1, y1, 'A', size, size, 0, largeArc, 1, x2, y2, 'L', me.centerX, me.centerY, 'L', x1, y1].join(' ');
} else {
path = ['M', x1, y1, 'A', size, size, 0, largeArc, 1, x2, y2].join(' ');
}
return path;
}
}, {
key: 'renderInnerDataLabels',
value: function renderInnerDataLabels(dataLabelsConfig, opts) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var g = graphics.group({
class: 'apexcharts-datalabels-group',
transform: 'translate(' + (opts.translateX ? opts.translateX : 0) + ', ' + (opts.translateY ? opts.translateY : 0) + ')'
});
var showTotal = dataLabelsConfig.total.show;
g.node.style.opacity = opts.opacity;
var x = opts.centerX;
var y = opts.centerY;
var labelColor = void 0,
valueColor = void 0;
if (dataLabelsConfig.name.color === undefined) {
labelColor = w.globals.colors[0];
} else {
labelColor = dataLabelsConfig.name.color;
}
if (dataLabelsConfig.value.color === undefined) {
valueColor = w.config.chart.foreColor;
} else {
valueColor = dataLabelsConfig.value.color;
}
var lbFormatter = dataLabelsConfig.value.formatter;
var val = '';
var name = '';
if (showTotal) {
labelColor = dataLabelsConfig.total.color;
name = dataLabelsConfig.total.label;
val = dataLabelsConfig.total.formatter(w);
} else {
if (w.globals.series.length === 1) {
val = lbFormatter(w.globals.series[0], w);
name = w.globals.seriesNames[0];
}
}
if (dataLabelsConfig.name.show) {
var elLabel = graphics.drawText({
x: x,
y: y + parseInt(dataLabelsConfig.name.offsetY),
text: name,
textAnchor: 'middle',
foreColor: labelColor,
fontSize: dataLabelsConfig.name.fontSize,
fontFamily: dataLabelsConfig.name.fontFamily
});
elLabel.node.classList.add('apexcharts-datalabel-label');
g.add(elLabel);
}
if (dataLabelsConfig.value.show) {
var valOffset = dataLabelsConfig.name.show ? parseInt(dataLabelsConfig.value.offsetY) + 16 : dataLabelsConfig.value.offsetY;
var elValue = graphics.drawText({
x: x,
y: y + valOffset,
text: val,
textAnchor: 'middle',
foreColor: valueColor,
fontSize: dataLabelsConfig.value.fontSize,
fontFamily: dataLabelsConfig.value.fontFamily
});
elValue.node.classList.add('apexcharts-datalabel-value');
g.add(elValue);
}
// for a multi-series circle chart, we need to show total value instead of first series labels
return g;
}
/**
*
* @param {string} name - The name of the series
* @param {string} val - The value of that series
* @param {object} el - Optional el (indicates which series was hovered/clicked). If this param is not present, means we need to show total
*/
}, {
key: 'printInnerLabels',
value: function printInnerLabels(labelsConfig, name, val, el) {
var w = this.w;
var labelColor = void 0;
if (el) {
if (labelsConfig.name.color === undefined) {
labelColor = w.globals.colors[parseInt(el.parentNode.getAttribute('rel')) - 1];
} else {
labelColor = labelsConfig.name.color;
}
} else {
if (w.globals.series.length > 1 && labelsConfig.total.show) {
labelColor = labelsConfig.total.color;
}
}
var elLabel = w.globals.dom.baseEl.querySelector('.apexcharts-datalabel-label');
var elValue = w.globals.dom.baseEl.querySelector('.apexcharts-datalabel-value');
var lbFormatter = labelsConfig.value.formatter;
val = lbFormatter(val, w);
// we need to show Total Val - so get the formatter of it
if (!el && typeof labelsConfig.total.formatter === 'function') {
val = labelsConfig.total.formatter(w);
}
if (elLabel !== null) {
elLabel.textContent = name;
}
if (elValue !== null) {
elValue.textContent = val;
}
if (elLabel !== null) {
elLabel.style.fill = labelColor;
}
}
}, {
key: 'printDataLabelsInner',
value: function printDataLabelsInner(el, dataLabelsConfig) {
var w = this.w;
var val = el.getAttribute('data:value');
var name = w.globals.seriesNames[parseInt(el.parentNode.getAttribute('rel')) - 1];
if (w.globals.series.length > 1) {
this.printInnerLabels(dataLabelsConfig, name, val, el);
}
var dataLabelsGroup = w.globals.dom.baseEl.querySelector('.apexcharts-datalabels-group');
if (dataLabelsGroup !== null) {
dataLabelsGroup.style.opacity = 1;
}
}
}, {
key: 'revertDataLabelsInner',
value: function revertDataLabelsInner(el, dataLabelsConfig, event) {
var _this = this;
var w = this.w;
var dataLabelsGroup = w.globals.dom.baseEl.querySelector('.apexcharts-datalabels-group');
if (dataLabelsConfig.total.show && w.globals.series.length > 1) {
var pie = new Pie(this.ctx);
pie.printInnerLabels(dataLabelsConfig, dataLabelsConfig.total.label, dataLabelsConfig.total.formatter(w));
} else {
var slices = document.querySelectorAll('.apexcharts-pie-area');
var sliceOut = false;
slices.forEach(function (s) {
if (s.getAttribute('data:pieClicked') === 'true') {
sliceOut = true;
_this.printDataLabelsInner(s, dataLabelsConfig);
}
});
if (!sliceOut) {
if (w.globals.selectedDataPoints.length && w.globals.series.length > 1) {
if (w.globals.selectedDataPoints[0].length > 0) {
var index = w.globals.selectedDataPoints[0];
var _el = w.globals.dom.baseEl.querySelector('#apexcharts-' + w.config.chart.type.toLowerCase() + '-slice-' + index);
this.printDataLabelsInner(_el, dataLabelsConfig);
} else if (dataLabelsGroup && w.globals.selectedDataPoints.length && w.globals.selectedDataPoints[0].length === 0) {
dataLabelsGroup.style.opacity = 0;
}
} else {
if (dataLabelsGroup && w.globals.series.length > 1) {
dataLabelsGroup.style.opacity = 0;
}
}
}
}
}
}]);
return Pie;
}();
exports.default = Pie;
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Formatters = __webpack_require__(10);
var _Formatters2 = _interopRequireDefault(_Formatters);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _YAxis = __webpack_require__(16);
var _YAxis2 = _interopRequireDefault(_YAxis);
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 Dimensions Class for calculating rects of all elements that are drawn and will be drawn.
*
* @module Dimensions
**/
var Dimensions = function () {
function Dimensions(ctx) {
_classCallCheck(this, Dimensions);
this.ctx = ctx;
this.w = ctx.w;
this.lgRect = {};
this.yAxisWidth = 0;
this.xAxisHeight = 0;
this.isSparkline = this.w.config.chart.sparkline.enabled;
this.xPadRight = 0;
this.xPadLeft = 0;
}
/**
* @memberof Dimensions
* @param {object} w - chart context
**/
_createClass(Dimensions, [{
key: 'plotCoords',
value: function plotCoords() {
var w = this.w;
var gl = w.globals;
var lgRect = this.getLegendsRect();
if (gl.axisCharts) {
// for line / area / scatter / column
this.setGridCoordsForAxisCharts(lgRect);
} else {
// for pie / donuts / circle
this.setGridCoordsForNonAxisCharts(lgRect);
}
this.titleSubtitleOffset();
// after calculating everything, apply padding set by user
gl.gridHeight = gl.gridHeight - w.config.grid.padding.top - w.config.grid.padding.bottom;
gl.gridWidth = gl.gridWidth - w.config.grid.padding.left - w.config.grid.padding.right - this.xPadRight - this.xPadLeft;
gl.translateX = gl.translateX + w.config.grid.padding.left + this.xPadLeft;
gl.translateY = gl.translateY + w.config.grid.padding.top;
}
}, {
key: 'conditionalChecksForAxisCoords',
value: function conditionalChecksForAxisCoords(xaxisLabelCoords, xtitleCoords) {
var w = this.w;
this.xAxisHeight = (xaxisLabelCoords.height + xtitleCoords.height) * w.globals.LINE_HEIGHT_RATIO + 15;
this.xAxisWidth = xaxisLabelCoords.width;
if (this.xAxisHeight - xtitleCoords.height > w.config.xaxis.labels.maxHeight) {
this.xAxisHeight = w.config.xaxis.labels.maxHeight;
}
if (w.config.xaxis.labels.minHeight && this.xAxisHeight < w.config.xaxis.labels.minHeight) {
this.xAxisHeight = w.config.xaxis.labels.minHeight;
}
if (w.config.xaxis.floating) {
this.xAxisHeight = 0;
}
if (!w.globals.isBarHorizontal) {
this.yAxisWidth = this.getTotalYAxisWidth();
} else {
this.yAxisWidth = w.globals.yLabelsCoords[0].width + w.globals.yTitleCoords[0].width + 15;
}
var minYAxisWidth = 0;
var maxYAxisWidth = 0;
w.config.yaxis.forEach(function (y) {
minYAxisWidth += y.labels.minWidth;
maxYAxisWidth += y.labels.maxWidth;
});
if (this.yAxisWidth < minYAxisWidth) {
this.yAxisWidth = minYAxisWidth;
}
if (this.yAxisWidth > maxYAxisWidth) {
this.yAxisWidth = maxYAxisWidth;
}
}
}, {
key: 'setGridCoordsForAxisCharts',
value: function setGridCoordsForAxisCharts(lgRect) {
var w = this.w;
var gl = w.globals;
var yaxisLabelCoords = this.getyAxisLabelsCoords();
var xaxisLabelCoords = this.getxAxisLabelsCoords();
var yTitleCoords = this.getyAxisTitleCoords();
var xtitleCoords = this.getxAxisTitleCoords();
w.globals.yLabelsCoords = [];
w.globals.yTitleCoords = [];
w.config.yaxis.map(function (yaxe, index) {
// store the labels and titles coords in global vars
w.globals.yLabelsCoords.push({
width: yaxisLabelCoords[index].width,
index: index
});
w.globals.yTitleCoords.push({
width: yTitleCoords[index].width,
index: index
});
});
this.conditionalChecksForAxisCoords(xaxisLabelCoords, xtitleCoords);
gl.translateXAxisY = w.globals.rotateXLabels ? this.xAxisHeight / 8 : -4;
gl.translateXAxisX = w.globals.rotateXLabels && w.globals.isXNumeric && w.config.xaxis.labels.rotate <= -45 ? -this.xAxisWidth / 4 : 0;
if (w.globals.isBarHorizontal) {
gl.rotateXLabels = false;
gl.translateXAxisY = -1 * (parseInt(w.config.xaxis.labels.style.fontSize) / 1.5);
}
gl.translateXAxisY = gl.translateXAxisY + w.config.xaxis.labels.offsetY;
gl.translateXAxisX = gl.translateXAxisX + w.config.xaxis.labels.offsetX;
var yAxisWidth = this.yAxisWidth;
var xAxisHeight = this.xAxisHeight;
gl.xAxisLabelsHeight = this.xAxisHeight;
gl.xAxisHeight = this.xAxisHeight;
var translateY = 10;
if (!w.config.grid.show || w.config.chart.type === 'radar') {
yAxisWidth = 0;
xAxisHeight = 35;
}
if (this.isSparkline) {
lgRect = {
height: 0,
width: 0
};
xAxisHeight = 0;
yAxisWidth = 0;
translateY = 0;
}
this.additionalPaddingXLabels(xaxisLabelCoords);
switch (w.config.legend.position) {
case 'bottom':
gl.translateY = translateY;
gl.translateX = yAxisWidth;
gl.gridHeight = gl.svgHeight - lgRect.height - xAxisHeight - (!this.isSparkline ? w.globals.rotateXLabels ? 10 : 15 : 0);
gl.gridWidth = gl.svgWidth - yAxisWidth;
break;
case 'top':
gl.translateY = lgRect.height + translateY;
gl.translateX = yAxisWidth;
gl.gridHeight = gl.svgHeight - lgRect.height - xAxisHeight - (!this.isSparkline ? w.globals.rotateXLabels ? 10 : 15 : 0);
gl.gridWidth = gl.svgWidth - yAxisWidth;
break;
case 'left':
gl.translateY = translateY;
gl.translateX = lgRect.width + yAxisWidth;
gl.gridHeight = gl.svgHeight - xAxisHeight - 12;
gl.gridWidth = gl.svgWidth - lgRect.width - yAxisWidth;
break;
case 'right':
gl.translateY = translateY;
gl.translateX = yAxisWidth;
gl.gridHeight = gl.svgHeight - xAxisHeight - 12;
gl.gridWidth = gl.svgWidth - lgRect.width - yAxisWidth - 5;
break;
default:
throw new Error('Legend position not supported');
}
this.setGridXPosForDualYAxis(yTitleCoords, yaxisLabelCoords);
// after drawing everything, set the Y axis positions
var objyAxis = new _YAxis2.default(this.ctx);
objyAxis.setYAxisXPosition(yaxisLabelCoords, yTitleCoords);
}
}, {
key: 'setGridCoordsForNonAxisCharts',
value: function setGridCoordsForNonAxisCharts(lgRect) {
var w = this.w;
var gl = w.globals;
var xPad = 0;
if (w.config.legend.show && !w.config.legend.floating) {
xPad = 20;
}
var offY = 10;
var offX = 0;
if (w.config.chart.type === 'pie' || w.config.chart.type === 'donut') {
offY = offY + w.config.plotOptions.pie.offsetY;
offX = offX + w.config.plotOptions.pie.offsetX;
} else if (w.config.chart.type === 'radialBar') {
offY = offY + w.config.plotOptions.radialBar.offsetY;
offX = offX + w.config.plotOptions.radialBar.offsetX;
}
if (!w.config.legend.show) {
gl.gridHeight = gl.svgHeight - 35;
gl.gridWidth = gl.gridHeight;
gl.translateY = offY - 10;
gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2;
return;
}
switch (w.config.legend.position) {
case 'bottom':
gl.gridHeight = gl.svgHeight - lgRect.height - 35;
gl.gridWidth = gl.gridHeight;
gl.translateY = offY - 20;
gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2;
break;
case 'top':
gl.gridHeight = gl.svgHeight - lgRect.height - 35;
gl.gridWidth = gl.gridHeight;
gl.translateY = lgRect.height + offY;
gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2;
break;
case 'left':
gl.gridWidth = gl.svgWidth - lgRect.width - xPad;
gl.gridHeight = gl.gridWidth;
gl.translateY = offY;
gl.translateX = offX + lgRect.width + xPad;
break;
case 'right':
gl.gridWidth = gl.svgWidth - lgRect.width - xPad - 5;
gl.gridHeight = gl.gridWidth;
gl.translateY = offY;
gl.translateX = offX + 10;
break;
default:
throw new Error('Legend position not supported');
}
}
}, {
key: 'setGridXPosForDualYAxis',
value: function setGridXPosForDualYAxis(yTitleCoords, yaxisLabelCoords) {
var w = this.w;
w.config.yaxis.map(function (yaxe, index) {
if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1 && !w.config.yaxis[index].floating && w.config.yaxis[index].show) {
if (yaxe.opposite) {
w.globals.translateX = w.globals.translateX - (yaxisLabelCoords[index].width + yTitleCoords[index].width) - parseInt(w.config.yaxis[index].labels.style.fontSize) / 1.2 - 12;
}
}
});
}
// Sometimes, the last labels gets cropped in category/numeric xaxis.
// Hence, we add some additional padding based on the label length to avoid the last label being cropped.
// NOTE: datetime x-axis won't have any effect with this as we don't know the label length there due to many constraints.
}, {
key: 'additionalPaddingXLabels',
value: function additionalPaddingXLabels(xaxisLabelCoords) {
var _this = this;
var w = this.w;
if (w.config.xaxis.type === 'category' && w.globals.isBarHorizontal || w.config.xaxis.type === 'numeric' || w.config.xaxis.type === 'datetime') {
var rightPad = function rightPad(labels) {
if (_this.timescaleLabels) {
// for timeline labels, we take the last label and check if it exceeds gridWidth
var lastTimescaleLabel = _this.timescaleLabels[_this.timescaleLabels.length - 1];
var labelPosition = lastTimescaleLabel.position + labels.width;
if (labelPosition > w.globals.gridWidth) {
w.globals.skipLastTimelinelabel = true;
} else {
// we have to make it false again in case of zooming/panning
w.globals.skipLastTimelinelabel = false;
}
} else if (w.config.xaxis.type !== 'datetime') {
if (w.config.grid.padding.right < labels.width) {
_this.xPadRight = labels.width / 2 + 1;
}
}
};
var leftPad = function leftPad(labels) {
if (w.config.grid.padding.left < labels.width) {
_this.xPadLeft = labels.width / 2 + 1;
}
};
var isXNumeric = w.globals.isXNumeric;
w.config.yaxis.forEach(function (yaxe, i) {
var shouldPad = !yaxe.show || yaxe.floating || w.globals.collapsedSeriesIndices.indexOf(i) !== -1 || isXNumeric || yaxe.opposite && w.globals.isBarHorizontal;
if (shouldPad) {
if (isXNumeric && w.globals.isMultipleYAxis && w.globals.collapsedSeriesIndices.indexOf(i) !== -1 || w.globals.isBarHorizontal && yaxe.opposite) {
leftPad(xaxisLabelCoords);
}
if (!w.globals.isBarHorizontal && yaxe.opposite && w.globals.collapsedSeriesIndices.indexOf(i) !== -1 || isXNumeric && !w.globals.isMultipleYAxis) {
rightPad(xaxisLabelCoords);
}
}
});
}
}
}, {
key: 'titleSubtitleOffset',
value: function titleSubtitleOffset() {
var w = this.w;
var gl = w.globals;
var gridShrinkOffset = this.isSparkline || !w.globals.axisCharts ? 0 : 10;
if (w.config.title.text !== undefined) {
gridShrinkOffset += w.config.title.margin;
} else {
gridShrinkOffset += this.isSparkline || !w.globals.axisCharts ? 0 : 5;
}
if (w.config.subtitle.text !== undefined) {
gridShrinkOffset += w.config.subtitle.margin;
} else {
gridShrinkOffset += this.isSparkline || !w.globals.axisCharts ? 0 : 5;
}
if (w.config.legend.show && w.config.legend.position === 'bottom' && !w.config.legend.floating && w.config.series.length > 1) {
gridShrinkOffset += 10;
}
var titleCoords = this.getTitleSubtitleCoords('title');
var subtitleCoords = this.getTitleSubtitleCoords('subtitle');
gl.gridHeight = gl.gridHeight - titleCoords.height - subtitleCoords.height - gridShrinkOffset;
gl.translateY = gl.translateY + titleCoords.height + subtitleCoords.height + gridShrinkOffset;
}
}, {
key: 'getTotalYAxisWidth',
value: function getTotalYAxisWidth() {
var w = this.w;
var yAxisWidth = 0;
var padding = 10;
var isHiddenYAxis = function isHiddenYAxis(index) {
return w.globals.ignoreYAxisIndexes.indexOf(index) > -1;
};
w.globals.yLabelsCoords.map(function (yLabelCoord, index) {
var floating = w.config.yaxis[index].floating;
if (yLabelCoord.width > 0 && !floating) {
yAxisWidth = yAxisWidth + yLabelCoord.width + padding;
if (isHiddenYAxis(index)) {
yAxisWidth = yAxisWidth - yLabelCoord.width - padding;
}
} else {
yAxisWidth = yAxisWidth + (floating || !w.config.yaxis[index].show ? 0 : 5);
}
});
w.globals.yTitleCoords.map(function (yTitleCoord, index) {
var floating = w.config.yaxis[index].floating;
padding = parseInt(w.config.yaxis[index].title.style.fontSize);
if (yTitleCoord.width > 0 && !floating) {
yAxisWidth = yAxisWidth + yTitleCoord.width + padding;
if (isHiddenYAxis(index)) {
yAxisWidth = yAxisWidth - yTitleCoord.width - padding;
}
} else {
yAxisWidth = yAxisWidth + (floating || !w.config.yaxis[index].show ? 0 : 5);
}
});
return yAxisWidth;
}
}, {
key: 'getxAxisTimeScaleLabelsCoords',
value: function getxAxisTimeScaleLabelsCoords() {
var w = this.w;
var rect = void 0;
this.timescaleLabels = w.globals.timelineLabels.slice();
if (w.globals.isBarHorizontal && w.config.xaxis.type === 'datetime') {
this.timescaleLabels = w.globals.invertedTimelineLabels.slice();
}
var labels = this.timescaleLabels.map(function (label) {
return label.value;
});
// get the longest string from the labels array and also apply label formatter to it
var val = labels.reduce(function (a, b) {
// if undefined, maybe user didn't pass the datetime(x) values
if (typeof a === 'undefined') {
console.error('You have possibly supplied invalid Date format. Please supply a valid JavaScript Date');
return 0;
} else {
return a.length > b.length ? a : b;
}
}, 0);
var graphics = new _Graphics2.default(this.ctx);
rect = graphics.getTextRects(val, w.config.xaxis.labels.style.fontSize);
var totalWidthRotated = rect.width * 1.05 * labels.length;
if (totalWidthRotated > w.globals.gridWidth && w.config.xaxis.labels.rotate !== 0) {
w.globals.overlappingXLabels = true;
}
return rect;
}
/**
* Get X Axis Dimensions
* @memberof Dimensions
* @return {{width, height}}
**/
}, {
key: 'getxAxisLabelsCoords',
value: function getxAxisLabelsCoords() {
var w = this.w;
var xaxisLabels = w.globals.labels.slice();
var rect = void 0;
if (w.globals.timelineLabels.length > 0) {
var coords = this.getxAxisTimeScaleLabelsCoords();
rect = {
width: coords.width,
height: coords.height
};
} else {
var lgWidthForSideLegends = w.config.legend.position === 'left' && w.config.legend.position === 'right' && !w.config.legend.floating ? this.lgRect.width : 0;
// get the longest string from the labels array and also apply label formatter
var xlbFormatter = w.globals.xLabelFormatter;
// prevent changing xaxisLabels to avoid issues in multi-yaxies - fix #522
var val = xaxisLabels.reduce(function (a, b) {
return a.length > b.length ? a : b;
}, 0);
// the labels gets changed for bar charts
if (w.globals.isBarHorizontal) {
val = w.globals.yAxisScale[0].result.reduce(function (a, b) {
return a.length > b.length ? a : b;
}, 0);
}
var xFormat = new _Formatters2.default(this.ctx);
val = xFormat.xLabelFormat(xlbFormatter, val);
var graphics = new _Graphics2.default(this.ctx);
var xLabelrect = graphics.getTextRects(val, w.config.xaxis.labels.style.fontSize);
rect = {
width: xLabelrect.width,
height: xLabelrect.height
};
if (rect.width * xaxisLabels.length > w.globals.svgWidth - lgWidthForSideLegends - this.yAxisWidth && w.config.xaxis.labels.rotate !== 0) {
if (!w.globals.isBarHorizontal) {
w.globals.rotateXLabels = true;
xLabelrect = graphics.getTextRects(val, w.config.xaxis.labels.style.fontSize, w.config.xaxis.labels.style.fontFamily, 'rotate(' + w.config.xaxis.labels.rotate + ' 0 0)', false);
rect.height = xLabelrect.height / 1.66;
}
} else {
w.globals.rotateXLabels = false;
}
}
if (!w.config.xaxis.labels.show) {
rect = {
width: 0,
height: 0
};
}
return {
width: rect.width,
height: rect.height
};
}
/**
* Get Y Axis Dimensions
* @memberof Dimensions
* @return {{width, height}}
**/
}, {
key: 'getyAxisLabelsCoords',
value: function getyAxisLabelsCoords() {
var _this2 = this;
var w = this.w;
var width = 0;
var height = 0;
var ret = [];
var labelPad = 10;
w.config.yaxis.map(function (yaxe, index) {
if (yaxe.show && yaxe.labels.show && w.globals.yAxisScale[index].result.length) {
var lbFormatter = w.globals.yLabelFormatters[index];
// the second parameter -1 is the index of tick which user can use in the formatter
var val = lbFormatter(w.globals.yAxisScale[index].niceMax, -1);
// if user has specified a custom formatter, and the result is null or empty, we need to discard the formatter and take the value as it is.
if (typeof val === 'undefined' || val.length === 0) {
val = w.globals.yAxisScale[index].niceMax;
}
if (w.globals.isBarHorizontal) {
labelPad = 0;
var barYaxisLabels = w.globals.labels.slice();
// get the longest string from the labels array and also apply label formatter to it
val = barYaxisLabels.reduce(function (a, b) {
return a.length > b.length ? a : b;
}, 0);
val = lbFormatter(val, -1);
}
var graphics = new _Graphics2.default(_this2.ctx);
var rect = graphics.getTextRects(val, yaxe.labels.style.fontSize);
ret.push({
width: rect.width + labelPad,
height: rect.height
});
} else {
ret.push({
width: width,
height: height
});
}
});
return ret;
}
/**
* Get X Axis Title Dimensions
* @memberof Dimensions
* @return {{width, height}}
**/
}, {
key: 'getxAxisTitleCoords',
value: function getxAxisTitleCoords() {
var w = this.w;
var width = 0;
var height = 0;
if (w.config.xaxis.title.text !== undefined) {
var graphics = new _Graphics2.default(this.ctx);
var rect = graphics.getTextRects(w.config.xaxis.title.text, w.config.xaxis.title.style.fontSize);
width = rect.width;
height = rect.height;
}
return {
width: width,
height: height
};
}
/**
* Get Y Axis Dimensions
* @memberof Dimensions
* @return {{width, height}}
**/
}, {
key: 'getyAxisTitleCoords',
value: function getyAxisTitleCoords() {
var _this3 = this;
var w = this.w;
var ret = [];
w.config.yaxis.map(function (yaxe, index) {
if (yaxe.show && yaxe.title.text !== undefined) {
var graphics = new _Graphics2.default(_this3.ctx);
var rect = graphics.getTextRects(yaxe.title.text, yaxe.title.style.fontSize, yaxe.title.style.fontFamily, 'rotate(-90 0 0)', false);
ret.push({
width: rect.width,
height: rect.height
});
} else {
ret.push({
width: 0,
height: 0
});
}
});
return ret;
}
/**
* Get Chart Title/Subtitle Dimensions
* @memberof Dimensions
* @return {{width, height}}
**/
}, {
key: 'getTitleSubtitleCoords',
value: function getTitleSubtitleCoords(type) {
var w = this.w;
var width = 0;
var height = 0;
var floating = type === 'title' ? w.config.title.floating : w.config.subtitle.floating;
var el = w.globals.dom.baseEl.querySelector('.apexcharts-' + type + '-text');
if (el !== null && !floating) {
var coord = el.getBoundingClientRect();
width = coord.width;
height = w.globals.axisCharts ? coord.height + 5 : coord.height;
}
return {
width: width,
height: height
};
}
}, {
key: 'getLegendsRect',
value: function getLegendsRect() {
var w = this.w;
var elLegendWrap = w.globals.dom.baseEl.querySelector('.apexcharts-legend');
var lgRect = Object.assign({}, _Utils2.default.getBoundingClientRect(elLegendWrap));
if (elLegendWrap !== null && !w.config.legend.floating && w.config.legend.show) {
this.lgRect = {
x: lgRect.x,
y: lgRect.y,
height: lgRect.height,
width: lgRect.height === 0 ? 0 : lgRect.width
};
} else {
this.lgRect = {
x: 0,
y: 0,
height: 0,
width: 0
};
}
return this.lgRect;
}
}]);
return Dimensions;
}();
exports.default = Dimensions;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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);
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"); } }
var Range = function () {
function Range(ctx) {
_classCallCheck(this, Range);
this.ctx = ctx;
this.w = ctx.w;
}
// http://stackoverflow.com/questions/326679/choosing-an-attractive-linear-scale-for-a-graphs-y-axiss
// This routine creates the Y axis values for a graph.
_createClass(Range, [{
key: 'niceScale',
value: function niceScale(yMin, yMax, diff) {
var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var ticks = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 10;
var w = this.w;
var NO_MIN_MAX_PROVIDED = this.w.config.yaxis[index].max === undefined && this.w.config.yaxis[index].min === undefined || this.w.config.yaxis[index].forceNiceScale;
if (yMin === Number.MIN_VALUE && yMax === 0 || !_Utils2.default.isNumber(yMin) && !_Utils2.default.isNumber(yMax) || yMin === Number.MIN_VALUE && yMax === -Number.MAX_VALUE) {
// when all values are 0
yMin = 0;
yMax = ticks;
var linearScale = this.linearScale(yMin, yMax, ticks);
return linearScale;
}
if (yMin > yMax) {
// if somehow due to some wrong config, user sent max less than min,
// adjust the min/max again
console.warn('yaxis.min cannot be greater than yaxis.max');
yMax = yMin + 0.1;
} else if (yMin === yMax) {
// If yMin and yMax are identical, then
// adjust the yMin and yMax values to actually
// make a graph. Also avoids division by zero errors.
yMin = yMin === 0 ? 0 : yMin - 0.5; // some small value
yMax = yMax === 0 ? 2 : yMax + 0.5; // some small value
}
// Calculate Min amd Max graphical labels and graph
// increments. The number of ticks defaults to
// 10 which is the SUGGESTED value. Any tick value
// entered is used as a suggested value which is
// adjusted to be a 'pretty' value.
//
// Output will be an array of the Y axis values that
// encompass the Y values.
var result = [];
// Determine Range
var range = Math.abs(yMax - yMin);
if (range < 1 && NO_MIN_MAX_PROVIDED && (w.config.chart.type === 'candlestick' || w.config.series[index].type === 'candlestick' || w.globals.isRangeData)) {
/* fix https://github.com/apexcharts/apexcharts.js/issues/430 */
yMax = yMax * 1.01;
}
// for extremely small values - #fix #553
if (range < 0.00001 && NO_MIN_MAX_PROVIDED && yMax < 10) {
yMax = yMax * 1.05;
} else if (diff > 0.1 && diff < 3 && NO_MIN_MAX_PROVIDED) {
/* fix https://github.com/apexcharts/apexcharts.js/issues/576 */
/* fix https://github.com/apexcharts/apexcharts.js/issues/588 */
yMax = yMax + diff / 3;
}
var tiks = ticks + 1;
// Adjust ticks if needed
if (tiks < 2) {
tiks = 2;
} else if (tiks > 2) {
tiks -= 2;
}
// Get raw step value
var tempStep = range / tiks;
// Calculate pretty step value
var mag = Math.floor(_Utils2.default.log10(tempStep));
var magPow = Math.pow(10, mag);
var magMsd = parseInt(tempStep / magPow);
var stepSize = magMsd * magPow;
// build Y label array.
// Lower and upper bounds calculations
var lb = stepSize * Math.floor(yMin / stepSize);
var ub = stepSize * Math.ceil(yMax / stepSize);
// Build array
var val = lb;
while (1) {
result.push(val);
val += stepSize;
if (val > ub) {
break;
}
}
if (NO_MIN_MAX_PROVIDED) {
return {
result: result,
niceMin: result[0],
niceMax: result[result.length - 1]
};
} else {
result = [];
var v = yMin;
result.push(v);
var valuesDivider = Math.abs(yMax - yMin) / ticks;
for (var i = 0; i <= ticks - 1; i++) {
v = v + valuesDivider;
result.push(v);
}
return {
result: result,
niceMin: result[0],
niceMax: result[result.length - 1]
};
}
}
}, {
key: 'linearScale',
value: function linearScale(yMin, yMax) {
var ticks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
var range = Math.abs(yMax - yMin);
var step = range / ticks;
if (ticks === Number.MAX_VALUE) {
ticks = 10;
step = 1;
}
var result = [];
var v = yMin;
while (ticks >= 0) {
result.push(v);
v = v + step;
ticks -= 1;
}
return {
result: result,
niceMin: result[0],
niceMax: result[result.length - 1]
};
}
}, {
key: 'logarithmicScale',
value: function logarithmicScale(index, yMin, yMax, ticks) {
if (yMin < 0 || yMin === Number.MIN_VALUE) yMin = 0.01;
var base = 10;
var min = Math.log(yMin) / Math.log(base);
var max = Math.log(yMax) / Math.log(base);
var range = Math.abs(yMax - yMin);
var step = range / ticks;
var result = [];
var v = yMin;
while (ticks >= 0) {
result.push(v);
v = v + step;
ticks -= 1;
}
var logs = result.map(function (niceNumber, i) {
if (niceNumber <= 0) {
niceNumber = 0.01;
}
// calculate adjustment factor
var scale = (max - min) / (yMax - yMin);
var logVal = Math.pow(base, min + scale * (niceNumber - min));
return Math.round(logVal / _Utils2.default.roundToBase(logVal, base)) * _Utils2.default.roundToBase(logVal, base);
});
// Math.floor may have rounded the value to 0, revert back to 1
if (logs[0] === 0) logs[0] = 1;
return {
result: logs,
niceMin: logs[0],
niceMax: logs[logs.length - 1]
};
}
}, {
key: 'setYScaleForIndex',
value: function setYScaleForIndex(index, minY, maxY) {
var gl = this.w.globals;
var cnf = this.w.config;
var y = gl.isBarHorizontal ? cnf.xaxis : cnf.yaxis[index];
if (typeof gl.yAxisScale[index] === 'undefined') {
gl.yAxisScale[index] = [];
}
if (y.logarithmic) {
gl.allSeriesCollapsed = false;
gl.yAxisScale[index] = this.logarithmicScale(index, minY, maxY, y.tickAmount ? y.tickAmount : Math.floor(Math.log10(maxY)));
} else {
if (maxY === -Number.MAX_VALUE || !_Utils2.default.isNumber(maxY)) {
// no data in the chart. Either all series collapsed or user passed a blank array
gl.yAxisScale[index] = this.linearScale(0, 5, 5);
} else {
// there is some data. Turn off the allSeriesCollapsed flag
gl.allSeriesCollapsed = false;
if ((y.min !== undefined || y.max !== undefined) && !y.forceNiceScale) {
// fix https://github.com/apexcharts/apexcharts.js/issues/492
gl.yAxisScale[index] = this.linearScale(minY, maxY, y.tickAmount);
} else {
var diff = Math.abs(maxY - minY);
gl.yAxisScale[index] = this.niceScale(minY, maxY, diff, index,
// fix https://github.com/apexcharts/apexcharts.js/issues/397
y.tickAmount ? y.tickAmount : diff < 5 && diff > 1 ? diff + 1 : 5);
}
}
}
}
}, {
key: 'setMultipleYScales',
value: function setMultipleYScales() {
var _this = this;
var gl = this.w.globals;
var cnf = this.w.config;
var minYArr = gl.minYArr.concat([]);
var maxYArr = gl.maxYArr.concat([]);
var scalesIndices = [];
// here, we loop through the yaxis array and find the item which has "seriesName" property
cnf.yaxis.forEach(function (yaxe, i) {
var index = i;
cnf.series.forEach(function (s, si) {
// if seriesName matches and that series is not collapsed, we use that scale
if (s.name === yaxe.seriesName && gl.collapsedSeriesIndices.indexOf(si) === -1) {
index = si;
if (i !== si) {
scalesIndices.push({
index: si,
similarIndex: i,
alreadyExists: true
});
} else {
scalesIndices.push({
index: si
});
}
}
});
var minY = minYArr[index];
var maxY = maxYArr[index];
_this.setYScaleForIndex(i, minY, maxY);
});
this.sameScaleInMultipleAxes(minYArr, maxYArr, scalesIndices);
}
}, {
key: 'sameScaleInMultipleAxes',
value: function sameScaleInMultipleAxes(minYArr, maxYArr, scalesIndices) {
var _this2 = this;
var cnf = this.w.config;
var gl = this.w.globals;
// we got the scalesIndices array in the above code, but we need to filter out the items which doesn't have same scales
var similarIndices = [];
scalesIndices.forEach(function (scale) {
if (scale.alreadyExists) {
if (typeof similarIndices[scale.index] === 'undefined') {
similarIndices[scale.index] = [];
}
similarIndices[scale.index].push(scale.index);
similarIndices[scale.index].push(scale.similarIndex);
}
});
function intersect(a, b) {
return a.filter(function (value) {
return b.indexOf(value) !== -1;
});
}
similarIndices.forEach(function (si, i) {
similarIndices.forEach(function (sj, j) {
if (i !== j) {
if (intersect(si, sj).length > 0) {
similarIndices[i] = similarIndices[i].concat(similarIndices[j]);
}
}
});
});
// then, we remove duplicates from the similarScale array
var uniqueSimilarIndices = similarIndices.map(function (item) {
return item.filter(function (i, pos) {
return item.indexOf(i) === pos;
});
});
// sort further to remove whole duplicate arrays later
var sortedIndices = uniqueSimilarIndices.map(function (s) {
return s.sort();
});
// remove undefined items
similarIndices = similarIndices.filter(function (s) {
return !!s;
});
var indices = sortedIndices.slice();
var stringIndices = indices.map(function (ind) {
return JSON.stringify(ind);
});
indices = indices.filter(function (ind, p) {
return stringIndices.indexOf(JSON.stringify(ind)) === p;
});
var sameScaleMinYArr = [];
var sameScaleMaxYArr = [];
minYArr.forEach(function (minYValue, yi) {
indices.forEach(function (scale, i) {
// we compare only the yIndex which exists in the indices array
if (scale.indexOf(yi) > -1) {
if (typeof sameScaleMinYArr[i] === 'undefined') {
sameScaleMinYArr[i] = [];
sameScaleMaxYArr[i] = [];
}
sameScaleMinYArr[i].push({
key: yi,
value: minYValue
});
sameScaleMaxYArr[i].push({
key: yi,
value: maxYArr[yi]
});
}
});
});
var sameScaleMin = Array.apply(null, Array(indices.length)).map(Number.prototype.valueOf, Number.MIN_VALUE);
var sameScaleMax = Array.apply(null, Array(indices.length)).map(Number.prototype.valueOf, -Number.MAX_VALUE);
sameScaleMinYArr.forEach(function (s, i) {
s.forEach(function (sc, j) {
sameScaleMin[i] = Math.min(sc.value, sameScaleMin[i]);
});
});
sameScaleMaxYArr.forEach(function (s, i) {
s.forEach(function (sc, j) {
sameScaleMax[i] = Math.max(sc.value, sameScaleMax[i]);
});
});
minYArr.forEach(function (min, i) {
sameScaleMaxYArr.forEach(function (s, si) {
var minY = sameScaleMin[si];
var maxY = sameScaleMax[si];
s.forEach(function (ind, k) {
if (s[k].key === i) {
if (cnf.yaxis[i].min !== undefined) {
if (typeof cnf.yaxis[i].min === 'function') {
minY = cnf.yaxis[i].min(gl.minY);
} else {
minY = cnf.yaxis[i].min;
}
}
if (cnf.yaxis[i].max !== undefined) {
if (typeof cnf.yaxis[i].max === 'function') {
maxY = cnf.yaxis[i].max(gl.maxY);
} else {
maxY = cnf.yaxis[i].max;
}
}
_this2.setYScaleForIndex(i, minY, maxY);
}
});
});
});
}
}, {
key: 'autoScaleY',
value: function autoScaleY(ctx, e) {
if (!ctx) {
ctx = this;
}
var ret = [];
ctx.w.config.series.forEach(function (serie) {
var min = void 0,
max = void 0;
var first = serie.data.find(function (x) {
return x[0] >= e.xaxis.min;
});
var firstValue = first[1];
max = min = firstValue;
serie.data.forEach(function (data) {
if (data[0] <= e.xaxis.max && data[0] >= e.xaxis.min) {
if (data[1] > max && data[1] !== null) max = data[1];
if (data[1] < min && data[1] !== null) min = data[1];
}
});
min *= 0.95;
max *= 1.05;
ret.push({
min: min,
max: max
});
});
return ret;
}
}]);
return Range;
}();
exports.default = Range;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _AxesUtils = __webpack_require__(24);
var _AxesUtils2 = _interopRequireDefault(_AxesUtils);
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 XAxis Class for drawing X-Axis.
*
* @module XAxis
**/
var XAxis = function () {
function XAxis(ctx) {
_classCallCheck(this, XAxis);
this.ctx = ctx;
this.w = ctx.w;
var w = this.w;
this.xaxisLabels = w.globals.labels.slice();
if (w.globals.timelineLabels.length > 0) {
// timeline labels are there
this.xaxisLabels = w.globals.timelineLabels.slice();
}
this.drawnLabels = [];
if (w.config.xaxis.position === 'top') {
this.offY = 0;
} else {
this.offY = w.globals.gridHeight + 1;
}
this.offY = this.offY + w.config.xaxis.axisBorder.offsetY;
this.xaxisFontSize = w.config.xaxis.labels.style.fontSize;
this.xaxisFontFamily = w.config.xaxis.labels.style.fontFamily;
this.xaxisForeColors = w.config.xaxis.labels.style.colors;
this.xaxisBorderWidth = w.config.xaxis.axisBorder.width;
if (this.xaxisBorderWidth.indexOf('%') > -1) {
this.xaxisBorderWidth = w.globals.gridWidth * parseInt(this.xaxisBorderWidth) / 100;
} else {
this.xaxisBorderWidth = parseInt(this.xaxisBorderWidth);
}
this.xaxisBorderHeight = w.config.xaxis.axisBorder.height;
// For bars, we will only consider single y xais,
// as we are not providing multiple yaxis for bar charts
this.yaxis = w.config.yaxis[0];
this.axesUtils = new _AxesUtils2.default(ctx);
}
_createClass(XAxis, [{
key: 'drawXaxis',
value: function drawXaxis() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var elXaxis = graphics.group({
class: 'apexcharts-xaxis',
transform: 'translate(' + w.config.xaxis.offsetX + ', ' + w.config.xaxis.offsetY + ')'
});
var elXaxisTexts = graphics.group({
class: 'apexcharts-xaxis-texts-g',
transform: 'translate(' + w.globals.translateXAxisX + ', ' + w.globals.translateXAxisY + ')'
});
elXaxis.add(elXaxisTexts);
var colWidth = void 0;
// initial x Position (keep adding column width in the loop)
var xPos = w.globals.padHorizontal;
var labels = [];
for (var i = 0; i < this.xaxisLabels.length; i++) {
labels.push(this.xaxisLabels[i]);
}
if (w.globals.isXNumeric) {
colWidth = w.globals.gridWidth / (labels.length - 1);
xPos = xPos + colWidth / 2 + w.config.xaxis.labels.offsetX;
} else {
colWidth = w.globals.gridWidth / labels.length;
xPos = xPos + colWidth + w.config.xaxis.labels.offsetX;
}
var labelsLen = labels.length;
if (w.config.xaxis.labels.show) {
for (var _i = 0; _i <= labelsLen - 1; _i++) {
var x = xPos - colWidth / 2 + w.config.xaxis.labels.offsetX;
var label = this.axesUtils.getLabel(labels, w.globals.timelineLabels, x, _i, this.drawnLabels);
this.drawnLabels.push(label.text);
var offsetYCorrection = 28;
if (w.globals.rotateXLabels) {
offsetYCorrection = 22;
}
var elTick = graphics.drawText({
x: label.x,
y: this.offY + w.config.xaxis.labels.offsetY + offsetYCorrection,
text: '',
textAnchor: 'middle',
fontSize: this.xaxisFontSize,
fontFamily: this.xaxisFontFamily,
foreColor: Array.isArray(this.xaxisForeColors) ? this.xaxisForeColors[_i] : this.xaxisForeColors,
cssClass: 'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass
});
if (_i === labelsLen - 1) {
if (w.globals.skipLastTimelinelabel) {
label.text = '';
}
}
elXaxisTexts.add(elTick);
graphics.addTspan(elTick, label.text, this.xaxisFontFamily);
var elTooltipTitle = document.createElementNS(w.globals.SVGNS, 'title');
elTooltipTitle.textContent = label.text;
elTick.node.appendChild(elTooltipTitle);
xPos = xPos + colWidth;
}
}
if (w.config.xaxis.title.text !== undefined) {
var elXaxisTitle = graphics.group({
class: 'apexcharts-xaxis-title'
});
var elXAxisTitleText = graphics.drawText({
x: w.globals.gridWidth / 2 + w.config.xaxis.title.offsetX,
y: this.offY - parseInt(this.xaxisFontSize) + w.globals.xAxisLabelsHeight + w.config.xaxis.title.offsetY,
text: w.config.xaxis.title.text,
textAnchor: 'middle',
fontSize: w.config.xaxis.title.style.fontSize,
fontFamily: w.config.xaxis.title.style.fontFamily,
foreColor: w.config.xaxis.title.style.color,
cssClass: 'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass
});
elXaxisTitle.add(elXAxisTitleText);
elXaxis.add(elXaxisTitle);
}
if (w.config.xaxis.axisBorder.show) {
var lineCorrection = 0;
if (w.config.chart.type === 'bar' && w.globals.isXNumeric) {
lineCorrection = lineCorrection - 15;
}
var elHorzLine = graphics.drawLine(w.globals.padHorizontal + lineCorrection + w.config.xaxis.axisBorder.offsetX, this.offY, this.xaxisBorderWidth, this.offY, w.config.xaxis.axisBorder.color, 0, this.xaxisBorderHeight);
elXaxis.add(elHorzLine);
}
return elXaxis;
}
// this actually becomes the vertical axis (for bar charts)
}, {
key: 'drawXaxisInversed',
value: function drawXaxisInversed(realIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var translateYAxisX = w.config.yaxis[0].opposite ? w.globals.translateYAxisX[realIndex] : 0;
var elYaxis = graphics.group({
class: 'apexcharts-yaxis apexcharts-xaxis-inversed',
rel: realIndex
});
var elYaxisTexts = graphics.group({
class: 'apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g',
transform: 'translate(' + translateYAxisX + ', 0)'
});
elYaxis.add(elYaxisTexts);
var colHeight = void 0;
// initial x Position (keep adding column width in the loop)
var yPos = void 0;
var labels = [];
for (var i = 0; i < this.xaxisLabels.length; i++) {
labels.push(this.xaxisLabels[i]);
}
colHeight = w.globals.gridHeight / labels.length;
yPos = -(colHeight / 2.2);
var lbFormatter = w.globals.yLabelFormatters[0];
var ylabels = w.config.yaxis[0].labels;
if (ylabels.show) {
for (var _i2 = 0; _i2 <= labels.length - 1; _i2++) {
var label = typeof labels[_i2] === 'undefined' ? '' : labels[_i2];
label = lbFormatter(label);
var elLabel = graphics.drawText({
x: ylabels.offsetX - 15,
y: yPos + colHeight + ylabels.offsetY,
text: label,
textAnchor: this.yaxis.opposite ? 'start' : 'end',
foreColor: ylabels.style.color ? ylabels.style.color : ylabels.style.colors[_i2],
fontSize: ylabels.style.fontSize,
fontFamily: ylabels.style.fontFamily,
cssClass: 'apexcharts-yaxis-label ' + ylabels.style.cssClass
});
elYaxisTexts.add(elLabel);
if (w.config.yaxis[realIndex].labels.rotate !== 0) {
var labelRotatingCenter = graphics.rotateAroundCenter(elLabel.node);
elLabel.node.setAttribute('transform', 'rotate(' + w.config.yaxis[realIndex].labels.rotate + ' ' + labelRotatingCenter.x + ' ' + labelRotatingCenter.y + ')');
}
yPos = yPos + colHeight;
}
}
if (w.config.yaxis[0].title.text !== undefined) {
var elXaxisTitle = graphics.group({
class: 'apexcharts-yaxis-title apexcharts-xaxis-title-inversed',
transform: 'translate(' + translateYAxisX + ', 0)'
});
var elXAxisTitleText = graphics.drawText({
x: 0,
y: w.globals.gridHeight / 2,
text: w.config.yaxis[0].title.text,
textAnchor: 'middle',
foreColor: w.config.yaxis[0].title.style.color,
fontSize: w.config.yaxis[0].title.style.fontSize,
fontFamily: w.config.yaxis[0].title.style.fontFamily,
cssClass: 'apexcharts-yaxis-title-text ' + w.config.yaxis[0].title.style.cssClass
});
elXaxisTitle.add(elXAxisTitleText);
elYaxis.add(elXaxisTitle);
}
if (w.config.xaxis.axisBorder.show) {
var elHorzLine = graphics.drawLine(w.globals.padHorizontal + w.config.xaxis.axisBorder.offsetX, this.offY, this.xaxisBorderWidth, this.offY, this.yaxis.axisBorder.color, 0, this.xaxisBorderHeight);
elYaxis.add(elHorzLine);
this.axesUtils.drawYAxisTicks(0, labels.length, w.config.yaxis[0].axisBorder, w.config.yaxis[0].axisTicks, 0, colHeight, elYaxis);
}
return elYaxis;
}
}, {
key: 'drawXaxisTicks',
value: function drawXaxisTicks(x1, appendToElement) {
var w = this.w;
var x2 = x1;
if (x1 < 0 || x1 > w.globals.gridWidth) return;
var y1 = this.offY + w.config.xaxis.axisTicks.offsetY;
var y2 = y1 + w.config.xaxis.axisTicks.height;
if (w.config.xaxis.axisTicks.show) {
var graphics = new _Graphics2.default(this.ctx);
var line = graphics.drawLine(x1 + w.config.xaxis.axisTicks.offsetX, y1 + w.config.xaxis.offsetY, x2 + w.config.xaxis.axisTicks.offsetX, y2 + w.config.xaxis.offsetY, w.config.xaxis.axisTicks.color);
// we are not returning anything, but appending directly to the element pased in param
appendToElement.add(line);
line.node.classList.add('apexcharts-xaxis-tick');
}
}
}, {
key: 'getXAxisTicksPositions',
value: function getXAxisTicksPositions() {
var w = this.w;
var xAxisTicksPositions = [];
var xCount = this.xaxisLabels.length;
var x1 = w.globals.padHorizontal;
if (w.globals.timelineLabels.length > 0) {
for (var i = 0; i < xCount; i++) {
x1 = this.xaxisLabels[i].position;
xAxisTicksPositions.push(x1);
}
} else {
var xCountForCategoryCharts = xCount;
for (var _i3 = 0; _i3 < xCountForCategoryCharts; _i3++) {
var x1Count = xCountForCategoryCharts;
if (w.globals.isXNumeric && w.config.chart.type !== 'bar') {
x1Count -= 1;
}
x1 = x1 + w.globals.gridWidth / x1Count;
xAxisTicksPositions.push(x1);
}
}
return xAxisTicksPositions;
}
// to rotate x-axis labels or to put ... for longer text in xaxis
}, {
key: 'xAxisLabelCorrections',
value: function xAxisLabelCorrections() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var xAxis = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-texts-g');
var xAxisTexts = w.globals.dom.baseEl.querySelectorAll('.apexcharts-xaxis-texts-g text');
var yAxisTextsInversed = w.globals.dom.baseEl.querySelectorAll('.apexcharts-yaxis-inversed text');
var xAxisTextsInversed = w.globals.dom.baseEl.querySelectorAll('.apexcharts-xaxis-inversed-texts-g text');
if (w.globals.rotateXLabels || w.config.xaxis.labels.rotateAlways) {
for (var xat = 0; xat < xAxisTexts.length; xat++) {
var textRotatingCenter = graphics.rotateAroundCenter(xAxisTexts[xat]);
textRotatingCenter.y = textRotatingCenter.y - 1; // + tickWidth/4;
textRotatingCenter.x = textRotatingCenter.x + 1;
xAxisTexts[xat].setAttribute('transform', 'rotate(' + w.config.xaxis.labels.rotate + ' ' + textRotatingCenter.x + ' ' + textRotatingCenter.y + ')');
xAxisTexts[xat].setAttribute('text-anchor', 'end');
var offsetHeight = 10;
xAxis.setAttribute('transform', 'translate(0, ' + -offsetHeight + ')');
var tSpan = xAxisTexts[xat].childNodes;
if (w.config.xaxis.labels.trim) {
graphics.placeTextWithEllipsis(tSpan[0], tSpan[0].textContent, w.config.xaxis.labels.maxHeight - 40);
}
}
} else {
var width = w.globals.gridWidth / w.globals.labels.length;
for (var _xat = 0; _xat < xAxisTexts.length; _xat++) {
var _tSpan = xAxisTexts[_xat].childNodes;
if (w.config.xaxis.labels.trim && w.config.xaxis.type !== 'datetime') {
graphics.placeTextWithEllipsis(_tSpan[0], _tSpan[0].textContent, width);
}
}
}
if (yAxisTextsInversed.length > 0) {
// truncate rotated y axis in bar chart (x axis)
var firstLabelPosX = yAxisTextsInversed[yAxisTextsInversed.length - 1].getBBox();
var lastLabelPosX = yAxisTextsInversed[0].getBBox();
if (firstLabelPosX.x < -20) {
yAxisTextsInversed[yAxisTextsInversed.length - 1].parentNode.removeChild(yAxisTextsInversed[yAxisTextsInversed.length - 1]);
}
if (lastLabelPosX.x + lastLabelPosX.width > w.globals.gridWidth) {
yAxisTextsInversed[0].parentNode.removeChild(yAxisTextsInversed[0]);
}
// truncate rotated x axis in bar chart (y axis)
for (var _xat2 = 0; _xat2 < xAxisTextsInversed.length; _xat2++) {
graphics.placeTextWithEllipsis(xAxisTextsInversed[_xat2], xAxisTextsInversed[_xat2].textContent, w.config.yaxis[0].labels.maxWidth - parseInt(w.config.yaxis[0].title.style.fontSize) * 2 - 20);
}
}
}
// renderXAxisBands() {
// let w = this.w;
// let plotBand = document.createElementNS(w.globals.SVGNS, 'rect')
// w.globals.dom.elGraphical.add(plotBand)
// }
}]);
return XAxis;
}();
exports.default = XAxis;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _AxesUtils = __webpack_require__(24);
var _AxesUtils2 = _interopRequireDefault(_AxesUtils);
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 YAxis Class for drawing Y-Axis.
*
* @module YAxis
**/
var YAxis = function () {
function YAxis(ctx) {
_classCallCheck(this, YAxis);
this.ctx = ctx;
this.w = ctx.w;
var w = this.w;
this.xaxisFontSize = w.config.xaxis.labels.style.fontSize;
this.axisFontFamily = w.config.xaxis.labels.style.fontFamily;
this.xaxisForeColors = w.config.xaxis.labels.style.colors;
this.xAxisoffX = 0;
if (w.config.xaxis.position === 'bottom') {
this.xAxisoffX = w.globals.gridHeight;
}
this.drawnLabels = [];
this.axesUtils = new _AxesUtils2.default(ctx);
}
_createClass(YAxis, [{
key: 'drawYaxis',
value: function drawYaxis(realIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var yaxisFontSize = w.config.yaxis[realIndex].labels.style.fontSize;
var yaxisFontFamily = w.config.yaxis[realIndex].labels.style.fontFamily;
var elYaxis = graphics.group({
class: 'apexcharts-yaxis',
rel: realIndex,
transform: 'translate(' + w.globals.translateYAxisX[realIndex] + ', 0)'
});
if (!w.config.yaxis[realIndex].show) {
return elYaxis;
}
var elYaxisTexts = graphics.group({
class: 'apexcharts-yaxis-texts-g'
});
elYaxis.add(elYaxisTexts);
var tickAmount = w.globals.yAxisScale[realIndex].result.length - 1;
// labelsDivider is simply svg height/number of ticks
var labelsDivider = w.globals.gridHeight / tickAmount + 0.1;
// initial label position = 0;
var l = w.globals.translateY;
var lbFormatter = w.globals.yLabelFormatters[realIndex];
var labels = w.globals.yAxisScale[realIndex].result.slice();
if (w.config.yaxis[realIndex] && w.config.yaxis[realIndex].reversed) {
labels.reverse();
}
if (w.config.yaxis[realIndex].labels.show) {
for (var i = tickAmount; i >= 0; i--) {
var val = labels[i];
val = lbFormatter(val, i);
var xPad = w.config.yaxis[realIndex].labels.padding;
if (w.config.yaxis[realIndex].opposite && w.config.yaxis.length !== 0) {
xPad = xPad * -1;
}
var label = graphics.drawText({
x: xPad,
y: l + tickAmount / 10 + w.config.yaxis[realIndex].labels.offsetY + 1,
text: val,
textAnchor: w.config.yaxis[realIndex].opposite ? 'start' : 'end',
fontSize: yaxisFontSize,
fontFamily: yaxisFontFamily,
foreColor: w.config.yaxis[realIndex].labels.style.color,
cssClass: 'apexcharts-yaxis-label ' + w.config.yaxis[realIndex].labels.style.cssClass
});
elYaxisTexts.add(label);
var labelRotatingCenter = graphics.rotateAroundCenter(label.node);
if (w.config.yaxis[realIndex].labels.rotate !== 0) {
label.node.setAttribute('transform', 'rotate(' + w.config.yaxis[realIndex].labels.rotate + ' ' + labelRotatingCenter.x + ' ' + labelRotatingCenter.y + ')');
}
l = l + labelsDivider;
}
}
if (w.config.yaxis[realIndex].title.text !== undefined) {
var elYaxisTitle = graphics.group({
class: 'apexcharts-yaxis-title'
});
var x = 0;
if (w.config.yaxis[realIndex].opposite) {
x = w.globals.translateYAxisX[realIndex];
}
var elYAxisTitleText = graphics.drawText({
x: x,
y: w.globals.gridHeight / 2 + w.globals.translateY,
text: w.config.yaxis[realIndex].title.text,
textAnchor: 'end',
foreColor: w.config.yaxis[realIndex].title.style.color,
fontSize: w.config.yaxis[realIndex].title.style.fontSize,
fontFamily: w.config.yaxis[realIndex].title.style.fontFamily,
cssClass: 'apexcharts-yaxis-title-text ' + w.config.yaxis[realIndex].title.style.cssClass
});
elYaxisTitle.add(elYAxisTitleText);
elYaxis.add(elYaxisTitle);
}
var axisBorder = w.config.yaxis[realIndex].axisBorder;
if (axisBorder.show) {
var _x = 31 + axisBorder.offsetX;
if (w.config.yaxis[realIndex].opposite) {
_x = -31 - axisBorder.offsetX;
}
var elVerticalLine = graphics.drawLine(_x, w.globals.translateY + axisBorder.offsetY - 2, _x, w.globals.gridHeight + w.globals.translateY + axisBorder.offsetY + 2, axisBorder.color);
elYaxis.add(elVerticalLine);
this.axesUtils.drawYAxisTicks(_x, tickAmount, axisBorder, w.config.yaxis[realIndex].axisTicks, realIndex, labelsDivider, elYaxis);
}
return elYaxis;
}
// This actually becomes horizonal axis (for bar charts)
}, {
key: 'drawYaxisInversed',
value: function drawYaxisInversed(realIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var elXaxis = graphics.group({
class: 'apexcharts-xaxis apexcharts-yaxis-inversed'
});
var elXaxisTexts = graphics.group({
class: 'apexcharts-xaxis-texts-g',
transform: 'translate(' + w.globals.translateXAxisX + ', ' + w.globals.translateXAxisY + ')'
});
elXaxis.add(elXaxisTexts);
var tickAmount = w.globals.yAxisScale[realIndex].result.length - 1;
// labelsDivider is simply svg width/number of ticks
var labelsDivider = w.globals.gridWidth / tickAmount + 0.1;
// initial label position;
var l = labelsDivider + w.config.xaxis.labels.offsetX;
var lbFormatter = w.globals.xLabelFormatter;
var labels = w.globals.yAxisScale[realIndex].result.slice();
var timelineLabels = w.globals.invertedTimelineLabels;
if (timelineLabels.length > 0) {
this.xaxisLabels = timelineLabels.slice();
labels = timelineLabels.slice();
tickAmount = labels.length;
}
if (w.config.yaxis[realIndex] && w.config.yaxis[realIndex].reversed) {
labels.reverse();
}
var tl = timelineLabels.length;
if (w.config.xaxis.labels.show) {
for (var i = tl ? 0 : tickAmount; tl ? i < tl - 1 : i >= 0; tl ? i++ : i--) {
var val = labels[i];
val = lbFormatter(val, i);
var x = w.globals.gridWidth + w.globals.padHorizontal - (l - labelsDivider + w.config.xaxis.labels.offsetX);
if (timelineLabels.length) {
var label = this.axesUtils.getLabel(labels, timelineLabels, x, i, this.drawnLabels);
x = label.x;
val = label.text;
this.drawnLabels.push(label.text);
}
var elTick = graphics.drawText({
x: x,
y: this.xAxisoffX + w.config.xaxis.labels.offsetY + 30,
text: '',
textAnchor: 'middle',
foreColor: Array.isArray(this.xaxisForeColors) ? this.xaxisForeColors[realIndex] : this.xaxisForeColors,
fontSize: this.xaxisFontSize,
fontFamily: this.xaxisFontFamily,
cssClass: 'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass
});
elXaxisTexts.add(elTick);
elTick.tspan(val);
var elTooltipTitle = document.createElementNS(w.globals.SVGNS, 'title');
elTooltipTitle.textContent = val;
elTick.node.appendChild(elTooltipTitle);
l = l + labelsDivider;
}
}
if (w.config.xaxis.title.text !== undefined) {
var elYaxisTitle = graphics.group({
class: 'apexcharts-xaxis-title apexcharts-yaxis-title-inversed'
});
var elYAxisTitleText = graphics.drawText({
x: w.globals.gridWidth / 2,
y: this.xAxisoffX + parseInt(this.xaxisFontSize) + parseInt(w.config.xaxis.title.style.fontSize) + 20,
text: w.config.xaxis.title.text,
textAnchor: 'middle',
fontSize: w.config.xaxis.title.style.fontSize,
fontFamily: w.config.xaxis.title.style.fontFamily,
cssClass: 'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass
});
elYaxisTitle.add(elYAxisTitleText);
elXaxis.add(elYaxisTitle);
}
var axisBorder = w.config.yaxis[realIndex].axisBorder;
if (axisBorder.show) {
var elVerticalLine = graphics.drawLine(w.globals.padHorizontal + axisBorder.offsetX, 1 + axisBorder.offsetY, w.globals.padHorizontal + axisBorder.offsetX, w.globals.gridHeight + axisBorder.offsetY, axisBorder.color);
elXaxis.add(elVerticalLine);
}
return elXaxis;
}
}, {
key: 'yAxisTitleRotate',
value: function yAxisTitleRotate(realIndex, yAxisOpposite) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var yAxisLabelsCoord = {
width: 0,
height: 0
};
var yAxisTitleCoord = {
width: 0,
height: 0
};
var elYAxisLabelsWrap = w.globals.dom.baseEl.querySelector(' .apexcharts-yaxis[rel=\'' + realIndex + '\'] .apexcharts-yaxis-texts-g');
if (elYAxisLabelsWrap !== null) {
yAxisLabelsCoord = elYAxisLabelsWrap.getBoundingClientRect();
}
var yAxisTitle = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis[rel=\'' + realIndex + '\'] .apexcharts-yaxis-title text');
if (yAxisTitle !== null) {
yAxisTitleCoord = yAxisTitle.getBoundingClientRect();
}
if (yAxisTitle !== null) {
var x = this.xPaddingForYAxisTitle(realIndex, yAxisLabelsCoord, yAxisTitleCoord, yAxisOpposite);
yAxisTitle.setAttribute('x', x.xPos - (yAxisOpposite ? 10 : 0));
}
if (yAxisTitle !== null) {
var titleRotatingCenter = graphics.rotateAroundCenter(yAxisTitle);
if (!yAxisOpposite) {
yAxisTitle.setAttribute('transform', 'rotate(-' + w.config.yaxis[realIndex].title.rotate + ' ' + titleRotatingCenter.x + ' ' + titleRotatingCenter.y + ')');
} else {
yAxisTitle.setAttribute('transform', 'rotate(' + w.config.yaxis[realIndex].title.rotate + ' ' + titleRotatingCenter.x + ' ' + titleRotatingCenter.y + ')');
}
}
}
}, {
key: 'xPaddingForYAxisTitle',
value: function xPaddingForYAxisTitle(realIndex, yAxisLabelsCoord, yAxisTitleCoord, yAxisOpposite) {
var w = this.w;
var oppositeAxisCount = 0;
var x = 0;
var padd = 10;
if (w.config.yaxis[realIndex].title.text === undefined || realIndex < 0) {
return {
xPos: x,
padd: 0
};
}
if (yAxisOpposite) {
x = yAxisLabelsCoord.width + w.config.yaxis[realIndex].title.offsetX + yAxisTitleCoord.width / 2 + padd / 2;
oppositeAxisCount += 1;
if (oppositeAxisCount === 0) {
x = x - padd / 2;
}
} else {
x = yAxisLabelsCoord.width * -1 + w.config.yaxis[realIndex].title.offsetX + padd / 2 + yAxisTitleCoord.width / 2;
if (w.globals.isBarHorizontal) {
padd = 25;
x = yAxisLabelsCoord.width * -1 - w.config.yaxis[realIndex].title.offsetX - padd;
}
}
return { xPos: x, padd: padd };
}
// sets the x position of the y-axis by counting the labels width, title width and any offset
}, {
key: 'setYAxisXPosition',
value: function setYAxisXPosition(yaxisLabelCoords, yTitleCoords) {
var w = this.w;
var xLeft = 0;
var xRight = 0;
var leftOffsetX = 21;
var rightOffsetX = 1;
if (w.config.yaxis.length > 1) {
this.multipleYs = true;
}
w.config.yaxis.map(function (yaxe, index) {
var shouldNotDrawAxis = w.globals.ignoreYAxisIndexes.indexOf(index) > -1 || !yaxe.show || yaxe.floating || yaxisLabelCoords[index].width === 0;
var axisWidth = yaxisLabelCoords[index].width + yTitleCoords[index].width;
if (!yaxe.opposite) {
xLeft = w.globals.translateX - leftOffsetX;
if (!shouldNotDrawAxis) {
leftOffsetX = leftOffsetX + axisWidth + 20;
}
w.globals.translateYAxisX[index] = xLeft + yaxe.labels.offsetX;
} else {
if (w.globals.isBarHorizontal) {
xRight = w.globals.gridWidth + w.globals.translateX - 1;
w.globals.translateYAxisX[index] = xRight - yaxe.labels.offsetX;
} else {
xRight = w.globals.gridWidth + w.globals.translateX + rightOffsetX;
if (!shouldNotDrawAxis) {
rightOffsetX = rightOffsetX + axisWidth + 20;
}
w.globals.translateYAxisX[index] = xRight - yaxe.labels.offsetX + 20;
}
}
});
}
}, {
key: 'setYAxisTextAlignments',
value: function setYAxisTextAlignments() {
var w = this.w;
var yaxis = w.globals.dom.baseEl.querySelectorAll('.apexcharts-yaxis');
yaxis = _Utils2.default.listToArray(yaxis);
yaxis.forEach(function (y, index) {
var yaxe = w.config.yaxis[index];
// proceed only if user has specified alignment
if (yaxe.labels.align !== undefined) {
var yAxisInner = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis[rel=\'' + index + '\'] .apexcharts-yaxis-texts-g');
var yAxisTexts = w.globals.dom.baseEl.querySelectorAll('.apexcharts-yaxis[rel=\'' + index + '\'] .apexcharts-yaxis-label');
yAxisTexts = _Utils2.default.listToArray(yAxisTexts);
var rect = yAxisInner.getBoundingClientRect();
if (yaxe.labels.align === 'left') {
yAxisTexts.forEach(function (label, lI) {
label.setAttribute('text-anchor', 'start');
});
if (!yaxe.opposite) {
yAxisInner.setAttribute('transform', 'translate(-' + rect.width + ', 0)');
}
} else if (yaxe.labels.align === 'center') {
yAxisTexts.forEach(function (label, lI) {
label.setAttribute('text-anchor', 'middle');
});
yAxisInner.setAttribute('transform', 'translate(' + rect.width / 2 * (!yaxe.opposite ? -1 : 1) + ', 0)');
} else if (yaxe.labels.align === 'right') {
yAxisTexts.forEach(function (label, lI) {
label.setAttribute('text-anchor', 'end');
});
if (yaxe.opposite) {
yAxisInner.setAttribute('transform', 'translate(' + rect.width + ', 0)');
}
}
}
});
}
}]);
return YAxis;
}();
exports.default = YAxis;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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; }; }();
var _Defaults = __webpack_require__(25);
var _Defaults2 = _interopRequireDefault(_Defaults);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Options = __webpack_require__(18);
var _Options2 = _interopRequireDefault(_Options);
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 Config Class for extending user options with pre-defined ApexCharts config.
*
* @module Config
**/
var Config = function () {
function Config(opts) {
_classCallCheck(this, Config);
this.opts = opts;
}
_createClass(Config, [{
key: 'init',
value: function init() {
var opts = this.opts;
var options = new _Options2.default();
var defaults = new _Defaults2.default(opts);
this.chartType = opts.chart.type;
if (this.chartType === 'histogram') {
// technically, a histogram can be drawn by a column chart with no spaces in between
opts.chart.type = 'bar';
opts = _Utils2.default.extend({
plotOptions: {
bar: {
columnWidth: '99.99%'
}
}
}, opts);
}
opts.series = this.checkEmptySeries(opts.series);
opts = this.extendYAxis(opts);
opts = this.extendAnnotations(opts);
var config = options.init();
var newDefaults = {};
if (opts && (typeof opts === 'undefined' ? 'undefined' : _typeof(opts)) === 'object') {
var chartDefaults = {};
switch (this.chartType) {
case 'line':
chartDefaults = defaults.line();
break;
case 'area':
chartDefaults = defaults.area();
break;
case 'bar':
chartDefaults = defaults.bar();
break;
case 'candlestick':
chartDefaults = defaults.candlestick();
break;
case 'rangeBar':
chartDefaults = defaults.rangeBar();
break;
case 'histogram':
chartDefaults = defaults.bar();
break;
case 'bubble':
chartDefaults = defaults.bubble();
break;
case 'scatter':
chartDefaults = defaults.scatter();
break;
case 'heatmap':
chartDefaults = defaults.heatmap();
break;
case 'pie':
chartDefaults = defaults.pie();
break;
case 'donut':
chartDefaults = defaults.donut();
break;
case 'radar':
chartDefaults = defaults.radar();
break;
case 'radialBar':
chartDefaults = defaults.radialBar();
break;
default:
chartDefaults = defaults.line();
}
if (opts.chart.brush && opts.chart.brush.enabled) {
chartDefaults = defaults.brush(chartDefaults);
}
if (opts.chart.stacked && opts.chart.stackType === '100%') {
defaults.stacked100();
}
// If user has specified a dark theme, make the tooltip dark too
this.checkForDarkTheme(window.Apex); // check global window Apex options
this.checkForDarkTheme(opts); // check locally passed options
opts.xaxis = opts.xaxis || window.Apex.xaxis || {};
var combo = _CoreUtils2.default.checkComboSeries(opts.series);
if ((opts.chart.type === 'line' || opts.chart.type === 'area' || opts.chart.type === 'scatter') && !combo.comboChartsHasBars && opts.xaxis.type !== 'datetime' && opts.xaxis.type !== 'numeric' && opts.xaxis.tickPlacement !== 'between') {
opts = _Defaults2.default.convertCatToNumeric(opts);
}
if (opts.chart.sparkline && opts.chart.sparkline.enabled || window.Apex.chart && window.Apex.chart.sparkline && window.Apex.chart.sparkline.enabled) {
chartDefaults = defaults.sparkline(chartDefaults);
}
newDefaults = _Utils2.default.extend(config, chartDefaults);
}
// config should cascade in this fashion
// default-config < global-apex-variable-config < user-defined-config
// get GLOBALLY defined options and merge with the default config
var mergedWithDefaultConfig = _Utils2.default.extend(newDefaults, window.Apex);
// get the merged config and extend with user defined config
config = _Utils2.default.extend(mergedWithDefaultConfig, opts);
// some features are not supported. those mismatches should be handled
config = this.handleUserInputErrors(config);
return config;
}
}, {
key: 'extendYAxis',
value: function extendYAxis(opts) {
var options = new _Options2.default();
if (typeof opts.yaxis === 'undefined') {
opts.yaxis = {};
}
// extend global yaxis config (only if object is provided / not an array)
if (opts.yaxis.constructor !== Array && window.Apex.yaxis && window.Apex.yaxis.constructor !== Array) {
opts.yaxis = _Utils2.default.extend(opts.yaxis, window.Apex.yaxis);
}
// as we can't extend nested object's array with extend, we need to do it first
// user can provide either an array or object in yaxis config
if (opts.yaxis.constructor !== Array) {
// convert the yaxis to array if user supplied object
opts.yaxis = [_Utils2.default.extend(options.yAxis, opts.yaxis)];
} else {
opts.yaxis = _Utils2.default.extendArray(opts.yaxis, options.yAxis);
}
return opts;
}
// annotations also accepts array, so we need to extend them manually
}, {
key: 'extendAnnotations',
value: function extendAnnotations(opts) {
if (typeof opts.annotations === 'undefined') {
opts.annotations = {};
opts.annotations.yaxis = [];
opts.annotations.xaxis = [];
opts.annotations.points = [];
}
opts = this.extendYAxisAnnotations(opts);
opts = this.extendXAxisAnnotations(opts);
opts = this.extendPointAnnotations(opts);
return opts;
}
}, {
key: 'extendYAxisAnnotations',
value: function extendYAxisAnnotations(opts) {
var options = new _Options2.default();
opts.annotations.yaxis = _Utils2.default.extendArray(typeof opts.annotations.yaxis !== 'undefined' ? opts.annotations.yaxis : [], options.yAxisAnnotation);
return opts;
}
}, {
key: 'extendXAxisAnnotations',
value: function extendXAxisAnnotations(opts) {
var options = new _Options2.default();
opts.annotations.xaxis = _Utils2.default.extendArray(typeof opts.annotations.xaxis !== 'undefined' ? opts.annotations.xaxis : [], options.xAxisAnnotation);
return opts;
}
}, {
key: 'extendPointAnnotations',
value: function extendPointAnnotations(opts) {
var options = new _Options2.default();
opts.annotations.points = _Utils2.default.extendArray(typeof opts.annotations.points !== 'undefined' ? opts.annotations.points : [], options.pointAnnotation);
return opts;
}
}, {
key: 'checkForDarkTheme',
value: function checkForDarkTheme(opts) {
if (opts.theme && opts.theme.mode === 'dark') {
if (!opts.tooltip) {
opts.tooltip = {};
}
if (opts.tooltip.theme !== 'light') {
opts.tooltip.theme = 'dark';
}
if (!opts.chart.foreColor) {
opts.chart.foreColor = '#f6f7f8';
}
if (!opts.theme.palette) {
opts.theme.palette = 'palette4';
}
}
}
}, {
key: 'checkEmptySeries',
value: function checkEmptySeries(ser) {
if (ser.length === 0) {
return [{
data: []
}];
}
return ser;
}
}, {
key: 'handleUserInputErrors',
value: function handleUserInputErrors(opts) {
var config = opts;
// conflicting tooltip option. intersect makes sure to focus on 1 point at a time. Shared cannot be used along with it
if (config.tooltip.shared && config.tooltip.intersect) {
throw new Error('tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.');
}
if (config.chart.scroller) {
console.warn('Scroller has been deprecated since v2.0.0. Please remove the configuration for chart.scroller');
}
if ((config.chart.type === 'bar' || config.chart.type === 'rangeBar') && config.plotOptions.bar.horizontal) {
// No multiple yaxis for bars
if (config.yaxis.length > 1) {
throw new Error('Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false');
}
// if yaxis is reversed in horizontal bar chart, you should draw the y-axis on right side
if (config.yaxis[0].reversed) {
config.yaxis[0].opposite = true;
}
config.xaxis.tooltip.enabled = false; // no xaxis tooltip for horizontal bar
config.yaxis[0].tooltip.enabled = false; // no xaxis tooltip for horizontal bar
config.chart.zoom.enabled = false; // no zooming for horz bars
}
if (config.chart.type === 'bar' || config.chart.type === 'rangeBar') {
if (config.tooltip.shared) {
if (config.xaxis.crosshairs.width === 'barWidth' && config.series.length > 1) {
console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.');
config.xaxis.crosshairs.width = 'tickWidth';
}
if (config.plotOptions.bar.horizontal) {
config.states.hover.type = 'none';
config.tooltip.shared = false;
}
if (!config.tooltip.followCursor) {
console.warn('followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true', 'color: blue;');
config.tooltip.followCursor = true;
}
}
}
if (config.chart.type === 'candlestick') {
if (config.yaxis[0].reversed) {
console.warn('Reversed y-axis in candlestick chart is not supported.');
config.yaxis[0].reversed = false;
}
}
if (config.chart.group && config.yaxis[0].labels.minWidth === 0) {
console.warn('It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour.');
}
// if user supplied array for stroke width, it will only be applicable to line/area charts, for any other charts, revert back to Number
if (Array.isArray(config.stroke.width)) {
if (config.chart.type !== 'line' && config.chart.type !== 'area') {
console.warn('stroke.width option accepts array only for line and area charts. Reverted back to Number');
config.stroke.width = config.stroke.width[0];
}
}
return config;
}
}]);
return Config;
}();
exports.default = Config;
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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; }; }(); /**
* ApexCharts Options for setting the initial configuration of ApexCharts
**/
var _en = __webpack_require__(30);
var _en2 = _interopRequireDefault(_en);
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"); } }
var Options = function () {
function Options() {
_classCallCheck(this, Options);
this.yAxis = {
show: true,
showAlways: false,
seriesName: undefined,
opposite: false,
reversed: false,
logarithmic: false,
tickAmount: undefined,
forceNiceScale: false,
max: undefined,
min: undefined,
floating: false,
decimalsInFloat: undefined,
labels: {
show: true,
minWidth: 0,
maxWidth: 160,
offsetX: 0,
offsetY: 0,
align: undefined,
rotate: 0,
padding: 20,
style: {
colors: [],
fontSize: '11px',
fontFamily: undefined,
cssClass: ''
},
formatter: undefined
},
axisBorder: {
show: false,
color: '#78909C',
offsetX: 0,
offsetY: 0
},
axisTicks: {
show: false,
color: '#78909C',
width: 6,
offsetX: 0,
offsetY: 0
},
title: {
text: undefined,
rotate: 90,
offsetY: 0,
offsetX: 0,
style: {
color: undefined,
fontSize: '11px',
fontFamily: undefined,
cssClass: ''
}
},
tooltip: {
enabled: false,
offsetX: 0
},
crosshairs: {
show: true,
position: 'front',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0
}
}
};
this.xAxisAnnotation = {
x: 0,
x2: null,
strokeDashArray: 1,
fillColor: '#c2c2c2',
borderColor: '#c2c2c2',
opacity: 0.3,
offsetX: 0,
offsetY: 0,
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
text: undefined,
textAnchor: 'middle',
orientation: 'vertical',
position: 'top',
offsetX: 0,
offsetY: 0,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 2,
bottom: 2
}
}
}
};
this.yAxisAnnotation = {
y: 0,
y2: null,
strokeDashArray: 1,
fillColor: '#c2c2c2',
borderColor: '#c2c2c2',
opacity: 0.3,
offsetX: 0,
offsetY: 0,
yAxisIndex: 0,
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
text: undefined,
textAnchor: 'end',
position: 'right',
offsetX: 0,
offsetY: -3,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 0,
bottom: 2
}
}
}
};
this.pointAnnotation = {
x: 0,
y: null,
yAxisIndex: 0,
seriesIndex: 0,
marker: {
size: 0,
fillColor: '#fff',
strokeWidth: 2,
strokeColor: '#333',
shape: 'circle',
offsetX: 0,
offsetY: 0,
radius: 2,
cssClass: ''
},
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
text: undefined,
textAnchor: 'middle',
offsetX: 0,
offsetY: -15,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 0,
bottom: 2
}
}
},
customSVG: {
SVG: undefined,
cssClass: undefined,
offsetX: 0,
offsetY: 0
}
};
}
_createClass(Options, [{
key: 'init',
value: function init() {
return {
annotations: {
position: 'front',
yaxis: [this.yAxisAnnotation],
xaxis: [this.xAxisAnnotation],
points: [this.pointAnnotation]
},
chart: {
animations: {
enabled: true,
easing: 'easeinout', // linear, easeout, easein, easeinout, swing, bounce, elastic
speed: 800,
animateGradually: {
delay: 150,
enabled: true
},
dynamicAnimation: {
enabled: true,
speed: 350
}
},
background: 'transparent',
locales: [_en2.default],
defaultLocale: 'en',
dropShadow: {
enabled: false,
enabledSeries: undefined,
top: 2,
left: 2,
blur: 4,
color: '#000',
opacity: 0.35
},
events: {
animationEnd: undefined,
beforeMount: undefined,
mounted: undefined,
updated: undefined,
click: undefined,
legendClick: undefined,
markerClick: undefined,
selection: undefined,
dataPointSelection: undefined,
dataPointMouseEnter: undefined,
dataPointMouseLeave: undefined,
beforeZoom: undefined,
zoomed: undefined,
scrolled: undefined
},
foreColor: '#373d3f',
fontFamily: 'Helvetica, Arial, sans-serif',
height: 'auto',
parentHeightOffset: 15,
id: undefined,
group: undefined,
offsetX: 0,
offsetY: 0,
selection: {
enabled: false,
type: 'x',
// selectedPoints: undefined, // default datapoints that should be selected automatically
fill: {
color: '#24292e',
opacity: 0.1
},
stroke: {
width: 1,
color: '#24292e',
opacity: 0.4,
dashArray: 3
},
xaxis: {
min: undefined,
max: undefined
},
yaxis: {
min: undefined,
max: undefined
}
},
sparkline: {
enabled: false
},
brush: {
enabled: false,
autoScaleYaxis: false,
target: undefined
},
stacked: false,
stackType: 'normal',
toolbar: {
show: true,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true,
customIcons: []
},
autoSelected: 'zoom' // accepts -> zoom, pan, selection
},
type: 'line',
width: '100%',
zoom: {
enabled: true,
type: 'x',
// autoScaleYaxis: false, // TODO: rewrite the autoScaleY function
zoomedArea: {
fill: {
color: '#90CAF9',
opacity: 0.4
},
stroke: {
color: '#0D47A1',
opacity: 0.4,
width: 1
}
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '70%', // should be in percent 0 - 100
barHeight: '70%', // should be in percent 0 - 100
distributed: false,
endingShape: 'flat',
colors: {
ranges: [],
backgroundBarColors: [],
backgroundBarOpacity: 1
},
dataLabels: {
maxItems: 100,
hideOverflowingLabels: true,
position: 'top' // top, center, bottom
// TODO: provide stackedLabels for stacked charts which gives additions of values
}
},
candlestick: {
colors: {
upward: '#00B746',
downward: '#EF403C'
},
wick: {
useFillColor: true
}
},
heatmap: {
radius: 2,
enableShades: true,
shadeIntensity: 0.5,
reverseNegativeShade: true,
distributed: false,
colorScale: {
inverse: false,
ranges: [],
min: undefined,
max: undefined
}
},
radialBar: {
size: undefined,
inverseOrder: false,
startAngle: 0,
endAngle: 360,
offsetX: 0,
offsetY: 0,
hollow: {
margin: 5,
size: '50%',
background: 'transparent',
image: undefined,
imageWidth: 150,
imageHeight: 150,
imageOffsetX: 0,
imageOffsetY: 0,
imageClipped: true,
position: 'front',
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.5
}
},
track: {
show: true,
startAngle: undefined,
endAngle: undefined,
background: '#f2f2f2',
strokeWidth: '97%',
opacity: 1,
margin: 5, // margin is in pixels
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.5
}
},
dataLabels: {
show: true,
name: {
show: true,
fontSize: '16px',
fontFamily: undefined,
color: undefined,
offsetY: 0
},
value: {
show: true,
fontSize: '14px',
fontFamily: undefined,
color: undefined,
offsetY: 16,
formatter: function formatter(val) {
return val + '%';
}
},
total: {
show: false,
label: 'Total',
color: undefined,
formatter: function formatter(w) {
return w.globals.seriesTotals.reduce(function (a, b) {
return a + b;
}, 0) / w.globals.series.length + '%';
}
}
}
},
rangeBar: {},
pie: {
size: undefined,
customScale: 1,
offsetX: 0,
offsetY: 0,
expandOnClick: true,
dataLabels: {
// These are the percentage values which are displayed on slice
offset: 0, // offset by which labels will move outside
minAngleToShowLabel: 10
},
donut: {
size: '65%',
background: 'transparent',
labels: {
// These are the inner labels appearing inside donut
show: false,
name: {
show: true,
fontSize: '16px',
fontFamily: undefined,
color: undefined,
offsetY: -10
},
value: {
show: true,
fontSize: '20px',
fontFamily: undefined,
color: undefined,
offsetY: 10,
formatter: function formatter(val) {
return val;
}
},
total: {
show: false,
label: 'Total',
color: undefined,
formatter: function formatter(w) {
return w.globals.seriesTotals.reduce(function (a, b) {
return a + b;
}, 0);
}
}
}
}
},
radar: {
size: undefined,
offsetX: 0,
offsetY: 0,
polygons: {
// strokeColor: '#e8e8e8', // should be deprecated in the minor version i.e 3.2
strokeColors: '#e8e8e8',
connectorColors: '#e8e8e8',
fill: {
colors: undefined
}
}
}
},
colors: undefined,
dataLabels: {
enabled: true,
enabledOnSeries: undefined,
formatter: function formatter(val) {
return val;
},
textAnchor: 'middle',
offsetX: 0,
offsetY: 0,
style: {
fontSize: '12px',
fontFamily: undefined,
colors: undefined
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
},
fill: {
type: 'solid',
colors: undefined, // array of colors
opacity: 0.85,
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 100],
colorStops: []
},
image: {
src: [],
width: undefined, // optional
height: undefined // optional
},
pattern: {
style: 'sqaures', // String | Array of Strings
width: 6,
height: 6,
strokeWidth: 2
}
},
grid: {
show: true,
borderColor: '#e0e0e0',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false,
animate: false
}
},
yaxis: {
lines: {
show: true,
animate: false
}
},
row: {
colors: undefined, // takes as array which will be repeated on rows
opacity: 0.5
},
column: {
colors: undefined, // takes an array which will be repeated on columns
opacity: 0.5
},
padding: {
top: 0,
right: 10,
bottom: 0,
left: 12
}
},
labels: [],
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
floating: false,
position: 'bottom', // whether to position legends in 1 of 4
// direction - top, bottom, left, right
horizontalAlign: 'center', // when position top/bottom, you can specify whether to align legends left, right or center
fontSize: '12px',
fontFamily: undefined,
width: undefined,
height: undefined,
formatter: undefined,
offsetX: -20,
offsetY: 0,
labels: {
colors: undefined,
useSeriesColors: false
},
markers: {
width: 12,
height: 12,
strokeWidth: 0,
strokeColor: '#fff',
radius: 12,
customHTML: undefined,
offsetX: 0,
offsetY: 0,
onClick: undefined
},
itemMargin: {
horizontal: 0,
vertical: 5
},
onItemClick: {
toggleDataSeries: true
},
onItemHover: {
highlightDataSeries: true
}
},
markers: {
discrete: [],
size: 0,
colors: undefined,
//strokeColor: '#fff', // TODO: deprecate in major version 4.0
strokeColors: '#fff',
strokeWidth: 2,
strokeOpacity: 0.9,
fillOpacity: 1,
shape: 'circle',
radius: 2,
offsetX: 0,
offsetY: 0,
hover: {
size: undefined,
sizeOffset: 3
}
},
noData: {
text: undefined,
align: 'center',
verticalAlign: 'middle',
offsetX: 0,
offsetY: 0,
style: {
color: undefined,
fontSize: '14px',
fontFamily: undefined
}
},
responsive: [], // breakpoints should follow ascending order 400, then 700, then 1000
series: undefined,
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'lighten',
value: 0.15
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'darken',
value: 0.65
}
}
},
title: {
text: undefined,
align: 'left',
margin: 10,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: '14px',
fontFamily: undefined,
color: undefined
}
},
subtitle: {
text: undefined,
align: 'left',
margin: 10,
offsetX: 0,
offsetY: 30,
floating: false,
style: {
fontSize: '12px',
fontFamily: undefined,
color: undefined
}
},
stroke: {
show: true,
curve: 'smooth', // "smooth" / "straight" / "stepline"
lineCap: 'butt', // round, butt , square
width: 2,
colors: undefined, // array of colors
dashArray: 0 // single value or array of values
},
tooltip: {
enabled: true,
enabledOnSeries: undefined,
shared: true,
followCursor: false, // when disabled, the tooltip will show on top of the series instead of mouse position
intersect: false, // when enabled, tooltip will only show when user directly hovers over point
inverseOrder: false,
custom: undefined,
fillSeriesColor: false,
theme: 'light',
style: {
fontSize: '12px',
fontFamily: undefined
},
onDatasetHover: {
highlightDataSeries: false
},
x: {
// x value
show: true,
format: 'dd MMM', // dd/MM, dd MMM yy, dd MMM yyyy
formatter: undefined // a custom user supplied formatter function
},
y: {
formatter: undefined,
title: {
formatter: function formatter(seriesName) {
return seriesName;
}
}
},
z: {
formatter: undefined,
title: 'Size: '
},
marker: {
show: true
},
items: {
display: 'flex'
},
fixed: {
enabled: false,
position: 'topRight', // topRight, topLeft, bottomRight, bottomLeft
offsetX: 0,
offsetY: 0
}
},
xaxis: {
type: 'category',
categories: [],
offsetX: 0,
offsetY: 0,
labels: {
show: true,
rotate: -45,
rotateAlways: false,
hideOverlappingLabels: true,
trim: true,
minHeight: undefined,
maxHeight: 120,
showDuplicates: true,
style: {
colors: [],
fontSize: '12px',
fontFamily: undefined,
cssClass: ''
},
offsetX: 0,
offsetY: 0,
format: undefined,
formatter: undefined, // custom formatter function which will override format
datetimeFormatter: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
minute: 'HH:mm:ss'
}
},
axisBorder: {
show: true,
color: '#78909C',
width: '100%',
height: 1,
offsetX: 0,
offsetY: 0
},
axisTicks: {
show: true,
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0
},
tickAmount: undefined,
tickPlacement: 'on',
min: undefined,
max: undefined,
range: undefined,
floating: false,
position: 'bottom',
title: {
text: undefined,
offsetX: 0,
offsetY: 0,
style: {
color: undefined,
fontSize: '12px',
fontFamily: undefined,
cssClass: ''
}
},
crosshairs: {
show: true,
width: 1, // tickWidth/barWidth or an integer
position: 'back',
opacity: 0.9,
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 3
},
fill: {
type: 'solid', // solid, gradient
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5
}
},
dropShadow: {
enabled: false,
left: 0,
top: 0,
blur: 1,
opacity: 0.4
}
},
tooltip: {
enabled: true,
offsetY: 0,
formatter: undefined,
style: {
fontSize: '12px',
fontFamily: undefined
}
}
},
yaxis: this.yAxis,
theme: {
mode: 'light',
palette: 'palette1', // If defined, it will overwrite globals.colors variable
monochrome: {
// monochrome allows you to select just 1 color and fill out the rest with light/dark shade (intensity can be selected)
enabled: false,
color: '#008FFB',
shadeTo: 'light',
shadeIntensity: 0.65
}
}
};
}
}]);
return Options;
}();
exports.default = Options;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Animations = __webpack_require__(5);
var _Animations2 = _interopRequireDefault(_Animations);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Markers = __webpack_require__(6);
var _Markers2 = _interopRequireDefault(_Markers);
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 Scatter Class.
* This Class also handles bubbles chart as currently there is no major difference in drawing them,
* @module Scatter
**/
var Scatter = function () {
function Scatter(ctx) {
_classCallCheck(this, Scatter);
this.ctx = ctx;
this.w = ctx.w;
this.initialAnim = this.w.config.chart.animations.enabled;
this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled;
// this array will help in centering the label in bubbles
this.radiusSizes = [];
}
_createClass(Scatter, [{
key: 'draw',
value: function draw(elSeries, j, opts) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var realIndex = opts.realIndex;
var pointsPos = opts.pointsPos;
var zRatio = opts.zRatio;
var elPointsMain = opts.elParent;
var elPointsWrap = graphics.group({
class: 'apexcharts-series-markers apexcharts-series-' + w.config.chart.type
});
elPointsWrap.attr('clip-path', 'url(#gridRectMarkerMask' + w.globals.cuid + ')');
if (pointsPos.x instanceof Array) {
for (var q = 0; q < pointsPos.x.length; q++) {
var dataPointIndex = j + 1;
var shouldDraw = true;
// a small hack as we have 2 points for the first val to connect it
if (j === 0 && q === 0) dataPointIndex = 0;
if (j === 0 && q === 1) dataPointIndex = 1;
var radius = 0;
var finishRadius = w.globals.markers.size[realIndex];
if (zRatio !== Infinity) {
// means we have a bubble
finishRadius = w.globals.seriesZ[realIndex][dataPointIndex] / zRatio;
if (typeof this.radiusSizes[realIndex] === 'undefined') {
this.radiusSizes.push([]);
}
this.radiusSizes[realIndex].push(finishRadius);
}
if (!w.config.chart.animations.enabled) {
radius = finishRadius;
}
var x = pointsPos.x[q];
var y = pointsPos.y[q];
radius = radius || 0;
if (x === 0 && y === 0 || y === null || typeof w.globals.series[realIndex][dataPointIndex] === 'undefined') {
shouldDraw = false;
}
if (shouldDraw) {
var circle = this.drawPoint(x, y, radius, finishRadius, realIndex, dataPointIndex, j);
elPointsWrap.add(circle);
}
elPointsMain.add(elPointsWrap);
}
}
}
}, {
key: 'drawPoint',
value: function drawPoint(x, y, radius, finishRadius, realIndex, dataPointIndex, j) {
var w = this.w;
var i = realIndex;
var anim = new _Animations2.default(this.ctx);
var filters = new _Filters2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
var markers = new _Markers2.default(this.ctx);
var graphics = new _Graphics2.default(this.ctx);
var markerConfig = markers.getMarkerConfig('apexcharts-marker', i);
var pathFillCircle = fill.fillPath({
seriesNumber: realIndex,
patternUnits: 'objectBoundingBox',
value: w.globals.series[realIndex][j]
});
var circle = graphics.drawCircle(radius);
if (w.config.series[i].data[dataPointIndex]) {
if (w.config.series[i].data[dataPointIndex].fillColor) {
pathFillCircle = w.config.series[i].data[dataPointIndex].fillColor;
}
}
circle.attr({
cx: x,
cy: y,
fill: pathFillCircle,
stroke: markerConfig.pointStrokeColor,
strokeWidth: markerConfig.pWidth
});
if (w.config.chart.dropShadow.enabled) {
var dropShadow = w.config.chart.dropShadow;
filters.dropShadow(circle, dropShadow, realIndex);
}
if (this.initialAnim && !w.globals.dataChanged) {
var speed = 1;
if (!w.globals.resized) {
speed = w.config.chart.animations.speed;
}
anim.animateCircleRadius(circle, 0, finishRadius, speed, w.globals.easing);
}
if (w.globals.dataChanged) {
if (this.dynamicAnim) {
var _speed = w.config.chart.animations.dynamicAnimation.speed;
var prevX = void 0,
prevY = void 0,
prevR = void 0;
var prevPathJ = null;
prevPathJ = w.globals.previousPaths[realIndex] && w.globals.previousPaths[realIndex][j];
if (typeof prevPathJ !== 'undefined' && prevPathJ !== null) {
// series containing less elements will ignore these values and revert to 0
prevX = prevPathJ.x;
prevY = prevPathJ.y;
prevR = typeof prevPathJ.r !== 'undefined' ? prevPathJ.r : finishRadius;
}
for (var cs = 0; cs < w.globals.collapsedSeries.length; cs++) {
if (w.globals.collapsedSeries[cs].index === realIndex) {
_speed = 1;
finishRadius = 0;
}
}
if (x === 0 && y === 0) finishRadius = 0;
anim.animateCircle(circle, {
cx: prevX,
cy: prevY,
r: prevR
}, {
cx: x,
cy: y,
r: finishRadius
}, _speed, w.globals.easing);
} else {
circle.attr({
r: finishRadius
});
}
}
circle.attr({
rel: dataPointIndex,
j: dataPointIndex,
index: realIndex,
'default-marker-size': finishRadius
});
filters.setSelectionFilter(circle, realIndex, dataPointIndex);
markers.addEvents(circle);
circle.node.classList.add('apexcharts-marker');
return circle;
}
}, {
key: 'centerTextInBubble',
value: function centerTextInBubble(y) {
var w = this.w;
y = y + parseInt(w.config.dataLabels.style.fontSize) / 4;
return {
y: y
};
}
}]);
return Scatter;
}();
exports.default = Scatter;
/***/ }),
/* 20 */
/***/ (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; }; }();
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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"); } }
var Crosshairs = function () {
function Crosshairs(ctx) {
_classCallCheck(this, Crosshairs);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(Crosshairs, [{
key: 'drawXCrosshairs',
value: function drawXCrosshairs() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var filters = new _Filters2.default(this.ctx);
var crosshairGradient = w.config.xaxis.crosshairs.fill.gradient;
var crosshairShadow = w.config.xaxis.crosshairs.dropShadow;
var fillType = w.config.xaxis.crosshairs.fill.type;
var gradientFrom = crosshairGradient.colorFrom;
var gradientTo = crosshairGradient.colorTo;
var opacityFrom = crosshairGradient.opacityFrom;
var opacityTo = crosshairGradient.opacityTo;
var stops = crosshairGradient.stops;
var shadow = 'none';
var dropShadow = crosshairShadow.enabled;
var shadowLeft = crosshairShadow.left;
var shadowTop = crosshairShadow.top;
var shadowBlur = crosshairShadow.blur;
var shadowColor = crosshairShadow.color;
var shadowOpacity = crosshairShadow.opacity;
var xcrosshairsFill = w.config.xaxis.crosshairs.fill.color;
if (w.config.xaxis.crosshairs.show) {
if (fillType === 'gradient') {
xcrosshairsFill = graphics.drawGradient('vertical', gradientFrom, gradientTo, opacityFrom, opacityTo, null, stops, null);
}
var xcrosshairs = graphics.drawRect();
if (w.config.xaxis.crosshairs.width === 1) {
// to prevent drawing 2 lines, convert rect to line
xcrosshairs = graphics.drawLine();
}
xcrosshairs.attr({
class: 'apexcharts-xcrosshairs',
x: 0,
y: 0,
y2: w.globals.gridHeight,
width: _Utils2.default.isNumber(w.config.xaxis.crosshairs.width) ? w.config.xaxis.crosshairs.width : 0,
height: w.globals.gridHeight,
fill: xcrosshairsFill,
filter: shadow,
'fill-opacity': w.config.xaxis.crosshairs.opacity,
stroke: w.config.xaxis.crosshairs.stroke.color,
'stroke-width': w.config.xaxis.crosshairs.stroke.width,
'stroke-dasharray': w.config.xaxis.crosshairs.stroke.dashArray
});
if (dropShadow) {
xcrosshairs = filters.dropShadow(xcrosshairs, {
left: shadowLeft,
top: shadowTop,
blur: shadowBlur,
color: shadowColor,
opacity: shadowOpacity
});
}
w.globals.dom.elGraphical.add(xcrosshairs);
}
}
}, {
key: 'drawYCrosshairs',
value: function drawYCrosshairs() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var crosshair = w.config.yaxis[0].crosshairs;
if (w.config.yaxis[0].crosshairs.show) {
var ycrosshairs = graphics.drawLine(0, 0, w.globals.gridWidth, 0, crosshair.stroke.color, crosshair.stroke.dashArray, crosshair.stroke.width);
ycrosshairs.attr({
class: 'apexcharts-ycrosshairs'
});
w.globals.dom.elGraphical.add(ycrosshairs);
}
// draw an invisible crosshair to help in positioning the yaxis tooltip
var ycrosshairsHidden = graphics.drawLine(0, 0, w.globals.gridWidth, 0, crosshair.stroke.color, 0, 0);
ycrosshairsHidden.attr({
class: 'apexcharts-ycrosshairs-hidden'
});
w.globals.dom.elGraphical.add(ycrosshairsHidden);
}
}]);
return Crosshairs;
}();
exports.default = Crosshairs;
/***/ }),
/* 21 */
/***/ (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; }; }();
var _promisePolyfill = __webpack_require__(28);
var _promisePolyfill2 = _interopRequireDefault(_promisePolyfill);
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"); } }
var Exports = function () {
function Exports(ctx) {
_classCallCheck(this, Exports);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(Exports, [{
key: 'getSvgString',
value: function getSvgString() {
return this.w.globals.dom.Paper.svg();
}
}, {
key: 'cleanup',
value: function cleanup() {
var w = this.w;
// hide some elements to avoid printing them on exported svg
var xcrosshairs = w.globals.dom.baseEl.querySelector('.apexcharts-xcrosshairs');
var ycrosshairs = w.globals.dom.baseEl.querySelector('.apexcharts-ycrosshairs');
if (xcrosshairs) {
xcrosshairs.setAttribute('x', -500);
}
if (ycrosshairs) {
ycrosshairs.setAttribute('y1', -100);
ycrosshairs.setAttribute('y2', -100);
}
}
}, {
key: 'svgUrl',
value: function svgUrl() {
this.cleanup();
var svgData = this.getSvgString();
var svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
return URL.createObjectURL(svgBlob);
}
}, {
key: 'dataURI',
value: function dataURI() {
var _this = this;
return new _promisePolyfill2.default(function (resolve) {
var w = _this.w;
_this.cleanup();
var canvas = document.createElement('canvas');
canvas.width = w.globals.svgWidth;
canvas.height = w.globals.svgHeight;
var canvasBg = w.config.chart.background === 'transparent' ? '#fff' : w.config.chart.background;
var ctx = canvas.getContext('2d');
ctx.fillStyle = canvasBg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
img.crossOrigin = 'anonymous';
var svgData = _this.getSvgString();
var svgUrl = 'data:image/svg+xml,' + encodeURIComponent(svgData);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(svgUrl);
var imgURI = canvas.toDataURL('image/png');
resolve(imgURI);
};
img.src = svgUrl;
});
}
}, {
key: 'exportToSVG',
value: function exportToSVG() {
this.triggerDownload(this.svgUrl(), '.svg');
}
}, {
key: 'exportToPng',
value: function exportToPng() {
var _this2 = this;
this.dataURI().then(function (imgURI) {
_this2.triggerDownload(imgURI, '.png');
});
}
}, {
key: 'triggerDownload',
value: function triggerDownload(href, ext) {
var downloadLink = document.createElement('a');
downloadLink.href = href;
downloadLink.download = this.w.globals.chartID + ext;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
}]);
return Exports;
}();
exports.default = Exports;
/***/ }),
/* 22 */
/***/ (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; }; }();
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Scales = __webpack_require__(14);
var _Scales2 = _interopRequireDefault(_Scales);
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"); } }
/**
* Range is used to generates values between min and max.
*
* @module Range
**/
var Range = function () {
function Range(ctx) {
_classCallCheck(this, Range);
this.ctx = ctx;
this.w = ctx.w;
this.scales = new _Scales2.default(ctx);
}
_createClass(Range, [{
key: 'init',
value: function init() {
this.setYRange();
this.setXRange();
this.setZRange();
}
}, {
key: 'getMinYMaxY',
value: function getMinYMaxY(startingIndex) {
var lowestY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.MAX_VALUE;
var highestY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -Number.MAX_VALUE;
var len = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var gl = this.w.globals;
var maxY = -Number.MAX_VALUE;
var minY = Number.MIN_VALUE;
if (len === null) {
len = startingIndex + 1;
}
var series = gl.series;
var seriesMin = series;
var seriesMax = series;
if (this.w.config.chart.type === 'candlestick') {
seriesMin = gl.seriesCandleL;
seriesMax = gl.seriesCandleH;
} else if (gl.isRangeData) {
seriesMin = gl.seriesRangeStart;
seriesMax = gl.seriesRangeEnd;
}
for (var i = startingIndex; i < len; i++) {
gl.dataPoints = Math.max(gl.dataPoints, series[i].length);
for (var j = 0; j < gl.series[i].length; j++) {
var val = series[i][j];
if (val !== null && _Utils2.default.isNumber(val)) {
maxY = Math.max(maxY, seriesMax[i][j]);
lowestY = Math.min(lowestY, seriesMin[i][j]);
highestY = Math.max(highestY, seriesMin[i][j]);
if (this.w.config.chart.type === 'candlestick') {
maxY = Math.max(maxY, gl.seriesCandleO[i][j]);
maxY = Math.max(maxY, gl.seriesCandleH[i][j]);
maxY = Math.max(maxY, gl.seriesCandleL[i][j]);
maxY = Math.max(maxY, gl.seriesCandleC[i][j]);
highestY = maxY;
}
if (_Utils2.default.isFloat(val)) {
val = _Utils2.default.noExponents(val);
gl.yValueDecimal = Math.max(gl.yValueDecimal, val.toString().split('.')[1].length);
}
if (minY > seriesMin[i][j] && seriesMin[i][j] < 0) {
minY = seriesMin[i][j];
}
} else {
gl.hasNullValues = true;
}
}
}
return {
minY: minY,
maxY: maxY,
lowestY: lowestY,
highestY: highestY
};
}
}, {
key: 'setYRange',
value: function setYRange() {
var gl = this.w.globals;
var cnf = this.w.config;
gl.maxY = -Number.MAX_VALUE;
gl.minY = Number.MIN_VALUE;
var lowestYInAllSeries = Number.MAX_VALUE;
if (gl.isMultipleYAxis) {
// we need to get minY and maxY for multiple y axis
for (var i = 0; i < gl.series.length; i++) {
var minYMaxYArr = this.getMinYMaxY(i, lowestYInAllSeries, null, i + 1);
gl.minYArr.push(minYMaxYArr.minY);
gl.maxYArr.push(minYMaxYArr.maxY);
lowestYInAllSeries = minYMaxYArr.lowestY;
}
}
// and then, get the minY and maxY from all series
var minYMaxY = this.getMinYMaxY(0, lowestYInAllSeries, null, gl.series.length);
gl.minY = minYMaxY.minY;
gl.maxY = minYMaxY.maxY;
lowestYInAllSeries = minYMaxY.lowestY;
if (cnf.chart.stacked) {
// for stacked charts, we calculate each series's parallel values. i.e, series[0][j] + series[1][j] .... [series[i.length][j]] and get the max out of it
var stackedPoss = [];
var stackedNegs = [];
for (var j = 0; j < gl.series[gl.maxValsInArrayIndex].length; j++) {
var poss = 0;
var negs = 0;
for (var _i = 0; _i < gl.series.length; _i++) {
if (gl.series[_i][j] !== null && _Utils2.default.isNumber(gl.series[_i][j])) {
if (gl.series[_i][j] > 0) {
// 0.0001 fixes #185 when values are very small
poss = poss + parseFloat(gl.series[_i][j]) + 0.0001;
} else {
negs = negs + parseFloat(gl.series[_i][j]);
}
}
if (_i === gl.series.length - 1) {
// push all the totals to the array for future use
stackedPoss.push(poss);
stackedNegs.push(negs);
}
}
}
// get the max/min out of the added parallel values
for (var z = 0; z < stackedPoss.length; z++) {
gl.maxY = Math.max(gl.maxY, stackedPoss[z]);
gl.minY = Math.min(gl.minY, stackedNegs[z]);
}
}
// if the numbers are too big, reduce the range
// for eg, if number is between 100000-110000, putting 0 as the lowest value is not so good idea. So change the gl.minY for line/area/candlesticks
if (cnf.chart.type === 'line' || cnf.chart.type === 'area' || cnf.chart.type === 'candlestick') {
if (gl.minY === Number.MIN_VALUE && lowestYInAllSeries !== -Number.MAX_VALUE && lowestYInAllSeries !== gl.maxY // single value possibility
) {
var diff = gl.maxY - lowestYInAllSeries;
if (lowestYInAllSeries >= 0 && lowestYInAllSeries <= 10) {
// if minY is already 0/low value, we don't want to go negatives here - so this check is essential.
diff = 0;
}
gl.minY = lowestYInAllSeries - diff * 5 / 100;
/* fix https://github.com/apexcharts/apexcharts.js/issues/426 */
gl.maxY = gl.maxY + diff * 5 / 100;
}
}
cnf.yaxis.map(function (yaxe, index) {
// override all min/max values by user defined values (y axis)
if (yaxe.max !== undefined) {
if (typeof yaxe.max === 'number') {
gl.maxYArr[index] = yaxe.max;
} else if (typeof yaxe.max === 'function') {
gl.maxYArr[index] = yaxe.max(gl.maxY);
}
// gl.maxY is for single y-axis chart, it will be ignored in multi-yaxis
gl.maxY = gl.maxYArr[index];
}
if (yaxe.min !== undefined) {
if (typeof yaxe.min === 'number') {
gl.minYArr[index] = yaxe.min;
} else if (typeof yaxe.min === 'function') {
gl.minYArr[index] = yaxe.min(gl.minY);
}
// gl.minY is for single y-axis chart, it will be ignored in multi-yaxis
gl.minY = gl.minYArr[index];
}
});
// for horizontal bar charts, we need to check xaxis min/max as user may have specified there
if (gl.isBarHorizontal) {
if (cnf.xaxis.min !== undefined && typeof cnf.xaxis.min === 'number') {
gl.minY = cnf.xaxis.min;
}
if (cnf.xaxis.max !== undefined && typeof cnf.xaxis.max === 'number') {
gl.maxY = cnf.xaxis.max;
}
}
// for multi y-axis we need different scales for each
if (gl.isMultipleYAxis) {
this.scales.setMultipleYScales();
gl.minY = lowestYInAllSeries;
gl.yAxisScale.forEach(function (scale, i) {
gl.minYArr[i] = scale.niceMin;
gl.maxYArr[i] = scale.niceMax;
});
} else {
this.scales.setYScaleForIndex(0, gl.minY, gl.maxY);
gl.minY = gl.yAxisScale[0].niceMin;
gl.maxY = gl.yAxisScale[0].niceMax;
gl.minYArr[0] = gl.yAxisScale[0].niceMin;
gl.maxYArr[0] = gl.yAxisScale[0].niceMax;
}
return {
minY: gl.minY,
maxY: gl.maxY,
minYArr: gl.minYArr,
maxYArr: gl.maxYArr
};
}
}, {
key: 'setXRange',
value: function setXRange() {
var gl = this.w.globals;
var cnf = this.w.config;
var isXNumeric = cnf.xaxis.type === 'numeric' || cnf.xaxis.type === 'datetime' || cnf.xaxis.type === 'category' && !gl.noLabelsProvided || gl.noLabelsProvided || gl.isXNumeric;
// minX maxX starts here
if (gl.isXNumeric) {
for (var i = 0; i < gl.series.length; i++) {
if (gl.labels[i]) {
for (var j = 0; j < gl.labels[i].length; j++) {
if (gl.labels[i][j] !== null && _Utils2.default.isNumber(gl.labels[i][j])) {
gl.maxX = Math.max(gl.maxX, gl.labels[i][j]);
gl.initialmaxX = Math.max(gl.maxX, gl.labels[i][j]);
gl.minX = Math.min(gl.minX, gl.labels[i][j]);
gl.initialminX = Math.min(gl.minX, gl.labels[i][j]);
}
}
}
}
}
if (gl.noLabelsProvided) {
if (cnf.xaxis.categories.length === 0) {
gl.maxX = gl.labels[gl.labels.length - 1];
gl.initialmaxX = gl.labels[gl.labels.length - 1];
gl.minX = 1;
gl.initialminX = 1;
}
}
// for numeric xaxis, we need to adjust some padding left and right for bar charts
if (gl.comboChartsHasBars || cnf.chart.type === 'candlestick' || cnf.chart.type === 'bar' && gl.isXNumeric) {
if (cnf.xaxis.type !== 'category' || gl.isXNumeric) {
var minX = gl.minX - gl.svgWidth / gl.dataPoints * (Math.abs(gl.maxX - gl.minX) / gl.svgWidth) / 2;
gl.minX = minX;
gl.initialminX = minX;
var maxX = gl.maxX + gl.svgWidth / gl.dataPoints * (Math.abs(gl.maxX - gl.minX) / gl.svgWidth) / 2;
gl.maxX = maxX;
gl.initialmaxX = maxX;
}
}
if ((gl.isXNumeric || gl.noLabelsProvided) && (!cnf.xaxis.convertedCatToNumeric || gl.dataFormatXNumeric)) {
var ticks = void 0;
if (cnf.xaxis.tickAmount === undefined) {
ticks = Math.round(gl.svgWidth / 150);
// no labels provided and total number of dataPoints is less than 20
if (cnf.xaxis.type === 'numeric' && gl.dataPoints < 20) {
ticks = gl.dataPoints - 1;
}
// this check is for when ticks exceeds total datapoints and that would result in duplicate labels
if (ticks > gl.dataPoints && gl.dataPoints !== 0) {
ticks = gl.dataPoints - 1;
}
} else if (cnf.xaxis.tickAmount === 'dataPoints') {
ticks = gl.series[gl.maxValsInArrayIndex].length - 1;
} else {
ticks = cnf.xaxis.tickAmount;
}
// override all min/max values by user defined values (x axis)
if (cnf.xaxis.max !== undefined && typeof cnf.xaxis.max === 'number') {
gl.maxX = cnf.xaxis.max;
}
if (cnf.xaxis.min !== undefined && typeof cnf.xaxis.min === 'number') {
gl.minX = cnf.xaxis.min;
}
// if range is provided, adjust the new minX
if (cnf.xaxis.range !== undefined) {
gl.minX = gl.maxX - cnf.xaxis.range;
}
if (gl.minX !== Number.MAX_VALUE && gl.maxX !== -Number.MAX_VALUE) {
gl.xAxisScale = this.scales.linearScale(gl.minX, gl.maxX, ticks);
} else {
gl.xAxisScale = this.scales.linearScale(1, ticks, ticks);
if (gl.noLabelsProvided && gl.labels.length > 0) {
gl.xAxisScale = this.scales.linearScale(1, gl.labels.length, ticks - 1);
// this is the only place seriesX is again mutated
gl.seriesX = gl.labels.slice();
}
}
// we will still store these labels as the count for this will be different (to draw grid and labels placement)
if (isXNumeric) {
gl.labels = gl.xAxisScale.result.slice();
}
}
if (gl.minX === gl.maxX) {
// single dataPoint
if (cnf.xaxis.type === 'datetime') {
var newMinX = new Date(gl.minX);
newMinX.setDate(newMinX.getDate() - 2);
gl.minX = new Date(newMinX).getTime();
var newMaxX = new Date(gl.maxX);
newMaxX.setDate(newMaxX.getDate() + 2);
gl.maxX = new Date(newMaxX).getTime();
} else if (cnf.xaxis.type === 'numeric' || cnf.xaxis.type === 'category' && !gl.noLabelsProvided) {
gl.minX = gl.minX - 2;
gl.maxX = gl.maxX + 2;
}
}
if (gl.isXNumeric) {
// get the least x diff if numeric x axis is present
gl.seriesX.forEach(function (sX, i) {
sX.forEach(function (s, j) {
if (j > 0) {
var xDiff = s - gl.seriesX[i][j - 1];
gl.minXDiff = Math.min(xDiff, gl.minXDiff);
}
});
});
this.calcMinXDiffForTinySeries();
}
return {
minX: gl.minX,
maxX: gl.maxX
};
}
}, {
key: 'calcMinXDiffForTinySeries',
value: function calcMinXDiffForTinySeries() {
var w = this.w;
var len = w.globals.labels.length;
if (w.globals.labels.length === 1) {
w.globals.minXDiff = (w.globals.maxX - w.globals.minX) / len / 3;
} else {
if (w.globals.minXDiff === Number.MAX_VALUE) {
// possibly a single dataPoint (fixes react-apexcharts/issue#34)
if (w.globals.timelineLabels.length > 0) {
len = w.globals.timelineLabels.length;
}
if (len < 3) {
len = 3;
}
w.globals.minXDiff = (w.globals.maxX - w.globals.minX) / len;
}
}
return w.globals.minXDiff;
}
}, {
key: 'setZRange',
value: function setZRange() {
var gl = this.w.globals;
// minZ, maxZ starts here
if (gl.isDataXYZ) {
for (var i = 0; i < gl.series.length; i++) {
if (typeof gl.seriesZ[i] !== 'undefined') {
for (var j = 0; j < gl.seriesZ[i].length; j++) {
if (gl.seriesZ[i][j] !== null && _Utils2.default.isNumber(gl.seriesZ[i][j])) {
gl.maxZ = Math.max(gl.maxZ, gl.seriesZ[i][j]);
gl.minZ = Math.min(gl.minZ, gl.seriesZ[i][j]);
}
}
}
}
}
}
}]);
return Range;
}();
exports.default = Range;
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Exports = __webpack_require__(21);
var _Exports2 = _interopRequireDefault(_Exports);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _icoPanHand = __webpack_require__(75);
var _icoPanHand2 = _interopRequireDefault(_icoPanHand);
var _icoZoomIn = __webpack_require__(78);
var _icoZoomIn2 = _interopRequireDefault(_icoZoomIn);
var _icoHome = __webpack_require__(72);
var _icoHome2 = _interopRequireDefault(_icoHome);
var _icoPlus = __webpack_require__(76);
var _icoPlus2 = _interopRequireDefault(_icoPlus);
var _icoMinus = __webpack_require__(74);
var _icoMinus2 = _interopRequireDefault(_icoMinus);
var _icoSelect = __webpack_require__(77);
var _icoSelect2 = _interopRequireDefault(_icoSelect);
var _icoMenu = __webpack_require__(73);
var _icoMenu2 = _interopRequireDefault(_icoMenu);
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 Toolbar Class for creating toolbar in axis based charts.
*
* @module Toolbar
**/
var Toolbar = function () {
function Toolbar(ctx) {
_classCallCheck(this, Toolbar);
this.ctx = ctx;
this.w = ctx.w;
this.ev = this.w.config.chart.events;
this.localeValues = this.w.globals.locale.toolbar;
}
_createClass(Toolbar, [{
key: 'createToolbar',
value: function createToolbar() {
var w = this.w;
var elToolbarWrap = document.createElement('div');
elToolbarWrap.setAttribute('class', 'apexcharts-toolbar');
w.globals.dom.elWrap.appendChild(elToolbarWrap);
this.elZoom = document.createElement('div');
this.elZoomIn = document.createElement('div');
this.elZoomOut = document.createElement('div');
this.elPan = document.createElement('div');
this.elSelection = document.createElement('div');
this.elZoomReset = document.createElement('div');
this.elMenuIcon = document.createElement('div');
this.elMenu = document.createElement('div');
this.elCustomIcons = [];
this.t = w.config.chart.toolbar.tools;
if (Array.isArray(this.t.customIcons)) {
for (var i = 0; i < this.t.customIcons.length; i++) {
this.elCustomIcons.push(document.createElement('div'));
}
}
this.elMenuItems = [];
var toolbarControls = [];
if (this.t.zoomin && w.config.chart.zoom.enabled) {
toolbarControls.push({
el: this.elZoomIn,
icon: typeof this.t.zoomin === 'string' ? this.t.zoomin : _icoPlus2.default,
title: this.localeValues.zoomIn,
class: 'apexcharts-zoom-in-icon'
});
}
if (this.t.zoomout && w.config.chart.zoom.enabled) {
toolbarControls.push({
el: this.elZoomOut,
icon: typeof this.t.zoomout === 'string' ? this.t.zoomout : _icoMinus2.default,
title: this.localeValues.zoomOut,
class: 'apexcharts-zoom-out-icon'
});
}
if (this.t.zoom && w.config.chart.zoom.enabled) {
toolbarControls.push({
el: this.elZoom,
icon: typeof this.t.zoom === 'string' ? this.t.zoom : _icoZoomIn2.default,
title: this.localeValues.selectionZoom,
class: w.globals.isTouchDevice ? 'hidden' : 'apexcharts-zoom-icon'
});
}
if (this.t.selection && w.config.chart.selection.enabled) {
toolbarControls.push({
el: this.elSelection,
icon: typeof this.t.selection === 'string' ? this.t.selection : _icoSelect2.default,
title: this.localeValues.selection,
class: w.globals.isTouchDevice ? 'hidden' : 'apexcharts-selection-icon'
});
}
if (this.t.pan && w.config.chart.zoom.enabled) {
toolbarControls.push({
el: this.elPan,
icon: typeof this.t.pan === 'string' ? this.t.pan : _icoPanHand2.default,
title: this.localeValues.pan,
class: w.globals.isTouchDevice ? 'hidden' : 'apexcharts-pan-icon'
});
}
if (this.t.reset && w.config.chart.zoom.enabled) {
toolbarControls.push({
el: this.elZoomReset,
icon: typeof this.t.reset === 'string' ? this.t.reset : _icoHome2.default,
title: this.localeValues.reset,
class: 'apexcharts-reset-zoom-icon'
});
}
if (this.t.download) {
toolbarControls.push({
el: this.elMenuIcon,
icon: typeof this.t.download === 'string' ? this.t.download : _icoMenu2.default,
title: this.localeValues.menu,
class: 'apexcharts-menu-icon'
});
}
for (var _i = 0; _i < this.elCustomIcons.length; _i++) {
toolbarControls.push({
el: this.elCustomIcons[_i],
icon: this.t.customIcons[_i].icon,
title: this.t.customIcons[_i].title,
index: this.t.customIcons[_i].index,
class: 'apexcharts-toolbar-custom-icon ' + this.t.customIcons[_i].class
});
}
toolbarControls.forEach(function (t, index) {
if (t.index) {
_Utils2.default.moveIndexInArray(toolbarControls, index, t.index);
}
});
for (var _i2 = 0; _i2 < toolbarControls.length; _i2++) {
_Graphics2.default.setAttrs(toolbarControls[_i2].el, {
class: toolbarControls[_i2].class,
title: toolbarControls[_i2].title
});
toolbarControls[_i2].el.innerHTML = toolbarControls[_i2].icon;
elToolbarWrap.appendChild(toolbarControls[_i2].el);
}
elToolbarWrap.appendChild(this.elMenu);
_Graphics2.default.setAttrs(this.elMenu, {
class: 'apexcharts-menu'
});
var menuItems = [{
name: 'exportSVG',
title: this.localeValues.exportToSVG
}, {
name: 'exportPNG',
title: this.localeValues.exportToPNG
}];
for (var _i3 = 0; _i3 < menuItems.length; _i3++) {
this.elMenuItems.push(document.createElement('div'));
this.elMenuItems[_i3].innerHTML = menuItems[_i3].title;
_Graphics2.default.setAttrs(this.elMenuItems[_i3], {
class: 'apexcharts-menu-item ' + menuItems[_i3].name,
title: menuItems[_i3].title
});
this.elMenu.appendChild(this.elMenuItems[_i3]);
}
if (w.globals.zoomEnabled) {
this.elZoom.classList.add('selected');
} else if (w.globals.panEnabled) {
this.elPan.classList.add('selected');
} else if (w.globals.selectionEnabled) {
this.elSelection.classList.add('selected');
}
this.addToolbarEventListeners();
}
}, {
key: 'addToolbarEventListeners',
value: function addToolbarEventListeners() {
var _this = this;
this.elZoomReset.addEventListener('click', this.handleZoomReset.bind(this));
this.elSelection.addEventListener('click', this.toggleSelection.bind(this));
this.elZoom.addEventListener('click', this.toggleZooming.bind(this));
this.elZoomIn.addEventListener('click', this.handleZoomIn.bind(this));
this.elZoomOut.addEventListener('click', this.handleZoomOut.bind(this));
this.elPan.addEventListener('click', this.togglePanning.bind(this));
this.elMenuIcon.addEventListener('click', this.toggleMenu.bind(this));
this.elMenuItems.forEach(function (m) {
if (m.classList.contains('exportSVG')) {
m.addEventListener('click', _this.downloadSVG.bind(_this));
} else if (m.classList.contains('exportPNG')) {
m.addEventListener('click', _this.downloadPNG.bind(_this));
}
});
for (var i = 0; i < this.t.customIcons.length; i++) {
this.elCustomIcons[i].addEventListener('click', this.t.customIcons[i].click);
}
}
}, {
key: 'toggleSelection',
value: function toggleSelection() {
this.toggleOtherControls();
this.w.globals.selectionEnabled = !this.w.globals.selectionEnabled;
if (!this.elSelection.classList.contains('selected')) {
this.elSelection.classList.add('selected');
} else {
this.elSelection.classList.remove('selected');
}
}
}, {
key: 'toggleZooming',
value: function toggleZooming() {
this.toggleOtherControls();
this.w.globals.zoomEnabled = !this.w.globals.zoomEnabled;
if (!this.elZoom.classList.contains('selected')) {
this.elZoom.classList.add('selected');
} else {
this.elZoom.classList.remove('selected');
}
}
}, {
key: 'getToolbarIconsReference',
value: function getToolbarIconsReference() {
var w = this.w;
if (!this.elZoom) {
this.elZoom = w.globals.dom.baseEl.querySelector('.apexcharts-zoom-icon');
}
if (!this.elPan) {
this.elPan = w.globals.dom.baseEl.querySelector('.apexcharts-pan-icon');
}
if (!this.elSelection) {
this.elSelection = w.globals.dom.baseEl.querySelector('.apexcharts-selection-icon');
}
}
}, {
key: 'enableZooming',
value: function enableZooming() {
this.toggleOtherControls();
this.w.globals.zoomEnabled = true;
if (this.elZoom) {
this.elZoom.classList.add('selected');
}
if (this.elPan) {
this.elPan.classList.remove('selected');
}
}
}, {
key: 'enablePanning',
value: function enablePanning() {
this.toggleOtherControls();
this.w.globals.panEnabled = true;
if (this.elPan) {
this.elPan.classList.add('selected');
}
if (this.elZoom) {
this.elZoom.classList.remove('selected');
}
}
}, {
key: 'togglePanning',
value: function togglePanning() {
this.toggleOtherControls();
this.w.globals.panEnabled = !this.w.globals.panEnabled;
if (!this.elPan.classList.contains('selected')) {
this.elPan.classList.add('selected');
} else {
this.elPan.classList.remove('selected');
}
}
}, {
key: 'toggleOtherControls',
value: function toggleOtherControls() {
var w = this.w;
w.globals.panEnabled = false;
w.globals.zoomEnabled = false;
w.globals.selectionEnabled = false;
this.getToolbarIconsReference();
if (this.elPan) {
this.elPan.classList.remove('selected');
}
if (this.elSelection) {
this.elSelection.classList.remove('selected');
}
if (this.elZoom) {
this.elZoom.classList.remove('selected');
}
}
}, {
key: 'handleZoomIn',
value: function handleZoomIn() {
var w = this.w;
var centerX = (w.globals.minX + w.globals.maxX) / 2;
var newMinX = (w.globals.minX + centerX) / 2;
var newMaxX = (w.globals.maxX + centerX) / 2;
if (!w.globals.disableZoomIn) {
this.zoomUpdateOptions(newMinX, newMaxX);
}
}
}, {
key: 'handleZoomOut',
value: function handleZoomOut() {
var w = this.w;
// avoid zooming out beyond 1000 which may result in NaN values being printed on x-axis
if (w.config.xaxis.type === 'datetime' && new Date(w.globals.minX).getUTCFullYear() < 1000) {
return;
}
var centerX = (w.globals.minX + w.globals.maxX) / 2;
var newMinX = w.globals.minX - (centerX - w.globals.minX);
var newMaxX = w.globals.maxX - (centerX - w.globals.maxX);
if (!w.globals.disableZoomOut) {
this.zoomUpdateOptions(newMinX, newMaxX);
}
}
}, {
key: 'zoomUpdateOptions',
value: function zoomUpdateOptions(newMinX, newMaxX) {
var xaxis = {
min: newMinX,
max: newMaxX
};
var beforeZoomRange = this.getBeforeZoomRange(xaxis);
if (beforeZoomRange) {
xaxis = beforeZoomRange.xaxis;
}
this.w.globals.zoomed = true;
this.ctx._updateOptions({
xaxis: xaxis
}, false, this.w.config.chart.animations.dynamicAnimation.enabled);
this.zoomCallback(xaxis);
}
}, {
key: 'zoomCallback',
value: function zoomCallback(xaxis, yaxis) {
if (typeof this.ev.zoomed === 'function') {
this.ev.zoomed(this.ctx, { xaxis: xaxis, yaxis: yaxis });
}
}
}, {
key: 'getBeforeZoomRange',
value: function getBeforeZoomRange(xaxis, yaxis) {
var newRange = null;
if (typeof this.ev.beforeZoom === 'function') {
newRange = this.ev.beforeZoom(this, { xaxis: xaxis, yaxis: yaxis });
}
return newRange;
}
}, {
key: 'toggleMenu',
value: function toggleMenu() {
if (this.elMenu.classList.contains('open')) {
this.elMenu.classList.remove('open');
} else {
this.elMenu.classList.add('open');
}
}
}, {
key: 'downloadPNG',
value: function downloadPNG() {
var downloadPNG = new _Exports2.default(this.ctx);
downloadPNG.exportToPng(this.ctx);
this.toggleMenu();
}
}, {
key: 'downloadSVG',
value: function downloadSVG() {
var downloadSVG = new _Exports2.default(this.ctx);
downloadSVG.exportToSVG();
this.toggleMenu();
}
}, {
key: 'handleZoomReset',
value: function handleZoomReset(e) {
var _this2 = this;
var charts = this.ctx.getSyncedCharts();
charts.forEach(function (ch) {
var w = ch.w;
if (w.globals.minX !== w.globals.initialminX && w.globals.maxX !== w.globals.initialmaxX) {
ch.revertDefaultAxisMinMax();
if (typeof w.config.chart.events.zoomed === 'function') {
_this2.zoomCallback({
min: w.config.xaxis.min,
max: w.config.xaxis.max
});
}
w.globals.zoomed = false;
ch._updateSeries(w.globals.initialSeries, w.config.chart.animations.dynamicAnimation.enabled);
}
});
}
}, {
key: 'destroy',
value: function destroy() {
if (this.elZoomReset) {
this.elZoomReset.removeEventListener('click', this.handleZoomReset.bind(this));
this.elSelection.removeEventListener('click', this.toggleSelection.bind(this));
this.elZoom.removeEventListener('click', this.toggleZooming.bind(this));
this.elZoomIn.removeEventListener('click', this.handleZoomIn.bind(this));
this.elZoomOut.removeEventListener('click', this.handleZoomOut.bind(this));
this.elPan.removeEventListener('click', this.togglePanning.bind(this));
this.elMenuIcon.removeEventListener('click', this.toggleMenu.bind(this));
}
this.elZoom = null;
this.elZoomIn = null;
this.elZoomOut = null;
this.elPan = null;
this.elSelection = null;
this.elZoomReset = null;
this.elMenuIcon = null;
}
}]);
return Toolbar;
}();
exports.default = Toolbar;
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Formatters = __webpack_require__(10);
var _Formatters2 = _interopRequireDefault(_Formatters);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
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"); } }
var AxesUtils = function () {
function AxesUtils(ctx) {
_classCallCheck(this, AxesUtils);
this.ctx = ctx;
this.w = ctx.w;
}
// Based on the formatter function, get the label text and position
_createClass(AxesUtils, [{
key: 'getLabel',
value: function getLabel(labels, timelineLabels, x, i) {
var drawnLabels = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
var w = this.w;
var rawLabel = typeof labels[i] === 'undefined' ? '' : labels[i];
var label = void 0;
var xlbFormatter = w.globals.xLabelFormatter;
var customFormatter = w.config.xaxis.labels.formatter;
var xFormat = new _Formatters2.default(this.ctx);
label = xFormat.xLabelFormat(xlbFormatter, rawLabel);
if (customFormatter !== undefined) {
label = customFormatter(rawLabel, labels[i], i);
}
if (timelineLabels.length > 0) {
x = timelineLabels[i].position;
label = timelineLabels[i].value;
} else {
if (w.config.xaxis.type === 'datetime' && customFormatter === undefined) {
label = '';
}
}
if (typeof label === 'undefined') label = '';
label = label.toString();
if (label.indexOf('NaN') === 0 || label.toLowerCase().indexOf('invalid') === 0 || label.toLowerCase().indexOf('infinity') >= 0 || drawnLabels.indexOf(label) >= 0 && !w.config.xaxis.labels.showDuplicates) {
label = '';
}
return {
x: x,
text: label
};
}
}, {
key: 'drawYAxisTicks',
value: function drawYAxisTicks(x, tickAmount, axisBorder, axisTicks, realIndex, labelsDivider, elYaxis) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
// initial label position = 0;
var t = w.globals.translateY;
if (axisTicks.show) {
if (w.config.yaxis[realIndex].opposite === true) x = x + axisTicks.width;
for (var i = tickAmount; i >= 0; i--) {
var tY = t + tickAmount / 10 + w.config.yaxis[realIndex].labels.offsetY - 1;
if (w.globals.isBarHorizontal) {
tY = labelsDivider * i;
}
var elTick = graphics.drawLine(x + axisBorder.offsetX - axisTicks.width + axisTicks.offsetX, tY + axisTicks.offsetY, x + axisBorder.offsetX + axisTicks.offsetX, tY + axisTicks.offsetY, axisBorder.color);
elYaxis.add(elTick);
t = t + labelsDivider;
}
}
}
}]);
return AxesUtils;
}();
exports.default = AxesUtils;
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _DateTime = __webpack_require__(11);
var _DateTime2 = _interopRequireDefault(_DateTime);
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 Default Class for setting default options for all chart types.
*
* @module Defaults
**/
var Defaults = function () {
function Defaults(opts) {
_classCallCheck(this, Defaults);
this.opts = opts;
}
_createClass(Defaults, [{
key: 'line',
value: function line() {
return {
chart: {
animations: {
easing: 'swing'
}
},
dataLabels: {
enabled: false
},
stroke: {
width: 5,
curve: 'straight'
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
crosshairs: {
width: 1
}
}
};
}
}, {
key: 'sparkline',
value: function sparkline(defaults) {
this.opts.yaxis[0].labels.show = false;
this.opts.yaxis[0].floating = true;
var ret = {
grid: {
show: false,
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
show: false
},
xaxis: {
labels: {
show: false
},
tooltip: {
enabled: false
},
axisBorder: {
show: false
}
},
chart: {
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
}
};
return _Utils2.default.extend(defaults, ret);
}
}, {
key: 'bar',
value: function bar() {
return {
chart: {
stacked: false,
animations: {
easing: 'swing'
}
},
plotOptions: {
bar: {
dataLabels: {
position: 'center'
}
}
},
dataLabels: {
style: {
colors: ['#fff']
}
},
stroke: {
width: 0
},
fill: {
opacity: 0.85
},
legend: {
markers: {
shape: 'square',
radius: 2,
size: 8
}
},
tooltip: {
shared: false
},
xaxis: {
tooltip: {
enabled: false
},
crosshairs: {
width: 'barWidth',
position: 'back',
fill: {
type: 'gradient'
},
dropShadow: {
enabled: false
},
stroke: {
width: 0
}
}
}
};
}
}, {
key: 'candlestick',
value: function candlestick() {
return {
stroke: {
width: 1,
colors: ['#333']
},
dataLabels: {
enabled: false
},
tooltip: {
shared: true,
custom: function custom(_ref) {
var seriesIndex = _ref.seriesIndex,
dataPointIndex = _ref.dataPointIndex,
w = _ref.w;
var o = w.globals.seriesCandleO[seriesIndex][dataPointIndex];
var h = w.globals.seriesCandleH[seriesIndex][dataPointIndex];
var l = w.globals.seriesCandleL[seriesIndex][dataPointIndex];
var c = w.globals.seriesCandleC[seriesIndex][dataPointIndex];
return '';
}
},
states: {
active: {
filter: {
type: 'none'
}
}
},
xaxis: {
crosshairs: {
width: 1
}
}
};
}
}, {
key: 'rangeBar',
value: function rangeBar() {
return {
stroke: {
width: 0
},
plotOptions: {
bar: {
dataLabels: {
position: 'center'
}
}
},
dataLabels: {
enabled: false,
formatter: function formatter(val, _ref2) {
var ctx = _ref2.ctx,
seriesIndex = _ref2.seriesIndex,
dataPointIndex = _ref2.dataPointIndex,
w = _ref2.w;
var start = w.globals.seriesRangeStart[seriesIndex][dataPointIndex];
var end = w.globals.seriesRangeEnd[seriesIndex][dataPointIndex];
return end - start;
},
style: {
colors: ['#fff']
}
},
tooltip: {
shared: false,
followCursor: true,
custom: function custom(_ref3) {
var ctx = _ref3.ctx,
seriesIndex = _ref3.seriesIndex,
dataPointIndex = _ref3.dataPointIndex,
w = _ref3.w;
var start = w.globals.seriesRangeStart[seriesIndex][dataPointIndex];
var end = w.globals.seriesRangeEnd[seriesIndex][dataPointIndex];
var startVal = '';
var endVal = '';
var color = w.globals.colors[seriesIndex];
if (w.config.tooltip.x.formatter === undefined) {
if (w.config.xaxis.type === 'datetime') {
var datetimeObj = new _DateTime2.default(ctx);
startVal = datetimeObj.formatDate(new Date(start), w.config.tooltip.x.format, true, true);
endVal = datetimeObj.formatDate(new Date(end), w.config.tooltip.x.format, true, true);
} else {
startVal = start;
endVal = end;
}
} else {
startVal = w.config.tooltip.x.formatter(start);
endVal = w.config.tooltip.x.formatter(end);
}
var ylabel = w.globals.labels[dataPointIndex];
return '';
}
},
xaxis: {
tooltip: {
enabled: false
},
crosshairs: {
stroke: {
width: 0
}
}
}
};
}
}, {
key: 'area',
value: function area() {
return {
stroke: {
width: 4
},
fill: {
type: 'gradient',
gradient: {
inverseColors: false,
shade: 'light',
type: 'vertical',
opacityFrom: 0.65,
opacityTo: 0.5,
stops: [0, 100, 100]
}
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
tooltip: {
followCursor: false
}
};
}
}, {
key: 'brush',
value: function brush(defaults) {
var ret = {
chart: {
toolbar: {
autoSelected: 'selection',
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
width: 1
},
tooltip: {
enabled: false
},
xaxis: {
tooltip: {
enabled: false
}
}
};
return _Utils2.default.extend(defaults, ret);
}
}, {
key: 'stacked100',
value: function stacked100() {
var _this = this;
this.opts.dataLabels = this.opts.dataLabels || {};
this.opts.dataLabels.formatter = this.opts.dataLabels.formatter || undefined;
var existingDataLabelFormatter = this.opts.dataLabels.formatter;
this.opts.yaxis.forEach(function (yaxe, index) {
_this.opts.yaxis[index].min = 0;
_this.opts.yaxis[index].max = 100;
});
var isBar = this.opts.chart.type === 'bar';
if (isBar) {
this.opts.dataLabels.formatter = existingDataLabelFormatter || function (val) {
if (typeof val === 'number') {
return val ? val.toFixed(0) + '%' : val;
}
return val;
};
}
}
// This function removes the left and right spacing in chart for line/area/scatter if xaxis type = category for those charts by converting xaxis = numeric. Numeric/Datetime xaxis prevents the unnecessary spacing in the left/right of the chart area
}, {
key: 'bubble',
value: function bubble() {
return {
dataLabels: {
style: {
colors: ['#fff']
}
},
tooltip: {
shared: false,
intersect: true
},
xaxis: {
crosshairs: {
width: 0
}
},
fill: {
type: 'solid',
gradient: {
shade: 'light',
inverse: true,
shadeIntensity: 0.55,
opacityFrom: 0.4,
opacityTo: 0.8
}
}
};
}
}, {
key: 'scatter',
value: function scatter() {
return {
dataLabels: {
enabled: false
},
tooltip: {
shared: false,
intersect: true
},
markers: {
size: 6,
strokeWidth: 2,
hover: {
sizeOffset: 2
}
}
};
}
}, {
key: 'heatmap',
value: function heatmap() {
return {
chart: {
stacked: false,
zoom: {
enabled: false
}
},
fill: {
opacity: 1
},
dataLabels: {
style: {
colors: ['#fff']
}
},
stroke: {
colors: ['#fff']
},
tooltip: {
followCursor: true,
marker: {
show: false
},
x: {
show: false
}
},
legend: {
position: 'top',
markers: {
shape: 'square',
size: 10,
offsetY: 2
}
},
grid: {
padding: {
right: 20
}
}
};
}
}, {
key: 'pie',
value: function pie() {
return {
chart: {
toolbar: {
show: false
}
},
plotOptions: {
pie: {
donut: {
labels: {
show: false
}
}
}
},
dataLabels: {
formatter: function formatter(val) {
return val.toFixed(1) + '%';
},
style: {
colors: ['#fff']
},
dropShadow: {
enabled: true
}
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1,
gradient: {
shade: 'dark',
shadeIntensity: 0.35,
inverseColors: false,
stops: [0, 100, 100]
}
},
padding: {
right: 0,
left: 0
},
tooltip: {
theme: 'dark',
fillSeriesColor: true
},
legend: {
position: 'right'
}
};
}
}, {
key: 'donut',
value: function donut() {
return {
chart: {
toolbar: {
show: false
}
},
dataLabels: {
formatter: function formatter(val) {
return val.toFixed(1) + '%';
},
style: {
colors: ['#fff']
},
dropShadow: {
enabled: true
}
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1,
gradient: {
shade: 'dark',
shadeIntensity: 0.4,
inverseColors: false,
type: 'vertical',
opacityFrom: 1,
opacityTo: 1,
stops: [70, 98, 100]
}
},
padding: {
right: 0,
left: 0
},
tooltip: {
theme: 'dark',
fillSeriesColor: true
},
legend: {
position: 'right'
}
};
}
}, {
key: 'radar',
value: function radar() {
this.opts.yaxis[0].labels.style.fontSize = '13px';
this.opts.yaxis[0].labels.offsetY = 6;
return {
dataLabels: {
enabled: true,
style: {
colors: ['#a8a8a8'],
fontSize: '11px'
}
},
stroke: {
width: 2
},
markers: {
size: 3,
strokeWidth: 1,
strokeOpacity: 1
},
fill: {
opacity: 0.2
},
tooltip: {
shared: false,
intersect: true,
followCursor: true
},
grid: {
show: false
},
xaxis: {
tooltip: {
enabled: false
},
crosshairs: {
show: false
}
}
};
}
}, {
key: 'radialBar',
value: function radialBar() {
return {
chart: {
animations: {
dynamicAnimation: {
enabled: true,
speed: 800
}
},
toolbar: {
show: false
}
},
fill: {
gradient: {
shade: 'dark',
shadeIntensity: 0.4,
inverseColors: false,
type: 'diagonal2',
opacityFrom: 1,
opacityTo: 1,
stops: [70, 98, 100]
}
},
padding: {
right: 0,
left: 0
},
legend: {
show: false,
position: 'right'
},
tooltip: {
enabled: false,
fillSeriesColor: true
}
};
}
}], [{
key: 'convertCatToNumeric',
value: function convertCatToNumeric(opts) {
opts.xaxis.type = 'numeric';
opts.xaxis.convertedCatToNumeric = true;
opts.xaxis.labels = opts.xaxis.labels || {};
opts.xaxis.labels.formatter = opts.xaxis.labels.formatter || function (val) {
return val;
};
opts.chart = opts.chart || {};
opts.chart.zoom = opts.chart.zoom || window.Apex.chart && window.Apex.chart.zoom || {};
var defaultFormatter = opts.xaxis.labels.formatter;
var labels = opts.xaxis.categories && opts.xaxis.categories.length ? opts.xaxis.categories : opts.labels;
if (labels && labels.length) {
opts.xaxis.labels.formatter = function (val) {
return defaultFormatter(labels[val - 1]);
};
}
opts.xaxis.categories = [];
opts.labels = [];
opts.chart.zoom.enabled = opts.chart.zoom.enabled || false;
return opts;
}
}]);
return Defaults;
}();
exports.default = Defaults;
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Series = __webpack_require__(7);
var _Series2 = _interopRequireDefault(_Series);
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 Tooltip.Position Class to move the tooltip based on x and y position.
*
* @module Tooltip.Position
**/
var Position = function () {
function Position(tooltipContext) {
_classCallCheck(this, Position);
this.ttCtx = tooltipContext;
this.ctx = tooltipContext.ctx;
this.w = tooltipContext.w;
}
/**
* This will move the crosshair (the vertical/horz line that moves along with mouse)
* Along with this, this function also calls the xaxisMove function
* @memberof Position
* @param {int} - cx = point's x position, wherever point's x is, you need to move crosshair
*/
_createClass(Position, [{
key: 'moveXCrosshairs',
value: function moveXCrosshairs(cx) {
var j = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var ttCtx = this.ttCtx;
var w = this.w;
var xcrosshairs = ttCtx.getElXCrosshairs();
var x = cx - ttCtx.xcrosshairsWidth / 2;
var tickAmount = w.globals.labels.slice().length;
if (j !== null) {
x = w.globals.gridWidth / tickAmount * j;
}
if (w.config.xaxis.crosshairs.width === 'tickWidth' || w.config.xaxis.crosshairs.width === 'barWidth') {
if (x + ttCtx.xcrosshairsWidth > w.globals.gridWidth) {
x = w.globals.gridWidth - ttCtx.xcrosshairsWidth;
}
} else {
if (j !== null) {
x = x + w.globals.gridWidth / tickAmount / 2;
}
}
if (x < 0) {
x = 0;
}
if (x > w.globals.gridWidth) {
x = w.globals.gridWidth;
}
if (xcrosshairs !== null) {
xcrosshairs.setAttribute('x', x);
xcrosshairs.setAttribute('x1', x);
xcrosshairs.setAttribute('x2', x);
xcrosshairs.setAttribute('y2', w.globals.gridHeight);
xcrosshairs.classList.add('active');
}
if (ttCtx.blxaxisTooltip) {
var tx = x;
if (w.config.xaxis.crosshairs.width === 'tickWidth' || w.config.xaxis.crosshairs.width === 'barWidth') {
tx = x + ttCtx.xcrosshairsWidth / 2;
}
this.moveXAxisTooltip(tx);
}
}
/**
* This will move the crosshair (the vertical/horz line that moves along with mouse)
* Along with this, this function also calls the xaxisMove function
* @memberof Position
* @param {int} - cx = point's x position, wherever point's x is, you need to move crosshair
*/
}, {
key: 'moveYCrosshairs',
value: function moveYCrosshairs(cy) {
var ttCtx = this.ttCtx;
if (ttCtx.ycrosshairs !== null) {
_Graphics2.default.setAttrs(ttCtx.ycrosshairs, {
y1: cy,
y2: cy
});
_Graphics2.default.setAttrs(ttCtx.ycrosshairsHidden, {
y1: cy,
y2: cy
});
}
}
/**
** AxisTooltip is the small rectangle which appears on x axis with x value, when user moves
* @memberof Position
* @param {int} - cx = point's x position, wherever point's x is, you need to move
*/
}, {
key: 'moveXAxisTooltip',
value: function moveXAxisTooltip(cx) {
var w = this.w;
var ttCtx = this.ttCtx;
if (ttCtx.xaxisTooltip !== null) {
ttCtx.xaxisTooltip.classList.add('active');
var cy = ttCtx.xaxisOffY + w.config.xaxis.tooltip.offsetY + w.globals.translateY + 1 + w.config.xaxis.offsetY;
var xaxisTTText = ttCtx.xaxisTooltip.getBoundingClientRect();
var xaxisTTTextWidth = xaxisTTText.width;
cx = cx - xaxisTTTextWidth / 2;
if (!isNaN(cx)) {
cx = cx + w.globals.translateX;
var textRect = 0;
var graphics = new _Graphics2.default(this.ctx);
textRect = graphics.getTextRects(ttCtx.xaxisTooltipText.innerHTML);
ttCtx.xaxisTooltipText.style.minWidth = textRect.width + 'px';
ttCtx.xaxisTooltip.style.left = cx + 'px';
ttCtx.xaxisTooltip.style.top = cy + 'px';
}
}
}
}, {
key: 'moveYAxisTooltip',
value: function moveYAxisTooltip(index) {
var w = this.w;
var ttCtx = this.ttCtx;
if (ttCtx.yaxisTTEls === null) {
ttCtx.yaxisTTEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-yaxistooltip');
}
var ycrosshairsHiddenRectY1 = parseInt(ttCtx.ycrosshairsHidden.getAttribute('y1'));
var cy = w.globals.translateY + ycrosshairsHiddenRectY1;
var yAxisTTRect = ttCtx.yaxisTTEls[index].getBoundingClientRect();
var yAxisTTHeight = yAxisTTRect.height;
var cx = w.globals.translateYAxisX[index] - 2;
if (w.config.yaxis[index].opposite) {
cx = cx - 26;
}
cy = cy - yAxisTTHeight / 2;
if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
ttCtx.yaxisTTEls[index].classList.add('active');
ttCtx.yaxisTTEls[index].style.top = cy + 'px';
ttCtx.yaxisTTEls[index].style.left = cx + w.config.yaxis[index].tooltip.offsetX + 'px';
} else {
ttCtx.yaxisTTEls[index].classList.remove('active');
}
}
/**
** moves the whole tooltip by changing x, y attrs
* @memberof Position
* @param {int} - cx = point's x position, wherever point's x is, you need to move tooltip
* @param {int} - cy = point's y position, wherever point's y is, you need to move tooltip
* @param {int} - r = point's radius
*/
}, {
key: 'moveTooltip',
value: function moveTooltip(cx, cy) {
var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var w = this.w;
var ttCtx = this.ttCtx;
var tooltipEl = ttCtx.getElTooltip();
var tooltipRect = ttCtx.tooltipRect;
var pointR = r !== null ? parseInt(r) : 1;
var x = parseInt(cx) + pointR + 5;
var y = parseInt(cy) + pointR / 2; // - tooltipRect.ttHeight / 2
if (x > w.globals.gridWidth / 2) {
x = x - tooltipRect.ttWidth - pointR - 15;
}
if (x > w.globals.gridWidth - tooltipRect.ttWidth - 10) {
x = w.globals.gridWidth - tooltipRect.ttWidth;
}
if (x < -20) {
x = -20;
}
if (w.config.tooltip.followCursor) {
var elGrid = ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
y = ttCtx.e.clientY + w.globals.translateY - seriesBound.top - tooltipRect.ttHeight / 2;
}
var newPositions = this.positionChecks(tooltipRect, x, y);
x = newPositions.x;
y = newPositions.y;
if (!isNaN(x)) {
x = x + w.globals.translateX;
tooltipEl.style.left = x + 'px';
tooltipEl.style.top = y + 'px';
}
}
}, {
key: 'positionChecks',
value: function positionChecks(tooltipRect, x, y) {
var w = this.w;
if (tooltipRect.ttHeight + y > w.globals.gridHeight) {
y = w.globals.gridHeight - tooltipRect.ttHeight + w.globals.translateY;
}
if (y < 0) {
y = 0;
}
return {
x: x,
y: y
};
}
}, {
key: 'moveMarkers',
value: function moveMarkers(i, j) {
var w = this.w;
var ttCtx = this.ttCtx;
if (w.globals.markers.size[i] > 0) {
var allPoints = w.globals.dom.baseEl.querySelectorAll(' .apexcharts-series[data\\:realIndex=\'' + i + '\'] .apexcharts-marker');
for (var p = 0; p < allPoints.length; p++) {
if (parseInt(allPoints[p].getAttribute('rel')) === j) {
ttCtx.marker.resetPointsSize();
ttCtx.marker.enlargeCurrentPoint(j, allPoints[p]);
}
}
} else {
ttCtx.marker.resetPointsSize();
this.moveDynamicPointOnHover(j, i);
}
}
// This function is used when you need to show markers/points only on hover -
// DIFFERENT X VALUES in multiple series
}, {
key: 'moveDynamicPointOnHover',
value: function moveDynamicPointOnHover(j, capturedSeries) {
var w = this.w;
var ttCtx = this.ttCtx;
var cx = 0;
var cy = 0;
var pointsArr = w.globals.pointsArray;
var hoverSize = w.config.markers.hover.size;
if (hoverSize === undefined) {
hoverSize = w.globals.markers.size[capturedSeries] + w.config.markers.hover.sizeOffset;
}
cx = pointsArr[capturedSeries][j][0];
cy = pointsArr[capturedSeries][j][1] ? pointsArr[capturedSeries][j][1] : 0;
var point = w.globals.dom.baseEl.querySelector('.apexcharts-series[data\\:realIndex=\'' + capturedSeries + '\'] .apexcharts-series-markers circle');
if (point) {
point.setAttribute('r', hoverSize);
point.setAttribute('cx', cx);
point.setAttribute('cy', cy);
}
// point.style.opacity = w.config.markers.hover.opacity
this.moveXCrosshairs(cx);
if (!ttCtx.fixedTooltip) {
this.moveTooltip(cx, cy, hoverSize);
}
}
// This function is used when you need to show markers/points only on hover -
// SAME X VALUES in multiple series
}, {
key: 'moveDynamicPointsOnHover',
value: function moveDynamicPointsOnHover(j) {
var ttCtx = this.ttCtx;
var w = ttCtx.w;
var cx = 0;
var cy = 0;
var activeSeries = 0;
var pointsArr = w.globals.pointsArray;
var series = new _Series2.default(this.ctx);
activeSeries = series.getActiveSeriesIndex();
var hoverSize = w.config.markers.hover.size;
if (hoverSize === undefined) {
hoverSize = w.globals.markers.size[activeSeries] + w.config.markers.hover.sizeOffset;
}
if (pointsArr[activeSeries]) {
cx = pointsArr[activeSeries][j][0];
cy = pointsArr[activeSeries][j][1];
}
var points = null;
var allPoints = ttCtx.getAllMarkers();
if (allPoints !== null) {
points = allPoints;
} else {
points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series-markers circle');
}
if (points !== null) {
for (var p = 0; p < points.length; p++) {
var pointArr = pointsArr[p];
if (pointArr && pointArr.length) {
var pcy = pointsArr[p][j][1];
points[p].setAttribute('cx', cx);
var realIndex = parseInt(points[p].parentNode.parentNode.parentNode.getAttribute('data:realIndex'));
if (pcy !== null) {
points[realIndex] && points[realIndex].setAttribute('r', hoverSize);
points[realIndex] && points[realIndex].setAttribute('cy', pcy);
} else {
points[realIndex] && points[realIndex].setAttribute('r', 0);
}
}
}
}
this.moveXCrosshairs(cx);
if (!ttCtx.fixedTooltip) {
var tcy = cy || w.globals.gridHeight;
this.moveTooltip(cx, tcy, hoverSize);
}
}
}, {
key: 'moveStickyTooltipOverBars',
value: function moveStickyTooltipOverBars(j) {
var w = this.w;
var ttCtx = this.ttCtx;
var jBar = w.globals.dom.baseEl.querySelector('.apexcharts-bar-series .apexcharts-series[rel=\'1\'] path[j=\'' + j + '\'], .apexcharts-candlestick-series .apexcharts-series[rel=\'1\'] path[j=\'' + j + '\'], .apexcharts-rangebar-series .apexcharts-series[rel=\'1\'] path[j=\'' + j + '\']');
var bcx = jBar ? parseFloat(jBar.getAttribute('cx')) : 0;
var bcy = 0;
var bw = jBar ? parseFloat(jBar.getAttribute('barWidth')) : 0;
if (w.globals.isXNumeric) {
bcx = bcx - bw / 2;
} else {
bcx = ttCtx.xAxisTicksPositions[j - 1] + ttCtx.dataPointsDividedWidth / 2;
if (isNaN(bcx)) {
bcx = ttCtx.xAxisTicksPositions[j] - ttCtx.dataPointsDividedWidth / 2;
}
}
// tooltip will move vertically along with mouse as it is a shared tooltip
var elGrid = ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
bcy = ttCtx.e.clientY - seriesBound.top - ttCtx.tooltipRect.ttHeight / 2;
this.moveXCrosshairs(bcx);
if (!ttCtx.fixedTooltip) {
var tcy = bcy || w.globals.gridHeight;
this.moveTooltip(bcx, tcy);
}
}
}]);
return Position;
}();
exports.default = Position;
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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; }; }(); /**
* ApexCharts Tooltip.Utils Class to support Tooltip functionality.
*
* @module Tooltip.Utils
**/
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Utils = function () {
function Utils(tooltipContext) {
_classCallCheck(this, Utils);
this.w = tooltipContext.w;
this.ttCtx = tooltipContext;
this.ctx = tooltipContext.ctx;
}
/**
** When hovering over series, you need to capture which series is being hovered on.
** This function will return both capturedseries index as well as inner index of that series
* @memberof Utils
* @param {object}
* - hoverArea = the rect on which user hovers
* - elGrid = dimensions of the hover rect (it can be different than hoverarea)
*/
_createClass(Utils, [{
key: 'getNearestValues',
value: function getNearestValues(_ref) {
var hoverArea = _ref.hoverArea,
elGrid = _ref.elGrid,
clientX = _ref.clientX,
clientY = _ref.clientY,
hasBars = _ref.hasBars;
var w = this.w;
var hoverWidth = w.globals.gridWidth;
var xDivisor = hoverWidth / (w.globals.dataPoints - 1);
var seriesBound = elGrid.getBoundingClientRect();
if (hasBars && w.globals.comboCharts || hasBars) {
xDivisor = hoverWidth / w.globals.dataPoints;
}
var hoverX = clientX - seriesBound.left;
var hoverY = clientY - seriesBound.top;
var inRect = hoverX < 0 || hoverY < 0 || hoverX > w.globals.gridWidth || hoverY > w.globals.gridHeight;
if (inRect) {
hoverArea.classList.remove('hovering-zoom');
hoverArea.classList.remove('hovering-pan');
} else {
if (w.globals.zoomEnabled) {
hoverArea.classList.remove('hovering-pan');
hoverArea.classList.add('hovering-zoom');
} else if (w.globals.panEnabled) {
hoverArea.classList.remove('hovering-zoom');
hoverArea.classList.add('hovering-pan');
}
}
var j = Math.round(hoverX / xDivisor);
if (hasBars) {
j = Math.ceil(hoverX / xDivisor);
j = j - 1;
}
var capturedSeries = null;
var closest = null;
var seriesXValArr = [];
var seriesYValArr = [];
for (var s = 0; s < w.globals.seriesXvalues.length; s++) {
seriesXValArr.push([w.globals.seriesXvalues[s][0] - 0.000001].concat(w.globals.seriesXvalues[s]));
}
seriesXValArr = seriesXValArr.map(function (seriesXVal) {
return seriesXVal.filter(function (s) {
return s;
});
});
seriesYValArr = w.globals.seriesYvalues.map(function (seriesYVal) {
return seriesYVal.filter(function (s) {
return s;
});
});
// if X axis type is not category and tooltip is not shared, then we need to find the cursor position and get the nearest value
if (w.globals.isXNumeric) {
closest = this.closestInMultiArray(hoverX, hoverY, seriesXValArr, seriesYValArr);
capturedSeries = closest.index;
j = closest.j;
if (capturedSeries !== null) {
// initial push, it should be a little smaller than the 1st val
seriesXValArr = w.globals.seriesXvalues[capturedSeries];
closest = this.closestInArray(hoverX, seriesXValArr);
j = closest.index;
}
}
if (!j || j < 1) j = 0;
return {
capturedSeries: capturedSeries,
j: j,
hoverX: hoverX,
hoverY: hoverY
};
}
}, {
key: 'closestInMultiArray',
value: function closestInMultiArray(hoverX, hoverY, Xarrays, Yarrays) {
var w = this.w;
var activeIndex = 0;
var currIndex = null;
var j = -1;
if (w.globals.series.length > 1) {
activeIndex = this.getFirstActiveXArray(Xarrays);
} else {
currIndex = 0;
}
var currY = Yarrays[activeIndex][0];
var currX = Xarrays[activeIndex][0];
var diffX = Math.abs(hoverX - currX);
var diffY = Math.abs(hoverY - currY);
var diff = diffY + diffX;
Yarrays.map(function (arrY, arrIndex) {
arrY.map(function (y, innerKey) {
var newdiffY = Math.abs(hoverY - Yarrays[arrIndex][innerKey]);
var newdiffX = Math.abs(hoverX - Xarrays[arrIndex][innerKey]);
var newdiff = newdiffX + newdiffY;
if (newdiff < diff) {
diff = newdiff;
diffX = newdiffX;
diffY = newdiffY;
currIndex = arrIndex;
j = innerKey;
}
});
});
return {
index: currIndex,
j: j
};
}
}, {
key: 'getFirstActiveXArray',
value: function getFirstActiveXArray(Xarrays) {
var activeIndex = 0;
var coreUtils = new _CoreUtils2.default(this.ctx);
var firstActiveSeriesIndex = Xarrays.map(function (xarr, index) {
if (xarr.length > 0) {
return index;
} else {
return -1;
}
});
for (var a = 0; a < firstActiveSeriesIndex.length; a++) {
var total = coreUtils.getSeriesTotalByIndex(a);
if (firstActiveSeriesIndex[a] !== -1 && total !== 0 && !coreUtils.seriesHaveSameValues(a)) {
activeIndex = firstActiveSeriesIndex[a];
break;
}
}
return activeIndex;
}
}, {
key: 'closestInArray',
value: function closestInArray(val, arr) {
var curr = arr[0];
var currIndex = null;
var diff = Math.abs(val - curr);
for (var i = 0; i < arr.length; i++) {
var newdiff = Math.abs(val - arr[i]);
if (newdiff < diff) {
diff = newdiff;
curr = arr[i];
currIndex = i;
}
}
return {
index: currIndex
};
}
/**
* When there are multiple series, it is possible to have different x values for each series.
* But it may be possible in those multiple series, that there is same x value for 2 or more
* series.
* @memberof Utils
* @param {int}
* - j = is the inner index of series -> (series[i][j])
* @return {bool}
*/
}, {
key: 'isXoverlap',
value: function isXoverlap(j) {
var w = this.w;
var xSameForAllSeriesJArr = [];
var seriesX = w.globals.seriesX.filter(function (s) {
return typeof s[0] !== 'undefined';
});
if (seriesX.length > 0) {
for (var i = 0; i < seriesX.length - 1; i++) {
if (typeof seriesX[i][j] !== 'undefined' && typeof seriesX[i + 1][j] !== 'undefined') {
if (seriesX[i][j] !== seriesX[i + 1][j]) {
xSameForAllSeriesJArr.push('unEqual');
}
}
}
}
if (xSameForAllSeriesJArr.length === 0) {
return true;
}
return false;
}
}, {
key: 'isinitialSeriesSameLen',
value: function isinitialSeriesSameLen() {
var sameLen = true;
var initialSeries = this.w.globals.initialSeries;
for (var i = 0; i < initialSeries.length - 1; i++) {
if (initialSeries[i].data.length !== initialSeries[i + 1].data.length) {
sameLen = false;
break;
}
}
return sameLen;
}
}, {
key: 'getBarsHeight',
value: function getBarsHeight(allbars) {
var bars = [].concat(_toConsumableArray(allbars));
var totalHeight = bars.reduce(function (acc, bar) {
return acc + bar.getBBox().height;
}, 0);
return totalHeight;
}
}, {
key: 'toggleAllTooltipSeriesGroups',
value: function toggleAllTooltipSeriesGroups(state) {
var w = this.w;
var ttCtx = this.ttCtx;
if (ttCtx.allTooltipSeriesGroups.length === 0) {
ttCtx.allTooltipSeriesGroups = w.globals.dom.baseEl.querySelectorAll('.apexcharts-tooltip-series-group');
}
var allTooltipSeriesGroups = ttCtx.allTooltipSeriesGroups;
for (var i = 0; i < allTooltipSeriesGroups.length; i++) {
if (state === 'enable') {
allTooltipSeriesGroups[i].classList.add('active');
allTooltipSeriesGroups[i].style.display = w.config.tooltip.items.display;
} else {
allTooltipSeriesGroups[i].classList.remove('active');
allTooltipSeriesGroups[i].style.display = 'none';
}
}
}
}]);
return Utils;
}();
exports.default = Utils;
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(setImmediate) {
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 _finally = __webpack_require__(57);
var _finally2 = _interopRequireDefault(_finally);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Store setTimeout reference so promise-polyfill will be unaffected by
// other code modifying setTimeout (like sinon.useFakeTimers())
var setTimeoutFunc = setTimeout;
function noop() {}
// Polyfill for Function.prototype.bind
function bind(fn, thisArg) {
return function () {
fn.apply(thisArg, arguments);
};
}
/**
* @constructor
* @param {Function} fn
*/
function Promise(fn) {
if (!(this instanceof Promise)) throw new TypeError('Promises must be constructed via new');
if (typeof fn !== 'function') throw new TypeError('not a function');
/** @type {!number} */
this._state = 0;
/** @type {!boolean} */
this._handled = false;
/** @type {Promise|undefined} */
this._value = undefined;
/** @type {!Array} */
this._deferreds = [];
doResolve(fn, this);
}
function handle(self, deferred) {
while (self._state === 3) {
self = self._value;
}
if (self._state === 0) {
self._deferreds.push(deferred);
return;
}
self._handled = true;
Promise._immediateFn(function () {
var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
if (cb === null) {
(self._state === 1 ? resolve : reject)(deferred.promise, self._value);
return;
}
var ret;
try {
ret = cb(self._value);
} catch (e) {
reject(deferred.promise, e);
return;
}
resolve(deferred.promise, ret);
});
}
function resolve(self, newValue) {
try {
// Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
if (newValue === self) throw new TypeError('A promise cannot be resolved with itself.');
if (newValue && ((typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) === 'object' || typeof newValue === 'function')) {
var then = newValue.then;
if (newValue instanceof Promise) {
self._state = 3;
self._value = newValue;
finale(self);
return;
} else if (typeof then === 'function') {
doResolve(bind(then, newValue), self);
return;
}
}
self._state = 1;
self._value = newValue;
finale(self);
} catch (e) {
reject(self, e);
}
}
function reject(self, newValue) {
self._state = 2;
self._value = newValue;
finale(self);
}
function finale(self) {
if (self._state === 2 && self._deferreds.length === 0) {
Promise._immediateFn(function () {
if (!self._handled) {
Promise._unhandledRejectionFn(self._value);
}
});
}
for (var i = 0, len = self._deferreds.length; i < len; i++) {
handle(self, self._deferreds[i]);
}
self._deferreds = null;
}
/**
* @constructor
*/
function Handler(onFulfilled, onRejected, promise) {
this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
this.onRejected = typeof onRejected === 'function' ? onRejected : null;
this.promise = promise;
}
/**
* Take a potentially misbehaving resolver function and make sure
* onFulfilled and onRejected are only called once.
*
* Makes no guarantees about asynchrony.
*/
function doResolve(fn, self) {
var done = false;
try {
fn(function (value) {
if (done) return;
done = true;
resolve(self, value);
}, function (reason) {
if (done) return;
done = true;
reject(self, reason);
});
} catch (ex) {
if (done) return;
done = true;
reject(self, ex);
}
}
Promise.prototype['catch'] = function (onRejected) {
return this.then(null, onRejected);
};
Promise.prototype.then = function (onFulfilled, onRejected) {
// @ts-ignore
var prom = new this.constructor(noop);
handle(this, new Handler(onFulfilled, onRejected, prom));
return prom;
};
Promise.prototype['finally'] = _finally2.default;
Promise.all = function (arr) {
return new Promise(function (resolve, reject) {
if (!arr || typeof arr.length === 'undefined') throw new TypeError('Promise.all accepts an array');
var args = Array.prototype.slice.call(arr);
if (args.length === 0) return resolve([]);
var remaining = args.length;
function res(i, val) {
try {
if (val && ((typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object' || typeof val === 'function')) {
var then = val.then;
if (typeof then === 'function') {
then.call(val, function (val) {
res(i, val);
}, reject);
return;
}
}
args[i] = val;
if (--remaining === 0) {
resolve(args);
}
} catch (ex) {
reject(ex);
}
}
for (var i = 0; i < args.length; i++) {
res(i, args[i]);
}
});
};
Promise.resolve = function (value) {
if (value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value.constructor === Promise) {
return value;
}
return new Promise(function (resolve) {
resolve(value);
});
};
Promise.reject = function (value) {
return new Promise(function (resolve, reject) {
reject(value);
});
};
Promise.race = function (values) {
return new Promise(function (resolve, reject) {
for (var i = 0, len = values.length; i < len; i++) {
values[i].then(resolve, reject);
}
});
};
// Use polyfill for setImmediate for performance gains
Promise._immediateFn = typeof setImmediate === 'function' && function (fn) {
setImmediate(fn);
} || function (fn) {
setTimeoutFunc(fn, 0);
};
Promise._unhandledRejectionFn = function _unhandledRejectionFn(err) {
if (typeof console !== 'undefined' && console) {
console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console
}
};
exports.default = Promise;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(65).setImmediate))
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
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 g;
// This works in non-strict mode
g = function () {
return this;
}();
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1, eval)("this");
} catch (e) {
// This works if the window reference is available
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/* 30 */
/***/ (function(module, exports) {
module.exports = {"name":"en","options":{"months":["January","February","March","April","May","June","July","August","September","October","November","December"],"shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"days":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"shortDays":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"toolbar":{"exportToSVG":"Download SVG","exportToPNG":"Download PNG","menu":"Menu","selection":"Selection","selectionZoom":"Selection Zoom","zoomIn":"Zoom In","zoomOut":"Zoom Out","pan":"Panning","reset":"Reset Zoom"}}}
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _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 _Annotations = __webpack_require__(40);
var _Annotations2 = _interopRequireDefault(_Annotations);
var _Animations = __webpack_require__(5);
var _Animations2 = _interopRequireDefault(_Animations);
var _Base = __webpack_require__(41);
var _Base2 = _interopRequireDefault(_Base);
var _Config = __webpack_require__(17);
var _Config2 = _interopRequireDefault(_Config);
var _Core = __webpack_require__(42);
var _Core2 = _interopRequireDefault(_Core);
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Crosshairs = __webpack_require__(20);
var _Crosshairs2 = _interopRequireDefault(_Crosshairs);
var _Defaults = __webpack_require__(25);
var _Defaults2 = _interopRequireDefault(_Defaults);
var _Dimensions = __webpack_require__(13);
var _Dimensions2 = _interopRequireDefault(_Dimensions);
var _Formatters = __webpack_require__(10);
var _Formatters2 = _interopRequireDefault(_Formatters);
var _Exports = __webpack_require__(21);
var _Exports2 = _interopRequireDefault(_Exports);
var _Grid = __webpack_require__(49);
var _Grid2 = _interopRequireDefault(_Grid);
var _Legend = __webpack_require__(43);
var _Legend2 = _interopRequireDefault(_Legend);
var _Markers = __webpack_require__(6);
var _Markers2 = _interopRequireDefault(_Markers);
var _Range = __webpack_require__(22);
var _Range2 = _interopRequireDefault(_Range);
var _Responsive = __webpack_require__(44);
var _Responsive2 = _interopRequireDefault(_Responsive);
var _Series = __webpack_require__(7);
var _Series2 = _interopRequireDefault(_Series);
var _Theme = __webpack_require__(45);
var _Theme2 = _interopRequireDefault(_Theme);
var _Tooltip = __webpack_require__(55);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _ZoomPanSelection = __webpack_require__(48);
var _ZoomPanSelection2 = _interopRequireDefault(_ZoomPanSelection);
var _TitleSubtitle = __webpack_require__(47);
var _TitleSubtitle2 = _interopRequireDefault(_TitleSubtitle);
var _Toolbar = __webpack_require__(23);
var _Toolbar2 = _interopRequireDefault(_Toolbar);
var _Options = __webpack_require__(18);
var _Options2 = _interopRequireDefault(_Options);
var _promisePolyfill = __webpack_require__(28);
var _promisePolyfill2 = _interopRequireDefault(_promisePolyfill);
__webpack_require__(66);
__webpack_require__(61);
__webpack_require__(62);
__webpack_require__(60);
__webpack_require__(64);
__webpack_require__(63);
__webpack_require__(70);
__webpack_require__(67);
__webpack_require__(68);
var _en = __webpack_require__(30);
var _en2 = _interopRequireDefault(_en);
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"); } }
// global Apex object which user can use to override chart's defaults globally
window.Apex = {};
/**
*
* @module ApexCharts
**/
var ApexCharts = function () {
function ApexCharts(el, opts) {
_classCallCheck(this, ApexCharts);
this.opts = opts;
this.ctx = this;
// Pass the user supplied options to the Base Class where these options will be extended with defaults. The returned object from Base Class will become the config object in the entire codebase.
this.w = new _Base2.default(opts).init();
this.el = el;
this.w.globals.cuid = (Math.random() + 1).toString(36).substring(4);
this.w.globals.chartID = this.w.config.chart.id ? this.w.config.chart.id : this.w.globals.cuid;
this.initModules();
this.create = _Utils2.default.bind(this.create, this);
this.windowResizeHandler = this.windowResize.bind(this);
}
/**
* The primary method user will call to render the chart.
*/
_createClass(ApexCharts, [{
key: 'render',
value: function render() {
var _this = this;
// main method
return new _promisePolyfill2.default(function (resolve, reject) {
// only draw chart, if element found
if (_this.el !== null) {
if (typeof Apex._chartInstances === 'undefined') {
Apex._chartInstances = [];
}
if (_this.w.config.chart.id) {
Apex._chartInstances.push({
id: _this.w.globals.chartID,
group: _this.w.config.chart.group,
chart: _this
});
}
// set the locale here
_this.setLocale(_this.w.config.chart.defaultLocale);
var beforeMount = _this.w.config.chart.events.beforeMount;
if (typeof beforeMount === 'function') {
beforeMount(_this, _this.w);
}
_this.fireEvent('beforeMount', [_this, _this.w]);
window.addEventListener('resize', _this.windowResizeHandler);
window.addResizeListener(_this.el.parentNode, _this.parentResizeCallback.bind(_this));
var graphData = _this.create(_this.w.config.series, {});
if (!graphData) return resolve(_this);
_this.mount(graphData).then(function () {
resolve(graphData);
if (typeof _this.w.config.chart.events.mounted === 'function') {
_this.w.config.chart.events.mounted(_this, _this.w);
}
_this.fireEvent('mounted', [_this, _this.w]);
}).catch(function (e) {
reject(e);
// handle error in case no data or element not found
});
} else {
reject(new Error('Element not found'));
}
});
}
}, {
key: 'initModules',
value: function initModules() {
this.animations = new _Animations2.default(this);
this.core = new _Core2.default(this.el, this);
this.grid = new _Grid2.default(this);
this.coreUtils = new _CoreUtils2.default(this);
this.config = new _Config2.default({});
this.crosshairs = new _Crosshairs2.default(this);
this.options = new _Options2.default();
this.responsive = new _Responsive2.default(this);
this.series = new _Series2.default(this);
this.theme = new _Theme2.default(this);
this.formatters = new _Formatters2.default(this);
this.titleSubtitle = new _TitleSubtitle2.default(this);
this.legend = new _Legend2.default(this);
this.toolbar = new _Toolbar2.default(this);
this.dimensions = new _Dimensions2.default(this);
this.zoomPanSelection = new _ZoomPanSelection2.default(this);
this.w.globals.tooltip = new _Tooltip2.default(this);
}
}, {
key: 'addEventListener',
value: function addEventListener(name, handler) {
var w = this.w;
if (w.globals.events.hasOwnProperty(name)) {
w.globals.events[name].push(handler);
} else {
w.globals.events[name] = [handler];
}
}
}, {
key: 'removeEventListener',
value: function removeEventListener(name, handler) {
var w = this.w;
if (!w.globals.events.hasOwnProperty(name)) {
return;
}
var index = w.globals.events[name].indexOf(handler);
if (index !== -1) {
w.globals.events[name].splice(index, 1);
}
}
}, {
key: 'fireEvent',
value: function fireEvent(name, args) {
var w = this.w;
if (!w.globals.events.hasOwnProperty(name)) {
return;
}
if (!args || !args.length) {
args = [];
}
var evs = w.globals.events[name];
var l = evs.length;
for (var i = 0; i < l; i++) {
evs[i].apply(null, args);
}
}
}, {
key: 'create',
value: function create(ser, opts) {
var w = this.w;
this.initModules();
var gl = this.w.globals;
gl.noData = false;
gl.animationEnded = false;
this.responsive.checkResponsiveConfig(opts);
if (this.el === null) {
gl.animationEnded = true;
return null;
}
this.core.setupElements();
if (gl.svgWidth === 0) {
// if the element is hidden, skip drawing
gl.animationEnded = true;
return null;
}
var combo = _CoreUtils2.default.checkComboSeries(ser);
gl.comboCharts = combo.comboCharts;
gl.comboChartsHasBars = combo.comboChartsHasBars;
if (ser.length === 0 || ser.length === 1 && ser[0].data && ser[0].data.length === 0) {
this.series.handleNoData();
}
this.setupEventHandlers();
// Handle the data inputted by user and set some of the global variables (for eg, if data is datetime / numeric / category). Don't calculate the range / min / max at this time
this.core.parseData(ser);
// this is a good time to set theme colors first
this.theme.init();
// as markers accepts array, we need to setup global markers for easier access
var markers = new _Markers2.default(this);
markers.setGlobalMarkerSize();
// labelFormatters should be called before dimensions as in dimensions we need text labels width
this.formatters.setLabelFormatters();
this.titleSubtitle.draw();
// legend is calculated here before coreCalculations because it affects the plottable area
this.legend.init();
// check whether in multiple series, all series share the same X
this.series.hasAllSeriesEqualX();
// coreCalculations will give the min/max range and yaxis/axis values. It should be called here to set series variable from config to globals
if (gl.axisCharts) {
this.core.coreCalculations();
if (w.config.xaxis.type !== 'category') {
// as we have minX and maxX values, determine the default DateTimeFormat for time series
this.formatters.setLabelFormatters();
}
}
// we need to generate yaxis for heatmap separately as we are not showing numerics there, but seriesNames. There are some tweaks which are required for heatmap to align labels correctly which are done in below function
// Also we need to do this before calcuting Dimentions plotCoords() method of Dimensions
this.formatters.heatmapLabelFormatters();
// We got plottable area here, next task would be to calculate axis areas
this.dimensions.plotCoords();
var xyRatios = this.core.xySettings();
this.grid.createGridMask();
var elGraph = this.core.plotChartType(ser, xyRatios);
// after all the drawing calculations, shift the graphical area (actual charts/bars) excluding legends
this.core.shiftGraphPosition();
var dim = {
plot: {
left: w.globals.translateX,
top: w.globals.translateY,
width: w.globals.gridWidth,
height: w.globals.gridHeight
}
};
return {
elGraph: elGraph,
xyRatios: xyRatios,
elInner: w.globals.dom.elGraphical,
dimensions: dim
};
}
}, {
key: 'mount',
value: function mount() {
var graphData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var me = this;
var w = me.w;
return new _promisePolyfill2.default(function (resolve, reject) {
// no data to display
if (me.el === null) {
return reject(new Error('Not enough data to display or target element not found'));
} else if (graphData === null || w.globals.allSeriesCollapsed) {
me.series.handleNoData();
}
me.annotations = new _Annotations2.default(me);
me.core.drawAxis(w.config.chart.type, graphData.xyRatios);
me.grid = new _Grid2.default(me);
if (w.config.grid.position === 'back') {
me.grid.drawGrid();
}
if (w.config.annotations.position === 'back') {
me.annotations.drawAnnotations();
}
if (graphData.elGraph instanceof Array) {
for (var g = 0; g < graphData.elGraph.length; g++) {
w.globals.dom.elGraphical.add(graphData.elGraph[g]);
}
} else {
w.globals.dom.elGraphical.add(graphData.elGraph);
}
if (w.config.grid.position === 'front') {
me.grid.drawGrid();
}
if (w.config.xaxis.crosshairs.position === 'front') {
me.crosshairs.drawXCrosshairs();
}
if (w.config.yaxis[0].crosshairs.position === 'front') {
me.crosshairs.drawYCrosshairs();
}
if (w.config.annotations.position === 'front') {
me.annotations.drawAnnotations();
}
if (!w.globals.noData) {
// draw tooltips at the end
if (w.config.tooltip.enabled && !w.globals.noData) {
me.w.globals.tooltip.drawTooltip(graphData.xyRatios);
}
if (w.globals.axisCharts && w.globals.isXNumeric) {
if (w.config.chart.zoom.enabled || w.config.chart.selection && w.config.chart.selection.enabled || w.config.chart.pan && w.config.chart.pan.enabled) {
me.zoomPanSelection.init({
xyRatios: graphData.xyRatios
});
}
} else {
var tools = w.config.chart.toolbar.tools;
tools.zoom = false;
tools.zoomin = false;
tools.zoomout = false;
tools.selection = false;
tools.pan = false;
tools.reset = false;
}
if (w.config.chart.toolbar.show && !w.globals.allSeriesCollapsed) {
me.toolbar.createToolbar();
}
}
if (w.globals.memory.methodsToExec.length > 0) {
w.globals.memory.methodsToExec.forEach(function (fn) {
fn.method(fn.params, false, fn.context);
});
}
resolve(me);
});
}
}, {
key: 'clearPreviousPaths',
value: function clearPreviousPaths() {
var w = this.w;
w.globals.previousPaths = [];
w.globals.allSeriesCollapsed = false;
w.globals.collapsedSeries = [];
w.globals.collapsedSeriesIndices = [];
}
/**
* Allows users to update Options after the chart has rendered.
*
* @param {object} options - A new config object can be passed which will be merged with the existing config object
* @param {boolean} redraw - should redraw from beginning or should use existing paths and redraw from there
* @param {boolean} animate - should animate or not on updating Options
*/
}, {
key: 'updateOptions',
value: function updateOptions(options) {
var redraw = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var animate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var overwriteInitialConfig = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var w = this.w;
if (options.series) {
if (options.series[0].data) {
options.series = options.series.map(function (s, i) {
return _extends({}, w.config.series[i], {
name: s.name ? s.name : w.config.series[i] && w.config.series[i].name,
type: s.type ? s.type : w.config.series[i] && w.config.series[i].type,
data: s.data ? s.data : w.config.series[i] && w.config.series[i].data
});
});
}
// user updated the series via updateOptions() function.
// Hence, we need to reset axis min/max to avoid zooming issues
this.revertDefaultAxisMinMax();
}
// user has set x-axis min/max externally - hence we need to forcefully set the xaxis min/max
if (options.xaxis) {
if (options.xaxis.min || options.xaxis.max) {
this.forceXAxisUpdate(options);
}
/* fixes apexcharts.js#369 and react-apexcharts#46 */
if (options.xaxis.categories && options.xaxis.categories.length && w.config.xaxis.convertedCatToNumeric) {
options = _Defaults2.default.convertCatToNumeric(options);
}
}
if (w.globals.collapsedSeriesIndices.length > 0) {
this.clearPreviousPaths();
}
/* update theme mode#459 */
if (options.theme) {
options = this.theme.updateThemeOptions(options);
}
return this._updateOptions(options, redraw, animate, overwriteInitialConfig);
}
/**
* private method to update Options.
*
* @param {object} options - A new config object can be passed which will be merged with the existing config object
* @param {boolean} redraw - should redraw from beginning or should use existing paths and redraw from there
* @param {boolean} animate - should animate or not on updating Options
* @param {boolean} overwriteInitialConfig - should update the initial config or not
*/
}, {
key: '_updateOptions',
value: function _updateOptions(options) {
var redraw = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var animate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var overwriteInitialConfig = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var charts = this.getSyncedCharts();
charts.forEach(function (ch) {
var w = ch.w;
w.globals.shouldAnimate = animate;
if (!redraw) {
w.globals.resized = true;
w.globals.dataChanged = true;
if (animate) {
ch.series.getPreviousPaths();
}
}
if (options && (typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
ch.config = new _Config2.default(options);
options = _CoreUtils2.default.extendArrayProps(ch.config, options);
w.config = _Utils2.default.extend(w.config, options);
if (overwriteInitialConfig) {
// we need to forget the lastXAxis and lastYAxis is user forcefully overwriteInitialConfig. If we do not do this, and next time when user zooms the chart after setting yaxis.min/max or xaxis.min/max - the stored lastXAxis will never allow the chart to use the updated min/max by user.
w.globals.lastXAxis = [];
w.globals.lastYAxis = [];
// After forgetting lastAxes, we need to restore the new config in initialConfig/initialSeries
w.globals.initialConfig = _Utils2.default.extend({}, w.config);
w.globals.initialSeries = JSON.parse(JSON.stringify(w.config.series));
}
}
return ch.update(options);
});
}
/**
* Allows users to update Series after the chart has rendered.
*
* @param {array} series - New series which will override the existing
*/
}, {
key: 'updateSeries',
value: function updateSeries() {
var newSeries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var overwriteInitialSeries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
this.revertDefaultAxisMinMax();
return this._updateSeries(newSeries, animate, overwriteInitialSeries);
}
/**
* Allows users to append a new series after the chart has rendered.
*
* @param {array} newSerie - New serie which will be appended to the existing series
*/
}, {
key: 'appendSeries',
value: function appendSeries(newSerie) {
var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var overwriteInitialSeries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var newSeries = this.w.config.series.slice();
newSeries.push(newSerie);
this.revertDefaultAxisMinMax();
return this._updateSeries(newSeries, animate, overwriteInitialSeries);
}
/**
* Private method to update Series.
*
* @param {array} series - New series which will override the existing
*/
}, {
key: '_updateSeries',
value: function _updateSeries(newSeries, animate) {
var overwriteInitialSeries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var w = this.w;
this.w.globals.shouldAnimate = animate;
w.globals.dataChanged = true;
// if user has collapsed some series with legend, we need to clear those
if (w.globals.allSeriesCollapsed) {
w.globals.allSeriesCollapsed = false;
}
if (animate) {
this.series.getPreviousPaths();
}
var existingSeries = void 0;
// axis charts
if (w.globals.axisCharts) {
existingSeries = newSeries.map(function (s, i) {
return _extends({}, w.config.series[i], {
name: s.name ? s.name : w.config.series[i] && w.config.series[i].name,
type: s.type ? s.type : w.config.series[i] && w.config.series[i].type,
data: s.data ? s.data : w.config.series[i] && w.config.series[i].data
});
});
if (existingSeries.length === 0) {
existingSeries = [{ data: [] }];
}
w.config.series = existingSeries;
} else {
// non-axis chart (pie/radialbar)
w.config.series = newSeries.slice();
}
if (overwriteInitialSeries) {
w.globals.initialConfig.series = JSON.parse(JSON.stringify(w.config.series));
w.globals.initialSeries = JSON.parse(JSON.stringify(w.config.series));
}
return this.update();
}
/**
* Get all charts in the same "group" (including the instance which is called upon) to sync them when user zooms in/out or pan.
*/
}, {
key: 'getSyncedCharts',
value: function getSyncedCharts() {
var chartGroups = this.getGroupedCharts();
var allCharts = [this];
if (chartGroups.length) {
allCharts = [];
chartGroups.forEach(function (ch) {
allCharts.push(ch);
});
}
return allCharts;
}
/**
* Get charts in the same "group" (excluding the instance which is called upon) to perform operations on the other charts of the same group (eg., tooltip hovering)
*/
}, {
key: 'getGroupedCharts',
value: function getGroupedCharts() {
var _this2 = this;
return Apex._chartInstances.filter(function (ch) {
if (ch.group) {
return true;
}
}).map(function (ch) {
return _this2.w.config.chart.group === ch.group ? ch.chart : _this2;
});
}
/**
* Allows users to append Data to series.
*
* @param {array} newData - New data in the same format as series
*/
}, {
key: 'appendData',
value: function appendData(newData) {
var overwriteInitialSeries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var me = this;
me.w.globals.dataChanged = true;
me.series.getPreviousPaths();
var newSeries = me.w.config.series.slice();
for (var i = 0; i < newSeries.length; i++) {
if (typeof newData[i] !== 'undefined') {
for (var j = 0; j < newData[i].data.length; j++) {
newSeries[i].data.push(newData[i].data[j]);
}
}
}
me.w.config.series = newSeries;
if (overwriteInitialSeries) {
me.w.globals.initialSeries = JSON.parse(JSON.stringify(me.w.config.series));
}
return this.update();
}
}, {
key: 'update',
value: function update(options) {
var _this3 = this;
return new _promisePolyfill2.default(function (resolve, reject) {
_this3.clear();
var graphData = _this3.create(_this3.w.config.series, options);
if (!graphData) return resolve(_this3);
_this3.mount(graphData).then(function () {
if (typeof _this3.w.config.chart.events.updated === 'function') {
_this3.w.config.chart.events.updated(_this3, _this3.w);
}
_this3.fireEvent('updated', [_this3, _this3.w]);
_this3.w.globals.isDirty = true;
resolve(_this3);
}).catch(function (e) {
reject(e);
});
});
}
}, {
key: 'forceXAxisUpdate',
value: function forceXAxisUpdate(options) {
var w = this.w;
if (typeof options.xaxis.min !== 'undefined') {
w.config.xaxis.min = options.xaxis.min;
w.globals.lastXAxis.min = options.xaxis.min;
}
if (typeof options.xaxis.max !== 'undefined') {
w.config.xaxis.max = options.xaxis.max;
w.globals.lastXAxis.max = options.xaxis.max;
}
}
/**
* This function reverts the yaxis and xaxis min/max values to what it was when the chart was defined.
* This function fixes an important bug where a user might load a new series after zooming in/out of previous series which resulted in wrong min/max
* Also, this should never be called internally on zoom/pan - the reset should only happen when user calls the updateSeries() function externally
*/
}, {
key: 'revertDefaultAxisMinMax',
value: function revertDefaultAxisMinMax() {
var w = this.w;
w.config.xaxis.min = w.globals.lastXAxis.min;
w.config.xaxis.max = w.globals.lastXAxis.max;
w.config.yaxis.map(function (yaxe, index) {
if (w.globals.zoomed) {
// if user has zoomed, and this function is called
// then we need to get the lastAxis min and max
if (typeof w.globals.lastYAxis[index] !== 'undefined') {
yaxe.min = w.globals.lastYAxis[index].min;
yaxe.max = w.globals.lastYAxis[index].max;
}
}
});
}
}, {
key: 'clear',
value: function clear() {
if (this.zoomPanSelection) {
this.zoomPanSelection.destroy();
}
if (this.toolbar) {
this.toolbar.destroy();
}
this.animations = null;
this.annotations = null;
this.core = null;
this.grid = null;
this.series = null;
this.responsive = null;
this.theme = null;
this.formatters = null;
this.titleSubtitle = null;
this.legend = null;
this.dimensions = null;
this.options = null;
this.crosshairs = null;
this.zoomPanSelection = null;
this.toolbar = null;
this.w.globals.tooltip = null;
this.clearDomElements();
}
}, {
key: 'killSVG',
value: function killSVG(draw) {
return new _promisePolyfill2.default(function (resolve, reject) {
draw.each(function (i, children) {
this.removeClass('*');
this.off();
this.stop();
}, true);
draw.ungroup();
draw.clear();
resolve('done');
});
}
}, {
key: 'clearDomElements',
value: function clearDomElements() {
var domEls = this.w.globals.dom;
if (this.el !== null) {
// remove all child elements - resetting the whole chart
while (this.el.firstChild) {
this.el.removeChild(this.el.firstChild);
}
}
this.killSVG(domEls.Paper);
domEls.Paper.remove();
domEls.elWrap = null;
domEls.elGraphical = null;
domEls.elLegendWrap = null;
domEls.baseEl = null;
domEls.elGridRect = null;
domEls.elGridRectMask = null;
domEls.elGridRectMarkerMask = null;
domEls.elDefs = null;
}
/**
* Destroy the chart instance by removing all elements which also clean up event listeners on those elements.
*/
}, {
key: 'destroy',
value: function destroy() {
this.clear();
// remove the chart's instance from the global Apex._chartInstances
var chartID = this.w.config.chart.id;
if (chartID) {
Apex._chartInstances.forEach(function (c, i) {
if (c.id === chartID) {
Apex._chartInstances.splice(i, 1);
}
});
}
window.removeEventListener('resize', this.windowResizeHandler);
window.removeResizeListener(this.el.parentNode, this.parentResizeCallback.bind(this));
}
/**
* Allows the user to provide data attrs in the element and the chart will render automatically when this method is called by searching for the elements containing 'data-apexcharts' attribute
*/
}, {
key: 'toggleSeries',
value: function toggleSeries(seriesName) {
var targetElement = this.series.getSeriesByName(seriesName);
var seriesCnt = parseInt(targetElement.getAttribute('data:realIndex'));
var isHidden = targetElement.classList.contains('apexcharts-series-collapsed');
this.legend.toggleDataSeries(seriesCnt, isHidden);
}
}, {
key: 'resetToggleSeries',
value: function resetToggleSeries() {
this.legend.resetToggleDataSeries();
}
}, {
key: 'setupEventHandlers',
value: function setupEventHandlers() {
var w = this.w;
var me = this;
var clickableArea = w.globals.dom.baseEl.querySelector(w.globals.chartClass);
var eventList = ['mousedown', 'mousemove', 'touchstart', 'touchmove', 'mouseup', 'touchend'];
eventList.forEach(function (event) {
clickableArea.addEventListener(event, function (e) {
if (e.type === 'mousedown' && e.which === 1) {
// todo - provide a mousedown event too
} else if (e.type === 'mouseup' && e.which === 1 || e.type === 'touchend') {
if (typeof w.config.chart.events.click === 'function') {
w.config.chart.events.click(e, me, w);
}
me.fireEvent('click', [e, me, w]);
}
}, { capture: false, passive: true });
});
eventList.forEach(function (event) {
document.addEventListener(event, function (e) {
w.globals.clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
w.globals.clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
});
});
this.core.setupBrushHandler();
}
}, {
key: 'addXaxisAnnotation',
value: function addXaxisAnnotation(opts) {
var pushToMemory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
var me = this;
if (context) {
me = context;
}
me.annotations.addXaxisAnnotationExternal(opts, pushToMemory, me);
}
}, {
key: 'addYaxisAnnotation',
value: function addYaxisAnnotation(opts) {
var pushToMemory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
var me = this;
if (context) {
me = context;
}
me.annotations.addYaxisAnnotationExternal(opts, pushToMemory, me);
}
}, {
key: 'addPointAnnotation',
value: function addPointAnnotation(opts) {
var pushToMemory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
var me = this;
if (context) {
me = context;
}
me.annotations.addPointAnnotationExternal(opts, pushToMemory, me);
}
}, {
key: 'clearAnnotations',
value: function clearAnnotations() {
var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
var me = this;
if (context) {
me = context;
}
me.annotations.clearAnnotations(me);
}
// This method is never used internally and will be only called externally on the chart instance.
// Hence, we need to keep all these elements in memory when the chart gets updated and redraw again
}, {
key: 'addText',
value: function addText(options) {
var pushToMemory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
var me = this;
if (context) {
me = context;
}
me.annotations.addText(options, pushToMemory, me);
}
}, {
key: 'getChartArea',
value: function getChartArea() {
var el = this.w.globals.dom.baseEl.querySelector('.apexcharts-inner');
return el;
}
}, {
key: 'getSeriesTotalXRange',
value: function getSeriesTotalXRange(minX, maxX) {
return this.coreUtils.getSeriesTotalsXRange(minX, maxX);
}
}, {
key: 'getHighestValueInSeries',
value: function getHighestValueInSeries() {
var seriesIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var range = new _Range2.default(this.ctx);
var minYmaxY = range.getMinYMaxY(seriesIndex);
return minYmaxY.highestY;
}
}, {
key: 'getLowestValueInSeries',
value: function getLowestValueInSeries() {
var seriesIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var range = new _Range2.default(this.ctx);
var minYmaxY = range.getMinYMaxY(seriesIndex);
return minYmaxY.lowestY;
}
}, {
key: 'getSeriesTotal',
value: function getSeriesTotal() {
return this.w.globals.seriesTotals;
}
}, {
key: 'setLocale',
value: function setLocale(localeName) {
this.setCurrentLocaleValues(localeName);
}
}, {
key: 'setCurrentLocaleValues',
value: function setCurrentLocaleValues(localeName) {
var locales = this.w.config.chart.locales;
// check if user has specified locales in global Apex variable
// if yes - then extend those with local chart's locale
if (window.Apex.chart && window.Apex.chart.locales && window.Apex.chart.locales.length > 0) {
locales = this.w.config.chart.locales.concat(window.Apex.chart.locales);
}
// find the locale from the array of locales which user has set (either by chart.defaultLocale or by calling setLocale() method.)
var selectedLocale = locales.filter(function (c) {
return c.name === localeName;
})[0];
if (selectedLocale) {
// create a complete locale object by extending defaults so you don't get undefined errors.
var ret = _Utils2.default.extend(_en2.default, selectedLocale);
// store these locale options in global var for ease access
this.w.globals.locale = ret.options;
} else {
throw new Error('Wrong locale name provided. Please make sure you set the correct locale name in options');
}
}
}, {
key: 'dataURI',
value: function dataURI() {
var exp = new _Exports2.default(this.ctx);
return exp.dataURI();
}
}, {
key: 'paper',
value: function paper() {
return this.w.globals.dom.Paper;
}
}, {
key: 'parentResizeCallback',
value: function parentResizeCallback() {
if (this.w.globals.animationEnded) {
this.windowResize();
}
}
/**
* Handle window resize and re-draw the whole chart.
*/
}, {
key: 'windowResize',
value: function windowResize() {
var _this4 = this;
clearTimeout(this.w.globals.resizeTimer);
this.w.globals.resizeTimer = window.setTimeout(function () {
_this4.w.globals.resized = true;
_this4.w.globals.dataChanged = false;
// we need to redraw the whole chart on window resize (with a small delay).
_this4.update();
}, 150);
}
}], [{
key: 'initOnLoad',
value: function initOnLoad() {
var els = document.querySelectorAll('[data-apexcharts]');
for (var i = 0; i < els.length; i++) {
var el = els[i];
var options = JSON.parse(els[i].getAttribute('data-options'));
var apexChart = new ApexCharts(el, options);
apexChart.render();
}
}
/**
* This static method allows users to call chart methods without necessarily from the
* instance of the chart in case user has assigned chartID to the targetted chart.
* The chartID is used for mapping the instance stored in Apex._chartInstances global variable
*
* This is helpful in cases when you don't have reference of the chart instance
* easily and need to call the method from anywhere.
* For eg, in React/Vue applications when you have many parent/child components,
* and need easy reference to other charts for performing dynamic operations
*
* @param {string} chartID - The unique identifier which will be used to call methods
* on that chart instance
* @param {function} fn - The method name to call
* @param {object} opts - The parameters which are accepted in the original method will be passed here in the same order.
*/
}, {
key: 'exec',
value: function exec(chartID, fn) {
var chart = this.getChartByID(chartID);
if (!chart) return;
for (var _len = arguments.length, opts = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
opts[_key - 2] = arguments[_key];
}
switch (fn) {
case 'updateOptions':
{
return chart.updateOptions.apply(chart, opts);
}
case 'updateSeries':
{
return chart.updateSeries.apply(chart, opts);
}
case 'appendData':
{
return chart.appendData.apply(chart, opts);
}
case 'appendSeries':
{
return chart.appendSeries.apply(chart, opts);
}
case 'toggleSeries':
{
return chart.toggleSeries.apply(chart, opts);
}
case 'dataURI':
{
return chart.dataURI.apply(chart, opts);
}
case 'addXaxisAnnotation':
{
return chart.addXaxisAnnotation.apply(chart, opts);
}
case 'addYaxisAnnotation':
{
return chart.addYaxisAnnotation.apply(chart, opts);
}
case 'addPointAnnotation':
{
return chart.addPointAnnotation.apply(chart, opts);
}
case 'addText':
{
return chart.addText.apply(chart, opts);
}
case 'clearAnnotations':
{
return chart.clearAnnotations.apply(chart, opts);
}
case 'paper':
{
return chart.paper.apply(chart, opts);
}
case 'destroy':
{
return chart.destroy();
}
}
}
}, {
key: 'merge',
value: function merge(target, source) {
return _Utils2.default.extend(target, source);
}
}, {
key: 'getChartByID',
value: function getChartByID(chartID) {
var c = Apex._chartInstances.filter(function (ch) {
return ch.id === chartID;
})[0];
return c.chart;
}
}]);
return ApexCharts;
}();
exports.default = ApexCharts;
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function (useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string") modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number") alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/* 33 */
/***/ (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; }; }();
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Bar2 = __webpack_require__(8);
var _Bar3 = _interopRequireDefault(_Bar2);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* ApexCharts BarStacked Class responsible for drawing both Stacked Columns and Bars.
*
* @module BarStacked
* The whole calculation for stacked bar/column is different from normal bar/column,
* hence it makes sense to derive a new class for it extending most of the props of Parent Bar
**/
var BarStacked = function (_Bar) {
_inherits(BarStacked, _Bar);
function BarStacked() {
_classCallCheck(this, BarStacked);
return _possibleConstructorReturn(this, (BarStacked.__proto__ || Object.getPrototypeOf(BarStacked)).apply(this, arguments));
}
_createClass(BarStacked, [{
key: 'draw',
value: function draw(series, seriesIndex) {
var w = this.w;
this.graphics = new _Graphics2.default(this.ctx);
this.fill = new _Fill2.default(this.ctx);
this.bar = new _Bar3.default(this.ctx, this.xyRatios);
var coreUtils = new _CoreUtils2.default(this.ctx, w);
series = coreUtils.getLogSeries(series);
this.yRatio = coreUtils.getLogYRatios(this.yRatio);
this.initVariables(series);
if (w.config.chart.stackType === '100%') {
series = w.globals.seriesPercent.slice();
}
this.series = series;
this.totalItems = 0;
this.prevY = []; // y position on chart
this.prevX = []; // x position on chart
this.prevYF = []; // y position including shapes on chart
this.prevXF = []; // x position including shapes on chart
this.prevYVal = []; // y values (series[i][j]) in columns
this.prevXVal = []; // x values (series[i][j]) in bars
this.xArrj = []; // xj indicates x position on graph in bars
this.xArrjF = []; // xjF indicates bar's x position + endingshape's positions in bars
this.xArrjVal = []; // x val means the actual series's y values in horizontal/bars
this.yArrj = []; // yj indicates y position on graph in columns
this.yArrjF = []; // yjF indicates bar's y position + endingshape's positions in columns
this.yArrjVal = []; // y val means the actual series's y values in columns
for (var sl = 0; sl < series.length; sl++) {
if (series[sl].length > 0) {
this.totalItems += series[sl].length;
}
}
var ret = this.graphics.group({
class: 'apexcharts-bar-series apexcharts-plot-series'
});
var x = 0;
var y = 0;
for (var i = 0, bc = 0; i < series.length; i++, bc++) {
var pathTo = void 0,
pathFrom = void 0;
var xDivision = void 0; // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
var yDivision = void 0; // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
var zeroH = void 0; // zeroH is the baseline where 0 meets y axis
var zeroW = void 0; // zeroW is the baseline where 0 meets x axis
var xArrValues = [];
var yArrValues = [];
var realIndex = w.globals.comboCharts ? seriesIndex[i] : i;
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex;
}
this.isReversed = w.config.yaxis[this.yaxisIndex] && w.config.yaxis[this.yaxisIndex].reversed;
// el to which series will be drawn
var elSeries = this.graphics.group({
class: 'apexcharts-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[realIndex]),
rel: i + 1,
'data:realIndex': realIndex
});
// eldatalabels
var elDataLabelsWrap = this.graphics.group({
class: 'apexcharts-datalabels'
});
var strokeWidth = 0;
var barHeight = 0;
var barWidth = 0;
var initPositions = this.initialPositions(x, y, xDivision, yDivision, zeroH, zeroW);
y = initPositions.y;
barHeight = initPositions.barHeight;
yDivision = initPositions.yDivision;
zeroW = initPositions.zeroW;
x = initPositions.x;
barWidth = initPositions.barWidth;
xDivision = initPositions.xDivision;
zeroH = initPositions.zeroH;
this.yArrj = [];
this.yArrjF = [];
this.yArrjVal = [];
this.xArrj = [];
this.xArrjF = [];
this.xArrjVal = [];
// if (!this.horizontal) {
// this.xArrj.push(x + barWidth / 2)
// }
for (var j = 0; j < w.globals.dataPoints; j++) {
if (w.config.stroke.show) {
if (this.isNullValue) {
strokeWidth = 0;
} else {
strokeWidth = Array.isArray(this.strokeWidth) ? this.strokeWidth[realIndex] : this.strokeWidth;
}
}
var paths = null;
if (this.isHorizontal) {
paths = this.drawBarPaths({
indexes: { i: i, j: j, realIndex: realIndex, bc: bc },
barHeight: barHeight,
strokeWidth: strokeWidth,
pathTo: pathTo,
pathFrom: pathFrom,
zeroW: zeroW,
x: x,
y: y,
yDivision: yDivision,
elSeries: elSeries
});
barWidth = this.series[i][j] / this.invertedYRatio;
} else {
paths = this.drawColumnPaths({
indexes: { i: i, j: j, realIndex: realIndex, bc: bc },
x: x,
y: y,
xDivision: xDivision,
pathTo: pathTo,
pathFrom: pathFrom,
barWidth: barWidth,
zeroH: zeroH,
strokeWidth: strokeWidth,
elSeries: elSeries
});
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex];
}
pathTo = paths.pathTo;
pathFrom = paths.pathFrom;
y = paths.y;
x = paths.x;
xArrValues.push(x);
yArrValues.push(y);
var pathFill = this.bar.getPathFillColor(series, i, j, realIndex);
elSeries = this.renderSeries({
realIndex: realIndex,
pathFill: pathFill,
j: j,
i: i,
pathFrom: pathFrom,
pathTo: pathTo,
strokeWidth: strokeWidth,
elSeries: elSeries,
x: x,
y: y,
series: series,
barHeight: barHeight,
barWidth: barWidth,
elDataLabelsWrap: elDataLabelsWrap,
type: 'bar',
visibleSeries: 0
});
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrValues;
w.globals.seriesYvalues[realIndex] = yArrValues;
// push all current y values array to main PrevY Array
this.prevY.push(this.yArrj);
this.prevYF.push(this.yArrjF);
this.prevYVal.push(this.yArrjVal);
this.prevX.push(this.xArrj);
this.prevXF.push(this.xArrjF);
this.prevXVal.push(this.xArrjVal);
ret.add(elSeries);
}
return ret;
}
}, {
key: 'initialPositions',
value: function initialPositions(x, y, xDivision, yDivision, zeroH, zeroW) {
var w = this.w;
var barHeight = void 0,
barWidth = void 0;
if (this.isHorizontal) {
// height divided into equal parts
yDivision = w.globals.gridHeight / w.globals.dataPoints;
barHeight = yDivision;
barHeight = barHeight * parseInt(w.config.plotOptions.bar.barHeight) / 100;
zeroW = this.baseLineInvertedY + w.globals.padHorizontal + (this.isReversed ? w.globals.gridWidth : 0) - (this.isReversed ? this.baseLineInvertedY * 2 : 0);
// initial y position is half of barHeight * half of number of Bars
y = (yDivision - barHeight) / 2;
} else {
// width divided into equal parts
xDivision = w.globals.gridWidth / w.globals.dataPoints;
barWidth = xDivision;
if (w.globals.isXNumeric) {
xDivision = w.globals.minXDiff / this.xRatio;
barWidth = xDivision * parseInt(this.barOptions.columnWidth) / 100;
} else {
barWidth = barWidth * parseInt(w.config.plotOptions.bar.columnWidth) / 100;
}
zeroH = this.baseLineY[this.yaxisIndex] + (this.isReversed ? w.globals.gridHeight : 0) - (this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0);
// initial x position is one third of barWidth
x = w.globals.padHorizontal + (xDivision - barWidth) / 2;
}
return {
x: x,
y: y,
yDivision: yDivision,
xDivision: xDivision,
barHeight: barHeight,
barWidth: barWidth,
zeroH: zeroH,
zeroW: zeroW
};
}
}, {
key: 'drawBarPaths',
value: function drawBarPaths(_ref) {
var indexes = _ref.indexes,
barHeight = _ref.barHeight,
strokeWidth = _ref.strokeWidth,
pathTo = _ref.pathTo,
pathFrom = _ref.pathFrom,
zeroW = _ref.zeroW,
x = _ref.x,
y = _ref.y,
yDivision = _ref.yDivision,
elSeries = _ref.elSeries;
var w = this.w;
var barYPosition = y;
var barXPosition = void 0;
var i = indexes.i;
var j = indexes.j;
var realIndex = indexes.realIndex;
var bc = indexes.bc;
var prevBarW = 0;
for (var k = 0; k < this.prevXF.length; k++) {
prevBarW = prevBarW + this.prevXF[k][j];
}
if (i > 0) {
var bXP = zeroW;
if (this.prevXVal[i - 1][j] < 0) {
if (this.series[i][j] >= 0) {
bXP = this.prevX[i - 1][j] + prevBarW - (this.isReversed ? prevBarW : 0) * 2;
} else {
bXP = this.prevX[i - 1][j];
}
} else if (this.prevXVal[i - 1][j] >= 0) {
if (this.series[i][j] >= 0) {
bXP = this.prevX[i - 1][j];
} else {
bXP = this.prevX[i - 1][j] - prevBarW + (this.isReversed ? prevBarW : 0) * 2;
}
}
barXPosition = bXP;
} else {
// the first series will not have prevX values
barXPosition = zeroW;
}
if (this.series[i][j] === null) {
x = barXPosition;
} else {
x = barXPosition + this.series[i][j] / this.invertedYRatio - (this.isReversed ? this.series[i][j] / this.invertedYRatio : 0) * 2;
}
var endingShapeOpts = {
barHeight: barHeight,
strokeWidth: strokeWidth,
invertedYRatio: this.invertedYRatio,
barYPosition: barYPosition,
x: x
};
var endingShape = this.bar.barEndingShape(w, endingShapeOpts, this.series, i, j);
if (this.series.length > 1 && i !== this.endingShapeOnSeriesNumber) {
// revert back to flat shape if not last series
endingShape.path = this.graphics.line(endingShape.newX, barYPosition + barHeight - strokeWidth);
}
this.xArrj.push(endingShape.newX);
this.xArrjF.push(Math.abs(barXPosition - endingShape.newX));
this.xArrjVal.push(this.series[i][j]);
pathTo = this.graphics.move(barXPosition, barYPosition);
pathFrom = this.graphics.move(barXPosition, barYPosition);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.bar.getPathFrom(realIndex, j, false);
}
pathTo = pathTo + this.graphics.line(endingShape.newX, barYPosition) + endingShape.path + this.graphics.line(barXPosition, barYPosition + barHeight - strokeWidth) + this.graphics.line(barXPosition, barYPosition);
pathFrom = pathFrom + this.graphics.line(barXPosition, barYPosition) + this.graphics.line(barXPosition, barYPosition + barHeight - strokeWidth) + this.graphics.line(barXPosition, barYPosition + barHeight - strokeWidth) + this.graphics.line(barXPosition, barYPosition + barHeight - strokeWidth) + this.graphics.line(barXPosition, barYPosition);
if (w.config.plotOptions.bar.colors.backgroundBarColors.length > 0 && i === 0) {
if (bc >= w.config.plotOptions.bar.colors.backgroundBarColors.length) {
bc = 0;
}
var bcolor = w.config.plotOptions.bar.colors.backgroundBarColors[bc];
var rect = this.graphics.drawRect(0, barYPosition, w.globals.gridWidth, barHeight, 0, bcolor, w.config.plotOptions.bar.colors.backgroundBarOpacity);
elSeries.add(rect);
rect.node.classList.add('apexcharts-backgroundBar');
}
y = y + yDivision;
return {
pathTo: pathTo,
pathFrom: pathFrom,
x: x,
y: y
};
}
}, {
key: 'drawColumnPaths',
value: function drawColumnPaths(_ref2) {
var indexes = _ref2.indexes,
x = _ref2.x,
y = _ref2.y,
xDivision = _ref2.xDivision,
pathTo = _ref2.pathTo,
pathFrom = _ref2.pathFrom,
barWidth = _ref2.barWidth,
zeroH = _ref2.zeroH,
strokeWidth = _ref2.strokeWidth,
elSeries = _ref2.elSeries;
var w = this.w;
var i = indexes.i;
var j = indexes.j;
var realIndex = indexes.realIndex;
var bc = indexes.bc;
if (w.globals.isXNumeric) {
var seriesVal = w.globals.seriesX[i][j];
if (!seriesVal) seriesVal = 0;
x = (seriesVal - w.globals.minX) / this.xRatio - barWidth / 2;
}
var barXPosition = x;
var barYPosition = void 0;
var prevBarH = 0;
for (var k = 0; k < this.prevYF.length; k++) {
prevBarH = prevBarH + this.prevYF[k][j];
}
if (i > 0 && !w.globals.isXNumeric || i > 0 && w.globals.isXNumeric && w.globals.seriesX[i - 1][j] === w.globals.seriesX[i][j]) {
var bYP = void 0;
var prevYValue = this.prevY[i - 1][j];
if (this.prevYVal[i - 1][j] < 0) {
if (this.series[i][j] >= 0) {
bYP = prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2;
} else {
bYP = prevYValue;
}
} else {
if (this.series[i][j] >= 0) {
bYP = prevYValue;
} else {
bYP = prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2;
}
}
barYPosition = bYP;
} else {
// the first series will not have prevY values, also if the prev index's series X doesn't matches the current index's series X, then start from zero
barYPosition = w.globals.gridHeight - zeroH;
}
y = barYPosition - this.series[i][j] / this.yRatio[this.yaxisIndex] + (this.isReversed ? this.series[i][j] / this.yRatio[this.yaxisIndex] : 0) * 2;
var endingShapeOpts = {
barWidth: barWidth,
strokeWidth: strokeWidth,
yRatio: this.yRatio[this.yaxisIndex],
barXPosition: barXPosition,
y: y
};
var endingShape = this.bar.barEndingShape(w, endingShapeOpts, this.series, i, j);
this.yArrj.push(endingShape.newY);
this.yArrjF.push(Math.abs(barYPosition - endingShape.newY));
this.yArrjVal.push(this.series[i][j]);
pathTo = this.graphics.move(barXPosition, barYPosition);
pathFrom = this.graphics.move(barXPosition, barYPosition);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.bar.getPathFrom(realIndex, j, false);
}
pathTo = pathTo + this.graphics.line(barXPosition, endingShape.newY) + endingShape.path + this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) + this.graphics.line(barXPosition - strokeWidth / 2, barYPosition);
pathFrom = pathFrom + this.graphics.line(barXPosition, barYPosition) + this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) + this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) + this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) + this.graphics.line(barXPosition - strokeWidth / 2, barYPosition);
if (w.config.plotOptions.bar.colors.backgroundBarColors.length > 0 && i === 0) {
if (bc >= w.config.plotOptions.bar.colors.backgroundBarColors.length) {
bc = 0;
}
var bcolor = w.config.plotOptions.bar.colors.backgroundBarColors[bc];
var rect = this.graphics.drawRect(barXPosition, 0, barWidth, w.globals.gridHeight, 0, bcolor, w.config.plotOptions.bar.colors.backgroundBarOpacity);
elSeries.add(rect);
rect.node.classList.add('apexcharts-backgroundBar');
}
x = x + xDivision;
return {
pathTo: pathTo,
pathFrom: pathFrom,
x: w.globals.isXNumeric ? x - xDivision : x,
y: y
};
}
/*
* When user clicks on legends, the collapsed series will be filled with [0,0,0,...,0]
* We need to make sure, that the last series is not [0,0,0,...,0]
* as we need to draw shapes on the last series (for stacked bars/columns only)
* Hence, we are collecting all inner arrays in series which has [0,0,0...,0]
**/
}, {
key: 'checkZeroSeries',
value: function checkZeroSeries(_ref3) {
var series = _ref3.series;
var w = this.w;
for (var zs = 0; zs < series.length; zs++) {
var total = 0;
for (var zsj = 0; zsj < series[w.globals.maxValsInArrayIndex].length; zsj++) {
total += series[zs][zsj];
}
if (total === 0) {
this.zeroSerieses.push(zs);
}
}
// After getting all zeroserieses, we need to ensure whether endingshapeonSeries is not in that zeroseries array
for (var s = series.length - 1; s >= 0; s--) {
if (this.zeroSerieses.indexOf(s) > -1 && s === this.endingShapeOnSeriesNumber) {
this.endingShapeOnSeriesNumber -= 1;
}
}
}
}]);
return BarStacked;
}(_Bar3.default);
exports.default = BarStacked;
/***/ }),
/* 34 */
/***/ (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; }; }();
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Bar2 = __webpack_require__(8);
var _Bar3 = _interopRequireDefault(_Bar2);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* ApexCharts CandleStick Class responsible for drawing both Stacked Columns and Bars.
*
* @module CandleStick
**/
var CandleStick = function (_Bar) {
_inherits(CandleStick, _Bar);
function CandleStick() {
_classCallCheck(this, CandleStick);
return _possibleConstructorReturn(this, (CandleStick.__proto__ || Object.getPrototypeOf(CandleStick)).apply(this, arguments));
}
_createClass(CandleStick, [{
key: 'draw',
value: function draw(series, seriesIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
this.candlestickOptions = this.w.config.plotOptions.candlestick;
var coreUtils = new _CoreUtils2.default(this.ctx, w);
series = coreUtils.getLogSeries(series);
this.series = series;
this.yRatio = coreUtils.getLogYRatios(this.yRatio);
this.initVariables(series);
var ret = graphics.group({
class: 'apexcharts-candlestick-series apexcharts-plot-series'
});
for (var i = 0, bc = 0; i < series.length; i++, bc++) {
var pathTo = void 0,
pathFrom = void 0;
var x = void 0,
y = void 0,
xDivision = void 0,
// xDivision is the GRIDWIDTH divided by number of datapoints (columns)
zeroH = void 0; // zeroH is the baseline where 0 meets y axis
var yArrj = []; // hold y values of current iterating series
var xArrj = []; // hold x values of current iterating series
var realIndex = w.globals.comboCharts ? seriesIndex[i] : i;
// el to which series will be drawn
var elSeries = graphics.group({
class: 'apexcharts-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[realIndex]),
rel: i + 1,
'data:realIndex': realIndex
});
if (series[i].length > 0) {
this.visibleI = this.visibleI + 1;
}
var strokeWidth = 0;
var barHeight = 0;
var barWidth = 0;
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex;
}
var initPositions = this.initialPositions();
y = initPositions.y;
barHeight = initPositions.barHeight;
x = initPositions.x;
barWidth = initPositions.barWidth;
xDivision = initPositions.xDivision;
zeroH = initPositions.zeroH;
xArrj.push(x + barWidth / 2);
// eldatalabels
var elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels'
});
for (var j = 0, tj = w.globals.dataPoints; j < w.globals.dataPoints; j++, tj--) {
if (typeof this.series[i][j] === 'undefined' || series[i][j] === null) {
this.isNullValue = true;
} else {
this.isNullValue = false;
}
if (w.config.stroke.show) {
if (this.isNullValue) {
strokeWidth = 0;
} else {
strokeWidth = Array.isArray(this.strokeWidth) ? this.strokeWidth[realIndex] : this.strokeWidth;
}
}
var color = void 0;
var paths = this.drawCandleStickPaths({
indexes: {
i: i,
j: j,
realIndex: realIndex,
bc: bc
},
x: x,
y: y,
xDivision: xDivision,
pathTo: pathTo,
pathFrom: pathFrom,
barWidth: barWidth,
zeroH: zeroH,
strokeWidth: strokeWidth,
elSeries: elSeries
});
pathTo = paths.pathTo;
pathFrom = paths.pathFrom;
y = paths.y;
x = paths.x;
color = paths.color;
// push current X
if (j > 0) {
xArrj.push(x + barWidth / 2);
}
yArrj.push(y);
var pathFill = fill.fillPath({
seriesNumber: realIndex,
color: color,
value: series[i][j]
});
var lineFill = this.candlestickOptions.wick.useFillColor ? color : undefined;
elSeries = this.renderSeries({
realIndex: realIndex,
pathFill: pathFill,
lineFill: lineFill,
j: j,
i: i,
pathFrom: pathFrom,
pathTo: pathTo,
strokeWidth: strokeWidth,
elSeries: elSeries,
x: x,
y: y,
series: series,
barHeight: barHeight,
barWidth: barWidth,
elDataLabelsWrap: elDataLabelsWrap,
visibleSeries: this.visibleI,
type: 'candlestick'
});
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrj;
w.globals.seriesYvalues[realIndex] = yArrj;
ret.add(elSeries);
}
return ret;
}
}, {
key: 'drawCandleStickPaths',
value: function drawCandleStickPaths(_ref) {
var indexes = _ref.indexes,
x = _ref.x,
y = _ref.y,
xDivision = _ref.xDivision,
pathTo = _ref.pathTo,
pathFrom = _ref.pathFrom,
barWidth = _ref.barWidth,
zeroH = _ref.zeroH,
strokeWidth = _ref.strokeWidth;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var i = indexes.i;
var j = indexes.j;
var isPositive = true;
var colorPos = w.config.plotOptions.candlestick.colors.upward;
var colorNeg = w.config.plotOptions.candlestick.colors.downward;
var yRatio = this.yRatio[this.yaxisIndex];
var realIndex = indexes.realIndex;
var ohlc = this.getOHLCValue(realIndex, j);
var l1 = zeroH;
var l2 = zeroH;
if (ohlc.o > ohlc.c) {
isPositive = false;
}
var y1 = Math.min(ohlc.o, ohlc.c);
var y2 = Math.max(ohlc.o, ohlc.c);
if (w.globals.isXNumeric) {
x = (w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2;
}
var barXPosition = x + barWidth * this.visibleI;
if (typeof this.series[i][j] === 'undefined' || this.series[i][j] === null) {
y1 = zeroH;
} else {
y1 = zeroH - y1 / yRatio;
y2 = zeroH - y2 / yRatio;
l1 = zeroH - ohlc.h / yRatio;
l2 = zeroH - ohlc.l / yRatio;
}
pathTo = graphics.move(barXPosition, zeroH);
pathFrom = graphics.move(barXPosition, y1);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPathFrom(realIndex, j, true);
}
pathTo = graphics.move(barXPosition, y2) + graphics.line(barXPosition + barWidth / 2, y2) + graphics.line(barXPosition + barWidth / 2, l1) + graphics.line(barXPosition + barWidth / 2, y2) + graphics.line(barXPosition + barWidth, y2) + graphics.line(barXPosition + barWidth, y1) + graphics.line(barXPosition + barWidth / 2, y1) + graphics.line(barXPosition + barWidth / 2, l2) + graphics.line(barXPosition + barWidth / 2, y1) + graphics.line(barXPosition, y1) + graphics.line(barXPosition, y2 - strokeWidth / 2);
pathFrom = pathFrom + graphics.move(barXPosition, y1);
if (!w.globals.isXNumeric) {
x = x + xDivision;
}
return {
pathTo: pathTo,
pathFrom: pathFrom,
x: x,
y: y2,
barXPosition: barXPosition,
color: isPositive ? colorPos : colorNeg
};
}
}, {
key: 'getOHLCValue',
value: function getOHLCValue(i, j) {
var w = this.w;
return {
o: w.globals.seriesCandleO[i][j],
h: w.globals.seriesCandleH[i][j],
l: w.globals.seriesCandleL[i][j],
c: w.globals.seriesCandleC[i][j]
};
}
}]);
return CandleStick;
}(_Bar3.default);
exports.default = CandleStick;
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _DataLabels = __webpack_require__(9);
var _DataLabels2 = _interopRequireDefault(_DataLabels);
var _Animations = __webpack_require__(5);
var _Animations2 = _interopRequireDefault(_Animations);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* ApexCharts HeatMap Class.
* @module HeatMap
**/
var HeatMap = function () {
function HeatMap(ctx, xyRatios) {
_classCallCheck(this, HeatMap);
this.ctx = ctx;
this.w = ctx.w;
this.xRatio = xyRatios.xRatio;
this.yRatio = xyRatios.yRatio;
this.negRange = false;
this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation;
this.rectRadius = this.w.config.plotOptions.heatmap.radius;
this.strokeWidth = this.w.config.stroke.width;
}
_createClass(HeatMap, [{
key: 'draw',
value: function draw(series) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var ret = graphics.group({
class: 'apexcharts-heatmap'
});
ret.attr('clip-path', 'url(#gridRectMask' + w.globals.cuid + ')');
// width divided into equal parts
var xDivision = w.globals.gridWidth / w.globals.dataPoints;
var yDivision = w.globals.gridHeight / w.globals.series.length;
var y1 = 0;
var rev = false;
this.checkColorRange();
var heatSeries = series.slice();
if (w.config.yaxis[0].reversed) {
rev = true;
heatSeries.reverse();
}
for (var i = rev ? 0 : heatSeries.length - 1; rev ? i < heatSeries.length : i >= 0; rev ? i++ : i--) {
// el to which series will be drawn
var elSeries = graphics.group({
class: 'apexcharts-series apexcharts-heatmap-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[i]),
rel: i + 1,
'data:realIndex': i
});
if (w.config.chart.dropShadow.enabled) {
var shadow = w.config.chart.dropShadow;
var filters = new _Filters2.default(this.ctx);
filters.dropShadow(elSeries, shadow, i);
}
var x1 = 0;
for (var j = 0; j < heatSeries[i].length; j++) {
var colorShadePercent = 1;
var heatColorProps = this.determineHeatColor(i, j);
if (w.globals.hasNegs || this.negRange) {
var shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity;
if (w.config.plotOptions.heatmap.reverseNegativeShade) {
if (heatColorProps.percent < 0) {
colorShadePercent = heatColorProps.percent / 100 * (shadeIntensity * 1.25);
} else {
colorShadePercent = (1 - heatColorProps.percent / 100) * (shadeIntensity * 1.25);
}
} else {
if (heatColorProps.percent < 0) {
colorShadePercent = 1 - (1 + heatColorProps.percent / 100) * shadeIntensity;
} else {
colorShadePercent = (1 - heatColorProps.percent / 100) * shadeIntensity;
}
}
} else {
colorShadePercent = 1 - heatColorProps.percent / 100;
}
var color = heatColorProps.color;
if (w.config.plotOptions.heatmap.enableShades) {
var utils = new _Utils2.default();
color = _Utils2.default.hexToRgba(utils.shadeColor(colorShadePercent, heatColorProps.color), w.config.fill.opacity);
}
var radius = this.rectRadius;
var rect = graphics.drawRect(x1, y1, xDivision, yDivision, radius);
rect.attr({
cx: x1,
cy: y1
});
rect.node.classList.add('apexcharts-heatmap-rect');
elSeries.add(rect);
rect.attr({
fill: color,
i: i,
index: i,
j: j,
val: heatSeries[i][j],
'stroke-width': this.strokeWidth,
stroke: w.globals.stroke.colors[0],
color: color
});
rect.node.addEventListener('mouseenter', graphics.pathMouseEnter.bind(this, rect));
rect.node.addEventListener('mouseleave', graphics.pathMouseLeave.bind(this, rect));
rect.node.addEventListener('mousedown', graphics.pathMouseDown.bind(this, rect));
if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
var speed = 1;
if (!w.globals.resized) {
speed = w.config.chart.animations.speed;
}
this.animateHeatMap(rect, x1, y1, xDivision, yDivision, speed);
}
if (w.globals.dataChanged) {
var _speed = 1;
if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
_speed = this.dynamicAnim.speed;
var colorFrom = w.globals.previousPaths[i] && w.globals.previousPaths[i][j] && w.globals.previousPaths[i][j].color;
if (!colorFrom) colorFrom = 'rgba(255, 255, 255, 0)';
this.animateHeatColor(rect, _Utils2.default.isColorHex(colorFrom) ? colorFrom : _Utils2.default.rgb2hex(colorFrom), _Utils2.default.isColorHex(color) ? color : _Utils2.default.rgb2hex(color), _speed);
}
}
var dataLabels = this.calculateHeatmapDataLabels({
x: x1,
y: y1,
i: i,
j: j,
series: heatSeries,
rectHeight: yDivision,
rectWidth: xDivision
});
if (dataLabels !== null) {
elSeries.add(dataLabels);
}
x1 = x1 + xDivision;
}
y1 = y1 + yDivision;
ret.add(elSeries);
}
// adjust yaxis labels for heatmap
var yAxisScale = w.globals.yAxisScale[0].result.slice();
if (w.config.yaxis[0].reversed) {
yAxisScale.unshift('');
} else {
yAxisScale.push('');
}
w.globals.yAxisScale[0].result = yAxisScale;
var divisor = w.globals.gridHeight / w.globals.series.length;
w.config.yaxis[0].labels.offsetY = -(divisor / 2);
return ret;
}
}, {
key: 'checkColorRange',
value: function checkColorRange() {
var _this = this;
var w = this.w;
var heatmap = w.config.plotOptions.heatmap;
if (heatmap.colorScale.ranges.length > 0) {
heatmap.colorScale.ranges.map(function (range, index) {
if (range.from < 0) {
_this.negRange = true;
}
});
}
}
}, {
key: 'determineHeatColor',
value: function determineHeatColor(i, j) {
var w = this.w;
var val = w.globals.series[i][j];
var heatmap = w.config.plotOptions.heatmap;
var seriesNumber = heatmap.colorScale.inverse ? j : i;
var color = w.globals.colors[seriesNumber];
var min = Math.min.apply(Math, _toConsumableArray(w.globals.series[i]));
var max = Math.max.apply(Math, _toConsumableArray(w.globals.series[i]));
if (!heatmap.distributed) {
min = w.globals.minY;
max = w.globals.maxY;
}
if (typeof heatmap.colorScale.min !== 'undefined') {
min = heatmap.colorScale.min < w.globals.minY ? heatmap.colorScale.min : w.globals.minY;
max = heatmap.colorScale.max > w.globals.maxY ? heatmap.colorScale.max : w.globals.maxY;
}
var total = Math.abs(max) + Math.abs(min);
var percent = 100 * val / (total === 0 ? total - 0.000001 : total);
if (heatmap.colorScale.ranges.length > 0) {
var colorRange = heatmap.colorScale.ranges;
colorRange.map(function (range, index) {
if (val >= range.from && val <= range.to) {
color = range.color;
min = range.from;
max = range.to;
var _total = Math.abs(max) + Math.abs(min);
percent = 100 * val / (_total === 0 ? _total - 0.000001 : _total);
}
});
}
return {
color: color,
percent: percent
};
}
}, {
key: 'calculateHeatmapDataLabels',
value: function calculateHeatmapDataLabels(_ref) {
var x = _ref.x,
y = _ref.y,
i = _ref.i,
j = _ref.j,
series = _ref.series,
rectHeight = _ref.rectHeight,
rectWidth = _ref.rectWidth;
var w = this.w;
// let graphics = new Graphics(this.ctx)
var dataLabelsConfig = w.config.dataLabels;
var graphics = new _Graphics2.default(this.ctx);
var dataLabels = new _DataLabels2.default(this.ctx);
var formatter = dataLabelsConfig.formatter;
var elDataLabelsWrap = null;
if (dataLabelsConfig.enabled) {
elDataLabelsWrap = graphics.group({
class: 'apexcharts-data-labels'
});
var offX = dataLabelsConfig.offsetX;
var offY = dataLabelsConfig.offsetY;
var dataLabelsX = x + rectWidth / 2 + offX;
var dataLabelsY = y + rectHeight / 2 + parseInt(dataLabelsConfig.style.fontSize) / 3 + offY;
var text = formatter(w.globals.series[i][j], {
seriesIndex: i,
dataPointIndex: j,
w: w
});
dataLabels.plotDataLabelsText({
x: dataLabelsX,
y: dataLabelsY,
text: text,
i: i,
j: j,
parent: elDataLabelsWrap,
dataLabelsConfig: dataLabelsConfig
});
}
return elDataLabelsWrap;
}
}, {
key: 'animateHeatMap',
value: function animateHeatMap(el, x, y, width, height, speed) {
var _this2 = this;
var animations = new _Animations2.default(this.ctx);
animations.animateRect(el, {
x: x + width / 2,
y: y + height / 2,
width: 0,
height: 0
}, {
x: x,
y: y,
width: width,
height: height
}, speed, function () {
_this2.w.globals.animationEnded = true;
});
}
}, {
key: 'animateHeatColor',
value: function animateHeatColor(el, colorFrom, colorTo, speed) {
el.attr({
fill: colorFrom
}).animate(speed).attr({
fill: colorTo
});
}
}]);
return HeatMap;
}();
exports.default = HeatMap;
/***/ }),
/* 36 */
/***/ (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 _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _DataLabels = __webpack_require__(9);
var _DataLabels2 = _interopRequireDefault(_DataLabels);
var _Markers = __webpack_require__(6);
var _Markers2 = _interopRequireDefault(_Markers);
var _Scatter = __webpack_require__(19);
var _Scatter2 = _interopRequireDefault(_Scatter);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Line Class responsible for drawing Line / Area Charts.
* This class is also responsible for generating values for Bubble/Scatter charts, so need to rename it to Axis Charts to avoid confusions
* @module Line
**/
var Line = function () {
function Line(ctx, xyRatios, isPointsChart) {
_classCallCheck(this, Line);
this.ctx = ctx;
this.w = ctx.w;
this.xyRatios = xyRatios;
this.pointsChart = !(this.w.config.chart.type !== 'bubble' && this.w.config.chart.type !== 'scatter') || isPointsChart;
this.scatter = new _Scatter2.default(this.ctx);
this.noNegatives = this.w.globals.minX === Number.MAX_VALUE;
this.yaxisIndex = 0;
}
_createClass(Line, [{
key: 'draw',
value: function draw(series, ptype, seriesIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
var type = w.globals.comboCharts ? ptype : w.config.chart.type;
var ret = graphics.group({
class: 'apexcharts-' + type + '-series apexcharts-plot-series'
});
var coreUtils = new _CoreUtils2.default(this.ctx, w);
series = coreUtils.getLogSeries(series);
var yRatio = this.xyRatios.yRatio;
yRatio = coreUtils.getLogYRatios(yRatio);
var zRatio = this.xyRatios.zRatio;
var xRatio = this.xyRatios.xRatio;
var baseLineY = this.xyRatios.baseLineY;
// push all series in an array, so we can draw in reverse order (for stacked charts)
var allSeries = [];
var prevSeriesY = [];
var categoryAxisCorrection = 0;
for (var i = 0; i < series.length; i++) {
// width divided into equal parts
if (type === 'line' && (w.config.fill.type === 'gradient' || w.config.fill.type[i] === 'gradient')) {
// a small adjustment to allow gradient line to draw correctly for all same values
/* #fix https://github.com/apexcharts/apexcharts.js/issues/358 */
if (coreUtils.seriesHaveSameValues(i)) {
var gSeries = series[i].slice();
gSeries[gSeries.length - 1] = gSeries[gSeries.length - 1] + 0.000001;
series[i] = gSeries;
}
}
var xDivision = w.globals.gridWidth / w.globals.dataPoints;
var realIndex = w.globals.comboCharts ? seriesIndex[i] : i;
if (yRatio.length > 1) {
this.yaxisIndex = realIndex;
}
this.isReversed = w.config.yaxis[this.yaxisIndex] && w.config.yaxis[this.yaxisIndex].reversed;
var yArrj = []; // hold y values of current iterating series
var xArrj = []; // hold x values of current iterating series
// zeroY is the 0 value in y series which can be used in negative charts
var zeroY = w.globals.gridHeight - baseLineY[this.yaxisIndex] - (this.isReversed ? w.globals.gridHeight : 0) + (this.isReversed ? baseLineY[this.yaxisIndex] * 2 : 0);
var areaBottomY = zeroY;
if (zeroY > w.globals.gridHeight) {
areaBottomY = w.globals.gridHeight;
}
categoryAxisCorrection = xDivision / 2;
var x = w.globals.padHorizontal + categoryAxisCorrection;
var y = 1;
if (w.globals.isXNumeric && w.globals.seriesX.length > 0) {
x = (w.globals.seriesX[realIndex][0] - w.globals.minX) / xRatio;
}
xArrj.push(x);
var linePath = void 0,
areaPath = void 0,
pathFromLine = void 0,
pathFromArea = void 0;
var linePaths = [];
var areaPaths = [];
// el to which series will be drawn
var elSeries = graphics.group({
class: 'apexcharts-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[realIndex])
});
// points
var elPointsMain = graphics.group({
class: 'apexcharts-series-markers-wrap'
});
// eldatalabels
var elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels'
});
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex);
var longestSeries = series[i].length === w.globals.dataPoints;
elSeries.attr({
'data:longestSeries': longestSeries,
rel: i + 1,
'data:realIndex': realIndex
});
this.appendPathFrom = true;
var pX = x;
var pY = void 0;
var prevX = pX;
var prevY = zeroY; // w.globals.svgHeight;
var lineYPosition = 0;
// the first value in the current series is not null or undefined
var firstPrevY = this.determineFirstPrevY({
i: i,
series: series,
yRatio: yRatio[this.yaxisIndex],
zeroY: zeroY,
prevY: prevY,
prevSeriesY: prevSeriesY,
lineYPosition: lineYPosition
});
prevY = firstPrevY.prevY;
yArrj.push(prevY);
pY = prevY;
if (series[i][0] === null) {
// when the first value itself is null, we need to move the pointer to a location where a null value is not found
for (var s = 0; s < series[i].length; s++) {
if (series[i][s] !== null) {
prevX = xDivision * s;
prevY = zeroY - series[i][s] / yRatio[this.yaxisIndex];
linePath = graphics.move(prevX, prevY);
areaPath = graphics.move(prevX, areaBottomY);
break;
}
}
} else {
linePath = graphics.move(prevX, prevY);
areaPath = graphics.move(prevX, areaBottomY) + graphics.line(prevX, prevY);
}
pathFromLine = graphics.move(-1, zeroY) + graphics.line(-1, zeroY);
pathFromArea = graphics.move(-1, zeroY) + graphics.line(-1, zeroY);
if (w.globals.previousPaths.length > 0) {
var pathFrom = this.checkPreviousPaths({
pathFromLine: pathFromLine,
pathFromArea: pathFromArea,
realIndex: realIndex
});
pathFromLine = pathFrom.pathFromLine;
pathFromArea = pathFrom.pathFromArea;
}
var iterations = w.globals.dataPoints > 1 ? w.globals.dataPoints - 1 : w.globals.dataPoints;
for (var j = 0; j < iterations; j++) {
if (w.globals.isXNumeric) {
var sX = w.globals.seriesX[realIndex][j + 1];
if (typeof w.globals.seriesX[realIndex][j + 1] === 'undefined') {
/* fix #374 */
sX = w.globals.seriesX[realIndex][iterations - 1];
}
x = (sX - w.globals.minX) / xRatio;
} else {
x = x + xDivision;
}
var minY = _Utils2.default.isNumber(w.globals.minYArr[realIndex]) ? w.globals.minYArr[realIndex] : w.globals.minY;
if (w.config.chart.stacked) {
if (i > 0 && w.globals.collapsedSeries.length < w.config.series.length - 1) {
lineYPosition = prevSeriesY[i - 1][j + 1];
} else {
// the first series will not have prevY values
lineYPosition = zeroY;
}
if (typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null) {
y = lineYPosition - minY / yRatio[this.yaxisIndex] + (this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2;
} else {
y = lineYPosition - series[i][j + 1] / yRatio[this.yaxisIndex] + (this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) * 2;
}
} else {
if (typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null) {
y = zeroY - minY / yRatio[this.yaxisIndex] + (this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2;
} else {
y = zeroY - series[i][j + 1] / yRatio[this.yaxisIndex] + (this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) * 2;
}
}
// push current X
xArrj.push(x);
// push current Y that will be used as next series's bottom position
yArrj.push(y);
var calculatedPaths = this.createPaths({
series: series,
i: i,
j: j,
x: x,
y: y,
xDivision: xDivision,
pX: pX,
pY: pY,
areaBottomY: areaBottomY,
linePath: linePath,
areaPath: areaPath,
linePaths: linePaths,
areaPaths: areaPaths,
seriesIndex: seriesIndex
});
areaPaths = calculatedPaths.areaPaths;
linePaths = calculatedPaths.linePaths;
pX = calculatedPaths.pX;
pY = calculatedPaths.pY;
areaPath = calculatedPaths.areaPath;
linePath = calculatedPaths.linePath;
if (this.appendPathFrom) {
pathFromLine = pathFromLine + graphics.line(x, zeroY);
pathFromArea = pathFromArea + graphics.line(x, zeroY);
}
var pointsPos = this.calculatePoints({
series: series,
x: x,
y: y,
realIndex: realIndex,
i: i,
j: j,
prevY: prevY,
categoryAxisCorrection: categoryAxisCorrection,
xRatio: xRatio
});
if (!this.pointsChart) {
var markers = new _Markers2.default(this.ctx);
if (w.globals.dataPoints > 1) {
elPointsMain.node.classList.add('hidden');
}
var elPointsWrap = markers.plotChartMarkers(pointsPos, realIndex, j + 1);
if (elPointsWrap !== null) {
elPointsMain.add(elPointsWrap);
}
} else {
// scatter / bubble chart points creation
this.scatter.draw(elSeries, j, {
realIndex: realIndex,
pointsPos: pointsPos,
zRatio: zRatio,
elParent: elPointsMain
});
}
var dataLabelAlign = !series[i][j + 1] || series[i][j + 1] > series[i][j] ? 'top' : 'bottom';
var dataLabels = new _DataLabels2.default(this.ctx);
var drawnLabels = dataLabels.drawDataLabel(pointsPos, realIndex, j + 1, null, dataLabelAlign);
if (drawnLabels !== null) {
elDataLabelsWrap.add(drawnLabels);
}
}
// push all current y values array to main PrevY Array
prevSeriesY.push(yArrj);
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrj;
w.globals.seriesYvalues[realIndex] = yArrj;
// these elements will be shown after area path animation completes
if (!this.pointsChart) {
w.globals.delayedElements.push({
el: elPointsMain.node,
index: realIndex
});
}
var defaultRenderedPathOptions = {
i: i,
realIndex: realIndex,
animationDelay: i,
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: 'apexcharts-' + type,
id: 'apexcharts-' + type
};
if (type === 'area') {
var pathFill = fill.fillPath({
seriesNumber: realIndex
});
for (var p = 0; p < areaPaths.length; p++) {
var renderedPath = graphics.renderPaths(_extends({}, defaultRenderedPathOptions, {
pathFrom: pathFromArea,
pathTo: areaPaths[p],
stroke: 'none',
strokeWidth: 0,
strokeLineCap: null,
fill: pathFill
}));
elSeries.add(renderedPath);
}
}
if (w.config.stroke.show && !this.pointsChart) {
var lineFill = null;
if (type === 'line') {
// fillable lines only for lineChart
lineFill = fill.fillPath({
seriesNumber: realIndex,
i: i
});
} else {
lineFill = w.globals.stroke.colors[realIndex];
}
for (var _p = 0; _p < linePaths.length; _p++) {
var _renderedPath = graphics.renderPaths(_extends({}, defaultRenderedPathOptions, {
pathFrom: pathFromLine,
pathTo: linePaths[_p],
stroke: lineFill,
strokeWidth: Array.isArray(w.config.stroke.width) ? w.config.stroke.width[realIndex] : w.config.stroke.width,
strokeLineCap: w.config.stroke.lineCap,
fill: 'none'
}));
elSeries.add(_renderedPath);
}
}
elSeries.add(elPointsMain);
elSeries.add(elDataLabelsWrap);
allSeries.push(elSeries);
}
for (var _s = allSeries.length; _s > 0; _s--) {
ret.add(allSeries[_s - 1]);
}
return ret;
}
}, {
key: 'createPaths',
value: function createPaths(_ref) {
var series = _ref.series,
i = _ref.i,
j = _ref.j,
x = _ref.x,
y = _ref.y,
pX = _ref.pX,
pY = _ref.pY,
xDivision = _ref.xDivision,
areaBottomY = _ref.areaBottomY,
linePath = _ref.linePath,
areaPath = _ref.areaPath,
linePaths = _ref.linePaths,
areaPaths = _ref.areaPaths,
seriesIndex = _ref.seriesIndex;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var curve = w.config.stroke.curve;
if (Array.isArray(w.config.stroke.curve)) {
if (Array.isArray(seriesIndex)) {
curve = w.config.stroke.curve[seriesIndex[i]];
} else {
curve = w.config.stroke.curve[i];
}
}
// logic of smooth curve derived from chartist
// CREDITS: https://gionkunz.github.io/chartist-js/
if (curve === 'smooth') {
var length = (x - pX) * 0.35;
if (w.globals.hasNullValues) {
if (series[i][j] !== null) {
if (series[i][j + 1] !== null) {
linePath = graphics.move(pX, pY) + graphics.curve(pX + length, pY, x - length, y, x + 1, y);
areaPath = graphics.move(pX + 1, pY) + graphics.curve(pX + length, pY, x - length, y, x + 1, y) + graphics.line(x, areaBottomY) + graphics.line(pX, areaBottomY) + 'z';
} else {
linePath = graphics.move(pX, pY);
areaPath = graphics.move(pX, pY) + 'z';
}
}
linePaths.push(linePath);
areaPaths.push(areaPath);
} else {
linePath = linePath + graphics.curve(pX + length, pY, x - length, y, x, y);
areaPath = areaPath + graphics.curve(pX + length, pY, x - length, y, x, y);
}
pX = x;
pY = y;
if (j === series[i].length - 2) {
// last loop, close path
areaPath = areaPath + graphics.curve(pX, pY, x, y, x, areaBottomY) + graphics.move(x, y) + 'z';
if (!w.globals.hasNullValues) {
linePaths.push(linePath);
areaPaths.push(areaPath);
}
}
} else {
if (series[i][j + 1] === null) {
linePath = linePath + graphics.move(x, y);
areaPath = areaPath + graphics.line(x - xDivision, areaBottomY) + graphics.move(x, y);
}
if (series[i][j] === null) {
linePath = linePath + graphics.move(x, y);
areaPath = areaPath + graphics.move(x, areaBottomY);
}
if (curve === 'stepline') {
linePath = linePath + graphics.line(x, null, 'H') + graphics.line(null, y, 'V');
areaPath = areaPath + graphics.line(x, null, 'H') + graphics.line(null, y, 'V');
} else if (curve === 'straight') {
linePath = linePath + graphics.line(x, y);
areaPath = areaPath + graphics.line(x, y);
}
if (j === series[i].length - 2) {
// last loop, close path
areaPath = areaPath + graphics.line(x, areaBottomY) + graphics.move(x, y) + 'z';
linePaths.push(linePath);
areaPaths.push(areaPath);
}
}
return {
linePaths: linePaths,
areaPaths: areaPaths,
pX: pX,
pY: pY,
linePath: linePath,
areaPath: areaPath
};
}
}, {
key: 'calculatePoints',
value: function calculatePoints(_ref2) {
var series = _ref2.series,
realIndex = _ref2.realIndex,
x = _ref2.x,
y = _ref2.y,
i = _ref2.i,
j = _ref2.j,
prevY = _ref2.prevY,
categoryAxisCorrection = _ref2.categoryAxisCorrection,
xRatio = _ref2.xRatio;
var w = this.w;
var ptX = [];
var ptY = [];
if (j === 0) {
var xPT1st = categoryAxisCorrection + w.config.markers.offsetX;
// the first point for line series
// we need to check whether it's not a time series, because a time series may
// start from the middle of the x axis
if (w.globals.isXNumeric) {
xPT1st = (w.globals.seriesX[realIndex][0] - w.globals.minX) / xRatio + w.config.markers.offsetX;
}
// push 2 points for the first data values
ptX.push(xPT1st);
ptY.push(_Utils2.default.isNumber(series[i][0]) ? prevY + w.config.markers.offsetY : null);
ptX.push(x + w.config.markers.offsetX);
ptY.push(_Utils2.default.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null);
} else {
ptX.push(x + w.config.markers.offsetX);
ptY.push(_Utils2.default.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null);
}
var pointsPos = {
x: ptX,
y: ptY
};
return pointsPos;
}
}, {
key: 'checkPreviousPaths',
value: function checkPreviousPaths(_ref3) {
var pathFromLine = _ref3.pathFromLine,
pathFromArea = _ref3.pathFromArea,
realIndex = _ref3.realIndex;
var w = this.w;
for (var pp = 0; pp < w.globals.previousPaths.length; pp++) {
var gpp = w.globals.previousPaths[pp];
if ((gpp.type === 'line' || gpp.type === 'area') && gpp.paths.length > 0 && parseInt(gpp.realIndex) === parseInt(realIndex)) {
if (gpp.type === 'line') {
this.appendPathFrom = false;
pathFromLine = w.globals.previousPaths[pp].paths[0].d;
} else if (gpp.type === 'area') {
this.appendPathFrom = false;
pathFromArea = w.globals.previousPaths[pp].paths[0].d;
if (w.config.stroke.show) {
pathFromLine = w.globals.previousPaths[pp].paths[1].d;
}
}
}
}
return {
pathFromLine: pathFromLine,
pathFromArea: pathFromArea
};
}
}, {
key: 'determineFirstPrevY',
value: function determineFirstPrevY(_ref4) {
var i = _ref4.i,
series = _ref4.series,
yRatio = _ref4.yRatio,
zeroY = _ref4.zeroY,
prevY = _ref4.prevY,
prevSeriesY = _ref4.prevSeriesY,
lineYPosition = _ref4.lineYPosition;
var w = this.w;
if (typeof series[i][0] !== 'undefined') {
if (w.config.chart.stacked) {
if (i > 0) {
// 1st y value of previous series
lineYPosition = prevSeriesY[i - 1][0];
} else {
// the first series will not have prevY values
lineYPosition = zeroY;
}
prevY = lineYPosition - series[i][0] / yRatio + (this.isReversed ? series[i][0] / yRatio : 0) * 2;
} else {
prevY = zeroY - series[i][0] / yRatio + (this.isReversed ? series[i][0] / yRatio : 0) * 2;
}
} else {
// the first value in the current series is null
if (w.config.chart.stacked && i > 0 && typeof series[i][0] === 'undefined') {
// check for undefined value (undefined value will occur when we clear the series while user clicks on legend to hide serieses)
for (var s = i - 1; s >= 0; s--) {
// for loop to get to 1st previous value until we get it
if (series[s][0] !== null && typeof series[s][0] !== 'undefined') {
lineYPosition = prevSeriesY[s][0];
prevY = lineYPosition;
break;
}
}
}
}
return {
prevY: prevY,
lineYPosition: lineYPosition
};
}
}]);
return Line;
}();
exports.default = Line;
/***/ }),
/* 37 */
/***/ (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 _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Markers = __webpack_require__(6);
var _Markers2 = _interopRequireDefault(_Markers);
var _DataLabels = __webpack_require__(9);
var _DataLabels2 = _interopRequireDefault(_DataLabels);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Radar Class for Spider/Radar Charts.
* @module Radar
**/
var Radar = function () {
function Radar(ctx) {
_classCallCheck(this, Radar);
this.ctx = ctx;
this.w = ctx.w;
this.chartType = this.w.config.chart.type;
this.initialAnim = this.w.config.chart.animations.enabled;
this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled;
this.animDur = 0;
var w = this.w;
this.graphics = new _Graphics2.default(this.ctx);
this.lineColorArr = w.globals.stroke.colors !== undefined ? w.globals.stroke.colors : w.globals.colors;
this.defaultSize = w.globals.svgHeight < w.globals.svgWidth ? w.globals.svgHeight - 35 : w.globals.gridWidth;
this.maxValue = this.w.globals.maxY;
this.polygons = w.config.plotOptions.radar.polygons;
this.maxLabelWidth = 20;
var longestLabel = w.globals.labels.slice().sort(function (a, b) {
return b.length - a.length;
})[0];
var labelWidth = this.graphics.getTextRects(longestLabel, w.config.dataLabels.style.fontSize);
this.size = this.defaultSize / 2.1 - w.config.stroke.width - w.config.chart.dropShadow.blur - labelWidth.width / 1.75;
if (w.config.plotOptions.radar.size !== undefined) {
this.size = w.config.plotOptions.radar.size;
}
this.dataRadiusOfPercent = [];
this.dataRadius = [];
this.angleArr = [];
this.yaxisLabelsTextsPos = [];
}
_createClass(Radar, [{
key: 'draw',
value: function draw(series) {
var _this = this;
var w = this.w;
var fill = new _Fill2.default(this.ctx);
var allSeries = [];
this.dataPointsLen = series[w.globals.maxValsInArrayIndex].length;
this.disAngle = Math.PI * 2 / this.dataPointsLen;
var halfW = w.globals.gridWidth / 2;
var halfH = w.globals.gridHeight / 2;
var translateX = halfW;
var translateY = halfH;
var ret = this.graphics.group({
class: 'apexcharts-radar-series',
'data:innerTranslateX': translateX,
'data:innerTranslateY': translateY - 25,
transform: 'translate(' + (translateX || 0) + ', ' + (translateY || 0) + ')'
});
var dataPointsPos = [];
var elPointsMain = null;
this.yaxisLabels = this.graphics.group({
class: 'apexcharts-yaxis'
});
series.forEach(function (s, i) {
// el to which series will be drawn
var elSeries = _this.graphics.group().attr({
class: 'apexcharts-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[i]),
rel: i + 1,
'data:realIndex': i
});
_this.dataRadiusOfPercent[i] = [];
_this.dataRadius[i] = [];
_this.angleArr[i] = [];
s.forEach(function (dv, j) {
_this.dataRadiusOfPercent[i][j] = dv / _this.maxValue;
_this.dataRadius[i][j] = _this.dataRadiusOfPercent[i][j] * _this.size;
_this.angleArr[i][j] = j * _this.disAngle;
});
dataPointsPos = _this.getDataPointsPos(_this.dataRadius[i], _this.angleArr[i]);
var paths = _this.createPaths(dataPointsPos, {
x: 0,
y: 0
});
// points
elPointsMain = _this.graphics.group({
class: 'apexcharts-series-markers-wrap hidden'
});
w.globals.delayedElements.push({
el: elPointsMain.node,
index: i
});
var defaultRenderedPathOptions = {
i: i,
realIndex: i,
animationDelay: i,
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: 'apexcharts-radar',
id: 'apexcharts-radar',
shouldClipToGrid: false,
bindEventsOnPaths: false,
stroke: w.globals.stroke.colors[i],
strokeLineCap: w.config.stroke.lineCap
};
var pathFrom = null;
if (w.globals.previousPaths.length > 0) {
pathFrom = _this.getPathFrom(i);
}
for (var p = 0; p < paths.linePathsTo.length; p++) {
var renderedLinePath = _this.graphics.renderPaths(_extends({}, defaultRenderedPathOptions, {
pathFrom: pathFrom === null ? paths.linePathsFrom[p] : pathFrom,
pathTo: paths.linePathsTo[p],
strokeWidth: Array.isArray(w.config.stroke.width) ? w.config.stroke.width[i] : w.config.stroke.width,
fill: 'none',
drawShadow: false
}));
elSeries.add(renderedLinePath);
var pathFill = fill.fillPath({
seriesNumber: i
});
var renderedAreaPath = _this.graphics.renderPaths(_extends({}, defaultRenderedPathOptions, {
pathFrom: pathFrom === null ? paths.areaPathsFrom[p] : pathFrom,
pathTo: paths.areaPathsTo[p],
strokeWidth: 0,
fill: pathFill,
drawShadow: false
}));
if (w.config.chart.dropShadow.enabled) {
var filters = new _Filters2.default(_this.ctx);
var shadow = w.config.chart.dropShadow;
filters.dropShadow(renderedAreaPath, Object.assign({}, shadow, { noUserSpaceOnUse: true }), i);
}
elSeries.add(renderedAreaPath);
}
s.forEach(function (sj, j) {
var markers = new _Markers2.default(_this.ctx);
var opts = markers.getMarkerConfig('apexcharts-marker', i);
var point = _this.graphics.drawMarker(dataPointsPos[j].x, dataPointsPos[j].y, opts);
point.attr('rel', j);
point.attr('j', j);
point.attr('index', i);
point.node.setAttribute('default-marker-size', opts.pSize);
var elPointsWrap = _this.graphics.group({
class: 'apexcharts-series-markers'
});
if (elPointsWrap) {
elPointsWrap.add(point);
}
elPointsMain.add(elPointsWrap);
elSeries.add(elPointsMain);
});
allSeries.push(elSeries);
});
this.drawPolygons({
parent: ret
});
if (w.config.dataLabels.enabled) {
var dataLabels = this.drawLabels();
ret.add(dataLabels);
}
ret.add(this.yaxisLabels);
allSeries.forEach(function (elS) {
ret.add(elS);
});
return ret;
}
}, {
key: 'drawPolygons',
value: function drawPolygons(opts) {
var _this2 = this;
var w = this.w;
var parent = opts.parent;
var yaxisTexts = w.globals.yAxisScale[0].result.reverse();
var layers = yaxisTexts.length;
var radiusSizes = [];
var layerDis = this.size / (layers - 1);
for (var i = 0; i < layers; i++) {
radiusSizes[i] = layerDis * i;
}
radiusSizes.reverse();
var polygonStrings = [];
var lines = [];
radiusSizes.forEach(function (radiusSize, r) {
var polygon = _this2.getPolygonPos(radiusSize);
var string = '';
polygon.forEach(function (p, i) {
if (r === 0) {
var line = _this2.graphics.drawLine(p.x, p.y, 0, 0, Array.isArray(_this2.polygons.connectorColors) ? _this2.polygons.connectorColors[i] : _this2.polygons.connectorColors);
lines.push(line);
}
if (i === 0) {
_this2.yaxisLabelsTextsPos.push({
x: p.x,
y: p.y
});
}
string += p.x + ',' + p.y + ' ';
});
polygonStrings.push(string);
});
polygonStrings.forEach(function (p, i) {
var strokeColors = _this2.polygons.strokeColors;
var polygon = _this2.graphics.drawPolygon(p, Array.isArray(strokeColors) ? strokeColors[i] : strokeColors, w.globals.radarPolygons.fill.colors[i]);
parent.add(polygon);
});
lines.forEach(function (l) {
parent.add(l);
});
if (w.config.yaxis[0].show) {
this.yaxisLabelsTextsPos.forEach(function (p, i) {
var yText = _this2.drawYAxisText(p.x, p.y, i, yaxisTexts[i]);
_this2.yaxisLabels.add(yText);
});
}
}
}, {
key: 'drawYAxisText',
value: function drawYAxisText(x, y, i, text) {
var w = this.w;
var yaxisConfig = w.config.yaxis[0];
var formatter = w.globals.yLabelFormatters[0];
var yaxisLabel = this.graphics.drawText({
x: x + yaxisConfig.labels.offsetX,
y: y + yaxisConfig.labels.offsetY,
text: formatter(text, i),
textAnchor: 'middle',
fontSize: yaxisConfig.labels.style.fontSize,
fontFamily: yaxisConfig.labels.style.fontFamily,
foreColor: yaxisConfig.labels.style.color
});
return yaxisLabel;
}
}, {
key: 'drawLabels',
value: function drawLabels() {
var _this3 = this;
var w = this.w;
var limit = 10;
var textAnchor = 'middle';
var dataLabelsConfig = w.config.dataLabels;
var elDataLabelsWrap = this.graphics.group({
class: 'apexcharts-datalabels'
});
var polygonPos = this.getPolygonPos(this.size);
var currPosX = 0;
var currPosY = 0;
w.globals.labels.forEach(function (label, i) {
var formatter = dataLabelsConfig.formatter;
var dataLabels = new _DataLabels2.default(_this3.ctx);
if (polygonPos[i]) {
currPosX = polygonPos[i].x;
currPosY = polygonPos[i].y;
if (Math.abs(polygonPos[i].x) >= limit) {
if (polygonPos[i].x > 0) {
textAnchor = 'start';
currPosX += 10;
} else if (polygonPos[i].x < 0) {
textAnchor = 'end';
currPosX -= 10;
}
} else {
textAnchor = 'middle';
}
if (Math.abs(polygonPos[i].y) >= _this3.size - limit) {
if (polygonPos[i].y < 0) {
currPosY -= 10;
} else if (polygonPos[i].y > 0) {
currPosY += 10;
}
}
var text = formatter(label, {
seriesIndex: -1,
dataPointIndex: i,
w: w
});
dataLabels.plotDataLabelsText({
x: currPosX,
y: currPosY,
text: text,
textAnchor: textAnchor,
i: i,
j: i,
parent: elDataLabelsWrap,
dataLabelsConfig: dataLabelsConfig,
offsetCorrection: false
});
}
});
return elDataLabelsWrap;
}
}, {
key: 'createPaths',
value: function createPaths(pos, origin) {
var _this4 = this;
var linePathsTo = [];
var linePathsFrom = [];
var areaPathsTo = [];
var areaPathsFrom = [];
if (pos.length) {
linePathsFrom = [this.graphics.move(origin.x, origin.y)];
areaPathsFrom = [this.graphics.move(origin.x, origin.y)];
var linePathTo = this.graphics.move(pos[0].x, pos[0].y);
var areaPathTo = this.graphics.move(pos[0].x, pos[0].y);
pos.forEach(function (p, i) {
linePathTo += _this4.graphics.line(p.x, p.y);
areaPathTo += _this4.graphics.line(p.x, p.y);
if (i === pos.length - 1) {
linePathTo += 'Z';
areaPathTo += 'Z';
}
});
linePathsTo.push(linePathTo);
areaPathsTo.push(areaPathTo);
}
return {
linePathsFrom: linePathsFrom,
linePathsTo: linePathsTo,
areaPathsFrom: areaPathsFrom,
areaPathsTo: areaPathsTo
};
}
}, {
key: 'getPathFrom',
value: function getPathFrom(realIndex) {
var w = this.w;
var pathFrom = null;
for (var pp = 0; pp < w.globals.previousPaths.length; pp++) {
var gpp = w.globals.previousPaths[pp];
if (gpp.paths.length > 0 && parseInt(gpp.realIndex) === parseInt(realIndex)) {
if (typeof w.globals.previousPaths[pp].paths[0] !== 'undefined') {
pathFrom = w.globals.previousPaths[pp].paths[0].d;
}
}
}
return pathFrom;
}
}, {
key: 'getDataPointsPos',
value: function getDataPointsPos(dataRadiusArr, angleArr) {
var dataPointsLen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.dataPointsLen;
dataRadiusArr = dataRadiusArr || [];
angleArr = angleArr || [];
var dataPointsPosArray = [];
for (var j = 0; j < dataPointsLen; j++) {
var curPointPos = {};
curPointPos.x = dataRadiusArr[j] * Math.sin(angleArr[j]);
curPointPos.y = -dataRadiusArr[j] * Math.cos(angleArr[j]);
dataPointsPosArray.push(curPointPos);
}
return dataPointsPosArray;
}
}, {
key: 'getPolygonPos',
value: function getPolygonPos(size) {
var dotsArray = [];
var angle = Math.PI * 2 / this.dataPointsLen;
for (var i = 0; i < this.dataPointsLen; i++) {
var curPos = {};
curPos.x = size * Math.sin(i * angle);
curPos.y = -size * Math.cos(i * angle);
dotsArray.push(curPos);
}
return dotsArray;
}
}]);
return Radar;
}();
exports.default = Radar;
/***/ }),
/* 38 */
/***/ (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; }; }();
var _Pie2 = __webpack_require__(12);
var _Pie3 = _interopRequireDefault(_Pie2);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Filters = __webpack_require__(3);
var _Filters2 = _interopRequireDefault(_Filters);
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"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* ApexCharts Radial Class for drawing Circle / Semi Circle Charts.
* @module Radial
**/
var Radial = function (_Pie) {
_inherits(Radial, _Pie);
function Radial(ctx) {
_classCallCheck(this, Radial);
var _this = _possibleConstructorReturn(this, (Radial.__proto__ || Object.getPrototypeOf(Radial)).call(this, ctx));
_this.ctx = ctx;
_this.w = ctx.w;
_this.animBeginArr = [0];
_this.animDur = 0;
var w = _this.w;
_this.startAngle = w.config.plotOptions.radialBar.startAngle;
_this.endAngle = w.config.plotOptions.radialBar.endAngle;
_this.trackStartAngle = w.config.plotOptions.radialBar.track.startAngle;
_this.trackEndAngle = w.config.plotOptions.radialBar.track.endAngle;
_this.radialDataLabels = w.config.plotOptions.radialBar.dataLabels;
if (!_this.trackStartAngle) _this.trackStartAngle = _this.startAngle;
if (!_this.trackEndAngle) _this.trackEndAngle = _this.endAngle;
if (_this.endAngle === 360) _this.endAngle = 359.99;
_this.fullAngle = 360 - w.config.plotOptions.radialBar.endAngle - w.config.plotOptions.radialBar.startAngle;
_this.margin = parseInt(w.config.plotOptions.radialBar.track.margin);
return _this;
}
_createClass(Radial, [{
key: 'draw',
value: function draw(series) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var ret = graphics.group({
class: 'apexcharts-radialbar'
});
var elSeries = graphics.group();
var centerY = this.defaultSize / 2;
var centerX = w.globals.gridWidth / 2;
var size = this.defaultSize / 2.05 - w.config.stroke.width - w.config.chart.dropShadow.blur;
if (w.config.plotOptions.radialBar.size !== undefined) {
size = w.config.plotOptions.radialBar.size;
}
var colorArr = w.globals.fill.colors;
if (w.config.plotOptions.radialBar.track.show) {
var elTracks = this.drawTracks({
size: size,
centerX: centerX,
centerY: centerY,
colorArr: colorArr,
series: series
});
elSeries.add(elTracks);
}
var elG = this.drawArcs({
size: size,
centerX: centerX,
centerY: centerY,
colorArr: colorArr,
series: series
});
elSeries.add(elG.g);
if (w.config.plotOptions.radialBar.hollow.position === 'front') {
elG.g.add(elG.elHollow);
if (elG.dataLabels) {
elG.g.add(elG.dataLabels);
}
}
ret.add(elSeries);
return ret;
}
}, {
key: 'drawTracks',
value: function drawTracks(opts) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var g = graphics.group();
var filters = new _Filters2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
var strokeWidth = this.getStrokeWidth(opts);
opts.size = opts.size - strokeWidth / 2;
for (var i = 0; i < opts.series.length; i++) {
var elRadialBarTrack = graphics.group({
class: 'apexcharts-radialbar-track apexcharts-track'
});
g.add(elRadialBarTrack);
elRadialBarTrack.attr({
id: 'apexcharts-track-' + i,
rel: i + 1
});
opts.size = opts.size - strokeWidth - this.margin;
var trackConfig = w.config.plotOptions.radialBar.track;
var pathFill = fill.fillPath({
seriesNumber: 0,
size: opts.size,
fillColors: Array.isArray(trackConfig.background) ? trackConfig.background[i] : trackConfig.background,
solid: true
});
var startAngle = this.trackStartAngle;
var endAngle = this.trackEndAngle;
if (Math.abs(endAngle) + Math.abs(startAngle) >= 360) endAngle = 360 - Math.abs(this.startAngle) - 0.1;
var elPath = graphics.drawPath({
d: '',
stroke: pathFill,
strokeWidth: strokeWidth * parseInt(trackConfig.strokeWidth) / 100,
fill: 'none',
strokeOpacity: trackConfig.opacity,
classes: 'apexcharts-radialbar-area'
});
if (trackConfig.dropShadow.enabled) {
var shadow = trackConfig.dropShadow;
filters.dropShadow(elPath, shadow);
}
elRadialBarTrack.add(elPath);
elPath.attr('id', 'apexcharts-radialbarTrack-' + i);
var pie = new _Pie3.default(this.ctx);
pie.animatePaths(elPath, {
centerX: opts.centerX,
centerY: opts.centerY,
endAngle: endAngle,
startAngle: startAngle,
size: opts.size,
i: i,
totalItems: 2,
animBeginArr: 0,
dur: 0,
isTrack: true,
easing: w.globals.easing
});
}
return g;
}
}, {
key: 'drawArcs',
value: function drawArcs(opts) {
var w = this.w;
// size, donutSize, centerX, centerY, colorArr, lineColorArr, sectorAngleArr, series
var graphics = new _Graphics2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
var filters = new _Filters2.default(this.ctx);
var g = graphics.group();
var strokeWidth = this.getStrokeWidth(opts);
opts.size = opts.size - strokeWidth / 2;
var hollowFillID = w.config.plotOptions.radialBar.hollow.background;
var hollowSize = opts.size - strokeWidth * opts.series.length - this.margin * opts.series.length - strokeWidth * parseInt(w.config.plotOptions.radialBar.track.strokeWidth) / 100 / 2;
var hollowRadius = hollowSize - w.config.plotOptions.radialBar.hollow.margin;
if (w.config.plotOptions.radialBar.hollow.image !== undefined) {
hollowFillID = this.drawHollowImage(opts, g, hollowSize, hollowFillID);
}
var elHollow = this.drawHollow({
size: hollowRadius,
centerX: opts.centerX,
centerY: opts.centerY,
fill: hollowFillID
});
if (w.config.plotOptions.radialBar.hollow.dropShadow.enabled) {
var shadow = w.config.plotOptions.radialBar.hollow.dropShadow;
filters.dropShadow(elHollow, shadow);
}
var shown = 1;
if (!this.radialDataLabels.total.show && w.globals.series.length > 1) {
shown = 0;
}
var pie = new _Pie3.default(this.ctx);
var dataLabels = null;
if (this.radialDataLabels.show) {
dataLabels = pie.renderInnerDataLabels(this.radialDataLabels, {
hollowSize: hollowSize,
centerX: opts.centerX,
centerY: opts.centerY,
opacity: shown
});
}
if (w.config.plotOptions.radialBar.hollow.position === 'back') {
g.add(elHollow);
if (dataLabels) {
g.add(dataLabels);
}
}
var reverseLoop = false;
if (w.config.plotOptions.radialBar.inverseOrder) {
reverseLoop = true;
}
for (var i = reverseLoop ? opts.series.length - 1 : 0; reverseLoop ? i >= 0 : i < opts.series.length; reverseLoop ? i-- : i++) {
var elRadialBarArc = graphics.group({
class: 'apexcharts-series apexcharts-radial-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[i])
});
g.add(elRadialBarArc);
elRadialBarArc.attr({
id: 'apexcharts-series-' + i,
rel: i + 1
});
this.ctx.series.addCollapsedClassToSeries(elRadialBarArc, i);
opts.size = opts.size - strokeWidth - this.margin;
var pathFill = fill.fillPath({
seriesNumber: i,
size: opts.size,
value: opts.series[i]
});
var startAngle = this.startAngle;
var prevStartAngle = void 0;
var totalAngle = Math.abs(w.config.plotOptions.radialBar.endAngle - w.config.plotOptions.radialBar.startAngle);
// if data exceeds 100, make it 100
var dataValue = _Utils2.default.negToZero(opts.series[i] > 100 ? 100 : opts.series[i]) / 100;
var endAngle = Math.round(totalAngle * dataValue) + this.startAngle;
var prevEndAngle = void 0;
if (w.globals.dataChanged) {
prevStartAngle = this.startAngle;
prevEndAngle = Math.round(totalAngle * _Utils2.default.negToZero(w.globals.previousPaths[i]) / 100) + prevStartAngle;
}
var currFullAngle = Math.abs(endAngle) + Math.abs(startAngle);
if (currFullAngle >= 360) {
endAngle = endAngle - 0.01;
}
var prevFullAngle = Math.abs(prevEndAngle) + Math.abs(prevStartAngle);
if (prevFullAngle >= 360) {
prevEndAngle = prevEndAngle - 0.01;
}
var angle = endAngle - startAngle;
var dashArray = Array.isArray(w.config.stroke.dashArray) ? w.config.stroke.dashArray[i] : w.config.stroke.dashArray;
var elPath = graphics.drawPath({
d: '',
stroke: pathFill,
strokeWidth: strokeWidth,
fill: 'none',
fillOpacity: w.config.fill.opacity,
classes: 'apexcharts-radialbar-area',
strokeDashArray: dashArray
});
_Graphics2.default.setAttrs(elPath.node, {
'data:angle': angle,
'data:value': opts.series[i]
});
if (w.config.chart.dropShadow.enabled) {
var _shadow = w.config.chart.dropShadow;
filters.dropShadow(elPath, _shadow, i);
}
this.addListeners(elPath, this.radialDataLabels);
var _pie = new _Pie3.default(this.ctx);
elRadialBarArc.add(elPath);
elPath.attr({
id: 'apexcharts-radialbar-slice-' + i,
index: 0,
j: i
});
var dur = 0;
if (_pie.initialAnim && !w.globals.resized && !w.globals.dataChanged) {
dur = (endAngle - startAngle) / 360 * w.config.chart.animations.speed;
this.animDur = dur / (opts.series.length * 1.2) + this.animDur;
this.animBeginArr.push(this.animDur);
}
if (w.globals.dataChanged) {
dur = (endAngle - startAngle) / 360 * w.config.chart.animations.dynamicAnimation.speed;
this.animDur = dur / (opts.series.length * 1.2) + this.animDur;
this.animBeginArr.push(this.animDur);
}
_pie.animatePaths(elPath, {
centerX: opts.centerX,
centerY: opts.centerY,
endAngle: endAngle,
startAngle: startAngle,
prevEndAngle: prevEndAngle,
prevStartAngle: prevStartAngle,
size: opts.size,
i: i,
totalItems: 2,
animBeginArr: this.animBeginArr,
dur: dur,
shouldSetPrevPaths: true,
easing: w.globals.easing
});
}
return {
g: g,
elHollow: elHollow,
dataLabels: dataLabels
};
}
}, {
key: 'drawHollow',
value: function drawHollow(opts) {
var graphics = new _Graphics2.default(this.ctx);
var circle = graphics.drawCircle(opts.size * 2);
circle.attr({
class: 'apexcharts-radialbar-hollow',
cx: opts.centerX,
cy: opts.centerY,
r: opts.size,
fill: opts.fill
});
return circle;
}
}, {
key: 'drawHollowImage',
value: function drawHollowImage(opts, g, hollowSize, hollowFillID) {
var w = this.w;
var fill = new _Fill2.default(this.ctx);
var randID = (Math.random() + 1).toString(36).substring(4);
var hollowFillImg = w.config.plotOptions.radialBar.hollow.image;
if (w.config.plotOptions.radialBar.hollow.imageClipped) {
fill.clippedImgArea({
width: hollowSize,
height: hollowSize,
image: hollowFillImg,
patternID: 'pattern' + w.globals.cuid + randID
});
hollowFillID = 'url(#pattern' + w.globals.cuid + randID + ')';
} else {
var imgWidth = w.config.plotOptions.radialBar.hollow.imageWidth;
var imgHeight = w.config.plotOptions.radialBar.hollow.imageHeight;
if (imgWidth === undefined && imgHeight === undefined) {
var image = w.globals.dom.Paper.image(hollowFillImg).loaded(function (loader) {
this.move(opts.centerX - loader.width / 2 + w.config.plotOptions.radialBar.hollow.imageOffsetX, opts.centerY - loader.height / 2 + w.config.plotOptions.radialBar.hollow.imageOffsetY);
});
g.add(image);
} else {
var _image = w.globals.dom.Paper.image(hollowFillImg).loaded(function (loader) {
this.move(opts.centerX - imgWidth / 2 + w.config.plotOptions.radialBar.hollow.imageOffsetX, opts.centerY - imgHeight / 2 + w.config.plotOptions.radialBar.hollow.imageOffsetY);
this.size(imgWidth, imgHeight);
});
g.add(_image);
}
}
return hollowFillID;
}
}, {
key: 'getStrokeWidth',
value: function getStrokeWidth(opts) {
var w = this.w;
return opts.size * (100 - parseInt(w.config.plotOptions.radialBar.hollow.size)) / 100 / (opts.series.length + 1) - this.margin;
}
}]);
return Radial;
}(_Pie3.default);
exports.default = Radial;
/***/ }),
/* 39 */
/***/ (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; }; }();
var _Bar2 = __webpack_require__(8);
var _Bar3 = _interopRequireDefault(_Bar2);
var _Fill = __webpack_require__(4);
var _Fill2 = _interopRequireDefault(_Fill);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* ApexCharts RangeBar Class responsible for drawing Range/Timeline Bars.
*
* @module RangeBar
**/
var RangeBar = function (_Bar) {
_inherits(RangeBar, _Bar);
function RangeBar() {
_classCallCheck(this, RangeBar);
return _possibleConstructorReturn(this, (RangeBar.__proto__ || Object.getPrototypeOf(RangeBar)).apply(this, arguments));
}
_createClass(RangeBar, [{
key: 'draw',
value: function draw(series, seriesIndex) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var fill = new _Fill2.default(this.ctx);
this.rangeBarOptions = this.w.config.plotOptions.rangeBar;
this.series = series;
this.seriesRangeStart = w.globals.seriesRangeStart;
this.seriesRangeEnd = w.globals.seriesRangeEnd;
this.initVariables(series);
var ret = graphics.group({
class: 'apexcharts-rangebar-series apexcharts-plot-series'
});
for (var i = 0, bc = 0; i < series.length; i++, bc++) {
var pathTo = void 0,
pathFrom = void 0;
var x = void 0,
y = void 0,
xDivision = void 0,
// xDivision is the GRIDWIDTH divided by number of datapoints (columns)
yDivision = void 0,
// yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
zeroH = void 0,
// zeroH is the baseline where 0 meets y axis
zeroW = void 0; // zeroW is the baseline where 0 meets x axis
var yArrj = []; // hold y values of current iterating series
var xArrj = []; // hold x values of current iterating series
var realIndex = w.globals.comboCharts ? seriesIndex[i] : i;
// el to which series will be drawn
var elSeries = graphics.group({
class: 'apexcharts-series',
seriesName: _Utils2.default.escapeString(w.globals.seriesNames[realIndex]),
rel: i + 1,
'data:realIndex': realIndex
});
if (series[i].length > 0) {
this.visibleI = this.visibleI + 1;
}
var strokeWidth = 0;
var barHeight = 0;
var barWidth = 0;
if (this.yRatio.length > 1) {
this.yaxisIndex = realIndex;
}
var initPositions = this.initialPositions();
y = initPositions.y;
yDivision = initPositions.yDivision;
barHeight = initPositions.barHeight;
zeroW = initPositions.zeroW;
x = initPositions.x;
barWidth = initPositions.barWidth;
xDivision = initPositions.xDivision;
zeroH = initPositions.zeroH;
xArrj.push(x + barWidth / 2);
// eldatalabels
var elDataLabelsWrap = graphics.group({
class: 'apexcharts-datalabels'
});
for (var j = 0, tj = w.globals.dataPoints; j < w.globals.dataPoints; j++, tj--) {
if (typeof this.series[i][j] === 'undefined' || series[i][j] === null) {
this.isNullValue = true;
} else {
this.isNullValue = false;
}
if (w.config.stroke.show) {
if (this.isNullValue) {
strokeWidth = 0;
} else {
strokeWidth = Array.isArray(this.strokeWidth) ? this.strokeWidth[realIndex] : this.strokeWidth;
}
}
var paths = null;
if (this.isHorizontal) {
paths = this.drawRangeBarPaths({
indexes: { i: i, j: j, realIndex: realIndex, bc: bc },
barHeight: barHeight,
strokeWidth: strokeWidth,
pathTo: pathTo,
pathFrom: pathFrom,
zeroW: zeroW,
x: x,
y: y,
yDivision: yDivision,
elSeries: elSeries
});
barWidth = paths.barWidth;
} else {
paths = this.drawRangeColumnPaths({
indexes: { i: i, j: j, realIndex: realIndex, bc: bc },
x: x,
y: y,
xDivision: xDivision,
pathTo: pathTo,
pathFrom: pathFrom,
barWidth: barWidth,
zeroH: zeroH,
strokeWidth: strokeWidth,
elSeries: elSeries
});
barHeight = paths.barHeight;
}
pathTo = paths.pathTo;
pathFrom = paths.pathFrom;
y = paths.y;
x = paths.x;
// push current X
if (j > 0) {
xArrj.push(x + barWidth / 2);
}
yArrj.push(y);
var pathFill = fill.fillPath({
seriesNumber: realIndex
});
var lineFill = w.globals.stroke.colors[realIndex];
elSeries = this.renderSeries({
realIndex: realIndex,
pathFill: pathFill,
lineFill: lineFill,
j: j,
i: i,
pathFrom: pathFrom,
pathTo: pathTo,
strokeWidth: strokeWidth,
elSeries: elSeries,
x: x,
y: y,
series: series,
barHeight: barHeight,
barWidth: barWidth,
elDataLabelsWrap: elDataLabelsWrap,
visibleSeries: this.visibleI,
type: 'rangebar'
});
}
// push all x val arrays into main xArr
w.globals.seriesXvalues[realIndex] = xArrj;
w.globals.seriesYvalues[realIndex] = yArrj;
ret.add(elSeries);
}
return ret;
}
}, {
key: 'drawRangeColumnPaths',
value: function drawRangeColumnPaths(_ref) {
var indexes = _ref.indexes,
x = _ref.x,
y = _ref.y,
strokeWidth = _ref.strokeWidth,
xDivision = _ref.xDivision,
pathTo = _ref.pathTo,
pathFrom = _ref.pathFrom,
barWidth = _ref.barWidth,
zeroH = _ref.zeroH;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var i = indexes.i;
var j = indexes.j;
var yRatio = this.yRatio[this.yaxisIndex];
var realIndex = indexes.realIndex;
var range = this.getRangeValue(realIndex, j);
var y1 = Math.min(range.start, range.end);
var y2 = Math.max(range.start, range.end);
if (w.globals.isXNumeric) {
x = (w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2;
}
var barXPosition = x + barWidth * this.visibleI;
if (typeof this.series[i][j] === 'undefined' || this.series[i][j] === null) {
y1 = zeroH;
} else {
y1 = zeroH - y1 / yRatio;
y2 = zeroH - y2 / yRatio;
}
var barHeight = Math.abs(y2 - y1);
pathTo = graphics.move(barXPosition, zeroH);
pathFrom = graphics.move(barXPosition, y1);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPathFrom(realIndex, j, true);
}
pathTo = graphics.move(barXPosition, y2) + graphics.line(barXPosition + barWidth, y2) + graphics.line(barXPosition + barWidth, y1) + graphics.line(barXPosition, y1) + graphics.line(barXPosition, y2 - strokeWidth / 2);
pathFrom = pathFrom + graphics.move(barXPosition, y1) + graphics.line(barXPosition + barWidth, y1) + graphics.line(barXPosition + barWidth, y1) + graphics.line(barXPosition, y1);
if (!w.globals.isXNumeric) {
x = x + xDivision;
}
return {
pathTo: pathTo,
pathFrom: pathFrom,
barHeight: barHeight,
x: x,
y: y2,
barXPosition: barXPosition
};
}
}, {
key: 'drawRangeBarPaths',
value: function drawRangeBarPaths(_ref2) {
var indexes = _ref2.indexes,
x = _ref2.x,
y = _ref2.y,
yDivision = _ref2.yDivision,
pathTo = _ref2.pathTo,
pathFrom = _ref2.pathFrom,
barHeight = _ref2.barHeight,
zeroW = _ref2.zeroW;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var i = indexes.i;
var j = indexes.j;
var realIndex = indexes.realIndex;
var x1 = zeroW;
var x2 = zeroW;
if (w.globals.isXNumeric) {
y = (w.globals.seriesX[i][j] - w.globals.minX) / this.invertedXRatio - barHeight;
}
var barYPosition = y + barHeight * this.visibleI;
if (typeof this.series[i][j] !== 'undefined' && this.series[i][j] !== null) {
x1 = zeroW + this.seriesRangeStart[i][j] / this.invertedYRatio;
x2 = zeroW + this.seriesRangeEnd[i][j] / this.invertedYRatio;
}
pathTo = graphics.move(zeroW, barYPosition);
pathFrom = graphics.move(zeroW, barYPosition);
if (w.globals.previousPaths.length > 0) {
pathFrom = this.getPathFrom(realIndex, j);
}
var barWidth = Math.abs(x2 - x1);
pathTo = graphics.move(x1, barYPosition) + graphics.line(x2, barYPosition) + graphics.line(x2, barYPosition + barHeight) + graphics.line(x1, barYPosition + barHeight) + graphics.line(x1, barYPosition);
pathFrom = pathFrom + graphics.line(x1, barYPosition) + graphics.line(x1, barYPosition + barHeight) + graphics.line(x1, barYPosition + barHeight) + graphics.line(x1, barYPosition);
if (!w.globals.isXNumeric) {
y = y + yDivision;
}
return {
pathTo: pathTo,
pathFrom: pathFrom,
barWidth: barWidth,
x: x2,
y: y,
barYPosition: barYPosition
};
}
}, {
key: 'getRangeValue',
value: function getRangeValue(i, j) {
var w = this.w;
return {
start: w.globals.seriesRangeStart[i][j],
end: w.globals.seriesRangeEnd[i][j]
};
}
}]);
return RangeBar;
}(_Bar3.default);
exports.default = RangeBar;
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Options = __webpack_require__(18);
var _Options2 = _interopRequireDefault(_Options);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Annotations Class for drawing lines/rects on both xaxis and yaxis.
*
* @module Annotations
**/
var Annotations = function () {
function Annotations(ctx) {
_classCallCheck(this, Annotations);
this.ctx = ctx;
this.w = ctx.w;
this.graphics = new _Graphics2.default(this.ctx);
if (this.w.globals.isBarHorizontal) {
this.invertAxis = true;
}
this.xDivision = this.w.globals.gridWidth / this.w.globals.dataPoints;
}
_createClass(Annotations, [{
key: 'drawAnnotations',
value: function drawAnnotations() {
var w = this.w;
if (w.globals.axisCharts) {
var yAnnotations = this.drawYAxisAnnotations();
var xAnnotations = this.drawXAxisAnnotations();
var pointAnnotations = this.drawPointAnnotations();
var initialAnim = w.config.chart.animations.enabled;
var annoArray = [yAnnotations, xAnnotations, pointAnnotations];
var annoElArray = [xAnnotations.node, yAnnotations.node, pointAnnotations.node];
for (var i = 0; i < 3; i++) {
w.globals.dom.elGraphical.add(annoArray[i]);
if (initialAnim && !w.globals.resized && !w.globals.dataChanged) {
annoElArray[i].classList.add('hidden');
}
w.globals.delayedElements.push({ el: annoElArray[i], index: 0 });
}
// background sizes needs to be calculated after text is drawn, so calling them last
this.annotationsBackground();
}
}
}, {
key: 'addXaxisAnnotation',
value: function addXaxisAnnotation(anno, parent, index) {
var w = this.w;
var min = this.invertAxis ? w.globals.minY : w.globals.minX;
var range = this.invertAxis ? w.globals.yRange[0] : w.globals.xRange;
var x1 = (anno.x - min) / (range / w.globals.gridWidth);
var text = anno.label.text;
if (w.config.xaxis.type === 'category' || w.config.xaxis.convertedCatToNumeric) {
var catIndex = w.globals.labels.indexOf(anno.x);
var xLabel = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-texts-g text:nth-child(' + (catIndex + 1) + ')');
if (xLabel) {
x1 = parseFloat(xLabel.getAttribute('x'));
}
}
var strokeDashArray = anno.strokeDashArray;
if (x1 < 0 || x1 > w.globals.gridWidth) return;
if (anno.x2 === null) {
var line = this.graphics.drawLine(x1 + anno.offsetX, // x1
0 + anno.offsetY, // y1
x1 + anno.offsetX, // x2
w.globals.gridHeight + anno.offsetY, // y2
anno.borderColor, // lineColor
strokeDashArray //dashArray
);
parent.appendChild(line.node);
} else {
var x2 = (anno.x2 - min) / (range / w.globals.gridWidth);
if (x2 < x1) {
var temp = x1;
x1 = x2;
x2 = temp;
}
if (text) {
var rect = this.graphics.drawRect(x1 + anno.offsetX, // x1
0 + anno.offsetY, // y1
x2 - x1, // x2
w.globals.gridHeight + anno.offsetY, // y2
0, // radius
anno.fillColor, // color
anno.opacity, // opacity,
1, // strokeWidth
anno.borderColor, // strokeColor
strokeDashArray // stokeDashArray
);
parent.appendChild(rect.node);
}
}
var textY = anno.label.position === 'top' ? -3 : w.globals.gridHeight;
var elText = this.graphics.drawText({
x: x1 + anno.label.offsetX,
y: textY + anno.label.offsetY,
text: text,
textAnchor: anno.label.textAnchor,
fontSize: anno.label.style.fontSize,
fontFamily: anno.label.style.fontFamily,
foreColor: anno.label.style.color,
cssClass: 'apexcharts-xaxis-annotation-label ' + anno.label.style.cssClass
});
elText.attr({
rel: index
});
parent.appendChild(elText.node);
// after placing the annotations on svg, set any vertically placed annotations
this.setOrientations(anno, index);
}
}, {
key: 'drawXAxisAnnotations',
value: function drawXAxisAnnotations() {
var _this = this;
var w = this.w;
var elg = this.graphics.group({
class: 'apexcharts-xaxis-annotations'
});
w.config.annotations.xaxis.map(function (anno, index) {
_this.addXaxisAnnotation(anno, elg.node, index);
});
return elg;
}
}, {
key: 'addYaxisAnnotation',
value: function addYaxisAnnotation(anno, parent, index) {
var w = this.w;
var strokeDashArray = anno.strokeDashArray;
var y1 = void 0;
var y2 = void 0;
if (this.invertAxis) {
var catIndex = w.globals.labels.indexOf(anno.y);
var xLabel = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis-texts-g text:nth-child(' + (catIndex + 1) + ')');
if (xLabel) {
y1 = parseFloat(xLabel.getAttribute('y'));
}
} else {
y1 = w.globals.gridHeight - (anno.y - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
if (w.config.yaxis[anno.yAxisIndex] && w.config.yaxis[anno.yAxisIndex].reversed) {
y1 = (anno.y - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
}
}
var text = anno.label.text;
if (anno.y2 === null) {
var line = this.graphics.drawLine(0 + anno.offsetX, // x1
y1 + anno.offsetY, // y1
w.globals.gridWidth + anno.offsetX, // x2
y1 + anno.offsetY, // y2
anno.borderColor, // lineColor
strokeDashArray // dashArray
);
parent.appendChild(line.node);
} else {
if (this.invertAxis) {
var _catIndex = w.globals.labels.indexOf(anno.y2);
var _xLabel = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis-texts-g text:nth-child(' + (_catIndex + 1) + ')');
if (_xLabel) {
y2 = parseFloat(_xLabel.getAttribute('y'));
}
} else {
y2 = w.globals.gridHeight - (anno.y2 - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
if (w.config.yaxis[anno.yAxisIndex] && w.config.yaxis[anno.yAxisIndex].reversed) {
y2 = (anno.y2 - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
}
}
if (y2 > y1) {
var temp = y1;
y1 = y2;
y2 = temp;
}
if (text) {
var rect = this.graphics.drawRect(0 + anno.offsetX, // x1
y2 + anno.offsetY, // y1
w.globals.gridWidth + anno.offsetX, // x2
y1 - y2, // y2
0, // radius
anno.fillColor, // color
anno.opacity, // opacity,
1, // strokeWidth
anno.borderColor, // strokeColor
strokeDashArray // stokeDashArray
);
parent.appendChild(rect.node);
}
}
var textX = anno.label.position === 'right' ? w.globals.gridWidth : 0;
var elText = this.graphics.drawText({
x: textX + anno.label.offsetX,
y: (y2 || y1) + anno.label.offsetY - 3,
text: text,
textAnchor: anno.label.textAnchor,
fontSize: anno.label.style.fontSize,
fontFamily: anno.label.style.fontFamily,
foreColor: anno.label.style.color,
cssClass: 'apexcharts-yaxis-annotation-label ' + anno.label.style.cssClass
});
elText.attr({
rel: index
});
parent.appendChild(elText.node);
}
}, {
key: 'drawYAxisAnnotations',
value: function drawYAxisAnnotations() {
var _this2 = this;
var w = this.w;
var elg = this.graphics.group({
class: 'apexcharts-yaxis-annotations'
});
w.config.annotations.yaxis.map(function (anno, index) {
_this2.addYaxisAnnotation(anno, elg.node, index);
});
return elg;
}
}, {
key: 'clearAnnotations',
value: function clearAnnotations(ctx) {
var w = ctx.w;
var annos = w.globals.dom.baseEl.querySelectorAll('.apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations');
annos = _Utils2.default.listToArray(annos);
annos.forEach(function (a) {
while (a.firstChild) {
a.removeChild(a.firstChild);
}
});
}
}, {
key: 'addPointAnnotation',
value: function addPointAnnotation(anno, parent, index) {
var w = this.w;
var x = 0;
var y = 0;
var pointY = 0;
if (this.invertAxis) {
console.warn('Point annotation is not supported in horizontal bar charts.');
}
if (typeof anno.x === 'string') {
var catIndex = w.globals.labels.indexOf(anno.x);
var xLabel = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-texts-g text:nth-child(' + (catIndex + 1) + ')');
var xPos = parseFloat(xLabel.getAttribute('x'));
x = xPos;
var annoY = anno.y;
if (anno.y === null) {
annoY = w.globals.series[anno.seriesIndex][catIndex];
}
y = w.globals.gridHeight - (annoY - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight) - parseInt(anno.label.style.fontSize) - anno.marker.size;
pointY = w.globals.gridHeight - (annoY - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
if (w.config.yaxis[anno.yAxisIndex] && w.config.yaxis[anno.yAxisIndex].reversed) {
y = (annoY - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight) + parseInt(anno.label.style.fontSize) + anno.marker.size;
pointY = (annoY - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
}
} else {
x = (anno.x - w.globals.minX) / (w.globals.xRange / w.globals.gridWidth);
y = w.globals.gridHeight - (parseFloat(anno.y) - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight) - parseInt(anno.label.style.fontSize) - anno.marker.size;
pointY = w.globals.gridHeight - (anno.y - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
if (w.config.yaxis[anno.yAxisIndex] && w.config.yaxis[anno.yAxisIndex].reversed) {
y = (parseFloat(anno.y) - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight) - parseInt(anno.label.style.fontSize) - anno.marker.size;
pointY = (anno.y - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight);
}
}
if (x < 0 || x > w.globals.gridWidth) return;
var optsPoints = {
pSize: anno.marker.size,
pWidth: anno.marker.strokeWidth,
pointFillColor: anno.marker.fillColor,
pointStrokeColor: anno.marker.strokeColor,
shape: anno.marker.shape,
radius: anno.marker.radius,
class: 'apexcharts-point-annotation-marker ' + anno.marker.cssClass
};
var point = this.graphics.drawMarker(x + anno.marker.offsetX, pointY + anno.marker.offsetY, optsPoints);
parent.appendChild(point.node);
var text = anno.label.text ? anno.label.text : '';
var elText = this.graphics.drawText({
x: x + anno.label.offsetX,
y: y + anno.label.offsetY,
text: text,
textAnchor: anno.label.textAnchor,
fontSize: anno.label.style.fontSize,
fontFamily: anno.label.style.fontFamily,
foreColor: anno.label.style.color,
cssClass: 'apexcharts-point-annotation-label ' + anno.label.style.cssClass
});
elText.attr({
rel: index
});
parent.appendChild(elText.node);
if (anno.customSVG.SVG) {
var g = this.graphics.group({
class: 'apexcharts-point-annotations-custom-svg ' + anno.customSVG.cssClass
});
g.attr({
transform: 'translate(' + (x + anno.customSVG.offsetX) + ', ' + (y + anno.customSVG.offsetY) + ')'
});
g.node.innerHTML = anno.customSVG.SVG;
parent.appendChild(g.node);
}
}
}, {
key: 'drawPointAnnotations',
value: function drawPointAnnotations() {
var _this3 = this;
var w = this.w;
var elg = this.graphics.group({
class: 'apexcharts-point-annotations'
});
w.config.annotations.points.map(function (anno, index) {
_this3.addPointAnnotation(anno, elg.node, index);
});
return elg;
}
}, {
key: 'setOrientations',
value: function setOrientations(anno) {
var annoIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var w = this.w;
if (anno.label.orientation === 'vertical') {
var i = annoIndex !== null ? annoIndex : 0;
var xAnno = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel=\'' + i + '\']');
if (xAnno !== null) {
var xAnnoCoord = xAnno.getBoundingClientRect();
xAnno.setAttribute('x', parseFloat(xAnno.getAttribute('x')) - xAnnoCoord.height + 4);
if (anno.label.position === 'top') {
xAnno.setAttribute('y', parseFloat(xAnno.getAttribute('y')) + xAnnoCoord.width);
} else {
xAnno.setAttribute('y', parseFloat(xAnno.getAttribute('y')) - xAnnoCoord.width);
}
var annoRotatingCenter = this.graphics.rotateAroundCenter(xAnno);
var x = annoRotatingCenter.x;
var y = annoRotatingCenter.y;
xAnno.setAttribute('transform', 'rotate(-90 ' + x + ' ' + y + ')');
}
}
}
}, {
key: 'addBackgroundToAnno',
value: function addBackgroundToAnno(annoEl, anno) {
var w = this.w;
if (!anno.label.text) return null;
var elGridRect = w.globals.dom.baseEl.querySelector('.apexcharts-grid').getBoundingClientRect();
var coords = annoEl.getBoundingClientRect();
var pleft = anno.label.style.padding.left;
var pright = anno.label.style.padding.right;
var ptop = anno.label.style.padding.top;
var pbottom = anno.label.style.padding.bottom;
if (anno.label.orientation === 'vertical') {
ptop = anno.label.style.padding.left;
pbottom = anno.label.style.padding.right;
pleft = anno.label.style.padding.top;
pright = anno.label.style.padding.bottom;
}
var x1 = coords.left - elGridRect.left - pleft;
var y1 = coords.top - elGridRect.top - ptop;
var elRect = this.graphics.drawRect(x1, y1, coords.width + pleft + pright, coords.height + ptop + pbottom, 0, anno.label.style.background, 1, anno.label.borderWidth, anno.label.borderColor, 0);
return elRect;
}
}, {
key: 'annotationsBackground',
value: function annotationsBackground() {
var _this4 = this;
var w = this.w;
var add = function add(anno, i, type) {
var annoLabel = w.globals.dom.baseEl.querySelector('.apexcharts-' + type + '-annotations .apexcharts-' + type + '-annotation-label[rel=\'' + i + '\']');
if (annoLabel) {
var parent = annoLabel.parentNode;
var elRect = _this4.addBackgroundToAnno(annoLabel, anno);
if (elRect) {
parent.insertBefore(elRect.node, annoLabel);
}
}
};
w.config.annotations.xaxis.map(function (anno, i) {
add(anno, i, 'xaxis');
});
w.config.annotations.yaxis.map(function (anno, i) {
add(anno, i, 'yaxis');
});
w.config.annotations.points.map(function (anno, i) {
add(anno, i, 'point');
});
}
}, {
key: 'addText',
value: function addText(params, pushToMemory, context) {
var x = params.x,
y = params.y,
text = params.text,
textAnchor = params.textAnchor,
_params$appendTo = params.appendTo,
appendTo = _params$appendTo === undefined ? '.apexcharts-inner' : _params$appendTo,
foreColor = params.foreColor,
fontSize = params.fontSize,
fontFamily = params.fontFamily,
cssClass = params.cssClass,
backgroundColor = params.backgroundColor,
borderWidth = params.borderWidth,
strokeDashArray = params.strokeDashArray,
radius = params.radius,
borderColor = params.borderColor,
_params$paddingLeft = params.paddingLeft,
paddingLeft = _params$paddingLeft === undefined ? 4 : _params$paddingLeft,
_params$paddingRight = params.paddingRight,
paddingRight = _params$paddingRight === undefined ? 4 : _params$paddingRight,
_params$paddingBottom = params.paddingBottom,
paddingBottom = _params$paddingBottom === undefined ? 2 : _params$paddingBottom,
_params$paddingTop = params.paddingTop,
paddingTop = _params$paddingTop === undefined ? 2 : _params$paddingTop;
var me = context;
var w = me.w;
var parentNode = w.globals.dom.baseEl.querySelector(appendTo);
var elText = this.graphics.drawText({
x: x,
y: y,
text: text,
textAnchor: textAnchor || 'start',
fontSize: fontSize || '12px',
fontFamily: fontFamily || w.config.chart.fontFamily,
foreColor: foreColor || w.config.chart.foreColor,
cssClass: true ? cssClass : ''
});
parentNode.appendChild(elText.node);
var textRect = elText.bbox();
if (text) {
var elRect = this.graphics.drawRect(textRect.x - paddingLeft, textRect.y - paddingTop, textRect.width + paddingLeft + paddingRight, textRect.height + paddingBottom + paddingTop, radius, backgroundColor, 1, borderWidth, borderColor, strokeDashArray);
elText.before(elRect);
}
if (pushToMemory) {
w.globals.memory.methodsToExec.push({
context: me,
method: me.addText,
params: {
x: x,
y: y,
text: text,
textAnchor: textAnchor,
appendTo: appendTo,
foreColor: foreColor,
fontSize: fontSize,
cssClass: cssClass,
backgroundColor: backgroundColor,
borderWidth: borderWidth,
strokeDashArray: strokeDashArray,
radius: radius,
borderColor: borderColor,
paddingLeft: paddingLeft,
paddingRight: paddingRight,
paddingBottom: paddingBottom,
paddingTop: paddingTop
}
});
}
return context;
}
}, {
key: 'addPointAnnotationExternal',
value: function addPointAnnotationExternal(params, pushToMemory, context) {
if (typeof this.invertAxis === 'undefined') {
this.invertAxis = context.w.globals.isBarHorizontal;
}
this.addAnnotationExternal({
params: params,
pushToMemory: pushToMemory,
context: context,
type: 'point',
contextMethod: context.addPointAnnotation
});
return context;
}
}, {
key: 'addYaxisAnnotationExternal',
value: function addYaxisAnnotationExternal(params, pushToMemory, context) {
this.addAnnotationExternal({
params: params,
pushToMemory: pushToMemory,
context: context,
type: 'yaxis',
contextMethod: context.addYaxisAnnotation
});
return context;
}
// The addXaxisAnnotation method requires a parent class, and user calling this method externally on the chart instance may not specify parent, hence a different method
}, {
key: 'addXaxisAnnotationExternal',
value: function addXaxisAnnotationExternal(params, pushToMemory, context) {
this.addAnnotationExternal({
params: params,
pushToMemory: pushToMemory,
context: context,
type: 'xaxis',
contextMethod: context.addXaxisAnnotation
});
return context;
}
}, {
key: 'addAnnotationExternal',
value: function addAnnotationExternal(_ref) {
var params = _ref.params,
pushToMemory = _ref.pushToMemory,
context = _ref.context,
type = _ref.type,
contextMethod = _ref.contextMethod;
var me = context;
var w = me.w;
var parent = w.globals.dom.baseEl.querySelector('.apexcharts-' + type + '-annotations');
var index = parent.childNodes.length + 1;
var opt = new _Options2.default();
var axesAnno = Object.assign({}, type === 'xaxis' ? opt.xAxisAnnotation : type === 'yaxis' ? opt.yAxisAnnotation : opt.pointAnnotation);
var anno = _Utils2.default.extend(axesAnno, params);
switch (type) {
case 'xaxis':
this.addXaxisAnnotation(anno, parent, index);
break;
case 'yaxis':
this.addYaxisAnnotation(anno, parent, index);
break;
case 'point':
this.addPointAnnotation(anno, parent, index);
break;
}
// add background
var axesAnnoLabel = w.globals.dom.baseEl.querySelector('.apexcharts-' + type + '-annotations .apexcharts-' + type + '-annotation-label[rel=\'' + index + '\']');
var elRect = this.addBackgroundToAnno(axesAnnoLabel, anno);
if (elRect) {
parent.insertBefore(elRect.node, axesAnnoLabel);
}
if (pushToMemory) {
w.globals.memory.methodsToExec.push({
context: me,
method: contextMethod,
params: params
});
}
return context;
}
}]);
return Annotations;
}();
exports.default = Annotations;
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Config = __webpack_require__(17);
var _Config2 = _interopRequireDefault(_Config);
var _Globals = __webpack_require__(50);
var _Globals2 = _interopRequireDefault(_Globals);
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 Base Class for extending user options with pre-defined ApexCharts config.
*
* @module Base
**/
var Base = function () {
function Base(opts) {
_classCallCheck(this, Base);
this.opts = opts;
}
_createClass(Base, [{
key: 'init',
value: function init() {
var config = new _Config2.default(this.opts).init();
var globals = new _Globals2.default().init(config);
var w = {
config: config,
globals: globals
};
return w;
}
}]);
return Base;
}();
exports.default = Base;
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Bar = __webpack_require__(8);
var _Bar2 = _interopRequireDefault(_Bar);
var _BarStacked = __webpack_require__(33);
var _BarStacked2 = _interopRequireDefault(_BarStacked);
var _CandleStick = __webpack_require__(34);
var _CandleStick2 = _interopRequireDefault(_CandleStick);
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Crosshairs = __webpack_require__(20);
var _Crosshairs2 = _interopRequireDefault(_Crosshairs);
var _DateTime = __webpack_require__(11);
var _DateTime2 = _interopRequireDefault(_DateTime);
var _HeatMap = __webpack_require__(35);
var _HeatMap2 = _interopRequireDefault(_HeatMap);
var _Pie = __webpack_require__(12);
var _Pie2 = _interopRequireDefault(_Pie);
var _Radar = __webpack_require__(37);
var _Radar2 = _interopRequireDefault(_Radar);
var _Radial = __webpack_require__(38);
var _Radial2 = _interopRequireDefault(_Radial);
var _RangeBar = __webpack_require__(39);
var _RangeBar2 = _interopRequireDefault(_RangeBar);
var _Line = __webpack_require__(36);
var _Line2 = _interopRequireDefault(_Line);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _XAxis = __webpack_require__(15);
var _XAxis2 = _interopRequireDefault(_XAxis);
var _YAxis = __webpack_require__(16);
var _YAxis2 = _interopRequireDefault(_YAxis);
var _Range = __webpack_require__(22);
var _Range2 = _interopRequireDefault(_Range);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Scales = __webpack_require__(14);
var _Scales2 = _interopRequireDefault(_Scales);
var _Series = __webpack_require__(7);
var _Series2 = _interopRequireDefault(_Series);
var _TimeScale = __webpack_require__(46);
var _TimeScale2 = _interopRequireDefault(_TimeScale);
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 Core Class responsible for major calculations and creating elements.
*
* @module Core
**/
var Core = function () {
function Core(el, ctx) {
_classCallCheck(this, Core);
this.ctx = ctx;
this.w = ctx.w;
this.el = el;
this.coreUtils = new _CoreUtils2.default(this.ctx);
this.twoDSeries = [];
this.threeDSeries = [];
this.twoDSeriesX = [];
}
// get data and store into appropriate vars
_createClass(Core, [{
key: 'setupElements',
value: function setupElements() {
var gl = this.w.globals;
var cnf = this.w.config;
// const graphics = new Graphics(this.ctx)
var ct = cnf.chart.type;
var axisChartsArrTypes = ['line', 'area', 'bar', 'rangeBar',
// 'rangeArea',
'candlestick', 'radar', 'scatter', 'bubble', 'heatmap'];
var xyChartsArrTypes = ['line', 'area', 'bar', 'rangeBar',
// 'rangeArea',
'candlestick', 'scatter', 'bubble'];
gl.axisCharts = axisChartsArrTypes.indexOf(ct) > -1;
gl.xyCharts = xyChartsArrTypes.indexOf(ct) > -1;
gl.isBarHorizontal = (cnf.chart.type === 'bar' || cnf.chart.type === 'rangeBar') && cnf.plotOptions.bar.horizontal;
gl.chartClass = '.apexcharts' + gl.cuid;
gl.dom.baseEl = this.el;
gl.dom.elWrap = document.createElement('div');
_Graphics2.default.setAttrs(gl.dom.elWrap, {
id: gl.chartClass.substring(1),
class: 'apexcharts-canvas ' + gl.chartClass.substring(1)
});
this.el.appendChild(gl.dom.elWrap);
gl.dom.Paper = new window.SVG.Doc(gl.dom.elWrap);
gl.dom.Paper.attr({
class: 'apexcharts-svg',
'xmlns:data': 'ApexChartsNS',
transform: 'translate(' + cnf.chart.offsetX + ', ' + cnf.chart.offsetY + ')'
});
gl.dom.Paper.node.style.background = cnf.chart.background;
this.setSVGDimensions();
gl.dom.elGraphical = gl.dom.Paper.group().attr({
class: 'apexcharts-inner apexcharts-graphical'
});
gl.dom.elDefs = gl.dom.Paper.defs();
gl.dom.elLegendWrap = document.createElement('div');
gl.dom.elLegendWrap.classList.add('apexcharts-legend');
gl.dom.elWrap.appendChild(gl.dom.elLegendWrap);
// gl.dom.Paper.add(gl.dom.elLegendWrap)
gl.dom.Paper.add(gl.dom.elGraphical);
gl.dom.elGraphical.add(gl.dom.elDefs);
}
}, {
key: 'plotChartType',
value: function plotChartType(ser, xyRatios) {
var w = this.w;
var cnf = w.config;
var gl = w.globals;
var lineSeries = {
series: [],
i: []
};
var areaSeries = {
series: [],
i: []
};
var scatterSeries = {
series: [],
i: []
};
var bubbleSeries = {
series: [],
i: []
};
var columnSeries = {
series: [],
i: []
};
var candlestickSeries = {
series: [],
i: []
};
gl.series.map(function (series, st) {
// if user has specified a particular type for particular series
if (typeof ser[st].type !== 'undefined') {
if (ser[st].type === 'column' || ser[st].type === 'bar') {
w.config.plotOptions.bar.horizontal = false; // horizontal bars not supported in mixed charts, hence forcefully set to false
columnSeries.series.push(series);
columnSeries.i.push(st);
} else if (ser[st].type === 'area') {
areaSeries.series.push(series);
areaSeries.i.push(st);
} else if (ser[st].type === 'line') {
lineSeries.series.push(series);
lineSeries.i.push(st);
} else if (ser[st].type === 'scatter') {
scatterSeries.series.push(series);
scatterSeries.i.push(st);
} else if (ser[st].type === 'bubble') {
bubbleSeries.series.push(series);
bubbleSeries.i.push(st);
} else if (ser[st].type === 'candlestick') {
candlestickSeries.series.push(series);
candlestickSeries.i.push(st);
} else {
// user has specified type, but it is not valid (other than line/area/column)
console.warn('You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble');
}
gl.comboCharts = true;
} else {
lineSeries.series.push(series);
lineSeries.i.push(st);
}
});
var line = new _Line2.default(this.ctx, xyRatios);
var candlestick = new _CandleStick2.default(this.ctx, xyRatios);
var pie = new _Pie2.default(this.ctx);
var radialBar = new _Radial2.default(this.ctx);
var rangeBar = new _RangeBar2.default(this.ctx, xyRatios);
var radar = new _Radar2.default(this.ctx);
var elGraph = [];
if (gl.comboCharts) {
if (areaSeries.series.length > 0) {
elGraph.push(line.draw(areaSeries.series, 'area', areaSeries.i));
}
if (columnSeries.series.length > 0) {
if (w.config.chart.stacked) {
var barStacked = new _BarStacked2.default(this.ctx, xyRatios);
elGraph.push(barStacked.draw(columnSeries.series, columnSeries.i));
} else {
var bar = new _Bar2.default(this.ctx, xyRatios);
elGraph.push(bar.draw(columnSeries.series, columnSeries.i));
}
}
if (lineSeries.series.length > 0) {
elGraph.push(line.draw(lineSeries.series, 'line', lineSeries.i));
}
if (candlestickSeries.series.length > 0) {
elGraph.push(candlestick.draw(candlestickSeries.series, candlestickSeries.i));
}
if (scatterSeries.series.length > 0) {
var scatterLine = new _Line2.default(this.ctx, xyRatios, true);
elGraph.push(scatterLine.draw(scatterSeries.series, 'scatter', scatterSeries.i));
}
// TODO: allow bubble series in a combo chart
// if (bubbleSeries.series.length > 0) {
// const bubbleLine = new Line(this.ctx, xyRatios, true)
// elGraph.push(
// bubbleLine.draw(bubbleSeries.series, 'bubble', bubbleSeries.i)
// )
// }
} else {
switch (cnf.chart.type) {
case 'line':
elGraph = line.draw(gl.series, 'line');
break;
case 'area':
elGraph = line.draw(gl.series, 'area');
break;
case 'bar':
if (cnf.chart.stacked) {
var _barStacked = new _BarStacked2.default(this.ctx, xyRatios);
elGraph = _barStacked.draw(gl.series);
} else {
var _bar = new _Bar2.default(this.ctx, xyRatios);
elGraph = _bar.draw(gl.series);
}
break;
case 'candlestick':
var candleStick = new _CandleStick2.default(this.ctx, xyRatios);
elGraph = candleStick.draw(gl.series);
break;
case 'rangeBar':
elGraph = rangeBar.draw(gl.series);
break;
case 'heatmap':
var heatmap = new _HeatMap2.default(this.ctx, xyRatios);
elGraph = heatmap.draw(gl.series);
break;
case 'pie':
case 'donut':
elGraph = pie.draw(gl.series);
break;
case 'radialBar':
elGraph = radialBar.draw(gl.series);
break;
case 'radar':
elGraph = radar.draw(gl.series);
break;
default:
elGraph = line.draw(gl.series);
}
}
return elGraph;
}
}, {
key: 'setSVGDimensions',
value: function setSVGDimensions() {
var gl = this.w.globals;
var cnf = this.w.config;
gl.svgWidth = cnf.chart.width;
gl.svgHeight = cnf.chart.height;
var elDim = _Utils2.default.getDimensions(this.el);
var widthUnit = cnf.chart.width.toString().split(/[0-9]+/g).pop();
if (widthUnit === '%') {
if (_Utils2.default.isNumber(elDim[0])) {
if (elDim[0].width === 0) {
elDim = _Utils2.default.getDimensions(this.el.parentNode);
}
gl.svgWidth = elDim[0] * parseInt(cnf.chart.width) / 100;
}
} else if (widthUnit === 'px' || widthUnit === '') {
gl.svgWidth = parseInt(cnf.chart.width);
}
if (gl.svgHeight !== 'auto' && gl.svgHeight !== '') {
var heightUnit = cnf.chart.height.toString().split(/[0-9]+/g).pop();
if (heightUnit === '%') {
var elParentDim = _Utils2.default.getDimensions(this.el.parentNode);
gl.svgHeight = elParentDim[1] * parseInt(cnf.chart.height) / 100;
} else {
gl.svgHeight = parseInt(cnf.chart.height);
}
} else {
if (gl.axisCharts) {
gl.svgHeight = gl.svgWidth / 1.61;
} else {
gl.svgHeight = gl.svgWidth;
}
}
_Graphics2.default.setAttrs(gl.dom.Paper.node, {
width: gl.svgWidth,
height: gl.svgHeight
});
// gl.dom.Paper.node.parentNode.parentNode.style.minWidth = gl.svgWidth + "px";
var offsetY = cnf.chart.sparkline.enabled ? 0 : gl.axisCharts ? cnf.chart.parentHeightOffset : 0;
gl.dom.Paper.node.parentNode.parentNode.style.minHeight = gl.svgHeight + offsetY + 'px';
gl.dom.elWrap.style.width = gl.svgWidth + 'px';
gl.dom.elWrap.style.height = gl.svgHeight + 'px';
}
}, {
key: 'shiftGraphPosition',
value: function shiftGraphPosition() {
var gl = this.w.globals;
var tY = gl.translateY;
var tX = gl.translateX;
var scalingAttrs = {
transform: 'translate(' + tX + ', ' + tY + ')'
};
_Graphics2.default.setAttrs(gl.dom.elGraphical.node, scalingAttrs);
}
/*
** All the calculations for setting range in charts will be done here
*/
}, {
key: 'coreCalculations',
value: function coreCalculations() {
var range = new _Range2.default(this.ctx);
range.init();
}
}, {
key: 'resetGlobals',
value: function resetGlobals() {
var _this = this;
var gl = this.w.globals;
gl.series = [];
gl.seriesCandleO = [];
gl.seriesCandleH = [];
gl.seriesCandleL = [];
gl.seriesCandleC = [];
gl.seriesRangeStart = [];
gl.seriesRangeEnd = [];
gl.seriesPercent = [];
gl.seriesX = [];
gl.seriesZ = [];
gl.seriesNames = [];
gl.seriesTotals = [];
gl.stackedSeriesTotals = [];
gl.labels = [];
gl.timelineLabels = [];
gl.noLabelsProvided = false;
gl.timescaleTicks = [];
gl.resizeTimer = null;
gl.selectionResizeTimer = null;
gl.seriesXvalues = function () {
return _this.w.config.series.map(function (s) {
return [];
});
}();
gl.seriesYvalues = function () {
return _this.w.config.series.map(function (s) {
return [];
});
}();
gl.delayedElements = [];
gl.pointsArray = [];
gl.dataLabelsRects = [];
gl.isXNumeric = false;
gl.isDataXYZ = false;
gl.maxY = -Number.MAX_VALUE;
gl.minY = Number.MIN_VALUE;
gl.minYArr = [];
gl.maxYArr = [];
gl.maxX = -Number.MAX_VALUE;
gl.minX = Number.MAX_VALUE;
gl.initialmaxX = -Number.MAX_VALUE;
gl.initialminX = Number.MAX_VALUE;
gl.maxDate = 0;
gl.minDate = Number.MAX_VALUE;
gl.minZ = Number.MAX_VALUE;
gl.maxZ = -Number.MAX_VALUE;
gl.minXDiff = Number.MAX_VALUE;
gl.yAxisScale = [];
gl.xAxisScale = null;
gl.xAxisTicksPositions = [];
gl.yLabelsCoords = [];
gl.yTitleCoords = [];
gl.xRange = 0;
gl.yRange = [];
gl.zRange = 0;
gl.dataPoints = 0;
}
}, {
key: 'isMultipleY',
value: function isMultipleY() {
// user has supplied an array in yaxis property. So, turn on multipleYAxis flag
if (this.w.config.yaxis.constructor === Array && this.w.config.yaxis.length > 1) {
// first, turn off stacking if multiple y axis
this.w.config.chart.stacked = false;
this.w.globals.isMultipleYAxis = true;
return true;
}
}
}, {
key: 'excludeCollapsedSeriesInYAxis',
value: function excludeCollapsedSeriesInYAxis() {
var _this2 = this;
var w = this.w;
w.globals.ignoreYAxisIndexes = w.globals.collapsedSeries.map(function (collapsed, i) {
if (_this2.w.globals.isMultipleYAxis) {
return collapsed.index;
}
});
}
}, {
key: 'isMultiFormat',
value: function isMultiFormat() {
return this.isFormatXY() || this.isFormat2DArray();
}
// given format is [{x, y}, {x, y}]
}, {
key: 'isFormatXY',
value: function isFormatXY() {
var series = this.w.config.series.slice();
var sr = new _Series2.default(this.ctx);
this.activeSeriesIndex = sr.getActiveConfigSeriesIndex();
if (typeof series[this.activeSeriesIndex].data !== 'undefined' && series[this.activeSeriesIndex].data.length > 0 && series[this.activeSeriesIndex].data[0] !== null && typeof series[this.activeSeriesIndex].data[0].x !== 'undefined' && series[this.activeSeriesIndex].data[0] !== null) {
return true;
}
}
// given format is [[x, y], [x, y]]
}, {
key: 'isFormat2DArray',
value: function isFormat2DArray() {
var series = this.w.config.series.slice();
var sr = new _Series2.default(this.ctx);
this.activeSeriesIndex = sr.getActiveConfigSeriesIndex();
if (typeof series[this.activeSeriesIndex].data !== 'undefined' && series[this.activeSeriesIndex].data.length > 0 && typeof series[this.activeSeriesIndex].data[0] !== 'undefined' && series[this.activeSeriesIndex].data[0] !== null && series[this.activeSeriesIndex].data[0].constructor === Array) {
return true;
}
}
}, {
key: 'handleFormat2DArray',
value: function handleFormat2DArray(ser, i) {
var cnf = this.w.config;
var gl = this.w.globals;
for (var j = 0; j < ser[i].data.length; j++) {
if (typeof ser[i].data[j][1] !== 'undefined') {
if (Array.isArray(ser[i].data[j][1]) && ser[i].data[j][1].length === 4) {
this.twoDSeries.push(_Utils2.default.parseNumber(ser[i].data[j][1][3]));
} else {
this.twoDSeries.push(_Utils2.default.parseNumber(ser[i].data[j][1]));
}
gl.dataFormatXNumeric = true;
}
if (cnf.xaxis.type === 'datetime') {
// if timestamps are provided and xaxis type is datettime,
var ts = new Date(ser[i].data[j][0]);
ts = new Date(ts).getTime();
this.twoDSeriesX.push(ts);
} else {
this.twoDSeriesX.push(ser[i].data[j][0]);
}
}
for (var _j = 0; _j < ser[i].data.length; _j++) {
if (typeof ser[i].data[_j][2] !== 'undefined') {
this.threeDSeries.push(ser[i].data[_j][2]);
gl.isDataXYZ = true;
}
}
}
}, {
key: 'handleFormatXY',
value: function handleFormatXY(ser, i) {
var cnf = this.w.config;
var gl = this.w.globals;
var dt = new _DateTime2.default(this.ctx);
var activeI = i;
if (gl.collapsedSeriesIndices.indexOf(i) > -1) {
// fix #368
activeI = this.activeSeriesIndex;
}
// get series
for (var j = 0; j < ser[i].data.length; j++) {
if (typeof ser[i].data[j].y !== 'undefined') {
if (Array.isArray(ser[i].data[j].y)) {
this.twoDSeries.push(_Utils2.default.parseNumber(ser[i].data[j].y[ser[i].data[j].y.length - 1]));
} else {
this.twoDSeries.push(_Utils2.default.parseNumber(ser[i].data[j].y));
}
}
}
// get seriesX
for (var _j2 = 0; _j2 < ser[activeI].data.length; _j2++) {
var isXString = typeof ser[activeI].data[_j2].x === 'string';
var isXDate = !!dt.isValidDate(ser[activeI].data[_j2].x.toString());
if (isXString || isXDate) {
// user supplied '01/01/2017' or a date string (a JS date object is not supported)
if (isXString) {
if (cnf.xaxis.type === 'datetime' && !gl.isRangeData) {
this.twoDSeriesX.push(dt.parseDate(ser[activeI].data[_j2].x));
} else {
// a category and not a numeric x value
this.fallbackToCategory = true;
this.twoDSeriesX.push(ser[activeI].data[_j2].x);
}
} else {
if (cnf.xaxis.type === 'datetime') {
this.twoDSeriesX.push(dt.parseDate(ser[activeI].data[_j2].x.toString()));
} else {
gl.dataFormatXNumeric = true;
gl.isXNumeric = true;
this.twoDSeriesX.push(parseFloat(ser[activeI].data[_j2].x));
}
}
} else {
// a numeric value in x property
gl.isXNumeric = true;
gl.dataFormatXNumeric = true;
this.twoDSeriesX.push(ser[activeI].data[_j2].x);
}
}
if (ser[i].data[0] && typeof ser[i].data[0].z !== 'undefined') {
for (var t = 0; t < ser[i].data.length; t++) {
this.threeDSeries.push(ser[i].data[t].z);
}
gl.isDataXYZ = true;
}
}
}, {
key: 'handleRangeData',
value: function handleRangeData(ser, i) {
var gl = this.w.globals;
var range = {};
if (this.isFormat2DArray()) {
range = this.handleRangeDataFormat('array', ser, i);
} else if (this.isFormatXY()) {
range = this.handleRangeDataFormat('xy', ser, i);
}
gl.seriesRangeStart.push(range.start);
gl.seriesRangeEnd.push(range.end);
return range;
}
}, {
key: 'handleCandleStickData',
value: function handleCandleStickData(ser, i) {
var gl = this.w.globals;
var ohlc = {};
if (this.isFormat2DArray()) {
ohlc = this.handleCandleStickDataFormat('array', ser, i);
} else if (this.isFormatXY()) {
ohlc = this.handleCandleStickDataFormat('xy', ser, i);
}
gl.seriesCandleO.push(ohlc.o);
gl.seriesCandleH.push(ohlc.h);
gl.seriesCandleL.push(ohlc.l);
gl.seriesCandleC.push(ohlc.c);
return ohlc;
}
}, {
key: 'handleRangeDataFormat',
value: function handleRangeDataFormat(format, ser, i) {
var rangeStart = [];
var rangeEnd = [];
var err = 'Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts';
var serObj = new _Series2.default(this.ctx);
var activeIndex = serObj.getActiveConfigSeriesIndex();
if (format === 'array') {
if (ser[activeIndex].data[0][1].length !== 2) {
throw new Error(err);
}
for (var j = 0; j < ser[i].data.length; j++) {
rangeStart.push(ser[i].data[j][1][0]);
rangeEnd.push(ser[i].data[j][1][1]);
}
} else if (format === 'xy') {
if (ser[activeIndex].data[0].y.length !== 2) {
throw new Error(err);
}
for (var _j3 = 0; _j3 < ser[i].data.length; _j3++) {
rangeStart.push(ser[i].data[_j3].y[0]);
rangeEnd.push(ser[i].data[_j3].y[1]);
}
}
return {
start: rangeStart,
end: rangeEnd
};
}
}, {
key: 'handleCandleStickDataFormat',
value: function handleCandleStickDataFormat(format, ser, i) {
var serO = [];
var serH = [];
var serL = [];
var serC = [];
var err = 'Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick';
if (format === 'array') {
if (ser[i].data[0][1].length !== 4) {
throw new Error(err);
}
for (var j = 0; j < ser[i].data.length; j++) {
serO.push(ser[i].data[j][1][0]);
serH.push(ser[i].data[j][1][1]);
serL.push(ser[i].data[j][1][2]);
serC.push(ser[i].data[j][1][3]);
}
} else if (format === 'xy') {
if (ser[i].data[0].y.length !== 4) {
throw new Error(err);
}
for (var _j4 = 0; _j4 < ser[i].data.length; _j4++) {
serO.push(ser[i].data[_j4].y[0]);
serH.push(ser[i].data[_j4].y[1]);
serL.push(ser[i].data[_j4].y[2]);
serC.push(ser[i].data[_j4].y[3]);
}
}
return {
o: serO,
h: serH,
l: serL,
c: serC
};
}
}, {
key: 'parseDataAxisCharts',
value: function parseDataAxisCharts(ser) {
var ctx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.ctx;
var cnf = this.w.config;
var gl = this.w.globals;
var dt = new _DateTime2.default(ctx);
for (var i = 0; i < ser.length; i++) {
this.twoDSeries = [];
this.twoDSeriesX = [];
this.threeDSeries = [];
if (typeof ser[i].data === 'undefined') {
console.error("It is a possibility that you may have not included 'data' property in series.");
return;
}
if (cnf.chart.type === 'rangeBar' || cnf.chart.type === 'rangeArea' || ser[i].type === 'rangeBar' || ser[i].type === 'rangeArea') {
gl.isRangeData = true;
this.handleRangeData(ser, i);
}
if (this.isMultiFormat()) {
if (this.isFormat2DArray()) {
this.handleFormat2DArray(ser, i);
} else if (this.isFormatXY()) {
this.handleFormatXY(ser, i);
}
if (cnf.chart.type === 'candlestick' || ser[i].type === 'candlestick') {
this.handleCandleStickData(ser, i);
}
gl.series.push(this.twoDSeries);
gl.labels.push(this.twoDSeriesX);
gl.seriesX.push(this.twoDSeriesX);
if (!this.fallbackToCategory) {
gl.isXNumeric = true;
}
} else {
if (cnf.xaxis.type === 'datetime') {
// user didn't supplied [{x,y}] or [[x,y]], but single array in data.
// Also labels/categories were supplied differently
gl.isXNumeric = true;
var dates = cnf.labels.length > 0 ? cnf.labels.slice() : cnf.xaxis.categories.slice();
for (var j = 0; j < dates.length; j++) {
if (typeof dates[j] === 'string') {
var isDate = dt.isValidDate(dates[j]);
if (isDate) {
this.twoDSeriesX.push(dt.parseDate(dates[j]));
} else {
throw new Error('You have provided invalid Date format. Please provide a valid JavaScript Date');
}
}
}
gl.seriesX.push(this.twoDSeriesX);
} else if (cnf.xaxis.type === 'numeric') {
gl.isXNumeric = true;
var x = cnf.labels.length > 0 ? cnf.labels.slice() : cnf.xaxis.categories.slice();
if (x.length > 0) {
this.twoDSeriesX = x;
gl.seriesX.push(this.twoDSeriesX);
}
}
gl.labels.push(this.twoDSeriesX);
var singleArray = ser[i].data.map(function (d) {
return _Utils2.default.parseNumber(d);
});
gl.series.push(singleArray);
}
gl.seriesZ.push(this.threeDSeries);
if (ser[i].name !== undefined) {
gl.seriesNames.push(ser[i].name);
} else {
gl.seriesNames.push('series-' + parseInt(i + 1));
}
}
return this.w;
}
}, {
key: 'parseDataNonAxisCharts',
value: function parseDataNonAxisCharts(ser) {
var gl = this.w.globals;
var cnf = this.w.config;
gl.series = ser.slice();
gl.seriesNames = cnf.labels.slice();
for (var i = 0; i < gl.series.length; i++) {
if (gl.seriesNames[i] === undefined) {
gl.seriesNames.push('series-' + (i + 1));
}
}
return this.w;
}
/** User possibly set string categories in xaxis.categories or labels prop
* Or didn't set xaxis labels at all - in which case we manually do it.
* If user passed series data as [[3, 2], [4, 5]] or [{ x: 3, y: 55 }],
* this shouldn't be called
* @param {array} ser - the series which user passed to the config
*/
}, {
key: 'handleExternalLabelsData',
value: function handleExternalLabelsData(ser) {
var cnf = this.w.config;
var gl = this.w.globals;
if (cnf.xaxis.categories.length > 0) {
// user provided labels in xaxis.category prop
gl.labels = cnf.xaxis.categories;
} else if (cnf.labels.length > 0) {
// user provided labels in labels props
gl.labels = cnf.labels.slice();
} else if (this.fallbackToCategory) {
// user provided labels in x prop in [{ x: 3, y: 55 }] data, and those labels are already stored in gl.labels[0], so just re-arrange the gl.labels array
gl.labels = gl.labels[0];
} else {
// user didn't provided any labels, fallback to 1-2-3-4-5
var labelArr = [];
if (gl.axisCharts) {
// for axis charts, we get the longest series and create labels from it
for (var i = 0; i < gl.series[gl.maxValsInArrayIndex].length; i++) {
labelArr.push(i + 1);
}
// create gl.seriesX as it will be used in calculations of x positions
for (var _i = 0; _i < ser.length; _i++) {
gl.seriesX.push(labelArr);
}
// turn on the isXNumeric flag to allow minX and maxX to function properly
gl.isXNumeric = true;
}
// no series to pull labels from, put a 0-10 series
// possibly, user collapsed all series. Hence we can't work with above calc
if (labelArr.length === 0) {
labelArr = [0, 10];
for (var _i2 = 0; _i2 < ser.length; _i2++) {
gl.seriesX.push(labelArr);
}
}
// Finally, pass the labelArr in gl.labels which will be printed on x-axis
gl.labels = labelArr;
// Turn on this global flag to indicate no labels were provided by user
gl.noLabelsProvided = true;
}
}
// Segregate user provided data into appropriate vars
}, {
key: 'parseData',
value: function parseData(ser) {
var w = this.w;
var cnf = w.config;
var gl = w.globals;
this.excludeCollapsedSeriesInYAxis();
// If we detected string in X prop of series, we fallback to category x-axis
this.fallbackToCategory = false;
this.resetGlobals();
this.isMultipleY();
if (gl.axisCharts) {
// axisCharts includes line / area / column / scatter
this.parseDataAxisCharts(ser);
} else {
// non-axis charts are pie / donut
this.parseDataNonAxisCharts(ser);
}
this.coreUtils.getLargestSeries();
// set Null values to 0 in all series when user hides/shows some series
if (cnf.chart.type === 'bar' && cnf.chart.stacked) {
var series = new _Series2.default(this.ctx);
gl.series = series.setNullSeriesToZeroValues(gl.series);
}
this.coreUtils.getSeriesTotals();
if (gl.axisCharts) {
this.coreUtils.getStackedSeriesTotals();
}
this.coreUtils.getPercentSeries();
if (!gl.dataFormatXNumeric && (!gl.isXNumeric || cnf.xaxis.type === 'numeric' && cnf.labels.length === 0 && cnf.xaxis.categories.length === 0)) {
// x-axis labels couldn't be detected; hence try searching every option in config
this.handleExternalLabelsData(ser);
}
}
}, {
key: 'xySettings',
value: function xySettings() {
var xyRatios = null;
var w = this.w;
if (w.globals.axisCharts) {
if (w.config.xaxis.crosshairs.position === 'back') {
var crosshairs = new _Crosshairs2.default(this.ctx);
crosshairs.drawXCrosshairs();
}
if (w.config.yaxis[0].crosshairs.position === 'back') {
var _crosshairs = new _Crosshairs2.default(this.ctx);
_crosshairs.drawYCrosshairs();
}
xyRatios = this.coreUtils.getCalculatedRatios();
if (w.config.xaxis.type === 'datetime' && w.config.xaxis.labels.formatter === undefined) {
var ts = new _TimeScale2.default(this.ctx);
var formattedTimeScale = void 0;
if (isFinite(w.globals.minX) && isFinite(w.globals.maxX) && !w.globals.isBarHorizontal) {
formattedTimeScale = ts.calculateTimeScaleTicks(w.globals.minX, w.globals.maxX);
ts.recalcDimensionsBasedOnFormat(formattedTimeScale, false);
} else if (w.globals.isBarHorizontal) {
formattedTimeScale = ts.calculateTimeScaleTicks(w.globals.minY, w.globals.maxY);
ts.recalcDimensionsBasedOnFormat(formattedTimeScale, true);
}
}
}
return xyRatios;
}
}, {
key: 'drawAxis',
value: function drawAxis(type, xyRatios) {
var gl = this.w.globals;
var cnf = this.w.config;
var xAxis = new _XAxis2.default(this.ctx);
var yAxis = new _YAxis2.default(this.ctx);
if (gl.axisCharts && type !== 'radar') {
var elXaxis = void 0,
elYaxis = void 0;
if (gl.isBarHorizontal) {
elYaxis = yAxis.drawYaxisInversed(0);
elXaxis = xAxis.drawXaxisInversed(0);
gl.dom.elGraphical.add(elXaxis);
gl.dom.elGraphical.add(elYaxis);
} else {
elXaxis = xAxis.drawXaxis();
gl.dom.elGraphical.add(elXaxis);
cnf.yaxis.map(function (yaxe, index) {
if (gl.ignoreYAxisIndexes.indexOf(index) === -1) {
elYaxis = yAxis.drawYaxis(index);
gl.dom.Paper.add(elYaxis);
}
});
}
}
cnf.yaxis.map(function (yaxe, index) {
if (gl.ignoreYAxisIndexes.indexOf(index) === -1) {
yAxis.yAxisTitleRotate(index, yaxe.opposite);
}
});
}
}, {
key: 'setupBrushHandler',
value: function setupBrushHandler() {
var _this3 = this;
var w = this.w;
// only for brush charts
if (!w.config.chart.brush.enabled) {
return;
}
// if user has not defined a custom function for selection - we handle the brush chart
// otherwise we leave it to the user to define the functionality for selection
if (typeof w.config.chart.events.selection !== 'function') {
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target];
// retro compatibility with single target option
targets.forEach(function (target) {
var targetChart = ApexCharts.getChartByID(target);
targetChart.w.globals.brushSource = _this3.ctx;
var updateSourceChart = function updateSourceChart() {
_this3.ctx._updateOptions({
chart: {
selection: {
xaxis: {
min: targetChart.w.globals.minX,
max: targetChart.w.globals.maxX
}
}
}
}, false, false);
};
if (typeof targetChart.w.config.chart.events.zoomed !== 'function') {
targetChart.w.config.chart.events.zoomed = function () {
updateSourceChart();
};
}
if (typeof targetChart.w.config.chart.events.scrolled !== 'function') {
targetChart.w.config.chart.events.scrolled = function () {
updateSourceChart();
};
}
w.config.chart.events.selection = function (chart, e) {
var yaxis = _Utils2.default.clone(w.config.yaxis);
if (w.config.chart.brush.autoScaleYaxis) {
var scale = new _Scales2.default(targetChart);
yaxis = scale.autoScaleY(targetChart, e);
}
targetChart._updateOptions({
xaxis: {
min: e.xaxis.min,
max: e.xaxis.max
},
yaxis: yaxis
}, false, false, false);
};
});
}
}
}]);
return Core;
}();
exports.default = Core;
/***/ }),
/* 43 */
/***/ (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; }; }();
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Dimensions = __webpack_require__(13);
var _Dimensions2 = _interopRequireDefault(_Dimensions);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Pie = __webpack_require__(12);
var _Pie2 = _interopRequireDefault(_Pie);
var _Series = __webpack_require__(7);
var _Series2 = _interopRequireDefault(_Series);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Legend Class to draw legend.
*
* @module Legend
**/
var Legend = function () {
function Legend(ctx, opts) {
_classCallCheck(this, Legend);
this.ctx = ctx;
this.w = ctx.w;
this.onLegendClick = this.onLegendClick.bind(this);
this.onLegendHovered = this.onLegendHovered.bind(this);
}
_createClass(Legend, [{
key: 'init',
value: function init() {
var w = this.w;
var gl = w.globals;
var cnf = w.config;
var showLegendAlways = cnf.legend.showForSingleSeries && gl.series.length === 1 || gl.series.length > 1;
if ((showLegendAlways || !gl.axisCharts) && cnf.legend.show) {
while (gl.dom.elLegendWrap.firstChild) {
gl.dom.elLegendWrap.removeChild(gl.dom.elLegendWrap.firstChild);
}
this.drawLegends();
if (!_Utils2.default.isIE11()) {
this.appendToForeignObject();
} else {
// IE11 doesn't supports foreignObject, hence append it to
document.getElementsByTagName('head')[0].appendChild(this.getLegendStyles());
}
if (cnf.legend.position === 'bottom' || cnf.legend.position === 'top') {
this.legendAlignHorizontal();
} else if (cnf.legend.position === 'right' || cnf.legend.position === 'left') {
this.legendAlignVertical();
}
}
}
}, {
key: 'appendToForeignObject',
value: function appendToForeignObject() {
var gl = this.w.globals;
var elForeign = document.createElementNS(gl.SVGNS, 'foreignObject');
elForeign.setAttribute('x', 0);
elForeign.setAttribute('y', 0);
elForeign.setAttribute('width', gl.svgWidth);
elForeign.setAttribute('height', gl.svgHeight);
gl.dom.elLegendWrap.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
elForeign.appendChild(gl.dom.elLegendWrap);
elForeign.appendChild(this.getLegendStyles());
gl.dom.Paper.node.insertBefore(elForeign, gl.dom.elGraphical.node);
}
}, {
key: 'drawLegends',
value: function drawLegends() {
var self = this;
var w = this.w;
var fontFamily = w.config.legend.fontFamily;
var legendNames = w.globals.seriesNames;
var fillcolor = w.globals.colors.slice();
if (w.config.chart.type === 'heatmap') {
var ranges = w.config.plotOptions.heatmap.colorScale.ranges;
legendNames = ranges.map(function (colorScale) {
return colorScale.name ? colorScale.name : colorScale.from + ' - ' + colorScale.to;
});
fillcolor = ranges.map(function (color) {
return color.color;
});
}
var legendFormatter = w.globals.legendFormatter;
for (var i = 0; i <= legendNames.length - 1; i++) {
var text = legendFormatter(legendNames[i], { seriesIndex: i, w: w });
var collapsedSeries = false;
var ancillaryCollapsedSeries = false;
if (w.globals.collapsedSeries.length > 0) {
for (var c = 0; c < w.globals.collapsedSeries.length; c++) {
if (w.globals.collapsedSeries[c].index === i) {
collapsedSeries = true;
}
}
}
if (w.globals.ancillaryCollapsedSeriesIndices.length > 0) {
for (var _c = 0; _c < w.globals.ancillaryCollapsedSeriesIndices.length; _c++) {
if (w.globals.ancillaryCollapsedSeriesIndices[_c] === i) {
ancillaryCollapsedSeries = true;
}
}
}
var elMarker = document.createElement('span');
elMarker.classList.add('apexcharts-legend-marker');
var mOffsetX = w.config.legend.markers.offsetX;
var mOffsetY = w.config.legend.markers.offsetY;
var mHeight = w.config.legend.markers.height;
var mWidth = w.config.legend.markers.width;
var mBorderWidth = w.config.legend.markers.strokeWidth;
var mBorderColor = w.config.legend.markers.strokeColor;
var mBorderRadius = w.config.legend.markers.radius;
var mStyle = elMarker.style;
mStyle.background = fillcolor[i];
mStyle.color = fillcolor[i];
mStyle.height = Array.isArray(mHeight) ? parseFloat(mHeight[i]) + 'px' : parseFloat(mHeight) + 'px';
mStyle.width = Array.isArray(mWidth) ? parseFloat(mWidth[i]) + 'px' : parseFloat(mWidth) + 'px';
mStyle.left = Array.isArray(mOffsetX) ? mOffsetX[i] : mOffsetX;
mStyle.top = Array.isArray(mOffsetY) ? mOffsetY[i] : mOffsetY;
mStyle.borderWidth = Array.isArray(mBorderWidth) ? mBorderWidth[i] : mBorderWidth;
mStyle.borderColor = Array.isArray(mBorderColor) ? mBorderColor[i] : mBorderColor;
mStyle.borderRadius = Array.isArray(mBorderRadius) ? parseFloat(mBorderRadius[i]) + 'px' : parseFloat(mBorderRadius) + 'px';
if (w.config.legend.markers.customHTML) {
if (Array.isArray(w.config.legend.markers.customHTML)) {
elMarker.innerHTML = w.config.legend.markers.customHTML[i]();
} else {
elMarker.innerHTML = w.config.legend.markers.customHTML();
}
}
_Graphics2.default.setAttrs(elMarker, {
rel: i + 1,
'data:collapsed': collapsedSeries || ancillaryCollapsedSeries
});
if (collapsedSeries || ancillaryCollapsedSeries) {
elMarker.classList.add('inactive-legend');
}
var elLegend = document.createElement('div');
var elLegendText = document.createElement('span');
elLegendText.classList.add('apexcharts-legend-text');
elLegendText.innerHTML = text;
var textColor = w.config.legend.labels.useSeriesColors ? w.globals.colors[i] : w.config.legend.labels.colors;
if (!textColor) {
textColor = w.config.chart.foreColor;
}
elLegendText.style.color = textColor;
elLegendText.style.fontSize = parseFloat(w.config.legend.fontSize) + 'px';
elLegendText.style.fontFamily = fontFamily || w.config.chart.fontFamily;
_Graphics2.default.setAttrs(elLegendText, {
rel: i + 1,
'data:collapsed': collapsedSeries || ancillaryCollapsedSeries
});
elLegend.appendChild(elMarker);
elLegend.appendChild(elLegendText);
var coreUtils = new _CoreUtils2.default(this.ctx);
if (!w.config.legend.showForZeroSeries) {
var total = coreUtils.getSeriesTotalByIndex(i);
if (total === 0 && coreUtils.seriesHaveSameValues(i) && !coreUtils.isSeriesNull(i) && w.globals.collapsedSeriesIndices.indexOf(i) === -1 && w.globals.ancillaryCollapsedSeriesIndices.indexOf(i) === -1) {
elLegend.classList.add('apexcharts-hidden-zero-series');
}
}
if (!w.config.legend.showForNullSeries) {
if (coreUtils.isSeriesNull(i) && w.globals.collapsedSeriesIndices.indexOf(i) === -1 && w.globals.ancillaryCollapsedSeriesIndices.indexOf(i) === -1) {
elLegend.classList.add('apexcharts-hidden-null-series');
}
}
w.globals.dom.elLegendWrap.appendChild(elLegend);
w.globals.dom.elLegendWrap.classList.add(w.config.legend.horizontalAlign);
// w.globals.dom.elLegendWrap.classList.add(w.config.legend.verticalAlign)
w.globals.dom.elLegendWrap.classList.add('position-' + w.config.legend.position);
elLegend.classList.add('apexcharts-legend-series');
elLegend.style.margin = w.config.legend.itemMargin.horizontal + 'px ' + w.config.legend.itemMargin.vertical + 'px';
w.globals.dom.elLegendWrap.style.width = w.config.legend.width ? w.config.legend.width + 'px' : '';
w.globals.dom.elLegendWrap.style.height = w.config.legend.height ? w.config.legend.height + 'px' : '';
_Graphics2.default.setAttrs(elLegend, {
rel: i + 1,
'data:collapsed': collapsedSeries || ancillaryCollapsedSeries
});
if (collapsedSeries || ancillaryCollapsedSeries) {
elLegend.classList.add('inactive-legend');
}
if (!w.config.legend.onItemClick.toggleDataSeries) {
elLegend.classList.add('no-click');
}
}
// for now - just prevent click on heatmap legend - and allow hover only
var clickAllowed = w.config.chart.type !== 'heatmap';
if (clickAllowed && w.config.legend.onItemClick.toggleDataSeries) {
w.globals.dom.elWrap.addEventListener('click', self.onLegendClick, true);
}
if (w.config.legend.onItemHover.highlightDataSeries) {
w.globals.dom.elWrap.addEventListener('mousemove', self.onLegendHovered, true);
w.globals.dom.elWrap.addEventListener('mouseout', self.onLegendHovered, true);
}
}
}, {
key: 'getLegendBBox',
value: function getLegendBBox() {
var w = this.w;
var currLegendsWrap = w.globals.dom.baseEl.querySelector('.apexcharts-legend');
var currLegendsWrapRect = currLegendsWrap.getBoundingClientRect();
var currLegendsWrapWidth = currLegendsWrapRect.width;
var currLegendsWrapHeight = currLegendsWrapRect.height;
return {
clwh: currLegendsWrapHeight,
clww: currLegendsWrapWidth
};
}
}, {
key: 'setLegendWrapXY',
value: function setLegendWrapXY(offsetX, offsetY) {
var w = this.w;
var elLegendWrap = w.globals.dom.baseEl.querySelector('.apexcharts-legend');
var legendRect = elLegendWrap.getBoundingClientRect();
var x = 0;
var y = 0;
if (w.config.legend.position === 'bottom') {
y = y + (w.globals.svgHeight - legendRect.height / 2);
} else if (w.config.legend.position === 'top') {
var dim = new _Dimensions2.default(this.ctx);
var titleH = dim.getTitleSubtitleCoords('title').height;
var subtitleH = dim.getTitleSubtitleCoords('subtitle').height;
y = y + (titleH > 0 ? titleH - 10 : 0) + (subtitleH > 0 ? subtitleH - 10 : 0);
}
elLegendWrap.style.position = 'absolute';
x = x + offsetX + w.config.legend.offsetX;
y = y + offsetY + w.config.legend.offsetY;
elLegendWrap.style.left = x + 'px';
elLegendWrap.style.top = y + 'px';
if (w.config.legend.position === 'bottom') {
elLegendWrap.style.top = 'auto';
elLegendWrap.style.bottom = 10 + w.config.legend.offsetY + 'px';
} else if (w.config.legend.position === 'right') {
elLegendWrap.style.left = 'auto';
elLegendWrap.style.right = 25 + w.config.legend.offsetX + 'px';
}
if (elLegendWrap.style.width) {
elLegendWrap.style.width = parseInt(w.config.legend.width) + 'px';
}
if (elLegendWrap.style.height) {
elLegendWrap.style.height = parseInt(w.config.legend.height) + 'px';
}
}
}, {
key: 'legendAlignHorizontal',
value: function legendAlignHorizontal() {
var w = this.w;
var elLegendWrap = w.globals.dom.baseEl.querySelector('.apexcharts-legend');
elLegendWrap.style.right = 0;
var lRect = this.getLegendBBox();
var dimensions = new _Dimensions2.default(this.ctx);
var titleRect = dimensions.getTitleSubtitleCoords('title');
var subtitleRect = dimensions.getTitleSubtitleCoords('subtitle');
var offsetX = 20;
var offsetY = 0;
// the whole legend box is set to bottom
if (w.config.legend.position === 'bottom') {
offsetY = -lRect.clwh / 1.8;
} else if (w.config.legend.position === 'top') {
offsetY = titleRect.height + subtitleRect.height + w.config.title.margin + w.config.subtitle.margin - 15;
}
this.setLegendWrapXY(offsetX, offsetY);
}
}, {
key: 'legendAlignVertical',
value: function legendAlignVertical() {
var w = this.w;
var lRect = this.getLegendBBox();
var offsetY = 20;
var offsetX = 0;
if (w.config.legend.position === 'left') {
offsetX = 20;
}
if (w.config.legend.position === 'right') {
offsetX = w.globals.svgWidth - lRect.clww - 10;
}
this.setLegendWrapXY(offsetX, offsetY);
}
}, {
key: 'onLegendHovered',
value: function onLegendHovered(e) {
var w = this.w;
var hoverOverLegend = e.target.classList.contains('apexcharts-legend-text') || e.target.classList.contains('apexcharts-legend-marker');
if (w.config.chart.type !== 'heatmap') {
if (!e.target.classList.contains('inactive-legend') && hoverOverLegend) {
var series = new _Series2.default(this.ctx);
series.toggleSeriesOnHover(e, e.target);
}
} else {
// for heatmap handling
if (hoverOverLegend) {
var seriesCnt = parseInt(e.target.getAttribute('rel')) - 1;
this.ctx.fireEvent('legendHover', [this.ctx, seriesCnt, this.w]);
var _series = new _Series2.default(this.ctx);
_series.highlightRangeInSeries(e, e.target);
}
}
}
}, {
key: 'onLegendClick',
value: function onLegendClick(e) {
if (e.target.classList.contains('apexcharts-legend-text') || e.target.classList.contains('apexcharts-legend-marker')) {
var seriesCnt = parseInt(e.target.getAttribute('rel')) - 1;
var isHidden = e.target.getAttribute('data:collapsed') === 'true';
var legendClick = this.w.config.chart.events.legendClick;
if (typeof legendClick === 'function') {
legendClick(this.ctx, seriesCnt, this.w);
}
this.ctx.fireEvent('legendClick', [this.ctx, seriesCnt, this.w]);
var markerClick = this.w.config.legend.markers.onClick;
if (typeof markerClick === 'function' && e.target.classList.contains('apexcharts-legend-marker')) {
markerClick(this.ctx, seriesCnt, this.w);
this.ctx.fireEvent('legendMarkerClick', [this.ctx, seriesCnt, this.w]);
}
this.toggleDataSeries(seriesCnt, isHidden);
}
}
}, {
key: 'getLegendStyles',
value: function getLegendStyles() {
var stylesheet = document.createElement('style');
stylesheet.setAttribute('type', 'text/css');
var text = '\n \n .apexcharts-legend {\n display: flex;\n overflow: auto;\n padding: 0 10px;\n }\n\n .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\n flex-wrap: wrap\n }\n .apexcharts-legend.position-right, .apexcharts-legend.position-left {\n flex-direction: column;\n bottom: 0;\n }\n\n .apexcharts-legend.position-bottom.left, .apexcharts-legend.position-top.left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\n justify-content: flex-start;\n }\n\n .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {\n justify-content: center; \n }\n\n .apexcharts-legend.position-bottom.right, .apexcharts-legend.position-top.right {\n justify-content: flex-end;\n }\n\n .apexcharts-legend-series {\n cursor: pointer;\n line-height: normal;\n }\n\n .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\n display: flex;\n align-items: center;\n }\n\n .apexcharts-legend-text {\n position: relative;\n font-size: 14px;\n }\n\n .apexcharts-legend-text *, .apexcharts-legend-marker * {\n pointer-events: none;\n }\n\n .apexcharts-legend-marker {\n position: relative;\n display: inline-block;\n cursor: pointer;\n margin-right: 3px;\n }\n \n .apexcharts-legend.right .apexcharts-legend-series, .apexcharts-legend.left .apexcharts-legend-series{\n display: inline-block;\n }\n\n .apexcharts-legend-series.no-click {\n cursor: auto;\n }\n\n .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\n display: none !important;\n }\n\n .inactive-legend {\n opacity: 0.45;\n }';
var rules = document.createTextNode(text);
stylesheet.appendChild(rules);
return stylesheet;
}
}, {
key: 'resetToggleDataSeries',
value: function resetToggleDataSeries() {
var w = this.w;
var seriesEls = null;
var realIndexes = [];
if (w.globals.axisCharts) {
seriesEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series[data\\:realIndex]');
seriesEls = _Utils2.default.listToArray(seriesEls);
seriesEls.forEach(function (v) {
realIndexes.push(parseInt(v.getAttribute('data:realIndex')));
});
} else {
seriesEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series[rel]');
seriesEls = _Utils2.default.listToArray(seriesEls);
seriesEls.forEach(function (v) {
realIndexes.push(parseInt(v.getAttribute('rel')) - 1);
});
}
realIndexes.sort();
if (w.globals.collapsedSeries.length > 0) {
var risingSeries = w.globals.risingSeries.slice();
var series = w.config.series.slice();
for (var c = 0; c < w.globals.collapsedSeries.length; c++) {
var index = realIndexes.indexOf(w.globals.collapsedSeries[c].index);
if (index !== -1) {
if (w.globals.axisCharts) {
series[index].data = w.globals.collapsedSeries.slice()[c].data.slice();
} else {
series[index] = w.globals.collapsedSeries.slice()[c].data;
}
risingSeries.push(index);
}
}
w.globals.collapsedSeries = [];
w.globals.ancillaryCollapsedSeries = [];
w.globals.collapsedSeriesIndices = [];
w.globals.ancillaryCollapsedSeriesIndices = [];
w.globals.risingSeries = risingSeries;
w.config.series = series;
this.ctx._updateSeries(w.config.series, w.config.chart.animations.dynamicAnimation.enabled);
}
}
}, {
key: 'toggleDataSeries',
value: function toggleDataSeries(seriesCnt, isHidden) {
var w = this.w;
if (w.globals.axisCharts || w.config.chart.type === 'radialBar') {
w.globals.resized = true; // we don't want initial animations again
var seriesEl = null;
var realIndex = null;
// yes, make it null. 1 series will rise at a time
w.globals.risingSeries = [];
if (w.globals.axisCharts) {
seriesEl = w.globals.dom.baseEl.querySelector('.apexcharts-series[data\\:realIndex=\'' + seriesCnt + '\']');
realIndex = parseInt(seriesEl.getAttribute('data:realIndex'));
} else {
seriesEl = w.globals.dom.baseEl.querySelector('.apexcharts-series[rel=\'' + (seriesCnt + 1) + '\']');
realIndex = parseInt(seriesEl.getAttribute('rel')) - 1;
}
if (isHidden) {
this.riseCollapsedSeries(w.globals.collapsedSeries, w.globals.collapsedSeriesIndices, realIndex);
this.riseCollapsedSeries(w.globals.ancillaryCollapsedSeries, w.globals.ancillaryCollapsedSeriesIndices, realIndex);
} else {
if (w.globals.axisCharts) {
var shouldNotHideYAxis = false;
if (w.config.yaxis[realIndex] && w.config.yaxis[realIndex].show && w.config.yaxis[realIndex].showAlways) {
shouldNotHideYAxis = true;
if (w.globals.ancillaryCollapsedSeriesIndices.indexOf(realIndex) < 0) {
w.globals.ancillaryCollapsedSeries.push({
index: realIndex,
data: w.config.series[realIndex].data.slice(),
type: seriesEl.parentNode.className.baseVal.split('-')[1]
});
w.globals.ancillaryCollapsedSeriesIndices.push(realIndex);
}
}
if (!shouldNotHideYAxis) {
w.globals.collapsedSeries.push({
index: realIndex,
data: w.config.series[realIndex].data.slice(),
type: seriesEl.parentNode.className.baseVal.split('-')[1]
});
w.globals.collapsedSeriesIndices.push(realIndex);
var removeIndexOfRising = w.globals.risingSeries.indexOf(realIndex);
w.globals.risingSeries.splice(removeIndexOfRising, 1);
}
// TODO: AVOID mutating the user's config object below
w.config.series[realIndex].data = [];
} else {
w.globals.collapsedSeries.push({
index: realIndex,
data: w.config.series[realIndex]
});
w.globals.collapsedSeriesIndices.push(realIndex);
w.config.series[realIndex] = 0;
}
var seriesChildren = seriesEl.childNodes;
for (var sc = 0; sc < seriesChildren.length; sc++) {
if (seriesChildren[sc].classList.contains('apexcharts-series-markers-wrap')) {
if (seriesChildren[sc].classList.contains('apexcharts-hide')) {
seriesChildren[sc].classList.remove('apexcharts-hide');
} else {
seriesChildren[sc].classList.add('apexcharts-hide');
}
}
}
w.globals.allSeriesCollapsed = w.globals.collapsedSeries.length === w.globals.series.length;
this.ctx._updateSeries(w.config.series, w.config.chart.animations.dynamicAnimation.enabled);
}
} else {
// for non-axis charts i.e pie / donuts
var _seriesEl = w.globals.dom.Paper.select(' .apexcharts-series[rel=\'' + (seriesCnt + 1) + '\'] path');
var type = w.config.chart.type;
if (type === 'pie' || type === 'donut') {
var dataLabels = w.config.plotOptions.pie.donut.labels;
var graphics = new _Graphics2.default(this.ctx);
var pie = new _Pie2.default(this.ctx);
graphics.pathMouseDown(_seriesEl.members[0], null);
pie.printDataLabelsInner(_seriesEl.members[0].node, dataLabels);
}
_seriesEl.fire('click');
}
}
}, {
key: 'riseCollapsedSeries',
value: function riseCollapsedSeries(series, seriesIndices, realIndex) {
var w = this.w;
if (series.length > 0) {
for (var c = 0; c < series.length; c++) {
if (series[c].index === realIndex) {
if (w.globals.axisCharts) {
w.config.series[realIndex].data = series[c].data.slice();
series.splice(c, 1);
seriesIndices.splice(c, 1);
w.globals.risingSeries.push(realIndex);
} else {
w.config.series[realIndex] = series[c].data;
series.splice(c, 1);
seriesIndices.splice(c, 1);
w.globals.risingSeries.push(realIndex);
}
this.ctx._updateSeries(w.config.series, w.config.chart.animations.dynamicAnimation.enabled);
}
}
}
}
}]);
return Legend;
}();
exports.default = Legend;
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Config = __webpack_require__(17);
var _Config2 = _interopRequireDefault(_Config);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
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 Responsive Class to override options for different screen sizes.
*
* @module Responsive
**/
var Responsive = function () {
function Responsive(ctx) {
_classCallCheck(this, Responsive);
this.ctx = ctx;
this.w = ctx.w;
}
// the opts parameter if not null has to be set overriding everything
// as the opts is set by user externally
_createClass(Responsive, [{
key: 'checkResponsiveConfig',
value: function checkResponsiveConfig(opts) {
var _this = this;
var w = this.w;
var cnf = w.config;
// check if responsive config exists
if (cnf.responsive.length === 0) return;
var res = cnf.responsive.slice();
res.sort(function (a, b) {
return a.breakpoint > b.breakpoint ? 1 : b.breakpoint > a.breakpoint ? -1 : 0;
}).reverse();
var config = new _Config2.default({});
var iterateResponsiveOptions = function iterateResponsiveOptions() {
var newOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var largestBreakpoint = res[0].breakpoint;
var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
if (width > largestBreakpoint) {
var options = _CoreUtils2.default.extendArrayProps(config, w.globals.initialConfig);
newOptions = _Utils2.default.extend(options, newOptions);
newOptions = _Utils2.default.extend(w.config, newOptions);
_this.overrideResponsiveOptions(newOptions);
} else {
for (var i = 0; i < res.length; i++) {
if (width < res[i].breakpoint) {
newOptions = _CoreUtils2.default.extendArrayProps(config, res[i].options);
newOptions = _Utils2.default.extend(w.config, newOptions);
_this.overrideResponsiveOptions(newOptions);
}
}
}
};
if (opts) {
var options = _CoreUtils2.default.extendArrayProps(config, opts);
options = _Utils2.default.extend(w.config, options);
options = _Utils2.default.extend(options, opts);
iterateResponsiveOptions(options);
} else {
iterateResponsiveOptions({});
}
}
}, {
key: 'overrideResponsiveOptions',
value: function overrideResponsiveOptions(newOptions) {
var newConfig = new _Config2.default(newOptions).init();
this.w.config = newConfig;
}
}]);
return Responsive;
}();
exports.default = Responsive;
/***/ }),
/* 45 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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);
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 Theme Class for setting the colors and palettes.
*
* @module Theme
**/
var Theme = function () {
function Theme(ctx) {
_classCallCheck(this, Theme);
this.ctx = ctx;
this.w = ctx.w;
this.colors = [];
}
_createClass(Theme, [{
key: 'init',
value: function init() {
this.setDefaultColors();
}
}, {
key: 'setDefaultColors',
value: function setDefaultColors() {
var w = this.w;
var utils = new _Utils2.default();
w.globals.dom.elWrap.classList.add(w.config.theme.mode);
if (w.config.colors === undefined) {
w.globals.colors = this.predefined();
} else {
w.globals.colors = w.config.colors;
}
if (w.config.theme.monochrome.enabled) {
var monoArr = [];
var glsCnt = w.globals.series.length;
if (w.config.plotOptions.bar.distributed && w.config.chart.type === 'bar') {
glsCnt = w.globals.series[0].length * w.globals.series.length;
}
var mainColor = w.config.theme.monochrome.color;
var part = 1 / (glsCnt / w.config.theme.monochrome.shadeIntensity);
var shade = w.config.theme.monochrome.shadeTo;
var percent = 0;
for (var gsl = 0; gsl < glsCnt; gsl++) {
var newColor = void 0;
if (shade === 'dark') {
newColor = utils.shadeColor(percent * -1, mainColor);
percent = percent + part;
} else {
newColor = utils.shadeColor(percent, mainColor);
percent = percent + part;
}
monoArr.push(newColor);
}
w.globals.colors = monoArr.slice();
}
var defaultColors = w.globals.colors.slice();
// if user specfied less colors than no. of series, push the same colors again
this.pushExtraColors(w.globals.colors);
// The Border colors
if (w.config.stroke.colors === undefined) {
w.globals.stroke.colors = defaultColors;
} else {
w.globals.stroke.colors = w.config.stroke.colors;
}
this.pushExtraColors(w.globals.stroke.colors);
// The FILL colors
if (w.config.fill.colors === undefined) {
w.globals.fill.colors = defaultColors;
} else {
w.globals.fill.colors = w.config.fill.colors;
}
this.pushExtraColors(w.globals.fill.colors);
if (w.config.dataLabels.style.colors === undefined) {
w.globals.dataLabels.style.colors = defaultColors;
} else {
w.globals.dataLabels.style.colors = w.config.dataLabels.style.colors;
}
this.pushExtraColors(w.globals.dataLabels.style.colors, 50);
if (w.config.plotOptions.radar.polygons.fill.colors === undefined) {
w.globals.radarPolygons.fill.colors = [w.config.theme.mode === 'dark' ? '#202D48' : '#fff'];
} else {
w.globals.radarPolygons.fill.colors = w.config.plotOptions.radar.polygons.fill.colors;
}
this.pushExtraColors(w.globals.radarPolygons.fill.colors, 20);
// The point colors
if (w.config.markers.colors === undefined) {
w.globals.markers.colors = defaultColors;
} else {
w.globals.markers.colors = w.config.markers.colors;
}
this.pushExtraColors(w.globals.markers.colors);
}
// When the number of colors provided is less than the number of series, this method
// will push same colors to the list
// params:
// distributed is only valid for distributed column/bar charts
}, {
key: 'pushExtraColors',
value: function pushExtraColors(colorSeries, length) {
var distributed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var w = this.w;
var len = length || w.globals.series.length;
if (distributed === null) {
distributed = w.config.chart.type === 'bar' && w.config.plotOptions.bar.distributed || w.config.chart.type === 'heatmap' && w.config.plotOptions.heatmap.colorScale.inverse;
}
if (distributed) {
len = w.globals.series[0].length * w.globals.series.length;
}
if (colorSeries.length < len) {
var diff = len - colorSeries.length;
for (var i = 0; i < diff; i++) {
colorSeries.push(colorSeries[i]);
}
}
}
}, {
key: 'updateThemeOptions',
value: function updateThemeOptions(options) {
options.chart = options.chart || {};
options.tooltip = options.tooltip || {};
var mode = options.theme.mode || 'light';
var palette = options.theme.palette ? options.theme.palette : mode === 'dark' ? 'palette4' : 'palette1';
var foreColor = options.chart.foreColor ? options.chart.foreColor : mode === 'dark' ? '#f6f7f8' : '#373d3f';
options.tooltip.theme = mode;
options.chart.foreColor = foreColor;
options.theme.palette = palette;
return options;
}
}, {
key: 'predefined',
value: function predefined() {
var palette = this.w.config.theme.palette;
// D6E3F8, FCEFEF, DCE0D9, A5978B, EDDDD4, D6E3F8, FEF5EF
switch (palette) {
case 'palette1':
this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'];
break;
case 'palette2':
this.colors = ['#3f51b5', '#03a9f4', '#4caf50', '#f9ce1d', '#FF9800'];
break;
case 'palette3':
this.colors = ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B'];
break;
case 'palette4':
this.colors = ['#4ecdc4', '#c7f464', '#81D4FA', '#fd6a6a', '#546E7A'];
break;
case 'palette5':
this.colors = ['#2b908f', '#f9a3a4', '#90ee7e', '#fa4443', '#69d2e7'];
break;
case 'palette6':
this.colors = ['#449DD1', '#F86624', '#EA3546', '#662E9B', '#C5D86D'];
break;
case 'palette7':
this.colors = ['#D7263D', '#1B998B', '#2E294E', '#F46036', '#E2C044'];
break;
case 'palette8':
this.colors = ['#662E9B', '#F86624', '#F9C80E', '#EA3546', '#43BCCD'];
break;
case 'palette9':
this.colors = ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF'];
break;
case 'palette10':
this.colors = ['#A300D6', '#7D02EB', '#5653FE', '#2983FF', '#00B1F2'];
break;
default:
this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'];
break;
}
return this.colors;
}
}]);
return Theme;
}();
exports.default = Theme;
/***/ }),
/* 46 */
/***/ (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 _DateTime = __webpack_require__(11);
var _DateTime2 = _interopRequireDefault(_DateTime);
var _Dimensions = __webpack_require__(13);
var _Dimensions2 = _interopRequireDefault(_Dimensions);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 TimeScale Class for generating time ticks for x-axis.
*
* @module TimeScale
**/
var TimeScale = function () {
function TimeScale(ctx) {
_classCallCheck(this, TimeScale);
this.ctx = ctx;
this.w = ctx.w;
this.timeScaleArray = [];
}
_createClass(TimeScale, [{
key: 'calculateTimeScaleTicks',
value: function calculateTimeScaleTicks(minX, maxX) {
var _this = this;
var w = this.w;
// null check when no series to show
if (w.globals.allSeriesCollapsed) {
w.globals.labels = [];
w.globals.timelineLabels = [];
return [];
}
var dt = new _DateTime2.default(this.ctx);
var daysDiff = (maxX - minX) / (1000 * 60 * 60 * 24);
this.determineInterval(daysDiff);
w.globals.disableZoomIn = false;
w.globals.disableZoomOut = false;
if (daysDiff < 0.005) {
w.globals.disableZoomIn = true;
} else if (daysDiff > 50000) {
w.globals.disableZoomOut = true;
}
var timeIntervals = dt.getTimeUnitsfromTimestamp(minX, maxX);
var daysWidthOnXAxis = w.globals.gridWidth / daysDiff;
var hoursWidthOnXAxis = daysWidthOnXAxis / 24;
var minutesWidthOnXAxis = hoursWidthOnXAxis / 60;
var numberOfHours = Math.floor(daysDiff * 24);
var numberOfMinutes = Math.floor(daysDiff * 24 * 60);
var numberOfDays = Math.floor(daysDiff);
var numberOfMonths = Math.floor(daysDiff / 30);
var numberOfYears = Math.floor(daysDiff / 365);
var firstVal = {
minMinute: timeIntervals.minMinute,
minHour: timeIntervals.minHour,
minDate: timeIntervals.minDate,
minMonth: timeIntervals.minMonth,
minYear: timeIntervals.minYear
};
var currentMinute = firstVal.minMinute;
var currentHour = firstVal.minHour;
var currentMonthDate = firstVal.minDate;
var currentDate = firstVal.minDate;
var currentMonth = firstVal.minMonth;
var currentYear = firstVal.minYear;
var params = {
firstVal: firstVal,
currentMinute: currentMinute,
currentHour: currentHour,
currentMonthDate: currentMonthDate,
currentDate: currentDate,
currentMonth: currentMonth,
currentYear: currentYear,
daysWidthOnXAxis: daysWidthOnXAxis,
hoursWidthOnXAxis: hoursWidthOnXAxis,
minutesWidthOnXAxis: minutesWidthOnXAxis,
numberOfMinutes: numberOfMinutes,
numberOfHours: numberOfHours,
numberOfDays: numberOfDays,
numberOfMonths: numberOfMonths,
numberOfYears: numberOfYears
};
switch (this.tickInterval) {
case 'years':
{
this.generateYearScale(params);
break;
}
case 'months':
case 'half_year':
{
this.generateMonthScale(params);
break;
}
case 'months_days':
case 'months_fortnight':
case 'days':
case 'week_days':
{
this.generateDayScale(params);
break;
}
case 'hours':
{
this.generateHourScale(params);
break;
}
case 'minutes':
this.generateMinuteScale(params);
break;
}
// first, we will adjust the month values index
// as in the upper function, it is starting from 0
// we will start them from 1
var adjustedMonthInTimeScaleArray = this.timeScaleArray.map(function (ts) {
var defaultReturn = {
position: ts.position,
unit: ts.unit,
year: ts.year,
day: ts.day ? ts.day : 1,
hour: ts.hour ? ts.hour : 0,
month: ts.month + 1
};
if (ts.unit === 'month') {
return _extends({}, defaultReturn, {
value: ts.value + 1
});
} else if (ts.unit === 'day' || ts.unit === 'hour') {
return _extends({}, defaultReturn, {
value: ts.value
});
} else if (ts.unit === 'minute') {
return _extends({}, defaultReturn, {
value: ts.value,
minute: ts.value
});
}
return ts;
});
var filteredTimeScale = adjustedMonthInTimeScaleArray.filter(function (ts) {
var modulo = 1;
var ticks = Math.ceil(w.globals.gridWidth / 120);
var value = ts.value;
if (w.config.xaxis.tickAmount !== undefined) {
ticks = w.config.xaxis.tickAmount;
}
if (adjustedMonthInTimeScaleArray.length > ticks) {
modulo = Math.floor(adjustedMonthInTimeScaleArray.length / ticks);
}
var shouldNotSkipUnit = false; // there is a big change in unit i.e days to months
var shouldNotPrint = false; // should skip these values
switch (_this.tickInterval) {
case 'half_year':
modulo = 7;
if (ts.unit === 'year') {
shouldNotSkipUnit = true;
}
break;
case 'months':
modulo = 1;
if (ts.unit === 'year') {
shouldNotSkipUnit = true;
}
break;
case 'months_fortnight':
modulo = 15;
if (ts.unit === 'year' || ts.unit === 'month') {
shouldNotSkipUnit = true;
}
if (value === 30) {
shouldNotPrint = true;
}
break;
case 'months_days':
modulo = 10;
if (ts.unit === 'month') {
shouldNotSkipUnit = true;
}
if (value === 30) {
shouldNotPrint = true;
}
break;
case 'week_days':
modulo = 8;
if (ts.unit === 'month') {
shouldNotSkipUnit = true;
}
break;
case 'days':
modulo = 1;
if (ts.unit === 'month') {
shouldNotSkipUnit = true;
}
break;
case 'hours':
if (ts.unit === 'day') {
shouldNotSkipUnit = true;
}
break;
case 'minutes':
if (value % 5 !== 0) {
shouldNotPrint = true;
}
break;
}
if (_this.tickInterval === 'minutes' || _this.tickInterval === 'hours') {
if (!shouldNotPrint) {
return true;
}
} else {
if ((value % modulo === 0 || shouldNotSkipUnit) && !shouldNotPrint) {
return true;
}
}
});
return filteredTimeScale;
}
}, {
key: 'recalcDimensionsBasedOnFormat',
value: function recalcDimensionsBasedOnFormat(filteredTimeScale, inverted) {
var w = this.w;
var reformattedTimescaleArray = this.formatDates(filteredTimeScale);
var removedOverlappingTS = this.removeOverlappingTS(reformattedTimescaleArray);
if (!inverted) {
w.globals.timelineLabels = removedOverlappingTS.slice();
} else {
w.globals.invertedTimelineLabels = removedOverlappingTS.slice();
}
// at this stage, we need to re-calculate coords of the grid as timeline labels may have altered the xaxis labels coords
// The reason we can't do this prior to this stage is because timeline labels depends on gridWidth, and as the ticks are calculated based on available gridWidth, there can be unknown number of ticks generated for different minX and maxX
// Dependency on Dimensions(), need to refactor correctly
// TODO - find an alternate way to avoid calling this Heavy method twice
var dimensions = new _Dimensions2.default(this.ctx);
dimensions.plotCoords();
}
}, {
key: 'determineInterval',
value: function determineInterval(daysDiff) {
switch (true) {
case daysDiff > 1825:
// difference is more than 5 years
this.tickInterval = 'years';
break;
case daysDiff > 800 && daysDiff <= 1825:
this.tickInterval = 'half_year';
break;
case daysDiff > 180 && daysDiff <= 800:
this.tickInterval = 'months';
break;
case daysDiff > 90 && daysDiff <= 180:
this.tickInterval = 'months_fortnight';
break;
case daysDiff > 60 && daysDiff <= 90:
this.tickInterval = 'months_days';
break;
case daysDiff > 30 && daysDiff <= 60:
this.tickInterval = 'week_days';
break;
case daysDiff > 2 && daysDiff <= 30:
this.tickInterval = 'days';
break;
case daysDiff > 0.1 && daysDiff <= 2:
// less than 2 days
this.tickInterval = 'hours';
break;
case daysDiff < 0.1:
this.tickInterval = 'minutes';
break;
default:
this.tickInterval = 'days';
break;
}
}
}, {
key: 'generateYearScale',
value: function generateYearScale(params) {
var firstVal = params.firstVal,
currentMonth = params.currentMonth,
currentYear = params.currentYear,
daysWidthOnXAxis = params.daysWidthOnXAxis,
numberOfYears = params.numberOfYears;
var firstTickValue = firstVal.minYear;
var firstTickPosition = 0;
var dt = new _DateTime2.default(this.ctx);
var unit = 'year';
if (firstVal.minDate > 1 && firstVal.minMonth > 0) {
var remainingDays = dt.determineRemainingDaysOfYear(firstVal.minYear, firstVal.minMonth, firstVal.minDate);
// remainingDaysofFirstMonth is used to reacht the 2nd tick position
var remainingDaysOfFirstYear = dt.determineDaysOfYear(firstVal.minYear) - remainingDays + 1;
// calculate the first tick position
firstTickPosition = remainingDaysOfFirstYear * daysWidthOnXAxis;
firstTickValue = firstVal.minYear + 1;
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: firstTickValue,
unit: unit,
year: firstTickValue,
month: _Utils2.default.monthMod(currentMonth + 1)
});
} else if (firstVal.minDate === 1 && firstVal.minMonth === 0) {
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: firstTickValue,
unit: unit,
year: currentYear,
month: _Utils2.default.monthMod(currentMonth + 1)
});
}
var year = firstTickValue;
var pos = firstTickPosition;
// keep drawing rest of the ticks
for (var i = 0; i < numberOfYears; i++) {
year++;
pos = dt.determineDaysOfYear(year - 1) * daysWidthOnXAxis + pos;
this.timeScaleArray.push({
position: pos,
value: year,
unit: unit,
year: year,
month: 1
});
}
}
}, {
key: 'generateMonthScale',
value: function generateMonthScale(params) {
var firstVal = params.firstVal,
currentMonthDate = params.currentMonthDate,
currentMonth = params.currentMonth,
currentYear = params.currentYear,
daysWidthOnXAxis = params.daysWidthOnXAxis,
numberOfMonths = params.numberOfMonths;
var firstTickValue = currentMonth;
var firstTickPosition = 0;
var dt = new _DateTime2.default(this.ctx);
var unit = 'month';
var yrCounter = 0;
if (firstVal.minDate > 1) {
// remainingDaysofFirstMonth is used to reacht the 2nd tick position
var remainingDaysOfFirstMonth = dt.determineDaysOfMonths(currentMonth + 1, firstVal.minYear) - currentMonthDate + 1;
// calculate the first tick position
firstTickPosition = remainingDaysOfFirstMonth * daysWidthOnXAxis;
firstTickValue = _Utils2.default.monthMod(currentMonth + 1);
var year = currentYear + yrCounter;
var _month = _Utils2.default.monthMod(firstTickValue);
var value = firstTickValue;
// it's Jan, so update the year
if (firstTickValue === 0) {
unit = 'year';
value = year;
_month = 1;
yrCounter += 1;
year = year + yrCounter;
}
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: value,
unit: unit,
year: year,
month: _month
});
} else {
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: firstTickValue,
unit: unit,
year: currentYear,
month: _Utils2.default.monthMod(currentMonth)
});
}
var month = firstTickValue + 1;
var pos = firstTickPosition;
// keep drawing rest of the ticks
for (var i = 0, j = 1; i < numberOfMonths; i++, j++) {
month = _Utils2.default.monthMod(month);
if (month === 0) {
unit = 'year';
yrCounter += 1;
} else {
unit = 'month';
}
var _year = currentYear + Math.floor(month / 12) + yrCounter;
pos = dt.determineDaysOfMonths(month, _year) * daysWidthOnXAxis + pos;
var monthVal = month === 0 ? _year : month;
this.timeScaleArray.push({
position: pos,
value: monthVal,
unit: unit,
year: _year,
month: month === 0 ? 1 : month
});
month++;
}
}
}, {
key: 'generateDayScale',
value: function generateDayScale(params) {
var firstVal = params.firstVal,
currentMonth = params.currentMonth,
currentYear = params.currentYear,
hoursWidthOnXAxis = params.hoursWidthOnXAxis,
numberOfDays = params.numberOfDays;
var dt = new _DateTime2.default(this.ctx);
var unit = 'day';
var remainingHours = 24 - firstVal.minHour;
var yrCounter = 0;
// calculate the first tick position
var firstTickPosition = remainingHours * hoursWidthOnXAxis;
var firstTickValue = firstVal.minDate + 1;
var val = firstTickValue;
var changeMonth = function changeMonth(dateVal, month, year) {
var monthdays = dt.determineDaysOfMonths(month + 1, year);
if (dateVal > monthdays) {
month = month + 1;
date = 1;
unit = 'month';
val = month;
return month;
}
return month;
};
var date = firstTickValue;
var month = changeMonth(date, currentMonth, currentYear);
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: val,
unit: unit,
year: currentYear,
month: _Utils2.default.monthMod(month),
day: date
});
var pos = firstTickPosition;
// keep drawing rest of the ticks
for (var i = 0; i < numberOfDays; i++) {
date += 1;
unit = 'day';
month = changeMonth(date, month, currentYear + Math.floor(month / 12) + yrCounter);
var year = currentYear + Math.floor(month / 12) + yrCounter;
pos = 24 * hoursWidthOnXAxis + pos;
var _val = date === 1 ? _Utils2.default.monthMod(month) : date;
this.timeScaleArray.push({
position: pos,
value: _val,
unit: unit,
year: year,
month: _Utils2.default.monthMod(month),
day: _val
});
}
}
}, {
key: 'generateHourScale',
value: function generateHourScale(params) {
var firstVal = params.firstVal,
currentDate = params.currentDate,
currentMonth = params.currentMonth,
currentYear = params.currentYear,
minutesWidthOnXAxis = params.minutesWidthOnXAxis,
numberOfHours = params.numberOfHours;
var dt = new _DateTime2.default(this.ctx);
var yrCounter = 0;
var unit = 'hour';
var changeDate = function changeDate(dateVal, month) {
var monthdays = dt.determineDaysOfMonths(month + 1, currentYear);
if (dateVal > monthdays) {
date = 1;
month = month + 1;
}
return {
month: month,
date: date
};
};
var changeMonth = function changeMonth(dateVal, month) {
var monthdays = dt.determineDaysOfMonths(month + 1, currentYear);
if (dateVal > monthdays) {
month = month + 1;
return month;
}
return month;
};
var remainingMins = 60 - firstVal.minMinute;
var firstTickPosition = remainingMins * minutesWidthOnXAxis;
var firstTickValue = firstVal.minHour + 1;
var hour = firstTickValue + 1;
if (remainingMins === 60) {
firstTickPosition = 0;
firstTickValue = firstVal.minHour;
hour = firstTickValue + 1;
}
var date = currentDate;
var month = changeMonth(date, currentMonth);
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: firstTickValue,
unit: unit,
day: date,
hour: hour,
year: currentYear,
month: _Utils2.default.monthMod(month)
});
var pos = firstTickPosition;
// keep drawing rest of the ticks
for (var i = 0; i < numberOfHours; i++) {
unit = 'hour';
if (hour >= 24) {
hour = 0;
date += 1;
unit = 'day';
var checkNextMonth = changeDate(date, month);
month = checkNextMonth.month;
month = changeMonth(date, month);
}
var year = currentYear + Math.floor(month / 12) + yrCounter;
pos = hour === 0 && i === 0 ? remainingMins * minutesWidthOnXAxis : 60 * minutesWidthOnXAxis + pos;
var val = hour === 0 ? date : hour;
this.timeScaleArray.push({
position: pos,
value: val,
unit: unit,
hour: hour,
day: date,
year: year,
month: _Utils2.default.monthMod(month)
});
hour++;
}
}
}, {
key: 'generateMinuteScale',
value: function generateMinuteScale(params) {
var firstVal = params.firstVal,
currentMinute = params.currentMinute,
currentHour = params.currentHour,
currentDate = params.currentDate,
currentMonth = params.currentMonth,
currentYear = params.currentYear,
minutesWidthOnXAxis = params.minutesWidthOnXAxis,
numberOfMinutes = params.numberOfMinutes;
var yrCounter = 0;
var unit = 'minute';
var remainingMins = currentMinute - firstVal.minMinute;
var firstTickPosition = minutesWidthOnXAxis - remainingMins;
var firstTickValue = firstVal.minMinute + 1;
var minute = firstTickValue + 1;
var date = currentDate;
var month = currentMonth;
var year = currentYear;
var hour = currentHour;
// push the first tick in the array
this.timeScaleArray.push({
position: firstTickPosition,
value: firstTickValue,
unit: unit,
day: date,
hour: hour,
minute: minute,
year: year,
month: _Utils2.default.monthMod(month)
});
var pos = firstTickPosition;
// keep drawing rest of the ticks
for (var i = 0; i < numberOfMinutes; i++) {
if (minute >= 60) {
minute = 0;
hour += 1;
if (hour === 24) {
hour = 0;
}
}
var _year2 = currentYear + Math.floor(month / 12) + yrCounter;
pos = minutesWidthOnXAxis + pos;
var val = minute;
this.timeScaleArray.push({
position: pos,
value: val,
unit: unit,
hour: hour,
minute: minute,
day: date,
year: _year2,
month: _Utils2.default.monthMod(month)
});
minute++;
}
}
}, {
key: 'createRawDateString',
value: function createRawDateString(ts, value) {
var raw = ts.year;
raw += '-' + ('0' + ts.month.toString()).slice(-2);
// unit is day
if (ts.unit === 'day') {
raw += ts.unit === 'day' ? '-' + ('0' + value).slice(-2) : '-01';
} else {
raw += '-' + ('0' + (ts.day ? ts.day : '1')).slice(-2);
}
// unit is hour
if (ts.unit === 'hour') {
raw += ts.unit === 'hour' ? 'T' + ('0' + value).slice(-2) : 'T00';
} else {
raw += 'T' + ('0' + (ts.hour ? ts.hour : '0')).slice(-2);
}
// unit is minute
raw += ts.unit === 'minute' ? ':' + ('0' + value).slice(-2) + ':00.000Z' : ':00:00.000Z';
return raw;
}
}, {
key: 'formatDates',
value: function formatDates(filteredTimeScale) {
var _this2 = this;
var w = this.w;
var reformattedTimescaleArray = filteredTimeScale.map(function (ts) {
var value = ts.value.toString();
var dt = new _DateTime2.default(_this2.ctx);
var raw = _this2.createRawDateString(ts, value);
// parse the whole ISO datestring
var dateString = new Date(Date.parse(raw));
if (w.config.xaxis.labels.format === undefined) {
var customFormat = 'dd MMM';
var dtFormatter = w.config.xaxis.labels.datetimeFormatter;
if (ts.unit === 'year') customFormat = dtFormatter.year;
if (ts.unit === 'month') customFormat = dtFormatter.month;
if (ts.unit === 'day') customFormat = dtFormatter.day;
if (ts.unit === 'hour') customFormat = dtFormatter.hour;
if (ts.unit === 'minute') customFormat = dtFormatter.minute;
value = dt.formatDate(dateString, customFormat, true, false);
} else {
value = dt.formatDate(dateString, w.config.xaxis.labels.format);
}
return {
dateString: raw,
position: ts.position,
value: value,
unit: ts.unit,
year: ts.year,
month: ts.month
};
});
return reformattedTimescaleArray;
}
}, {
key: 'removeOverlappingTS',
value: function removeOverlappingTS(arr) {
var _this3 = this;
var graphics = new _Graphics2.default(this.ctx);
var lastDrawnIndex = 0;
var filteredArray = arr.map(function (item, index) {
if (index > 0 && _this3.w.config.xaxis.labels.hideOverlappingLabels) {
var prevLabelWidth = graphics.getTextRects(arr[lastDrawnIndex].value).width;
var prevPos = arr[lastDrawnIndex].position;
var pos = item.position;
if (pos > prevPos + prevLabelWidth + 10) {
lastDrawnIndex = index;
return item;
} else {
return null;
}
} else {
return item;
}
});
filteredArray = filteredArray.filter(function (f) {
return f !== null;
});
return filteredArray;
}
}]);
return TimeScale;
}();
exports.default = TimeScale;
/***/ }),
/* 47 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
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"); } }
var TitleSubtitle = function () {
function TitleSubtitle(ctx) {
_classCallCheck(this, TitleSubtitle);
this.ctx = ctx;
this.w = ctx.w;
}
_createClass(TitleSubtitle, [{
key: 'draw',
value: function draw() {
this.drawTitleSubtitle('title');
this.drawTitleSubtitle('subtitle');
}
}, {
key: 'drawTitleSubtitle',
value: function drawTitleSubtitle(type) {
var w = this.w;
var tsConfig = type === 'title' ? w.config.title : w.config.subtitle;
var x = w.globals.svgWidth / 2;
var y = tsConfig.offsetY;
var textAnchor = 'middle';
if (tsConfig.align === 'left') {
x = 10;
textAnchor = 'start';
} else if (tsConfig.align === 'right') {
x = w.globals.svgWidth - 10;
textAnchor = 'end';
}
x = x + tsConfig.offsetX;
y = y + parseInt(tsConfig.style.fontSize) + 2;
if (tsConfig.text !== undefined) {
var graphics = new _Graphics2.default(this.ctx);
var titleText = graphics.drawText({
x: x,
y: y,
text: tsConfig.text,
textAnchor: textAnchor,
fontSize: tsConfig.style.fontSize,
fontFamily: tsConfig.style.fontFamily,
foreColor: tsConfig.style.color,
opacity: 1
});
titleText.node.setAttribute('class', 'apexcharts-' + type + '-text');
w.globals.dom.Paper.add(titleText);
}
}
}]);
return TitleSubtitle;
}();
exports.default = TitleSubtitle;
/***/ }),
/* 48 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
var _Toolbar2 = __webpack_require__(23);
var _Toolbar3 = _interopRequireDefault(_Toolbar2);
var _Scales = __webpack_require__(14);
var _Scales2 = _interopRequireDefault(_Scales);
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"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* ApexCharts Zoom Class for handling zooming and panning on axes based charts.
*
* @module ZoomPanSelection
**/
var ZoomPanSelection = function (_Toolbar) {
_inherits(ZoomPanSelection, _Toolbar);
function ZoomPanSelection(ctx) {
_classCallCheck(this, ZoomPanSelection);
var _this = _possibleConstructorReturn(this, (ZoomPanSelection.__proto__ || Object.getPrototypeOf(ZoomPanSelection)).call(this, ctx));
_this.ctx = ctx;
_this.w = ctx.w;
_this.dragged = false;
_this.graphics = new _Graphics2.default(_this.ctx);
_this.eventList = ['mousedown', 'mousemove', 'touchstart', 'touchmove', 'mouseup', 'touchend'];
_this.clientX = 0;
_this.clientY = 0;
_this.startX = 0;
_this.endX = 0;
_this.dragX = 0;
_this.startY = 0;
_this.endY = 0;
_this.dragY = 0;
return _this;
}
_createClass(ZoomPanSelection, [{
key: 'init',
value: function init(_ref) {
var _this2 = this;
var xyRatios = _ref.xyRatios;
var w = this.w;
var me = this;
this.xyRatios = xyRatios;
this.zoomRect = this.graphics.drawRect(0, 0, 0, 0);
this.selectionRect = this.graphics.drawRect(0, 0, 0, 0);
this.gridRect = w.globals.dom.baseEl.querySelector('.apexcharts-grid');
this.zoomRect.node.classList.add('apexcharts-zoom-rect');
this.selectionRect.node.classList.add('apexcharts-selection-rect');
w.globals.dom.elGraphical.add(this.zoomRect);
w.globals.dom.elGraphical.add(this.selectionRect);
if (w.config.chart.selection.type === 'x') {
this.slDraggableRect = this.selectionRect.draggable({
minX: 0,
minY: 0,
maxX: w.globals.gridWidth,
maxY: w.globals.gridHeight
}).on('dragmove', this.selectionDragging.bind(this, 'dragging'));
} else if (w.config.chart.selection.type === 'y') {
this.slDraggableRect = this.selectionRect.draggable({
minX: 0,
maxX: w.globals.gridWidth
}).on('dragmove', this.selectionDragging.bind(this, 'dragging'));
} else {
this.slDraggableRect = this.selectionRect.draggable().on('dragmove', this.selectionDragging.bind(this, 'dragging'));
}
this.preselectedSelection();
this.hoverArea = w.globals.dom.baseEl.querySelector(w.globals.chartClass);
this.hoverArea.classList.add('zoomable');
this.eventList.forEach(function (event) {
_this2.hoverArea.addEventListener(event, me.svgMouseEvents.bind(me, xyRatios), { capture: false, passive: true });
});
}
// remove the event listeners which were previously added on hover area
}, {
key: 'destroy',
value: function destroy() {
var _this3 = this;
var me = this;
this.eventList.forEach(function (event) {
if (_this3.hoverArea) {
_this3.hoverArea.removeEventListener(event, me.svgMouseEvents.bind(me, me.xyRatios), { capture: false, passive: true });
}
});
if (this.slDraggableRect) {
this.slDraggableRect.draggable(false);
this.slDraggableRect.off();
this.selectionRect.off();
}
this.selectionRect = null;
this.zoomRect = null;
this.gridRect = null;
}
}, {
key: 'svgMouseEvents',
value: function svgMouseEvents(xyRatios, e) {
var w = this.w;
var me = this;
var toolbar = this.ctx.toolbar;
var zoomtype = w.globals.zoomEnabled ? w.config.chart.zoom.type : w.config.chart.selection.type;
if (e.shiftKey) {
this.shiftWasPressed = true;
toolbar.enablePanning();
} else {
if (this.shiftWasPressed) {
toolbar.enableZooming();
this.shiftWasPressed = false;
}
}
var falsePositives = e.target.classList.contains('apexcharts-selection-rect') || e.target.parentNode.classList.contains('apexcharts-toolbar');
if (falsePositives) return;
me.clientX = e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.type === 'touchend' ? e.changedTouches[0].clientX : e.clientX;
me.clientY = e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientY : e.type === 'touchend' ? e.changedTouches[0].clientY : e.clientY;
if (e.type === 'mousedown' && e.which === 1) {
var gridRectDim = me.gridRect.getBoundingClientRect();
me.startX = me.clientX - gridRectDim.left;
me.startY = me.clientY - gridRectDim.top;
me.dragged = false;
me.w.globals.mousedown = true;
}
if (e.type === 'mousemove' && e.which === 1 || e.type === 'touchmove') {
me.dragged = true;
if (w.globals.panEnabled) {
w.globals.selection = null;
if (me.w.globals.mousedown) {
me.panDragging({
context: me,
zoomtype: zoomtype,
xyRatios: xyRatios
});
}
} else {
if (me.w.globals.mousedown && w.globals.zoomEnabled || me.w.globals.mousedown && w.globals.selectionEnabled) {
me.selection = me.selectionDrawing({
context: me,
zoomtype: zoomtype
});
}
}
}
if (e.type === 'mouseup' || e.type === 'touchend') {
// we will be calling getBoundingClientRect on each mousedown/mousemove/mouseup
var _gridRectDim = me.gridRect.getBoundingClientRect();
if (me.w.globals.mousedown) {
// user released the drag, now do all the calculations
me.endX = me.clientX - _gridRectDim.left;
me.endY = me.clientY - _gridRectDim.top;
me.dragX = Math.abs(me.endX - me.startX);
me.dragY = Math.abs(me.endY - me.startY);
if (w.globals.zoomEnabled || w.globals.selectionEnabled) {
me.selectionDrawn({
context: me,
zoomtype: zoomtype
});
}
}
if (w.globals.zoomEnabled) {
me.hideSelectionRect(this.selectionRect);
}
me.dragged = false;
me.w.globals.mousedown = false;
}
this.makeSelectionRectDraggable();
}
}, {
key: 'makeSelectionRectDraggable',
value: function makeSelectionRectDraggable() {
var w = this.w;
if (!this.selectionRect) return;
var rectDim = this.selectionRect.node.getBoundingClientRect();
if (rectDim.width > 0 && rectDim.height > 0) {
this.slDraggableRect.selectize().resize({
constraint: {
minX: 0,
minY: 0,
maxX: w.globals.gridWidth,
maxY: w.globals.gridHeight
}
}).on('resizing', this.selectionDragging.bind(this, 'resizing'));
}
}
}, {
key: 'preselectedSelection',
value: function preselectedSelection() {
var w = this.w;
var xyRatios = this.xyRatios;
if (!w.globals.zoomEnabled) {
if (typeof w.globals.selection !== 'undefined' && w.globals.selection !== null) {
this.drawSelectionRect(w.globals.selection);
} else {
if (w.config.chart.selection.xaxis.min !== undefined && w.config.chart.selection.xaxis.max !== undefined) {
var x = (w.config.chart.selection.xaxis.min - w.globals.minX) / xyRatios.xRatio;
var width = w.globals.gridWidth - (w.globals.maxX - w.config.chart.selection.xaxis.max) / xyRatios.xRatio - x;
var selectionRect = {
x: x,
y: 0,
width: width,
height: w.globals.gridHeight,
translateX: 0,
translateY: 0,
selectionEnabled: true
};
this.drawSelectionRect(selectionRect);
this.makeSelectionRectDraggable();
if (typeof w.config.chart.events.selection === 'function') {
w.config.chart.events.selection(this.ctx, {
xaxis: {
min: w.config.chart.selection.xaxis.min,
max: w.config.chart.selection.xaxis.max
},
yaxis: {}
});
}
}
}
}
}
}, {
key: 'drawSelectionRect',
value: function drawSelectionRect(_ref2) {
var x = _ref2.x,
y = _ref2.y,
width = _ref2.width,
height = _ref2.height,
translateX = _ref2.translateX,
translateY = _ref2.translateY;
var w = this.w;
var zoomRect = this.zoomRect;
var selectionRect = this.selectionRect;
if (this.dragged || w.globals.selection !== null) {
var scalingAttrs = {
transform: 'translate(' + translateX + ', ' + translateY + ')'
// change styles based on zoom or selection
// zoom is Enabled and user has dragged, so draw blue rect
};if (w.globals.zoomEnabled && this.dragged) {
zoomRect.attr({
x: x,
y: y,
width: width,
height: height,
fill: w.config.chart.zoom.zoomedArea.fill.color,
'fill-opacity': w.config.chart.zoom.zoomedArea.fill.opacity,
stroke: w.config.chart.zoom.zoomedArea.stroke.color,
'stroke-width': w.config.chart.zoom.zoomedArea.stroke.width,
'stroke-opacity': w.config.chart.zoom.zoomedArea.stroke.opacity
});
_Graphics2.default.setAttrs(zoomRect.node, scalingAttrs);
}
// selection is enabled
if (w.globals.selectionEnabled) {
selectionRect.attr({
x: x,
y: y,
width: width > 0 ? width : 0,
height: height > 0 ? height : 0,
fill: w.config.chart.selection.fill.color,
'fill-opacity': w.config.chart.selection.fill.opacity,
stroke: w.config.chart.selection.stroke.color,
'stroke-width': w.config.chart.selection.stroke.width,
'stroke-dasharray': w.config.chart.selection.stroke.dashArray,
'stroke-opacity': w.config.chart.selection.stroke.opacity
});
_Graphics2.default.setAttrs(selectionRect.node, scalingAttrs);
}
}
}
}, {
key: 'hideSelectionRect',
value: function hideSelectionRect(rect) {
if (rect) {
rect.attr({
x: 0,
y: 0,
width: 0,
height: 0
});
}
}
}, {
key: 'selectionDrawing',
value: function selectionDrawing(_ref3) {
var context = _ref3.context,
zoomtype = _ref3.zoomtype;
var w = this.w;
var me = context;
var gridRectDim = this.gridRect.getBoundingClientRect();
var startX = me.startX - 1;
var startY = me.startY;
var selectionWidth = me.clientX - gridRectDim.left - startX;
var selectionHeight = me.clientY - gridRectDim.top - startY;
var translateX = 0;
var translateY = 0;
var selectionRect = {};
if (Math.abs(selectionWidth + startX) > w.globals.gridWidth || me.clientX - gridRectDim.left < 0) {
// user dragged the mouse outside drawing area
// TODO: test the selectionRect and make sure it doesn't crosses drawing area
me.hideSelectionRect(this.zoomRect);
me.dragged = false;
me.w.globals.mousedown = false;
}
// inverse selection X
if (startX > me.clientX - gridRectDim.left) {
selectionWidth = Math.abs(selectionWidth);
translateX = -selectionWidth;
}
// inverse selection Y
if (startY > me.clientY - gridRectDim.top) {
selectionHeight = Math.abs(selectionHeight);
translateY = -selectionHeight;
}
if (zoomtype === 'x') {
selectionRect = {
x: startX,
y: 0,
width: selectionWidth,
height: w.globals.gridHeight,
translateX: translateX,
translateY: 0
};
} else if (zoomtype === 'y') {
selectionRect = {
x: 0,
y: startY,
width: w.globals.gridWidth,
height: selectionHeight,
translateX: 0,
translateY: translateY
};
} else {
selectionRect = {
x: startX,
y: startY,
width: selectionWidth,
height: selectionHeight,
translateX: translateX,
translateY: translateY
};
}
me.drawSelectionRect(selectionRect);
me.selectionDragging('resizing');
return selectionRect;
}
}, {
key: 'selectionDragging',
value: function selectionDragging(type, e) {
var _this4 = this;
var w = this.w;
var xyRatios = this.xyRatios;
var selRect = this.selectionRect;
var timerInterval = 0;
if (type === 'resizing') {
timerInterval = 30;
}
if (typeof w.config.chart.events.selection === 'function' && w.globals.selectionEnabled) {
// a small debouncer is required when resizing to avoid freezing the chart
clearTimeout(this.w.globals.selectionResizeTimer);
this.w.globals.selectionResizeTimer = window.setTimeout(function () {
var gridRectDim = _this4.gridRect.getBoundingClientRect();
var selectionRect = selRect.node.getBoundingClientRect();
var minX = w.globals.xAxisScale.niceMin + (selectionRect.left - gridRectDim.left) * xyRatios.xRatio;
var maxX = w.globals.xAxisScale.niceMin + (selectionRect.right - gridRectDim.left) * xyRatios.xRatio;
var minY = w.globals.yAxisScale[0].niceMin + (gridRectDim.bottom - selectionRect.bottom) * xyRatios.yRatio[0];
var maxY = w.globals.yAxisScale[0].niceMax - (selectionRect.top - gridRectDim.top) * xyRatios.yRatio[0];
w.config.chart.events.selection(_this4.ctx, {
xaxis: {
min: minX,
max: maxX
},
yaxis: {
min: minY,
max: maxY
}
});
}, timerInterval);
}
}
}, {
key: 'selectionDrawn',
value: function selectionDrawn(_ref4) {
var context = _ref4.context,
zoomtype = _ref4.zoomtype;
var w = this.w;
var me = context;
var xyRatios = this.xyRatios;
var toolbar = this.ctx.toolbar;
if (me.startX > me.endX) {
var tempX = me.startX;
me.startX = me.endX;
me.endX = tempX;
}
if (me.startY > me.endY) {
var tempY = me.startY;
me.startY = me.endY;
me.endY = tempY;
}
var xLowestValue = w.globals.xAxisScale.niceMin + me.startX * xyRatios.xRatio;
var xHighestValue = w.globals.xAxisScale.niceMin + me.endX * xyRatios.xRatio;
// TODO: we will consider the 1st y axis values here for getting highest and lowest y
var yHighestValue = [];
var yLowestValue = [];
w.config.yaxis.forEach(function (yaxe, index) {
yHighestValue.push(Math.floor(w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[index] * me.startY));
yLowestValue.push(Math.floor(w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[index] * me.endY));
});
if (me.dragged && (me.dragX > 10 || me.dragY > 10) && xLowestValue !== xHighestValue) {
if (w.globals.zoomEnabled) {
var yaxis = _Utils2.default.clone(w.config.yaxis);
// before zooming in/out, store the last yaxis and xaxis range, so that when user hits the RESET button, we get the original range
// also - make sure user is not already zoomed in/out - otherwise we will store zoomed values in lastAxis
if (!w.globals.zoomed) {
w.globals.lastXAxis = _Utils2.default.clone(w.config.xaxis);
w.globals.lastYAxis = _Utils2.default.clone(w.config.yaxis);
}
var xaxis = {
min: xLowestValue,
max: xHighestValue
};
if (zoomtype === 'xy' || zoomtype === 'y') {
yaxis.forEach(function (yaxe, index) {
yaxis[index].min = yLowestValue[index];
yaxis[index].max = yHighestValue[index];
});
}
if (w.config.chart.zoom.autoScaleYaxis) {
var scale = new _Scales2.default(me.ctx);
yaxis = scale.autoScaleY(me.ctx, { xaxis: xaxis });
}
if (toolbar) {
var beforeZoomRange = toolbar.getBeforeZoomRange(xaxis, yaxis);
if (beforeZoomRange) {
xaxis = beforeZoomRange.xaxis ? beforeZoomRange.xaxis : xaxis;
yaxis = beforeZoomRange.yaxis ? beforeZoomRange.yaxe : yaxis;
}
}
me.ctx._updateOptions({
xaxis: xaxis,
yaxis: yaxis
}, false, me.w.config.chart.animations.dynamicAnimation.enabled);
if (typeof w.config.chart.events.zoomed === 'function') {
toolbar.zoomCallback(xaxis, yaxis);
}
w.globals.zoomed = true;
} else if (w.globals.selectionEnabled) {
var _yaxis = null;
var _xaxis = null;
_xaxis = {
min: xLowestValue,
max: xHighestValue
};
if (zoomtype === 'xy' || zoomtype === 'y') {
_yaxis = _Utils2.default.clone(w.config.yaxis);
_yaxis.forEach(function (yaxe, index) {
_yaxis[index].min = yLowestValue[index];
_yaxis[index].max = yHighestValue[index];
});
}
w.globals.selection = me.selection;
if (typeof w.config.chart.events.selection === 'function') {
w.config.chart.events.selection(me.ctx, {
xaxis: _xaxis,
yaxis: _yaxis
});
}
}
}
}
}, {
key: 'panDragging',
value: function panDragging(_ref5) {
var context = _ref5.context,
zoomtype = _ref5.zoomtype;
var w = this.w;
var me = context;
var moveDirection = void 0;
// check to make sure there is data to compare against
if (typeof w.globals.lastClientPosition.x !== 'undefined') {
// get the change from last position to this position
var deltaX = w.globals.lastClientPosition.x - me.clientX;
var deltaY = w.globals.lastClientPosition.y - me.clientY;
// check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
moveDirection = 'left';
} else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
moveDirection = 'right';
} else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
moveDirection = 'up';
} else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
moveDirection = 'down';
}
}
// set the new last position to the current for next time (to get the position of drag)
w.globals.lastClientPosition = {
x: me.clientX,
y: me.clientY
};
var xLowestValue = w.globals.minX;
var xHighestValue = w.globals.maxX;
this.panScrolled(moveDirection, xLowestValue, xHighestValue);
}
}, {
key: 'panScrolled',
value: function panScrolled(moveDirection, xLowestValue, xHighestValue) {
var w = this.w;
var xyRatios = this.xyRatios;
var yaxis = _Utils2.default.clone(w.config.yaxis);
if (moveDirection === 'left') {
xLowestValue = w.globals.minX + w.globals.gridWidth / 15 * xyRatios.xRatio;
xHighestValue = w.globals.maxX + w.globals.gridWidth / 15 * xyRatios.xRatio;
} else if (moveDirection === 'right') {
xLowestValue = w.globals.minX - w.globals.gridWidth / 15 * xyRatios.xRatio;
xHighestValue = w.globals.maxX - w.globals.gridWidth / 15 * xyRatios.xRatio;
}
if (xLowestValue < w.globals.initialminX || xHighestValue > w.globals.initialmaxX) {
xLowestValue = w.globals.minX;
xHighestValue = w.globals.maxX;
}
var xaxis = {
min: xLowestValue,
max: xHighestValue
};
if (w.config.chart.zoom.autoScaleYaxis) {
var scale = new _Scales2.default(me.ctx);
yaxis = scale.autoScaleY(me.ctx, { xaxis: xaxis });
}
this.ctx._updateOptions({
xaxis: {
min: xLowestValue,
max: xHighestValue
},
yaxis: yaxis
}, false, false);
if (typeof w.config.chart.events.scrolled === 'function') {
w.config.chart.events.scrolled(this.ctx, {
xaxis: {
min: xLowestValue,
max: xHighestValue
}
});
}
}
}]);
return ZoomPanSelection;
}(_Toolbar3.default);
exports.default = ZoomPanSelection;
/***/ }),
/* 49 */
/***/ (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; }; }();
var _Animations = __webpack_require__(5);
var _Animations2 = _interopRequireDefault(_Animations);
var _CoreUtils = __webpack_require__(2);
var _CoreUtils2 = _interopRequireDefault(_CoreUtils);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _XAxis = __webpack_require__(15);
var _XAxis2 = _interopRequireDefault(_XAxis);
var _YAxis = __webpack_require__(16);
var _YAxis2 = _interopRequireDefault(_YAxis);
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 Grid Class for drawing Cartesian Grid.
*
* @module Grid
**/
var Grid = function () {
function Grid(ctx) {
_classCallCheck(this, Grid);
this.ctx = ctx;
this.w = ctx.w;
var w = this.w;
this.anim = new _Animations2.default(this.ctx);
this.xaxisLabels = w.globals.labels.slice();
this.animX = w.config.grid.xaxis.lines.animate && w.config.chart.animations.enabled;
this.animY = w.config.grid.yaxis.lines.animate && w.config.chart.animations.enabled;
if (w.globals.timelineLabels.length > 0) {
// timeline labels are there
this.xaxisLabels = w.globals.timelineLabels.slice();
}
}
// .when using sparklines or when showing no grid, we need to have a grid area which is reused at many places for other calculations as well
_createClass(Grid, [{
key: 'drawGridArea',
value: function drawGridArea() {
var elGrid = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
if (elGrid === null) {
elGrid = graphics.group({
class: 'apexcharts-grid'
});
}
var elVerticalLine = graphics.drawLine(w.globals.padHorizontal, 1, w.globals.padHorizontal, w.globals.gridHeight, 'transparent');
var elHorzLine = graphics.drawLine(w.globals.padHorizontal, w.globals.gridHeight, w.globals.gridWidth, w.globals.gridHeight, 'transparent');
elGrid.add(elHorzLine);
elGrid.add(elVerticalLine);
return elGrid;
}
}, {
key: 'drawGrid',
value: function drawGrid() {
var w = this.w;
var xAxis = new _XAxis2.default(this.ctx);
var yaxis = new _YAxis2.default(this.ctx);
var gl = this.w.globals;
var elgrid = null;
if (gl.axisCharts) {
if (w.config.grid.show) {
// grid is drawn after xaxis and yaxis are drawn
elgrid = this.renderGrid();
gl.dom.elGraphical.add(elgrid.el);
this.drawGridArea(elgrid.el);
} else {
var elgridArea = this.drawGridArea();
gl.dom.elGraphical.add(elgridArea);
}
if (elgrid !== null) {
xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth);
}
yaxis.setYAxisTextAlignments();
}
}
// This mask will clip off overflowing graphics from the drawable area
}, {
key: 'createGridMask',
value: function createGridMask() {
var w = this.w;
var gl = w.globals;
var graphics = new _Graphics2.default(this.ctx);
var strokeSize = Array.isArray(w.config.stroke.width) ? 0 : w.config.stroke.width;
if (Array.isArray(w.config.stroke.width)) {
var strokeMaxSize = 0;
w.config.stroke.width.forEach(function (m) {
strokeMaxSize = Math.max(strokeMaxSize, m);
});
strokeSize = strokeMaxSize;
}
gl.dom.elGridRectMask = document.createElementNS(gl.SVGNS, 'clipPath');
gl.dom.elGridRectMask.setAttribute('id', 'gridRectMask' + gl.cuid);
gl.dom.elGridRectMarkerMask = document.createElementNS(gl.SVGNS, 'clipPath');
gl.dom.elGridRectMarkerMask.setAttribute('id', 'gridRectMarkerMask' + gl.cuid);
gl.dom.elGridRect = graphics.drawRect(-strokeSize / 2, -strokeSize / 2, gl.gridWidth + strokeSize, gl.gridHeight + strokeSize, 0, '#fff');
var coreUtils = new _CoreUtils2.default(this);
coreUtils.getLargestMarkerSize();
var markerSize = w.globals.markers.largestSize + 1;
gl.dom.elGridRectMarker = graphics.drawRect(-markerSize, -markerSize, gl.gridWidth + markerSize * 2, gl.gridHeight + markerSize * 2, 0, '#fff');
gl.dom.elGridRectMask.appendChild(gl.dom.elGridRect.node);
gl.dom.elGridRectMarkerMask.appendChild(gl.dom.elGridRectMarker.node);
var defs = gl.dom.baseEl.querySelector('defs');
defs.appendChild(gl.dom.elGridRectMask);
defs.appendChild(gl.dom.elGridRectMarkerMask);
}
// actual grid rendering
}, {
key: 'renderGrid',
value: function renderGrid() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var strokeDashArray = w.config.grid.strokeDashArray;
var elg = graphics.group({
class: 'apexcharts-grid'
});
var elgridLinesH = graphics.group({
class: 'apexcharts-gridlines-horizontal'
});
var elgridLinesV = graphics.group({
class: 'apexcharts-gridlines-vertical'
});
elg.add(elgridLinesH);
elg.add(elgridLinesV);
var tickAmount = 8;
for (var i = 0; i < w.globals.series.length; i++) {
if (typeof w.globals.yAxisScale[i] !== 'undefined') {
tickAmount = w.globals.yAxisScale[i].result.length - 1;
}
if (tickAmount > 2) break;
}
var xCount = void 0;
if (!w.globals.isBarHorizontal) {
xCount = this.xaxisLabels.length;
// draw vertical lines
if (w.config.grid.xaxis.lines.show || w.config.xaxis.axisTicks.show) {
var x1 = w.globals.padHorizontal;
var y1 = 0;
var x2 = void 0;
var y2 = w.globals.gridHeight;
if (w.globals.timelineLabels.length > 0) {
for (var _i = 0; _i < xCount; _i++) {
x1 = this.xaxisLabels[_i].position;
x2 = this.xaxisLabels[_i].position;
if (w.config.grid.xaxis.lines.show && x1 > 0 && x1 < w.globals.gridWidth) {
var line = graphics.drawLine(x1, y1, x2, y2, w.config.grid.borderColor, strokeDashArray);
line.node.classList.add('apexcharts-gridline');
elgridLinesV.add(line);
if (this.animX) {
this.animateLine(line, { x1: 0, x2: 0 }, { x1: x1, x2: x2 });
}
}
var xAxis = new _XAxis2.default(this.ctx);
if (_i === xCount - 1) {
if (!w.globals.skipLastTimelinelabel) {
// skip drawing last label here
xAxis.drawXaxisTicks(x1, elg);
}
} else {
xAxis.drawXaxisTicks(x1, elg);
}
}
} else {
var xCountForCategoryCharts = xCount;
for (var _i2 = 0; _i2 < xCountForCategoryCharts; _i2++) {
var x1Count = xCountForCategoryCharts;
if (w.globals.isXNumeric && w.config.chart.type !== 'bar') {
x1Count -= 1;
}
x1 = x1 + w.globals.gridWidth / x1Count;
x2 = x1;
// skip the last line
if (_i2 === x1Count - 1) break;
if (w.config.grid.xaxis.lines.show) {
var _line = graphics.drawLine(x1, y1, x2, y2, w.config.grid.borderColor, strokeDashArray);
_line.node.classList.add('apexcharts-gridline');
elgridLinesV.add(_line);
if (this.animX) {
this.animateLine(_line, { x1: 0, x2: 0 }, { x1: x1, x2: x2 });
}
}
var _xAxis = new _XAxis2.default(this.ctx);
_xAxis.drawXaxisTicks(x1, elg);
}
}
}
// draw horizontal lines
if (w.config.grid.yaxis.lines.show) {
var _x2 = 0;
var _y = 0;
var _y2 = 0;
var _x3 = w.globals.gridWidth;
for (var _i3 = 0; _i3 < tickAmount + 1; _i3++) {
var _line2 = graphics.drawLine(_x2, _y, _x3, _y2, w.config.grid.borderColor, strokeDashArray);
elgridLinesH.add(_line2);
_line2.node.classList.add('apexcharts-gridline');
if (this.animY) {
this.animateLine(_line2, { y1: _y + 20, y2: _y2 + 20 }, { y1: _y, y2: _y2 });
}
_y = _y + w.globals.gridHeight / tickAmount;
_y2 = _y;
}
}
} else {
xCount = tickAmount;
// draw vertical lines
if (w.config.grid.xaxis.lines.show || w.config.xaxis.axisTicks.show) {
var _x4 = w.globals.padHorizontal;
var _y3 = 0;
var _x5 = void 0;
var _y4 = w.globals.gridHeight;
for (var _i4 = 0; _i4 < xCount + 1; _i4++) {
_x4 = _x4 + w.globals.gridWidth / xCount + 0.3;
_x5 = _x4;
// skip the last vertical line
if (_i4 === xCount - 1) break;
if (w.config.grid.xaxis.lines.show) {
var _line3 = graphics.drawLine(_x4, _y3, _x5, _y4, w.config.grid.borderColor, strokeDashArray);
_line3.node.classList.add('apexcharts-gridline');
elgridLinesV.add(_line3);
if (this.animX) {
this.animateLine(_line3, { x1: 0, x2: 0 }, { x1: _x4, x2: _x5 });
}
}
// skip the first vertical line
var _xAxis2 = new _XAxis2.default(this.ctx);
_xAxis2.drawXaxisTicks(_x4, elg);
}
}
// draw horizontal lines
if (w.config.grid.yaxis.lines.show) {
var _x6 = 0;
var _y5 = 0;
var _y6 = 0;
var _x7 = w.globals.gridWidth;
for (var _i5 = 0; _i5 < w.globals.dataPoints + 1; _i5++) {
var _line4 = graphics.drawLine(_x6, _y5, _x7, _y6, w.config.grid.borderColor, strokeDashArray);
elgridLinesH.add(_line4);
_line4.node.classList.add('apexcharts-gridline');
if (this.animY) {
this.animateLine(_line4, { y1: _y5 + 20, y2: _y6 + 20 }, { y1: _y5, y2: _y6 });
}
_y5 = _y5 + w.globals.gridHeight / w.globals.dataPoints;
_y6 = _y5;
}
}
}
this.drawGridBands(elg, xCount, tickAmount);
return {
el: elg,
xAxisTickWidth: w.globals.gridWidth / xCount
};
}
}, {
key: 'drawGridBands',
value: function drawGridBands(elg, xCount, tickAmount) {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
// rows background bands
if (w.config.grid.row.colors !== undefined && w.config.grid.row.colors.length > 0) {
var x1 = 0;
var y1 = 0;
var y2 = w.globals.gridHeight / tickAmount;
var x2 = w.globals.gridWidth;
for (var i = 0, c = 0; i < tickAmount; i++, c++) {
if (c >= w.config.grid.row.colors.length) {
c = 0;
}
var color = w.config.grid.row.colors[c];
var rect = graphics.drawRect(x1, y1, x2, y2, 0, color, w.config.grid.row.opacity);
elg.add(rect);
rect.node.classList.add('apexcharts-gridRow');
y1 = y1 + w.globals.gridHeight / tickAmount;
}
}
// columns background bands
if (w.config.grid.column.colors !== undefined && w.config.grid.column.colors.length > 0) {
var _x8 = w.globals.padHorizontal;
var _y7 = 0;
var _x9 = w.globals.padHorizontal + w.globals.gridWidth / xCount;
var _y8 = w.globals.gridHeight;
for (var _i6 = 0, _c = 0; _i6 < xCount; _i6++, _c++) {
if (_c >= w.config.grid.column.colors.length) {
_c = 0;
}
var _color = w.config.grid.column.colors[_c];
var _rect = graphics.drawRect(_x8, _y7, _x9, _y8, 0, _color, w.config.grid.column.opacity);
_rect.node.classList.add('apexcharts-gridColumn');
elg.add(_rect);
_x8 = _x8 + w.globals.gridWidth / xCount;
}
}
}
}, {
key: 'animateLine',
value: function animateLine(line, from, to) {
var w = this.w;
var initialAnim = w.config.chart.animations;
if (initialAnim && !w.globals.resized && !w.globals.dataChanged) {
var speed = initialAnim.speed;
this.anim.animateLine(line, from, to, speed);
}
}
}]);
return Grid;
}();
exports.default = Grid;
/***/ }),
/* 50 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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);
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"); } }
var Globals = function () {
function Globals() {
_classCallCheck(this, Globals);
}
_createClass(Globals, [{
key: 'globalVars',
value: function globalVars(config) {
return {
chartID: null, // chart ID - apexcharts-cuid
cuid: null, // chart ID - random numbers excluding "apexcharts" part
events: {
beforeMount: [],
mounted: [],
updated: [],
clicked: [],
selection: [],
dataPointSelection: [],
zoomed: [],
scrolled: []
},
colors: [],
clientX: null,
clientY: null,
fill: {
colors: []
},
stroke: {
colors: []
},
dataLabels: {
style: {
colors: []
}
},
radarPolygons: {
fill: {
colors: []
}
},
markers: {
colors: [],
size: config.markers.size,
largestSize: 0
},
animationEnded: false,
isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints,
isDirty: false, // chart has been updated after the initial render. This is different than dataChanged property. isDirty means user manually called some method to update
initialConfig: null, // we will store the first config user has set to go back when user finishes interactions like zooming and come out of it
lastXAxis: [],
lastYAxis: [],
series: [], // the MAIN series array (y values)
seriesRangeStart: [], // the clone of series becomes the start in range
seriesRangeEnd: [], // the end values in range chart
seriesPercent: [], // the percentage values of the given series
seriesTotals: [],
stackedSeriesTotals: [],
seriesX: [], // store the numeric x values in this array (x values)
seriesZ: [], // The 3rd "Z" dimension for bubbles chart (z values)
labels: [], // store the text to draw on x axis
// Don't mutate the labels, many things including tooltips depends on it!
timelineLabels: [], // store the timeline Labels in another variable
invertedTimelineLabels: [], // for rangebar timeline
seriesNames: [], // same as labels, used in non axis charts
noLabelsProvided: false, // if user didn't provide any categories/labels or x values, fallback to 1,2,3,4...
allSeriesCollapsed: false,
collapsedSeries: [], // when user collapses a series, it goes into this array
collapsedSeriesIndices: [], // this stores the index of the collapsedSeries instead of whole object for quick access
ancillaryCollapsedSeries: [], // when user collapses an "alwaysVisible" series, it goes into this array
ancillaryCollapsedSeriesIndices: [], // this stores the index of the ancillaryCollapsedSeries whose y-axis is always visible
risingSeries: [], // when user re-opens a collapsed series, it goes here
dataFormatXNumeric: false, // boolean value to indicate user has passed numeric x values
selectedDataPoints: [],
ignoreYAxisIndexes: [], // when series are being collapsed in multiple y axes, ignore certain index
padHorizontal: 0,
maxValsInArrayIndex: 0,
zoomEnabled: config.chart.toolbar.autoSelected === 'zoom' && config.chart.toolbar.tools.zoom && config.chart.zoom.enabled,
panEnabled: config.chart.toolbar.autoSelected === 'pan' && config.chart.toolbar.tools.pan,
selectionEnabled: config.chart.toolbar.autoSelected === 'selection' && config.chart.toolbar.tools.selection,
yaxis: null,
minY: Number.MIN_VALUE, // is 5e-324, i.e. the smallest positive number
// NOTE: If there are multiple y axis, the first yaxis array element will be considered for all y values calculations. Rest all will be calculated based on that
maxY: -Number.MAX_VALUE, // is -1.7976931348623157e+308
// NOTE: The above note for minY applies here as well
minYArr: [],
maxYArr: [],
maxX: -Number.MAX_VALUE, // is -1.7976931348623157e+308
initialmaxX: -Number.MAX_VALUE,
minX: Number.MIN_VALUE, // is 5e-324, i.e. the smallest positive number
initialminX: Number.MIN_VALUE,
minZ: Number.MIN_VALUE, // Max Z value in charts with Z axis
maxZ: -Number.MAX_VALUE, // Max Z value in charts with Z axis
minXDiff: Number.MAX_VALUE,
mousedown: false,
lastClientPosition: {}, // don't reset this variable this the chart is destroyed. It is used to detect right or left mousemove in panning
visibleXRange: undefined,
yRange: [], // this property is the absolute sum of positive and negative values [eg (-100 + 200 = 300)] - yAxis
zRange: 0, // zAxis Range (for bubble charts)
xRange: 0, // xAxis range
yValueDecimal: 0, // are there floating numbers in the series. If yes, this represent the len of the decimals
total: 0,
SVGNS: 'http://www.w3.org/2000/svg', // svg namespace
svgWidth: 0, // the whole svg width
svgHeight: 0, // the whole svg height
noData: false, // whether there is any data to display or not
locale: {}, // the current locale values will be preserved here for global access
dom: {}, // for storing all dom nodes in this particular property
// elWrap: null, // the element that wraps everything
// elGraphical: null, // this contains lines/areas/bars/pies
// elGridRect: null, // paths going outside this area will be clipped
// elGridRectMask: null, // clipping will happen with this mask
// elGridRectMarkerMask: null, // clipping will happen with this mask
// elLegendWrap: null, // the whole legend area
// elDefs: null, // [defs] element
memory: {
methodsToExec: []
},
shouldAnimate: true,
skipLastTimelinelabel: false, // when last label is cropped, skip drawing it
delayedElements: [], // element which appear after animation has finished
axisCharts: true, // chart type = line or area or bar
// (refer them also as plot charts in the code)
isXNumeric: false, // bool: data was provided in a {[x,y], [x,y]} pattern
isDataXYZ: false, // bool: data was provided in a {[x,y,z]} pattern
resized: false, // bool: user has resized
resizeTimer: null, // timeout function to make a small delay before
// drawing when user resized
comboCharts: false, // bool: whether it's a combination of line/column
comboChartsHasBars: false, // bool: whether it's a combination of line/column
dataChanged: false, // bool: has data changed dynamically
previousPaths: [], // array: when data is changed, it will animate from
// previous paths
seriesXvalues: [], // we will need this in tooltip (it's x position)
// when we will have unequal x values, we will need
// some way to get x value depending on mouse pointer
seriesYvalues: [], // we will need this when deciding which series
// user hovered on
seriesCandleO: [], // candle stick open values
seriesCandleH: [], // candle stick high values
seriesCandleL: [], // candle stick low values
seriesCandleC: [], // candle stick close values
allSeriesHasEqualX: true,
dataPoints: 0, // the longest series length
pointsArray: [], // store the points positions here to draw later on hover
// format is - [[x,y],[x,y]... [x,y]]
dataLabelsRects: [], // store the positions of datalabels to prevent collision
lastDrawnDataLabelsIndexes: [],
hasNullValues: false, // bool: whether series contains null values
easing: null, // function: animation effect to apply
zoomed: false, // whether user has zoomed or not
gridWidth: 0, // drawable width of actual graphs (series paths)
gridHeight: 0, // drawable height of actual graphs (series paths)
yAxisScale: [],
xAxisScale: null,
xAxisTicksPositions: [],
timescaleTicks: [],
rotateXLabels: false,
defaultLabels: false,
xLabelFormatter: undefined, // formatter for x axis labels
yLabelFormatters: [],
xaxisTooltipFormatter: undefined, // formatter for x axis tooltip
ttKeyFormatter: undefined,
ttVal: undefined,
ttZFormatter: undefined,
LINE_HEIGHT_RATIO: 1.618,
xAxisLabelsHeight: 0,
yAxisLabelsWidth: 0,
scaleX: 1,
scaleY: 1,
translateX: 0,
translateY: 0,
translateYAxisX: [],
yLabelsCoords: [],
yTitleCoords: [],
yAxisWidths: [],
translateXAxisY: 0,
translateXAxisX: 0,
tooltip: null,
tooltipOpts: null
};
}
}, {
key: 'init',
value: function init(config) {
var globals = this.globalVars(config);
globals.initialConfig = _Utils2.default.extend({}, config);
globals.initialSeries = JSON.parse(JSON.stringify(globals.initialConfig.series));
globals.lastXAxis = JSON.parse(JSON.stringify(globals.initialConfig.xaxis));
globals.lastYAxis = JSON.parse(JSON.stringify(globals.initialConfig.yaxis));
return globals;
}
}]);
return Globals;
}();
exports.default = Globals;
/***/ }),
/* 51 */
/***/ (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"); } }
/**
* ApexCharts Tooltip.AxesTooltip Class.
*
* @module Tooltip.AxesTooltip
**/
var AxesTooltip = function () {
function AxesTooltip(tooltipContext) {
_classCallCheck(this, AxesTooltip);
this.w = tooltipContext.w;
this.ttCtx = tooltipContext;
}
/**
* This method adds the secondary tooltip which appears below x axis
* @memberof Tooltip
**/
_createClass(AxesTooltip, [{
key: 'drawXaxisTooltip',
value: function drawXaxisTooltip() {
var w = this.w;
var ttCtx = this.ttCtx;
var isBottom = w.config.xaxis.position === 'bottom';
ttCtx.xaxisOffY = isBottom ? w.globals.gridHeight + 1 : 1;
var tooltipCssClass = isBottom ? 'apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom' : 'apexcharts-xaxistooltip apexcharts-xaxistooltip-top';
var renderTo = w.globals.dom.elWrap;
if (ttCtx.blxaxisTooltip) {
var xaxisTooltip = w.globals.dom.baseEl.querySelector('.apexcharts-xaxistooltip');
if (xaxisTooltip === null) {
ttCtx.xaxisTooltip = document.createElement('div');
ttCtx.xaxisTooltip.setAttribute('class', tooltipCssClass + ' ' + w.config.tooltip.theme);
renderTo.appendChild(ttCtx.xaxisTooltip);
ttCtx.xaxisTooltipText = document.createElement('div');
ttCtx.xaxisTooltipText.classList.add('apexcharts-xaxistooltip-text');
ttCtx.xaxisTooltipText.style.fontFamily = w.config.xaxis.tooltip.style.fontFamily || w.config.chart.fontFamily;
ttCtx.xaxisTooltipText.style.fontSize = w.config.xaxis.tooltip.style.fontSize;
ttCtx.xaxisTooltip.appendChild(ttCtx.xaxisTooltipText);
}
}
}
/**
* This method adds the secondary tooltip which appears below x axis
* @memberof Tooltip
**/
}, {
key: 'drawYaxisTooltip',
value: function drawYaxisTooltip() {
var w = this.w;
var ttCtx = this.ttCtx;
for (var i = 0; i < w.config.yaxis.length; i++) {
var isRight = w.config.yaxis[i].opposite || w.config.yaxis[i].crosshairs.opposite;
ttCtx.yaxisOffX = isRight ? w.globals.gridWidth + 1 : 1;
var tooltipCssClass = isRight ? 'apexcharts-yaxistooltip apexcharts-yaxistooltip-' + i + ' apexcharts-yaxistooltip-right' : 'apexcharts-yaxistooltip apexcharts-yaxistooltip-' + i + ' apexcharts-yaxistooltip-left';
var renderTo = w.globals.dom.elWrap;
if (ttCtx.blyaxisTooltip) {
var yaxisTooltip = w.globals.dom.baseEl.querySelector('.apexcharts-yaxistooltip apexcharts-yaxistooltip-' + i);
if (yaxisTooltip === null) {
ttCtx.yaxisTooltip = document.createElement('div');
ttCtx.yaxisTooltip.setAttribute('class', tooltipCssClass + ' ' + w.config.tooltip.theme);
renderTo.appendChild(ttCtx.yaxisTooltip);
if (i === 0) ttCtx.yaxisTooltipText = [];
ttCtx.yaxisTooltipText.push(document.createElement('div'));
ttCtx.yaxisTooltipText[i].classList.add('apexcharts-yaxistooltip-text');
ttCtx.yaxisTooltip.appendChild(ttCtx.yaxisTooltipText[i]);
}
}
}
}
/**
* @memberof Tooltip
**/
}, {
key: 'setXCrosshairWidth',
value: function setXCrosshairWidth() {
var w = this.w;
var ttCtx = this.ttCtx;
// set xcrosshairs width
var xcrosshairs = ttCtx.getElXCrosshairs();
ttCtx.xcrosshairsWidth = parseInt(w.config.xaxis.crosshairs.width);
if (!w.globals.comboCharts) {
if (w.config.xaxis.crosshairs.width === 'tickWidth') {
var count = w.globals.labels.length;
ttCtx.xcrosshairsWidth = w.globals.gridWidth / count;
} else if (w.config.xaxis.crosshairs.width === 'barWidth') {
var bar = w.globals.dom.baseEl.querySelector('.apexcharts-bar-area');
if (bar !== null) {
var barWidth = parseFloat(bar.getAttribute('barWidth'));
ttCtx.xcrosshairsWidth = barWidth;
} else {
ttCtx.xcrosshairsWidth = 1;
}
}
} else {
var _bar = w.globals.dom.baseEl.querySelector('.apexcharts-bar-area');
if (_bar !== null && w.config.xaxis.crosshairs.width === 'barWidth') {
var _barWidth = parseFloat(_bar.getAttribute('barWidth'));
ttCtx.xcrosshairsWidth = _barWidth;
} else {
if (w.config.xaxis.crosshairs.width === 'tickWidth') {
var _count = w.globals.labels.length;
ttCtx.xcrosshairsWidth = w.globals.gridWidth / _count;
}
}
}
if (w.globals.isBarHorizontal) {
ttCtx.xcrosshairsWidth = 0;
}
if (xcrosshairs !== null && ttCtx.xcrosshairsWidth > 0) {
xcrosshairs.setAttribute('width', ttCtx.xcrosshairsWidth);
}
}
}, {
key: 'handleYCrosshair',
value: function handleYCrosshair() {
var w = this.w;
var ttCtx = this.ttCtx;
// set ycrosshairs height
ttCtx.ycrosshairs = w.globals.dom.baseEl.querySelector('.apexcharts-ycrosshairs');
ttCtx.ycrosshairsHidden = w.globals.dom.baseEl.querySelector('.apexcharts-ycrosshairs-hidden');
}
}, {
key: 'drawYaxisTooltipText',
value: function drawYaxisTooltipText(index, clientY, xyRatios) {
var ttCtx = this.ttCtx;
var w = this.w;
var lbFormatter = w.globals.yLabelFormatters[index];
if (ttCtx.blyaxisTooltip) {
var elGrid = ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
var hoverY = (clientY - seriesBound.top) * xyRatios.yRatio[index];
var height = w.globals.maxYArr[index] - w.globals.minYArr[index];
var val = w.globals.minYArr[index] + (height - hoverY);
ttCtx.tooltipPosition.moveYCrosshairs(clientY - seriesBound.top);
ttCtx.yaxisTooltipText[index].innerHTML = lbFormatter(val);
ttCtx.tooltipPosition.moveYAxisTooltip(index);
}
}
}]);
return AxesTooltip;
}();
exports.default = AxesTooltip;
/***/ }),
/* 52 */
/***/ (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; }; }();
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Tooltip.Intersect Class.
*
* @module Tooltip.Intersect
**/
var Intersect = function () {
function Intersect(tooltipContext) {
_classCallCheck(this, Intersect);
this.w = tooltipContext.w;
this.ttCtx = tooltipContext;
}
_createClass(Intersect, [{
key: 'getAttr',
value: function getAttr(e, attr) {
return parseFloat(e.target.getAttribute(attr));
}
}, {
key: 'handleHeatTooltip',
value: function handleHeatTooltip(_ref) {
var e = _ref.e,
opt = _ref.opt,
x = _ref.x,
y = _ref.y;
var ttCtx = this.ttCtx;
var w = this.w;
if (e.target.classList.contains('apexcharts-heatmap-rect')) {
var i = this.getAttr(e, 'i');
var j = this.getAttr(e, 'j');
var cx = this.getAttr(e, 'cx');
var cy = this.getAttr(e, 'cy');
var width = this.getAttr(e, 'width');
var height = this.getAttr(e, 'height');
ttCtx.tooltipLabels.drawSeriesTexts({
ttItems: opt.ttItems,
i: i,
j: j,
shared: false
});
x = cx + ttCtx.tooltipRect.ttWidth / 2 + width;
y = cy + ttCtx.tooltipRect.ttHeight / 2 - height / 2;
ttCtx.tooltipPosition.moveXCrosshairs(cx + width / 2);
if (x > w.globals.gridWidth / 2) {
x = cx - ttCtx.tooltipRect.ttWidth / 2 + width;
}
if (ttCtx.w.config.tooltip.followCursor) {
var elGrid = ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
// x = ttCtx.e.clientX - seriesBound.left
y = ttCtx.e.clientY - seriesBound.top + w.globals.translateY / 2 - 10;
}
}
return {
x: x,
y: y
};
}
}, {
key: 'handleMarkerTooltip',
value: function handleMarkerTooltip(_ref2) {
var e = _ref2.e,
opt = _ref2.opt,
x = _ref2.x,
y = _ref2.y;
var w = this.w;
var ttCtx = this.ttCtx;
var i = void 0;
var j = void 0;
if (e.target.classList.contains('apexcharts-marker')) {
var cx = parseInt(opt.paths.getAttribute('cx'));
var cy = parseInt(opt.paths.getAttribute('cy'));
var val = parseFloat(opt.paths.getAttribute('val'));
j = parseInt(opt.paths.getAttribute('rel'));
i = parseInt(opt.paths.parentNode.parentNode.parentNode.getAttribute('rel')) - 1;
if (ttCtx.intersect) {
var el = _Utils2.default.findAncestor(opt.paths, 'apexcharts-series');
if (el) {
i = parseInt(el.getAttribute('data:realIndex'));
}
}
ttCtx.tooltipLabels.drawSeriesTexts({
ttItems: opt.ttItems,
i: i,
j: j,
shared: ttCtx.showOnIntersect ? false : w.config.tooltip.shared
});
if (e.type === 'mouseup') {
ttCtx.markerClick(e, i, j);
}
x = cx;
y = cy + w.globals.translateY - ttCtx.tooltipRect.ttHeight * 1.4;
if (ttCtx.w.config.tooltip.followCursor) {
var elGrid = ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
y = ttCtx.e.clientY + w.globals.translateY - seriesBound.top;
}
if (val < 0) {
y = cy;
}
ttCtx.marker.enlargeCurrentPoint(j, opt.paths, x, y);
}
return {
x: x,
y: y
};
}
}, {
key: 'handleBarTooltip',
value: function handleBarTooltip(_ref3) {
var e = _ref3.e,
opt = _ref3.opt;
var w = this.w;
var ttCtx = this.ttCtx;
var tooltipEl = ttCtx.getElTooltip();
var bx = 0;
var x = 0;
var y = 0;
// let bW = 0
var i = 0;
var strokeWidth = void 0;
var barXY = this.getBarTooltipXY({
e: e,
opt: opt
});
i = barXY.i;
var barHeight = barXY.barHeight;
var j = barXY.j;
if (w.globals.isBarHorizontal && ttCtx.hasBars() || !w.config.tooltip.shared) {
x = barXY.x;
y = barXY.y;
strokeWidth = Array.isArray(w.config.stroke.width) ? w.config.stroke.width[i] : w.config.stroke.width;
// bW = barXY.barWidth
bx = x;
} else {
if (!w.globals.comboCharts && !w.config.tooltip.shared) {
bx = bx / 2;
}
}
// y is NaN, make it touch the bottom of grid area
if (isNaN(y)) {
y = w.globals.svgHeight - ttCtx.tooltipRect.ttHeight;
}
// x exceeds gridWidth
if (x + ttCtx.tooltipRect.ttWidth > w.globals.gridWidth) {
x = x - ttCtx.tooltipRect.ttWidth;
} else if (x < 0) {
x = x + ttCtx.tooltipRect.ttWidth;
}
if (ttCtx.w.config.tooltip.followCursor) {
var elGrid = ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
y = ttCtx.e.clientY - seriesBound.top;
}
// if tooltip is still null, querySelector
if (ttCtx.tooltip === null) {
ttCtx.tooltip = w.globals.dom.baseEl.querySelector('.apexcharts-tooltip');
}
if (!w.config.tooltip.shared) {
if (w.globals.comboChartsHasBars) {
ttCtx.tooltipPosition.moveXCrosshairs(bx + strokeWidth / 2);
} else {
ttCtx.tooltipPosition.moveXCrosshairs(bx);
}
}
// move tooltip here
if (!ttCtx.fixedTooltip && (!w.config.tooltip.shared || w.globals.isBarHorizontal && ttCtx.hasBars())) {
if (isReversed) {
x = w.globals.gridWidth - x;
}
tooltipEl.style.left = x + w.globals.translateX + 'px';
var seriesIndex = parseInt(opt.paths.parentNode.getAttribute('data:realIndex'));
var isReversed = w.globals.isMultipleYAxis ? w.config.yaxis[seriesIndex] && w.config.yaxis[seriesIndex].reversed : w.config.yaxis[0].reversed;
if (isReversed && !(w.globals.isBarHorizontal && ttCtx.hasBars())) {
y = y + barHeight - (w.globals.series[i][j] < 0 ? barHeight : 0) * 2;
}
if (ttCtx.tooltipRect.ttHeight + y > w.globals.gridHeight) {
y = w.globals.gridHeight - ttCtx.tooltipRect.ttHeight + w.globals.translateY;
tooltipEl.style.top = y + 'px';
} else {
tooltipEl.style.top = y + w.globals.translateY - ttCtx.tooltipRect.ttHeight / 2 + 'px';
}
}
}
}, {
key: 'getBarTooltipXY',
value: function getBarTooltipXY(_ref4) {
var e = _ref4.e,
opt = _ref4.opt;
var w = this.w;
var j = null;
var ttCtx = this.ttCtx;
var i = 0;
var x = 0;
var y = 0;
var barWidth = 0;
var barHeight = 0;
var cl = e.target.classList;
if (cl.contains('apexcharts-bar-area') || cl.contains('apexcharts-candlestick-area') || cl.contains('apexcharts-rangebar-area')) {
var bar = e.target;
var barRect = bar.getBoundingClientRect();
var seriesBound = opt.elGrid.getBoundingClientRect();
var bh = barRect.height;
barHeight = barRect.height;
var bw = barRect.width;
var cx = parseInt(bar.getAttribute('cx'));
var cy = parseInt(bar.getAttribute('cy'));
barWidth = parseFloat(bar.getAttribute('barWidth'));
var clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
j = parseInt(bar.getAttribute('j'));
i = parseInt(bar.parentNode.getAttribute('rel')) - 1;
if (w.globals.comboCharts) {
i = parseInt(bar.parentNode.getAttribute('data:realIndex'));
}
// if (w.config.tooltip.shared) {
// this check not needed at the moment
// const yDivisor = w.globals.gridHeight / (w.globals.series.length)
// const hoverY = ttCtx.clientY - ttCtx.seriesBound.top
// j = Math.ceil(hoverY / yDivisor)
// }
ttCtx.tooltipLabels.drawSeriesTexts({
ttItems: opt.ttItems,
i: i,
j: j,
shared: ttCtx.showOnIntersect ? false : w.config.tooltip.shared
});
if (w.config.tooltip.followCursor) {
if (w.globals.isBarHorizontal) {
x = clientX - seriesBound.left + 15;
y = cy - ttCtx.dataPointsDividedHeight + bh / 2 - ttCtx.tooltipRect.ttHeight / 2;
} else {
if (w.globals.isXNumeric) {
x = cx - bw / 2;
} else {
x = cx - ttCtx.dataPointsDividedWidth + bw / 2;
}
y = e.clientY - seriesBound.top - ttCtx.tooltipRect.ttHeight / 2 - 15;
}
} else {
if (w.globals.isBarHorizontal) {
x = cx;
if (x < ttCtx.xyRatios.baseLineInvertedY) {
x = cx - ttCtx.tooltipRect.ttWidth;
}
y = cy - ttCtx.dataPointsDividedHeight + bh / 2 - ttCtx.tooltipRect.ttHeight / 2;
} else {
// if columns
if (w.globals.isXNumeric) {
x = cx - bw / 2;
} else {
x = cx - ttCtx.dataPointsDividedWidth + bw / 2;
}
y = cy; // - ttCtx.tooltipRect.ttHeight / 2 + 10
}
}
}
return {
x: x,
y: y,
barHeight: barHeight,
barWidth: barWidth,
i: i,
j: j
};
}
}]);
return Intersect;
}();
exports.default = Intersect;
/***/ }),
/* 53 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Formatters = __webpack_require__(10);
var _Formatters2 = _interopRequireDefault(_Formatters);
var _Utils = __webpack_require__(27);
var _Utils2 = _interopRequireDefault(_Utils);
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 Tooltip.Labels Class to draw texts on the tooltip.
*
* @module Tooltip.Labels
**/
var Labels = function () {
function Labels(tooltipContext) {
_classCallCheck(this, Labels);
this.w = tooltipContext.w;
this.ctx = tooltipContext.ctx;
this.ttCtx = tooltipContext;
this.tooltipUtil = new _Utils2.default(tooltipContext);
}
_createClass(Labels, [{
key: 'drawSeriesTexts',
value: function drawSeriesTexts(_ref) {
var _ref$shared = _ref.shared,
shared = _ref$shared === undefined ? true : _ref$shared,
ttItems = _ref.ttItems,
_ref$i = _ref.i,
i = _ref$i === undefined ? 0 : _ref$i,
_ref$j = _ref.j,
j = _ref$j === undefined ? null : _ref$j;
var w = this.w;
if (w.config.tooltip.custom !== undefined) {
this.handleCustomTooltip({ i: i, j: j });
} else {
this.toggleActiveInactiveSeries(shared);
}
var values = this.getValuesToPrint({
i: i,
j: j
});
this.printLabels({
i: i,
j: j,
values: values,
ttItems: ttItems,
shared: shared
});
// Re-calculate tooltip dimensions now that we have drawn the text
var tooltipEl = this.ttCtx.getElTooltip();
this.ttCtx.tooltipRect.ttWidth = tooltipEl.getBoundingClientRect().width;
this.ttCtx.tooltipRect.ttHeight = tooltipEl.getBoundingClientRect().height;
}
}, {
key: 'printLabels',
value: function printLabels(_ref2) {
var i = _ref2.i,
j = _ref2.j,
values = _ref2.values,
ttItems = _ref2.ttItems,
shared = _ref2.shared;
var w = this.w;
var val = void 0;
var xVal = values.xVal,
zVal = values.zVal,
xAxisTTVal = values.xAxisTTVal;
var seriesName = '';
var pColor = w.globals.colors[i];
if (j !== null && w.config.plotOptions.bar.distributed) {
pColor = w.globals.colors[j];
}
for (var t = 0, inverset = w.globals.series.length - 1; t < w.globals.series.length; t++, inverset--) {
var f = this.getFormatters(i);
seriesName = this.getSeriesName({
fn: f.yLbTitleFormatter,
index: i,
seriesIndex: i,
j: j
});
if (shared) {
var tIndex = w.config.tooltip.inverseOrder ? inverset : t;
f = this.getFormatters(tIndex);
seriesName = this.getSeriesName({
fn: f.yLbTitleFormatter,
index: tIndex,
seriesIndex: i,
j: j
});
pColor = w.globals.colors[tIndex];
// for plot charts, not for pie/donuts
val = f.yLbFormatter(w.globals.series[tIndex][j], {
series: w.globals.series,
seriesIndex: tIndex,
dataPointIndex: j,
w: w
});
// discard 0 values in BARS
if (this.ttCtx.hasBars() && w.config.chart.stacked && w.globals.series[tIndex][j] === 0 || typeof w.globals.series[tIndex][j] === 'undefined') {
val = undefined;
}
} else {
val = f.yLbFormatter(w.globals.series[i][j], {
series: w.globals.series,
seriesIndex: i,
dataPointIndex: j,
w: w
});
}
// for pie / donuts
if (j === null) {
val = f.yLbFormatter(w.globals.series[i], w);
}
this.DOMHandling({
t: t,
ttItems: ttItems,
values: {
val: val,
xVal: xVal,
xAxisTTVal: xAxisTTVal,
zVal: zVal
},
seriesName: seriesName,
shared: shared,
pColor: pColor
});
}
}
}, {
key: 'getFormatters',
value: function getFormatters(i) {
var w = this.w;
var yLbFormatter = w.globals.yLabelFormatters[i];
var yLbTitleFormatter = void 0;
if (w.globals.ttVal !== undefined) {
if (Array.isArray(w.globals.ttVal)) {
yLbFormatter = w.globals.ttVal[i] && w.globals.ttVal[i].formatter;
yLbTitleFormatter = w.globals.ttVal[i] && w.globals.ttVal[i].title && w.globals.ttVal[i].title.formatter;
} else {
yLbFormatter = w.globals.ttVal.formatter;
if (typeof w.globals.ttVal.title.formatter === 'function') {
yLbTitleFormatter = w.globals.ttVal.title.formatter;
}
}
} else {
yLbTitleFormatter = w.config.tooltip.y.title.formatter;
}
if (typeof yLbFormatter !== 'function') {
if (w.globals.yLabelFormatters[0]) {
yLbFormatter = w.globals.yLabelFormatters[0];
} else {
yLbFormatter = function yLbFormatter(label) {
return label;
};
}
}
if (typeof yLbTitleFormatter !== 'function') {
yLbTitleFormatter = function yLbTitleFormatter(label) {
return label;
};
}
return {
yLbFormatter: yLbFormatter,
yLbTitleFormatter: yLbTitleFormatter
};
}
}, {
key: 'getSeriesName',
value: function getSeriesName(_ref3) {
var fn = _ref3.fn,
index = _ref3.index,
seriesIndex = _ref3.seriesIndex,
j = _ref3.j;
var w = this.w;
return fn(String(w.globals.seriesNames[index]), {
series: w.globals.series,
seriesIndex: seriesIndex,
dataPointIndex: j,
w: w
});
}
}, {
key: 'DOMHandling',
value: function DOMHandling(_ref4) {
var t = _ref4.t,
ttItems = _ref4.ttItems,
values = _ref4.values,
seriesName = _ref4.seriesName,
shared = _ref4.shared,
pColor = _ref4.pColor;
var w = this.w;
var ttCtx = this.ttCtx;
var val = values.val,
xVal = values.xVal,
xAxisTTVal = values.xAxisTTVal,
zVal = values.zVal;
var ttItemsChildren = null;
ttItemsChildren = ttItems[t].children;
if (w.config.tooltip.fillSeriesColor) {
// elTooltip.style.backgroundColor = pColor
ttItems[t].style.backgroundColor = pColor;
ttItemsChildren[0].style.display = 'none';
}
if (ttCtx.showTooltipTitle) {
if (ttCtx.tooltipTitle === null) {
// get it once if null, and store it in class property
ttCtx.tooltipTitle = w.globals.dom.baseEl.querySelector('.apexcharts-tooltip-title');
}
ttCtx.tooltipTitle.innerHTML = xVal;
}
// if xaxis tooltip is constructed, we need to replace the innerHTML
if (ttCtx.blxaxisTooltip) {
ttCtx.xaxisTooltipText.innerHTML = xAxisTTVal !== '' ? xAxisTTVal : xVal;
}
var ttYLabel = ttItems[t].querySelector('.apexcharts-tooltip-text-label');
if (ttYLabel) {
ttYLabel.innerHTML = seriesName ? seriesName + ': ' : '';
}
var ttYVal = ttItems[t].querySelector('.apexcharts-tooltip-text-value');
if (ttYVal) {
ttYVal.innerHTML = val;
}
if (ttItemsChildren[0] && ttItemsChildren[0].classList.contains('apexcharts-tooltip-marker')) {
ttItemsChildren[0].style.backgroundColor = pColor;
}
if (!w.config.tooltip.marker.show) {
ttItemsChildren[0].style.display = 'none';
}
if (zVal !== null) {
var ttZLabel = ttItems[t].querySelector('.apexcharts-tooltip-text-z-label');
ttZLabel.innerHTML = w.config.tooltip.z.title;
var ttZVal = ttItems[t].querySelector('.apexcharts-tooltip-text-z-value');
ttZVal.innerHTML = zVal;
}
if (shared && ttItemsChildren[0]) {
// hide when no Val or series collapsed
if (typeof val === 'undefined' || val === null || w.globals.collapsedSeriesIndices.indexOf(t) > -1) {
ttItemsChildren[0].parentNode.style.display = 'none';
} else {
ttItemsChildren[0].parentNode.style.display = w.config.tooltip.items.display;
}
}
}
}, {
key: 'toggleActiveInactiveSeries',
value: function toggleActiveInactiveSeries(shared) {
var w = this.w;
if (shared) {
// make all tooltips active
this.tooltipUtil.toggleAllTooltipSeriesGroups('enable');
} else {
// disable all tooltip text groups
this.tooltipUtil.toggleAllTooltipSeriesGroups('disable');
// enable the first tooltip text group
var firstTooltipSeriesGroup = w.globals.dom.baseEl.querySelector('.apexcharts-tooltip-series-group');
if (firstTooltipSeriesGroup) {
firstTooltipSeriesGroup.classList.add('active');
firstTooltipSeriesGroup.style.display = w.config.tooltip.items.display;
}
}
}
}, {
key: 'getValuesToPrint',
value: function getValuesToPrint(_ref5) {
var i = _ref5.i,
j = _ref5.j;
var w = this.w;
var filteredSeriesX = this.ctx.series.filteredSeriesX();
var xVal = '';
var xAxisTTVal = '';
var zVal = null;
var val = null;
var customFormatterOpts = {
series: w.globals.series,
seriesIndex: i,
dataPointIndex: j,
w: w
};
var zFormatter = w.globals.ttZFormatter;
if (j === null) {
val = w.globals.series[i];
} else {
if (w.globals.isXNumeric) {
xVal = filteredSeriesX[i][j];
if (filteredSeriesX[i].length === 0) {
// a series (possibly the first one) might be collapsed, so get the next active index
var firstActiveSeriesIndex = this.tooltipUtil.getFirstActiveXArray(filteredSeriesX);
xVal = filteredSeriesX[firstActiveSeriesIndex][j];
}
} else {
xVal = typeof w.globals.labels[j] !== 'undefined' ? w.globals.labels[j] : '';
}
}
var bufferXVal = xVal;
if (w.globals.isXNumeric && w.config.xaxis.type === 'datetime') {
var xFormat = new _Formatters2.default(this.ctx);
xVal = xFormat.xLabelFormat(w.globals.ttKeyFormatter, bufferXVal);
} else {
xVal = w.globals.xLabelFormatter(bufferXVal, customFormatterOpts);
}
// override default x-axis formatter with tooltip formatter
if (w.config.tooltip.x.formatter !== undefined) {
xVal = w.globals.ttKeyFormatter(bufferXVal, customFormatterOpts);
}
if (w.globals.seriesZ.length > 0 && w.globals.seriesZ[0].length > 0) {
zVal = zFormatter(w.globals.seriesZ[i][j], w);
}
if (typeof w.config.xaxis.tooltip.formatter === 'function') {
xAxisTTVal = w.globals.xaxisTooltipFormatter(bufferXVal, customFormatterOpts);
} else {
xAxisTTVal = xVal;
}
return {
val: val,
xVal: xVal,
xAxisTTVal: xAxisTTVal,
zVal: zVal
};
}
}, {
key: 'handleCustomTooltip',
value: function handleCustomTooltip(_ref6) {
var i = _ref6.i,
j = _ref6.j;
var w = this.w;
var tooltipEl = this.ttCtx.getElTooltip();
// override everything with a custom html tooltip and replace it
tooltipEl.innerHTML = w.config.tooltip.custom({
ctx: this.ctx,
series: w.globals.series,
seriesIndex: i,
dataPointIndex: j,
w: w
});
}
}]);
return Labels;
}();
exports.default = Labels;
/***/ }),
/* 54 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Position = __webpack_require__(26);
var _Position2 = _interopRequireDefault(_Position);
var _Markers = __webpack_require__(6);
var _Markers2 = _interopRequireDefault(_Markers);
var _Utils = __webpack_require__(0);
var _Utils2 = _interopRequireDefault(_Utils);
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 Tooltip.Marker Class to draw texts on the tooltip.
*
* @module Tooltip.Marker
**/
var Marker = function () {
function Marker(tooltipContext) {
_classCallCheck(this, Marker);
this.w = tooltipContext.w;
this.ttCtx = tooltipContext;
this.ctx = tooltipContext.ctx;
this.tooltipPosition = new _Position2.default(tooltipContext);
}
_createClass(Marker, [{
key: 'drawDynamicPoints',
value: function drawDynamicPoints() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var marker = new _Markers2.default(this.ctx);
var elsSeries = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series');
for (var i = 0; i < elsSeries.length; i++) {
var seriesIndex = parseInt(elsSeries[i].getAttribute('data:realIndex'));
var pointsMain = w.globals.dom.baseEl.querySelector('.apexcharts-series[data\\:realIndex=\'' + seriesIndex + '\'] .apexcharts-series-markers-wrap');
if (pointsMain !== null) {
// it can be null as we have tooltips in donut/bar charts
var point = void 0;
var PointClasses = 'apexcharts-marker w' + (Math.random() + 1).toString(36).substring(4);
if ((w.config.chart.type === 'line' || w.config.chart.type === 'area') && !w.globals.comboCharts && !w.config.tooltip.intersect) {
PointClasses += ' no-pointer-events';
}
var elPointOptions = marker.getMarkerConfig(PointClasses, seriesIndex);
point = graphics.drawMarker(0, 0, elPointOptions);
point.node.setAttribute('default-marker-size', 0);
var elPointsG = document.createElementNS(w.globals.SVGNS, 'g');
elPointsG.classList.add('apexcharts-series-markers');
elPointsG.appendChild(point.node);
pointsMain.appendChild(elPointsG);
}
}
}
}, {
key: 'enlargeCurrentPoint',
value: function enlargeCurrentPoint(rel, point) {
var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var y = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var w = this.w;
if (w.config.chart.type !== 'bubble') {
this.newPointSize(rel, point);
}
var cx = point.getAttribute('cx');
var cy = point.getAttribute('cy');
if (x !== null && y !== null) {
cx = x;
cy = y;
}
this.tooltipPosition.moveXCrosshairs(cx);
if (!this.fixedTooltip) {
if (w.config.chart.type === 'radar') {
var elGrid = this.ttCtx.getElGrid();
var seriesBound = elGrid.getBoundingClientRect();
cx = this.ttCtx.e.clientX - seriesBound.left;
}
this.tooltipPosition.moveTooltip(cx, cy, w.config.markers.hover.size);
}
}
}, {
key: 'enlargePoints',
value: function enlargePoints(j) {
var w = this.w;
var me = this;
var ttCtx = this.ttCtx;
var col = j;
var points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker');
var newSize = w.config.markers.hover.size;
for (var p = 0; p < points.length; p++) {
var rel = points[p].getAttribute('rel');
var index = points[p].getAttribute('index');
if (newSize === undefined) {
newSize = w.globals.markers.size[index] + w.config.markers.hover.sizeOffset;
}
if (col === parseInt(rel)) {
me.newPointSize(col, points[p]);
var cx = points[p].getAttribute('cx');
var cy = points[p].getAttribute('cy');
me.tooltipPosition.moveXCrosshairs(cx);
if (!ttCtx.fixedTooltip) {
me.tooltipPosition.moveTooltip(cx, cy, newSize);
}
} else {
me.oldPointSize(points[p]);
}
}
}
}, {
key: 'newPointSize',
value: function newPointSize(rel, point) {
var w = this.w;
var newSize = w.config.markers.hover.size;
var elPoint = null;
if (rel === 0) {
elPoint = point.parentNode.firstChild;
} else {
elPoint = point.parentNode.lastChild;
}
var index = parseInt(elPoint.getAttribute('index'));
if (newSize === undefined) {
newSize = w.globals.markers.size[index] + w.config.markers.hover.sizeOffset;
}
elPoint.setAttribute('r', newSize);
}
}, {
key: 'oldPointSize',
value: function oldPointSize(point) {
var size = parseInt(point.getAttribute('default-marker-size'));
point.setAttribute('r', size);
}
}, {
key: 'resetPointsSize',
value: function resetPointsSize() {
var w = this.w;
var points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker');
for (var p = 0; p < points.length; p++) {
var size = parseInt(points[p].getAttribute('default-marker-size'));
if (_Utils2.default.isNumber(size)) {
points[p].setAttribute('r', size);
} else {
points[p].setAttribute('r', 0);
}
}
}
}]);
return Marker;
}();
exports.default = Marker;
/***/ }),
/* 55 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _Labels = __webpack_require__(53);
var _Labels2 = _interopRequireDefault(_Labels);
var _Position = __webpack_require__(26);
var _Position2 = _interopRequireDefault(_Position);
var _Marker = __webpack_require__(54);
var _Marker2 = _interopRequireDefault(_Marker);
var _Intersect = __webpack_require__(52);
var _Intersect2 = _interopRequireDefault(_Intersect);
var _AxesTooltip = __webpack_require__(51);
var _AxesTooltip2 = _interopRequireDefault(_AxesTooltip);
var _Graphics = __webpack_require__(1);
var _Graphics2 = _interopRequireDefault(_Graphics);
var _Series = __webpack_require__(7);
var _Series2 = _interopRequireDefault(_Series);
var _XAxis = __webpack_require__(15);
var _XAxis2 = _interopRequireDefault(_XAxis);
var _Utils = __webpack_require__(27);
var _Utils2 = _interopRequireDefault(_Utils);
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 Core Tooltip Class to handle the tooltip generation.
*
* @module Tooltip
**/
var Tooltip = function () {
function Tooltip(ctx) {
_classCallCheck(this, Tooltip);
this.ctx = ctx;
this.w = ctx.w;
var w = this.w;
this.tConfig = w.config.tooltip;
this.tooltipUtil = new _Utils2.default(this);
this.tooltipLabels = new _Labels2.default(this);
this.tooltipPosition = new _Position2.default(this);
this.marker = new _Marker2.default(this);
this.intersect = new _Intersect2.default(this);
this.axesTooltip = new _AxesTooltip2.default(this);
this.showOnIntersect = this.tConfig.intersect;
this.showTooltipTitle = this.tConfig.x.show;
this.fixedTooltip = this.tConfig.fixed.enabled;
this.xaxisTooltip = null;
this.yaxisTTEls = null;
this.isBarShared = !w.globals.isBarHorizontal && this.tConfig.shared;
}
_createClass(Tooltip, [{
key: 'getElTooltip',
value: function getElTooltip(ctx) {
if (!ctx) ctx = this;
return ctx.w.globals.dom.baseEl.querySelector('.apexcharts-tooltip');
}
}, {
key: 'getElXCrosshairs',
value: function getElXCrosshairs() {
return this.w.globals.dom.baseEl.querySelector('.apexcharts-xcrosshairs');
}
}, {
key: 'getElGrid',
value: function getElGrid() {
return this.w.globals.dom.baseEl.querySelector('.apexcharts-grid');
}
}, {
key: 'drawTooltip',
value: function drawTooltip(xyRatios) {
var w = this.w;
this.xyRatios = xyRatios;
this.blxaxisTooltip = w.config.xaxis.tooltip.enabled && w.globals.axisCharts;
this.blyaxisTooltip = w.config.yaxis[0].tooltip.enabled && w.globals.axisCharts;
this.allTooltipSeriesGroups = [];
if (!w.globals.axisCharts) {
this.showTooltipTitle = false;
}
var tooltipEl = document.createElement('div');
tooltipEl.classList.add('apexcharts-tooltip');
tooltipEl.classList.add(this.tConfig.theme);
w.globals.dom.elWrap.appendChild(tooltipEl);
if (w.globals.axisCharts) {
this.axesTooltip.drawXaxisTooltip();
this.axesTooltip.drawYaxisTooltip();
this.axesTooltip.setXCrosshairWidth();
this.axesTooltip.handleYCrosshair();
var xAxis = new _XAxis2.default(this.ctx);
this.xAxisTicksPositions = xAxis.getXAxisTicksPositions();
}
// we forcefully set intersect true for these conditions
if (w.globals.comboCharts && !this.tConfig.shared || this.tConfig.intersect && !this.tConfig.shared || (w.config.chart.type === 'bar' || w.config.chart.type === 'rangeBar') && !this.tConfig.shared) {
this.showOnIntersect = true;
}
if (w.config.markers.size === 0 || w.globals.markers.largestSize === 0) {
// when user don't want to show points all the time, but only on when hovering on series
this.marker.drawDynamicPoints(this);
}
// no visible series, exit
if (w.globals.collapsedSeries.length === w.globals.series.length) return;
this.dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints;
this.dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints;
if (this.showTooltipTitle) {
this.tooltipTitle = document.createElement('div');
this.tooltipTitle.classList.add('apexcharts-tooltip-title');
this.tooltipTitle.style.fontFamily = this.tConfig.style.fontFamily || w.config.chart.fontFamily;
this.tooltipTitle.style.fontSize = this.tConfig.style.fontSize;
tooltipEl.appendChild(this.tooltipTitle);
}
var ttItemsCnt = w.globals.series.length; // whether shared or not, default is shared
if ((w.globals.xyCharts || w.globals.comboCharts) && this.tConfig.shared) {
if (!this.showOnIntersect) {
ttItemsCnt = w.globals.series.length;
} else {
ttItemsCnt = 1;
}
}
this.ttItems = this.createTTElements(ttItemsCnt);
this.addSVGEvents();
}
}, {
key: 'createTTElements',
value: function createTTElements(ttItemsCnt) {
var w = this.w;
var ttItems = [];
var tooltipEl = this.getElTooltip();
for (var i = 0; i < ttItemsCnt; i++) {
var gTxt = document.createElement('div');
gTxt.classList.add('apexcharts-tooltip-series-group');
if (this.tConfig.shared && this.tConfig.enabledOnSeries && Array.isArray(this.tConfig.enabledOnSeries)) {
if (this.tConfig.enabledOnSeries.indexOf(i) < 0) {
gTxt.classList.add('apexcharts-tooltip-series-group-hidden');
}
}
var point = document.createElement('span');
point.classList.add('apexcharts-tooltip-marker');
point.style.backgroundColor = w.globals.colors[i];
gTxt.appendChild(point);
var gYZ = document.createElement('div');
gYZ.classList.add('apexcharts-tooltip-text');
gYZ.style.fontFamily = this.tConfig.style.fontFamily || w.config.chart.fontFamily;
gYZ.style.fontSize = this.tConfig.style.fontSize;
// y values group
var gYValText = document.createElement('div');
gYValText.classList.add('apexcharts-tooltip-y-group');
var txtLabel = document.createElement('span');
txtLabel.classList.add('apexcharts-tooltip-text-label');
gYValText.appendChild(txtLabel);
var txtValue = document.createElement('span');
txtValue.classList.add('apexcharts-tooltip-text-value');
gYValText.appendChild(txtValue);
// z values group
var gZValText = document.createElement('div');
gZValText.classList.add('apexcharts-tooltip-z-group');
var txtZLabel = document.createElement('span');
txtZLabel.classList.add('apexcharts-tooltip-text-z-label');
gZValText.appendChild(txtZLabel);
var txtZValue = document.createElement('span');
txtZValue.classList.add('apexcharts-tooltip-text-z-value');
gZValText.appendChild(txtZValue);
gYZ.appendChild(gYValText);
gYZ.appendChild(gZValText);
gTxt.appendChild(gYZ);
tooltipEl.appendChild(gTxt);
ttItems.push(gTxt);
}
return ttItems;
}
}, {
key: 'addSVGEvents',
value: function addSVGEvents() {
var w = this.w;
var type = w.config.chart.type;
var tooltipEl = this.getElTooltip();
var commonBar = !!(type === 'bar' || type === 'candlestick' || type === 'rangeBar');
var hoverArea = w.globals.dom.Paper.node;
var elGrid = this.getElGrid();
if (elGrid) {
this.seriesBound = elGrid.getBoundingClientRect();
}
var tooltipY = [];
var tooltipX = [];
var seriesHoverParams = {
hoverArea: hoverArea,
elGrid: elGrid,
tooltipEl: tooltipEl,
tooltipY: tooltipY,
tooltipX: tooltipX,
ttItems: this.ttItems
};
var points = void 0;
if (w.globals.axisCharts) {
if (type === 'area' || type === 'line' || type === 'scatter' || type === 'bubble') {
points = w.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker");
} else if (commonBar) {
points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area');
} else if (type === 'heatmap') {
points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series .apexcharts-heatmap');
} else if (type === 'radar') {
points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series .apexcharts-marker');
}
if (points && points.length) {
for (var p = 0; p < points.length; p++) {
tooltipY.push(points[p].getAttribute('cy'));
tooltipX.push(points[p].getAttribute('cx'));
}
}
}
var validSharedChartTypes = w.globals.xyCharts && !this.showOnIntersect || w.globals.comboCharts && !this.showOnIntersect || commonBar && this.hasBars() && this.tConfig.shared;
if (validSharedChartTypes) {
this.addPathsEventListeners([hoverArea], seriesHoverParams);
} else if (commonBar && !w.globals.comboCharts) {
this.addBarsEventListeners(seriesHoverParams);
} else if (type === 'bubble' || type === 'scatter' || type === 'radar' || this.showOnIntersect && (type === 'area' || type === 'line')) {
this.addPointsEventsListeners(seriesHoverParams);
} else if (!w.globals.axisCharts || type === 'heatmap') {
var seriesAll = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series');
this.addPathsEventListeners(seriesAll, seriesHoverParams);
}
if (this.showOnIntersect) {
var linePoints = w.globals.dom.baseEl.querySelectorAll('.apexcharts-line-series .apexcharts-marker');
if (linePoints.length > 0) {
// if we find any lineSeries, addEventListeners for them
this.addPathsEventListeners(linePoints, seriesHoverParams);
}
var areaPoints = w.globals.dom.baseEl.querySelectorAll('.apexcharts-area-series .apexcharts-marker');
if (areaPoints.length > 0) {
// if we find any areaSeries, addEventListeners for them
this.addPathsEventListeners(areaPoints, seriesHoverParams);
}
// combo charts may have bars, so add event listeners here too
if (this.hasBars() && !this.tConfig.shared) {
this.addBarsEventListeners(seriesHoverParams);
}
}
}
}, {
key: 'drawFixedTooltipRect',
value: function drawFixedTooltipRect() {
var w = this.w;
var tooltipEl = this.getElTooltip();
var tooltipRect = tooltipEl.getBoundingClientRect();
var ttWidth = tooltipRect.width + 10;
var ttHeight = tooltipRect.height + 10;
var x = this.tConfig.fixed.offsetX;
var y = this.tConfig.fixed.offsetY;
if (this.tConfig.fixed.position.toLowerCase().indexOf('right') > -1) {
x = x + w.globals.svgWidth - ttWidth + 10;
}
if (this.tConfig.fixed.position.toLowerCase().indexOf('bottom') > -1) {
y = y + w.globals.svgHeight - ttHeight - 10;
}
tooltipEl.style.left = x + 'px';
tooltipEl.style.top = y + 'px';
return {
x: x,
y: y,
ttWidth: ttWidth,
ttHeight: ttHeight
};
}
}, {
key: 'addPointsEventsListeners',
value: function addPointsEventsListeners(seriesHoverParams) {
var w = this.w;
var points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-series-markers .apexcharts-marker');
this.addPathsEventListeners(points, seriesHoverParams);
}
}, {
key: 'addBarsEventListeners',
value: function addBarsEventListeners(seriesHoverParams) {
var w = this.w;
var bars = w.globals.dom.baseEl.querySelectorAll('.apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area');
this.addPathsEventListeners(bars, seriesHoverParams);
}
}, {
key: 'addPathsEventListeners',
value: function addPathsEventListeners(paths, opts) {
var _this = this;
var self = this;
var _loop = function _loop(p) {
var extendedOpts = {
paths: paths[p],
tooltipEl: opts.tooltipEl,
tooltipY: opts.tooltipY,
tooltipX: opts.tooltipX,
elGrid: opts.elGrid,
hoverArea: opts.hoverArea,
ttItems: opts.ttItems
};
_this.w.globals.tooltipOpts = extendedOpts;
var events = ['mousemove', 'mouseup', 'touchmove', 'mouseout', 'touchend'];
events.map(function (ev) {
return paths[p].addEventListener(ev, self.seriesHover.bind(self, extendedOpts), { capture: false, passive: true });
});
};
for (var p = 0; p < paths.length; p++) {
_loop(p);
}
}
/*
** The actual series hover function
*/
}, {
key: 'seriesHover',
value: function seriesHover(opt, e) {
var _this2 = this;
var chartGroups = [];
var w = this.w;
// if user has more than one charts in group, we need to sync
if (w.config.chart.group) {
chartGroups = this.ctx.getGroupedCharts();
}
if (w.globals.axisCharts && (w.globals.minX === -Infinity && w.globals.maxX === Infinity || w.globals.dataPoints === 0)) {
return;
}
if (chartGroups.length) {
chartGroups.forEach(function (ch) {
var tooltipEl = _this2.getElTooltip(ch);
var newOpts = {
paths: opt.paths,
tooltipEl: tooltipEl,
tooltipY: opt.tooltipY,
tooltipX: opt.tooltipX,
elGrid: opt.elGrid,
hoverArea: opt.hoverArea,
ttItems: ch.w.globals.tooltip.ttItems
// all the charts should have the same minX and maxX (same xaxis) for multiple tooltips to work correctly
};if (ch.w.globals.minX === _this2.w.globals.minX && ch.w.globals.maxX === _this2.w.globals.maxX) {
ch.w.globals.tooltip.seriesHoverByContext({
chartCtx: ch,
ttCtx: ch.w.globals.tooltip,
opt: newOpts,
e: e
});
}
});
} else {
this.seriesHoverByContext({
chartCtx: this.ctx,
ttCtx: this.w.globals.tooltip,
opt: opt,
e: e
});
}
}
}, {
key: 'seriesHoverByContext',
value: function seriesHoverByContext(_ref) {
var chartCtx = _ref.chartCtx,
ttCtx = _ref.ttCtx,
opt = _ref.opt,
e = _ref.e;
var w = chartCtx.w;
var tooltipEl = this.getElTooltip();
// tooltipRect is calculated on every mousemove, because the text is dynamic
ttCtx.tooltipRect = {
x: 0,
y: 0,
ttWidth: tooltipEl.getBoundingClientRect().width,
ttHeight: tooltipEl.getBoundingClientRect().height
};
ttCtx.e = e;
// highlight the current hovered bars
if (ttCtx.hasBars() && !w.globals.comboCharts && !ttCtx.isBarShared) {
if (this.tConfig.onDatasetHover.highlightDataSeries) {
var series = new _Series2.default(chartCtx);
series.toggleSeriesOnHover(e, e.target.parentNode);
}
}
if (ttCtx.fixedTooltip) {
ttCtx.drawFixedTooltipRect();
}
if (w.globals.axisCharts) {
ttCtx.axisChartsTooltips({
e: e,
opt: opt,
tooltipRect: ttCtx.tooltipRect
});
} else {
// non-plot charts i.e pie/donut/circle
ttCtx.nonAxisChartsTooltips({
e: e,
opt: opt,
tooltipRect: ttCtx.tooltipRect
});
}
}
// tooltip handling for line/area/bar/columns/scatter
}, {
key: 'axisChartsTooltips',
value: function axisChartsTooltips(_ref2) {
var e = _ref2.e,
opt = _ref2.opt;
var w = this.w;
var j = void 0,
x = void 0,
y = void 0;
var self = this;
var capj = null;
var seriesBound = opt.elGrid.getBoundingClientRect();
var clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
var clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
this.clientY = clientY;
this.clientX = clientX;
if (clientY < seriesBound.top || clientY > seriesBound.top + seriesBound.height) {
self.handleMouseOut(opt);
return;
}
if (Array.isArray(this.tConfig.enabledOnSeries)) {
var index = parseInt(opt.paths.getAttribute('index'));
if (this.tConfig.enabledOnSeries.indexOf(index) < 0) {
self.handleMouseOut(opt);
return;
}
}
var tooltipEl = this.getElTooltip();
var xcrosshairs = this.getElXCrosshairs();
var isStickyTooltip = w.globals.xyCharts || w.config.chart.type === 'bar' && !w.globals.isBarHorizontal && this.hasBars() && this.tConfig.shared || w.globals.comboCharts && this.hasBars;
if (w.globals.isBarHorizontal && this.hasBars()) {
isStickyTooltip = false;
}
if (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'mouseup') {
if (xcrosshairs !== null) {
xcrosshairs.classList.add('active');
}
if (self.ycrosshairs !== null && self.blyaxisTooltip) {
self.ycrosshairs.classList.add('active');
}
if (isStickyTooltip && !self.showOnIntersect) {
capj = self.tooltipUtil.getNearestValues({
context: self,
hoverArea: opt.hoverArea,
elGrid: opt.elGrid,
clientX: clientX,
clientY: clientY,
hasBars: self.hasBars
});
j = capj.j;
var capturedSeries = capj.capturedSeries;
if (capj.hoverX < 0 || capj.hoverX > w.globals.gridWidth) {
self.handleMouseOut(opt);
return;
}
if (capturedSeries !== null) {
var ignoreNull = w.globals.series[capturedSeries][j] === null;
if (ignoreNull) {
opt.tooltipEl.classList.remove('active');
return;
}
if (typeof w.globals.series[capturedSeries][j] !== 'undefined') {
if (this.tConfig.shared && this.tooltipUtil.isXoverlap(j) && this.tooltipUtil.isinitialSeriesSameLen()) {
this.create(e, self, capturedSeries, j, opt.ttItems);
} else {
this.create(e, self, capturedSeries, j, opt.ttItems, false);
}
} else {
if (this.tooltipUtil.isXoverlap(j)) {
self.create(e, self, 0, j, opt.ttItems);
}
}
} else {
// couldn't capture any series. check if shared X is same,
// if yes, draw a grouped tooltip
if (this.tooltipUtil.isXoverlap(j)) {
self.create(e, self, 0, j, opt.ttItems);
}
}
} else {
if (w.config.chart.type === 'heatmap') {
var markerXY = this.intersect.handleHeatTooltip({
e: e,
opt: opt,
x: x,
y: y
});
x = markerXY.x;
y = markerXY.y;
tooltipEl.style.left = x + 'px';
tooltipEl.style.top = y + 'px';
} else {
if (this.hasBars) {
this.intersect.handleBarTooltip({
e: e,
opt: opt
});
}
if (this.hasMarkers) {
// intersect - line/area/scatter/bubble
this.intersect.handleMarkerTooltip({
e: e,
opt: opt,
x: x,
y: y
});
}
}
}
if (this.blyaxisTooltip) {
for (var yt = 0; yt < w.config.yaxis.length; yt++) {
self.axesTooltip.drawYaxisTooltipText(yt, clientY, self.xyRatios);
}
}
opt.tooltipEl.classList.add('active');
} else if (e.type === 'mouseout' || e.type === 'touchend') {
this.handleMouseOut(opt);
}
}
// tooltip handling for pie/donuts
}, {
key: 'nonAxisChartsTooltips',
value: function nonAxisChartsTooltips(_ref3) {
var e = _ref3.e,
opt = _ref3.opt,
tooltipRect = _ref3.tooltipRect;
var w = this.w;
var rel = opt.paths.getAttribute('rel');
var tooltipEl = this.getElTooltip();
var seriesBound = w.globals.dom.elWrap.getBoundingClientRect();
if (e.type === 'mousemove' || e.type === 'touchmove') {
tooltipEl.classList.add('active');
this.tooltipLabels.drawSeriesTexts({
ttItems: opt.ttItems,
i: parseInt(rel) - 1,
shared: false
});
var x = w.globals.clientX - seriesBound.left - tooltipRect.ttWidth / 2;
var y = w.globals.clientY - seriesBound.top - tooltipRect.ttHeight - 10;
tooltipEl.style.left = x + 'px';
tooltipEl.style.top = y + 'px';
} else if (e.type === 'mouseout' || e.type === 'touchend') {
tooltipEl.classList.remove('active');
}
}
}, {
key: 'deactivateHoverFilter',
value: function deactivateHoverFilter() {
var w = this.w;
var graphics = new _Graphics2.default(this.ctx);
var allPaths = w.globals.dom.Paper.select('.apexcharts-bar-area');
for (var b = 0; b < allPaths.length; b++) {
graphics.pathMouseLeave(allPaths[b]);
}
}
}, {
key: 'handleMouseOut',
value: function handleMouseOut(opt) {
var w = this.w;
var xcrosshairs = this.getElXCrosshairs();
opt.tooltipEl.classList.remove('active');
this.deactivateHoverFilter();
if (w.config.chart.type !== 'bubble') {
this.marker.resetPointsSize();
}
if (xcrosshairs !== null) {
xcrosshairs.classList.remove('active');
}
if (this.ycrosshairs !== null) {
this.ycrosshairs.classList.remove('active');
}
if (this.blxaxisTooltip) {
this.xaxisTooltip.classList.remove('active');
}
if (this.blyaxisTooltip) {
if (this.yaxisTTEls === null) {
this.yaxisTTEls = w.globals.dom.baseEl.querySelectorAll('.apexcharts-yaxistooltip');
}
for (var i = 0; i < this.yaxisTTEls.length; i++) {
this.yaxisTTEls[i].classList.remove('active');
}
}
}
}, {
key: 'getElMarkers',
value: function getElMarkers() {
return this.w.globals.dom.baseEl.querySelectorAll(' .apexcharts-series-markers');
}
}, {
key: 'getAllMarkers',
value: function getAllMarkers() {
return this.w.globals.dom.baseEl.querySelectorAll('.apexcharts-series-markers .apexcharts-marker');
}
}, {
key: 'hasMarkers',
value: function hasMarkers() {
var markers = this.getElMarkers();
return markers.length > 0;
}
}, {
key: 'getElBars',
value: function getElBars() {
return this.w.globals.dom.baseEl.querySelectorAll('.apexcharts-bar-series, .apexcharts-candlestick-series, .apexcharts-rangebar-series');
}
}, {
key: 'hasBars',
value: function hasBars() {
var bars = this.getElBars();
return bars.length > 0;
}
}, {
key: 'markerClick',
value: function markerClick(e, seriesIndex, dataPointIndex) {
var w = this.w;
if (typeof w.config.chart.events.markerClick === 'function') {
w.config.chart.events.markerClick(e, this.ctx, {
seriesIndex: seriesIndex,
dataPointIndex: dataPointIndex,
w: w
});
}
this.ctx.fireEvent('markerClick', [e, this.ctx, { seriesIndex: seriesIndex, dataPointIndex: dataPointIndex, w: w }]);
}
}, {
key: 'create',
value: function create(e, context, capturedSeries, j, ttItems) {
var shared = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
var w = this.w;
var ttCtx = context;
if (e.type === 'mouseup') {
this.markerClick(e, capturedSeries, j);
}
if (shared === null) shared = this.tConfig.shared;
var hasMarkers = this.hasMarkers();
var bars = this.getElBars();
if (shared) {
ttCtx.tooltipLabels.drawSeriesTexts({
ttItems: ttItems,
i: capturedSeries,
j: j,
shared: this.showOnIntersect ? false : this.tConfig.shared
});
if (hasMarkers) {
if (w.globals.markers.largestSize > 0) {
ttCtx.marker.enlargePoints(j);
} else {
ttCtx.tooltipPosition.moveDynamicPointsOnHover(j);
}
}
if (this.hasBars()) {
this.barSeriesHeight = this.tooltipUtil.getBarsHeight(bars);
if (this.barSeriesHeight > 0) {
// hover state, activate snap filter
var graphics = new _Graphics2.default(this.ctx);
var paths = w.globals.dom.Paper.select('.apexcharts-bar-area[j=\'' + j + '\']');
// de-activate first
this.deactivateHoverFilter();
this.tooltipPosition.moveStickyTooltipOverBars(j);
for (var b = 0; b < paths.length; b++) {
graphics.pathMouseEnter(paths[b]);
}
}
}
} else {
ttCtx.tooltipLabels.drawSeriesTexts({
shared: false,
ttItems: ttItems,
i: capturedSeries,
j: j
});
if (this.hasBars()) {
ttCtx.tooltipPosition.moveStickyTooltipOverBars(j);
}
if (hasMarkers) {
ttCtx.tooltipPosition.moveMarkers(capturedSeries, j);
}
}
}
}]);
return Tooltip;
}();
exports.default = Tooltip;
/***/ }),
/* 56 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
function defaultSetTimout() {
throw new Error('setTimeout has not been defined');
}
function defaultClearTimeout() {
throw new Error('clearTimeout has not been defined');
}
(function () {
try {
if (typeof setTimeout === 'function') {
cachedSetTimeout = setTimeout;
} else {
cachedSetTimeout = defaultSetTimout;
}
} catch (e) {
cachedSetTimeout = defaultSetTimout;
}
try {
if (typeof clearTimeout === 'function') {
cachedClearTimeout = clearTimeout;
} else {
cachedClearTimeout = defaultClearTimeout;
}
} catch (e) {
cachedClearTimeout = defaultClearTimeout;
}
})();
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
//normal enviroments in sane situations
return setTimeout(fun, 0);
}
// if setTimeout wasn't available but was latter defined
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
cachedSetTimeout = setTimeout;
return setTimeout(fun, 0);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedSetTimeout(fun, 0);
} catch (e) {
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedSetTimeout.call(null, fun, 0);
} catch (e) {
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
return cachedSetTimeout.call(this, fun, 0);
}
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
//normal enviroments in sane situations
return clearTimeout(marker);
}
// if clearTimeout wasn't available but was latter defined
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
cachedClearTimeout = clearTimeout;
return clearTimeout(marker);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedClearTimeout(marker);
} catch (e) {
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedClearTimeout.call(null, marker);
} catch (e) {
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
return cachedClearTimeout.call(this, marker);
}
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while (len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;
process.listeners = function (name) {
return [];
};
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () {
return '/';
};
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function () {
return 0;
};
/***/ }),
/* 57 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* @this {Promise}
*/
function finallyConstructor(callback) {
var constructor = this.constructor;
return this.then(function (value) {
return constructor.resolve(callback()).then(function () {
return value;
});
}, function (reason) {
return constructor.resolve(callback()).then(function () {
return constructor.reject(reason);
});
});
}
exports.default = finallyConstructor;
/***/ }),
/* 58 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(global, process) {
(function (global, undefined) {
"use strict";
if (global.setImmediate) {
return;
}
var nextHandle = 1; // Spec says greater than zero
var tasksByHandle = {};
var currentlyRunningATask = false;
var doc = global.document;
var registerImmediate;
function setImmediate(callback) {
// Callback can either be a function or a string
if (typeof callback !== "function") {
callback = new Function("" + callback);
}
// Copy function arguments
var args = new Array(arguments.length - 1);
for (var i = 0; i < args.length; i++) {
args[i] = arguments[i + 1];
}
// Store and register the task
var task = { callback: callback, args: args };
tasksByHandle[nextHandle] = task;
registerImmediate(nextHandle);
return nextHandle++;
}
function clearImmediate(handle) {
delete tasksByHandle[handle];
}
function run(task) {
var callback = task.callback;
var args = task.args;
switch (args.length) {
case 0:
callback();
break;
case 1:
callback(args[0]);
break;
case 2:
callback(args[0], args[1]);
break;
case 3:
callback(args[0], args[1], args[2]);
break;
default:
callback.apply(undefined, args);
break;
}
}
function runIfPresent(handle) {
// From the spec: "Wait until any invocations of this algorithm started before this one have completed."
// So if we're currently running a task, we'll need to delay this invocation.
if (currentlyRunningATask) {
// Delay by doing a setTimeout. setImmediate was tried instead, but in Firefox 7 it generated a
// "too much recursion" error.
setTimeout(runIfPresent, 0, handle);
} else {
var task = tasksByHandle[handle];
if (task) {
currentlyRunningATask = true;
try {
run(task);
} finally {
clearImmediate(handle);
currentlyRunningATask = false;
}
}
}
}
function installNextTickImplementation() {
registerImmediate = function registerImmediate(handle) {
process.nextTick(function () {
runIfPresent(handle);
});
};
}
function canUsePostMessage() {
// The test against `importScripts` prevents this implementation from being installed inside a web worker,
// where `global.postMessage` means something completely different and can't be used for this purpose.
if (global.postMessage && !global.importScripts) {
var postMessageIsAsynchronous = true;
var oldOnMessage = global.onmessage;
global.onmessage = function () {
postMessageIsAsynchronous = false;
};
global.postMessage("", "*");
global.onmessage = oldOnMessage;
return postMessageIsAsynchronous;
}
}
function installPostMessageImplementation() {
// Installs an event handler on `global` for the `message` event: see
// * https://developer.mozilla.org/en/DOM/window.postMessage
// * http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
var messagePrefix = "setImmediate$" + Math.random() + "$";
var onGlobalMessage = function onGlobalMessage(event) {
if (event.source === global && typeof event.data === "string" && event.data.indexOf(messagePrefix) === 0) {
runIfPresent(+event.data.slice(messagePrefix.length));
}
};
if (global.addEventListener) {
global.addEventListener("message", onGlobalMessage, false);
} else {
global.attachEvent("onmessage", onGlobalMessage);
}
registerImmediate = function registerImmediate(handle) {
global.postMessage(messagePrefix + handle, "*");
};
}
function installMessageChannelImplementation() {
var channel = new MessageChannel();
channel.port1.onmessage = function (event) {
var handle = event.data;
runIfPresent(handle);
};
registerImmediate = function registerImmediate(handle) {
channel.port2.postMessage(handle);
};
}
function installReadyStateChangeImplementation() {
var html = doc.documentElement;
registerImmediate = function registerImmediate(handle) {
// Create a