apexcharts - npm Package Compare versions

Comparing version 2.0.9 to 2.1.0

package.json

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

src/apexcharts.js

@@ -6,2 +6,3 @@ import Annotations from './modules/Annotations'
 import Core from './modules/Core'
+import CoreUtils from './modules/CoreUtils'
 import Crosshairs from './modules/Crosshairs'
@@ -116,2 +117,4 @@ import Dimensions from './modules/Dimensions'
     this.core = new Core(this.el, this)
+    this.coreUtils = new CoreUtils(this)
+    this.config = new Config({})
     this.crosshairs = new Crosshairs(this.ctx)
@@ -125,4 +128,4 @@ this.options = new Options()
     this.legend = new Legend(this.ctx)
+    this.toolbar = new Toolbar(this.ctx)
     this.dimensions = new Dimensions(this.ctx)
-    this.toolbar = new Toolbar(this.ctx)
     this.zoomPanSelection = new ZoomPanSelection(this.ctx)
@@ -304,3 +307,3 @@ this.w.globals.tooltip = new Tooltip(this.ctx)
         if (w.globals.axisCharts && w.globals.dataXY) {
-          if (w.config.chart.zoom.enabled || w.config.chart.selection.enabled) {
+          if (w.config.chart.zoom.enabled || w.config.chart.selection.enabled || w.config.chart.pan.enabled) {
             me.zoomPanSelection.init({
@@ -348,2 +351,6 @@ xyRatios: graphData.xyRatios
     }
+    // user has set x-axis min/max externally - hence we need to forcefully set the xaxis min/max
+    if (options.xaxis && (options.xaxis.min || options.xaxis.max)) {
+      this.forceXAxisUpdate(options)
+    }
     return this.updateOptionsInternal(options, redraw, animate, overwriteInitialConfig)
@@ -366,7 +373,7 @@ }
 
-      ch.w.config.chart.animations.dynamicAnimation.enabled = animate
+      w.config.chart.animations.dynamicAnimation.enabled = animate
 
       if (!redraw) {
         w.globals.resized = true
-        ch.w.globals.dataChanged = true
+        w.globals.dataChanged = true
 
@@ -382,18 +389,4 @@ if (animate && ch.w.globals.initialConfig.chart.animations.dynamicAnimation.enabled) {
         ch.config = new Config(options)
+        options = CoreUtils.extendArrayProps(ch.config, 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 = Utils.extend(w.config, options)
@@ -450,3 +443,2 @@
     const chartGroups = this.getGroupedCharts()
-
     let allCharts = [this]
@@ -527,2 +519,14 @@ if (chartGroups.length) {
 
+  forceXAxisUpdate (options) {
+    const w = this.w
+    if (typeof options.xaxis.min !== 'undefined') {
+      w.config.xaxis.min = options.xaxis.min
+      w.globals.lastXAxis.min = options.xaxis.min
+    }
+    if (typeof options.xaxis.max !== 'undefined') {
+      w.config.xaxis.max = options.xaxis.max
+      w.globals.lastXAxis.max = options.xaxis.max
+    }
+  }
+
   /**
@@ -553,3 +557,5 @@ * This function reverts the yaxis and xaxis min/max values to what it was when the chart was defined.
     this.zoomPanSelection.destroy()
-    this.toolbar.destroy()
+    if (this.toolbar) {
+      this.toolbar.destroy()
+    }
 
@@ -673,2 +679,50 @@ this.animations = null
 
+  setupBrushHandler () {
+    const w = this.w
+
+    // only for brush charts
+    if (!w.config.chart.brush.enabled) {
+      return
+    }
+
+    // if user has not defined a custom function for selection - we handle the brush chart
+    // otherwise we leave it to the user to define the functionality for selection
+    if (typeof w.config.chart.events.selection !== 'function') {
+      const targetChart = ApexCharts.getChartByID(w.config.chart.brush.target)
+      targetChart.w.globals.brushSource = this
+
+      const updateSourceChart = () => {
+        this.updateOptionsInternal({
+          chart: {
+            selection: {
+              xaxis: {
+                min: targetChart.w.globals.minX,
+                max: targetChart.w.globals.maxX
+              }
+            }
+          }
+        }, false, false)
+      }
+      if (typeof targetChart.w.config.chart.events.zoomed !== 'function') {
+        targetChart.w.config.chart.events.zoomed = () => {
+          updateSourceChart()
+        }
+      }
+      if (typeof targetChart.w.config.chart.events.scrolled !== 'function') {
+        targetChart.w.config.chart.events.scrolled = () => {
+          updateSourceChart()
+        }
+      }
+
+      w.config.chart.events.selection = (chart, e) => {
+        targetChart.updateOptionsInternal({
+          xaxis: {
+            min: e.xaxis.min,
+            max: e.xaxis.max
+          }
+        }, false, false)
+      }
+    }
+  }
+
   setupEventHandlers () {
@@ -704,2 +758,4 @@ const w = this.w
     }
+
+    this.setupBrushHandler()
   }
@@ -750,3 +806,3 @@
   getSeriesTotalXRange (minX, maxX) {
-    return this.core.getSeriesTotalsXRange(minX, maxX)
+    return this.coreUtils.getSeriesTotalsXRange(minX, maxX)
   }
@@ -753,0 +809,0 @@

src/charts/Line.js

@@ -283,2 +283,12 @@ import Graphics from '../modules/Graphics'
 
+      const defaultRenderedPathOptions = {
+        i,
+        realIndex,
+        animationDelay: i,
+        initialSpeed: w.config.chart.animations.speed,
+        dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
+        className: `apexcharts-${type}`,
+        id: `apexcharts-${type}`
+      }
+
       if (w.config.stroke.show && !this.pointsChart) {
@@ -298,4 +308,3 @@ let lineFill = null
           let renderedPath = graphics.renderPaths({
-            i,
-            realIndex,
+            ...defaultRenderedPathOptions,
             pathFrom: pathFromLine,
@@ -306,8 +315,3 @@ pathTo: linePaths[p],
             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'
+            fill: 'none'
           })
@@ -327,4 +331,3 @@
           let renderedPath = graphics.renderPaths({
-            i,
-            realIndex,
+            ...defaultRenderedPathOptions,
             pathFrom: pathFromArea,
@@ -335,8 +338,3 @@ pathTo: areaPaths[p],
             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'
+            fill: pathFill
           })
@@ -363,8 +361,3 @@
     series,
-    i,
-    j,
-    x,
-    y,
-    pX,
-    pY,
+    i, j, x, y, pX, pY,
     xDivision,
@@ -453,6 +446,3 @@ areaBottomY,
     realIndex,
-    x,
-    y,
-    i,
-    j,
+    x, y, i, j,
     prevY,
@@ -530,8 +520,5 @@ categoryAxisCorrection,
   determineFirstPrevY ({
-    i,
-    series,
+    i, series,
     yRatio,
-    zeroY,
-    prevY,
-    prevSeriesY,
+    zeroY, prevY, prevSeriesY,
     lineYPosition
@@ -555,15 +542,10 @@ }) {
       // 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 (let 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
-              }
-            }
+      if (w.config.chart.stacked && i > 0 && typeof series[i][0] === 'undefined') {
+        // check for undefined value (undefined value will occur when we clear the series while user clicks on legend to hide serieses)
+        for (let 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
           }
@@ -570,0 +552,0 @@ }

src/modules/Annotations.js

@@ -14,2 +14,3 @@ import Graphics from './Graphics'
     this.w = ctx.w
+    this.graphics = new Graphics(this.ctx)
 
@@ -43,3 +44,2 @@ this.xDivision = this.w.globals.gridWidth / this.w.globals.dataPoints
     let w = this.w
-    let graphics = new Graphics(this.ctx)
 
@@ -50,3 +50,3 @@ let strokeDashArray = anno.strokeDashArray
 
-    let line = graphics.drawLine(
+    let line = this.graphics.drawLine(
       x1 + anno.offsetX,
@@ -65,3 +65,3 @@ 0 + anno.offsetY,
 
-    let elText = graphics.drawText({
+    let elText = this.graphics.drawText({
       x: x1 + anno.label.offsetX,
@@ -86,5 +86,4 @@ y: textY + anno.label.offsetY,
     let w = this.w
-    let graphics = new Graphics(this.ctx)
 
-    let elg = graphics.group({
+    let elg = this.graphics.group({
       class: 'apexcharts-xaxis-annotations'
@@ -102,3 +101,2 @@ })
     let w = this.w
-    let graphics = new Graphics(this.ctx)
 
@@ -111,3 +109,3 @@ let strokeDashArray = anno.strokeDashArray
 
-    let line = graphics.drawLine(
+    let line = this.graphics.drawLine(
       0 + anno.offsetX,
@@ -124,3 +122,3 @@ y1 + anno.offsetY,
 
-    let elText = graphics.drawText({
+    let elText = this.graphics.drawText({
       x: textX + anno.label.offsetX,
@@ -145,5 +143,4 @@ y: y1 + anno.label.offsetY - 3,
     let w = this.w
-    let graphics = new Graphics(this.ctx)
 
-    let elg = graphics.group({
+    let elg = this.graphics.group({
       class: 'apexcharts-yaxis-annotations'
@@ -161,3 +158,2 @@ })
     const w = this.w
-    let graphics = new Graphics(this.ctx)
 
@@ -201,3 +197,3 @@ let x = 0
     }
-    let point = graphics.drawMarker(x, pointY, optsPoints)
+    let point = this.graphics.drawMarker(x, pointY, optsPoints)
     parent.appendChild(point.node)
@@ -207,3 +203,3 @@
 
-    let elText = graphics.drawText({
+    let elText = this.graphics.drawText({
       x: x + anno.label.offsetX,
@@ -228,5 +224,4 @@ y: y + anno.label.offsetY,
     let w = this.w
-    let graphics = new Graphics(this.ctx)
 
-    let elg = graphics.group({
+    let elg = this.graphics.group({
       class: 'apexcharts-point-annotations'
@@ -244,3 +239,2 @@ })
     let w = this.w
-    let graphics = new Graphics(this.ctx)
 
@@ -262,3 +256,3 @@ annos.map((anno, index) => {
 
-          let annoRotatingCenter = graphics.rotateAroundCenter(xAnno)
+          let annoRotatingCenter = this.graphics.rotateAroundCenter(xAnno)
           const x = annoRotatingCenter.x
@@ -278,3 +272,2 @@ const y = annoRotatingCenter.y
     const w = this.w
-    const graphics = new Graphics(this.ctx)
 
@@ -299,3 +292,3 @@ const elGridRect = w.globals.dom.baseEl.querySelector('.apexcharts-grid').getBoundingClientRect()
     const y1 = coords.top - elGridRect.top - ptop
-    const elRect = graphics.drawRect(
+    const elRect = this.graphics.drawRect(
       x1,
@@ -347,6 +340,5 @@ y1,
 
-    const graphics = new Graphics(me.ctx)
     const parentNode = w.globals.dom.baseEl.querySelector(appendTo)
 
-    let elText = graphics.drawText({
+    let elText = this.graphics.drawText({
       x: x,
@@ -365,3 +357,3 @@ y: y,
     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)
+    const elRect = this.graphics.drawRect(textRect.x - paddingLeft, textRect.y - paddingTop, textRect.width + paddingLeft + paddingRight, textRect.height + paddingBottom + paddingTop, radius, backgroundColor, 1, borderWidth, borderColor, strokeDashArray)
 
@@ -382,3 +374,3 @@ elText.before(elRect)
   addPointAnnotationExternal (params, pushToMemory, context) {
-    this.addAnnotationExternal({params, pushToMemory, context, type: 'point', contextMethod: context.addPointAnnotation})
+    this.addAnnotationExternal({ params, pushToMemory, context, type: 'point', contextMethod: context.addPointAnnotation })
     return context
@@ -388,3 +380,3 @@ }
   addYaxisAnnotationExternal (params, pushToMemory, context) {
-    this.addAnnotationExternal({params, pushToMemory, context, type: 'yaxis', contextMethod: context.addYaxisAnnotation})
+    this.addAnnotationExternal({ params, pushToMemory, context, type: 'yaxis', contextMethod: context.addYaxisAnnotation })
     return context
@@ -391,0 +383,0 @@ }

src/modules/axes/Grid.js

@@ -94,3 +94,3 @@ import Animations from '../Animations'
         let y1 = 0
-        let x2 = w.globals.padHorizontal
+        let x2
         let y2 = w.globals.gridHeight
@@ -185,63 +185,2 @@
       }
-
-      // rows background bands
-      if (
-        w.config.grid.row.colors !== undefined &&
-        w.config.grid.row.colors.length > 0
-      ) {
-        let x1 = 0
-        let y1 = 0
-        let y2 = w.globals.gridHeight / tickAmount
-        let x2 = w.globals.gridWidth
-
-        for (let i = 0, c = 0; i < tickAmount; i++, c++) {
-          if (c >= w.config.grid.row.colors.length) {
-            c = 0
-          }
-          const color = w.config.grid.row.colors[c]
-          let rect = graphics.drawRect(
-            x1,
-            y1,
-            x2,
-            y2,
-            0,
-            color,
-            w.config.grid.row.opacity
-          )
-          elg.add(rect)
-          rect.node.classList.add('apexcharts-gridRow')
-
-          y1 = y1 + w.globals.gridHeight / tickAmount
-        }
-      }
-
-      // columns background bands
-      if (
-        w.config.grid.column.colors !== undefined &&
-        w.config.grid.column.colors.length > 0
-      ) {
-        let x1 = w.globals.padHorizontal
-        let y1 = 0
-        let x2 = w.globals.padHorizontal + (w.globals.gridWidth / xCount)
-        let y2 = w.globals.gridHeight
-        for (let i = 0, c = 0; i < xCount; i++, c++) {
-          if (c >= w.config.grid.column.colors.length) {
-            c = 0
-          }
-          const color = w.config.grid.column.colors[c]
-          let rect = graphics.drawRect(
-            x1,
-            y1,
-            x2,
-            y2,
-            0,
-            color,
-            w.config.grid.column.opacity
-          )
-          rect.node.classList.add('apexcharts-gridColumn')
-          elg.add(rect)
-
-          x1 = (x1 + w.globals.gridWidth / xCount)
-        }
-      }
     } else {
@@ -254,3 +193,3 @@ xCount = tickAmount
         let y1 = 0
-        let x2 = w.globals.padHorizontal
+        let x2
         let y2 = w.globals.gridHeight
@@ -316,2 +255,3 @@ for (let i = 0; i < xCount + 1; i++) {
 
+    this.drawGridBands(elg, xCount, tickAmount)
     return {
@@ -323,2 +263,67 @@ el: elg,
 
+  drawGridBands (elg, xCount, tickAmount) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
+
+    // rows background bands
+    if (
+      w.config.grid.row.colors !== undefined &&
+      w.config.grid.row.colors.length > 0
+    ) {
+      let x1 = 0
+      let y1 = 0
+      let y2 = w.globals.gridHeight / tickAmount
+      let x2 = w.globals.gridWidth
+
+      for (let i = 0, c = 0; i < tickAmount; i++, c++) {
+        if (c >= w.config.grid.row.colors.length) {
+          c = 0
+        }
+        const color = w.config.grid.row.colors[c]
+        let rect = graphics.drawRect(
+          x1,
+          y1,
+          x2,
+          y2,
+          0,
+          color,
+          w.config.grid.row.opacity
+        )
+        elg.add(rect)
+        rect.node.classList.add('apexcharts-gridRow')
+
+        y1 = y1 + w.globals.gridHeight / tickAmount
+      }
+    }
+
+    // columns background bands
+    if (
+      w.config.grid.column.colors !== undefined &&
+      w.config.grid.column.colors.length > 0
+    ) {
+      let x1 = w.globals.padHorizontal
+      let y1 = 0
+      let x2 = w.globals.padHorizontal + (w.globals.gridWidth / xCount)
+      let y2 = w.globals.gridHeight
+      for (let i = 0, c = 0; i < xCount; i++, c++) {
+        if (c >= w.config.grid.column.colors.length) {
+          c = 0
+        }
+        const color = w.config.grid.column.colors[c]
+        let rect = graphics.drawRect(
+          x1,
+          y1,
+          x2,
+          y2,
+          0,
+          color,
+          w.config.grid.column.opacity
+        )
+        rect.node.classList.add('apexcharts-gridColumn')
+        elg.add(rect)
+
+        x1 = (x1 + w.globals.gridWidth / xCount)
+      }
+    }
+  }
   animateLine (line, from, to) {
@@ -325,0 +330,0 @@ const w = this.w

src/modules/axes/XAxis.js

@@ -33,3 +33,11 @@ import Graphics from '../Graphics'
     this.xaxisForeColors = w.config.xaxis.labels.style.colors
+    this.xaxisBorderWidth = w.config.xaxis.axisBorder.width
 
+    if (this.xaxisBorderWidth.includes('%')) {
+      this.xaxisBorderWidth = (w.globals.gridWidth * parseInt(this.xaxisBorderWidth)) / 100
+    } else {
+      this.xaxisBorderWidth = parseInt(this.xaxisBorderWidth)
+    }
+    this.xaxisBorderHeight = w.config.xaxis.axisBorder.height
+
     // For bars, we will only consider single y xais,
@@ -188,7 +196,7 @@ // as we are not providing multiple yaxis for bar charts
         this.offY,
-        w.globals.gridWidth,
+        this.xaxisBorderWidth,
         this.offY,
         w.config.xaxis.axisBorder.color,
         0,
-        w.config.xaxis.axisBorder.strokeWidth
+        this.xaxisBorderHeight
       )
@@ -280,7 +288,7 @@
         this.offY,
-        w.globals.gridWidth,
+        this.xaxisBorderWidth,
         this.offY,
         this.yaxis.axisBorder.color,
         0,
-        w.config.xaxis.axisBorder.strokeWidth
+        this.xaxisBorderHeight
       )
@@ -287,0 +295,0 @@

src/modules/Core.js

 import Bar from '../charts/Bar'
 import BarStacked from '../charts/BarStacked'
 import CandleStick from '../charts/CandleStick'
+import CoreUtils from './CoreUtils'
 import Crosshairs from './Crosshairs'
@@ -31,2 +32,4 @@ import DateTime from './../utils/DateTime'
 
+    this.coreUtils = new CoreUtils(this.ctx)
+
     this.twoDSeries = []
@@ -683,3 +686,3 @@ this.threeDSeries = []
 
-    this.getLargestSeries()
+    this.coreUtils.getLargestSeries()
 
@@ -692,8 +695,8 @@ // set Null values to 0 in all series when user hides/shows some series
 
-    this.getSeriesTotals()
+    this.coreUtils.getSeriesTotals()
     if (gl.axisCharts) {
-      this.getStackedSeriesTotals()
+      this.coreUtils.getStackedSeriesTotals()
     }
 
-    this.getPercentSeries()
+    this.coreUtils.getPercentSeries()
 
@@ -706,127 +709,2 @@ // user didn't provide a [[x,y],[x,y]] series, but a named series
 
-  /**
-   * @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]
-   **/
-  getStackedSeriesTotals () {
-    const w = this.w
-    let total = []
-
-    for (let i = 0; i < w.globals.series[w.globals.maxValsInArrayIndex].length; i++) {
-      let t = 0
-      for (let 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
-  getSeriesTotalByIndex (index = null) {
-    if (index === null) {
-      // non-plot chart types - pie / donut / circle
-      return this.w.config.series.reduce((acc, cur) => {
-        return acc + cur
-      }, 0)
-    } else {
-      // axis charts - supporting multiple series
-      return this.w.config.series[index].data.reduce((acc, cur) => {
-        return acc + cur
-      }, 0)
-    }
-  }
-
-  // maxValsInArrayIndex is the index of series[] which has the largest number of items
-  getLargestSeries () {
-    const 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]
-   **/
-  getSeriesTotals () {
-    const w = this.w
-
-    w.globals.seriesTotals = w.globals.series.map((ser, index) => {
-      let total = 0
-
-      if (Array.isArray(ser)) {
-        for (let j = 0; j < ser.length; j++) {
-          total += ser[j]
-        }
-      } else {
-        // for pie/donuts/gauges
-        total += ser
-      }
-
-      return total
-    })
-  }
-
-  getSeriesTotalsXRange (minX, maxX) {
-    const w = this.w
-
-    const seriesTotalsXRange = w.globals.series.map((ser, index) => {
-      let total = 0
-
-      for (let 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]]
-   **/
-  getPercentSeries () {
-    const w = this.w
-
-    w.globals.seriesPercent = w.globals.series.map((ser, index) => {
-      let seriesPercent = []
-      if (Array.isArray(ser)) {
-        for (let j = 0; j < ser.length; j++) {
-          const total = w.globals.stackedSeriesTotals[j]
-          let percent = (100 * ser[j]) / total
-          seriesPercent.push(percent)
-        }
-      } else {
-        const total = w.globals.seriesTotals.reduce((acc, val) => {
-          return acc + val
-        }, 0)
-        let percent = (100 * ser) / total
-        seriesPercent.push(percent)
-      }
-
-      return seriesPercent
-    })
-  }
-
   xySettings () {
@@ -833,0 +711,0 @@ let xyRatios = null

src/modules/DataLabels.js

@@ -76,36 +76,36 @@ import Scatter from './../charts/Scatter'
 
-    if (dataLabelsConfig.enabled) {
-      elDataLabelsWrap = graphics.group({
-        class: 'apexcharts-data-labels'
-      })
+    if (!dataLabelsConfig.enabled || pos.x instanceof Array !== true) {
+      return elDataLabelsWrap
+    }
 
-      if (pos.x instanceof Array) {
-        for (let q = 0; q < pos.x.length; q++) {
-          x = pos.x[q] + dataLabelsConfig.offsetX
-          y = pos.y[q] + dataLabelsConfig.offsetY - w.config.markers.size - 5
+    elDataLabelsWrap = graphics.group({
+      class: 'apexcharts-data-labels'
+    })
 
-          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
+    for (let q = 0; q < pos.x.length; q++) {
+      x = pos.x[q] + dataLabelsConfig.offsetX
+      y = pos.y[q] + dataLabelsConfig.offsetY - w.config.markers.size - 5
 
-            let val = w.globals.series[i][realIndexP]
+      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
 
-            let text = ''
+        let val = w.globals.series[i][realIndexP]
 
-            if (w.config.chart.type === 'bubble') {
-              text = w.globals.seriesZ[i][realIndexP]
-              y = pos.y[q] + w.config.dataLabels.offsetY
-              const scatter = new Scatter(this.ctx)
-              let 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 })
-              }
-            }
+        let text = ''
 
-            this.plotDataLabelsText(x, y, text, i, realIndexP, elDataLabelsWrap, w.config.dataLabels)
+        if (w.config.chart.type === 'bubble') {
+          text = w.globals.seriesZ[i][realIndexP]
+          y = pos.y[q] + w.config.dataLabels.offsetY
+          const scatter = new Scatter(this.ctx)
+          let 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)
       }
@@ -112,0 +112,0 @@ }

src/modules/Dimensions.js

@@ -76,6 +76,9 @@ import Graphics from './Graphics'
       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
-      }
     }
+    if (this.yAxisWidth < w.config.yaxis[0].labels.minWidth) {
+      this.yAxisWidth = w.config.yaxis[0].labels.maxWidth
+    }
+    if (this.yAxisWidth > w.config.yaxis[0].labels.maxWidth) {
+      this.yAxisWidth = w.config.yaxis[0].labels.maxWidth
+    }
   }
@@ -82,0 +85,0 @@

src/modules/Graphics.js

@@ -515,5 +515,2 @@ import Utils from '../utils/Utils'
 
-    // if (w.config.states.active.filter.type !== 'none') {
-    // toggle selection
-
     let selected = 'false'
@@ -557,7 +554,2 @@ if (path.node.getAttribute('selected') === 'true') {
         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 }])
       }
@@ -568,8 +560,9 @@ } else {
       }
-      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 (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) {
@@ -576,0 +569,0 @@ this.w.config.chart.selection.selectedPoints(w.globals.selectedDataPoints)

src/modules/Legend.js

@@ -128,4 +128,2 @@ import Dimensions from './Dimensions'
           y = w.globals.svgHeight - this.rowHeight
-        } else if (w.config.legend.position === 'top') {
-          y = 0
         }
@@ -132,0 +130,0 @@

src/modules/Range.js

@@ -144,17 +144,26 @@ import Utils from '../utils/Utils'
 
+    const series = gl.series
+    let seriesMin = series
+    let seriesMax = series
+
+    if (this.w.config.chart.type === 'candlestick') {
+      seriesMin = gl.seriesCandleL
+      seriesMax = gl.seriesCandleH
+    }
+
     for (let i = startingIndex; i < len; i++) {
-      gl.dataPoints = Math.max(gl.dataPoints, gl.series[i].length)
+      gl.dataPoints = Math.max(gl.dataPoints, series[i].length)
       if (Utils.isIE()) {
-        minY = Math.min(...gl.series[i], 0)
+        minY = Math.min(...seriesMin[i], 0)
       }
 
       for (let j = 0; j < gl.series[i].length; j++) {
-        if (gl.series[i][j] !== null && Utils.isNumber(gl.series[i][j])) {
-          maxY = Math.max(maxY, gl.series[i][j])
-          minValInSeries = Math.min(minValInSeries, gl.series[i][j])
-          if (Utils.isFloat(gl.series[i][j])) {
-            gl.yValueDecimal = Math.max(gl.yValueDecimal, gl.series[i][j].toString().split('.')[1].length)
+        if (series[i][j] !== null && Utils.isNumber(series[i][j])) {
+          maxY = Math.max(maxY, seriesMax[i][j])
+          minValInSeries = Math.min(minValInSeries, seriesMin[i][j])
+          if (Utils.isFloat(series[i][j])) {
+            gl.yValueDecimal = Math.max(gl.yValueDecimal, series[i][j].toString().split('.')[1].length)
           }
-          if (minY > gl.series[i][j] && gl.series[i][j] < 0) {
-            minY = gl.series[i][j]
+          if (minY > seriesMin[i][j] && seriesMin[i][j] < 0) {
+            minY = seriesMin[i][j]
           }
@@ -235,4 +244,4 @@ } else {
         }
-        gl.minY = (minValInSeries - (diff * 10) / 100)
-        gl.maxY = (gl.maxY + (diff * 8) / 100)
+        gl.minY = (minValInSeries - (diff * 5) / 100)
+        gl.maxY = (gl.maxY + (diff * 5) / 100)
       }
@@ -239,0 +248,0 @@ }

src/modules/settings/Config.js

@@ -81,4 +81,8 @@ import Defaults from './Defaults'
 
+      if (opts.chart.brush && opts.chart.brush.enabled) {
+        chartDefaults = defaults.brush(chartDefaults)
+      }
+
       if (opts.chart.stacked && opts.chart.stackType === '100%') {
-        defaults.stacked100(chartDefaults)
+        defaults.stacked100()
       }
@@ -91,4 +95,4 @@ if ((opts.chart.sparkline && opts.chart.sparkline.enabled) || (window.Apex.chart && window.Apex.chart.sparkline && window.Apex.chart.sparkline.enabled)) {
 
-    // config should override in this fashion
-    // default config < global apex variable config < user defined config
+    // config should cascade in this fashion
+    // default-config < global-apex-variable-config < user-defined-config
 
@@ -195,3 +199,4 @@ // get GLOBALLY defined options and merge with the default config
       config.yaxis[0].tooltip.enabled = false // no xaxis tooltip for horizontal bar
-      config.chart.zoom.enabled = false // no zooming for bars
+      config.chart.zoom.enabled = false // no zooming for horz bars
+      config.chart.pan.enabled = false // no panning for horz bars
     }
@@ -198,0 +203,0 @@

src/modules/settings/Defaults.js

@@ -26,10 +26,2 @@ import Utils from '../../utils/Utils'
       },
-      title: {
-        style: {
-          fontFamily: 'Helvetica, Arial, sans-serif'
-        }
-      },
-      tooltip: {
-        // followCursor: true,
-      },
       xaxis: {
@@ -39,9 +31,2 @@ crosshairs: {
         }
-      },
-      yaxis: {
-        labels: {
-          style: {
-            fontFamily: 'Helvetica, Arial, sans-serif'
-          }
-        }
       }
@@ -67,4 +52,3 @@
       legend: {
-        show: false,
-        fontFamily: 'Helvetica, Arial, sans-serif'
+        show: false
       },
@@ -115,4 +99,3 @@ xaxis: {
         style: {
-          colors: ['#fff'],
-          fontFamily: 'Helvetica, Arial, sans-serif'
+          colors: ['#fff']
         }
@@ -131,8 +114,2 @@ },
           size: 8
-        },
-        fontFamily: 'Helvetica, Arial, sans-serif'
-      },
-      title: {
-        style: {
-          fontFamily: 'Helvetica, Arial, sans-serif'
         }
@@ -157,8 +134,3 @@ },
         }
-      },
-      yaxis: [{
-        tooltip: {
-          enabled: false
-        }
-      }]
+      }
     }
@@ -191,2 +163,9 @@ }
       },
+      states: {
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      },
       xaxis: {
@@ -196,8 +175,3 @@ crosshairs: {
         }
-      },
-      yaxis: [{
-        tooltip: {
-          enabled: true
-        }
-      }]
+      }
     }
@@ -228,2 +202,32 @@ }
 
+  brush (defaults) {
+    const ret = {
+      chart: {
+        toolbar: {
+          autoSelected: 'selection',
+          show: false
+        },
+        zoom: {
+          enabled: false
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 1
+      },
+      tooltip: {
+        enabled: false
+      },
+      xaxis: {
+        tooltip: {
+          enabled: false
+        }
+      }
+    }
+
+    return Utils.extend(defaults, ret)
+  }
+
   stacked100 () {
@@ -253,14 +257,5 @@ this.opts.dataLabels = this.opts.dataLabels || {}
         style: {
-          colors: ['#fff'],
-          fontFamily: 'Helvetica, Arial, sans-serif'
+          colors: ['#fff']
         }
       },
-      legend: {
-        fontFamily: 'Helvetica, Arial, sans-serif'
-      },
-      title: {
-        style: {
-          fontFamily: 'Helvetica, Arial, sans-serif'
-        }
-      },
       tooltip: {
@@ -322,4 +317,3 @@ shared: false,
         style: {
-          colors: ['#fff'],
-          fontFamily: 'Helvetica, Arial, sans-serif'
+          colors: ['#fff']
         }
@@ -342,4 +336,3 @@ },
           offsetY: 2
-        },
-        fontFamily: 'Helvetica, Arial, sans-serif'
+        }
       }
@@ -361,4 +354,3 @@ }
         style: {
-          colors: ['#fff'],
-          fontFamily: 'Helvetica, Arial, sans-serif'
+          colors: ['#fff']
         },
@@ -386,4 +378,3 @@ dropShadow: {
       legend: {
-        position: 'right',
-        fontFamily: 'Helvetica, Arial, sans-serif'
+        position: 'right'
       }
@@ -405,4 +396,3 @@ }
         style: {
-          colors: ['#fff'],
-          fontFamily: 'Helvetica, Arial, sans-serif'
+          colors: ['#fff']
         },
@@ -433,4 +423,3 @@ dropShadow: {
       legend: {
-        position: 'right',
-        fontFamily: 'Helvetica, Arial, sans-serif'
+        position: 'right'
       }
@@ -465,4 +454,3 @@ }
       legend: {
-        show: false,
-        fontFamily: 'Helvetica, Arial, sans-serif'
+        show: false
       },
@@ -469,0 +457,0 @@ tooltip: {

src/modules/settings/Options.js

@@ -8,2 +8,4 @@ /**
   constructor () {
+    this.defaultFont = 'Helvetica, Arial, sans-serif'
+
     this.yAxis = {
@@ -19,2 +21,3 @@ opposite: false,
         show: true,
+        minWidth: 0,
         maxWidth: 160,
@@ -26,3 +29,3 @@ offsetX: 0,
           fontSize: '11px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           cssClass: 'apexcharts-yaxis-label'
@@ -53,3 +56,3 @@ },
           fontSize: '11px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           cssClass: 'apexcharts-yaxis-title'
@@ -92,3 +95,3 @@ }
           fontSize: '11px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           cssClass: 'apexcharts-xaxis-annotation-label',
@@ -124,3 +127,3 @@ padding: {
           fontSize: '11px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           cssClass: 'apexcharts-yaxis-annotation-label',
@@ -161,3 +164,3 @@ padding: {
           fontSize: '11px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           cssClass: 'apexcharts-point-annotation-label',
@@ -218,3 +221,4 @@ padding: {
           beforeZoom: undefined, // if defined, should return true for the zoom event to occur
-          zoomed: undefined
+          zoomed: undefined,
+          scrolled: undefined
         },
@@ -252,2 +256,7 @@ foreColor: '#373d3f',
         },
+        brush: {
+          enabled: false,
+          target: undefined
+        },
+        brushSource: undefined,
         stacked: false,
@@ -364,3 +373,3 @@ stackType: 'normal',
               fontSize: '16px',
-              fontFamily: 'Helvetica, Arial, sans-serif',
+              fontFamily: this.defaultFont,
               color: undefined,
@@ -372,3 +381,3 @@ offsetY: -10
               fontSize: '14px',
-              fontFamily: 'Helvetica, Arial, sans-serif',
+              fontFamily: this.defaultFont,
               color: undefined,
@@ -426,3 +435,3 @@ offsetY: 16,
           fontSize: '12px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           colors: undefined
@@ -508,3 +517,3 @@ },
         fontSize: '12px',
-        fontFamily: 'Helvetica, Arial, sans-serif',
+        fontFamily: this.defaultFont,
         textAnchor: 'start',
@@ -569,3 +578,3 @@ offsetY: 0,
           fontSize: '14px',
-          fontFamily: 'Helvetica, Arial, sans-serif'
+          fontFamily: this.defaultFont
         }
@@ -605,3 +614,3 @@ },
           fontSize: '14px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           color: '#263238'
@@ -619,3 +628,3 @@ }
           fontSize: '12px',
-          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontFamily: this.defaultFont,
           color: '#9699a2'
@@ -670,3 +679,3 @@ }
           position: 'topRight', // topRight, topLeft, bottomRight, bottomLeft
-          offsetX: -100,
+          offsetX: 0,
           offsetY: 0
@@ -688,3 +697,3 @@ }
             fontSize: '12px',
-            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontFamily: this.defaultFont,
             cssClass: 'apexcharts-xaxis-label'
@@ -707,5 +716,6 @@ },
           color: '#78909C',
+          width: '100%',
+          height: 1,
           offsetX: 0,
-          offsetY: 0,
-          strokeWidth: 1
+          offsetY: 0
         },
@@ -732,3 +742,3 @@ axisTicks: {
             fontSize: '12px',
-            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontFamily: this.defaultFont,
             cssClass: 'apexcharts-xaxis-title'
@@ -735,0 +745,0 @@ }

src/modules/TimeScale.js

@@ -436,4 +436,12 @@ import DateTime from '../utils/DateTime'
     let unit = 'day'
+
+    let remainingHours = 24 - firstVal.minHour
     let yrCounter = 0
 
+    // calculate the first tick position
+    let firstTickPosition = remainingHours * hoursWidthOnXAxis
+    let firstTickValue = firstVal.minDate + 1
+
+    let val = firstTickValue
+
     const changeMonth = (dateVal, month, year) => {
@@ -446,2 +454,3 @@ let monthdays = dt.determineDaysOfMonths(month + 1, year)
         unit = 'month'
+        val = month
         return month
@@ -453,8 +462,2 @@ }
 
-    let remainingHours = 24 - firstVal.minHour
-
-    // calculate the first tick position
-    let firstTickPosition = remainingHours * hoursWidthOnXAxis
-    let firstTickValue = firstVal.minDate + 1
-
     let date = firstTickValue
@@ -466,7 +469,7 @@ let month = changeMonth(date, currentMonth, currentYear)
       position: firstTickPosition,
-      value: firstTickValue,
+      value: val,
       unit,
       year: currentYear,
       month: this.monthMod(month),
-      day: firstTickValue
+      day: date
     })
@@ -473,0 +476,0 @@

src/modules/Toolbar.js

@@ -174,4 +174,8 @@ import Graphics from './Graphics'
     this.w.globals.zoomEnabled = true
-    this.elZoom.classList.add('selected')
-    this.elPan.classList.remove('selected')
+    if (this.elZoom) {
+      this.elZoom.classList.add('selected')
+    }
+    if (this.elPan) {
+      this.elPan.classList.remove('selected')
+    }
   }
@@ -182,4 +186,9 @@
     this.w.globals.panEnabled = true
-    this.elPan.classList.add('selected')
-    this.elZoom.classList.remove('selected')
+
+    if (this.elPan) {
+      this.elPan.classList.add('selected')
+    }
+    if (this.elZoom) {
+      this.elZoom.classList.remove('selected')
+    }
   }
@@ -206,5 +215,11 @@
 
-    this.elPan.classList.remove('selected')
-    this.elSelection.classList.remove('selected')
-    this.elZoom.classList.remove('selected')
+    if (this.elPan) {
+      this.elPan.classList.remove('selected')
+    }
+    if (this.elSelection) {
+      this.elSelection.classList.remove('selected')
+    }
+    if (this.elZoom) {
+      this.elZoom.classList.remove('selected')
+    }
   }
@@ -211,0 +226,0 @@

src/modules/tooltip/Labels.js

@@ -287,2 +287,7 @@ import Formatters from '../Formatters'
         xVal = filteredSeriesX[i][j]
+        if (filteredSeriesX[i].length === 0) {
+          // a series (possibly the first one) might be collapsed, so get the next active index
+          const firstActiveSeriesIndex = this.tooltipUtil.getFirstActiveXArray(filteredSeriesX)
+          xVal = filteredSeriesX[firstActiveSeriesIndex][j]
+        }
       } else {
@@ -289,0 +294,0 @@ xVal = typeof w.globals.labels[j] !== 'undefined'

src/modules/tooltip/Position.js

@@ -40,6 +40,2 @@ import Graphics from '../Graphics'
       }
-
-      if (x < 0) {
-        x = 0
-      }
     } else {
@@ -51,2 +47,10 @@ if (j !== null) {
 
+    if (x < 0) {
+      x = 0
+    }
+
+    if (x > w.globals.gridWidth) {
+      x = w.globals.gridWidth
+    }
+
     if (xcrosshairs !== null) {
@@ -189,5 +193,9 @@ xcrosshairs.setAttribute('x', x)
     if (tooltipRect.ttHeight + y > w.globals.gridHeight) {
-      y = w.globals.gridHeight - tooltipRect.ttHeight / 2 - pointR
+      y = w.globals.gridHeight - tooltipRect.ttHeight + w.globals.translateY
     }
 
+    if (y < 0) {
+      y = 0
+    }
+
     if (!isNaN(x)) {
@@ -194,0 +202,0 @@ x = x + w.globals.translateX

src/modules/tooltip/Tooltip.js

@@ -286,7 +286,7 @@ import Labels from './Labels'
     if (w.config.tooltip.fixed.position.toLowerCase().indexOf('right') > -1) {
-      x = x + w.globals.svgWidth - 10
+      x = x + w.globals.svgWidth - ttWidth + 10
     }
 
     if (w.config.tooltip.fixed.position.toLowerCase().indexOf('bottom') > -1) {
-      y = y + w.globals.svgWidth - ttHeight - 10
+      y = y + w.globals.svgHeight - ttHeight - 10
     }
@@ -471,3 +471,5 @@
 
-        if (capj.hoverX < 0 || capj.hoverX > w.globals.gridWidth || capj.hoverY < 0 || capj.hoverY > w.globals.gridHeight) {
+        if (capj.hoverX < 0 || capj.hoverX > w.globals.gridWidth) {
+        // capj.hoverY causing issues in grouped charts, so commented out that condition for now
+        // if (capj.hoverX < 0 || capj.hoverX > w.globals.gridWidth || capj.hoverY < 0 || capj.hoverY > w.globals.gridHeight) {
           self.handleMouseOut(opt)
@@ -474,0 +476,0 @@ return

src/modules/ZoomPanSelection.js

@@ -484,7 +484,8 @@ import Graphics from './Graphics'
 
-        let beforeZoomRange = toolbar.getBeforeZoomRange(xaxis, yaxis)
-
-        if (beforeZoomRange !== null) {
-          xaxis = beforeZoomRange.xaxis
-          yaxis = beforeZoomRange.yaxis
+        if (toolbar) {
+          let beforeZoomRange = toolbar.getBeforeZoomRange(xaxis, yaxis)
+          if (beforeZoomRange !== null) {
+            xaxis = beforeZoomRange.xaxis
+            yaxis = beforeZoomRange.yaxis
+          }
         }
@@ -491,0 +492,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2311246

increased by0.35%

Number of package files

122

increased by0.83%

Lines of code

40915

increased by0.56%

No dependency changes