apexcharts - npm Package Compare versions

Comparing version 1.3.6 to 1.3.7

package.json

 {
   "name": "apexcharts",
   "description": "A JavaScript Chart Library",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "main": "dist/apexcharts.min.js",
@@ -6,0 +6,0 @@ "directories": {

src/apexcharts.js

@@ -20,4 +20,2 @@ import Annotations from './modules/Annotations'
 import SubTitle from './modules/SubTitle'
-import { xAxisAnnotation, yAxisAnnotation, pointAnnotation } from './modules/settings/Options'
-import Graphics from './modules/Graphics'
 
@@ -211,2 +209,3 @@ require('./assets/apexcharts.css')
     let series = new Series(me.ctx)
+    const annotations = new Annotations(me.ctx)
 
@@ -219,25 +218,2 @@ return new Promise(function (resolve, reject) {
 
-      const drawAnnotations = () => {
-        if (me.w.globals.axisCharts) {
-          let annotations = new Annotations(me.ctx)
-          let yAnnotations = annotations.drawYAxisAnnotations()
-          let xAnnotations = annotations.drawXAxisAnnotations()
-          let pointAnnotations = annotations.drawPointAnnotations()
-
-          w.globals.dom.elGraphical.add(yAnnotations)
-          w.globals.dom.elGraphical.add(xAnnotations)
-          w.globals.dom.elGraphical.add(pointAnnotations)
-
-          w.globals.delayedElements.push({el: xAnnotations.node, index: 0})
-          w.globals.delayedElements.push({el: yAnnotations.node, index: 0})
-          w.globals.delayedElements.push({ el: pointAnnotations.node, index: 0 })
-
-          // after placing the annotations on svg, set any vertically placed annotations
-          annotations.setOrientations(w.config.annotations.xaxis)
-
-          // background sizes needs to be calculated after text is drawn, so calling them last
-          annotations.annotationsBackground()
-        }
-      }
-
       me.core.drawAxis(
@@ -253,3 +229,3 @@ w.config.chart.type,
       if (w.config.annotations.position === 'back') {
-        drawAnnotations()
+        annotations.drawAnnotations()
       }
@@ -283,3 +259,3 @@
       if (w.config.annotations.position === 'front') {
-        drawAnnotations()
+        annotations.drawAnnotations()
       }
@@ -309,8 +285,9 @@
         } else {
-          w.config.chart.toolbar.tools.zoom = false
-          w.config.chart.toolbar.tools.zoomin = false
-          w.config.chart.toolbar.tools.zoomout = false
-          w.config.chart.toolbar.tools.selection = false
-          w.config.chart.toolbar.tools.pan = false
-          w.config.chart.toolbar.tools.reset = false
+          const tools = w.config.chart.toolbar.tools
+          tools.zoom = false
+          tools.zoomin = false
+          tools.zoomout = false
+          tools.selection = false
+          tools.pan = false
+          tools.reset = false
         }
@@ -459,2 +436,5 @@
 
+    me.w.globals.initialConfig = Utils.extend({}, me.w.config)
+    me.w.globals.initialSeries = JSON.parse(JSON.stringify(me.w.globals.initialConfig.series))
+
     return this.update()
@@ -516,3 +496,2 @@ }
    */
-
   static exec (chartID, fn, opts) {
@@ -583,3 +562,3 @@ const chart = this.getChartByID(chartID)
 
-  addXaxisAnnotation (opts, pushToMemory = true, context) {
+  addXaxisAnnotation (opts, pushToMemory = true, context = undefined) {
     let me = this
@@ -589,33 +568,7 @@ if (context) {
     }
-    const w = me.w
     const annotations = new Annotations(me.ctx)
-
-    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-annotations')
-    const index = parent.childNodes.length + 1
-
-    const xAxisAnno = Object.assign({}, xAxisAnnotation)
-    const anno = Utils.extend(xAxisAnno, opts)
-
-    annotations.addXAxisAnnotation(anno, parent, index)
-
-    // set if orientation changed for xaxis
-    annotations.setOrientations([anno], index)
-
-    // add background
-    let xAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='${index}']`)
-    const elRect = annotations.addBackgroundToAnno(xAnnoLabel, anno, index)
-    parent.insertBefore(elRect.node, xAnnoLabel)
-
-    if (pushToMemory) {
-      w.globals.memory.methodsToExec.push({
-        context: me,
-        method: me.addXaxisAnnotation,
-        params: opts
-      })
-    }
-
-    return context
+    annotations.addXaxisAnnotationExternal(opts, pushToMemory, me)
   }
 
-  addYaxisAnnotation (opts, pushToMemory = true, context) {
+  addYaxisAnnotation (opts, pushToMemory = true, context = undefined) {
     let me = this
@@ -625,30 +578,7 @@ if (context) {
     }
-    const w = me.w
     const annotations = new Annotations(me.ctx)
-
-    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis-annotations')
-    const index = parent.childNodes.length + 1
-
-    const yAxisAnno = Object.assign({}, yAxisAnnotation)
-    const anno = Utils.extend(yAxisAnno, opts)
-
-    annotations.addYAxisAnnotation(anno, parent, index)
-
-    // add background
-    let yAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-yaxis-annotations .apexcharts-yaxis-annotation-label[rel='${index}']`)
-    const elRect = annotations.addBackgroundToAnno(yAnnoLabel, anno, index)
-    parent.insertBefore(elRect.node, yAnnoLabel)
-
-    if (pushToMemory) {
-      w.globals.memory.methodsToExec.push({
-        context: me,
-        method: me.addYaxisAnnotation,
-        params: opts
-      })
-    }
-
-    return context
+    annotations.addYaxisAnnotationExternal(opts, pushToMemory, me)
   }
 
-  addPointAnnotation (opts, pushToMemory = true, context) {
+  addPointAnnotation (opts, pushToMemory = true, context = undefined) {
     let me = this
@@ -658,27 +588,4 @@ if (context) {
     }
-    const w = me.w
     const annotations = new Annotations(me.ctx)
-
-    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-point-annotations')
-    const index = parent.childNodes.length + 1
-
-    const pointAnno = Object.assign({}, pointAnnotation)
-    const anno = Utils.extend(pointAnno, opts)
-
-    annotations.addPointAnnotation(anno, parent, index)
-
-    // add background
-    let pointLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-point-annotations .apexcharts-point-annotation-label[rel='${index}']`)
-    const elRect = annotations.addBackgroundToAnno(pointLabel, anno, index)
-    parent.insertBefore(elRect.node, pointLabel)
-
-    if (pushToMemory) {
-      w.globals.memory.methodsToExec.push({
-        context: me,
-        method: me.addPointAnnotation,
-        params: opts
-      })
-    }
-
-    return context
+    annotations.addPointAnnotationExternal(opts, pushToMemory, me)
   }
@@ -688,3 +595,3 @@
   // Hence, we need to keep all these elements in memory when the chart gets updated and redraw again
-  addText ({ x, y, text, textAnchor, appendTo = '.apexcharts-inner', foreColor, fontSize, cssClass, backgroundColor, borderWidth, strokeDashArray, radius, borderColor, paddingLeft = 4, paddingRight = 4, paddingBottom = 2, paddingTop = 2 }, pushToMemory = true, context) {
+  addText (options, pushToMemory = true, context = undefined) {
     let me = this
@@ -694,33 +601,5 @@ if (context) {
     }
-    const w = me.w
 
-    const graphics = new Graphics(me.ctx)
-    const parentNode = w.globals.dom.baseEl.querySelector(appendTo)
-
-    let elText = graphics.drawText({
-      x: x,
-      y: y,
-      text,
-      textAnchor: textAnchor || 'start',
-      fontSize: fontSize || '12px',
-      foreColor: foreColor || w.config.chart.foreColor,
-      cssClass: 'apexcharts-text ' + cssClass ? cssClass : ''
-    })
-
-    parentNode.appendChild(elText.node)
-
-    const textRect = elText.bbox()
-    const 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, y, text, textAnchor, appendTo, foreColor, fontSize, cssClass, backgroundColor, borderWidth, strokeDashArray, radius, borderColor, paddingLeft, paddingRight, paddingBottom, paddingTop }
-      })
-    }
-
-    return context
+    const annotations = new Annotations(me.ctx)
+    annotations.addText(options, pushToMemory, me)
   }
@@ -727,0 +606,0 @@

src/modules/Animations.js

@@ -16,3 +16,3 @@ /**
   setEasingFunctions () {
-    let easing = '<>'
+    let easing
 
@@ -19,0 +19,0 @@ const userDefinedEasing = this.w.config.chart.animations.easing

src/modules/Annotations.js

 import Graphics from './Graphics'
+import Options from './settings/Options'
+import Utils from '../utils/Utils'
 
@@ -16,2 +18,24 @@ /**
 
+  drawAnnotations () {
+    const w = this.w
+    if (w.globals.axisCharts) {
+      let yAnnotations = this.drawYAxisAnnotations()
+      let xAnnotations = this.drawXAxisAnnotations()
+      let pointAnnotations = this.drawPointAnnotations()
+
+      const annoArray = [yAnnotations, xAnnotations, pointAnnotations]
+      const annoElArray = [xAnnotations.node, yAnnotations.node, pointAnnotations.node]
+      for (let 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()
+    }
+  }
+
   addXAxisAnnotation (anno, parent, index) {
@@ -280,3 +304,3 @@ let w = this.w
       const parent = xAnnoLabel.parentNode
-      const elRect = this.addBackgroundToAnno(xAnnoLabel, anno, i)
+      const elRect = this.addBackgroundToAnno(xAnnoLabel, anno)
 
@@ -290,3 +314,3 @@ parent.insertBefore(elRect.node, xAnnoLabel)
       const parent = yAnnoLabel.parentNode
-      const elRect = this.addBackgroundToAnno(yAnnoLabel, anno, i)
+      const elRect = this.addBackgroundToAnno(yAnnoLabel, anno)
 
@@ -300,3 +324,3 @@ parent.insertBefore(elRect.node, yAnnoLabel)
       const parent = pointAnnoLabel.parentNode
-      const elRect = this.addBackgroundToAnno(pointAnnoLabel, anno, i)
+      const elRect = this.addBackgroundToAnno(pointAnnoLabel, anno)
 
@@ -306,4 +330,132 @@ parent.insertBefore(elRect.node, pointAnnoLabel)
   }
+
+  addText (params, pushToMemory, context) {
+    const { x, y, text, textAnchor, appendTo = '.apexcharts-inner', foreColor, fontSize, cssClass, backgroundColor, borderWidth, strokeDashArray, radius, borderColor, paddingLeft = 4, paddingRight = 4, paddingBottom = 2, paddingTop = 2 } = params
+
+    const me = context
+    const w = me.w
+
+    const graphics = new Graphics(me.ctx)
+    const parentNode = w.globals.dom.baseEl.querySelector(appendTo)
+
+    let elText = graphics.drawText({
+      x: x,
+      y: y,
+      text,
+      textAnchor: textAnchor || 'start',
+      fontSize: fontSize || '12px',
+      foreColor: foreColor || w.config.chart.foreColor,
+      cssClass: 'apexcharts-text ' + cssClass ? cssClass : ''
+    })
+
+    parentNode.appendChild(elText.node)
+
+    const textRect = elText.bbox()
+    const 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, y, text, textAnchor, appendTo, foreColor, fontSize, cssClass, backgroundColor, borderWidth, strokeDashArray, radius, borderColor, paddingLeft, paddingRight, paddingBottom, paddingTop }
+      })
+    }
+
+    return context
+  }
+
+  addPointAnnotationExternal (params, pushToMemory, context) {
+    const me = context
+    const w = me.w
+
+    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-point-annotations')
+    const index = parent.childNodes.length + 1
+
+    const options = new Options()
+    const pointAnno = Object.assign({}, options.pointAnnotation)
+    const anno = Utils.extend(pointAnno, params)
+
+    this.addPointAnnotation(anno, parent, index)
+
+    // add background
+    let pointLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-point-annotations .apexcharts-point-annotation-label[rel='${index}']`)
+    const elRect = this.addBackgroundToAnno(pointLabel, anno)
+    parent.insertBefore(elRect.node, pointLabel)
+
+    if (pushToMemory) {
+      w.globals.memory.methodsToExec.push({
+        context: me,
+        method: me.addPointAnnotation,
+        params: params
+      })
+    }
+
+    return context
+  }
+
+  addYAxisAnnotationExternal (params, pushToMemory, context) {
+    const me = context
+    const w = me.w
+
+    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis-annotations')
+    const index = parent.childNodes.length + 1
+
+    const options = new Options()
+    const yAxisAnno = Object.assign({}, options.yAxisAnnotation)
+    const anno = Utils.extend(yAxisAnno, params)
+
+    this.addYAxisAnnotation(anno, parent, index)
+
+    // add background
+    let yAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-yaxis-annotations .apexcharts-yaxis-annotation-label[rel='${index}']`)
+    const elRect = this.addBackgroundToAnno(yAnnoLabel, anno)
+    parent.insertBefore(elRect.node, yAnnoLabel)
+
+    if (pushToMemory) {
+      w.globals.memory.methodsToExec.push({
+        context: me,
+        method: me.addYaxisAnnotation,
+        params: params
+      })
+    }
+
+    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
+  addXAxisAnnotationExternal (params, pushToMemory, context) {
+    const me = context
+    const w = me.w
+
+    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-annotations')
+    const index = parent.childNodes.length + 1
+
+    const options = new Options()
+    const xAxisAnno = Object.assign({}, options.xAxisAnnotation)
+    const anno = Utils.extend(xAxisAnno, params)
+
+    this.addXAxisAnnotation(anno, parent, index)
+
+    // set if orientation changed for xaxis
+    this.setOrientations([anno], index)
+
+    // add background
+    let xAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='${index}']`)
+    const elRect = this.addBackgroundToAnno(xAnnoLabel, anno)
+    parent.insertBefore(elRect.node, xAnnoLabel)
+
+    if (pushToMemory) {
+      w.globals.memory.methodsToExec.push({
+        context: me,
+        method: me.addXaxisAnnotation,
+        params: params
+      })
+    }
+
+    return context
+  }
 }
 
 module.exports = Annotations

src/modules/Core.js

@@ -145,5 +145,3 @@ import Bar from '../charts/Bar'
           // user has specified type, but it is not valid (other than line/area/column)
-          // make default to line
-          lineSeries.series.push(series)
-          lineSeries.i.push(st)
+          throw new Error('You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar')
         }
@@ -540,3 +538,3 @@ gl.comboCharts = true
 
-  handleExternalLabels (ser) {
+  handleExternalLabelsData (ser) {
     const cnf = this.w.config
@@ -618,3 +616,3 @@ const gl = this.w.globals
     if (!gl.dataXY) {
-      this.handleExternalLabels(ser)
+      this.handleExternalLabelsData(ser)
     }
@@ -621,0 +619,0 @@ }

src/modules/Dimensions.js

@@ -56,6 +56,4 @@ import Graphics from './Graphics'
 
-    let xtitleCoords = {
-      width: 0,
-      height: 0
-    }
+    let xtitleCoords
+    let xaxisLabelCoords
     let ytitleCoords = []
@@ -66,6 +64,2 @@ let yaxisLabelCoords = {
     }
-    let xaxisLabelCoords = {
-      width: 0,
-      height: 0
-    }
 
@@ -397,4 +391,2 @@ yaxisLabelCoords = this.getyAxisLabelsCoords()
       w.globals.overlappingXLabels = true
-    } else {
-      w.globals.overlappingXLabels = true
     }
@@ -401,0 +393,0 @@

src/modules/Fill.js

@@ -14,5 +14,8 @@ import Graphics from './Graphics'
     this.w = ctx.w
+
+    this.opts = null
+    this.seriesIndex = 0
   }
 
-  clippedImgArea (opts) {
+  clippedImgArea (params) {
     let w = this.w
@@ -26,3 +29,3 @@ let cnf = w.config
 
-    let fillImg = opts.image
+    let fillImg = params.image
 
@@ -32,4 +35,4 @@ let imgWidth = 0
     if (
-      typeof opts.width === 'undefined' &&
-      typeof opts.height === 'undefined'
+      typeof params.width === 'undefined' &&
+      typeof params.height === 'undefined'
     ) {
@@ -47,4 +50,4 @@ if (
     } else {
-      imgWidth = opts.width
-      imgHeight = opts.height
+      imgWidth = params.width
+      imgHeight = params.height
     }
@@ -55,3 +58,3 @@
     Graphics.setAttrs(elPattern, {
-      id: opts.patternID,
+      id: params.patternID,
       patternUnits: 'userSpaceOnUse',
@@ -75,3 +78,3 @@ width: imgWidth + 'px',
 
-    elImage.style.opacity = opts.opacity
+    elImage.style.opacity = params.opacity
 
@@ -81,25 +84,82 @@ w.globals.dom.elDefs.node.appendChild(elPattern)
 
+  getSeriesIndex = (opts) => {
+    const 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
+  }
+
   fillPath (elSeries, opts) {
     let w = this.w
+    this.opts = opts
 
     let cnf = this.w.config
-    let graphics = new Graphics(this.ctx)
-    let utils = new Utils()
+    let pathFill
 
     let patternFill, gradientFill
 
-    let fillColors = []
+    this.seriesIndex = this.getSeriesIndex(opts)
 
-    const seriesIndex = () => {
-      if ((w.config.chart.type === 'bar' && w.config.plotOptions.bar.distributed) || w.config.chart.type === 'heatmap') {
-        return opts.seriesNumber
+    let fillColors = this.getFillColors()
+    let fillOpacity = Array.isArray(cnf.fill.opacity) ? cnf.fill.opacity[this.seriesIndex] : cnf.fill.opacity
+
+    let defaultColor = Utils.hexToRgba(
+      fillColors[this.seriesIndex],
+      fillOpacity
+    )
+
+    let 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 {
-        return opts.seriesNumber % w.globals.series.length
+        pathFill = defaultColor
       }
+    } else if (cnf.fill.type === 'gradient') {
+      pathFill = gradientFill
+    } else if (cnf.fill.type === 'pattern') {
+      pathFill = patternFill
+    } else {
+      pathFill = defaultColor
     }
 
-    let fillOpacity = Array.isArray(cnf.fill.opacity) ? cnf.fill.opacity[seriesIndex()] : cnf.fill.opacity
+    if (opts.solid) {
+      pathFill = defaultColor
+    }
 
+    if (opts.color) {
+      pathFill = opts.color
+    }
+
+    return pathFill
+  }
+
+  getFillColors () {
+    const w = this.w
+    const cnf = w.config
+    const opts = this.opts
+
+    let fillColors = []
+
     if (w.globals.comboCharts) {
-      if (w.config.series[seriesIndex()].type === 'line') {
+      if (w.config.series[this.seriesIndex].type === 'line') {
         if (w.globals.stroke.colors instanceof Array) {
@@ -141,32 +201,19 @@ fillColors = w.globals.stroke.colors
 
-    let defaultColor = Utils.hexToRgba(
-      fillColors[seriesIndex()],
-      fillOpacity
-    )
+    return fillColors
+  }
 
-    let fillColor = fillColors[seriesIndex()]
+  handlePatternFill (patternFill, fillColor, fillOpacity, defaultColor) {
+    const cnf = this.w.config
+    const opts = this.opts
+    let graphics = new Graphics(this.ctx)
 
-    if (cnf.fill.type === 'pattern') {
-      let patternStrokeWidth = cnf.fill.pattern.strokeWidth === undefined
-        ? Array.isArray(cnf.stroke.width) ? cnf.stroke.width[seriesIndex] : cnf.stroke.width
-        : Array.isArray(cnf.fill.pattern.strokeWidth) ? cnf.fill.pattern.strokeWidth[seriesIndex] : cnf.fill.pattern.strokeWidth
-      let patternLineColor = fillColor
+    let 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
+    let patternLineColor = fillColor
 
-      if (cnf.fill.pattern.style instanceof Array) {
-        if (typeof cnf.fill.pattern.style[opts.seriesNumber] !== 'undefined') {
-          let 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,
+    if (cnf.fill.pattern.style instanceof Array) {
+      if (typeof cnf.fill.pattern.style[opts.seriesNumber] !== 'undefined') {
+        let pf = graphics.drawPattern(
+          cnf.fill.pattern.style[opts.seriesNumber],
           cnf.fill.pattern.width,
@@ -178,82 +225,71 @@ cnf.fill.pattern.height,
         )
-      }
-    }
-
-    if (cnf.fill.type === 'gradient') {
-      let type = cnf.fill.gradient.type
-      let gradientFrom, gradientTo
-      let opacityFrom = cnf.fill.gradient.opacityFrom === undefined
-        ? fillOpacity
-        : cnf.fill.gradient.opacityFrom
-      let 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
-          )
-        }
+        patternFill = pf
       } else {
-        gradientTo = cnf.fill.gradient.gradientToColors[opts.seriesNumber]
+        patternFill = defaultColor
       }
-
-      if (cnf.fill.gradient.inverseColors) {
-        let t = gradientFrom
-        gradientFrom = gradientTo
-        gradientTo = t
-      }
-
-      gradientFill = graphics.drawGradient(
-        type,
-        gradientFrom,
-        gradientTo,
-        opacityFrom,
-        opacityTo,
-        opts.size,
-        cnf.fill.gradient.stops
+    } else {
+      patternFill = graphics.drawPattern(
+        cnf.fill.pattern.style,
+        cnf.fill.pattern.width,
+        cnf.fill.pattern.height,
+        patternLineColor,
+        patternStrokeWidth,
+        fillOpacity
       )
     }
+    return patternFill
+  }
 
-    let pathFill = 'none'
+  handleGradientFill (gradientFill, fillColor, fillOpacity) {
+    const cnf = this.w.config
+    const opts = this.opts
+    let graphics = new Graphics(this.ctx)
+    let utils = new Utils()
 
-    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})`
+    let type = cnf.fill.gradient.type
+    let gradientFrom, gradientTo
+    let opacityFrom = cnf.fill.gradient.opacityFrom === undefined
+      ? fillOpacity
+      : cnf.fill.gradient.opacityFrom
+    let 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 {
-        pathFill = defaultColor
+        gradientTo = utils.shadeColor(
+          parseFloat(cnf.fill.gradient.shadeIntensity),
+          fillColor
+        )
       }
-    } else if (cnf.fill.type === 'gradient') {
-      pathFill = gradientFill
-    } else if (cnf.fill.type === 'pattern') {
-      pathFill = patternFill
     } else {
-      pathFill = defaultColor
+      gradientTo = cnf.fill.gradient.gradientToColors[opts.seriesNumber]
     }
 
-    if (opts.solid) {
-      pathFill = defaultColor
+    if (cnf.fill.gradient.inverseColors) {
+      let t = gradientFrom
+      gradientFrom = gradientTo
+      gradientTo = t
     }
 
-    if (opts.color) {
-      pathFill = opts.color
-    }
+    gradientFill = graphics.drawGradient(
+      type,
+      gradientFrom,
+      gradientTo,
+      opacityFrom,
+      opacityTo,
+      opts.size,
+      cnf.fill.gradient.stops
+    )
 
-    return pathFill
+    return gradientFill
   }
@@ -260,0 +296,0 @@ }

src/modules/Formatters.js

@@ -38,7 +38,2 @@ import DateTime from '../utils/DateTime'
 
-    // this is commented for now, can be give as a customization to user later
-    // w.globals.xaxisTooltipLabelFormatter = function (val) {
-    //   return val
-    // }
-
     w.globals.ttKeyFormatter = function (val, opts) {
@@ -45,0 +40,0 @@ return val

src/modules/Graphics.js

@@ -266,3 +266,3 @@ import Utils from '../utils/Utils'
 
-  drawPattern (style, width, height, stroke = '#a8a8a8', strokeWidth, opacity) {
+  drawPattern (style, width, height, stroke = '#a8a8a8', strokeWidth = 0, opacity = 1) {
     let w = this.w
@@ -368,5 +368,9 @@
 
-    if (!textAnchor) textAnchor = 'start'
+    if (!textAnchor) {
+      textAnchor = 'start'
+    }
 
-    if (typeof foreColor === 'undefined' || foreColor === undefined) foreColor = w.config.chart.foreColor
+    if (!foreColor) {
+      foreColor = w.config.chart.foreColor
+    }
 
@@ -373,0 +377,0 @@ let elText = w.globals.dom.Paper.plain(text).attr({

src/modules/settings/Config.js

 import Defaults from './Defaults'
 import Utils from './../../utils/Utils'
-import Options, { yAxis, xAxisAnnotation, yAxisAnnotation, pointAnnotation } from './Options'
+import Options from './Options'
 
@@ -100,2 +100,3 @@ /**
   extendYAxis (opts) {
+    let options = new Options()
     if (typeof opts.yaxis === 'undefined') {
@@ -109,5 +110,5 @@ opts.yaxis = {}
       // convert the yaxis to array if user supplied object
-      opts.yaxis = [Utils.extend(yAxis, opts.yaxis)]
+      opts.yaxis = [Utils.extend(options.yAxis, opts.yaxis)]
     } else {
-      opts.yaxis = Utils.extendArray(opts.yaxis, yAxis)
+      opts.yaxis = Utils.extendArray(opts.yaxis, options.yAxis)
     }
@@ -134,3 +135,4 @@ return opts
   extendYAxisAnnotations (opts) {
-    opts.annotations.yaxis = Utils.extendArray(typeof opts.annotations.yaxis !== 'undefined' ? opts.annotations.yaxis : [], yAxisAnnotation)
+    let options = new Options()
+    opts.annotations.yaxis = Utils.extendArray(typeof opts.annotations.yaxis !== 'undefined' ? opts.annotations.yaxis : [], options.yAxisAnnotation)
     return opts
@@ -140,7 +142,9 @@ }
   extendXAxisAnnotations (opts) {
-    opts.annotations.xaxis = Utils.extendArray(typeof opts.annotations.xaxis !== 'undefined' ? opts.annotations.xaxis : [], xAxisAnnotation)
+    let options = new Options()
+    opts.annotations.xaxis = Utils.extendArray(typeof opts.annotations.xaxis !== 'undefined' ? opts.annotations.xaxis : [], options.xAxisAnnotation)
     return opts
   }
   extendPointAnnotations (opts) {
-    opts.annotations.points = Utils.extendArray(typeof opts.annotations.points !== 'undefined' ? opts.annotations.points : [], pointAnnotation)
+    let options = new Options()
+    opts.annotations.points = Utils.extendArray(typeof opts.annotations.points !== 'undefined' ? opts.annotations.points : [], options.pointAnnotation)
     return opts
@@ -147,0 +151,0 @@ }

src/modules/settings/Options.js

@@ -5,156 +5,158 @@ /**
 
-export const 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: '12px',
-      cssClass: 'apexcharts-xaxis-annotation-label',
-      padding: {
-        left: 5,
-        right: 5,
-        top: 2,
-        bottom: 2
+export default class Options {
+  constructor () {
+    this.yAxis = {
+      opposite: false,
+      tickAmount: 6,
+      max: undefined,
+      min: undefined,
+      decimalsInFloat: 2,
+      floating: false,
+      labels: {
+        show: true,
+        maxWidth: 160,
+        offsetX: 0,
+        offsetY: 0,
+        style: {
+          colors: [],
+          fontSize: '12px',
+          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: '12px',
+          cssClass: 'apexcharts-yaxis-title'
+        }
+      },
+      tooltip: {
+        enabled: false,
+        offsetX: 0
+      },
+      crosshairs: {
+        show: true,
+        position: 'front',
+        stroke: {
+          color: '#b6b6b6',
+          width: 1,
+          dashArray: 0
+        }
       }
     }
-  }
-}
 
-export const 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: '12px',
-      cssClass: 'apexcharts-point-annotation-label',
-      padding: {
-        left: 5,
-        right: 5,
-        top: 0,
-        bottom: 2
+    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: '12px',
+          cssClass: 'apexcharts-xaxis-annotation-label',
+          padding: {
+            left: 5,
+            right: 5,
+            top: 2,
+            bottom: 2
+          }
+        }
       }
     }
-  }
-}
 
-export const 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: '12px',
-      cssClass: 'apexcharts-yaxis-annotation-label',
-      padding: {
-        left: 5,
-        right: 5,
-        top: 0,
-        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: '12px',
+          cssClass: 'apexcharts-yaxis-annotation-label',
+          padding: {
+            left: 5,
+            right: 5,
+            top: 0,
+            bottom: 2
+          }
+        }
       }
     }
-  }
-}
 
-export const yAxis = {
-  opposite: false,
-  tickAmount: 6,
-  max: undefined,
-  min: undefined,
-  decimalsInFloat: 2,
-  floating: false,
-  labels: {
-    show: true,
-    maxWidth: 160,
-    offsetX: 0,
-    offsetY: 0,
-    style: {
-      colors: [],
-      fontSize: '12px',
-      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: '12px',
-      cssClass: 'apexcharts-yaxis-title'
+    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: '12px',
+          cssClass: 'apexcharts-point-annotation-label',
+          padding: {
+            left: 5,
+            right: 5,
+            top: 0,
+            bottom: 2
+          }
+        }
+      }
     }
-  },
-  tooltip: {
-    enabled: false,
-    offsetX: 0
-  },
-  crosshairs: {
-    show: true,
-    position: 'front',
-    stroke: {
-      color: '#b6b6b6',
-      width: 1,
-      dashArray: 0
-    }
   }
-}
 
-export default class Options {
   init () {
@@ -164,5 +166,5 @@ return {
         position: 'front',
-        yaxis: [yAxisAnnotation],
-        xaxis: [xAxisAnnotation],
-        points: [pointAnnotation]
+        yaxis: [this.yAxisAnnotation],
+        xaxis: [this.xAxisAnnotation],
+        points: [this.pointAnnotation]
       },
@@ -746,3 +748,3 @@ chart: {
       },
-      yaxis: yAxis,
+      yaxis: this.yAxis,
       theme: {
@@ -749,0 +751,0 @@ palette: 'palette1', // If defined, it will overwrite globals.colors variable

src/modules/tooltip/Intersect.js

@@ -123,3 +123,2 @@ import Utils from '../../utils/Utils'
       y = barXY.y
-      j = barXY.j
       bx = x
@@ -146,2 +145,9 @@ } else {
 
+    // x exceeds gridWidth
+    if (x + ttCtx.tooltipRect.ttWidth > w.globals.gridWidth) {
+      x = x - ttCtx.tooltipRect.ttWidth
+    } else if (x < 0) {
+      x = x + ttCtx.tooltipRect.ttWidth
+    }
+
     if (ttCtx.w.config.tooltip.followCursor) {
@@ -148,0 +154,0 @@ y = ttCtx.e.clientY - ttCtx.seriesBound.top

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1274152

increased by39.1%

Number of package files

98

increased by12.64%

Lines of code

16390

increased by0.36%

No dependency changes