UNPKG

apexcharts

Version:

A JavaScript Chart Library

1,530 lines (1,319 loc) 1.19 MB
/*! * ApexCharts v3.44.2 * (c) 2018-2023 ApexCharts * Released under the MIT License. */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ApexCharts = factory()); })(this, (function () { 'use strict'; function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function (obj) { return typeof obj; }; } else { _typeof = function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } /* ** Generic functions which are not dependent on ApexCharts */ var Utils$1 = /*#__PURE__*/function () { function Utils() { _classCallCheck(this, Utils); } _createClass(Utils, [{ key: "shadeRGBColor", value: function shadeRGBColor(percent, color) { var f = color.split(','), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = parseInt(f[0].slice(4), 10), G = parseInt(f[1], 10), B = parseInt(f[2], 10); return 'rgb(' + (Math.round((t - R) * p) + R) + ',' + (Math.round((t - G) * p) + G) + ',' + (Math.round((t - B) * p) + B) + ')'; } }, { key: "shadeHexColor", value: function shadeHexColor(percent, color) { var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00ff, B = f & 0x0000ff; return '#' + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1); } // beautiful color shading blending code // http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors }, { key: "shadeColor", value: function shadeColor(p, color) { if (Utils.isColorHex(color)) { return this.shadeHexColor(p, color); } else { return this.shadeRGBColor(p, color); } } }], [{ key: "bind", value: function bind(fn, me) { return function () { return fn.apply(me, arguments); }; } }, { key: "isObject", value: function isObject(item) { return item && _typeof(item) === 'object' && !Array.isArray(item) && item != null; } // Type checking that works across different window objects }, { key: "is", value: function is(type, val) { return Object.prototype.toString.call(val) === '[object ' + type + ']'; } }, { key: "listToArray", value: function listToArray(list) { var i, array = []; for (i = 0; i < list.length; i++) { array[i] = list[i]; } return array; } // to extend defaults with user options // credit: http://stackoverflow.com/questions/27936772/deep-object-merging-in-es6-es7#answer-34749873 }, { key: "extend", value: function extend(target, source) { var _this = this; if (typeof Object.assign !== 'function') { (function () { Object.assign = function (target) { if (target === undefined || target === null) { throw new TypeError('Cannot convert undefined or null to object'); } var output = Object(target); for (var index = 1; index < arguments.length; index++) { var _source = arguments[index]; if (_source !== undefined && _source !== null) { for (var nextKey in _source) { if (_source.hasOwnProperty(nextKey)) { output[nextKey] = _source[nextKey]; } } } } return output; }; })(); } var output = Object.assign({}, target); if (this.isObject(target) && this.isObject(source)) { Object.keys(source).forEach(function (key) { if (_this.isObject(source[key])) { if (!(key in target)) { Object.assign(output, _defineProperty({}, key, source[key])); } else { output[key] = _this.extend(target[key], source[key]); } } else { Object.assign(output, _defineProperty({}, key, source[key])); } }); } return output; } }, { key: "extendArray", value: function extendArray(arrToExtend, resultArr) { var extendedArr = []; arrToExtend.map(function (item) { extendedArr.push(Utils.extend(resultArr, item)); }); arrToExtend = extendedArr; return arrToExtend; } // If month counter exceeds 12, it starts again from 1 }, { key: "monthMod", value: function monthMod(month) { return month % 12; } }, { key: "clone", value: function clone(source) { if (Utils.is('Array', source)) { var cloneResult = []; for (var i = 0; i < source.length; i++) { cloneResult[i] = this.clone(source[i]); } return cloneResult; } else if (Utils.is('Null', source)) { // fixes an issue where null values were converted to {} return null; } else if (Utils.is('Date', source)) { return source; } else if (_typeof(source) === 'object') { var _cloneResult = {}; for (var prop in source) { if (source.hasOwnProperty(prop)) { _cloneResult[prop] = this.clone(source[prop]); } } return _cloneResult; } else { return source; } } }, { key: "log10", value: function log10(x) { return Math.log(x) / Math.LN10; } }, { key: "roundToBase10", value: function roundToBase10(x) { return Math.pow(10, Math.floor(Math.log10(x))); } }, { key: "roundToBase", value: function roundToBase(x, base) { return Math.pow(base, Math.floor(Math.log(x) / Math.log(base))); } }, { key: "parseNumber", value: function parseNumber(val) { if (val === null) return val; return parseFloat(val); } }, { key: "stripNumber", value: function stripNumber(num) { var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2; return Number.isInteger(num) ? num : parseFloat(num.toPrecision(precision)); } }, { key: "randomId", value: function randomId() { return (Math.random() + 1).toString(36).substring(4); } }, { key: "noExponents", value: function noExponents(val) { var data = String(val).split(/[eE]/); if (data.length === 1) return data[0]; var z = '', sign = val < 0 ? '-' : '', str = data[0].replace('.', ''), mag = Number(data[1]) + 1; if (mag < 0) { z = sign + '0.'; while (mag++) { z += '0'; } return z + str.replace(/^-/, ''); } mag -= str.length; while (mag--) { z += '0'; } return str + z; } }, { key: "getDimensions", value: function getDimensions(el) { var computedStyle = getComputedStyle(el, null); var elementHeight = el.clientHeight; var elementWidth = el.clientWidth; elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom); elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight); return [elementWidth, elementHeight]; } }, { key: "getBoundingClientRect", value: function getBoundingClientRect(element) { var rect = element.getBoundingClientRect(); return { top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left, width: element.clientWidth, height: element.clientHeight, x: rect.left, y: rect.top }; } }, { key: "getLargestStringFromArr", value: function getLargestStringFromArr(arr) { return arr.reduce(function (a, b) { if (Array.isArray(b)) { b = b.reduce(function (aa, bb) { return aa.length > bb.length ? aa : bb; }); } return a.length > b.length ? a : b; }, 0); } // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#answer-12342275 }, { key: "hexToRgba", value: function hexToRgba() { var hex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#999999'; var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6; if (hex.substring(0, 1) !== '#') { hex = '#999999'; } var h = hex.replace('#', ''); h = h.match(new RegExp('(.{' + h.length / 3 + '})', 'g')); for (var i = 0; i < h.length; i++) { h[i] = parseInt(h[i].length === 1 ? h[i] + h[i] : h[i], 16); } if (typeof opacity !== 'undefined') h.push(opacity); return 'rgba(' + h.join(',') + ')'; } }, { key: "getOpacityFromRGBA", value: function getOpacityFromRGBA(rgba) { return parseFloat(rgba.replace(/^.*,(.+)\)/, '$1')); } }, { key: "rgb2hex", value: function rgb2hex(rgb) { rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); return rgb && rgb.length === 4 ? '#' + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''; } }, { key: "isColorHex", value: function isColorHex(color) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i.test(color); } }, { key: "getPolygonPos", value: function getPolygonPos(size, dataPointsLen) { var dotsArray = []; var angle = Math.PI * 2 / dataPointsLen; for (var i = 0; i < dataPointsLen; i++) { var curPos = {}; curPos.x = size * Math.sin(i * angle); curPos.y = -size * Math.cos(i * angle); dotsArray.push(curPos); } return dotsArray; } }, { key: "polarToCartesian", value: function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians) }; } }, { key: "escapeString", value: function escapeString(str) { var escapeWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'x'; var newStr = str.toString().slice(); newStr = newStr.replace(/[` ~!@#$%^&*()|+\=?;:'",.<>{}[\]\\/]/gi, escapeWith); return newStr; } }, { key: "negToZero", value: function negToZero(val) { return val < 0 ? 0 : val; } }, { key: "moveIndexInArray", value: function moveIndexInArray(arr, old_index, new_index) { if (new_index >= arr.length) { var k = new_index - arr.length + 1; while (k--) { arr.push(undefined); } } arr.splice(new_index, 0, arr.splice(old_index, 1)[0]); return arr; } }, { key: "extractNumber", value: function extractNumber(s) { return parseFloat(s.replace(/[^\d.]*/g, '')); } }, { key: "findAncestor", value: function findAncestor(el, cls) { while ((el = el.parentElement) && !el.classList.contains(cls)) { } return el; } }, { key: "setELstyles", value: function setELstyles(el, styles) { for (var key in styles) { if (styles.hasOwnProperty(key)) { el.style.key = styles[key]; } } } }, { key: "isNumber", value: function isNumber(value) { return !isNaN(value) && parseFloat(Number(value)) === value && !isNaN(parseInt(value, 10)); } }, { key: "isFloat", value: function isFloat(n) { return Number(n) === n && n % 1 !== 0; } }, { key: "isSafari", value: function isSafari() { return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); } }, { key: "isFirefox", value: function isFirefox() { return navigator.userAgent.toLowerCase().indexOf('firefox') > -1; } }, { key: "isIE11", value: function isIE11() { if (window.navigator.userAgent.indexOf('MSIE') !== -1 || window.navigator.appVersion.indexOf('Trident/') > -1) { return true; } } }, { key: "isIE", value: function isIE() { var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); if (msie > 0) { // IE 10 or older => return version number return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); } var trident = ua.indexOf('Trident/'); if (trident > 0) { // IE 11 => return version number var rv = ua.indexOf('rv:'); return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); } var edge = ua.indexOf('Edge/'); if (edge > 0) { // Edge (IE 12+) => return version number return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); } // other browser return false; } }]); return Utils; }(); /** * ApexCharts Animation Class. * * @module Animations **/ var Animations = /*#__PURE__*/function () { function Animations(ctx) { _classCallCheck(this, Animations); this.ctx = ctx; this.w = ctx.w; this.setEasingFunctions(); } _createClass(Animations, [{ key: "setEasingFunctions", value: function setEasingFunctions() { var easing; if (this.w.globals.easing) return; var userDefinedEasing = this.w.config.chart.animations.easing; switch (userDefinedEasing) { case 'linear': { easing = '-'; break; } case 'easein': { easing = '<'; break; } case 'easeout': { easing = '>'; break; } case 'easeinout': { easing = '<>'; break; } case 'swing': { easing = function easing(pos) { var s = 1.70158; var ret = (pos -= 1) * pos * ((s + 1) * pos + s) + 1; return ret; }; break; } case 'bounce': { easing = function easing(pos) { var ret = ''; if (pos < 1 / 2.75) { ret = 7.5625 * pos * pos; } else if (pos < 2 / 2.75) { ret = 7.5625 * (pos -= 1.5 / 2.75) * pos + 0.75; } else if (pos < 2.5 / 2.75) { ret = 7.5625 * (pos -= 2.25 / 2.75) * pos + 0.9375; } else { ret = 7.5625 * (pos -= 2.625 / 2.75) * pos + 0.984375; } return ret; }; break; } case 'elastic': { easing = function easing(pos) { if (pos === !!pos) return pos; return Math.pow(2, -10 * pos) * Math.sin((pos - 0.075) * (2 * Math.PI) / 0.3) + 1; }; break; } default: { easing = '<>'; } } this.w.globals.easing = easing; } }, { key: "animateLine", value: function animateLine(el, from, to, speed) { el.attr(from).animate(speed).attr(to); } /* ** Animate radius of a circle element */ }, { key: "animateMarker", value: function animateMarker(el, from, to, speed, easing, cb) { if (!from) from = 0; el.attr({ r: from, width: from, height: from }).animate(speed, easing).attr({ r: to, width: to.width, height: to.height }).afterAll(function () { cb(); }); } /* ** Animate radius and position of a circle element */ }, { key: "animateCircle", value: function animateCircle(el, from, to, speed, easing) { el.attr({ r: from.r, cx: from.cx, cy: from.cy }).animate(speed, easing).attr({ r: to.r, cx: to.cx, cy: to.cy }); } /* ** Animate rect properties */ }, { key: "animateRect", value: function animateRect(el, from, to, speed, fn) { el.attr(from).animate(speed).attr(to).afterAll(function () { return fn(); }); } }, { key: "animatePathsGradually", value: function animatePathsGradually(params) { var el = params.el, realIndex = params.realIndex, j = params.j, fill = params.fill, pathFrom = params.pathFrom, pathTo = params.pathTo, speed = params.speed, delay = params.delay; var me = this; var w = this.w; var delayFactor = 0; if (w.config.chart.animations.animateGradually.enabled) { delayFactor = w.config.chart.animations.animateGradually.delay; } if (w.config.chart.animations.dynamicAnimation.enabled && w.globals.dataChanged && w.config.chart.type !== 'bar') { // disabled due to this bug - https://github.com/apexcharts/vue-apexcharts/issues/75 delayFactor = 0; } me.morphSVG(el, realIndex, j, w.config.chart.type === 'line' && !w.globals.comboCharts ? 'stroke' : fill, pathFrom, pathTo, speed, delay * delayFactor); } }, { key: "showDelayedElements", value: function showDelayedElements() { this.w.globals.delayedElements.forEach(function (d) { var ele = d.el; ele.classList.remove('apexcharts-element-hidden'); ele.classList.add('apexcharts-hidden-element-shown'); }); } }, { key: "animationCompleted", value: function animationCompleted(el) { var w = this.w; if (w.globals.animationEnded) return; w.globals.animationEnded = true; this.showDelayedElements(); if (typeof w.config.chart.events.animationEnd === 'function') { w.config.chart.events.animationEnd(this.ctx, { el: el, w: w }); } } // SVG.js animation for morphing one path to another }, { key: "morphSVG", value: function morphSVG(el, realIndex, j, fill, pathFrom, pathTo, speed, delay) { var _this = this; var w = this.w; if (!pathFrom) { pathFrom = el.attr('pathFrom'); } if (!pathTo) { pathTo = el.attr('pathTo'); } var disableAnimationForCorrupPath = function disableAnimationForCorrupPath(path) { if (w.config.chart.type === 'radar') { // radar chart drops the path to bottom and hence a corrup path looks ugly // therefore, disable animation for such a case speed = 1; } return "M 0 ".concat(w.globals.gridHeight); }; if (!pathFrom || pathFrom.indexOf('undefined') > -1 || pathFrom.indexOf('NaN') > -1) { pathFrom = disableAnimationForCorrupPath(); } if (!pathTo || pathTo.indexOf('undefined') > -1 || pathTo.indexOf('NaN') > -1) { pathTo = disableAnimationForCorrupPath(); } if (!w.globals.shouldAnimate) { speed = 1; } el.plot(pathFrom).animate(1, w.globals.easing, delay).plot(pathFrom).animate(speed, w.globals.easing, delay).plot(pathTo).afterAll(function () { // a flag to indicate that the original mount function can return true now as animation finished here if (Utils$1.isNumber(j)) { if (j === w.globals.series[w.globals.maxValsInArrayIndex].length - 2 && w.globals.shouldAnimate) { _this.animationCompleted(el); } } else if (fill !== 'none' && w.globals.shouldAnimate) { if (!w.globals.comboCharts && realIndex === w.globals.series.length - 1 || w.globals.comboCharts) { _this.animationCompleted(el); } } _this.showDelayedElements(); }); } }]); return Animations; }(); /** * ApexCharts Filters Class for setting hover/active states on the paths. * * @module Formatters **/ var Filters = /*#__PURE__*/function () { function Filters(ctx) { _classCallCheck(this, Filters); this.ctx = ctx; this.w = ctx.w; } // create a re-usable filter which can be appended other filter effects and applied to multiple elements _createClass(Filters, [{ key: "getDefaultFilter", value: function getDefaultFilter(el, i) { var w = this.w; el.unfilter(true); var filter = new window.SVG.Filter(); filter.size('120%', '180%', '-5%', '-40%'); if (w.config.states.normal.filter !== 'none') { this.applyFilter(el, i, w.config.states.normal.filter.type, w.config.states.normal.filter.value); } else { if (w.config.chart.dropShadow.enabled) { this.dropShadow(el, w.config.chart.dropShadow, i); } } } }, { key: "addNormalFilter", value: function addNormalFilter(el, i) { var w = this.w; // revert shadow if it was there // but, ignore marker as marker don't have dropshadow yet if (w.config.chart.dropShadow.enabled && !el.node.classList.contains('apexcharts-marker')) { this.dropShadow(el, w.config.chart.dropShadow, i); } } // appends dropShadow to the filter object which can be chained with other filter effects }, { key: "addLightenFilter", value: function addLightenFilter(el, i, attrs) { var _this = this; var w = this.w; var intensity = attrs.intensity; el.unfilter(true); var filter = new window.SVG.Filter(); el.filter(function (add) { var shadowAttr = w.config.chart.dropShadow; if (shadowAttr.enabled) { filter = _this.addShadow(add, i, shadowAttr); } else { filter = add; } filter.componentTransfer({ rgb: { type: 'linear', slope: 1.5, intercept: intensity } }); }); el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse'); this._scaleFilterSize(el.filterer.node); } // appends dropShadow to the filter object which can be chained with other filter effects }, { key: "addDarkenFilter", value: function addDarkenFilter(el, i, attrs) { var _this2 = this; var w = this.w; var intensity = attrs.intensity; el.unfilter(true); var filter = new window.SVG.Filter(); el.filter(function (add) { var shadowAttr = w.config.chart.dropShadow; if (shadowAttr.enabled) { filter = _this2.addShadow(add, i, shadowAttr); } else { filter = add; } filter.componentTransfer({ rgb: { type: 'linear', slope: intensity } }); }); el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse'); this._scaleFilterSize(el.filterer.node); } }, { key: "applyFilter", value: function applyFilter(el, i, filter) { var intensity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.5; switch (filter) { case 'none': { this.addNormalFilter(el, i); break; } case 'lighten': { this.addLightenFilter(el, i, { intensity: intensity }); break; } case 'darken': { this.addDarkenFilter(el, i, { intensity: intensity }); break; } } } // appends dropShadow to the filter object which can be chained with other filter effects }, { key: "addShadow", value: function addShadow(add, i, attrs) { var blur = attrs.blur, top = attrs.top, left = attrs.left, color = attrs.color, opacity = attrs.opacity; var shadowBlur = add.flood(Array.isArray(color) ? color[i] : color, opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur).merge(add.source); return add.blend(add.source, shadowBlur); } // directly adds dropShadow to the element and returns the same element. // the only way it is different from the addShadow() function is that addShadow is chainable to other filters, while this function discards all filters and add dropShadow }, { key: "dropShadow", value: function dropShadow(el, attrs) { var i = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; var top = attrs.top, left = attrs.left, blur = attrs.blur, color = attrs.color, opacity = attrs.opacity, noUserSpaceOnUse = attrs.noUserSpaceOnUse; var w = this.w; el.unfilter(true); if (Utils$1.isIE() && w.config.chart.type === 'radialBar') { // in radialbar charts, dropshadow is clipping actual drawing in IE return el; } color = Array.isArray(color) ? color[i] : color; el.filter(function (add) { var shadowBlur = null; if (Utils$1.isSafari() || Utils$1.isFirefox() || Utils$1.isIE()) { // safari/firefox/IE have some alternative way to use this filter shadowBlur = add.flood(color, opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur); } else { shadowBlur = add.flood(color, opacity).composite(add.sourceAlpha, 'in').offset(left, top).gaussianBlur(blur).merge(add.source); } add.blend(add.source, shadowBlur); }); if (!noUserSpaceOnUse) { el.filterer.node.setAttribute('filterUnits', 'userSpaceOnUse'); } this._scaleFilterSize(el.filterer.node); return el; } }, { key: "setSelectionFilter", value: function setSelectionFilter(el, realIndex, dataPointIndex) { var w = this.w; if (typeof w.globals.selectedDataPoints[realIndex] !== 'undefined') { if (w.globals.selectedDataPoints[realIndex].indexOf(dataPointIndex) > -1) { el.node.setAttribute('selected', true); var activeFilter = w.config.states.active.filter; if (activeFilter !== 'none') { this.applyFilter(el, realIndex, activeFilter.type, activeFilter.value); } } } } }, { key: "_scaleFilterSize", value: function _scaleFilterSize(el) { var setAttributes = function setAttributes(attrs) { for (var key in attrs) { if (attrs.hasOwnProperty(key)) { el.setAttribute(key, attrs[key]); } } }; setAttributes({ width: '200%', height: '200%', x: '-50%', y: '-50%' }); } }]); return Filters; }(); /** * ApexCharts Graphics Class for all drawing operations. * * @module Graphics **/ var Graphics = /*#__PURE__*/function () { function Graphics(ctx) { _classCallCheck(this, Graphics); this.ctx = ctx; this.w = ctx.w; } /***************************************************************************** * * * SVG Path Rounding Function * * Copyright (C) 2014 Yona Appletree * * * * Licensed under the Apache License, Version 2.0 (the "License"); * * you may not use this file except in compliance with the License. * * You may obtain a copy of the License at * * * * http://www.apache.org/licenses/LICENSE-2.0 * * * * Unless required by applicable law or agreed to in writing, software * * distributed under the License is distributed on an "AS IS" BASIS, * * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * * See the License for the specific language governing permissions and * * limitations under the License. * * * *****************************************************************************/ /** * SVG Path rounding function. Takes an input path string and outputs a path * string where all line-line corners have been rounded. Only supports absolute * commands at the moment. * * @param pathString The SVG input path * @param radius The amount to round the corners, either a value in the SVG * coordinate space, or, if useFractionalRadius is true, a value * from 0 to 1. * @returns A new SVG path string with the rounding */ _createClass(Graphics, [{ key: "roundPathCorners", value: function roundPathCorners(pathString, radius) { if (pathString.indexOf('NaN') > -1) pathString = ''; function moveTowardsLength(movingPoint, targetPoint, amount) { var width = targetPoint.x - movingPoint.x; var height = targetPoint.y - movingPoint.y; var distance = Math.sqrt(width * width + height * height); return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance)); } function moveTowardsFractional(movingPoint, targetPoint, fraction) { return { x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction, y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction }; } // Adjusts the ending position of a command function adjustCommand(cmd, newPoint) { if (cmd.length > 2) { cmd[cmd.length - 2] = newPoint.x; cmd[cmd.length - 1] = newPoint.y; } } // Gives an {x, y} object for a command's ending position function pointForCommand(cmd) { return { x: parseFloat(cmd[cmd.length - 2]), y: parseFloat(cmd[cmd.length - 1]) }; } // Split apart the path, handing concatonated letters and numbers var pathParts = pathString.split(/[,\s]/).reduce(function (parts, part) { var match = part.match('([a-zA-Z])(.+)'); if (match) { parts.push(match[1]); parts.push(match[2]); } else { parts.push(part); } return parts; }, []); // Group the commands with their arguments for easier handling var commands = pathParts.reduce(function (commands, part) { if (parseFloat(part) == part && commands.length) { commands[commands.length - 1].push(part); } else { commands.push([part]); } return commands; }, []); // The resulting commands, also grouped var resultCommands = []; if (commands.length > 1) { var startPoint = pointForCommand(commands[0]); // Handle the close path case with a "virtual" closing line var virtualCloseLine = null; if (commands[commands.length - 1][0] == 'Z' && commands[0].length > 2) { virtualCloseLine = ['L', startPoint.x, startPoint.y]; commands[commands.length - 1] = virtualCloseLine; } // We always use the first command (but it may be mutated) resultCommands.push(commands[0]); for (var cmdIndex = 1; cmdIndex < commands.length; cmdIndex++) { var prevCmd = resultCommands[resultCommands.length - 1]; var curCmd = commands[cmdIndex]; // Handle closing case var nextCmd = curCmd == virtualCloseLine ? commands[1] : commands[cmdIndex + 1]; // Nasty logic to decide if this path is a candidite. if (nextCmd && prevCmd && prevCmd.length > 2 && curCmd[0] == 'L' && nextCmd.length > 2 && nextCmd[0] == 'L') { // Calc the points we're dealing with var prevPoint = pointForCommand(prevCmd); var curPoint = pointForCommand(curCmd); var nextPoint = pointForCommand(nextCmd); // The start and end of the cuve are just our point moved towards the previous and next points, respectivly var curveStart, curveEnd; curveStart = moveTowardsLength(curPoint, prevPoint, radius); curveEnd = moveTowardsLength(curPoint, nextPoint, radius); // Adjust the current command and add it adjustCommand(curCmd, curveStart); curCmd.origPoint = curPoint; resultCommands.push(curCmd); // The curve control points are halfway between the start/end of the curve and // the original point var startControl = moveTowardsFractional(curveStart, curPoint, 0.5); var endControl = moveTowardsFractional(curPoint, curveEnd, 0.5); // Create the curve var curveCmd = ['C', startControl.x, startControl.y, endControl.x, endControl.y, curveEnd.x, curveEnd.y]; // Save the original point for fractional calculations curveCmd.origPoint = curPoint; resultCommands.push(curveCmd); } else { // Pass through commands that don't qualify resultCommands.push(curCmd); } } // Fix up the starting point and restore the close path if the path was orignally closed if (virtualCloseLine) { var newStartPoint = pointForCommand(resultCommands[resultCommands.length - 1]); resultCommands.push(['Z']); adjustCommand(resultCommands[0], newStartPoint); } } else { resultCommands = commands; } return resultCommands.reduce(function (str, c) { return str + c.join(' ') + ' '; }, ''); } }, { 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 strokeLineCap = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 'butt'; 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, 'stroke-linecap': strokeLineCap }); return line; } }, { key: "drawRect", value: function drawRect() { var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; var radius = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0; var color = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '#fefefe'; var opacity = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1; var strokeWidth = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null; var strokeColor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null; var strokeDashArray = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 0; var w = this.w; var rect = w.globals.dom.Paper.rect(); rect.attr({ x: x1, y: y1, width: x2 > 0 ? x2 : 0, height: y2 > 0 ? y2 : 0, rx: radius, ry: radius, opacity: opacity, 'stroke-width': strokeWidth !== null ? strokeWidth : 0, stroke: strokeColor !== null ? strokeColor : 'none', 'stroke-dasharray': strokeDashArray }); // fix apexcharts.js#1410 rect.node.setAttribute('fill', color); return rect; } }, { key: "drawPolygon", value: function drawPolygon(polygonString) { var stroke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#e1e1e1'; var strokeWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; var fill = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none'; var w = this.w; var polygon = w.globals.dom.Paper.polygon(polygonString).attr({ fill: fill, stroke: stroke, 'stroke-width': strokeWidth }); return polygon; } }, { key: "drawCircle", value: function drawCircle(radius) { var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var w = this.w; if (radius < 0) radius = 0; var c = w.globals.dom.Paper.circle(radius * 2); if (attrs !== null) { c.attr(attrs); } return c; } }, { key: "drawPath", value: function drawPath(_ref) { var _ref$d = _ref.d, d = _ref$d === void 0 ? '' : _ref$d, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? '#a8a8a8' : _ref$stroke, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, fill = _ref.fill, _ref$fillOpacity = _ref.fillOpacity, fillOpacity = _ref$fillOpacity === void 0 ? 1 : _ref$fillOpacity, _ref$strokeOpacity = _ref.strokeOpacity, strokeOpacity = _ref$strokeOpacity === void 0 ? 1 : _ref$strokeOpacity, classes = _ref.classes, _ref$strokeLinecap = _ref.strokeLinecap, strokeLinecap = _ref$strokeLinecap === void 0 ? null : _ref$strokeLinecap, _ref$strokeDashArray = _ref.strokeDashArray, strokeDashArray = _ref$strokeDashArray === void 0 ? 0 : _ref$strokeDashArray; var w = this.w; if (strokeLinecap === null) { strokeLinecap = w.config.stroke.lineCap; } if (d.indexOf('undefined') > -1 || d.indexOf('NaN') > -1) { d = "M 0 ".concat(w.globals.gridHeight); } var p = w.globals.dom.Paper.path(d).attr({ fill: fill, 'fill-opacity': fillOpacity, stroke: stroke, 'stroke-opacity': strokeOpacity, 'stroke-linecap': strokeLinecap, 'stroke-width': strokeWidth, 'stroke-dasharray': strokeDashArray, class: classes }); return p; } }, { key: "group", value: function group() { var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; var w = this.w; var g = w.globals.dom.Paper.group(); if (attrs !== null) { g.attr(attrs); } return g; } }, { key: "move", value: function move(x, y) { var move = ['M', x, y].join(' '); return move; } }, { key: "line", value: function line(x, y) { var hORv = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; var line = null; if (hORv === null) { line = [' L', x, y].join(' '); } else if (hORv === 'H') { line = [' H', x].join(' '); } else if (hORv === 'V') { line = [' V', y].join(' '); } return line; } }, { key: "curve", value: function curve(x1, y1, x2, y2, x, y) { var curve = ['C', x1, y1, x2, y2, x, y].join(' '); return curve; } }, { key: "quadraticCurve", value: function quadraticCurve(x1, y1, x, y) { var curve = ['Q', x1, y1, x, y].join(' '); return curve; } }, { key: "arc", value: function arc(rx, ry, axisRotation, largeArcFlag, sweepFlag, x, y) { var relative = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false; var coord = 'A'; if (relative) coord = 'a'; var arc = [coord, rx, ry, axisRotation, largeArcFlag, sweepFlag, x, y].join(' '); return arc; } /** * @memberof Graphics * @param {object} * i = series's index * realIndex = realIndex is series's actual index when it was drawn time. After several redraws, the iterating "i" may change in loops, but realIndex doesn't * pathFrom = existing pathFrom to animateTo * pathTo = new Path to which d attr will be animated from pathFrom to pathTo *