(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define("ApexCharts", [], factory); else if(typeof exports === 'object') exports["ApexCharts"] = factory(); else root["ApexCharts"] = factory(); })(this, 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 = 164); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (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__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Filters = __webpack_require__(6); var _Filters2 = _interopRequireDefault(_Filters); var _Animations = __webpack_require__(25); 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: '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, strokeWidth = _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 { line = [hORv, x].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 * hideStrokesInChange = for certain charts, we hide strokes during anim * className = class attribute to add * @return {object} svg.js path object **/ }, { key: 'renderPaths', value: function renderPaths(_ref2) { var i = _ref2.i, 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, _ref2$hideStrokesInCh = _ref2.hideStrokesInChange, hideStrokesInChange = _ref2$hideStrokesInCh === undefined ? false : _ref2$hideStrokesInCh, className = _ref2.className, id = _ref2.id; 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); if (shouldAnimate) { d = pathFrom; } else { d = pathTo; } 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); // const defaultFilter = el.filterer if (w.config.states.normal.filter.type !== 'none') { filters.getDefaultFilter(el, w.config.states.normal.filter.type, w.config.states.normal.filter.value); } else { if (w.config.chart.dropShadow.enabled) { if (!w.config.chart.dropShadow.enabledSeries || w.config.chart.dropShadow.enabledSeries && w.config.chart.dropShadow.enabledSeries.indexOf(realIndex) !== -1) { var shadow = w.config.chart.dropShadow; filters.dropShadow(el, shadow); } } } 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.node.addEventListener('touchstart', this.pathMouseDown.bind(this, el)); el.attr({ pathTo: pathTo, pathFrom: pathFrom }); if (initialAnim && !w.globals.resized && !w.globals.dataChanged) { anim.animatePathsGradually({ el: el, pathFrom: pathFrom, pathTo: pathTo, speed: initialSpeed, delay: animationDelay, strokeWidth: strokeWidth }); } if (dynamicAnim && w.globals.dataChanged) { anim.animatePathsGradually({ el: el, pathFrom: pathFrom, pathTo: pathTo, speed: dataChangeSpeed, strokeWidth: strokeWidth }); } 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 w = this.w; gfrom = _Utils2.default.hexToRgba(gfrom, opacityFrom); gto = _Utils2.default.hexToRgba(gto, opacityTo); var stop1 = 0; var stop2 = 1; var stop3 = 1; 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; } var radial = !!(w.config.chart.type === 'donut' || w.config.chart.type === 'pie' || w.config.chart.type === 'bubble'); var p = 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 (!radial) { if (style === 'vertical') { p.from(0, 0).to(0, 1); } else if (style === 'diagonal') { p.from(0, 0).to(1, 1); } else if (style === 'horizontal') { p.from(0, 1).to(1, 1); } else if (style === 'diagonal2') { p.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') { p.attr({ 'gradientUnits': 'userSpaceOnUse', cx: offx, cy: offy, r: size }); } else { p.attr({ cx: 0.5, cy: 0.5, r: 0.8, fx: 0.2, fy: 0.2 }); } } return p; } }, { key: 'drawText', value: function drawText(opts) { var w = this.w; var x = opts.x, y = opts.y, text = opts.text, textAnchor = opts.textAnchor, fontSize = opts.fontSize, fontFamily = opts.fontFamily, foreColor = opts.foreColor, opacity = opts.opacity; if (!textAnchor) { textAnchor = 'start'; } if (!foreColor) { foreColor = w.config.chart.foreColor; } 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.font({ family: fontFamily }); } elText.attr({ x: x, y: y, 'text-anchor': textAnchor, 'dominate-baseline': 'central', class: true ? opts.cssClass : '' }); elText.node.style.fontSize = fontSize; elText.node.style.fontFamily = fontFamily; elText.node.style.fill = foreColor; elText.node.style.opacity = opacity; return elText; } }, { 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 (!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) { var w = this.w; var filters = new _Filters2.default(this.ctx); if (w.config.states.active.filter.type !== 'none') { if (path.node.getAttribute('selected') === 'true') { return; } } if (w.config.states.hover.filter.type !== 'none') { var hoverFilter = w.config.states.hover.filter; filters.applyFilter(path, hoverFilter.type, hoverFilter.value); } } }, { key: 'pathMouseLeave', value: function pathMouseLeave(path) { var w = this.w; var filters = new _Filters2.default(this.ctx); if (w.config.states.active.filter.type !== 'none') { if (path.node.getAttribute('selected') === 'true') { return; } } if (w.config.states.hover.filter.type !== 'none') { filters.getDefaultFilter(path); } } }, { key: 'pathMouseDown', value: function pathMouseDown(path, e) { var w = this.w; var filters = new _Filters2.default(this.ctx); var i = parseInt(path.node.getAttribute('index')); var j = parseInt(path.node.getAttribute('j')); // if (w.config.states.active.filter.type !== 'none') { // toggle selection var selected = 'false'; if (path.node.getAttribute('selected') === 'true') { path.node.setAttribute('selected', 'false'); if (w.globals.selectedDataPoints[i].includes(j)) { 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').members; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = elPaths[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var elPath = _step.value; elPath.node.setAttribute('selected', 'false'); filters.getDefaultFilter(elPath); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } var _iteratorNormalCompletion2 = true; var _didIteratorError2 = false; var _iteratorError2 = undefined; try { for (var _iterator2 = elCircles[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { var circle = _step2.value; circle.node.setAttribute('selected', 'false'); filters.getDefaultFilter(circle); } } catch (err) { _didIteratorError2 = true; _iteratorError2 = err; } finally { try { if (!_iteratorNormalCompletion2 && _iterator2.return) { _iterator2.return(); } } finally { if (_didIteratorError2) { throw _iteratorError2; } } } } path.node.setAttribute('selected', 'true'); selected = 'true'; if (typeof w.globals.selectedDataPoints[i] === 'undefined') { w.globals.selectedDataPoints[i] = []; } w.globals.selectedDataPoints[i].push(j); } if (selected === 'true') { var activeFilter = w.config.states.active.filter; if (activeFilter !== 'none') { filters.applyFilter(path, activeFilter.type, activeFilter.value); if (typeof w.config.chart.events.dataPointSelection === 'function') { w.config.chart.events.dataPointSelection(e, this.ctx, { selectedDataPoints: w.globals.selectedDataPoints, seriesIndex: i, dataPointIndex: j, config: w.config, globals: w.globals }); } this.ctx.fireEvent('dataPointSelection', [e, this.ctx, { selectedDataPoints: w.globals.selectedDataPoints, seriesIndex: i, dataPointIndex: j, config: w.config, globals: w.globals }]); } } else { if (w.config.states.active.filter.type !== 'none') { filters.getDefaultFilter(path); } if (typeof w.config.chart.events.dataPointSelection === 'function') { w.config.chart.events.dataPointSelection(e, this.ctx, { selectedDataPoints: w.globals.selectedDataPoints, seriesIndex: i, dataPointIndex: j, config: w.config, globals: w.globals }); } this.ctx.fireEvent('dataPointSelection', [e, this.ctx, { selectedDataPoints: w.globals.selectedDataPoints, seriesIndex: i, dataPointIndex: j, config: w.config, globals: w.globals }]); } 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; /***/ }), /* 1 */ /***/ (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: 'shadeColor', // beautiful color shading blending code // http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors value: function shadeColor(p, from) { var to = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined; if (from[0] !== '#' || from[0] !== 'r') { from = this.getHexColorFromName(from); } if (typeof p !== 'number' || p < -1 || p > 1 || typeof from !== 'string' || from[0] !== 'r' && from[0] !== '#' || typeof to !== 'string' && typeof to !== 'undefined') return null; // ErrorCheck var i = parseInt, r = Math.round, h = from.length > 9, h = typeof to === 'string' ? to.length > 9 ? true : to === 'c' ? !h : false : h, b = p < 0, p = b ? p * -1 : p, to = to && to !== 'c' ? to : b ? '#000000' : '#FFFFFF', f = this.sbcRip(from), t = this.sbcRip(to); if (!f || !t) return null; // ErrorCheck if (h) return 'rgb(' + r((t[0] - f[0]) * p + f[0]) + ',' + r((t[1] - f[1]) * p + f[1]) + ',' + r((t[2] - f[2]) * p + f[2]) + (f[3] < 0 && t[3] < 0 ? ')' : ',' + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 10000) / 10000 : t[3] < 0 ? f[3] : t[3]) + ')');else return '#' + (0x100000000 + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 255) : t[3] > -1 ? r(t[3] * 255) : f[3] > -1 ? r(f[3] * 255) : 255) * 0x1000000 + r((t[0] - f[0]) * p + f[0]) * 0x10000 + r((t[1] - f[1]) * p + f[1]) * 0x100 + r((t[2] - f[2]) * p + f[2])).toString(16).slice(f[3] > -1 || t[3] > -1 ? 1 : 3); } // helper function of shadeColor }, { key: 'sbcRip', value: function sbcRip(d) { var l = d.length, RGB = new Object(); var i = parseInt, r = Math.round; if (l > 9) { d = d.split(','); if (d.length < 3 || d.length > 4) return null; // ErrorCheck RGB[0] = i(d[0].slice(4)), RGB[1] = i(d[1]), RGB[2] = i(d[2]), RGB[3] = d[3] ? parseFloat(d[3]) : -1; } else { if (l === 8 || l === 6 || l < 4) return null; // ErrorCheck if (l < 6) d = '#' + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (l > 4 ? d[4] + '' + d[4] : ''); // 3 digit d = i(d.slice(1), 16), RGB[0] = d >> 16 & 255, RGB[1] = d >> 8 & 255, RGB[2] = d & 255, RGB[3] = l === 9 || l === 5 ? r((d >> 24 & 255) / 255 * 10000) / 10000 : -1; } return RGB; } // https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes }, { key: 'getHexColorFromName', value: function getHexColorFromName(colorStr) { var a = document.createElement('div'); a.style.color = colorStr; var colors = window.getComputedStyle(document.body.appendChild(a)).color.match(/\d+/g).map(function (a) { return parseInt(a, 10); }); document.body.removeChild(a); return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1) : false; } }], [{ 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; } // 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; } }, { 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: '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: '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: '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: 'negToZero', value: function negToZero(val) { return val < 0 ? 0 : val; } }, { 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: '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; /***/ }), /* 2 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var store = __webpack_require__(40)('wks'); var uid = __webpack_require__(24); var _Symbol = __webpack_require__(3).Symbol; var USE_SYMBOL = typeof _Symbol == 'function'; var $exports = module.exports = function (name) { return store[name] || (store[name] = USE_SYMBOL && _Symbol[name] || (USE_SYMBOL ? _Symbol : uid)('Symbol.' + name)); }; $exports.store = store; /***/ }), /* 3 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 var global = module.exports = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self // eslint-disable-next-line no-new-func : Function('return this')(); if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef /***/ }), /* 4 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var core = module.exports = { version: '2.5.7' }; if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef /***/ }), /* 5 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var global = __webpack_require__(3); var core = __webpack_require__(4); var hide = __webpack_require__(12); var redefine = __webpack_require__(15); var ctx = __webpack_require__(14); var PROTOTYPE = 'prototype'; var $export = function $export(type, name, source) { var IS_FORCED = type & $export.F; var IS_GLOBAL = type & $export.G; var IS_STATIC = type & $export.S; var IS_PROTO = type & $export.P; var IS_BIND = type & $export.B; var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE]; var exports = IS_GLOBAL ? core : core[name] || (core[name] = {}); var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {}); var key, own, out, exp; if (IS_GLOBAL) source = name; for (key in source) { // contains in native own = !IS_FORCED && target && target[key] !== undefined; // export native or passed out = (own ? target : source)[key]; // bind timers to global for call from export context exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; // extend global if (target) redefine(target, key, out, type & $export.U); // export if (exports[key] != out) hide(exports, key, exp); if (IS_PROTO && expProto[key] != out) expProto[key] = out; } }; global.core = core; // type bitmap $export.F = 1; // forced $export.G = 2; // global $export.S = 4; // static $export.P = 8; // proto $export.B = 16; // bind $export.W = 32; // wrap $export.U = 64; // safe $export.R = 128; // real proto method for `library` module.exports = $export; /***/ }), /* 6 */ /***/ (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__(1); 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 value formatters for axes as well as tooltips. * * @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) { 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, 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); } } } }, { key: 'addNormalFilter', value: function addNormalFilter(el) { var w = this.w; if (w.config.chart.dropShadow.enabled) { this.dropShadow(el, w.config.chart.dropShadow); } } }, { key: 'addDesaturateFilter', value: function addDesaturateFilter(el) { var _this = this; var w = this.w; 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, shadowAttr); } else { filter = add; } filter.colorMatrix('matrix', [0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 1.0, 0]).colorMatrix('saturate', 0); }); el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse'); } // appends dropShadow to the filter object which can be chained with other filter effects }, { key: 'addLightenFilter', value: function addLightenFilter(el, 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, 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, attrs) { var _this3 = 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 = _this3.addShadow(add, shadowAttr); } else { filter = add; } filter.componentTransfer({ rgb: { type: 'linear', slope: intensity } }); }); el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse'); } }, { key: 'applyFilter', value: function applyFilter(el, filter) { var intensity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5; switch (filter) { case 'none': { this.addNormalFilter(el); break; } case 'lighten': { this.addLightenFilter(el, { intensity: intensity }); break; } case 'darken': { this.addDarkenFilter(el, { intensity: intensity }); break; } case 'desaturate': { this.addDesaturateFilter(el); 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, attrs) { var blur = attrs.blur, top = attrs.top, left = attrs.left, opacity = attrs.opacity; var shadowBlur = add.flood('black', 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 top = attrs.top, left = attrs.left, blur = attrs.blur, opacity = attrs.opacity; el.unfilter(true); 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('black', opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur); } else { shadowBlur = add.flood('black', opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur).merge(add.source); } add.blend(add.source, shadowBlur); }); el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse'); return el; } // directly adds darken filter to the element and returns the same element. // darken (el, intensity = 0.2) { // let darkenFilter = null // el.filter(function (add) { // darkenFilter = add.componentTransfer({ // rgb: { type: 'linear', slope: intensity } // }) // }) // return darkenFilter // } // directly adds lighten to the element and returns the same element. // lighten (el, intensity = 0.2) { // el.filter(function (add) { // add.componentTransfer({ // rgb: { type: 'linear', slope: 1.5, intercept: 0.2 } // }) // }) // return el // } }]); return Filters; }(); exports.default = Filters; /***/ }), /* 7 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var isObject = __webpack_require__(8); module.exports = function (it) { if (!isObject(it)) throw TypeError(it + ' is not an object!'); return it; }; /***/ }), /* 8 */ /***/ (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; }; module.exports = function (it) { return (typeof it === 'undefined' ? 'undefined' : _typeof(it)) === 'object' ? it !== null : typeof it === 'function'; }; /***/ }), /* 9 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var anObject = __webpack_require__(7); var IE8_DOM_DEFINE = __webpack_require__(55); var toPrimitive = __webpack_require__(42); var dP = Object.defineProperty; exports.f = __webpack_require__(10) ? Object.defineProperty : function defineProperty(O, P, Attributes) { anObject(O); P = toPrimitive(P, true); anObject(Attributes); if (IE8_DOM_DEFINE) try { return dP(O, P, Attributes); } catch (e) {/* empty */} if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!'); if ('value' in Attributes) O[P] = Attributes.value; return O; }; /***/ }), /* 10 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // Thank's IE8 for his funny defineProperty module.exports = !__webpack_require__(19)(function () { return Object.defineProperty({}, 'a', { get: function get() { return 7; } }).a != 7; }); /***/ }), /* 11 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var hasOwnProperty = {}.hasOwnProperty; module.exports = function (it, key) { return hasOwnProperty.call(it, key); }; /***/ }), /* 12 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var dP = __webpack_require__(9); var createDesc = __webpack_require__(22); module.exports = __webpack_require__(10) ? function (object, key, value) { return dP.f(object, key, createDesc(1, value)); } : function (object, key, value) { object[key] = value; return object; }; /***/ }), /* 13 */ /***/ (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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Utils = __webpack_require__(1); 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: '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(elSeries, 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 fillOpacity = Array.isArray(cnf.fill.opacity) ? cnf.fill.opacity[this.seriesIndex] : cnf.fill.opacity; var defaultColor = _Utils2.default.hexToRgba(fillColors[this.seriesIndex], fillOpacity); var fillColor = fillColors[this.seriesIndex]; if (cnf.fill.type === 'pattern') { patternFill = this.handlePatternFill(patternFill, fillColor, fillOpacity, defaultColor); } if (cnf.fill.type === 'gradient') { gradientFill = this.handleGradientFill(gradientFill, fillColor, fillOpacity); } if (cnf.fill.image.src.length > 0 && cnf.fill.type === 'image') { if (opts.seriesNumber < cnf.fill.image.src.length) { this.clippedImgArea({ opacity: fillOpacity, image: cnf.fill.image.src[opts.seriesNumber], patternID: 'pattern' + w.globals.cuid + (opts.seriesNumber + 1) }); pathFill = 'url(#pattern' + w.globals.cuid + (opts.seriesNumber + 1) + ')'; } else { pathFill = defaultColor; } } else if (cnf.fill.type === 'gradient') { pathFill = gradientFill; } else if (cnf.fill.type === 'pattern') { pathFill = patternFill; } else { pathFill = defaultColor; } if (opts.solid) { pathFill = defaultColor; } if (opts.color) { pathFill = opts.color; } return pathFill; } }, { 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) { 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 : cnf.fill.gradient.opacityFrom; var opacityTo = cnf.fill.gradient.opacityTo === undefined ? fillOpacity : 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); return gradientFill; } }]); return Fill; }(); exports.default = Fill; /***/ }), /* 14 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // optional / simple context binding var aFunction = __webpack_require__(17); module.exports = function (fn, that, length) { aFunction(fn); if (that === undefined) return fn; switch (length) { case 1: return function (a) { return fn.call(that, a); }; case 2: return function (a, b) { return fn.call(that, a, b); }; case 3: return function (a, b, c) { return fn.call(that, a, b, c); }; } return function () /* ...args */{ return fn.apply(that, arguments); }; }; /***/ }), /* 15 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var global = __webpack_require__(3); var hide = __webpack_require__(12); var has = __webpack_require__(11); var SRC = __webpack_require__(24)('src'); var TO_STRING = 'toString'; var $toString = Function[TO_STRING]; var TPL = ('' + $toString).split(TO_STRING); __webpack_require__(4).inspectSource = function (it) { return $toString.call(it); }; (module.exports = function (O, key, val, safe) { var isFunction = typeof val == 'function'; if (isFunction) has(val, 'name') || hide(val, 'name', key); if (O[key] === val) return; if (isFunction) has(val, SRC) || hide(val, SRC, O[key] ? '' + O[key] : TPL.join(String(key))); if (O === global) { O[key] = val; } else if (!safe) { delete O[key]; hide(O, key, val); } else if (O[key]) { O[key] = val; } else { hide(O, key, val); } // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative })(Function.prototype, TO_STRING, function toString() { return typeof this == 'function' && this[SRC] || $toString.call(this); }); /***/ }), /* 16 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // to indexed object, toObject with fallback for non-array-like ES3 strings var IObject = __webpack_require__(36); var defined = __webpack_require__(33); module.exports = function (it) { return IObject(defined(it)); }; /***/ }), /* 17 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (it) { if (typeof it != 'function') throw TypeError(it + ' is not a function!'); return it; }; /***/ }), /* 18 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var toString = {}.toString; module.exports = function (it) { return toString.call(it).slice(8, -1); }; /***/ }), /* 19 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (exec) { try { return !!exec(); } catch (e) { return true; } }; /***/ }), /* 20 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = {}; /***/ }), /* 21 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = false; /***/ }), /* 22 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (bitmap, value) { return { enumerable: !(bitmap & 1), configurable: !(bitmap & 2), writable: !(bitmap & 4), value: value }; }; /***/ }), /* 23 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.1.15 ToLength var toInteger = __webpack_require__(41); var min = Math.min; module.exports = function (it) { return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991 }; /***/ }), /* 24 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var id = 0; var px = Math.random(); module.exports = function (key) { return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36)); }; /***/ }), /* 25 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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 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; } 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) { if (!from) from = 0; el.attr({ r: from }).animate(speed).attr({ r: to }); } /* ** Animate radius and position of a circle element */ }, { key: 'animateCircle', value: function animateCircle(el, from, to, speed) { el.attr({ r: from.r, cx: from.cx, cy: from.cy }).animate(speed).attr({ r: to.r, cx: to.cx, cy: to.cy }); } /* ** Animate rect properties */ }, { key: 'animateRect', value: function animateRect(el, from, to, speed) { el.attr(from).animate(speed).attr(to); } }, { key: 'animatePathsGradually', value: function animatePathsGradually(params) { var el = params.el, 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, pathFrom, pathTo, speed, strokeWidth, delay * delayFactor); } // SVG.js animation for morphing one path to another }, { key: 'morphSVG', value: function morphSVG(el, pathFrom, pathTo, speed, strokeWidth, delay) { var w = this.w; if (!pathFrom) { pathFrom = el.attr('pathFrom'); } if (!pathTo) { pathTo = el.attr('pathTo'); } if (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; } el.plot(pathFrom).animate(1, w.globals.easing, delay).plot(pathFrom).animate(speed, w.globals.easing, delay).plot(pathTo); } /* This function is called when initial animation ends. ** as we are delaying some elements on axis chart types and showing after initialAnim */ }, { key: 'showDelayedElements', value: function showDelayedElements() { var w = this.w; var anim = w.config.chart.animations; var speed = anim.speed; var gradualAnimate = anim.animateGradually.enabled; var gradualDelay = anim.animateGradually.delay; if (anim.enabled && !w.globals.resized) { for (var i = 0; i < w.globals.series.length; i++) { var delay = 0; if (gradualAnimate) { delay = (i + 1) * (gradualDelay / 1000); } for (var z = 0; z < w.globals.delayedElements.length; z++) { if (w.globals.delayedElements[z].index === i) { var ele = w.globals.delayedElements[z].el; ele.classList.add('apexcharts-showAfterDelay'); ele.style.animationDelay = speed / 950 + delay + 's'; } } } } if (w.config.chart.animations.dynamicAnimation.enabled && w.globals.dataChanged) { for (var _z = 0; _z < w.globals.delayedElements.length; _z++) { var _ele = w.globals.delayedElements[_z].el; _ele.classList.add('apexcharts-showAfterDelay'); _ele.style.animationDelay = w.config.chart.animations.dynamicAnimation.speed / 950 + 's'; } } } }]); return Animations; }(); module.exports = Animations; /***/ }), /* 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__(0); 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"); } } /** * 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: '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'); if (type === 'area') { if (paths[j].classList.contains('apexcharts-line') || paths[j].classList.contains('apexcharts-area')) { dArr.paths.push({ d: d }); } } else { 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 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; 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; } }]); return Series; }(); exports.default = Series; /***/ }), /* 27 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 19.1.2.14 / 15.2.3.14 Object.keys(O) var $keys = __webpack_require__(64); var enumBugKeys = __webpack_require__(35); module.exports = Object.keys || function keys(O) { return $keys(O, enumBugKeys); }; /***/ }), /* 28 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var def = __webpack_require__(9).f; var has = __webpack_require__(11); var TAG = __webpack_require__(2)('toStringTag'); module.exports = function (it, tag, stat) { if (it && !has(it = stat ? it : it.prototype, TAG)) def(it, TAG, { configurable: true, value: tag }); }; /***/ }), /* 29 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.1.13 ToObject(argument) var defined = __webpack_require__(33); module.exports = function (it) { return Object(defined(it)); }; /***/ }), /* 30 */ /***/ (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__(52); var _DateTime2 = _interopRequireDefault(_DateTime); var _Utils = __webpack_require__(1); 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, opts) { return val; }; w.globals.ttKeyFormatter = function (val, opts) { return val; }; w.globals.ttZFormatter = function (val, opts) { return val; }; w.globals.legendFormatter = function (val, opts) { return val; }; if (w.config.tooltip.x.formatter !== undefined) { w.globals.ttKeyFormatter = w.config.tooltip.x.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)) { return val.toFixed(0); } return val; }; } // formatter function will always overwrite format property w.config.yaxis.forEach(function (yaxe, i) { if (typeof yaxe.labels.formatter === 'function') { 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); } 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; // cnf.yaxis[0].labels.formatter = function (val) { // return val // } w.globals.yLabelFormatters[0] = function (val) { return val; }; } } }]); return Formatters; }(); exports.default = Formatters; /***/ }), /* 31 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 22.1.3.31 Array.prototype[@@unscopables] var UNSCOPABLES = __webpack_require__(2)('unscopables'); var ArrayProto = Array.prototype; if (ArrayProto[UNSCOPABLES] == undefined) __webpack_require__(12)(ArrayProto, UNSCOPABLES, {}); module.exports = function (key) { ArrayProto[UNSCOPABLES][key] = true; }; /***/ }), /* 32 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // getting tag from 19.1.3.6 Object.prototype.toString() var cof = __webpack_require__(18); var TAG = __webpack_require__(2)('toStringTag'); // ES3 wrong here var ARG = cof(function () { return arguments; }()) == 'Arguments'; // fallback for IE11 Script Access Denied error var tryGet = function tryGet(it, key) { try { return it[key]; } catch (e) {/* empty */} }; module.exports = function (it) { var O, T, B; return it === undefined ? 'Undefined' : it === null ? 'Null' // @@toStringTag case : typeof (T = tryGet(O = Object(it), TAG)) == 'string' ? T // builtinTag case : ARG ? cof(O) // ES3 arguments fallback : (B = cof(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : B; }; /***/ }), /* 33 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.2.1 RequireObjectCoercible(argument) module.exports = function (it) { if (it == undefined) throw TypeError("Can't call method on " + it); return it; }; /***/ }), /* 34 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var isObject = __webpack_require__(8); var document = __webpack_require__(3).document; // typeof document.createElement is 'object' in old IE var is = isObject(document) && isObject(document.createElement); module.exports = function (it) { return is ? document.createElement(it) : {}; }; /***/ }), /* 35 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // IE 8- don't enum bug keys module.exports = 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'.split(','); /***/ }), /* 36 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // fallback for non-array-like ES3 and non-enumerable old V8 strings var cof = __webpack_require__(18); // eslint-disable-next-line no-prototype-builtins module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) { return cof(it) == 'String' ? it.split('') : Object(it); }; /***/ }), /* 37 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 25.4.1.5 NewPromiseCapability(C) var aFunction = __webpack_require__(17); function PromiseCapability(C) { var resolve, reject; this.promise = new C(function ($$resolve, $$reject) { if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor'); resolve = $$resolve; reject = $$reject; }); this.resolve = aFunction(resolve); this.reject = aFunction(reject); } module.exports.f = function (C) { return new PromiseCapability(C); }; /***/ }), /* 38 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; exports.f = {}.propertyIsEnumerable; /***/ }), /* 39 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var shared = __webpack_require__(40)('keys'); var uid = __webpack_require__(24); module.exports = function (key) { return shared[key] || (shared[key] = uid(key)); }; /***/ }), /* 40 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var core = __webpack_require__(4); var global = __webpack_require__(3); var SHARED = '__core-js_shared__'; var store = global[SHARED] || (global[SHARED] = {}); (module.exports = function (key, value) { return store[key] || (store[key] = value !== undefined ? value : {}); })('versions', []).push({ version: core.version, mode: __webpack_require__(21) ? 'pure' : 'global', copyright: '© 2018 Denis Pushkarev (zloirock.ru)' }); /***/ }), /* 41 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.1.4 ToInteger var ceil = Math.ceil; var floor = Math.floor; module.exports = function (it) { return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); }; /***/ }), /* 42 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.1.1 ToPrimitive(input [, PreferredType]) var isObject = __webpack_require__(8); // instead of the ES6 spec version, we didn't implement @@toPrimitive case // and the second argument - flag - preferred type is a string module.exports = function (it, S) { if (!isObject(it)) return it; var fn, val; if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val; if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; throw TypeError("Can't convert object to primitive value"); }; /***/ }), /* 43 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var global = __webpack_require__(3); var core = __webpack_require__(4); var LIBRARY = __webpack_require__(21); var wksExt = __webpack_require__(69); var defineProperty = __webpack_require__(9).f; module.exports = function (name) { var $Symbol = core.Symbol || (core.Symbol = LIBRARY ? {} : global.Symbol || {}); if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty($Symbol, name, { value: wksExt.f(name) }); }; /***/ }), /* 44 */ /***/ (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__(13); var _Fill2 = _interopRequireDefault(_Fill); var _Filters = __webpack_require__(6); var _Filters2 = _interopRequireDefault(_Filters); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _DataLabels = __webpack_require__(45); 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 _this = this; var w = this.w; var graphics = new _Graphics2.default(this.ctx); var fill = new _Fill2.default(this.ctx); this.initVariables(series); var ret = graphics.group({ class: 'apexcharts-bar-series apexcharts-plot-series' }); ret.attr('clip-path', 'url(#gridRectMask' + w.globals.cuid + ')'); var _loop = function _loop(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, '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({ makeWidthForVisibleItems: false }); 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' }); var _loop2 = function _loop2(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 }); } 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 }); } 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 seriesNumber = _this.barOptions.distributed ? j : i; var fillColor = null; 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; } }); } var pathFill = fill.fillPath(elSeries, { seriesNumber: _this.barOptions.distributed ? seriesNumber : realIndex, color: fillColor }); 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' }); }; for (var j = 0, tj = w.globals.dataPoints; j < w.globals.dataPoints; j++, tj--) { _loop2(j, tj); } // push all x val arrays into main xArr w.globals.seriesXvalues[realIndex] = xArrj; w.globals.seriesYvalues[realIndex] = yArrj; ret.add(elSeries); }; for (var i = 0, bc = 0; i < series.length; i++, bc++) { _loop(i, bc); } return ret; } }, { key: 'renderSeries', value: function renderSeries(_ref) { var realIndex = _ref.realIndex, pathFill = _ref.pathFill, 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); var lineFill = w.globals.stroke.colors[realIndex]; 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, 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' }); this.setSelectedBarFilter(renderedPath, realIndex, j); elSeries.add(renderedPath); var dataLabels = this.calculateBarDataLabels({ 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, shouldGetVisibleItems) { 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 (shouldGetVisibleItems) { 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++; } } } } if (this.seriesLen === 0) { // A small adjustment when combo charts are used this.seriesLen = 1; } } }, { key: 'initialPositions', value: function initialPositions(_ref2) { var _ref2$makeWidthForVis = _ref2.makeWidthForVisibleItems, makeWidthForVisibleItems = _ref2$makeWidthForVis === undefined ? false : _ref2$makeWidthForVis; 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.dataXY) { yDivision = w.globals.gridHeight / this.totalItems; barHeight = yDivision / this.seriesLen; } barHeight = barHeight * parseInt(this.barOptions.barHeight) / 100; zeroW = this.baseLineInvertedY + w.globals.padHorizontal; y = (yDivision - barHeight * this.seriesLen) / 2; } else { // width divided into equal parts xDivision = w.globals.gridWidth / w.globals.dataPoints; barWidth = xDivision / this.seriesLen; if (w.globals.dataXY) { if (makeWidthForVisibleItems) { xDivision = w.globals.gridWidth / this.visibleItems; barWidth = xDivision / this.seriesLen * 0.7; } else { xDivision = w.globals.gridWidth / (this.totalItems / 2); barWidth = xDivision / (this.seriesLen + 1) * (parseInt(this.barOptions.columnWidth) / 100); } } else { barWidth = barWidth * parseInt(this.barOptions.columnWidth) / 100; } zeroH = w.globals.gridHeight - this.baseLineY[this.yaxisIndex]; 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(_ref3) { var indexes = _ref3.indexes, barHeight = _ref3.barHeight, strokeWidth = _ref3.strokeWidth, pathTo = _ref3.pathTo, pathFrom = _ref3.pathFrom, zeroW = _ref3.zeroW, x = _ref3.x, y = _ref3.y, yDivision = _ref3.yDivision, 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.dataXY) { 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, true); } if (typeof this.series[i][j] === 'undefined' || this.series[i][j] === null) { x = zeroW; } else { x = zeroW + this.series[i][j] / this.invertedYRatio; } 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.dataXY) { 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(_ref4) { var indexes = _ref4.indexes, x = _ref4.x, y = _ref4.y, xDivision = _ref4.xDivision, pathTo = _ref4.pathTo, pathFrom = _ref4.pathFrom, barWidth = _ref4.barWidth, zeroH = _ref4.zeroH, strokeWidth = _ref4.strokeWidth, elSeries = _ref4.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.dataXY) { 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, true); } 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]; } 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, 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, zeroH); if (!w.globals.dataXY) { 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 * @param {bool} typeGroup - Bars/columns are not stacked, but grouped * @return {string} pathFrom is the string which will be appended in animations **/ }, { key: 'getPathFrom', value: function getPathFrom(realIndex, j) { var typeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; 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: 'calculateBarDataLabels', value: function calculateBarDataLabels(_ref5) { var x = _ref5.x, y = _ref5.y, i = _ref5.i, j = _ref5.j, realIndex = _ref5.realIndex, series = _ref5.series, barHeight = _ref5.barHeight, barWidth = _ref5.barWidth, visibleSeries = _ref5.visibleSeries, renderedPath = _ref5.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); var offX = w.config.dataLabels.offsetX; var offY = w.config.dataLabels.offsetY; if (w.globals.dataXY) { bcx = x + parseFloat(barWidth * (visibleSeries + 1)) - strokeWidth; bcy = y + parseFloat(barHeight * (visibleSeries + 1)) - strokeWidth; } var dataLabels = null; var dataLabelsX = x; var dataLabelsY = y; var dataLabelsConfig = w.config.dataLabels; var barDataLabelsConfig = this.barOptions.dataLabels; var dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints; var dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints; var negValuesPresent = Math.abs(w.globals.minY) !== 0; var textRects = graphics.getTextRects(w.globals.series[i][j], parseInt(dataLabelsConfig.style.fontSize)); if (this.isHorizontal) { dataLabelsY = bcy - dataPointsDividedHeight + barHeight / 2 + textRects.height / 2 + offY - 3; var _barWidth = series[i][j] / this.invertedYRatio; var valIsNegative = series[i][j] <= 0; switch (barDataLabelsConfig.position) { case 'center': dataLabelsX = x - _barWidth / 2 + offX; if (negValuesPresent) { if (valIsNegative) { dataLabelsX = x - _barWidth / 2 - offX; } else { dataLabelsX = x - _barWidth / 2 + offX; } } break; case 'bottom': if (negValuesPresent) { if (valIsNegative) { dataLabelsX = x - _barWidth - strokeWidth - Math.round(textRects.width / 2) - offX; } else { 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 (negValuesPresent) { if (valIsNegative) { dataLabelsX = x - strokeWidth + Math.round(textRects.width / 2) - offX; } else { dataLabelsX = x - strokeWidth - Math.round(textRects.width / 2) + offX; } } else { dataLabelsX = x + strokeWidth - Math.round(textRects.width / 2) + offX; } break; } renderedPath.attr({ cy: bcy, cx: x, j: j, val: series[i][j], barHeight: barHeight }); if (dataLabelsX < 0) { dataLabelsX = textRects.width + strokeWidth; } else if (dataLabelsX + textRects.width / 2 > w.globals.gridWidth) { dataLabelsX = dataLabelsX - textRects.width - strokeWidth; } dataLabels = this.drawCalculatedBarDataLabels({ x: dataLabelsX, y: dataLabelsY, val: series[i][j], i: realIndex, j: j, dataLabelsConfig: dataLabelsConfig }); } else { // columns var _barHeight = series[i][j] / this.yRatio[this.yaxisIndex]; bcx = bcx - strokeWidth / 2; if (w.globals.dataXY) { dataLabelsX = bcx - barWidth / 2 + offX; } else { dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX; } var baseline = w.globals.gridHeight - this.baseLineY[this.yaxisIndex]; var _valIsNegative = !!(y > baseline && Math.abs(this.baseLineY[this.yaxisIndex]) !== 0); switch (barDataLabelsConfig.position) { case 'center': dataLabelsY = y + _barHeight / 2 + textRects.height / 2 - offY; if (negValuesPresent) { if (_valIsNegative) { dataLabelsY = y + _barHeight / 2 + textRects.height / 2 + offY; } else { dataLabelsY = y + _barHeight / 2 + textRects.height / 2 - offY; } } break; case 'bottom': if (negValuesPresent) { if (_valIsNegative) { dataLabelsY = y + _barHeight + textRects.height + strokeWidth + offY; } else { dataLabelsY = y + _barHeight - textRects.height / 2 + strokeWidth - offY; } } else { dataLabelsY = w.globals.gridHeight - textRects.height / 2 - offY; } break; case 'top': if (negValuesPresent) { if (_valIsNegative) { dataLabelsY = y - textRects.height / 2 - offY; } else { dataLabelsY = y + textRects.height + offY; } } else { dataLabelsY = y + textRects.height + offY; } break; } renderedPath.attr({ cy: y, cx: bcx, j: j, val: series[i][j], barWidth: barWidth }); dataLabels = this.drawCalculatedBarDataLabels({ x: dataLabelsX, y: dataLabelsY, val: series[i][j], i: realIndex, j: j, dataLabelsConfig: dataLabelsConfig }); } return dataLabels; } }, { key: 'drawCalculatedBarDataLabels', value: function drawCalculatedBarDataLabels(_ref6) { var x = _ref6.x, y = _ref6.y, val = _ref6.val, i = _ref6.i, j = _ref6.j, dataLabelsConfig = _ref6.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.includes(i); if (dataLabelsConfig.enabled && !isSeriesNotCollapsed) { elDataLabelsWrap = graphics.group({ class: 'apexcharts-data-labels' }); var text = ''; if (typeof val !== 'undefined') { text = formatter(val, { seriesIndex: i, dataPointIndex: j, globals: w.globals }); } dataLabels.plotDataLabelsText(x, y, text, i, j, elDataLabelsWrap, dataLabelsConfig, 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 _x2 = 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 (Math.abs(series[i][j] / this.invertedYRatio) > eX) { if (this.barOptions.endingShape === 'arrow') { _x2 = opts.x - eX; } else if (this.barOptions.endingShape === 'rounded') { _x2 = opts.x - eX / 2; } // } } switch (this.barOptions.endingShape) { case 'flat': endingShape = graphics.line(_x2, opts.barYPosition + opts.barHeight - opts.strokeWidth); break; case 'arrow': endingShape = graphics.line(_x2 + eX, opts.barYPosition + (opts.barHeight - opts.strokeWidth) / 2) + graphics.line(_x2, opts.barYPosition + opts.barHeight - opts.strokeWidth); endingShapeFrom = graphics.line(opts.zeroW, opts.barYPosition + opts.barHeight - opts.strokeWidth); break; case 'rounded': endingShape = graphics.quadraticCurve(_x2 + eX, opts.barYPosition + (opts.barHeight - opts.strokeWidth) / 2, _x2, opts.barYPosition + opts.barHeight - opts.strokeWidth); break; } } return { path: endingShape, ending_p_from: endingShapeFrom, newX: _x2 }; } 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) { // if (Math.abs(series[i][j] / this.yRatio[this.yaxisIndex]) > eY) { // the arrow exceeds the chart height, hence reduce y if (this.barOptions.endingShape === 'arrow') { _y = _y + eY; } else 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 'arrow': _endingShape = graphics.line(opts.barXPosition + (opts.barWidth - opts.strokeWidth) / 2, _y - eY) + graphics.line(opts.barXPosition + opts.barWidth - opts.strokeWidth, _y); _endingShapeFrom = graphics.line(opts.barXPosition + opts.barWidth - opts.strokeWidth, opts.zeroH); 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 }; } } }, { key: 'setSelectedBarFilter', value: function setSelectedBarFilter(el, realIndex, j) { var w = this.w; if (typeof w.globals.selectedDataPoints[realIndex] !== 'undefined') { if (w.globals.selectedDataPoints[realIndex].includes(j)) { el.node.setAttribute('selected', true); var activeFilter = w.config.states.active.filter; if (activeFilter !== 'none') { var filters = new _Filters2.default(this.ctx); filters.applyFilter(el, activeFilter.type, activeFilter.value); } } } } }]); return Bar; }(); exports.default = Bar; /***/ }), /* 45 */ /***/ (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__(74); var _Scatter2 = _interopRequireDefault(_Scatter); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Filters = __webpack_require__(6); 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, realIndexP, alwaysDrawDataLabel, fontSize, pointSize) { 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 (realIndexP === 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; // 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 realIndexP = j; var elDataLabelsWrap = null; if (dataLabelsConfig.enabled) { elDataLabelsWrap = graphics.group({ class: 'apexcharts-data-labels' }); if (pos.x instanceof Array) { for (var q = 0; q < pos.x.length; q++) { x = pos.x[q] + dataLabelsConfig.offsetX; y = pos.y[q] + dataLabelsConfig.offsetY - w.config.markers.size - 5; if (!isNaN(x)) { // a small hack as we have 2 points for the first val to connect it if (j === 1 && q === 0) realIndexP = 0; if (j === 1 && q === 1) realIndexP = 1; var val = w.globals.series[i][realIndexP]; var text = ''; if (w.config.chart.type === 'bubble') { text = w.globals.seriesZ[i][realIndexP]; y = pos.y[q] + w.config.dataLabels.offsetY; var scatter = new _Scatter2.default(this.ctx); var centerTextInBubbleCoords = scatter.centerTextInBubble(y, i, realIndexP); y = centerTextInBubbleCoords.y; } else { if (typeof val !== 'undefined') { text = w.config.dataLabels.formatter(val, { seriesIndex: i, dataPointIndex: realIndexP, globals: w.globals }); } } this.plotDataLabelsText(x, y, text, i, realIndexP, elDataLabelsWrap, w.config.dataLabels); } } } } return elDataLabelsWrap; } }, { key: 'plotDataLabelsText', value: function plotDataLabelsText(x, y, text, i, j, elToAppendTo, dataLabelsConfig) { var alwaysDrawDataLabel = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false; var w = this.w; var graphics = new _Graphics2.default(this.ctx); var correctedLabels = this.dataLabelsCorrection(x, y, text, i, j, alwaysDrawDataLabel, parseInt(dataLabelsConfig.style.fontSize), w.config.markers.size <= w.config.markers.hover.size ? w.config.markers.hover.size : w.config.markers.size); // 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: 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); } elToAppendTo.add(dataLabelText); if (typeof w.globals.lastDrawnDataLabelsIndexes[i] === 'undefined') { w.globals.lastDrawnDataLabelsIndexes[i] = []; } w.globals.lastDrawnDataLabelsIndexes[i].push(j); } } }]); return DataLabels; }(); exports.default = DataLabels; /***/ }), /* 46 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Formatters = __webpack_require__(30); var _Formatters2 = _interopRequireDefault(_Formatters); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _YAxis = __webpack_require__(49); 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.isBarHorizontal = !!(this.w.config.chart.type === 'bar' && this.w.config.plotOptions.bar.horizontal); } /** * @memberof Dimensions * @param {object} w - chart context **/ _createClass(Dimensions, [{ key: 'plotCoords', value: function plotCoords() { var w = this.w; var gl = w.globals; // if user specified a type in series too, turn on comboCharts flag if (w.config.series.length && typeof w.config.series[0].type !== 'undefined') { w.globals.comboCharts = true; } 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(); } }, { key: 'setGridCoordsForAxisCharts', value: function setGridCoordsForAxisCharts(lgRect) { var w = this.w; var gl = w.globals; var xtitleCoords = void 0; var xaxisLabelCoords = void 0; var ytitleCoords = []; var yaxisLabelCoords = { width: 0, height: 0 }; yaxisLabelCoords = this.getyAxisLabelsCoords(); xaxisLabelCoords = this.getxAxisLabelsCoords(); if (w.globals.timelineLabels.length > 0) { xaxisLabelCoords = this.getxAxisTimeScaleLabelsCoords(); } xtitleCoords = this.getxAxisTitleCoords(); ytitleCoords = this.getyAxisTitleCoords(); if (this.isBarHorizontal) {} // move x with y for horizontal bars // let tempObj = Object.assign({}, yaxisLabelCoords) // yaxisLabelCoords = Object.assign({}, xaxisLabelCoords) // xaxisLabelCoords = Object.assign({}, tempObj) // no x labels, make w=0,h=0 if (!w.config.xaxis.labels.show) { xaxisLabelCoords = { height: 0, width: 0 }; } 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.xAxisHeight = (xaxisLabelCoords.height + xtitleCoords.height) * w.globals.lineHeightRatio + 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.floating) { this.xAxisHeight = 0; } gl.xAxisLabelsHeight = this.xAxisHeight; gl.translateXAxisY = w.globals.rotateXLabels ? this.xAxisHeight / 8 : -4; gl.translateXAxisX = w.globals.rotateXLabels && w.globals.dataXY && w.config.xaxis.labels.rotate <= -45 ? -this.xAxisWidth / 4 : 0; if (this.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; if (!this.isBarHorizontal) { this.yAxisWidth = this.getTotalYAxisWidth(); } else { this.yAxisWidth = w.globals.yLabelsCoords[0].width + w.globals.yTitleCoords[0].width + 15; if (this.yAxisWidth > w.config.yaxis[0].labels.maxWidth) { this.yAxisWidth = w.config.yaxis[0].labels.maxWidth; } } var yAxisWidth = this.yAxisWidth; var xAxisHeight = this.xAxisHeight; var translateY = 10; if (!w.config.grid.show) { yAxisWidth = 0; xAxisHeight = 35; } this.isSparkline = w.config.chart.sparkline.enabled; if (this.isSparkline) { lgRect = { height: 0, width: 0 }; xAxisHeight = 0; yAxisWidth = 0; translateY = 0; } 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; gl.gridWidth = gl.svgWidth - lgRect.width - yAxisWidth; break; case 'right': gl.translateY = translateY; gl.translateX = yAxisWidth; gl.gridHeight = gl.svgHeight - xAxisHeight; gl.gridWidth = gl.svgWidth - lgRect.width - yAxisWidth; break; default: throw new Error('Legend position not supported'); } 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; gl.translateX = gl.translateX + w.config.grid.padding.left; gl.translateY = gl.translateY + w.config.grid.padding.top; if (!this.isBarHorizontal) { 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 = w.config.legend.markers.size * 4 + w.config.legend.itemMargin.horizontal; } var offY = 10; if (w.config.chart.type === 'pie' || w.config.chart.type === 'donut') { offY = offY + w.config.plotOptions.pie.offsetY; } else if (w.config.chart.type === 'radialBar') { offY = offY + w.config.plotOptions.radialBar.offsetY; } switch (w.config.legend.position) { case 'bottom': gl.gridHeight = gl.svgHeight - lgRect.height - 35; gl.gridWidth = gl.gridHeight; gl.translateY = offY - 20; gl.translateX = (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 = (gl.svgWidth - gl.gridWidth) / 2; break; case 'left': gl.gridWidth = gl.svgWidth - lgRect.width - xPad; gl.gridHeight = gl.gridWidth; gl.translateY = offY; gl.translateX = lgRect.width + xPad; break; case 'right': gl.gridWidth = gl.svgWidth - lgRect.width - xPad; gl.gridHeight = gl.gridWidth; gl.translateY = offY; gl.translateX = 5; 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.includes(index) && !w.config.yaxis[index].floating) { 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; } } }); } }, { key: 'titleSubtitleOffset', value: function titleSubtitleOffset() { var w = this.w; var gl = w.globals; var gridShrinkOffset = this.isSparkline ? 0 : 10; if (w.config.title.text !== undefined) { gridShrinkOffset += w.config.title.margin; } else { gridShrinkOffset += this.isSparkline ? 0 : 5; } if (w.config.subtitle.text !== undefined) { gridShrinkOffset += w.config.subtitle.margin; } else { gridShrinkOffset += this.isSparkline ? 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.getMainTitleCoords(); var subtitleCoords = this.getSubTitleCoords(); 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; 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 (w.globals.ignoreYAxisIndexes.includes(index)) { yAxisWidth = yAxisWidth - yLabelCoord.width; } } else { yAxisWidth = yAxisWidth + (floating ? 0 : 5); } }); w.globals.yTitleCoords.map(function (yTitleCoord, index) { var floating = w.config.yaxis[index].floating; if (yTitleCoord.width > 0 && !floating) { yAxisWidth = yAxisWidth + yTitleCoord.width + parseInt(w.config.yaxis[index].title.style.fontSize); if (w.globals.ignoreYAxisIndexes.includes(index)) { yAxisWidth = yAxisWidth - yTitleCoord.width; } } else { yAxisWidth = yAxisWidth + (floating ? 0 : 5); } }); return yAxisWidth; } }, { key: 'getxAxisTimeScaleLabelsCoords', value: function getxAxisTimeScaleLabelsCoords() { var w = this.w; var timescaleLabels = w.globals.timelineLabels.slice(); var labels = 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); var 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 { width: rect.width, height: rect.height }; } /** * 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 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 to it var val = xaxisLabels.reduce(function (a, b) { return a.length > b.length ? a : b; }, 0); var xlbFormatter = w.globals.xLabelFormatter; 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); var 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 (!this.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; } return { width: rect.width, height: rect.height }; } /** * Get Y Axis Dimensions * @memberof Dimensions * @return {{width, height}} **/ }, { key: 'getyAxisLabelsCoords', value: function getyAxisLabelsCoords() { var _this = 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.labels.show && w.globals.yAxisScale[index].result.length) { var lbFormatter = w.globals.yLabelFormatters[index]; var val = lbFormatter(w.globals.yAxisScale[index].niceMax); if (_this.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); } var graphics = new _Graphics2.default(_this.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 _this2 = this; var w = this.w; var ret = []; w.config.yaxis.map(function (yaxe, index) { if (yaxe.title.text !== undefined) { var graphics = new _Graphics2.default(_this2.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 Dimensions * @memberof Dimensions * @return {{width, height}} **/ }, { key: 'getMainTitleCoords', value: function getMainTitleCoords() { var w = this.w; var width = 0; var height = 0; var elTitle = w.globals.dom.baseEl.querySelector('.apexcharts-title-text'); if (elTitle !== null && !w.config.title.floating) { var titleCoords = elTitle.getBoundingClientRect(); width = titleCoords.width; height = w.globals.axisCharts ? titleCoords.height + 5 : titleCoords.height; } return { width: width, height: height }; } /** * Get Chart Title Dimensions * @memberof Dimensions * @return {{width, height}} **/ }, { key: 'getSubTitleCoords', value: function getSubTitleCoords() { var w = this.w; var width = 0; var height = 0; var elSubTitle = w.globals.dom.baseEl.querySelector('.apexcharts-subtitle-text'); if (elSubTitle !== null && !w.config.subtitle.floating) { var subtitleCoords = elSubTitle.getBoundingClientRect(); width = subtitleCoords.width; height = w.globals.axisCharts ? subtitleCoords.height + 5 : subtitleCoords.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)); lgRect.height = lgRect.height + w.config.legend.containerMargin.top + w.config.legend.containerMargin.bottom; lgRect.width = lgRect.width + w.config.legend.containerMargin.left + w.config.legend.containerMargin.right; if (elLegendWrap !== null && !w.config.legend.floating && w.config.legend.show) { this.lgRect = lgRect; } else { this.lgRect = { x: 0, y: 0, height: 0, width: 0 }; } return this.lgRect; } }]); return Dimensions; }(); module.exports = Dimensions; /***/ }), /* 47 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(6); var _Filters2 = _interopRequireDefault(_Filters); var _Graphics = __webpack_require__(0); 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"); } } /** * 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: 'plotChartMarkers', value: function plotChartMarkers(pointsPos, seriesIndex, j) { var _this = this; var w = this.w; var p = pointsPos; var elPointsWrap = null; var graphics = new _Graphics2.default(this.ctx); var point = void 0; if (w.config.markers.size > 0) { elPointsWrap = graphics.group({ class: 'apexcharts-series-markers' }); } if (p.x instanceof Array) { var _loop = function _loop(q) { var realIndexP = j; 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'; } if (w.config.markers.size > 0) { if (p.y[q] !== null) { PointClasses += ' w' + (Math.random() + 1).toString(36).substring(4); } else { PointClasses = 'apexcharts-nullpoint'; } var opts = _this.getMarkerConfig(PointClasses, seriesIndex); w.config.markers.discrete.map(function (marker, mIndex) { if (marker.i === seriesIndex && marker.j === realIndexP) { opts.pointStrokeColor = marker.strokeColor; opts.pointFillColor = marker.fillColor; opts.size = marker.size; } }); point = graphics.drawMarker(p.x[q], p.y[q], opts); // a small hack as we have 2 points for the first val to connect it if (j === 1 && q === 0) realIndexP = 0; if (j === 1 && q === 1) realIndexP = 1; point.attr('rel', realIndexP); point.attr('j', realIndexP); point.attr('index', seriesIndex); _this.setSelectedPointFilter(point, seriesIndex, realIndexP); _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.config.markers.size; return { pSize: pSize instanceof Array ? pSize[seriesIndex] : 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)); } }, { key: 'setSelectedPointFilter', value: function setSelectedPointFilter(circle, realIndex, realIndexP) { var w = this.w; if (typeof w.globals.selectedDataPoints[realIndex] !== 'undefined') { if (w.globals.selectedDataPoints[realIndex].includes(realIndexP)) { circle.node.setAttribute('selected', true); var activeFilter = w.config.states.active.filter; if (activeFilter !== 'none') { var filters = new _Filters2.default(this.ctx); filters.applyFilter(circle, activeFilter.type, activeFilter.value); } } } } }, { key: 'getMarkerStyle', value: function getMarkerStyle(seriesIndex) { var w = this.w; var colors = w.globals.markers.colors; var pointStrokeColor = w.config.markers.strokeColor; var pointFillColor = colors instanceof Array ? colors[seriesIndex] : colors; return { pointStrokeColor: pointStrokeColor, pointFillColor: pointFillColor }; } }]); return Markers; }(); module.exports = Markers; /***/ }), /* 48 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _YAxis = __webpack_require__(49); var _YAxis2 = _interopRequireDefault(_YAxis); var _Formatters = __webpack_require__(30); var _Formatters2 = _interopRequireDefault(_Formatters); 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(); } 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; // 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]; } _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' }); 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.config.chart.type === 'line' || w.config.chart.type === 'area') { if (w.globals.dataXY) { colWidth = w.globals.gridWidth / (labels.length - 1); xPos = xPos + colWidth / 2 + w.config.xaxis.labels.offsetX; } else { // no dataXY, only y values values and labels not provided if (w.globals.noLabelsProvided) { colWidth = w.globals.gridWidth / this.xaxisLabels.length; } else { // labels provided colWidth = w.globals.gridWidth / labels.length; } xPos = xPos + colWidth + w.config.xaxis.labels.offsetX; } } else { if (w.globals.dataXY) { if (w.config.chart.type !== 'bar') { colWidth = w.globals.gridWidth / (this.xaxisLabels.length - 1); xPos = xPos + colWidth / 2 + w.config.xaxis.labels.offsetX; } else { colWidth = w.globals.gridWidth / w.globals.labels.length; xPos = xPos + colWidth / 2 + w.config.xaxis.labels.offsetX; } } else { if (w.globals.noLabelsProvided && w.config.chart.type !== 'bar') { colWidth = w.globals.gridWidth / this.xaxisLabels.length; 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 xlbFormatter = w.globals.xLabelFormatter; var customFormatter = w.config.xaxis.labels.formatter; var labelsLen = labels.length; if (w.config.xaxis.labels.show) { for (var _i = 0; _i <= labelsLen - 1; _i++) { var label = typeof labels[_i] === 'undefined' ? '' : labels[_i]; var xFormat = new _Formatters2.default(this.ctx); label = xFormat.xLabelFormat(xlbFormatter, label); if (customFormatter !== undefined) { label = customFormatter(label, this.xaxisLabels[_i], _i); } var x = xPos - colWidth / 2 + w.config.xaxis.labels.offsetX; if (w.globals.timelineLabels.length > 0) { x = w.globals.timelineLabels[_i].position; label = w.globals.timelineLabels[_i].value; } label = label.toString(); if (label.toLowerCase().indexOf('nan') >= 0 || label.indexOf('undefined') >= 0 || label.toLowerCase().indexOf('invalid') >= 0 || label.toLowerCase().indexOf('infinity') >= 0) { label = ''; } var offsetYCorrection = 28; if (w.globals.rotateXLabels) { offsetYCorrection = 22; } var elTick = graphics.drawText({ x: 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 }); elXaxisTexts.add(elTick); var tspan = elTick.tspan(label); tspan.node.style.fontFamily = this.xaxisFontFamily; var elTooltipTitle = document.createElementNS(w.globals.svgNS, 'title'); elTooltipTitle.textContent = label; 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.dataXY) { lineCorrection = lineCorrection - 15; } var elHorzLine = graphics.drawLine(w.globals.padHorizontal + lineCorrection + w.config.xaxis.axisBorder.offsetX, this.offY, w.globals.gridWidth, this.offY, w.config.xaxis.axisBorder.color, 0, w.config.xaxis.axisBorder.strokeWidth); 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 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' }); 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]; if (w.config.yaxis[0].labels.show) { for (var _i2 = 0; _i2 <= labels.length - 1; _i2++) { var label = typeof labels[_i2] === 'undefined' ? '' : labels[_i2]; label = lbFormatter(label); var elTick = graphics.drawText({ x: w.config.yaxis[0].labels.offsetX - 15, y: yPos + colHeight + w.config.yaxis[0].labels.offsetY, text: label, textAnchor: 'end', foreColor: w.config.yaxis[0].labels.style.colors[_i2], fontSize: w.config.yaxis[0].labels.style.fontSize, fontFamily: w.config.yaxis[0].labels.style.fontFamily, cssClass: 'apexcharts-yaxis-label ' + w.config.yaxis[0].labels.style.cssClass }); elYaxisTexts.add(elTick); yPos = yPos + colHeight; } } if (w.config.yaxis[0].title.text !== undefined) { var elXaxisTitle = graphics.group({ class: 'apexcharts-yaxis-title apexcharts-xaxis-title-inversed' }); 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, w.globals.gridWidth, this.offY, this.yaxis.axisBorder.color, 0, w.config.xaxis.axisBorder.strokeWidth); elYaxis.add(elHorzLine); // let x = w.globals.yAxisWidths[0] / 2 // if (w.config.yaxis[0].opposite) { // x = -w.globals.yAxisWidths[0] / 2 // } var yaxis = new _YAxis2.default(this.ctx); yaxis.drawAxisTicks(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, x2 + w.config.xaxis.axisTicks.offsetX, y2, 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.dataXY && 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.chart.type !== 'bar' && w.config.plotOptions.bar.horizontal) { 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; }(); module.exports = XAxis; /***/ }), /* 49 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); 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"); } } /** * 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; this.xaxisFontSize = this.w.config.xaxis.labels.style.fontSize; this.axisFontFamily = this.w.config.xaxis.labels.style.fontFamily; this.isBarHorizontal = !!(this.w.config.chart.type === 'bar' && this.w.config.plotOptions.bar.horizontal); this.xaxisForeColors = this.w.config.xaxis.labels.style.colors; this.xAxisoffX = 0; if (this.w.config.xaxis.position === 'bottom') { this.xAxisoffX = this.w.globals.gridHeight; } } _createClass(YAxis, [{ key: 'drawYaxis', value: function drawYaxis(xyRatios, 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)' }); 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]; if (w.config.yaxis[realIndex].labels.show) { for (var i = tickAmount; i >= 0; i--) { var val = w.globals.yAxisScale[realIndex].result[i]; val = lbFormatter(val); var xPad = 20; if (w.config.yaxis[realIndex].opposite) { xPad = xPad * -1; } if (w.config.yaxis.length === 0) { xPad = 20; } 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); 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].labels.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.drawAxisTicks(_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; if (w.config.xaxis.labels.show) { for (var i = tickAmount; i >= 0; i--) { var val = w.globals.yAxisScale[realIndex].result[i]; val = lbFormatter(val); var elTick = graphics.drawText({ x: w.globals.gridWidth + w.globals.padHorizontal - (l - labelsDivider + w.config.xaxis.labels.offsetX), 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: 'drawAxisTicks', value: function drawAxisTicks(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 (this.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; } } } }, { 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(-90 ' + titleRotatingCenter.x + ' ' + titleRotatingCenter.y + ')'); } else { yAxisTitle.setAttribute('transform', 'rotate(90 ' + 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 = 20; if (yAxisOpposite) { x = yAxisLabelsCoord.width + w.config.yaxis[realIndex].title.offsetX + padd + yAxisTitleCoord.width / 2 - 15; oppositeAxisCount += 1; if (oppositeAxisCount === 0) { x = x - 15; } } else { x = yAxisLabelsCoord.width * -1 + w.config.yaxis[realIndex].title.offsetX + padd + yAxisTitleCoord.width / 2 - 15; if (this.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 _this = this; var w = this.w; var xLeft = 0; var xRight = 0; var leftDrawnYs = 0; // already drawn y axis on left side var rightDrawnYs = 1; // already drawn y axis on right side var multipleYPadd = 20; this.multipleYs = false; if (w.config.yaxis.length > 1) { this.multipleYs = true; } w.config.yaxis.map(function (yaxe, index) { var yAxisWidth = yaxisLabelCoords[index].width + ytitleCoords[index].width; var paddingForYAxisTitle = _this.xPaddingForYAxisTitle(index, { width: yaxisLabelCoords[index].width }, { width: ytitleCoords[index].width }, yaxe.opposite); if (w.config.yaxis.length > 1) { // multiple yaxis yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd); } else { // just a single y axis in axis chart if (yaxe.title.text === undefined) { yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd) + 15; } else { yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd); } } if (!yaxe.opposite) { // left side y axis var offset = yAxisWidth + 5; if (w.globals.ignoreYAxisIndexes.includes(index)) { offset = 0; } if (_this.multipleYs) { xLeft = w.globals.translateX - yAxisWidth - leftDrawnYs + multipleYPadd + parseInt(w.config.yaxis[index].labels.style.fontSize) / 1.2 + yaxe.labels.offsetX; } else { xLeft = w.globals.translateX - yAxisWidth + yaxisLabelCoords[index].width + yaxe.labels.offsetX; } leftDrawnYs = leftDrawnYs + offset; w.globals.translateYAxisX[index] = xLeft; } else { // right side y axis xRight = w.globals.gridWidth + w.globals.translateX + rightDrawnYs + 30 + (w.globals.series.length - w.globals.collapsedSeries.length); w.globals.collapsedSeries.forEach(function (c) { if (c.index === index) { rightDrawnYs = rightDrawnYs - yAxisWidth; } }); rightDrawnYs = rightDrawnYs + yAxisWidth; w.globals.translateYAxisX[index] = xRight - yaxe.labels.offsetX; } // w.globals.yAxisWidths.push(yAxisWidth) }); } }]); return YAxis; }(); module.exports = YAxis; /***/ }), /* 50 */ /***/ (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 _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__(139); var _Defaults2 = _interopRequireDefault(_Defaults); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Options = __webpack_require__(51); 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 '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 'radialBar': chartDefaults = defaults.radialBar(); break; default: chartDefaults = defaults.line(); } if (opts.chart.stacked && opts.chart.stackType === '100%') { defaults.stacked100(chartDefaults); } 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 override 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: '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.plotOptions.bar.horizontal) { // No time series for horizontal bars if (config.xaxis.type === 'datetime') { throw new Error('Timelines on bars are not supported yet. Switch to column chart by setting plotOptions.bar.horizontal=false'); } // 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'); } 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 bars } if (config.chart.type === 'bar') { 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'; } if (!config.tooltip.followCursor) { console.warn('followCursor option in shared columns cannot be turned off'); config.tooltip.followCursor = true; } } } // 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; }(); module.exports = Config; /***/ }), /* 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 Options for setting the initial configuration of ApexCharts **/ var Options = function () { function Options() { _classCallCheck(this, Options); this.yAxis = { opposite: false, tickAmount: 6, max: undefined, min: undefined, decimalsInFloat: 2, floating: false, seriesName: undefined, labels: { show: true, maxWidth: 160, offsetX: 0, offsetY: 0, style: { colors: [], fontSize: '11px', fontFamily: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-yaxis-label' }, 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: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-yaxis-title' } }, tooltip: { enabled: false, offsetX: 0 }, crosshairs: { show: true, position: 'front', stroke: { color: '#b6b6b6', width: 1, dashArray: 0 } } }; this.xAxisAnnotation = { x: 0, strokeDashArray: 4, borderColor: '#c2c2c2', 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: '#777', fontSize: '11px', fontFamily: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-xaxis-annotation-label', padding: { left: 5, right: 5, top: 2, bottom: 2 } } } }; this.yAxisAnnotation = { y: 0, strokeDashArray: 4, borderColor: '#c2c2c2', 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: '#777', fontSize: '11px', fontFamily: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-yaxis-annotation-label', 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', radius: 2 }, label: { borderColor: '#c2c2c2', borderWidth: 1, text: undefined, textAnchor: 'middle', offsetX: 0, offsetY: -15, style: { background: '#fff', color: '#777', fontSize: '11px', fontFamily: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-point-annotation-label', padding: { left: 5, right: 5, top: 0, bottom: 2 } } } }; this.defaultLocaleOptions = { 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: { selectionZoom: 'Selection Zoom', zoomIn: 'Zoom In', zoomOut: 'Zoom Out', reset: 'Reset Zoom', pan: 'Panning', selection: 'Selection', download: 'Download SVG' } } }; } _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 speed: 800, animateGradually: { delay: 150, enabled: true }, dynamicAnimation: { enabled: true, speed: 350 } }, background: 'transparent', locales: [this.defaultLocaleOptions], defaultLocale: 'en', dropShadow: { enabled: false, enabledSeries: undefined, top: 2, left: 2, blur: 4, opacity: 0.35 }, events: { beforeMount: undefined, mounted: undefined, updated: undefined, clicked: undefined, selection: undefined, dataPointSelection: undefined, beforeZoom: undefined, // if defined, should return true for the zoom event to occur zoomed: undefined, scrolled: undefined }, foreColor: '#373d3f', height: 'auto', id: undefined, offsetX: 0, offsetY: 0, selection: { enabled: true, type: 'x', selectedPoints: undefined, 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 }, stacked: false, stackType: 'normal', toolbar: { show: true, tools: { download: true, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true }, autoSelected: 'zoom' // accepts -> zoom, pan, selection }, type: 'line', width: '100%', zoom: { enabled: true, type: 'x', zoomedArea: { fill: { color: '#90CAF9', opacity: 0.4 }, stroke: { color: '#0D47A1', opacity: 0.4, width: 1 } } } }, plotOptions: { bar: { horizontal: false, endingShape: 'flat', columnWidth: '70%', // should be in percent 0 - 100 barHeight: '70%', // should be in percent 0 - 100 distributed: false, colors: { ranges: [], backgroundBarColors: [], backgroundBarOpacity: 1 }, dataLabels: { position: 'top' // top, center, bottom // TODO: provide stackedLabels for stacked charts which gives additions of values } }, candlestick: { colors: { upward: '#00B746', downward: '#EF403C' } }, heatmap: { radius: 2, enableShades: true, shadeIntensity: 0.5, colorScale: { ranges: [] } }, 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, 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, opacity: 0.5 } }, dataLabels: { showOn: 'always', // hover/always name: { show: true, fontSize: '16px', fontFamily: 'Helvetica, Arial, sans-serif', color: undefined, offsetY: -10 }, value: { show: true, fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif', color: undefined, offsetY: 16, formatter: function formatter(val) { return val + '%'; } } } }, pie: { size: undefined, donut: { size: '65%', background: 'transparent' // TODO: draw labels in donut area // labels: { // showOn: 'hover', // name: { // show: false, // fontSize: '14px', // color: undefined, // offsetY: -10 // }, // value: { // show: true, // offsetY: 16, // fontSize: '12px', // color: undefined, // formatter: function (val) { // return val + '%' // } // } // } }, customScale: 0, offsetX: 0, offsetY: 0, dataLabels: { offset: 0 // offset by which labels will move outside } } }, colors: undefined, dataLabels: { enabled: true, formatter: function formatter(val) { return val; }, textAnchor: 'middle', offsetX: 0, offsetY: 0, style: { fontSize: '12px', fontFamily: 'Helvetica, Arial, sans-serif', colors: undefined }, dropShadow: { enabled: false, top: 1, left: 1, blur: 1, 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] }, image: { src: [], width: undefined, // optional height: undefined // optional }, pattern: { style: 'sqaures', // string or array of strings width: 6, height: 6, strokeWidth: 2 } }, grid: { show: true, borderColor: '#e0e0e0', strokeDashArray: 0, position: 'back', clipMarkers: true, xaxis: { lines: { show: false, animate: false } }, yaxis: { lines: { show: true, animate: true } }, 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: 10 } }, labels: [], legend: { show: 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 verticalAlign: 'middle', fontSize: '12px', fontFamily: 'Helvetica, Arial, sans-serif', textAnchor: 'start', offsetY: 0, offsetX: 0, formatter: undefined, labels: { colors: undefined, useSeriesColors: false }, markers: { size: 6, strokeWidth: 0, strokeColor: '#fff', offsetX: 0, offsetY: 0, shape: 'circle', radius: 2 }, itemMargin: { horizontal: 20, vertical: 5 }, containerMargin: { left: 10, top: 4, right: 10, bottom: 0 }, onItemClick: { toggleDataSeries: true }, onItemHover: { highlightDataSeries: true } }, markers: { discrete: [], size: 0, colors: undefined, strokeColor: '#fff', strokeWidth: 2, strokeOpacity: 0.9, fillOpacity: 1, shape: 'circle', radius: 2, offsetX: 0, offsetY: 0, hover: { size: 6 } }, noData: { text: undefined, align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: '#888', fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif' } }, 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.35 } } }, title: { text: undefined, align: 'left', margin: 10, offsetX: 0, offsetY: 0, floating: false, style: { fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif', color: '#263238' } }, subtitle: { text: undefined, align: 'left', margin: 10, offsetX: 0, offsetY: 30, floating: false, style: { fontSize: '12px', fontFamily: 'Helvetica, Arial, sans-serif', color: '#9699a2' } }, stroke: { show: true, curve: 'smooth', // "smooth" or "straight" lineCap: 'butt', // round, butt , square width: 2, colors: undefined, // array of colors dashArray: 0 // single value or array of values }, tooltip: { enabled: true, 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, onDatasetHover: { highlightDataSeries: false }, theme: 'light', 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: -100, offsetY: 0 } }, xaxis: { type: 'category', categories: [], labels: { show: true, rotate: -45, rotateAlways: false, trim: true, maxHeight: 120, style: { colors: [], fontSize: '12px', fontFamily: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-xaxis-label' }, 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', offsetX: 0, offsetY: 0, strokeWidth: 1 }, axisTicks: { show: true, color: '#78909C', height: 6, offsetX: 0, offsetY: 0 }, tickAmount: undefined, min: undefined, max: undefined, range: undefined, floating: false, position: 'bottom', title: { text: undefined, offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: '12px', fontFamily: 'Helvetica, Arial, sans-serif', cssClass: 'apexcharts-xaxis-title' } }, crosshairs: { show: true, width: 1, // tickWidth/barWidth or an integer position: 'back', opacity: 0.9, stroke: { color: '#b6b6b6', width: 0, dashArray: 0 }, 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 } }, yaxis: this.yAxis, theme: { 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; /***/ }), /* 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 _TimeScale = __webpack_require__(76); var _TimeScale2 = _interopRequireDefault(_TimeScale); 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) { return new Date(new Date(dateStr).toUTCString().substr(0, 25)).getTime(); // return new Date(new Date(dateStr).setMinutes(new Date().getTimezoneOffset())) } }, { 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; var ts = new _TimeScale2.default(this.ctx); month = ts.monthMod(month); switch (true) { case this.months30.includes(month): if (month === 2) { if (this.isLeapYear(year)) { days = 29; } else { days = 28; } } break; case this.months31.includes(month): days = 31; break; default: days = 31; break; } return days; } }]); return DateTime; }(); exports.default = DateTime; /***/ }), /* 53 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // false -> Array#indexOf // true -> Array#includes var toIObject = __webpack_require__(16); var toLength = __webpack_require__(23); var toAbsoluteIndex = __webpack_require__(108); module.exports = function (IS_INCLUDES) { return function ($this, el, fromIndex) { var O = toIObject($this); var length = toLength(O.length); var index = toAbsoluteIndex(fromIndex, length); var value; // Array#includes uses SameValueZero equality algorithm // eslint-disable-next-line no-self-compare if (IS_INCLUDES && el != el) while (length > index) { value = O[index++]; // eslint-disable-next-line no-self-compare if (value != value) return true; // Array#indexOf ignores holes, Array#includes - not } else for (; length > index; index++) { if (IS_INCLUDES || index in O) { if (O[index] === el) return IS_INCLUDES || index || 0; } }return !IS_INCLUDES && -1; }; }; /***/ }), /* 54 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var document = __webpack_require__(3).document; module.exports = document && document.documentElement; /***/ }), /* 55 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = !__webpack_require__(10) && !__webpack_require__(19)(function () { return Object.defineProperty(__webpack_require__(34)('div'), 'a', { get: function get() { return 7; } }).a != 7; }); /***/ }), /* 56 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // check on default Array iterator var Iterators = __webpack_require__(20); var ITERATOR = __webpack_require__(2)('iterator'); var ArrayProto = Array.prototype; module.exports = function (it) { return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it); }; /***/ }), /* 57 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.2.2 IsArray(argument) var cof = __webpack_require__(18); module.exports = Array.isArray || function isArray(arg) { return cof(arg) == 'Array'; }; /***/ }), /* 58 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // call something on iterator step with safe closing on error var anObject = __webpack_require__(7); module.exports = function (iterator, fn, value, entries) { try { return entries ? fn(anObject(value)[0], value[1]) : fn(value); // 7.4.6 IteratorClose(iterator, completion) } catch (e) { var ret = iterator['return']; if (ret !== undefined) anObject(ret.call(iterator)); throw e; } }; /***/ }), /* 59 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var LIBRARY = __webpack_require__(21); var $export = __webpack_require__(5); var redefine = __webpack_require__(15); var hide = __webpack_require__(12); var Iterators = __webpack_require__(20); var $iterCreate = __webpack_require__(96); var setToStringTag = __webpack_require__(28); var getPrototypeOf = __webpack_require__(103); var ITERATOR = __webpack_require__(2)('iterator'); var BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next` var FF_ITERATOR = '@@iterator'; var KEYS = 'keys'; var VALUES = 'values'; var returnThis = function returnThis() { return this; }; module.exports = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) { $iterCreate(Constructor, NAME, next); var getMethod = function getMethod(kind) { if (!BUGGY && kind in proto) return proto[kind]; switch (kind) { case KEYS: return function keys() { return new Constructor(this, kind); }; case VALUES: return function values() { return new Constructor(this, kind); }; }return function entries() { return new Constructor(this, kind); }; }; var TAG = NAME + ' Iterator'; var DEF_VALUES = DEFAULT == VALUES; var VALUES_BUG = false; var proto = Base.prototype; var $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT]; var $default = $native || getMethod(DEFAULT); var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined; var $anyNative = NAME == 'Array' ? proto.entries || $native : $native; var methods, key, IteratorPrototype; // Fix native if ($anyNative) { IteratorPrototype = getPrototypeOf($anyNative.call(new Base())); if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) { // Set @@toStringTag to native iterators setToStringTag(IteratorPrototype, TAG, true); // fix for some old engines if (!LIBRARY && typeof IteratorPrototype[ITERATOR] != 'function') hide(IteratorPrototype, ITERATOR, returnThis); } } // fix Array#{values, @@iterator}.name in V8 / FF if (DEF_VALUES && $native && $native.name !== VALUES) { VALUES_BUG = true; $default = function values() { return $native.call(this); }; } // Define iterator if ((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) { hide(proto, ITERATOR, $default); } // Plug for library Iterators[NAME] = $default; Iterators[TAG] = returnThis; if (DEFAULT) { methods = { values: DEF_VALUES ? $default : getMethod(VALUES), keys: IS_SET ? $default : getMethod(KEYS), entries: $entries }; if (FORCED) for (key in methods) { if (!(key in proto)) redefine(proto, key, methods[key]); } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods); } return methods; }; /***/ }), /* 60 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var ITERATOR = __webpack_require__(2)('iterator'); var SAFE_CLOSING = false; try { var riter = [7][ITERATOR](); riter['return'] = function () { SAFE_CLOSING = true; }; // eslint-disable-next-line no-throw-literal Array.from(riter, function () { throw 2; }); } catch (e) {/* empty */} module.exports = function (exec, skipClosing) { if (!skipClosing && !SAFE_CLOSING) return false; var safe = false; try { var arr = [7]; var iter = arr[ITERATOR](); iter.next = function () { return { done: safe = true }; }; arr[ITERATOR] = function () { return iter; }; exec(arr); } catch (e) {/* empty */} return safe; }; /***/ }), /* 61 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties]) var anObject = __webpack_require__(7); var dPs = __webpack_require__(100); var enumBugKeys = __webpack_require__(35); var IE_PROTO = __webpack_require__(39)('IE_PROTO'); var Empty = function Empty() {/* empty */}; var PROTOTYPE = 'prototype'; // Create object with fake `null` prototype: use iframe Object with cleared prototype var _createDict = function createDict() { // Thrash, waste and sodomy: IE GC bug var iframe = __webpack_require__(34)('iframe'); var i = enumBugKeys.length; var lt = '<'; var gt = '>'; var iframeDocument; iframe.style.display = 'none'; __webpack_require__(54).appendChild(iframe); iframe.src = 'javascript:'; // eslint-disable-line no-script-url // createDict = iframe.contentWindow.Object; // html.removeChild(iframe); iframeDocument = iframe.contentWindow.document; iframeDocument.open(); iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt); iframeDocument.close(); _createDict = iframeDocument.F; while (i--) { delete _createDict[PROTOTYPE][enumBugKeys[i]]; }return _createDict(); }; module.exports = Object.create || function create(O, Properties) { var result; if (O !== null) { Empty[PROTOTYPE] = anObject(O); result = new Empty(); Empty[PROTOTYPE] = null; // add "__proto__" for Object.getPrototypeOf polyfill result[IE_PROTO] = O; } else result = _createDict(); return Properties === undefined ? result : dPs(result, Properties); }; /***/ }), /* 62 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 19.1.2.7 / 15.2.3.4 Object.getOwnPropertyNames(O) var $keys = __webpack_require__(64); var hiddenKeys = __webpack_require__(35).concat('length', 'prototype'); exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) { return $keys(O, hiddenKeys); }; /***/ }), /* 63 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; exports.f = Object.getOwnPropertySymbols; /***/ }), /* 64 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var has = __webpack_require__(11); var toIObject = __webpack_require__(16); var arrayIndexOf = __webpack_require__(53)(false); var IE_PROTO = __webpack_require__(39)('IE_PROTO'); module.exports = function (object, names) { var O = toIObject(object); var i = 0; var result = []; var key; for (key in O) { if (key != IE_PROTO) has(O, key) && result.push(key); } // Don't enum bug & hidden keys while (names.length > i) { if (has(O, key = names[i++])) { ~arrayIndexOf(result, key) || result.push(key); } }return result; }; /***/ }), /* 65 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (exec) { try { return { e: false, v: exec() }; } catch (e) { return { e: true, v: e }; } }; /***/ }), /* 66 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var anObject = __webpack_require__(7); var isObject = __webpack_require__(8); var newPromiseCapability = __webpack_require__(37); module.exports = function (C, x) { anObject(C); if (isObject(x) && x.constructor === C) return x; var promiseCapability = newPromiseCapability.f(C); var resolve = promiseCapability.resolve; resolve(x); return promiseCapability.promise; }; /***/ }), /* 67 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 7.3.20 SpeciesConstructor(O, defaultConstructor) var anObject = __webpack_require__(7); var aFunction = __webpack_require__(17); var SPECIES = __webpack_require__(2)('species'); module.exports = function (O, D) { var C = anObject(O).constructor; var S; return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? D : aFunction(S); }; /***/ }), /* 68 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var ctx = __webpack_require__(14); var invoke = __webpack_require__(95); var html = __webpack_require__(54); var cel = __webpack_require__(34); var global = __webpack_require__(3); var process = global.process; var setTask = global.setImmediate; var clearTask = global.clearImmediate; var MessageChannel = global.MessageChannel; var Dispatch = global.Dispatch; var counter = 0; var queue = {}; var ONREADYSTATECHANGE = 'onreadystatechange'; var defer, channel, port; var run = function run() { var id = +this; // eslint-disable-next-line no-prototype-builtins if (queue.hasOwnProperty(id)) { var fn = queue[id]; delete queue[id]; fn(); } }; var listener = function listener(event) { run.call(event.data); }; // Node.js 0.9+ & IE10+ has setImmediate, otherwise: if (!setTask || !clearTask) { setTask = function setImmediate(fn) { var args = []; var i = 1; while (arguments.length > i) { args.push(arguments[i++]); }queue[++counter] = function () { // eslint-disable-next-line no-new-func invoke(typeof fn == 'function' ? fn : Function(fn), args); }; defer(counter); return counter; }; clearTask = function clearImmediate(id) { delete queue[id]; }; // Node.js 0.8- if (__webpack_require__(18)(process) == 'process') { defer = function defer(id) { process.nextTick(ctx(run, id, 1)); }; // Sphere (JS game engine) Dispatch API } else if (Dispatch && Dispatch.now) { defer = function defer(id) { Dispatch.now(ctx(run, id, 1)); }; // Browsers with MessageChannel, includes WebWorkers } else if (MessageChannel) { channel = new MessageChannel(); port = channel.port2; channel.port1.onmessage = listener; defer = ctx(port.postMessage, port, 1); // Browsers with postMessage, skip WebWorkers // IE8 has postMessage, but it's sync & typeof its postMessage is 'object' } else if (global.addEventListener && typeof postMessage == 'function' && !global.importScripts) { defer = function defer(id) { global.postMessage(id + '', '*'); }; global.addEventListener('message', listener, false); // IE8- } else if (ONREADYSTATECHANGE in cel('script')) { defer = function defer(id) { html.appendChild(cel('script'))[ONREADYSTATECHANGE] = function () { html.removeChild(this); run.call(id); }; }; // Rest old browsers } else { defer = function defer(id) { setTimeout(ctx(run, id, 1), 0); }; } } module.exports = { set: setTask, clear: clearTask }; /***/ }), /* 69 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; exports.f = __webpack_require__(2); /***/ }), /* 70 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var classof = __webpack_require__(32); var ITERATOR = __webpack_require__(2)('iterator'); var Iterators = __webpack_require__(20); module.exports = __webpack_require__(4).getIteratorMethod = function (it) { if (it != undefined) return it[ITERATOR] || it['@@iterator'] || Iterators[classof(it)]; }; /***/ }), /* 71 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 19.1.3.6 Object.prototype.toString() var classof = __webpack_require__(32); var test = {}; test[__webpack_require__(2)('toStringTag')] = 'z'; if (test + '' != '[object z]') { __webpack_require__(15)(Object.prototype, 'toString', function toString() { return '[object ' + classof(this) + ']'; }, true); } /***/ }), /* 72 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var $at = __webpack_require__(107)(true); // 21.1.3.27 String.prototype[@@iterator]() __webpack_require__(59)(String, 'String', function (iterated) { this._t = String(iterated); // target this._i = 0; // next index // 21.1.5.2.1 %StringIteratorPrototype%.next() }, function () { var O = this._t; var index = this._i; var point; if (index >= O.length) return { value: undefined, done: true }; point = $at(O, index); this._i += point.length; return { value: point, done: false }; }); /***/ }), /* 73 */ /***/ (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__(13); var _Fill2 = _interopRequireDefault(_Fill); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Filters = __webpack_require__(6); 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; var w = this.w; 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; if (w.config.chart.type === 'radialBar') { this.fullAngle = 360 - w.config.plotOptions.radialBar.endAngle - w.config.plotOptions.radialBar.startAngle; } else { this.fullAngle = 360; } this.size = 0; this.donutSize = 0; 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 lineColorArr = w.globals.stroke.colors !== undefined ? w.globals.stroke.colors : w.globals.colors; 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(); 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 = 1 + 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 (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(lineColorArr, sectorAngleArr, series); elSeries.attr({ 'transform': 'translate(' + translateX + ', ' + (translateY - 25) + ') 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(lineColorArr, 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', 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(elPieArc, { seriesNumber: i, size: this.size }); // additionaly, pass size for gradient drawing in the fillPath function var path = ''; if (this.dynamicAnim && w.globals.dataChanged) { path = this.getPiePath({ me: this, startAngle: prevStartAngle, angle: prevEndAngle - prevStartAngle, size: this.size }); } var elPath = graphics.drawPath({ d: path, stroke: lineColorArr instanceof Array ? lineColorArr[i] : lineColorArr, strokeWidth: this.strokeWidth, fill: pathFill, fillOpacity: w.config.fill.opacity, classes: 'apexcharts-pie-area' }); elPath.attr({ id: 'apexcharts-pieSlice-' + i, index: 0, j: i }); if (w.config.chart.dropShadow.enabled) { var shadow = w.config.chart.dropShadow; filters.dropShadow(elPath, shadow); } // append filters on mouseenter and mouseleave elPath.node.addEventListener('mouseenter', graphics.pathMouseEnter.bind(this, elPath)); elPath.node.addEventListener('mouseleave', graphics.pathMouseLeave.bind(this, elPath)); elPath.node.addEventListener('mousedown', graphics.pathMouseDown.bind(this, elPath)); elPath.node.addEventListener('touchStart', graphics.pathMouseDown.bind(this, elPath)); _Graphics2.default.setAttrs(elPath.node, { 'data:angle': angle, 'data:startAngle': startAngle, 'data:strokeWidth': this.strokeWidth, 'data:value': series[i] }); var labelPosition = void 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 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) { var formatter = w.config.dataLabels.formatter; if (formatter !== undefined) { text = formatter(w.globals.seriesPercent[i][0], { seriesIndex: i, globals: w.globals }); } 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'; } elPieArc.add(elPieLabel); } } // } } return g; } // 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, params) { var me = this; var w = this.w; var size = me.size; if (!size) { size = params.size; } var path = void 0; var opts = params; if (isNaN(fromStartAngle) || isNaN(prevAngle)) { fromStartAngle = toStartAngle; prevAngle = angle; opts.dur = 0; } var currAngle = angle; var startAngle = toStartAngle; var fromAngle = fromStartAngle - toStartAngle; 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 }); } }).during(function (pos) { currAngle = fromAngle + (angle - fromAngle) * pos; if (params.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 }); 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 + 10; var elPath = w.globals.dom.Paper.select('#apexcharts-pieSlice-' + i).members[0]; var pathFrom = elPath.attr('d'); if (elPath.attr('data:pieClicked') === 'true') { elPath.attr({ 'data:pieClicked': 'false' }); 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: '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 (endDeg > 360) endDeg = 360; 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; } }]); return Pie; }(); exports.default = Pie; /***/ }), /* 74 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(25); var _Animations2 = _interopRequireDefault(_Animations); var _Fill = __webpack_require__(13); var _Fill2 = _interopRequireDefault(_Fill); var _Filters = __webpack_require__(6); var _Filters2 = _interopRequireDefault(_Filters); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Markers = __webpack_require__(47); 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 anim = new _Animations2.default(this.ctx); var graphics = new _Graphics2.default(this.ctx); var filters = new _Filters2.default(this.ctx); var fill = new _Fill2.default(this.ctx); var realIndex = opts.realIndex; var pointsPos = opts.pointsPos; var zRatio = opts.zRatio; var elPointsMain = opts.elParent; var pathFillCircle = fill.fillPath(elSeries, { seriesNumber: realIndex }); var elPointsWrap = graphics.group({ class: 'apexcharts-series-markers apexcharts-series-' + w.config.chart.type }); if (pointsPos.x instanceof Array) { for (var q = 0; q < pointsPos.x.length; q++) { var realIndexP = j + 1; // a small hack as we have 2 points for the first val to connect it if (j === 0 && q === 0) realIndexP = 0; if (j === 0 && q === 1) realIndexP = 1; var radius = 0; var finishRadius = w.config.markers.size; if (zRatio !== Infinity) { // means we have a bubble finishRadius = w.globals.seriesZ[realIndex][realIndexP] / 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]; x = x || 0; y = y || 0; radius = radius || 0; if (x === 0 && y === 0 || typeof w.globals.series[realIndex][realIndexP] === 'undefined') return; var circle = graphics.drawCircle(radius); circle.attr({ cx: x, cy: y, fill: pathFillCircle }); if (w.config.chart.dropShadow.enabled) { filters.dropShadow(circle, { top: w.config.chart.dropShadow.top, left: w.config.chart.dropShadow.left, blur: w.config.chart.dropShadow.blur }); } 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); } 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 = w.globals.previousPaths[realIndex][j]; if (typeof prevPathJ !== 'undefined') { // 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; // if (!w.globals.risingSeries.includes(realIndex)) { // anim.animateCircle(circle, { // cx: prevX, cy: prevY, r: prevR // }, { // cx: x, cy: y, r: finishRadius // }, speed) // } // else { anim.animateCircle(circle, { cx: prevX, cy: prevY, r: prevR }, { cx: x, cy: y, r: finishRadius }, _speed); // } } else { circle.attr({ r: finishRadius }); } } circle.attr({ 'rel': realIndexP, 'j': realIndexP, 'index': realIndex }); var markers = new _Markers2.default(this.ctx); markers.setSelectedPointFilter(circle, realIndex, realIndexP); markers.addEvents(circle); circle.node.classList.add('apexcharts-marker'); elPointsWrap.add(circle); elPointsMain.add(elPointsWrap); } } } }, { key: 'centerTextInBubble', value: function centerTextInBubble(y, i, realIndexP) { var w = this.w; y = y + parseInt(w.config.dataLabels.style.fontSize) / 4; return { y: y }; } }]); return Scatter; }(); module.exports = Scatter; /***/ }), /* 75 */ /***/ (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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Filters = __webpack_require__(6); 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"); } } 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 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); } var xcrosshairs = graphics.drawRect(); xcrosshairs.attr({ class: 'apexcharts-xcrosshairs', x: 0, y: 0, 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, 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; /***/ }), /* 76 */ /***/ (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__(52); var _DateTime2 = _interopRequireDefault(_DateTime); var _Dimensions = __webpack_require__(46); var _Dimensions2 = _interopRequireDefault(_Dimensions); var _Graphics = __webpack_require__(0); 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"); } } /** * 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 currentHour = firstVal.minHour; var currentMonthDate = firstVal.minDate; var currentDate = firstVal.minDate; var currentMonth = firstVal.minMonth; var currentYear = firstVal.minYear; var params = { firstVal: firstVal, 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') { if (!shouldNotPrint) { return true; } } else { if ((value % modulo === 0 || shouldNotSkipUnit) && !shouldNotPrint) { return true; } } }); return filteredTimeScale; } }, { key: 'recalcDimensionsBasedOnFormat', value: function recalcDimensionsBasedOnFormat(filteredTimeScale) { var w = this.w; var reformattedTimescaleArray = this.formatDates(filteredTimeScale); var removedOverlappingTS = this.removeOverlappingTS(reformattedTimescaleArray); w.globals.timelineLabels = 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: this.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: this.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 = this.monthMod(currentMonth + 1); var year = currentYear + yrCounter; var _month = this.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: this.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 = this.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 yrCounter = 0; var changeMonth = function changeMonth(dateVal, month, year) { var monthdays = dt.determineDaysOfMonths(month + 1, year); if (dateVal > monthdays) { month = month + 1; date = 1; unit = 'month'; return month; } return month; }; var remainingHours = 24 - firstVal.minHour; // calculate the first tick position var firstTickPosition = remainingHours * hoursWidthOnXAxis; var firstTickValue = firstVal.minDate + 1; var date = firstTickValue; var month = changeMonth(date, currentMonth, currentYear); // push the first tick in the array this.timeScaleArray.push({ position: firstTickPosition, value: firstTickValue, unit: unit, year: currentYear, month: this.monthMod(month), day: firstTickValue }); 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 ? this.monthMod(month) : date; this.timeScaleArray.push({ position: pos, value: val, unit: unit, year: year, month: this.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; 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: this.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: this.monthMod(month) }); hour++; } } }, { key: 'generateMinuteScale', value: function generateMinuteScale(params) { var firstVal = params.firstVal, 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 = 60 - 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: this.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: this.monthMod(month) }); minute++; } } }, { 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 = 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'; // 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 graphics = new _Graphics2.default(this.ctx); var lastDrawnIndex = 0; var filteredArray = arr.map(function (item, index) { if (index > 0) { 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; } // If month counter exceeds 12, it starts again from 1 }, { key: 'monthMod', value: function monthMod(month) { return month % 12; } }]); return TimeScale; }(); exports.default = TimeScale; /***/ }), /* 77 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Exports = __webpack_require__(131); var _Exports2 = _interopRequireDefault(_Exports); var _icoPanHand = __webpack_require__(160); var _icoPanHand2 = _interopRequireDefault(_icoPanHand); var _icoZoomIn = __webpack_require__(163); var _icoZoomIn2 = _interopRequireDefault(_icoZoomIn); var _icoHome = __webpack_require__(158); var _icoHome2 = _interopRequireDefault(_icoHome); var _icoPlus = __webpack_require__(161); var _icoPlus2 = _interopRequireDefault(_icoPlus); var _icoMinus = __webpack_require__(159); var _icoMinus2 = _interopRequireDefault(_icoMinus); var _icoSelect = __webpack_require__(162); var _icoSelect2 = _interopRequireDefault(_icoSelect); var _icoCamera = __webpack_require__(157); var _icoCamera2 = _interopRequireDefault(_icoCamera); 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.elCamera = document.createElement('div'); var toolbarControls = []; if (w.config.chart.toolbar.tools.download) { toolbarControls.push({ el: this.elCamera, icon: _icoCamera2.default, title: this.localeValues.download, class: 'apexcharts-download-icon' }); } if (w.config.chart.toolbar.tools.selection) { toolbarControls.push({ el: this.elSelection, icon: _icoSelect2.default, title: this.localeValues.selection, class: 'apexcharts-selection-icon' }); } if (w.config.chart.toolbar.tools.zoomin && w.config.chart.zoom.enabled) { toolbarControls.push({ el: this.elZoomIn, icon: _icoPlus2.default, title: this.localeValues.zoomIn, class: 'apexcharts-zoom-in-icon' }); } if (w.config.chart.toolbar.tools.zoomout && w.config.chart.zoom.enabled) { toolbarControls.push({ el: this.elZoomOut, icon: _icoMinus2.default, title: this.localeValues.zoomOut, class: 'apexcharts-zoom-out-icon' }); } if (w.config.chart.toolbar.tools.zoom && w.config.chart.zoom.enabled) { toolbarControls.push({ el: this.elZoom, icon: _icoZoomIn2.default, title: this.localeValues.selectionZoom, class: 'apexcharts-zoom-icon' }); } if (w.config.chart.toolbar.tools.pan && w.config.chart.zoom.enabled) { toolbarControls.push({ el: this.elPan, icon: _icoPanHand2.default, title: this.localeValues.pan, class: 'apexcharts-pan-icon' }); } if (w.config.chart.toolbar.tools.reset) { toolbarControls.push({ el: this.elZoomReset, icon: _icoHome2.default, title: this.localeValues.reset, class: 'apexcharts-reset-zoom-icon' }); } for (var i = 0; i < toolbarControls.length; i++) { _Graphics2.default.setAttrs(toolbarControls[i].el, { class: toolbarControls[i].class, title: toolbarControls[i].title }); toolbarControls[i].el.innerHTML = toolbarControls[i].icon; elToolbarWrap.appendChild(toolbarControls[i].el); } 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() { 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.elCamera.addEventListener('click', this.downloadSVG.bind(this)); } }, { 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; this.elZoom.classList.add('selected'); this.elPan.classList.remove('selected'); } }, { key: 'enablePanning', value: function enablePanning() { this.toggleOtherControls(); this.w.globals.panEnabled = true; this.elPan.classList.add('selected'); 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(); this.elPan.classList.remove('selected'); this.elSelection.classList.remove('selected'); 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 !== null) { xaxis = beforeZoomRange.xaxis; } this.ctx.updateOptionsInternal({ xaxis: xaxis }, false, true); this.zoomCallback({ min: newMinX, max: newMaxX }); } }, { 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: 'downloadSVG', value: function downloadSVG() { var downloadSVG = new _Exports2.default(this.ctx); downloadSVG.exportToSVG(); } }, { key: 'handleZoomReset', value: function handleZoomReset(e) { 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(); w.globals.zoomed = false; ch.updateSeriesInternal(w.globals.initialSeries, true); } }); } }, { 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.elCamera.removeEventListener('click', this.downloadSVG.bind(this)); } this.elZoom = null; this.elZoomIn = null; this.elZoomOut = null; this.elPan = null; this.elSelection = null; this.elZoomReset = null; this.elCamera = null; } }]); return Toolbar; }(); module.exports = Toolbar; /***/ }), /* 78 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Series = __webpack_require__(26); 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; } if (x < 0) { x = 0; } } else { if (j !== null) { x = x + w.globals.gridWidth / tickAmount / 2; } } if (xcrosshairs !== null) { xcrosshairs.setAttribute('x', x); 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; 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 ycrosshairsHiddenRect = parseInt(ttCtx.ycrosshairsHidden.getAttribute('y1')); var cy = w.globals.translateY + ycrosshairsHiddenRect; 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.includes(index)) { 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 - seriesBound.top - tooltipRect.ttHeight / 2; } if (tooltipRect.ttHeight + y > w.globals.gridHeight) { y = w.globals.gridHeight - tooltipRect.ttHeight / 2 - pointR; } if (!isNaN(x)) { x = x + w.globals.translateX; tooltipEl.style.left = x + 'px'; tooltipEl.style.top = y + 'px'; } } }, { key: 'moveMarkers', value: function moveMarkers(i, j) { var w = this.w; var ttCtx = this.ttCtx; if (w.config.markers.size > 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; 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'); 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 (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 + '\']'); var bcx = jBar ? parseFloat(jBar.getAttribute('cx')) : 0; var bcy = 0; var bw = jBar ? parseFloat(jBar.getAttribute('barWidth')) : 0; if (w.globals.dataXY) { 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; }(); module.exports = Position; /***/ }), /* 79 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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 _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 Tooltip.Utils Class to support Tooltip functionality. * * @module Tooltip.Utils **/ 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} * - context = chart's context * - hoverArea = the rect on which user hovers * - elGrid = dimensions of the hover rect (it can be different than hoverarea) * - lineSeriesWidth = Whatever series the user hovered on, get the width of it * @return {object} * - capturedSeries = i * - j is the inner index of the capturedSeries */ _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.dataXY) { 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 firstActiveSeriesIndex = Xarrays.map(function (xarr, index) { if (xarr.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: '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: 'isSeriesSameLen', value: function isSeriesSameLen() { var sameLen = true; var filteredSerX = this.filteredSeriesX(); for (var i = 0; i < filteredSerX.length - 1; i++) { if (filteredSerX[i][0] !== filteredSerX[i + 1][0]) { sameLen = false; break; } } return sameLen; } }, { 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; } }, { 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; }(); module.exports = Utils; /***/ }), /* 80 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(110); module.exports = __webpack_require__(4).Array.find; /***/ }), /* 81 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(72); __webpack_require__(111); module.exports = __webpack_require__(4).Array.from; /***/ }), /* 82 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(116); module.exports = __webpack_require__(4).Array.includes; /***/ }), /* 83 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(113); module.exports = __webpack_require__(4).Array.reduce; /***/ }), /* 84 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(71); __webpack_require__(72); __webpack_require__(121); __webpack_require__(114); __webpack_require__(117); __webpack_require__(118); module.exports = __webpack_require__(4).Promise; /***/ }), /* 85 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(115); __webpack_require__(71); __webpack_require__(119); __webpack_require__(120); module.exports = __webpack_require__(4).Symbol; /***/ }), /* 86 */ /***/ (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 _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__(128); var _Annotations2 = _interopRequireDefault(_Annotations); var _Animations = __webpack_require__(25); var _Animations2 = _interopRequireDefault(_Animations); var _Base = __webpack_require__(129); var _Base2 = _interopRequireDefault(_Base); var _Config = __webpack_require__(50); var _Config2 = _interopRequireDefault(_Config); var _Core = __webpack_require__(130); var _Core2 = _interopRequireDefault(_Core); var _Crosshairs = __webpack_require__(75); var _Crosshairs2 = _interopRequireDefault(_Crosshairs); var _Dimensions = __webpack_require__(46); var _Dimensions2 = _interopRequireDefault(_Dimensions); var _Formatters = __webpack_require__(30); var _Formatters2 = _interopRequireDefault(_Formatters); var _Legend = __webpack_require__(132); var _Legend2 = _interopRequireDefault(_Legend); var _Responsive = __webpack_require__(134); var _Responsive2 = _interopRequireDefault(_Responsive); var _Series = __webpack_require__(26); var _Series2 = _interopRequireDefault(_Series); var _Theme = __webpack_require__(135); var _Theme2 = _interopRequireDefault(_Theme); var _Tooltip = __webpack_require__(145); var _Tooltip2 = _interopRequireDefault(_Tooltip); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _ZoomPanSelection = __webpack_require__(137); var _ZoomPanSelection2 = _interopRequireDefault(_ZoomPanSelection); var _TitleSubtitle = __webpack_require__(136); var _TitleSubtitle2 = _interopRequireDefault(_TitleSubtitle); var _Toolbar = __webpack_require__(77); var _Toolbar2 = _interopRequireDefault(_Toolbar); var _Options = __webpack_require__(51); 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"); } } __webpack_require__(149); __webpack_require__(148); __webpack_require__(150); __webpack_require__(147); __webpack_require__(152); __webpack_require__(151); __webpack_require__(155); __webpack_require__(153); // 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.responsiveConfigOverrided = false; 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 Promise(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); var graphData = _this.create(_this.w.config.series); if (!graphData) return resolve(_this); _this.mount(graphData).then(function () { _this.animations.showDelayedElements(); 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.ctx); this.annotations = new _Annotations2.default(this.ctx); this.core = new _Core2.default(this.el, this); this.crosshairs = new _Crosshairs2.default(this.ctx); this.options = new _Options2.default(); this.responsive = new _Responsive2.default(this.ctx); this.series = new _Series2.default(this.ctx); this.theme = new _Theme2.default(this.ctx); this.formatters = new _Formatters2.default(this.ctx); this.titleSubtitle = new _TitleSubtitle2.default(this.ctx); this.legend = new _Legend2.default(this.ctx); this.dimensions = new _Dimensions2.default(this.ctx); this.toolbar = new _Toolbar2.default(this.ctx); this.zoomPanSelection = new _ZoomPanSelection2.default(this.ctx); this.w.globals.tooltip = new _Tooltip2.default(this.ctx); } }, { 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) { var w = this.w; this.initModules(); var gl = this.w.globals; gl.noData = false; if (!this.responsiveConfigOverrided) { this.responsive.checkResponsiveConfig(); } if (this.el === null) { return null; } this.core.setupElements(); if (ser.length === 0 || ser.length === 1 && ser[0].data && ser[0].data.length === 0) { this.series.handleNoData(); } this.setupEventHandlers(); this.core.parseData(ser); // this is a good time to set theme colors first this.theme.init(); // 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(); // 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(); // 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.core.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 Promise(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.core.drawAxis(w.config.chart.type, graphData.xyRatios); if (w.config.grid.position === 'back') { me.core.drawGrid(); } if (w.config.annotations.position === 'back') { me.annotations.drawAnnotations(); } me.animations.showDelayedElements(); 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.core.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.dataXY) { if (w.config.chart.zoom.enabled || w.config.chart.selection.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) { var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = w.globals.memory.methodsToExec[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var fn = _step.value; fn.method(fn.params, false, fn.context); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } } resolve(me); }); } /** * 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; if (options.series) { // user updated the series via updateOptions() function. // Hence, we need to reset axis min/max to avoid zooming issues this.revertDefaultAxisMinMax(); } return this.updateOptionsInternal(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: 'updateOptionsInternal', value: function updateOptionsInternal(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; ch.w.config.chart.animations.dynamicAnimation.enabled = animate; if (!redraw) { w.globals.resized = true; ch.w.globals.dataChanged = true; if (animate && ch.w.globals.initialConfig.chart.animations.dynamicAnimation.enabled) { ch.series.getPreviousPaths(); } } if (options && (typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') { ch.responsive.checkResponsiveConfig(); ch.responsiveConfigOverrided = true; ch.config = new _Config2.default(options); if (options.yaxis) { options = ch.config.extendYAxis(options); } if (options.annotations) { if (options.annotations.yaxis) { options = ch.config.extendYAxisAnnotations(options); } if (options.annotations.xaxis) { options = ch.config.extendXAxisAnnotations(options); } if (options.annotations.points) { options = ch.config.extendPointAnnotations(options); } } w.config = _Utils2.default.extend(w.config, options); if (overwriteInitialConfig) { w.globals.initialConfig = _Utils2.default.extend({}, w.config); w.globals.initialSeries = JSON.parse(JSON.stringify(w.config.series)); } } return ch.update(); }); } /** * 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.updateSeriesInternal(newSeries, animate, overwriteInitialSeries); } /** * Private method to update Series. * * @param {array} series - New series which will override the existing */ }, { key: 'updateSeriesInternal', value: function updateSeriesInternal(newSeries, animate) { var overwriteInitialSeries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; var w = this.w; this.w.config.chart.animations.dynamicAnimation.enabled = animate; w.globals.dataChanged = true; if (animate) { this.series.getPreviousPaths(); } w.config.series = newSeries.slice(); if (overwriteInitialSeries) { 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 : null; }); } /** * 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() { var _this3 = this; var me = this; return new Promise(function (resolve, reject) { me.clear(); var graphData = me.create(me.w.config.series); if (!graphData) return resolve(me); me.mount(graphData).then(function () { if (typeof me.w.config.chart.events.updated === 'function') { me.w.config.chart.events.updated(me, me.w); } me.fireEvent('updated', [_this3, _this3.w]); me.w.globals.isDirty = true; resolve(me); }).catch(function (e) { reject(e); }); }); } /** * 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() { this.zoomPanSelection.destroy(); this.toolbar.destroy(); this.animations = null; this.annotations = null; this.core = 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: '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); } } domEls.Paper.remove(); domEls.elWrap = null; domEls.elGraphical = null; domEls.elLegendWrap = null; domEls.baseEl = null; domEls.elGridRect = null; domEls.elGridRectMask = 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(); window.removeEventListener('resize', this.windowResizeHandler); } /** * 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: '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']; var _iteratorNormalCompletion2 = true; var _didIteratorError2 = false; var _iteratorError2 = undefined; try { for (var _iterator2 = eventList[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { var event = _step2.value; 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]); } }, false); } } catch (err) { _didIteratorError2 = true; _iteratorError2 = err; } finally { try { if (!_iteratorNormalCompletion2 && _iterator2.return) { _iterator2.return(); } } finally { if (_didIteratorError2) { throw _iteratorError2; } } } } }, { 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); } // 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 paper = this.paper(); var el = paper.select('.apexcharts-inner'); return el; } }, { key: 'getSeriesTotalXRange', value: function getSeriesTotalXRange(minX, maxX) { return this.core.getSeriesTotalsXRange(minX, maxX); } }, { 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.find(function (c) { return c.name === localeName; }); if (selectedLocale) { // create a complete locale object by extending defaults so you don't get undefined errors. var ret = _Utils2.default.extend(this.options.defaultLocaleOptions, 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: 'paper', value: function paper() { return this.w.globals.dom.Paper; } }, { key: 'windowResize', /** * Handle window resize and re-draw the whole chart. */ 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 same arguments of the fn which are used directly even when calling the methods on class instance */ }, { key: 'exec', value: function exec(chartID, fn, opts) { var chart = this.getChartByID(chartID); if (!chart) return; switch (fn) { case 'updateOptions': { return chart.updateOptions(opts); } case 'updateSeries': { return chart.updateSeries(opts); } case 'appendData': { return chart.appendData(opts); } case 'addXaxisAnnotation': { return chart.addXaxisAnnotation(opts); } case 'addYaxisAnnotation': { return chart.addYaxisAnnotation(opts); } case 'addPointAnnotation': { return chart.addPointAnnotation(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.find(function (ch) { return ch.id === chartID; }); return c.chart; } }]); return ApexCharts; }(); module.exports = ApexCharts; /***/ }), /* 87 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (it, Constructor, name, forbiddenField) { if (!(it instanceof Constructor) || forbiddenField !== undefined && forbiddenField in it) { throw TypeError(name + ': incorrect invocation!'); }return it; }; /***/ }), /* 88 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 0 -> Array#forEach // 1 -> Array#map // 2 -> Array#filter // 3 -> Array#some // 4 -> Array#every // 5 -> Array#find // 6 -> Array#findIndex var ctx = __webpack_require__(14); var IObject = __webpack_require__(36); var toObject = __webpack_require__(29); var toLength = __webpack_require__(23); var asc = __webpack_require__(91); module.exports = function (TYPE, $create) { var IS_MAP = TYPE == 1; var IS_FILTER = TYPE == 2; var IS_SOME = TYPE == 3; var IS_EVERY = TYPE == 4; var IS_FIND_INDEX = TYPE == 6; var NO_HOLES = TYPE == 5 || IS_FIND_INDEX; var create = $create || asc; return function ($this, callbackfn, that) { var O = toObject($this); var self = IObject(O); var f = ctx(callbackfn, that, 3); var length = toLength(self.length); var index = 0; var result = IS_MAP ? create($this, length) : IS_FILTER ? create($this, 0) : undefined; var val, res; for (; length > index; index++) { if (NO_HOLES || index in self) { val = self[index]; res = f(val, index, O); if (TYPE) { if (IS_MAP) result[index] = res; // map else if (res) switch (TYPE) { case 3: return true; // some case 5: return val; // find case 6: return index; // findIndex case 2: result.push(val); // filter } else if (IS_EVERY) return false; // every } } }return IS_FIND_INDEX ? -1 : IS_SOME || IS_EVERY ? IS_EVERY : result; }; }; /***/ }), /* 89 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var aFunction = __webpack_require__(17); var toObject = __webpack_require__(29); var IObject = __webpack_require__(36); var toLength = __webpack_require__(23); module.exports = function (that, callbackfn, aLen, memo, isRight) { aFunction(callbackfn); var O = toObject(that); var self = IObject(O); var length = toLength(O.length); var index = isRight ? length - 1 : 0; var i = isRight ? -1 : 1; if (aLen < 2) for (;;) { if (index in self) { memo = self[index]; index += i; break; } index += i; if (isRight ? index < 0 : length <= index) { throw TypeError('Reduce of empty array with no initial value'); } } for (; isRight ? index >= 0 : length > index; index += i) { if (index in self) { memo = callbackfn(memo, self[index], index, O); } }return memo; }; /***/ }), /* 90 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var isObject = __webpack_require__(8); var isArray = __webpack_require__(57); var SPECIES = __webpack_require__(2)('species'); module.exports = function (original) { var C; if (isArray(original)) { C = original.constructor; // cross-realm fallback if (typeof C == 'function' && (C === Array || isArray(C.prototype))) C = undefined; if (isObject(C)) { C = C[SPECIES]; if (C === null) C = undefined; } }return C === undefined ? Array : C; }; /***/ }), /* 91 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 9.4.2.3 ArraySpeciesCreate(originalArray, length) var speciesConstructor = __webpack_require__(90); module.exports = function (original, length) { return new (speciesConstructor(original))(length); }; /***/ }), /* 92 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var $defineProperty = __webpack_require__(9); var createDesc = __webpack_require__(22); module.exports = function (object, index, value) { if (index in object) $defineProperty.f(object, index, createDesc(0, value));else object[index] = value; }; /***/ }), /* 93 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // all enumerable object keys, includes symbols var getKeys = __webpack_require__(27); var gOPS = __webpack_require__(63); var pIE = __webpack_require__(38); module.exports = function (it) { var result = getKeys(it); var getSymbols = gOPS.f; if (getSymbols) { var symbols = getSymbols(it); var isEnum = pIE.f; var i = 0; var key; while (symbols.length > i) { if (isEnum.call(it, key = symbols[i++])) result.push(key); } }return result; }; /***/ }), /* 94 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var ctx = __webpack_require__(14); var call = __webpack_require__(58); var isArrayIter = __webpack_require__(56); var anObject = __webpack_require__(7); var toLength = __webpack_require__(23); var getIterFn = __webpack_require__(70); var BREAK = {}; var RETURN = {}; var _exports = module.exports = function (iterable, entries, fn, that, ITERATOR) { var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable); var f = ctx(fn, that, entries ? 2 : 1); var index = 0; var length, step, iterator, result; if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!'); // fast case for arrays with default iterator if (isArrayIter(iterFn)) for (length = toLength(iterable.length); length > index; index++) { result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]); if (result === BREAK || result === RETURN) return result; } else for (iterator = iterFn.call(iterable); !(step = iterator.next()).done;) { result = call(iterator, f, step.value, entries); if (result === BREAK || result === RETURN) return result; } }; _exports.BREAK = BREAK; _exports.RETURN = RETURN; /***/ }), /* 95 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // fast apply, http://jsperf.lnkit.com/fast-apply/5 module.exports = function (fn, args, that) { var un = that === undefined; switch (args.length) { case 0: return un ? fn() : fn.call(that); case 1: return un ? fn(args[0]) : fn.call(that, args[0]); case 2: return un ? fn(args[0], args[1]) : fn.call(that, args[0], args[1]); case 3: return un ? fn(args[0], args[1], args[2]) : fn.call(that, args[0], args[1], args[2]); case 4: return un ? fn(args[0], args[1], args[2], args[3]) : fn.call(that, args[0], args[1], args[2], args[3]); }return fn.apply(that, args); }; /***/ }), /* 96 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var create = __webpack_require__(61); var descriptor = __webpack_require__(22); var setToStringTag = __webpack_require__(28); var IteratorPrototype = {}; // 25.1.2.1.1 %IteratorPrototype%[@@iterator]() __webpack_require__(12)(IteratorPrototype, __webpack_require__(2)('iterator'), function () { return this; }); module.exports = function (Constructor, NAME, next) { Constructor.prototype = create(IteratorPrototype, { next: descriptor(1, next) }); setToStringTag(Constructor, NAME + ' Iterator'); }; /***/ }), /* 97 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (done, value) { return { value: value, done: !!done }; }; /***/ }), /* 98 */ /***/ (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 META = __webpack_require__(24)('meta'); var isObject = __webpack_require__(8); var has = __webpack_require__(11); var setDesc = __webpack_require__(9).f; var id = 0; var isExtensible = Object.isExtensible || function () { return true; }; var FREEZE = !__webpack_require__(19)(function () { return isExtensible(Object.preventExtensions({})); }); var setMeta = function setMeta(it) { setDesc(it, META, { value: { i: 'O' + ++id, // object ID w: {} // weak collections IDs } }); }; var fastKey = function fastKey(it, create) { // return primitive with prefix if (!isObject(it)) return (typeof it === 'undefined' ? 'undefined' : _typeof(it)) == 'symbol' ? it : (typeof it == 'string' ? 'S' : 'P') + it; if (!has(it, META)) { // can't set metadata to uncaught frozen object if (!isExtensible(it)) return 'F'; // not necessary to add metadata if (!create) return 'E'; // add missing metadata setMeta(it); // return object ID }return it[META].i; }; var getWeak = function getWeak(it, create) { if (!has(it, META)) { // can't set metadata to uncaught frozen object if (!isExtensible(it)) return true; // not necessary to add metadata if (!create) return false; // add missing metadata setMeta(it); // return hash weak collections IDs }return it[META].w; }; // add metadata on freeze-family methods calling var onFreeze = function onFreeze(it) { if (FREEZE && meta.NEED && isExtensible(it) && !has(it, META)) setMeta(it); return it; }; var meta = module.exports = { KEY: META, NEED: false, fastKey: fastKey, getWeak: getWeak, onFreeze: onFreeze }; /***/ }), /* 99 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var global = __webpack_require__(3); var macrotask = __webpack_require__(68).set; var Observer = global.MutationObserver || global.WebKitMutationObserver; var process = global.process; var Promise = global.Promise; var isNode = __webpack_require__(18)(process) == 'process'; module.exports = function () { var head, last, notify; var flush = function flush() { var parent, fn; if (isNode && (parent = process.domain)) parent.exit(); while (head) { fn = head.fn; head = head.next; try { fn(); } catch (e) { if (head) notify();else last = undefined; throw e; } }last = undefined; if (parent) parent.enter(); }; // Node.js if (isNode) { notify = function notify() { process.nextTick(flush); }; // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339 } else if (Observer && !(global.navigator && global.navigator.standalone)) { var toggle = true; var node = document.createTextNode(''); new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new notify = function notify() { node.data = toggle = !toggle; }; // environments with maybe non-completely correct, but existent Promise } else if (Promise && Promise.resolve) { // Promise.resolve without an argument throws an error in LG WebOS 2 var promise = Promise.resolve(undefined); notify = function notify() { promise.then(flush); }; // for other environments - macrotask based on: // - setImmediate // - MessageChannel // - window.postMessag // - onreadystatechange // - setTimeout } else { notify = function notify() { // strange IE + webpack dev server bug - use .call(global) macrotask.call(global, flush); }; } return function (fn) { var task = { fn: fn, next: undefined }; if (last) last.next = task; if (!head) { head = task; notify(); }last = task; }; }; /***/ }), /* 100 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var dP = __webpack_require__(9); var anObject = __webpack_require__(7); var getKeys = __webpack_require__(27); module.exports = __webpack_require__(10) ? Object.defineProperties : function defineProperties(O, Properties) { anObject(O); var keys = getKeys(Properties); var length = keys.length; var i = 0; var P; while (length > i) { dP.f(O, P = keys[i++], Properties[P]); }return O; }; /***/ }), /* 101 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var pIE = __webpack_require__(38); var createDesc = __webpack_require__(22); var toIObject = __webpack_require__(16); var toPrimitive = __webpack_require__(42); var has = __webpack_require__(11); var IE8_DOM_DEFINE = __webpack_require__(55); var gOPD = Object.getOwnPropertyDescriptor; exports.f = __webpack_require__(10) ? gOPD : function getOwnPropertyDescriptor(O, P) { O = toIObject(O); P = toPrimitive(P, true); if (IE8_DOM_DEFINE) try { return gOPD(O, P); } catch (e) {/* empty */} if (has(O, P)) return createDesc(!pIE.f.call(O, P), O[P]); }; /***/ }), /* 102 */ /***/ (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; }; // fallback for IE11 buggy Object.getOwnPropertyNames with iframe and window var toIObject = __webpack_require__(16); var gOPN = __webpack_require__(62).f; var toString = {}.toString; var windowNames = (typeof window === 'undefined' ? 'undefined' : _typeof(window)) == 'object' && window && Object.getOwnPropertyNames ? Object.getOwnPropertyNames(window) : []; var getWindowNames = function getWindowNames(it) { try { return gOPN(it); } catch (e) { return windowNames.slice(); } }; module.exports.f = function getOwnPropertyNames(it) { return windowNames && toString.call(it) == '[object Window]' ? getWindowNames(it) : gOPN(toIObject(it)); }; /***/ }), /* 103 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O) var has = __webpack_require__(11); var toObject = __webpack_require__(29); var IE_PROTO = __webpack_require__(39)('IE_PROTO'); var ObjectProto = Object.prototype; module.exports = Object.getPrototypeOf || function (O) { O = toObject(O); if (has(O, IE_PROTO)) return O[IE_PROTO]; if (typeof O.constructor == 'function' && O instanceof O.constructor) { return O.constructor.prototype; }return O instanceof Object ? ObjectProto : null; }; /***/ }), /* 104 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var redefine = __webpack_require__(15); module.exports = function (target, src, safe) { for (var key in src) { redefine(target, key, src[key], safe); }return target; }; /***/ }), /* 105 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var global = __webpack_require__(3); var dP = __webpack_require__(9); var DESCRIPTORS = __webpack_require__(10); var SPECIES = __webpack_require__(2)('species'); module.exports = function (KEY) { var C = global[KEY]; if (DESCRIPTORS && C && !C[SPECIES]) dP.f(C, SPECIES, { configurable: true, get: function get() { return this; } }); }; /***/ }), /* 106 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var fails = __webpack_require__(19); module.exports = function (method, arg) { return !!method && fails(function () { // eslint-disable-next-line no-useless-call arg ? method.call(null, function () {/* empty */}, 1) : method.call(null); }); }; /***/ }), /* 107 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var toInteger = __webpack_require__(41); var defined = __webpack_require__(33); // true -> String#at // false -> String#codePointAt module.exports = function (TO_STRING) { return function (that, pos) { var s = String(defined(that)); var i = toInteger(pos); var l = s.length; var a, b; if (i < 0 || i >= l) return TO_STRING ? '' : undefined; a = s.charCodeAt(i); return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff ? TO_STRING ? s.charAt(i) : a : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000; }; }; /***/ }), /* 108 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var toInteger = __webpack_require__(41); var max = Math.max; var min = Math.min; module.exports = function (index, length) { index = toInteger(index); return index < 0 ? max(index + length, 0) : min(index, length); }; /***/ }), /* 109 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var global = __webpack_require__(3); var navigator = global.navigator; module.exports = navigator && navigator.userAgent || ''; /***/ }), /* 110 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // 22.1.3.8 Array.prototype.find(predicate, thisArg = undefined) var $export = __webpack_require__(5); var $find = __webpack_require__(88)(5); var KEY = 'find'; var forced = true; // Shouldn't skip holes if (KEY in []) Array(1)[KEY](function () { forced = false; }); $export($export.P + $export.F * forced, 'Array', { find: function find(callbackfn /* , that = undefined */) { return $find(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined); } }); __webpack_require__(31)(KEY); /***/ }), /* 111 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var ctx = __webpack_require__(14); var $export = __webpack_require__(5); var toObject = __webpack_require__(29); var call = __webpack_require__(58); var isArrayIter = __webpack_require__(56); var toLength = __webpack_require__(23); var createProperty = __webpack_require__(92); var getIterFn = __webpack_require__(70); $export($export.S + $export.F * !__webpack_require__(60)(function (iter) { Array.from(iter); }), 'Array', { // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) from: function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { var O = toObject(arrayLike); var C = typeof this == 'function' ? this : Array; var aLen = arguments.length; var mapfn = aLen > 1 ? arguments[1] : undefined; var mapping = mapfn !== undefined; var index = 0; var iterFn = getIterFn(O); var length, result, step, iterator; if (mapping) mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); // if object isn't iterable or it's array with default iterator - use simple case if (iterFn != undefined && !(C == Array && isArrayIter(iterFn))) { for (iterator = iterFn.call(O), result = new C(); !(step = iterator.next()).done; index++) { createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); } } else { length = toLength(O.length); for (result = new C(length); length > index; index++) { createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); } } result.length = index; return result; } }); /***/ }), /* 112 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var addToUnscopables = __webpack_require__(31); var step = __webpack_require__(97); var Iterators = __webpack_require__(20); var toIObject = __webpack_require__(16); // 22.1.3.4 Array.prototype.entries() // 22.1.3.13 Array.prototype.keys() // 22.1.3.29 Array.prototype.values() // 22.1.3.30 Array.prototype[@@iterator]() module.exports = __webpack_require__(59)(Array, 'Array', function (iterated, kind) { this._t = toIObject(iterated); // target this._i = 0; // next index this._k = kind; // kind // 22.1.5.2.1 %ArrayIteratorPrototype%.next() }, function () { var O = this._t; var kind = this._k; var index = this._i++; if (!O || index >= O.length) { this._t = undefined; return step(1); } if (kind == 'keys') return step(0, index); if (kind == 'values') return step(0, O[index]); return step(0, [index, O[index]]); }, 'values'); // argumentsList[@@iterator] is %ArrayProto_values% (9.4.4.6, 9.4.4.7) Iterators.Arguments = Iterators.Array; addToUnscopables('keys'); addToUnscopables('values'); addToUnscopables('entries'); /***/ }), /* 113 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var $export = __webpack_require__(5); var $reduce = __webpack_require__(89); $export($export.P + $export.F * !__webpack_require__(106)([].reduce, true), 'Array', { // 22.1.3.18 / 15.4.4.21 Array.prototype.reduce(callbackfn [, initialValue]) reduce: function reduce(callbackfn /* , initialValue */) { return $reduce(this, callbackfn, arguments.length, arguments[1], false); } }); /***/ }), /* 114 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var LIBRARY = __webpack_require__(21); var global = __webpack_require__(3); var ctx = __webpack_require__(14); var classof = __webpack_require__(32); var $export = __webpack_require__(5); var isObject = __webpack_require__(8); var aFunction = __webpack_require__(17); var anInstance = __webpack_require__(87); var forOf = __webpack_require__(94); var speciesConstructor = __webpack_require__(67); var task = __webpack_require__(68).set; var microtask = __webpack_require__(99)(); var newPromiseCapabilityModule = __webpack_require__(37); var perform = __webpack_require__(65); var userAgent = __webpack_require__(109); var promiseResolve = __webpack_require__(66); var PROMISE = 'Promise'; var TypeError = global.TypeError; var process = global.process; var versions = process && process.versions; var v8 = versions && versions.v8 || ''; var $Promise = global[PROMISE]; var isNode = classof(process) == 'process'; var empty = function empty() {/* empty */}; var Internal, newGenericPromiseCapability, OwnPromiseCapability, Wrapper; var newPromiseCapability = newGenericPromiseCapability = newPromiseCapabilityModule.f; var USE_NATIVE = !!function () { try { // correct subclassing with @@species support var promise = $Promise.resolve(1); var FakePromise = (promise.constructor = {})[__webpack_require__(2)('species')] = function (exec) { exec(empty, empty); }; // unhandled rejections tracking support, NodeJS Promise without it fails @@species test return (isNode || typeof PromiseRejectionEvent == 'function') && promise.then(empty) instanceof FakePromise // v8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables // https://bugs.chromium.org/p/chromium/issues/detail?id=830565 // we can't detect it synchronously, so just check versions && v8.indexOf('6.6') !== 0 && userAgent.indexOf('Chrome/66') === -1; } catch (e) {/* empty */} }(); // helpers var isThenable = function isThenable(it) { var then; return isObject(it) && typeof (then = it.then) == 'function' ? then : false; }; var notify = function notify(promise, isReject) { if (promise._n) return; promise._n = true; var chain = promise._c; microtask(function () { var value = promise._v; var ok = promise._s == 1; var i = 0; var run = function run(reaction) { var handler = ok ? reaction.ok : reaction.fail; var resolve = reaction.resolve; var reject = reaction.reject; var domain = reaction.domain; var result, then, exited; try { if (handler) { if (!ok) { if (promise._h == 2) onHandleUnhandled(promise); promise._h = 1; } if (handler === true) result = value;else { if (domain) domain.enter(); result = handler(value); // may throw if (domain) { domain.exit(); exited = true; } } if (result === reaction.promise) { reject(TypeError('Promise-chain cycle')); } else if (then = isThenable(result)) { then.call(result, resolve, reject); } else resolve(result); } else reject(value); } catch (e) { if (domain && !exited) domain.exit(); reject(e); } }; while (chain.length > i) { run(chain[i++]); } // variable length - can't use forEach promise._c = []; promise._n = false; if (isReject && !promise._h) onUnhandled(promise); }); }; var onUnhandled = function onUnhandled(promise) { task.call(global, function () { var value = promise._v; var unhandled = isUnhandled(promise); var result, handler, console; if (unhandled) { result = perform(function () { if (isNode) { process.emit('unhandledRejection', value, promise); } else if (handler = global.onunhandledrejection) { handler({ promise: promise, reason: value }); } else if ((console = global.console) && console.error) { console.error('Unhandled promise rejection', value); } }); // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should promise._h = isNode || isUnhandled(promise) ? 2 : 1; }promise._a = undefined; if (unhandled && result.e) throw result.v; }); }; var isUnhandled = function isUnhandled(promise) { return promise._h !== 1 && (promise._a || promise._c).length === 0; }; var onHandleUnhandled = function onHandleUnhandled(promise) { task.call(global, function () { var handler; if (isNode) { process.emit('rejectionHandled', promise); } else if (handler = global.onrejectionhandled) { handler({ promise: promise, reason: promise._v }); } }); }; var $reject = function $reject(value) { var promise = this; if (promise._d) return; promise._d = true; promise = promise._w || promise; // unwrap promise._v = value; promise._s = 2; if (!promise._a) promise._a = promise._c.slice(); notify(promise, true); }; var $resolve = function $resolve(value) { var promise = this; var then; if (promise._d) return; promise._d = true; promise = promise._w || promise; // unwrap try { if (promise === value) throw TypeError("Promise can't be resolved itself"); if (then = isThenable(value)) { microtask(function () { var wrapper = { _w: promise, _d: false }; // wrap try { then.call(value, ctx($resolve, wrapper, 1), ctx($reject, wrapper, 1)); } catch (e) { $reject.call(wrapper, e); } }); } else { promise._v = value; promise._s = 1; notify(promise, false); } } catch (e) { $reject.call({ _w: promise, _d: false }, e); // wrap } }; // constructor polyfill if (!USE_NATIVE) { // 25.4.3.1 Promise(executor) $Promise = function Promise(executor) { anInstance(this, $Promise, PROMISE, '_h'); aFunction(executor); Internal.call(this); try { executor(ctx($resolve, this, 1), ctx($reject, this, 1)); } catch (err) { $reject.call(this, err); } }; // eslint-disable-next-line no-unused-vars Internal = function Promise(executor) { this._c = []; // <- awaiting reactions this._a = undefined; // <- checked in isUnhandled reactions this._s = 0; // <- state this._d = false; // <- done this._v = undefined; // <- value this._h = 0; // <- rejection state, 0 - default, 1 - handled, 2 - unhandled this._n = false; // <- notify }; Internal.prototype = __webpack_require__(104)($Promise.prototype, { // 25.4.5.3 Promise.prototype.then(onFulfilled, onRejected) then: function then(onFulfilled, onRejected) { var reaction = newPromiseCapability(speciesConstructor(this, $Promise)); reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true; reaction.fail = typeof onRejected == 'function' && onRejected; reaction.domain = isNode ? process.domain : undefined; this._c.push(reaction); if (this._a) this._a.push(reaction); if (this._s) notify(this, false); return reaction.promise; }, // 25.4.5.1 Promise.prototype.catch(onRejected) 'catch': function _catch(onRejected) { return this.then(undefined, onRejected); } }); OwnPromiseCapability = function OwnPromiseCapability() { var promise = new Internal(); this.promise = promise; this.resolve = ctx($resolve, promise, 1); this.reject = ctx($reject, promise, 1); }; newPromiseCapabilityModule.f = newPromiseCapability = function newPromiseCapability(C) { return C === $Promise || C === Wrapper ? new OwnPromiseCapability(C) : newGenericPromiseCapability(C); }; } $export($export.G + $export.W + $export.F * !USE_NATIVE, { Promise: $Promise }); __webpack_require__(28)($Promise, PROMISE); __webpack_require__(105)(PROMISE); Wrapper = __webpack_require__(4)[PROMISE]; // statics $export($export.S + $export.F * !USE_NATIVE, PROMISE, { // 25.4.4.5 Promise.reject(r) reject: function reject(r) { var capability = newPromiseCapability(this); var $$reject = capability.reject; $$reject(r); return capability.promise; } }); $export($export.S + $export.F * (LIBRARY || !USE_NATIVE), PROMISE, { // 25.4.4.6 Promise.resolve(x) resolve: function resolve(x) { return promiseResolve(LIBRARY && this === Wrapper ? $Promise : this, x); } }); $export($export.S + $export.F * !(USE_NATIVE && __webpack_require__(60)(function (iter) { $Promise.all(iter)['catch'](empty); })), PROMISE, { // 25.4.4.1 Promise.all(iterable) all: function all(iterable) { var C = this; var capability = newPromiseCapability(C); var resolve = capability.resolve; var reject = capability.reject; var result = perform(function () { var values = []; var index = 0; var remaining = 1; forOf(iterable, false, function (promise) { var $index = index++; var alreadyCalled = false; values.push(undefined); remaining++; C.resolve(promise).then(function (value) { if (alreadyCalled) return; alreadyCalled = true; values[$index] = value; --remaining || resolve(values); }, reject); }); --remaining || resolve(values); }); if (result.e) reject(result.v); return capability.promise; }, // 25.4.4.4 Promise.race(iterable) race: function race(iterable) { var C = this; var capability = newPromiseCapability(C); var reject = capability.reject; var result = perform(function () { forOf(iterable, false, function (promise) { C.resolve(promise).then(capability.resolve, reject); }); }); if (result.e) reject(result.v); return capability.promise; } }); /***/ }), /* 115 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // ECMAScript 6 symbols shim 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 global = __webpack_require__(3); var has = __webpack_require__(11); var DESCRIPTORS = __webpack_require__(10); var $export = __webpack_require__(5); var redefine = __webpack_require__(15); var META = __webpack_require__(98).KEY; var $fails = __webpack_require__(19); var shared = __webpack_require__(40); var setToStringTag = __webpack_require__(28); var uid = __webpack_require__(24); var wks = __webpack_require__(2); var wksExt = __webpack_require__(69); var wksDefine = __webpack_require__(43); var enumKeys = __webpack_require__(93); var isArray = __webpack_require__(57); var anObject = __webpack_require__(7); var isObject = __webpack_require__(8); var toIObject = __webpack_require__(16); var toPrimitive = __webpack_require__(42); var createDesc = __webpack_require__(22); var _create = __webpack_require__(61); var gOPNExt = __webpack_require__(102); var $GOPD = __webpack_require__(101); var $DP = __webpack_require__(9); var $keys = __webpack_require__(27); var gOPD = $GOPD.f; var dP = $DP.f; var gOPN = gOPNExt.f; var $Symbol = global.Symbol; var $JSON = global.JSON; var _stringify = $JSON && $JSON.stringify; var PROTOTYPE = 'prototype'; var HIDDEN = wks('_hidden'); var TO_PRIMITIVE = wks('toPrimitive'); var isEnum = {}.propertyIsEnumerable; var SymbolRegistry = shared('symbol-registry'); var AllSymbols = shared('symbols'); var OPSymbols = shared('op-symbols'); var ObjectProto = Object[PROTOTYPE]; var USE_NATIVE = typeof $Symbol == 'function'; var QObject = global.QObject; // Don't use setters in Qt Script, https://github.com/zloirock/core-js/issues/173 var setter = !QObject || !QObject[PROTOTYPE] || !QObject[PROTOTYPE].findChild; // fallback for old Android, https://code.google.com/p/v8/issues/detail?id=687 var setSymbolDesc = DESCRIPTORS && $fails(function () { return _create(dP({}, 'a', { get: function get() { return dP(this, 'a', { value: 7 }).a; } })).a != 7; }) ? function (it, key, D) { var protoDesc = gOPD(ObjectProto, key); if (protoDesc) delete ObjectProto[key]; dP(it, key, D); if (protoDesc && it !== ObjectProto) dP(ObjectProto, key, protoDesc); } : dP; var wrap = function wrap(tag) { var sym = AllSymbols[tag] = _create($Symbol[PROTOTYPE]); sym._k = tag; return sym; }; var isSymbol = USE_NATIVE && _typeof($Symbol.iterator) == 'symbol' ? function (it) { return (typeof it === 'undefined' ? 'undefined' : _typeof(it)) == 'symbol'; } : function (it) { return it instanceof $Symbol; }; var $defineProperty = function defineProperty(it, key, D) { if (it === ObjectProto) $defineProperty(OPSymbols, key, D); anObject(it); key = toPrimitive(key, true); anObject(D); if (has(AllSymbols, key)) { if (!D.enumerable) { if (!has(it, HIDDEN)) dP(it, HIDDEN, createDesc(1, {})); it[HIDDEN][key] = true; } else { if (has(it, HIDDEN) && it[HIDDEN][key]) it[HIDDEN][key] = false; D = _create(D, { enumerable: createDesc(0, false) }); }return setSymbolDesc(it, key, D); }return dP(it, key, D); }; var $defineProperties = function defineProperties(it, P) { anObject(it); var keys = enumKeys(P = toIObject(P)); var i = 0; var l = keys.length; var key; while (l > i) { $defineProperty(it, key = keys[i++], P[key]); }return it; }; var $create = function create(it, P) { return P === undefined ? _create(it) : $defineProperties(_create(it), P); }; var $propertyIsEnumerable = function propertyIsEnumerable(key) { var E = isEnum.call(this, key = toPrimitive(key, true)); if (this === ObjectProto && has(AllSymbols, key) && !has(OPSymbols, key)) return false; return E || !has(this, key) || !has(AllSymbols, key) || has(this, HIDDEN) && this[HIDDEN][key] ? E : true; }; var $getOwnPropertyDescriptor = function getOwnPropertyDescriptor(it, key) { it = toIObject(it); key = toPrimitive(key, true); if (it === ObjectProto && has(AllSymbols, key) && !has(OPSymbols, key)) return; var D = gOPD(it, key); if (D && has(AllSymbols, key) && !(has(it, HIDDEN) && it[HIDDEN][key])) D.enumerable = true; return D; }; var $getOwnPropertyNames = function getOwnPropertyNames(it) { var names = gOPN(toIObject(it)); var result = []; var i = 0; var key; while (names.length > i) { if (!has(AllSymbols, key = names[i++]) && key != HIDDEN && key != META) result.push(key); }return result; }; var $getOwnPropertySymbols = function getOwnPropertySymbols(it) { var IS_OP = it === ObjectProto; var names = gOPN(IS_OP ? OPSymbols : toIObject(it)); var result = []; var i = 0; var key; while (names.length > i) { if (has(AllSymbols, key = names[i++]) && (IS_OP ? has(ObjectProto, key) : true)) result.push(AllSymbols[key]); }return result; }; // 19.4.1.1 Symbol([description]) if (!USE_NATIVE) { $Symbol = function _Symbol() { if (this instanceof $Symbol) throw TypeError('Symbol is not a constructor!'); var tag = uid(arguments.length > 0 ? arguments[0] : undefined); var $set = function $set(value) { if (this === ObjectProto) $set.call(OPSymbols, value); if (has(this, HIDDEN) && has(this[HIDDEN], tag)) this[HIDDEN][tag] = false; setSymbolDesc(this, tag, createDesc(1, value)); }; if (DESCRIPTORS && setter) setSymbolDesc(ObjectProto, tag, { configurable: true, set: $set }); return wrap(tag); }; redefine($Symbol[PROTOTYPE], 'toString', function toString() { return this._k; }); $GOPD.f = $getOwnPropertyDescriptor; $DP.f = $defineProperty; __webpack_require__(62).f = gOPNExt.f = $getOwnPropertyNames; __webpack_require__(38).f = $propertyIsEnumerable; __webpack_require__(63).f = $getOwnPropertySymbols; if (DESCRIPTORS && !__webpack_require__(21)) { redefine(ObjectProto, 'propertyIsEnumerable', $propertyIsEnumerable, true); } wksExt.f = function (name) { return wrap(wks(name)); }; } $export($export.G + $export.W + $export.F * !USE_NATIVE, { Symbol: $Symbol }); for (var es6Symbols = // 19.4.2.2, 19.4.2.3, 19.4.2.4, 19.4.2.6, 19.4.2.8, 19.4.2.9, 19.4.2.10, 19.4.2.11, 19.4.2.12, 19.4.2.13, 19.4.2.14 'hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables'.split(','), j = 0; es6Symbols.length > j;) { wks(es6Symbols[j++]); }for (var wellKnownSymbols = $keys(wks.store), k = 0; wellKnownSymbols.length > k;) { wksDefine(wellKnownSymbols[k++]); }$export($export.S + $export.F * !USE_NATIVE, 'Symbol', { // 19.4.2.1 Symbol.for(key) 'for': function _for(key) { return has(SymbolRegistry, key += '') ? SymbolRegistry[key] : SymbolRegistry[key] = $Symbol(key); }, // 19.4.2.5 Symbol.keyFor(sym) keyFor: function keyFor(sym) { if (!isSymbol(sym)) throw TypeError(sym + ' is not a symbol!'); for (var key in SymbolRegistry) { if (SymbolRegistry[key] === sym) return key; } }, useSetter: function useSetter() { setter = true; }, useSimple: function useSimple() { setter = false; } }); $export($export.S + $export.F * !USE_NATIVE, 'Object', { // 19.1.2.2 Object.create(O [, Properties]) create: $create, // 19.1.2.4 Object.defineProperty(O, P, Attributes) defineProperty: $defineProperty, // 19.1.2.3 Object.defineProperties(O, Properties) defineProperties: $defineProperties, // 19.1.2.6 Object.getOwnPropertyDescriptor(O, P) getOwnPropertyDescriptor: $getOwnPropertyDescriptor, // 19.1.2.7 Object.getOwnPropertyNames(O) getOwnPropertyNames: $getOwnPropertyNames, // 19.1.2.8 Object.getOwnPropertySymbols(O) getOwnPropertySymbols: $getOwnPropertySymbols }); // 24.3.2 JSON.stringify(value [, replacer [, space]]) $JSON && $export($export.S + $export.F * (!USE_NATIVE || $fails(function () { var S = $Symbol(); // MS Edge converts symbol values to JSON as {} // WebKit converts symbol values to JSON as null // V8 throws on boxed symbols return _stringify([S]) != '[null]' || _stringify({ a: S }) != '{}' || _stringify(Object(S)) != '{}'; })), 'JSON', { stringify: function stringify(it) { var args = [it]; var i = 1; var replacer, $replacer; while (arguments.length > i) { args.push(arguments[i++]); }$replacer = replacer = args[1]; if (!isObject(replacer) && it === undefined || isSymbol(it)) return; // IE8 returns string on undefined if (!isArray(replacer)) replacer = function replacer(key, value) { if (typeof $replacer == 'function') value = $replacer.call(this, key, value); if (!isSymbol(value)) return value; }; args[1] = replacer; return _stringify.apply($JSON, args); } }); // 19.4.3.4 Symbol.prototype[@@toPrimitive](hint) $Symbol[PROTOTYPE][TO_PRIMITIVE] || __webpack_require__(12)($Symbol[PROTOTYPE], TO_PRIMITIVE, $Symbol[PROTOTYPE].valueOf); // 19.4.3.5 Symbol.prototype[@@toStringTag] setToStringTag($Symbol, 'Symbol'); // 20.2.1.9 Math[@@toStringTag] setToStringTag(Math, 'Math', true); // 24.3.3 JSON[@@toStringTag] setToStringTag(global.JSON, 'JSON', true); /***/ }), /* 116 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // https://github.com/tc39/Array.prototype.includes var $export = __webpack_require__(5); var $includes = __webpack_require__(53)(true); $export($export.P, 'Array', { includes: function includes(el /* , fromIndex = 0 */) { return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined); } }); __webpack_require__(31)('includes'); /***/ }), /* 117 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // https://github.com/tc39/proposal-promise-finally var $export = __webpack_require__(5); var core = __webpack_require__(4); var global = __webpack_require__(3); var speciesConstructor = __webpack_require__(67); var promiseResolve = __webpack_require__(66); $export($export.P + $export.R, 'Promise', { 'finally': function _finally(onFinally) { var C = speciesConstructor(this, core.Promise || global.Promise); var isFunction = typeof onFinally == 'function'; return this.then(isFunction ? function (x) { return promiseResolve(C, onFinally()).then(function () { return x; }); } : onFinally, isFunction ? function (e) { return promiseResolve(C, onFinally()).then(function () { throw e; }); } : onFinally); } }); /***/ }), /* 118 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // https://github.com/tc39/proposal-promise-try var $export = __webpack_require__(5); var newPromiseCapability = __webpack_require__(37); var perform = __webpack_require__(65); $export($export.S, 'Promise', { 'try': function _try(callbackfn) { var promiseCapability = newPromiseCapability.f(this); var result = perform(callbackfn); (result.e ? promiseCapability.reject : promiseCapability.resolve)(result.v); return promiseCapability.promise; } }); /***/ }), /* 119 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(43)('asyncIterator'); /***/ }), /* 120 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; __webpack_require__(43)('observable'); /***/ }), /* 121 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var $iterators = __webpack_require__(112); var getKeys = __webpack_require__(27); var redefine = __webpack_require__(15); var global = __webpack_require__(3); var hide = __webpack_require__(12); var Iterators = __webpack_require__(20); var wks = __webpack_require__(2); var ITERATOR = wks('iterator'); var TO_STRING_TAG = wks('toStringTag'); var ArrayValues = Iterators.Array; var DOMIterables = { CSSRuleList: true, // TODO: Not spec compliant, should be false. CSSStyleDeclaration: false, CSSValueList: false, ClientRectList: false, DOMRectList: false, DOMStringList: false, DOMTokenList: true, DataTransferItemList: false, FileList: false, HTMLAllCollection: false, HTMLCollection: false, HTMLFormElement: false, HTMLSelectElement: false, MediaList: true, // TODO: Not spec compliant, should be false. MimeTypeArray: false, NamedNodeMap: false, NodeList: true, PaintRequestList: false, Plugin: false, PluginArray: false, SVGLengthList: false, SVGNumberList: false, SVGPathSegList: false, SVGPointList: false, SVGStringList: false, SVGTransformList: false, SourceBufferList: false, StyleSheetList: true, // TODO: Not spec compliant, should be false. TextTrackCueList: false, TextTrackList: false, TouchList: false }; for (var collections = getKeys(DOMIterables), i = 0; i < collections.length; i++) { var NAME = collections[i]; var explicit = DOMIterables[NAME]; var Collection = global[NAME]; var proto = Collection && Collection.prototype; var key; if (proto) { if (!proto[ITERATOR]) hide(proto, ITERATOR, ArrayValues); if (!proto[TO_STRING_TAG]) hide(proto, TO_STRING_TAG, NAME); Iterators[NAME] = ArrayValues; if (explicit) for (key in $iterators) { if (!proto[key]) redefine(proto, key, $iterators[key], true); } } } /***/ }), /* 122 */ /***/ (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 + ' */'; } /***/ }), /* 123 */ /***/ (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__(44); var _Bar3 = _interopRequireDefault(_Bar2); var _Fill = __webpack_require__(13); var _Fill2 = _interopRequireDefault(_Fill); var _Graphics = __webpack_require__(0); 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"); } } 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) { var _this2 = this; 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); this.series = series; if (w.config.chart.stackType === '100%') { this.series = w.globals.seriesPercent.slice(); series = this.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; } } this.zeroSerieses = []; this.endingShapeOnSeriesNumber = series.length - 1; // which series to draw ending shape on this.checkZeroSeries({ series: series }); var ret = this.graphics.group({ class: 'apexcharts-bar-series apexcharts-plot-series' }); ret.attr('clip-path', 'url(#gridRectMask' + w.globals.cuid + ')'); var x = 0; var y = 0; var _loop = function _loop(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 = i; if (_this2.yRatio.length > 1) { _this2.yaxisIndex = realIndex; } // el to which series will be drawn var elSeries = _this2.graphics.group({ class: 'apexcharts-series', 'rel': i + 1, 'data:realIndex': i }); // eldatalabels var elDataLabelsWrap = _this2.graphics.group({ class: 'apexcharts-datalabels' }); var strokeWidth = 0; var barHeight = 0; var barWidth = 0; var initPositions = _this2.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; _this2.yArrj = []; _this2.yArrjF = []; _this2.yArrjVal = []; _this2.xArrj = []; _this2.xArrjF = []; _this2.xArrjVal = []; // if (!this.horizontal) { // this.xArrj.push(x + barWidth / 2) // } var _loop2 = function _loop2(j) { if (w.config.stroke.show) { if (series[i][j] === null || series[i][j] === 0) { strokeWidth = 0; } else { strokeWidth = Array.isArray(_this2.strokeWidth) ? _this2.strokeWidth[realIndex] : _this2.strokeWidth; } } var paths = null; if (_this2.isHorizontal) { paths = _this2.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 }); } else { paths = _this2.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 }); } pathTo = paths.pathTo; pathFrom = paths.pathFrom; y = paths.y; x = paths.x; xArrValues.push(x); yArrValues.push(y); var seriesNumber = w.config.plotOptions.bar.distributed ? j : i; var fillColor = null; if (_this2.barOptions.colors.ranges.length > 0) { var colorRange = _this2.barOptions.colors.ranges; colorRange.map(function (range, index) { if (series[i][j] >= range.from && series[i][j] <= range.to) { fillColor = range.color; } }); } var pathFill = _this2.fill.fillPath(elSeries, { seriesNumber: seriesNumber, color: fillColor }); elSeries = _this2.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 }); }; for (var j = 0; j < w.globals.dataPoints; j++) { _loop2(j); } // 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 _this2.prevY.push(_this2.yArrj); _this2.prevYF.push(_this2.yArrjF); _this2.prevYVal.push(_this2.yArrjVal); _this2.prevX.push(_this2.xArrj); _this2.prevXF.push(_this2.xArrjF); _this2.prevXVal.push(_this2.xArrjVal); ret.add(elSeries); }; for (var i = 0, bc = 0; i < series.length; i++, bc++) { _loop(i, bc); } 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; // 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.dataXY) { xDivision = w.globals.gridWidth / (this.totalItems / w.globals.series.length); barWidth = xDivision / 1.8; } else { barWidth = barWidth * parseInt(w.config.plotOptions.bar.columnWidth) / 100; } zeroH = this.baseLineY[this.yaxisIndex] + 1; // 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; } 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; } } 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; } 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.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.dataXY) { 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) { 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; } else { bYP = prevYValue; } } else { if (this.series[i][j] >= 0) { bYP = prevYValue; } else { bYP = prevYValue + prevBarH; } } barYPosition = bYP; } else { // the first series will not have prevY values barYPosition = w.globals.gridHeight - zeroH; } if (this.series[i][j] === null) { y = barYPosition - this.series[i][j] / this.yRatio[this.yaxisIndex]; } else { y = barYPosition - this.series[i][j] / this.yRatio[this.yaxisIndex]; } 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); if (this.series.length > 1 && i !== this.endingShapeOnSeriesNumber) { /* if(this.zeroSerieses) {} */ // revert back to flat shape if not last series endingShape.path = this.graphics.line(barXPosition + barWidth - strokeWidth, endingShape.newY); } 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, 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, 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.classList.add('apexcharts-backgroundBar'); } x = x + xDivision; return { pathTo: pathTo, pathFrom: pathFrom, x: w.globals.dataXY ? 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.includes(s) && s === this.endingShapeOnSeriesNumber) { this.endingShapeOnSeriesNumber -= 1; } } } }]); return BarStacked; }(_Bar3.default); exports.default = BarStacked; /***/ }), /* 124 */ /***/ (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__(44); var _Bar3 = _interopRequireDefault(_Bar2); var _Fill = __webpack_require__(13); var _Fill2 = _interopRequireDefault(_Fill); var _Graphics = __webpack_require__(0); 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"); } } 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 * 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 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; this.initVariables(series, true); var ret = graphics.group({ class: 'apexcharts-candlestick-series apexcharts-plot-series' }); ret.attr('clip-path', 'url(#gridRectMask' + w.globals.cuid + ')'); 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', '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({ makeWidthForVisibleItems: true }); 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(elSeries, { seriesNumber: realIndex, color: color }); 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: '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.dataXY) { 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, true); } 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, 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); if (!w.globals.dataXY) { 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; /***/ }), /* 125 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(45); var _DataLabels2 = _interopRequireDefault(_DataLabels); var _Animations = __webpack_require__(25); var _Animations2 = _interopRequireDefault(_Animations); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Filters = __webpack_require__(6); 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.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; for (var i = series.length - 1; i >= 0; i--) { // el to which series will be drawn var elSeries = graphics.group({ class: 'apexcharts-series apexcharts-heatmap-series', '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); } var x1 = 0; for (var j = 0; j < series[i].length; j++) { var colorShadePercent = 1; var heatColorProps = this.determineHeatColor(i, j); if (w.globals.hasNegs) { var shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity; 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, j: j, val: series[i][j], 'stroke-width': this.strokeWidth, stroke: w.globals.stroke.colors[0], color: color }); 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) { _speed = this.dynamicAnim.speed; } var colorFrom = w.globals.previousPaths[i][j].color; this.animateHeatColor(rect, _Utils2.default.rgb2hex(colorFrom), _Utils2.default.rgb2hex(color), _speed); } var dataLabels = this.calculateHeatmapDataLabels({ x: x1, y: y1, i: i, j: j, series: series, rectHeight: yDivision, rectWidth: xDivision }); if (dataLabels !== null) { elSeries.add(dataLabels); } x1 = x1 + xDivision; } y1 = y1 + yDivision; ret.add(elSeries); } // adjust yaxis labels for heatmap w.globals.yAxisScale[0].result.push(''); var divisor = w.globals.gridHeight / w.globals.series.length; w.config.yaxis[0].labels.offsetY = -(divisor / 2); return ret; } }, { key: 'determineHeatColor', value: function determineHeatColor(i, j) { var w = this.w; var val = w.globals.series[i][j]; var color = w.globals.colors[i]; var min = Math.min.apply(Math, _toConsumableArray(w.globals.series[i])); var max = Math.max.apply(Math, _toConsumableArray(w.globals.series[i])); var total = Math.abs(max) + Math.abs(min); var percent = 100 * val / (total === 0 ? total - 0.000001 : total); if (w.config.plotOptions.heatmap.colorScale.ranges.length > 0) { var colorRange = w.config.plotOptions.heatmap.colorScale.ranges; colorRange.map(function (range, index) { if (val >= range.from && val <= range.to) { color = range.color; min = range.from; max = range.to; total = Math.abs(max) + Math.abs(min); percent = 100 * val / 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, globals: w.globals }); dataLabels.plotDataLabelsText(dataLabelsX, dataLabelsY, text, i, j, elDataLabelsWrap, dataLabelsConfig); } return elDataLabelsWrap; } }, { key: 'animateHeatMap', value: function animateHeatMap(el, x, y, width, height, speed) { 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); } }, { key: 'animateHeatColor', value: function animateHeatColor(el, colorFrom, colorTo, speed) { el.attr({ fill: colorFrom }).animate(speed).attr({ fill: colorTo }); } }]); return HeatMap; }(); module.exports = HeatMap; /***/ }), /* 126 */ /***/ (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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Fill = __webpack_require__(13); var _Fill2 = _interopRequireDefault(_Fill); var _DataLabels = __webpack_require__(45); var _DataLabels2 = _interopRequireDefault(_DataLabels); var _Markers = __webpack_require__(47); var _Markers2 = _interopRequireDefault(_Markers); var _Scatter = __webpack_require__(74); var _Scatter2 = _interopRequireDefault(_Scatter); 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) { _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'); if (this.pointsChart) { 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', 'clip-path': 'url(#gridRectMask' + w.globals.cuid + ')' }); var yRatio = this.xyRatios.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 var xDivision = w.globals.gridWidth / w.globals.dataPoints; var realIndex = w.globals.comboCharts ? seriesIndex[i] : i; if (yRatio.length > 1) { this.yaxisIndex = realIndex; } 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]; categoryAxisCorrection = xDivision / 2; var x = w.globals.padHorizontal + categoryAxisCorrection; var y = 1; if (w.globals.dataXY) { 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' }); // points var elPointsMain = graphics.group({ class: 'apexcharts-series-markers-wrap' }); // eldatalabels var elDataLabelsWrap = graphics.group({ class: 'apexcharts-datalabels' }); for (var cs = 0; cs < w.globals.collapsedSeries.length; cs++) { if (w.globals.collapsedSeries[cs].index === realIndex) { elSeries.node.classList.add('apexcharts-series-collapsed'); } } 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, zeroY); break; } } } else { linePath = graphics.move(prevX, prevY); areaPath = graphics.move(prevX, zeroY) + 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; } for (var j = 0; j < w.globals.dataPoints - 1; j++) { if (w.globals.dataXY) { x = (w.globals.seriesX[realIndex][j + 1] - w.globals.minX) / xRatio; } else { x = x + xDivision; } 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 - w.globals.minY / yRatio[this.yaxisIndex]; } else { y = lineYPosition - series[i][j + 1] / yRatio[this.yaxisIndex]; } } else { if (typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null) { y = zeroY - w.globals.minY / yRatio[this.yaxisIndex]; } else { y = zeroY - series[i][j + 1] / yRatio[this.yaxisIndex]; } } // 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, zeroY: zeroY, linePath: linePath, areaPath: areaPath, linePaths: linePaths, areaPaths: areaPaths }); 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); 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 dataLabels = new _DataLabels2.default(this.ctx); var drawnLabels = dataLabels.drawDataLabel(pointsPos, realIndex, j + 1); 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 }); } if (w.config.stroke.show && !this.pointsChart) { var lineFill = null; if (type === 'line') { // fillable lines only for lineChart lineFill = fill.fillPath(elSeries, { seriesNumber: realIndex, i: i }); } else { lineFill = w.globals.stroke.colors[realIndex]; } for (var p = 0; p < linePaths.length; p++) { var renderedPath = graphics.renderPaths({ i: i, realIndex: realIndex, 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', animationDelay: i, initialSpeed: w.config.chart.animations.speed, dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed, className: 'apexcharts-line', id: 'apexcharts-line' }); elSeries.add(renderedPath); } } // we have drawn the lines, now if it is area chart, we need to fill paths if (type === 'area') { var pathFill = fill.fillPath(elSeries, { seriesNumber: realIndex }); for (var _p = 0; _p < areaPaths.length; _p++) { var _renderedPath = graphics.renderPaths({ i: i, realIndex: realIndex, pathFrom: pathFromArea, pathTo: areaPaths[_p], stroke: 'none', strokeWidth: 0, strokeLineCap: null, fill: pathFill, animationDelay: i, initialSpeed: w.config.chart.animations.speed, dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed, className: 'apexcharts-area', id: 'apexcharts-area' }); 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, zeroY = _ref.zeroY, linePath = _ref.linePath, areaPath = _ref.areaPath, linePaths = _ref.linePaths, areaPaths = _ref.areaPaths; var w = this.w; var graphics = new _Graphics2.default(this.ctx); // logic of smooth curve derived from chartist // CREDITS: https://gionkunz.github.io/chartist-js/ if (w.config.stroke.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, zeroY) + graphics.line(pX, zeroY) + '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, zeroY, x, zeroY, x, zeroY) + '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, zeroY) + graphics.move(x, y); } if (series[i][j] === null) { linePath = linePath + graphics.move(x, y); areaPath = areaPath + graphics.move(x, zeroY); } 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, zeroY) + '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.dataXY) { 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(series[i][0] !== null ? prevY + w.config.markers.offsetY : null); ptX.push(x + w.config.markers.offsetX); ptY.push(series[i][j + 1] !== null ? y + w.config.markers.offsetY : null); } else { ptX.push(x + w.config.markers.offsetX); ptY.push(series[i][j + 1] !== null ? 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; pathFromLine = w.globals.previousPaths[pp].paths[0].d; pathFromArea = 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; } else { prevY = zeroY - series[i][0] / yRatio; } } else { // the first value in the current series is null if (w.config.chart.stacked) { if (i > 0) { // check again for undefined value (undefined value will occur when we clear the series while user clicks on legend to hide serieses) if (typeof series[i][0] === 'undefined') { 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; /***/ }), /* 127 */ /***/ (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__(73); var _Pie3 = _interopRequireDefault(_Pie2); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Fill = __webpack_require__(13); var _Fill2 = _interopRequireDefault(_Fill); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Filters = __webpack_require__(6); 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; 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; var lineColorArr = w.globals.stroke.colors !== undefined ? w.globals.stroke.colors : w.globals.colors; if (w.config.plotOptions.radialBar.track.show) { var elTracks = this.drawTracks({ size: size, centerX: centerX, centerY: centerY, colorArr: colorArr, lineColorArr: lineColorArr, series: series }); elSeries.add(elTracks); } var elG = this.drawArcs({ size: size, centerX: centerX, centerY: centerY, colorArr: colorArr, lineColorArr: lineColorArr, series: series }); elSeries.add(elG.g); if (w.config.plotOptions.radialBar.hollow.position === 'front') { elG.g.add(elG.elHollow); 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 = opts.size * (100 - parseInt(w.config.plotOptions.radialBar.hollow.size)) / 100 / (opts.series.length + 1) - this.margin; 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(elRadialBarTrack, { seriesNumber: 0, size: opts.size, fillColors: 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, easing: w.globals.easing }); } return g; } }, { key: 'drawArcs', value: function drawArcs(opts) { var w = this.w; var self = this; // 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 = opts.size * (100 - parseInt(w.config.plotOptions.radialBar.hollow.size)) / 100 / (opts.series.length + 1) - this.margin; opts.size = opts.size - strokeWidth / 2; var hollowFillImg = w.config.plotOptions.radialBar.hollow.image; 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 randID = (Math.random() + 1).toString(36).substring(4); var hollowRadius = hollowSize - w.config.plotOptions.radialBar.hollow.margin; if (w.config.plotOptions.radialBar.hollow.image !== undefined) { 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); } } } 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 (w.config.plotOptions.radialBar.dataLabels.showOn === 'hover' || w.globals.series.length > 1) { shown = 0; } var dataLabels = this.renderDataLabels({ hollowSize: hollowSize, centerX: opts.centerX, centerY: opts.centerY, opacity: shown }); if (w.config.plotOptions.radialBar.hollow.position === 'back') { g.add(elHollow); 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-radial-series apexcharts-series' }); g.add(elRadialBarArc); elRadialBarArc.attr({ id: 'apexcharts-series-' + i, 'rel': i + 1 }); opts.size = opts.size - strokeWidth - this.margin; var pathFill = fill.fillPath(elRadialBarArc, { seriesNumber: i, size: opts.size }); var startAngle = this.startAngle; var prevStartAngle = void 0; var totalAngle = Math.abs(w.config.plotOptions.radialBar.endAngle - w.config.plotOptions.radialBar.startAngle); var endAngle = Math.round(totalAngle * _Utils2.default.negToZero(opts.series[i]) / 100) + 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 elPath = graphics.drawPath({ d: '', stroke: pathFill, strokeWidth: strokeWidth, fill: 'none', fillOpacity: w.config.fill.opacity, classes: 'apexcharts-radialbar-area', strokeDashArray: w.config.stroke.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); } elPath.node.addEventListener('mouseenter', graphics.pathMouseEnter.bind(this, elPath)); elPath.node.addEventListener('mouseleave', graphics.pathMouseLeave.bind(this, elPath)); elPath.node.addEventListener('mouseenter', self.dataLabelsMouseIn.bind(this, elPath.node)); elPath.node.addEventListener('mouseleave', self.dataLabelsMouseout.bind(this, elPath.node)); elRadialBarArc.add(elPath); elPath.attr('id', 'apexcharts-radialArc-' + i); var pie = new _Pie3.default(this.ctx); 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, 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: 'dataLabelsMouseIn', value: function dataLabelsMouseIn(el) { var w = this.w; var val = el.getAttribute('data:value'); var labelColor = void 0; var name = w.globals.seriesNames[parseInt(el.parentNode.getAttribute('rel')) - 1]; var elLabel = w.globals.dom.baseEl.querySelector('.apexcharts-datalabel-label'); var elValue = w.globals.dom.baseEl.querySelector('.apexcharts-datalabel-value'); var lbFormatter = w.config.plotOptions.radialBar.dataLabels.value.formatter; val = lbFormatter(val); if (elLabel !== null) { elLabel.textContent = name; } if (elValue !== null) { elValue.textContent = val; } if (w.config.plotOptions.radialBar.dataLabels.name.color === undefined) { labelColor = w.globals.colors[parseInt(el.parentNode.getAttribute('rel')) - 1]; } else { labelColor = w.config.plotOptions.radialBar.dataLabels.name.color; } var dataLabelsGroup = w.globals.dom.baseEl.querySelector('.apexcharts-datalabels-group'); if (dataLabelsGroup !== null) { dataLabelsGroup.style.opacity = 1; } if (elLabel !== null) { elLabel.style.fill = labelColor; } } }, { key: 'dataLabelsMouseout', value: function dataLabelsMouseout(el) { var w = this.w; var dataLabelsGroup = w.globals.dom.baseEl.querySelector('.apexcharts-datalabels-group'); if (w.config.plotOptions.radialBar.dataLabels.showOn !== 'always' || w.globals.series.length > 1) { if (dataLabelsGroup !== null) { dataLabelsGroup.style.opacity = 0; } } } }, { key: 'renderDataLabels', value: function renderDataLabels(opts) { var w = this.w; var graphics = new _Graphics2.default(this.ctx); var g = graphics.group({ class: 'apexcharts-datalabels-group' }); g.node.style.opacity = opts.opacity; var x = opts.centerX; var y = opts.centerY; var labelColor = void 0, valueColor = void 0; if (w.config.plotOptions.radialBar.dataLabels.name.color === undefined) { labelColor = w.globals.colors[0]; } else { labelColor = w.config.plotOptions.radialBar.dataLabels.name.color; } if (w.config.plotOptions.radialBar.dataLabels.value.color === undefined) { valueColor = w.config.chart.foreColor; } else { valueColor = w.config.plotOptions.radialBar.dataLabels.value.color; } var lbFormatter = w.config.plotOptions.radialBar.dataLabels.value.formatter; var val = lbFormatter(w.globals.series[0]); if (w.config.plotOptions.radialBar.dataLabels.name.show) { var elLabel = graphics.drawText({ x: x, y: y + parseInt(w.config.plotOptions.radialBar.dataLabels.name.offsetY), text: w.globals.seriesNames[0], textAnchor: 'middle', foreColor: labelColor, fontSize: w.config.plotOptions.radialBar.dataLabels.name.fontSize, fontFamily: w.config.plotOptions.radialBar.dataLabels.name.fontFamily }); elLabel.node.classList.add('apexcharts-datalabel-label'); g.add(elLabel); } if (w.config.plotOptions.radialBar.dataLabels.value.show) { var valOffset = w.config.plotOptions.radialBar.dataLabels.name.show ? parseInt(w.config.plotOptions.radialBar.dataLabels.value.offsetY) + 16 : w.config.plotOptions.radialBar.dataLabels.value.offsetY; var elValue = graphics.drawText({ x: x, y: y + valOffset, text: val, textAnchor: 'middle', foreColor: valueColor, fontSize: w.config.plotOptions.radialBar.dataLabels.value.fontSize, fontFamily: w.config.plotOptions.radialBar.dataLabels.value.fontFamily }); elValue.node.classList.add('apexcharts-datalabel-value'); g.add(elValue); } return g; } }]); return Radial; }(_Pie3.default); exports.default = Radial; /***/ }), /* 128 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Options = __webpack_require__(51); var _Options2 = _interopRequireDefault(_Options); var _Utils = __webpack_require__(1); 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.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 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]); w.globals.delayedElements.push({ el: annoElArray[i], index: 0 }); } // after placing the annotations on svg, set any vertically placed annotations this.setOrientations(w.config.annotations.xaxis); // 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 graphics = new _Graphics2.default(this.ctx); var strokeDashArray = anno.strokeDashArray; var x1 = (anno.x - w.globals.minX) / (w.globals.xRange / w.globals.gridWidth); var line = graphics.drawLine(x1 + anno.offsetX, 0 + anno.offsetY, x1 + anno.offsetX, w.globals.gridHeight + anno.offsetY, anno.borderColor, strokeDashArray); parent.appendChild(line.node); var textY = anno.label.position === 'top' ? -3 : w.globals.gridHeight; var text = anno.label.text ? anno.label.text : ''; var elText = 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); } }, { key: 'drawXAxisAnnotations', value: function drawXAxisAnnotations() { var _this = this; var w = this.w; var graphics = new _Graphics2.default(this.ctx); var elg = 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 graphics = new _Graphics2.default(this.ctx); var strokeDashArray = anno.strokeDashArray; var y1 = w.globals.gridHeight - (anno.y - w.globals.minYArr[anno.yAxisIndex]) / (w.globals.yRange[anno.yAxisIndex] / w.globals.gridHeight); var text = anno.label.text ? anno.label.text : ''; var line = graphics.drawLine(0 + anno.offsetX, y1 + anno.offsetY, w.globals.gridWidth + anno.offsetX, y1 + anno.offsetY, anno.borderColor, strokeDashArray); parent.appendChild(line.node); var textX = anno.label.position === 'right' ? w.globals.gridWidth : 0; var elText = graphics.drawText({ x: textX + anno.label.offsetX, y: 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 graphics = new _Graphics2.default(this.ctx); var elg = graphics.group({ class: 'apexcharts-yaxis-annotations' }); w.config.annotations.yaxis.map(function (anno, index) { _this2.addYaxisAnnotation(anno, elg.node, index); }); return elg; } }, { key: 'addPointAnnotation', value: function addPointAnnotation(anno, parent, index) { var w = this.w; var graphics = new _Graphics2.default(this.ctx); var x = 0; var y = 0; var pointY = 0; if (typeof anno.x === 'string') { if (w.config.chart.type === 'bar' && w.config.plotOptions.bar.horizontal) { // todo } 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 = parseInt(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); } else { x = (anno.x - w.globals.minX) / (w.globals.xRange / w.globals.gridWidth); y = w.globals.gridHeight - (parseInt(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); } 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 }; var point = graphics.drawMarker(x, pointY, optsPoints); parent.appendChild(point.node); var text = anno.label.text ? anno.label.text : ''; var elText = 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); } }, { key: 'drawPointAnnotations', value: function drawPointAnnotations() { var _this3 = this; var w = this.w; var graphics = new _Graphics2.default(this.ctx); var elg = 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(annos) { var annoIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var w = this.w; var graphics = new _Graphics2.default(this.ctx); annos.map(function (anno, index) { if (anno.label.orientation === 'vertical') { var i = annoIndex !== null ? annoIndex : index; 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', parseInt(xAnno.getAttribute('x')) - xAnnoCoord.height + 4); if (anno.label.position === 'top') { xAnno.setAttribute('y', parseInt(xAnno.getAttribute('y')) + xAnnoCoord.width); } else { xAnno.setAttribute('y', parseInt(xAnno.getAttribute('y')) - xAnnoCoord.width); } var annoRotatingCenter = 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; var graphics = new _Graphics2.default(this.ctx); 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 = 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 + '\']'); var parent = annoLabel.parentNode; var elRect = _this4.addBackgroundToAnno(annoLabel, anno); 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 graphics = new _Graphics2.default(me.ctx); var parentNode = w.globals.dom.baseEl.querySelector(appendTo); var elText = graphics.drawText({ x: x, y: y, text: text, textAnchor: textAnchor || 'start', fontSize: fontSize || '12px', fontFamily: fontFamily || 'Arial', foreColor: foreColor || w.config.chart.foreColor, cssClass: true ? cssClass : '' }); parentNode.appendChild(elText.node); var textRect = elText.bbox(); var elRect = 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) { 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); parent.insertBefore(elRect.node, axesAnnoLabel); if (pushToMemory) { w.globals.memory.methodsToExec.push({ context: me, method: contextMethod, params: params }); } return context; } }]); return Annotations; }(); module.exports = Annotations; /***/ }), /* 129 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(50); var _Config2 = _interopRequireDefault(_Config); var _Globals = __webpack_require__(140); 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; }(); module.exports = Base; /***/ }), /* 130 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(44); var _Bar2 = _interopRequireDefault(_Bar); var _BarStacked = __webpack_require__(123); var _BarStacked2 = _interopRequireDefault(_BarStacked); var _CandleStick = __webpack_require__(124); var _CandleStick2 = _interopRequireDefault(_CandleStick); var _Crosshairs = __webpack_require__(75); var _Crosshairs2 = _interopRequireDefault(_Crosshairs); var _DateTime = __webpack_require__(52); var _DateTime2 = _interopRequireDefault(_DateTime); var _HeatMap = __webpack_require__(125); var _HeatMap2 = _interopRequireDefault(_HeatMap); var _Pie = __webpack_require__(73); var _Pie2 = _interopRequireDefault(_Pie); var _Radial = __webpack_require__(127); var _Radial2 = _interopRequireDefault(_Radial); var _Line = __webpack_require__(126); var _Line2 = _interopRequireDefault(_Line); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Grid = __webpack_require__(138); var _Grid2 = _interopRequireDefault(_Grid); var _XAxis = __webpack_require__(48); var _XAxis2 = _interopRequireDefault(_XAxis); var _YAxis = __webpack_require__(49); var _YAxis2 = _interopRequireDefault(_YAxis); var _Range = __webpack_require__(133); var _Range2 = _interopRequireDefault(_Range); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Series = __webpack_require__(26); var _Series2 = _interopRequireDefault(_Series); var _TimeScale = __webpack_require__(76); 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.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; var graphics = new _Graphics2.default(this.ctx); var ct = cnf.chart.type; var axisChartsArrTypes = ['line', 'area', 'bar', 'candlestick', 'scatter', 'bubble', 'heatmap']; var xyChartsArrTypes = ['line', 'area', 'bar', 'candlestick', 'scatter', 'bubble']; gl.axisCharts = axisChartsArrTypes.indexOf(ct) > -1; gl.xyCharts = xyChartsArrTypes.indexOf(ct) > -1; 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(); // this element is required for hovering over virtual rect to determine x/y position in line and area charts. let's call this element hovering rect gl.dom.elLegendWrap = graphics.group({ class: 'apexcharts-legend' }); 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 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; // bar not supported in mixed charts 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 === 'candlestick') { candlestickSeries.series.push(series); candlestickSeries.i.push(st); } else { // user has specified type, but it is not valid (other than line/area/column) throw new Error('You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar'); } 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 elGraph = []; if (gl.comboCharts) { if (areaSeries.series.length > 0) { elGraph.push(line.draw(areaSeries.series, 'area', areaSeries.i)); } if (columnSeries.series.length > 0) { 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)); } } 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 '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; 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 === '%') { 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 === '%') { gl.svgHeight = elDim[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 : 14; 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.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.dataXY = false; gl.dataXYZ = 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.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); var activeSeriesIndex = sr.getActiveConfigSeriesIndex(); if (typeof series[activeSeriesIndex].data !== 'undefined' && series[activeSeriesIndex].data.length > 0 && series[activeSeriesIndex].data[0] !== null && typeof series[activeSeriesIndex].data[0].x !== 'undefined' && series[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); var activeSeriesIndex = sr.getActiveConfigSeriesIndex(); if (typeof series[activeSeriesIndex].data !== 'undefined' && series[activeSeriesIndex].data.length > 0 && typeof series[activeSeriesIndex].data[0] !== 'undefined' && series[activeSeriesIndex].data[0] !== null && series[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(ser[i].data[j][1][3]); } else { this.twoDSeries.push(ser[i].data[j][1]); } } 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.dataXYZ = true; } } } }, { key: 'handleFormatXY', value: function handleFormatXY(ser, i) { var cnf = this.w.config; var gl = this.w.globals; var series = this.w.config.series.slice(); var dt = new _DateTime2.default(this.ctx); 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) && ser[i].data[j].y.length === 4) { this.twoDSeries.push(ser[i].data[j].y[3]); } else { this.twoDSeries.push(ser[i].data[j].y); } } var isXString = typeof ser[i].data[j].x === 'string'; var isXDate = !!dt.isValidDate(ser[i].data[j].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') { this.twoDSeriesX.push(dt.parseDate(ser[i].data[j].x)); } else { // a category and not a numeric x value this.fallbackToCategory = true; this.twoDSeriesX.push(ser[i].data[j].x); } } else { if (cnf.xaxis.type === 'datetime') { this.twoDSeriesX.push(dt.parseDate(ser[i].data[j].x.toString())); } else { this.twoDSeriesX.push(parseInt(ser[i].data[j].x)); } } } else { // a numeric value in x property this.twoDSeriesX.push(ser[i].data[j].x); } } if (series[i].data[0] && typeof series[i].data[0].z !== 'undefined') { for (var t = 0; t < series[i].data.length; t++) { this.threeDSeries.push(series[i].data[t].z); } gl.dataXYZ = true; } } }, { 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: '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 _j2 = 0; _j2 < ser[i].data.length; _j2++) { serO.push(ser[i].data[_j2].y[0]); serH.push(ser[i].data[_j2].y[1]); serL.push(ser[i].data[_j2].y[2]); serC.push(ser[i].data[_j2].y[3]); } } return { o: serO, h: serH, l: serL, c: serC }; } }, { key: 'parseDataAxisCharts', value: function parseDataAxisCharts(ser, series) { var ctx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.ctx; var cnf = this.w.config; var gl = this.w.globals; var dt = new _DateTime2.default(ctx); for (var i = 0; i < series.length; i++) { this.twoDSeries = []; this.twoDSeriesX = []; this.threeDSeries = []; if (typeof series[i].data === 'undefined') { console.error("It is a possibility that you may have not included 'data' property in series."); return; } 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.dataXY = true; } } else { if (cnf.xaxis.type === 'datetime') { // user didn't supplied [{x,y}] or [[x,y]], but single array in data. // Also labels were supplied differently gl.dataXY = 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); } gl.labels.push(this.twoDSeriesX); gl.series.push(ser[i].data); } gl.seriesZ.push(this.threeDSeries); // gl.series.push(ser[i].data) 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; } }, { key: 'handleExternalLabelsData', value: function handleExternalLabelsData(ser) { var cnf = this.w.config; var gl = this.w.globals; // user provided labels in category axis if (cnf.xaxis.categories.length > 0) { gl.labels = cnf.xaxis.categories; } else if (cnf.labels.length > 0) { gl.labels = cnf.labels.slice(); } else if (this.fallbackToCategory) { gl.labels = gl.labels[0]; } else { // user didn't provided labels, fallback to 1-2-3-4-5 var labelArr = []; if (gl.axisCharts) { for (var i = 0; i < gl.series[gl.maxValsInArrayIndex].length; i++) { labelArr.push(i + 1); } for (var _i = 0; _i < ser.length; _i++) { gl.seriesX.push(labelArr); } gl.dataXY = true; } // no series to pull labels from, put a 0-10 series if (labelArr.length === 0) { labelArr = [0, 10]; for (var _i2 = 0; _i2 < ser.length; _i2++) { gl.seriesX.push(labelArr); } } gl.labels = labelArr; 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(); // to determine whether data is in XY format or array format, we use original config var configSeries = cnf.series.slice(); this.fallbackToCategory = false; this.resetGlobals(); this.isMultipleY(); if (gl.axisCharts) { this.parseDataAxisCharts(ser, configSeries); } else { this.parseDataNonAxisCharts(ser); } this.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.getSeriesTotals(); if (gl.axisCharts) { this.getStackedSeriesTotals(); } this.getPercentSeries(); // user didn't provide a [[x,y],[x,y]] series, but a named series if (!gl.dataXY) { this.handleExternalLabelsData(ser); } } /** * @memberof Core * 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] **/ }, { key: 'getStackedSeriesTotals', 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.config.series[index].data.reduce(function (acc, cur) { return acc + cur; }, 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; }))); } /** * @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 Core * 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: '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.getCalculatedRatios(); if (w.config.xaxis.type === 'datetime' && w.config.xaxis.labels.formatter === undefined && isFinite(w.globals.minX) && isFinite(w.globals.maxX)) { var ts = new _TimeScale2.default(this.ctx); var formattedTimeScale = ts.calculateTimeScaleTicks(w.globals.minX, w.globals.maxX); ts.recalcDimensionsBasedOnFormat(formattedTimeScale); } } return xyRatios; } }, { 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 _i3 = 0; _i3 < gl.yRange.length; _i3++) { yRatio.push(gl.yRange[_i3] / 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; baseLineY = []; // baseline variables is the 0 of the yaxis which will be needed when there are negatives if (gl.isMultipleYAxis) { for (var _i4 = 0; _i4 < yRatio.length; _i4++) { baseLineY.push(-gl.minYArr[_i4] / yRatio[_i4]); } } else { baseLineY.push(-gl.minY / yRatio[0]); } baseLineInvertedY = -gl.minY / invertedYRatio; // this is for bar chart baseLineX = gl.minX / xRatio; } else { baseLineY.push(0); } return { yRatio: yRatio, invertedYRatio: invertedYRatio, zRatio: zRatio, xRatio: xRatio, initialXRatio: initialXRatio, invertedXRatio: invertedXRatio, baseLineInvertedY: baseLineInvertedY, baseLineY: baseLineY, baseLineX: baseLineX }; } }, { key: 'checkComboCharts', value: function checkComboCharts() { var w = this.w; var cnf = w.config; cnf.series.map(function (series) { if (typeof series.type !== 'undefined') { w.globals.comboCharts = true; } }); } }, { 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) { var elXaxis = void 0, elYaxis = void 0; if (type === 'bar' && cnf.plotOptions.bar.horizontal) { 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.includes(index)) { elYaxis = yAxis.drawYaxis(xyRatios, index); gl.dom.Paper.add(elYaxis); } }); } } cnf.yaxis.map(function (yaxe, index) { if (!gl.ignoreYAxisIndexes.includes(index)) { yAxis.yAxisTitleRotate(index, yaxe.opposite); } }); } }, { key: 'drawGrid', value: function drawGrid() { var w = this.w; var grid = new _Grid2.default(this.ctx); var xAxis = new _XAxis2.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 = grid.renderGrid(); gl.dom.elGraphical.add(elgrid.el); grid.drawGridArea(elgrid.el); } else { var elgridArea = grid.drawGridArea(); gl.dom.elGraphical.add(elgridArea); } if (elgrid !== null) { xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth); } } } // This mask will clip off overflowing graphics from the drawable area }, { key: 'createGridMask', value: function createGridMask() { var w = this.w; var graphics = new _Graphics2.default(this.ctx); w.globals.dom.elGridRectMask = document.createElementNS(w.globals.svgNS, 'clipPath'); w.globals.dom.elGridRectMask.setAttribute('id', 'gridRectMask' + w.globals.cuid); var markerSize = 0; if (!w.config.grid.clipMarkers) { markerSize = w.config.markers.size > w.config.markers.hover.size ? w.config.markers.size : w.config.markers.hover.size; } w.globals.dom.elGridRect = graphics.drawRect(0, 0 - markerSize, w.globals.gridWidth, w.globals.gridHeight + markerSize * 2, 0, '#fff'); w.globals.dom.elGridRectMask.appendChild(w.globals.dom.elGridRect.node); var defs = w.globals.dom.baseEl.querySelector('defs'); defs.appendChild(w.globals.dom.elGridRectMask); } }]); return Core; }(); module.exports = Core; /***/ }), /* 131 */ /***/ (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"); } } 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: 'exportToSVG', value: function exportToSVG() { 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); } var svgData = this.getSvgString(); var svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); var svgUrl = URL.createObjectURL(svgBlob); var downloadLink = document.createElement('a'); downloadLink.href = svgUrl; downloadLink.download = this.w.globals.chartID + '.svg'; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); } }]); return Exports; }(); exports.default = Exports; /***/ }), /* 132 */ /***/ (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 _Dimensions = __webpack_require__(46); var _Dimensions2 = _interopRequireDefault(_Dimensions); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Series = __webpack_require__(26); 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 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.existingWidth = 0; this.existingHeight = 0; this.rowHeight = 20; this.maxTextWidth = 0; this.padding = 0; this.noOfLegendColumns = 1; this.textMaxWidthArr = []; this.legendsArray = []; 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; if ((gl.series.length > 1 || !gl.axisCharts) && cnf.legend.show) { while (gl.dom.elLegendWrap.firstChild) { gl.dom.elLegendWrap.removeChild(gl.dom.elLegendWrap.firstChild); } this.drawLegends(cnf.chart.type, gl.series.length); if (cnf.legend.position === 'bottom' || cnf.legend.position === 'top') { this.legendAlignCenterHorz(); } else if (cnf.legend.position === 'right' || cnf.legend.position === 'left') { this.legendAlignVertical(); } } } }, { key: 'drawLegends', value: function drawLegends(type, seriesLength) { var self = this; var w = this.w; var graphics = new _Graphics2.default(this.ctx); var pSize = w.config.legend.markers.size; var fontSize = w.config.legend.fontSize; var fontFamily = w.config.legend.fontFamily; var marginHorz = w.config.legend.itemMargin.horizontal; var marginVert = w.config.legend.itemMargin.vertical; this.padding = pSize + w.config.legend.markers.strokeWidth; var padding = this.padding; // To get text's actual rect before it is rendered. // We append this text to some place and then we will delete this text after we are done var totalWidth = 0; var currentRow = 1; var currentCol = 0; 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, index) { return colorScale.name ? colorScale.name : colorScale.from + ' - ' + colorScale.to; }); fillcolor = ranges.map(function (color, index) { return color.color; }); } var legendFormatter = w.globals.legendFormatter; for (var i = 0; i <= legendNames.length - 1; i++) { var horizontal = !!(w.config.legend.position === 'top' || w.config.legend.position === 'bottom'); var y = 0; var x = 0; var width = void 0; var text = legendFormatter(legendNames[i], { globals: w.globals, seriesIndex: i }); var collapsedSeries = 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 (horizontal) { var rect = graphics.getTextRects(text, fontSize); width = rect.width; this.rowHeight = rect.height + marginVert; x = this.existingWidth + padding + marginHorz; if (this.existingWidth + width + padding + marginHorz > w.globals.svgWidth) { currentRow = currentRow + 1; this.existingWidth = 0; x = this.existingWidth + padding + marginHorz; } if (w.config.legend.position === 'bottom') { y = w.globals.svgHeight - this.rowHeight; } else if (w.config.legend.position === 'top') { y = 0; } y = y + this.rowHeight * currentRow; } else { var _rect = graphics.getTextRects(text, fontSize); var height = _rect.height; this.rowHeight = height + marginVert; this.textMaxWidthArr.push(_rect.width); var _width = this.getTextMaxWidth() + marginHorz; currentRow = i + 1; if (this.existingHeight + height + padding > w.globals.svgHeight) { currentCol = currentCol + 1; this.existingHeight = 0; } x = padding + currentCol * _width; y = this.existingHeight + height; } var elPointOptions = { pSize: pSize, pRadius: w.config.legend.markers.radius, pWidth: w.config.legend.markers.strokeWidth, shape: w.config.legend.markers.shape, pointStrokeColor: w.config.legend.markers.strokeColor, pointFillColor: fillcolor[i], pointStrokeOpacity: 1, pointFillOpacity: 1, class: 'apexcharts-legend-point' }; var offsetYPt = pSize / 2 - 1 + w.config.legend.markers.strokeWidth; var elColor = graphics.drawMarker(x - padding + w.config.legend.markers.offsetX - 4, y - padding + offsetYPt + w.config.legend.markers.offsetY - 1, elPointOptions).attr({ 'rel': i + 1, 'data:collapsed': collapsedSeries }); if (collapsedSeries) { elColor.node.classList.add('inactive-legend'); } var elTextOpts = { x: x, y: y, foreColor: w.config.legend.labels.useSeriesColors ? w.globals.colors[i] : w.config.legend.labels.color, text: text, textAnchor: w.config.legend.textAnchor, fontSize: fontSize, fontFamily: fontFamily, cssClass: 'apexcharts-legend-text' }; this.existingWidth = this.existingWidth + width + marginHorz + padding + 5; this.existingHeight = this.existingHeight + this.rowHeight + padding / 4; totalWidth = totalWidth + width + padding + marginHorz; var elLegend = graphics.drawText(elTextOpts); w.globals.dom.elLegendWrap.add(elLegend); w.globals.dom.elLegendWrap.add(elColor); elLegend.node.classList.add('apexcharts-legend-series'); elLegend.attr({ 'rel': i + 1, 'data:collapsed': collapsedSeries }); if (collapsedSeries) { elLegend.node.classList.add('inactive-legend'); } if (!w.config.legend.onItemClick.toggleDataSeries) { elLegend.node.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: 'getTextMaxWidth', value: function getTextMaxWidth() { var largestWidth = 0; for (var i = 0; i < this.textMaxWidthArr.length; i++) { largestWidth = Math.max(largestWidth, this.textMaxWidthArr[i]); } this.maxTextWidth = largestWidth; return largestWidth; } }, { key: 'getLegendBBox', value: function getLegendBBox() { var w = this.w; var currLegendsWrapRect = w.globals.dom.baseEl.querySelector('.apexcharts-legend').getBBox(); var currLegendsWrapWidth = currLegendsWrapRect.width; var currLegendsWrapHeight = currLegendsWrapRect.height; return { clwh: currLegendsWrapHeight, clww: currLegendsWrapWidth }; } }, { key: 'translateLegendPoints', value: function translateLegendPoints(offsetX) { var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var w = this.w; var points = w.globals.dom.baseEl.querySelectorAll('.apexcharts-legend-point'); for (var lp = 0; lp < points.length; lp++) { if (offsetY === null) { var y = points[lp].getAttribute('transform'); if (y.indexOf(',') > -1) { offsetY = parseFloat(y.split(',')[1]); } else if (y.indexOf(' ') > -1) { offsetY = parseFloat(y.split(' ')[1]); } if (!offsetY) { offsetY = 0; } } points[lp].setAttribute('transform', 'translate(' + offsetX + ',' + offsetY + ')'); } } }, { key: 'setLegendXY', value: function setLegendXY(offsetX, offsetY) { var w = this.w; var legends = w.globals.dom.baseEl.querySelectorAll('.apexcharts-legend-series'); for (var l = 0; l < legends.length; l++) { var currX = parseInt(legends[l].getAttribute('x')); var currY = parseInt(legends[l].getAttribute('y')); _Graphics2.default.setAttrs(legends[l], { x: currX + offsetX, y: currY + offsetY }); } this.setLegendWrapXY(); } }, { key: 'setLegendWrapXY', value: function setLegendWrapXY() { var w = this.w; var elLegendWrap = w.globals.dom.baseEl.querySelector('.apexcharts-legend'); var legendRect = elLegendWrap.getBBox(); var legendTopPlusHeight = legendRect.y + legendRect.height; var x = w.config.legend.containerMargin.left - w.config.legend.containerMargin.right; var y = w.config.legend.containerMargin.top - w.config.legend.markers.size - 3; if (w.config.legend.position === 'bottom') { if (legendTopPlusHeight - 10 > w.globals.svgHeight) { y = y - (w.globals.svgHeight - legendRect.y + legendRect.height) / 8; } } if (w.config.legend.position === 'top') { var dim = new _Dimensions2.default(this.ctx); var titleH = dim.getMainTitleCoords().height; var subtitleH = dim.getSubTitleCoords().height; y = y + (titleH > 0 ? titleH - 10 : 0) + (subtitleH > 0 ? subtitleH - 10 : 0); } if (w.config.legend.position === 'right' || w.config.legend.position === 'left') { if (y < w.config.legend.markers.size) y = w.config.legend.markers.size; } elLegendWrap.setAttribute('transform', 'translate(' + x + ', ' + y + ')'); } }, { key: 'legendAlignCenterHorz', value: function legendAlignCenterHorz() { var w = this.w; var lRect = this.getLegendBBox(); var dimensions = new _Dimensions2.default(this.ctx); var titleRect = dimensions.getMainTitleCoords(); var subtitleRect = dimensions.getSubTitleCoords(); var offsetX = 20; var offsetY = 0; if (w.config.legend.horizontalAlign === 'right') { offsetX = w.globals.svgWidth - lRect.clww - offsetX; } else if (w.config.legend.horizontalAlign === 'center') { offsetX = (w.globals.svgWidth - lRect.clww) / 2; } // 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; } offsetX = offsetX + w.config.legend.offsetX; offsetY = offsetY + w.config.legend.offsetY; this.setLegendXY(offsetX, offsetY); this.translateLegendPoints(offsetX, offsetY); } }, { key: 'legendAlignVertical', value: function legendAlignVertical() { var w = this.w; var lRect = this.getLegendBBox(); var offsetCorrection = lRect.clwh + this.rowHeight * 1.2 < w.globals.svgHeight ? this.rowHeight : this.rowHeight / 2; var offsetY = 20; var offsetX = 0; if (w.config.legend.position === 'left') { offsetX = w.config.legend.markers.size + 10; } if (w.config.legend.verticalAlign === 'bottom') { offsetY = w.globals.svgHeight - lRect.clwh - offsetY; } else if (w.config.legend.verticalAlign === 'middle') { offsetY = (w.globals.svgHeight - lRect.clwh) / 2 - offsetCorrection; } offsetX = offsetX + w.config.legend.offsetX; offsetY = offsetY + w.config.legend.offsetY; this.setLegendXY(offsetX, offsetY); this.translateLegendPoints(offsetX, offsetY); if (w.config.legend.position === 'right') { this.moveLegendsToRight(); } } }, { key: 'moveLegendsToRight', value: function moveLegendsToRight() { var w = this.w; var lRect = this.getLegendBBox(); var offsetX = w.globals.svgWidth - lRect.clww - this.padding / 2; this.setLegendXY(offsetX, 0); this.translateLegendPoints(offsetX + w.config.legend.offsetX, null); } }, { 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-point'); 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 _series = new _Series2.default(this.ctx); _series.highlightRangeInSeries(e, e.target); } } } }, { key: 'onLegendClick', value: function onLegendClick(e) { var w = this.w; var me = this; if (e.target.classList.contains('apexcharts-legend-text') || e.target.classList.contains('apexcharts-legend-point')) { var seriesCnt = parseInt(e.target.getAttribute('rel')) - 1; if (w.globals.axisCharts || w.config.chart.type === 'radialBar') { w.globals.resized = true; // we don't want initial animations again var seriesEl = null; var isHidden = e.target.getAttribute('data:collapsed'); 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 === 'true') { if (w.globals.collapsedSeries.length > 0) { for (var c = 0; c < w.globals.collapsedSeries.length; c++) { if (w.globals.collapsedSeries[c].index === realIndex) { if (w.globals.axisCharts) { w.config.series[realIndex].data = w.globals.collapsedSeries[c].data.slice(); w.globals.collapsedSeries.splice(c, 1); w.globals.collapsedSeriesIndices.splice(c, 1); w.globals.risingSeries.push(realIndex); } else { w.config.series[realIndex] = w.globals.collapsedSeries[c].data; w.globals.collapsedSeries.splice(c, 1); w.globals.collapsedSeriesIndices.splice(c, 1); w.globals.risingSeries.push(realIndex); } me.ctx.updateSeriesInternal(w.config.series, w.globals.initialConfig.chart.animations.dynamicAnimation.enabled); } } } } else { if (w.globals.axisCharts) { 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); // mutating the user's config object here 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; me.ctx.updateSeriesInternal(w.config.series, w.globals.initialConfig.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'); _seriesEl.fire('click'); } } } }]); return Legend; }(); exports.default = Legend; /***/ }), /* 133 */ /***/ (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__(1); 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"); } } /** * 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; } _createClass(Range, [{ key: 'init', value: function init() { this.handleMinYMaxY(); this.handleMinXMaxX(); this.handleMinZMaxZ(); } // 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. }, { key: 'niceScale', value: function niceScale(yMin, yMax) { var ticks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10; if (yMin === Number.MIN_VALUE && yMax === 0 || !_Utils2.default.isNumber(yMin) && !_Utils2.default.isNumber(yMax)) { // when all values are 0 yMin = 0; yMax = 1; ticks = 1; var justRange = this.justRange(yMin, yMax, ticks); return justRange; } if (yMin > yMax) { // if somehow due to some wrong config, user sent max less than min, // adjust the min/max again yMin = yMax - 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 - 10; // some small value yMax = yMax + 10; // 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 = yMax - yMin; 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(this.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; } } // TODO: need to remove this condition below which makes this function tightly coupled with w. if (this.w.config.yaxis[0].max === undefined && this.w.config.yaxis[0].min === undefined) { 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: 'justRange', value: function justRange(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: 'handleMinYMaxY', value: function handleMinYMaxY() { var _this = this; var gl = this.w.globals; var cnf = this.w.config; gl.maxY = -Number.MAX_VALUE; gl.minY = Number.MIN_VALUE; var yaxis = cnf.yaxis; var minValInSeries = Number.MAX_VALUE; var getMinYMaxY = function getMinYMaxY(startingIndex, len) { var maxY = -Number.MAX_VALUE; var minY = Number.MIN_VALUE; for (var i = startingIndex; i < len; i++) { gl.dataPoints = Math.max(gl.dataPoints, gl.series[i].length); if (_Utils2.default.isIE()) { minY = Math.min.apply(Math, _toConsumableArray(gl.series[i]).concat([0])); } for (var j = 0; j < gl.series[i].length; j++) { if (gl.series[i][j] !== null && _Utils2.default.isNumber(gl.series[i][j])) { maxY = Math.max(maxY, gl.series[i][j]); minValInSeries = Math.min(minValInSeries, gl.series[i][j]); if (_Utils2.default.isFloat(gl.series[i][j])) { gl.yValueDecimal = Math.max(gl.yValueDecimal, gl.series[i][j].toString().split('.')[1].length); } if (minY > gl.series[i][j] && gl.series[i][j] < 0) { minY = gl.series[i][j]; } } else { gl.hasNullValues = true; } } } return { minY: minY, maxY: maxY }; }; 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 = getMinYMaxY(i, i + 1); gl.minYArr.push(minYMaxYArr.minY); gl.maxYArr.push(minYMaxYArr.maxY); } } // and then, get the minY and maxY from all series var minYMaxY = getMinYMaxY(0, gl.series.length); gl.minY = minYMaxY.minY;gl.maxY = minYMaxY.maxY; 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) { poss = poss + parseInt(gl.series[_i][j]); } else { negs = negs + parseInt(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 10000-12000, putting 0 as the lowest value is not so good idea if (cnf.chart.type === 'line' || cnf.chart.type === 'area' || cnf.chart.type === 'candlestick') { if (gl.minY === Number.MIN_VALUE && minValInSeries !== Number.MAX_SAFE_INTEGER) { gl.minY = Math.round(minValInSeries - minValInSeries * 2 / 100); gl.maxY = Math.round(gl.maxY + gl.maxY * 2 / 100); } } cnf.yaxis.map(function (yaxe, index) { // override all min/max values by user defined values (y axis) if (yaxe.max !== undefined && typeof yaxe.max === 'number') { gl.maxYArr[index] = yaxe.max; gl.maxY = yaxis[0].max; } if (yaxis[0].min !== undefined && typeof yaxis[0].min === 'number') { gl.minYArr[index] = yaxe.min; gl.minY = yaxis[0].min; } }); // after getting the yAxisScale, we need to call this function to recalculate the minYmaxY var reCalculateMinMaxY = function reCalculateMinMaxY(startingIndex, minY, maxY) { // user didn't provide tickAmount as well as y values are in small range var ticksY = yaxis[startingIndex]; if (typeof ticksY !== 'undefined') { ticksY = ticksY.tickAmount; } else { ticksY = 8; } if (maxY === -Number.MAX_VALUE || !_Utils2.default.isNumber(maxY)) { // no value in series. draw blank grid gl.yAxisScale.push(_this.justRange(0, 5, 5)); } else { gl.allSeriesCollapsed = false; gl.yAxisScale.push(_this.niceScale(minY, maxY, ticksY)); } }; // for multi y-axis we need different scales for each if (gl.isMultipleYAxis) { // here, we loop through the yaxis array and find the item which has "seriesName" property cnf.yaxis.forEach(function (y, 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 === y.seriesName && !gl.collapsedSeriesIndices.includes(si)) { index = si; } }); reCalculateMinMaxY(i, gl.minYArr[index], gl.maxYArr[index]); gl.minYArr[i] = gl.yAxisScale[i].niceMin; gl.maxYArr[i] = gl.yAxisScale[i].niceMax; }); } else { reCalculateMinMaxY(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; } } }, { key: 'handleMinXMaxX', value: function handleMinXMaxX() { var gl = this.w.globals;var cnf = this.w.config; // minX maxX starts here if (gl.dataXY) { 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) { gl.maxX = gl.labels[gl.labels.length - 1]; gl.initialmaxX = gl.labels[gl.labels.length - 1]; gl.minX = 1; gl.initialminX = 1; } // for numeric/datetime xaxis, we need to adjust some padding left and right as it cuts the markers and dataLabels when it's drawn over egde. // If user willingly disables this option, then skip if (cnf.grid.padding.left !== 0 && cnf.grid.padding.right !== 0) { if (cnf.xaxis.type === 'datetime' || gl.dataXY) { var minX = gl.minX - gl.svgWidth / gl.dataPoints * (Math.abs(gl.maxX - gl.minX) / gl.svgWidth) / 3; gl.minX = minX; gl.initialminX = minX; var maxX = gl.maxX + gl.svgWidth / gl.dataPoints * (Math.abs(gl.maxX - gl.minX) / gl.svgWidth) / 3; gl.maxX = maxX; gl.initialmaxX = maxX; } } var niceXRange = new Range(this.ctx); if (gl.dataXY || gl.noLabelsProvided) { var ticks = void 0; if (cnf.xaxis.tickAmount === undefined) { ticks = Math.round(gl.svgWidth / 150); if (ticks > gl.dataPoints && gl.dataPoints !== 0) { ticks = gl.dataPoints - 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 = niceXRange.justRange(gl.minX, gl.maxX, ticks); // we will still store these labels as the count for this will be different (to draw grid and labels placement) gl.labels = gl.xAxisScale.result.slice(); } else { gl.xAxisScale = niceXRange.justRange(1, ticks, ticks); if (gl.noLabelsProvided && gl.labels.length > 0) { gl.xAxisScale = niceXRange.justRange(1, gl.labels.length, ticks - 1); gl.seriesX = gl.labels.slice(); } gl.labels = gl.xAxisScale.result.slice(); } } } }, { key: 'handleMinZMaxZ', value: function handleMinZMaxZ() { var gl = this.w.globals; // minZ, maxZ starts here if (gl.dataXYZ) { 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]); } } } } } } }, { key: 'log10', value: function log10(x) { return Math.log(x) / Math.LN10; } }]); return Range; }(); exports.default = Range; /***/ }), /* 134 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(50); var _Config2 = _interopRequireDefault(_Config); var _Utils = __webpack_require__(1); 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 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; } _createClass(Responsive, [{ key: 'checkResponsiveConfig', value: function checkResponsiveConfig() { var w = this.w; var cnf = w.config; // check if responsive config exists if (cnf.responsive === undefined) return; var newOptions = {}; for (var i = 0; i < cnf.responsive.length; i++) { var width = window.innerWidth > 0 ? window.innerWidth : screen.width; if (width < cnf.responsive[i].breakpoint) { newOptions = _Utils2.default.extend(w.config, cnf.responsive[i].options); this.overrideResponsiveOptions(newOptions); break; } else { newOptions = _Utils2.default.extend(w.config, w.globals.initialConfig); this.overrideResponsiveOptions(newOptions); } } } }, { key: 'overrideResponsiveOptions', value: function overrideResponsiveOptions(newOptions) { var newConfig = new _Config2.default(newOptions).init(); this.w.config = newConfig; } }]); return Responsive; }(); module.exports = Responsive; /***/ }), /* 135 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(1); 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(); 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); // 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) { var distributed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var w = this.w; var len = w.globals.series.length; if (distributed === null) { distributed = w.config.chart.type === 'bar' && w.config.plotOptions.bar.distributed; } else { distributed = false; } 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: '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 = ['#546E7A', '#4ecdc4', '#c7f464', '#81D4FA', '#fd6a6a']; 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', '#C5D86D']; break; case 'palette8': this.colors = ['#662E9B', '#F86624', '#F9C80E', '#EA3546', '#43BCCD']; break; case 'palette9': this.colors = ['#5fba7d', '#f48024', '#8884d8', '#c34459', '#f9ee45']; break; case 'palette10': this.colors = ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF']; break; case 'palette11': this.colors = ['#A300D6', '#7D02EB', '#5653FE', '#2983FF', '#00B1F2']; break; default: this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']; break; } return this.colors; } }]); return Theme; }(); module.exports = Theme; /***/ }), /* 136 */ /***/ (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__(0); 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; /***/ }), /* 137 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _Utils = __webpack_require__(1); var _Utils2 = _interopRequireDefault(_Utils); var _Toolbar2 = __webpack_require__(77); var _Toolbar3 = _interopRequireDefault(_Toolbar2); 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 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'); var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = this.eventList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var event = _step.value; this.hoverArea.addEventListener(event, me.svgMouseEvents.bind(me, xyRatios), false); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } } // remove the event listeners which were previously added on hover area }, { key: 'destroy', value: function destroy() { var me = this; var _iteratorNormalCompletion2 = true; var _didIteratorError2 = false; var _iteratorError2 = undefined; try { for (var _iterator2 = this.eventList[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { var event = _step2.value; if (this.hoverArea) { this.hoverArea.removeEventListener(event, me.svgMouseEvents.bind(me, me.xyRatios), false); } } } catch (err) { _didIteratorError2 = true; _iteratorError2 = err; } finally { try { if (!_iteratorNormalCompletion2 && _iterator2.return) { _iterator2.return(); } } finally { if (_didIteratorError2) { throw _iteratorError2; } } } 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(); } 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, height: height, 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() { var selectionRect = this.selectionRect; if (selectionRect) { selectionRect.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 - 1; var selectionHeight = me.clientY - gridRectDim.top - startY; var translateX = 0; var translateY = 0; var selectionRect = {}; // 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); return selectionRect; } }, { key: 'selectionDragging', value: function selectionDragging(type, e) { var _this2 = 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') { // 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 = _this2.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(_this2.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]; }); } var beforeZoomRange = toolbar.getBeforeZoomRange(xaxis, yaxis); if (beforeZoomRange !== null) { xaxis = beforeZoomRange.xaxis; yaxis = beforeZoomRange.yaxis; } if (zoomtype === 'x') { me.ctx.updateOptionsInternal({ xaxis: xaxis }, false, true); } else if (zoomtype === 'y') { me.ctx.updateOptionsInternal({ yaxis: yaxis }, false, true); } else { me.ctx.updateOptionsInternal({ xaxis: xaxis, yaxis: yaxis }, false, true); } 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; 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; } this.ctx.updateOptionsInternal({ xaxis: { min: xLowestValue, max: xHighestValue } }, 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); module.exports = ZoomPanSelection; /***/ }), /* 138 */ /***/ (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__(25); var _Animations2 = _interopRequireDefault(_Animations); var _Graphics = __webpack_require__(0); var _Graphics2 = _interopRequireDefault(_Graphics); var _XAxis = __webpack_require__(48); var _XAxis2 = _interopRequireDefault(_XAxis); 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; } // actual grid }, { 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 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; var inversedGrid = !!(w.config.plotOptions.bar.horizontal && w.config.chart.type === 'bar'); if (!inversedGrid) { 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 = w.globals.padHorizontal; 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) { var line = graphics.drawLine(x1, y1, x2, y2, w.config.grid.borderColor, strokeDashArray); line.node.classList.add('apexcharts-gridline'); elg.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); } } else { var xCountForCategoryCharts = xCount; for (var _i2 = 0; _i2 < xCountForCategoryCharts; _i2++) { var x1Count = xCountForCategoryCharts; if (w.globals.dataXY && 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'); elg.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); elg.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; } } // rows background bands if (w.config.grid.row.colors !== undefined && w.config.grid.row.colors.length > 0) { var _x4 = 0; var _y3 = 0; var _y4 = w.globals.gridHeight / tickAmount; var _x5 = w.globals.gridWidth; for (var _i4 = 0, c = 0; _i4 < tickAmount; _i4++, c++) { if (c >= w.config.grid.row.colors.length) { c = 0; } var color = w.config.grid.row.colors[c]; var rect = graphics.drawRect(_x4, _y3, _x5, _y4, 0, color, w.config.grid.row.opacity); elg.add(rect); rect.node.classList.add('apexcharts-gridRow'); _y3 = _y3 + w.globals.gridHeight / tickAmount; } } // columns background bands if (w.config.grid.column.colors !== undefined && w.config.grid.column.colors.length > 0) { var _x6 = w.globals.padHorizontal; var _y5 = 0; var _x7 = w.globals.padHorizontal + w.globals.gridWidth / xCount; var _y6 = w.globals.gridHeight; for (var _i5 = 0, _c = 0; _i5 < xCount; _i5++, _c++) { if (_c >= w.config.grid.column.colors.length) { _c = 0; } var _color = w.config.grid.column.colors[_c]; var _rect = graphics.drawRect(_x6, _y5, _x7, _y6, 0, _color, w.config.grid.column.opacity); _rect.node.classList.add('apexcharts-gridColumn'); elg.add(_rect); _x6 = _x6 + w.globals.gridWidth / xCount; } } } else { xCount = tickAmount; // draw vertical lines if (w.config.grid.xaxis.lines.show || w.config.xaxis.axisTicks.show) { var _x8 = w.globals.padHorizontal; var _y7 = 0; var _x9 = w.globals.padHorizontal; var _y8 = w.globals.gridHeight; for (var _i6 = 0; _i6 < xCount + 1; _i6++) { _x8 = _x8 + w.globals.gridWidth / xCount + 0.3; _x9 = _x8; // skip the last vertical line if (_i6 === xCount - 1) break; if (w.config.grid.xaxis.lines.show) { var _line3 = graphics.drawLine(_x8, _y7, _x9, _y8, w.config.grid.borderColor, strokeDashArray); _line3.node.classList.add('apexcharts-gridline'); elg.add(_line3); if (this.animX) { this.animateLine(_line3, { x1: 0, x2: 0 }, { x1: _x8, x2: _x9 }); } } // skip the first vertical line var _xAxis2 = new _XAxis2.default(this.ctx); _xAxis2.drawXaxisTicks(_x8, elg); } } // draw horizontal lines if (w.config.grid.yaxis.lines.show) { var _x10 = 0; var _y9 = 0; var _y10 = 0; var _x11 = w.globals.gridWidth; for (var _i7 = 0; _i7 < w.globals.dataPoints + 1; _i7++) { var _line4 = graphics.drawLine(_x10, _y9, _x11, _y10, w.config.grid.borderColor, strokeDashArray); elg.add(_line4); _line4.node.classList.add('apexcharts-gridline'); if (this.animY) { this.animateLine(_line4, { y1: _y9 + 20, y2: _y10 + 20 }, { y1: _y9, y2: _y10 }); } _y9 = _y9 + w.globals.gridHeight / w.globals.dataPoints; _y10 = _y9; } } } return { el: elg, xAxisTickWidth: 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; /***/ }), /* 139 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; 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__(1); 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 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 { dataLabels: { enabled: false }, stroke: { width: 5, curve: 'straight' }, markers: { size: 5 }, title: { style: { fontFamily: 'Helvetica, Arial, sans-serif' } }, tooltip: { // followCursor: true, }, xaxis: { crosshairs: { width: 1 } }, yaxis: { labels: { style: { fontFamily: 'Helvetica, Arial, sans-serif' } } } }; } }, { 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, fontFamily: 'Helvetica, Arial, sans-serif' }, 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, toolbar: { show: false } }, plotOptions: { bar: { dataLabels: { position: 'center' } } }, dataLabels: { style: { colors: ['#fff'], fontFamily: 'Helvetica, Arial, sans-serif' } }, stroke: { width: 0 }, fill: { opacity: 0.85 }, legend: { markers: { shape: 'square', radius: 2, size: 8 }, fontFamily: 'Helvetica, Arial, sans-serif' }, title: { style: { fontFamily: 'Helvetica, Arial, sans-serif' } }, tooltip: { shared: false }, xaxis: { tooltip: { enabled: false }, crosshairs: { width: 'barWidth', position: 'back', fill: { type: 'gradient' }, dropShadow: { enabled: false } } }, yaxis: [{ tooltip: { enabled: false } }] }; } }, { 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 '