diff --git a/build/config.js b/build/config.js index b9b2ad9ed..f6260adf3 100644 --- a/build/config.js +++ b/build/config.js @@ -66,6 +66,7 @@ function rollupConfig(opts) { preferConst: true }), postcss({ + inject: false, plugins: [] }), svgo({ diff --git a/src/apexcharts.js b/src/apexcharts.js index 9cab200b4..15464cdfc 100644 --- a/src/apexcharts.js +++ b/src/apexcharts.js @@ -13,6 +13,7 @@ import YAxis from './modules/axes/YAxis' import InitCtxVariables from './modules/helpers/InitCtxVariables' import Destroy from './modules/helpers/Destroy' import { addResizeListener, removeResizeListener } from './utils/Resize' +import apexCSS from './assets/apexcharts.css' /** * @@ -72,6 +73,28 @@ export default class ApexCharts { window.addEventListener('resize', this.windowResizeHandler) addResizeListener(this.el.parentNode, this.parentResizeHandler) + // Add CSS if not already added + if (!this.css) { + let rootNode = this.el.getRootNode && this.el.getRootNode() + let inShadowRoot = Utils.is('ShadowRoot', rootNode) + let doc = this.el.ownerDocument + let globalCSS = doc.getElementById('apexcharts-css') + + if (inShadowRoot || !globalCSS) { + this.css = document.createElement('style') + this.css.id = 'apexcharts-css' + this.css.textContent = apexCSS + + if (inShadowRoot) { + // We are in Shadow DOM, add to shadow root + rootNode.prepend(this.css) + } else { + // Add to of element's document + doc.head.appendChild(this.css) + } + } + } + let graphData = this.create(this.w.config.series, {}) if (!graphData) return resolve(this) this.mount(graphData) diff --git a/src/modules/helpers/InitCtxVariables.js b/src/modules/helpers/InitCtxVariables.js index affb9bc34..b86e9a757 100644 --- a/src/modules/helpers/InitCtxVariables.js +++ b/src/modules/helpers/InitCtxVariables.js @@ -30,8 +30,6 @@ import 'svg.draggable.js' import 'svg.select.js' import 'svg.resize.js' -import '../../assets/apexcharts.css' - // global Apex object which user can use to override chart's defaults globally if (typeof window.Apex === 'undefined') { window.Apex = {} diff --git a/src/utils/Utils.js b/src/utils/Utils.js index 38cbf066e..53c79918b 100644 --- a/src/utils/Utils.js +++ b/src/utils/Utils.js @@ -4,7 +4,7 @@ class Utils { static bind(fn, me) { - return function() { + return function () { return fn.apply(me, arguments) } } @@ -15,6 +15,11 @@ class Utils { ) } + // Type checking that works across different window objects + static is(type, val) { + return Object.prototype.toString.call(val) === '[object ' + type + ']'; + } + static listToArray(list) { let i, array = [] @@ -28,8 +33,8 @@ class Utils { // credit: http://stackoverflow.com/questions/27936772/deep-object-merging-in-es6-es7#answer-34749873 static extend(target, source) { if (typeof Object.assign !== 'function') { - ;(function() { - Object.assign = function(target) { + ; (function () { + Object.assign = function (target) { 'use strict' // We must check against these specific cases. if (target === undefined || target === null) { @@ -88,16 +93,16 @@ class Utils { } static clone(source) { - if (Object.prototype.toString.call(source) === '[object Array]') { + if (Utils.is('Array', source)) { let cloneResult = [] for (let i = 0; i < source.length; i++) { cloneResult[i] = this.clone(source[i]) } return cloneResult - } else if (Object.prototype.toString.call(source) === '[object Null]') { + } else if (Utils.is('Null', source)) { // fixes an issue where null values were converted to {} return null - } else if (Object.prototype.toString.call(source) === '[object Date]') { + } else if (Utils.is('Date', source)) { return source } else if (typeof source === 'object') { let cloneResult = {} @@ -218,9 +223,9 @@ class Utils { ) 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) + ('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) : '' }