apexcharts - npm Package Compare versions

Comparing version 3.37.3 to 3.38.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.37.3",
+  "version": "3.38.0",
   "description": "A JavaScript Chart Library",
@@ -5,0 +5,0 @@ "repository": {

src/charts/Bar.js

@@ -253,2 +253,3 @@ import BarDataLabels from './common/bar/DataLabels'
     i,
+    groupIndex,
     pathFrom,
@@ -340,2 +341,3 @@ pathTo,
       realIndex,
+      groupIndex,
       barHeight,
@@ -342,0 +344,0 @@ barWidth,

src/charts/BarStacked.js

@@ -31,25 +31,4 @@ import CoreUtils from '../modules/CoreUtils'
     this.series = series
+    this.barHelpers.initializeStackedPrevVars(this)
 
-    this.totalItems = 0
-
-    this.prevY = [] // y position on chart
-    this.prevX = [] // x position on chart
-    this.prevYF = [] // y position including shapes on chart
-    this.prevXF = [] // x position including shapes on chart
-    this.prevYVal = [] // y values (series[i][j]) in columns
-    this.prevXVal = [] // x values (series[i][j]) in bars
-
-    this.xArrj = [] // xj indicates x position on graph in bars
-    this.xArrjF = [] // xjF indicates bar's x position + roundedShape's positions in bars
-    this.xArrjVal = [] // x val means the actual series's y values in horizontal/bars
-    this.yArrj = [] // yj indicates y position on graph in columns
-    this.yArrjF = [] // yjF indicates bar's y position + roundedShape's positions in columns
-    this.yArrjVal = [] // y val means the actual series's y values in columns
-
-    for (let sl = 0; sl < series.length; sl++) {
-      if (series[sl].length > 0) {
-        this.totalItems += series[sl].length
-      }
-    }
-
     let ret = this.graphics.group({
@@ -68,2 +47,15 @@ class: 'apexcharts-bar-series apexcharts-plot-series'
 
+      let groupIndex = -1 // groupIndex is the index of group buckets (group1, group2, ...)
+      this.groupCtx = this
+
+      w.globals.seriesGroups.forEach((group, gIndex) => {
+        if (group.indexOf(w.config.series[i].name) > -1) {
+          groupIndex = gIndex
+        }
+      })
+
+      if (groupIndex !== -1) {
+        this.groupCtx = this[w.globals.seriesGroups[groupIndex]]
+      }
+
       let xArrValues = []
@@ -123,21 +115,11 @@ let yArrValues = []
 
-      this.yArrj = []
-      this.yArrjF = []
-      this.yArrjVal = []
-      this.xArrj = []
-      this.xArrjF = []
-      this.xArrjVal = []
+      this.barHelpers.initializeStackedXYVars(this)
 
-      // if (!this.horizontal) {
-      // this.xArrj.push(x + barWidth / 2)
-      // }
-
-      // fix issue #1215;
       // where all stack bar disappear after collapsing the first series
-      // sol: if only 1 arr in this.prevY(this.prevY.length === 1) and all are NaN
-      if (this.prevY.length === 1 && this.prevY[0].every((val) => isNaN(val))) {
-        // make this.prevY[0] all zeroH
-        this.prevY[0] = this.prevY[0].map((val) => zeroH)
-        // make this.prevYF[0] all 0
-        this.prevYF[0] = this.prevYF[0].map((val) => 0)
+      if (
+        this.groupCtx.prevY.length === 1 &&
+        this.groupCtx.prevY[0].every((val) => isNaN(val))
+      ) {
+        this.groupCtx.prevY[0] = this.groupCtx.prevY[0].map((val) => zeroH)
+        this.groupCtx.prevYF[0] = this.groupCtx.prevYF[0].map((val) => 0)
       }
@@ -152,3 +134,5 @@
           y,
-          elSeries
+          elSeries,
+          groupIndex,
+          seriesGroup: w.globals.seriesGroups[groupIndex]
         }
@@ -200,2 +184,3 @@ let paths = null
           i,
+          groupIndex,
           pathFrom: paths.pathFrom,
@@ -222,8 +207,8 @@ pathTo: paths.pathTo,
       // push all current y values array to main PrevY Array
-      this.prevY.push(this.yArrj)
-      this.prevYF.push(this.yArrjF)
-      this.prevYVal.push(this.yArrjVal)
-      this.prevX.push(this.xArrj)
-      this.prevXF.push(this.xArrjF)
-      this.prevXVal.push(this.xArrjVal)
+      this.groupCtx.prevY.push(this.groupCtx.yArrj)
+      this.groupCtx.prevYF.push(this.groupCtx.yArrjF)
+      this.groupCtx.prevYVal.push(this.groupCtx.yArrjVal)
+      this.groupCtx.prevX.push(this.groupCtx.xArrj)
+      this.groupCtx.prevXF.push(this.groupCtx.xArrjF)
+      this.groupCtx.prevXVal.push(this.groupCtx.xArrjVal)
 
@@ -285,4 +270,8 @@ ret.add(elSeries)
       xDivision,
-      barHeight,
-      barWidth,
+      barHeight: w.globals.seriesGroups?.length
+        ? barHeight / w.globals.seriesGroups.length
+        : barHeight,
+      barWidth: w.globals.seriesGroups?.length
+        ? barWidth / w.globals.seriesGroups.length
+        : barWidth,
       zeroH,
@@ -300,2 +289,4 @@ zeroW
     y,
+    groupIndex,
+    seriesGroup,
     yDivision,
@@ -305,3 +296,3 @@ elSeries
     let w = this.w
-    let barYPosition = y
+    let barYPosition = y + (groupIndex !== -1 ? groupIndex * barHeight : 0)
     let barXPosition
@@ -312,21 +303,26 @@ let i = indexes.i
     let prevBarW = 0
-    for (let k = 0; k < this.prevXF.length; k++) {
-      prevBarW = prevBarW + this.prevXF[k][j]
+    for (let k = 0; k < this.groupCtx.prevXF.length; k++) {
+      prevBarW = prevBarW + this.groupCtx.prevXF[k][j]
     }
 
-    if (i > 0) {
+    let gsi = i // an index to keep track of the series inside a group
+    if (seriesGroup) {
+      gsi = seriesGroup.indexOf(w.config.series[i].name)
+    }
+
+    if (gsi > 0) {
       let bXP = zeroW
 
-      if (this.prevXVal[i - 1][j] < 0) {
+      if (this.groupCtx.prevXVal[gsi - 1][j] < 0) {
         bXP =
           this.series[i][j] >= 0
-            ? this.prevX[i - 1][j] +
+            ? this.groupCtx.prevX[gsi - 1][j] +
               prevBarW -
               (this.isReversed ? prevBarW : 0) * 2
-            : this.prevX[i - 1][j]
-      } else if (this.prevXVal[i - 1][j] >= 0) {
+            : this.groupCtx.prevX[gsi - 1][j]
+      } else if (this.groupCtx.prevXVal[gsi - 1][j] >= 0) {
         bXP =
           this.series[i][j] >= 0
-            ? this.prevX[i - 1][j]
-            : this.prevX[i - 1][j] -
+            ? this.groupCtx.prevX[gsi - 1][j]
+            : this.groupCtx.prevX[gsi - 1][j] -
               prevBarW +
@@ -359,2 +355,3 @@ (this.isReversed ? prevBarW : 0) * 2
       realIndex: indexes.realIndex,
+      seriesGroup,
       i,
@@ -392,3 +389,4 @@ j,
     zeroH,
-    strokeWidth,
+    groupIndex,
+    seriesGroup,
     elSeries
@@ -405,17 +403,29 @@ }) {
       x = (seriesVal - w.globals.minX) / this.xRatio - barWidth / 2
+
+      if (w.globals.seriesGroups.length) {
+        x =
+          (seriesVal - w.globals.minX) / this.xRatio -
+          (barWidth / 2) * w.globals.seriesGroups.length
+      }
     }
 
-    let barXPosition = x
+    let barXPosition = x + (groupIndex !== -1 ? groupIndex * barWidth : 0)
     let barYPosition
 
     let prevBarH = 0
-    for (let k = 0; k < this.prevYF.length; k++) {
+    for (let k = 0; k < this.groupCtx.prevYF.length; k++) {
       // fix issue #1215
-      // in case where this.prevYF[k][j] is NaN, use 0 instead
-      prevBarH = prevBarH + (!isNaN(this.prevYF[k][j]) ? this.prevYF[k][j] : 0)
+      // in case where this.groupCtx.prevYF[k][j] is NaN, use 0 instead
+      prevBarH =
+        prevBarH +
+        (!isNaN(this.groupCtx.prevYF[k][j]) ? this.groupCtx.prevYF[k][j] : 0)
     }
 
+    let gsi = i // an index to keep track of the series inside a group
+    if (seriesGroup) {
+      gsi = seriesGroup.indexOf(w.config.series[i].name)
+    }
     if (
-      (i > 0 && !w.globals.isXNumeric) ||
-      (i > 0 &&
+      (gsi > 0 && !w.globals.isXNumeric) ||
+      (gsi > 0 &&
         w.globals.isXNumeric &&
@@ -427,7 +437,10 @@ w.globals.seriesX[i - 1][j] === w.globals.seriesX[i][j])
       const p = Math.min(this.yRatio.length + 1, i + 1)
-      if (this.prevY[i - 1] !== undefined) {
+      if (
+        this.groupCtx.prevY[gsi - 1] !== undefined &&
+        this.groupCtx.prevY[gsi - 1].length
+      ) {
         for (let ii = 1; ii < p; ii++) {
-          if (!isNaN(this.prevY[i - ii][j])) {
+          if (!isNaN(this.groupCtx.prevY[gsi - ii]?.[j])) {
             // find the previous available value to give prevYValue
-            prevYValue = this.prevY[i - ii][j]
+            prevYValue = this.groupCtx.prevY[gsi - ii][j]
             // if found it, break the loop
@@ -441,3 +454,3 @@ break
         // find the previous available value(non-NaN) to give bYP
-        if (this.prevYVal[i - ii][j] < 0) {
+        if (this.groupCtx.prevYVal[gsi - ii]?.[j] < 0) {
           bYP =
@@ -449,3 +462,3 @@ this.series[i][j] >= 0
           break
-        } else if (this.prevYVal[i - ii][j] >= 0) {
+        } else if (this.groupCtx.prevYVal[gsi - ii]?.[j] >= 0) {
           bYP =
@@ -465,4 +478,6 @@ this.series[i][j] >= 0
       if (
-        this.prevYF[0].every((val) => val === 0) &&
-        this.prevYF.slice(1, i).every((arr) => arr.every((val) => isNaN(val)))
+        this.groupCtx.prevYF[0]?.every((val) => val === 0) &&
+        this.groupCtx.prevYF
+          .slice(1, gsi)
+          .every((arr) => arr.every((val) => isNaN(val)))
       ) {
@@ -500,2 +515,3 @@ barYPosition = zeroH
       series: this.series,
+      seriesGroup,
       realIndex: indexes.realIndex,
@@ -502,0 +518,0 @@ i,

src/charts/common/bar/DataLabels.js

@@ -32,2 +32,3 @@ import Graphics from '../../../modules/Graphics'
       realIndex,
+      groupIndex,
       series,
@@ -91,2 +92,3 @@ barHeight,
       realIndex,
+      groupIndex: !!groupIndex ? groupIndex : -1,
       renderedPath,
@@ -175,2 +177,3 @@ bcx,
       realIndex,
+      groupIndex,
       y,
@@ -199,3 +202,4 @@ bcx,
 
-    bcx = bcx - strokeWidth / 2
+    bcx =
+      bcx - strokeWidth / 2 + (groupIndex !== -1 ? groupIndex * barWidth : 0)
 
@@ -330,2 +334,3 @@ let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints
       realIndex,
+      groupIndex,
       bcy,
@@ -348,2 +353,4 @@ barHeight,
 
+    bcy = bcy + (groupIndex !== -1 ? groupIndex * barHeight : 0)
+
     let dataLabelsY =
@@ -350,0 +357,0 @@ bcy -

src/charts/common/bar/Helpers.js

@@ -44,3 +44,2 @@ import Fill from '../../../modules/Fill'
     this.barCtx.zeroSerieses = []
-    this.barCtx.radiusOnSeriesNumber = series.length - 1 // which series to draw ending shape on
 
@@ -147,2 +146,49 @@ if (!w.globals.comboCharts) {
 
+  initializeStackedPrevVars(ctx) {
+    const w = ctx.w
+    if (w.globals.hasSeriesGroups) {
+      w.globals.seriesGroups.forEach((group) => {
+        if (!ctx[group]) ctx[group] = {}
+
+        ctx[group].prevY = []
+        ctx[group].prevX = []
+        ctx[group].prevYF = []
+        ctx[group].prevXF = []
+        ctx[group].prevYVal = []
+        ctx[group].prevXVal = []
+      })
+    } else {
+      ctx.prevY = [] // y position on chart (in columns)
+      ctx.prevX = [] // x position on chart (in horz bars)
+      ctx.prevYF = [] // starting y and ending y (height) in columns
+      ctx.prevXF = [] // starting x and ending x (width) in bars
+      ctx.prevYVal = [] // y values (series[i][j]) in columns
+      ctx.prevXVal = [] // x values (series[i][j]) in bars
+    }
+  }
+
+  initializeStackedXYVars(ctx) {
+    const w = ctx.w
+
+    if (w.globals.hasSeriesGroups) {
+      w.globals.seriesGroups.forEach((group) => {
+        if (!ctx[group]) ctx[group] = {}
+
+        ctx[group].xArrj = []
+        ctx[group].xArrjF = []
+        ctx[group].xArrjVal = []
+        ctx[group].yArrj = []
+        ctx[group].yArrjF = []
+        ctx[group].yArrjVal = []
+      })
+    } else {
+      ctx.xArrj = [] // xj indicates x position on graph in bars
+      ctx.xArrjF = [] // xjF indicates bar's x position + x2 positions in bars
+      ctx.xArrjVal = [] // x val means the actual series's y values in horizontal/bars
+      ctx.yArrj = [] // yj indicates y position on graph in columns
+      ctx.yArrjF = [] // yjF indicates bar's y position + y2 positions in columns
+      ctx.yArrjVal = [] // y val means the actual series's y values in columns
+    }
+  }
+
   getPathFillColor(series, i, j, realIndex) {
@@ -259,2 +305,3 @@ const w = this.w
     strokeWidth,
+    seriesGroup,
     realIndex,
@@ -327,5 +374,9 @@ i,
     if (w.config.chart.stacked) {
-      this.barCtx.yArrj.push(y2)
-      this.barCtx.yArrjF.push(Math.abs(y1 - y2))
-      this.barCtx.yArrjVal.push(this.barCtx.series[i][j])
+      let _ctx = this.barCtx
+      if (w.globals.hasSeriesGroups && seriesGroup) {
+        _ctx = this.barCtx[seriesGroup]
+      }
+      _ctx.yArrj.push(y2)
+      _ctx.yArrjF.push(Math.abs(y1 - y2))
+      _ctx.yArrjVal.push(this.barCtx.series[i][j])
     }
@@ -345,2 +396,3 @@
     strokeWidth,
+    seriesGroup,
     realIndex,
@@ -411,5 +463,10 @@ i,
     if (w.config.chart.stacked) {
-      this.barCtx.xArrj.push(x2)
-      this.barCtx.xArrjF.push(Math.abs(x1 - x2))
-      this.barCtx.xArrjVal.push(this.barCtx.series[i][j])
+      let _ctx = this.barCtx
+      if (w.globals.hasSeriesGroups && seriesGroup) {
+        _ctx = this.barCtx[seriesGroup]
+      }
+
+      _ctx.xArrj.push(x2)
+      _ctx.xArrjF.push(Math.abs(x1 - x2))
+      _ctx.xArrjVal.push(this.barCtx.series[i][j])
     }
@@ -437,22 +494,2 @@ return {
     }
-
-    // After getting all zeroserieses, we need to ensure whether radiusOnSeriesNumber is not in that zeroseries array
-    for (let s = series.length - 1; s >= 0; s--) {
-      if (
-        this.barCtx.zeroSerieses.indexOf(s) > -1 &&
-        s === this.radiusOnSeriesNumber
-      ) {
-        this.barCtx.radiusOnSeriesNumber -= 1
-      }
-    }
-
-    for (let s = series.length - 1; s >= 0; s--) {
-      if (
-        w.globals.collapsedSeriesIndices.indexOf(
-          this.barCtx.radiusOnSeriesNumber
-        ) > -1
-      ) {
-        this.barCtx.radiusOnSeriesNumber -= 1
-      }
-    }
   }
@@ -459,0 +496,0 @@

src/modules/axes/Grid.js

@@ -186,3 +186,6 @@ import CoreUtils from '../CoreUtils'
       let y_2 = 0
-      if (w.globals.hasGroups && w.config.xaxis.tickPlacement === 'between') {
+      if (
+        w.globals.hasXaxisGroups &&
+        w.config.xaxis.tickPlacement === 'between'
+      ) {
         const groups = w.globals.groups
@@ -189,0 +192,0 @@ if (groups) {

src/modules/axes/XAxis.js

@@ -92,3 +92,3 @@ import Graphics from '../Graphics'
 
-    if (w.globals.hasGroups) {
+    if (w.globals.hasXaxisGroups) {
       let labelsGroup = w.globals.groups
@@ -95,0 +95,0 @@

src/modules/Core.js

@@ -218,3 +218,3 @@ import Bar from '../charts/Bar'
           console.warn(
-            'You have specified an unrecognized chart type. Available types for this property are line/area/column/bar/scatter/bubble'
+            'You have specified an unrecognized chart type. Available types for this property are line/area/column/bar/scatter/bubble/candlestick/boxPlot/rangeBar/rangeArea'
           )
@@ -267,7 +267,13 @@ }
         elGraph.push(
-          boxCandlestick.draw(candlestickSeries.series, 'candlestick', candlestickSeries.i)
+          boxCandlestick.draw(
+            candlestickSeries.series,
+            'candlestick',
+            candlestickSeries.i
+          )
         )
       }
       if (boxplotSeries.series.length > 0) {
-        elGraph.push(boxCandlestick.draw(boxplotSeries.series, 'boxPlot', boxplotSeries.i))
+        elGraph.push(
+          boxCandlestick.draw(boxplotSeries.series, 'boxPlot', boxplotSeries.i)
+        )
       }
@@ -274,0 +280,0 @@ if (rangeBarSeries.series.length > 0) {

src/modules/Data.js

@@ -393,8 +393,21 @@ import CoreUtils from './CoreUtils'
 
-    gl.hasGroups =
+    gl.hasXaxisGroups =
       cnf.xaxis.type === 'category' && cnf.xaxis.group.groups.length > 0
-    if (gl.hasGroups) {
+    if (gl.hasXaxisGroups) {
       gl.groups = cnf.xaxis.group.groups
     }
 
+    gl.hasSeriesGroups = ser[0]?.group
+    if (gl.hasSeriesGroups) {
+      let buckets = []
+      let groups = [...new Set(ser.map((s) => s.group))]
+      ser.forEach((s, i) => {
+        let index = groups.indexOf(s.group)
+        if (!buckets[index]) buckets[index] = []
+
+        buckets[index].push(s.name)
+      })
+      gl.seriesGroups = buckets
+    }
+
     const handleDates = () => {
@@ -401,0 +414,0 @@ for (let j = 0; j < xlabels.length; j++) {

src/modules/dimensions/Dimensions.js

@@ -284,3 +284,3 @@ import YAxis from '../axes/YAxis'
 
-    const xAxisNum = w.globals.hasGroups ? 2 : 1
+    const xAxisNum = w.globals.hasXaxisGroups ? 2 : 1
 
@@ -287,0 +287,0 @@ const baseXAxisHeight =

src/modules/dimensions/XAxis.js

@@ -166,3 +166,3 @@ import Formatters from '../Formatters'
 
-    if (!w.globals.hasGroups) {
+    if (!w.globals.hasXaxisGroups) {
       return { width: 0, height: 0 }
@@ -169,0 +169,0 @@ }

src/modules/Markers.js

@@ -118,2 +118,12 @@ import Filters from './Filters'
           }
+
+          if (
+            p.x[q] < 0 ||
+            p.x[q] > w.globals.gridWidth ||
+            p.y[q] < 0 ||
+            p.y[q] > w.globals.gridHeight
+          ) {
+            opts.pSize = 0
+          }
+
           point = graphics.drawMarker(p.x[q], p.y[q], opts)
@@ -120,0 +130,0 @@

src/modules/Range.js

@@ -525,31 +525,41 @@ import Utils from '../utils/Utils'
     // for stacked charts, we calculate each series's parallel values. i.e, series[0][j] + series[1][j] .... [series[i.length][j]] and get the max out of it
-    let stackedPoss = []
-    let stackedNegs = []
 
-    if (gl.series.length) {
-      for (let j = 0; j < gl.series[gl.maxValsInArrayIndex].length; j++) {
-        let poss = 0
-        let negs = 0
-        for (let i = 0; i < gl.series.length; i++) {
+    if (!gl.series.length) return
+    let seriesGroups = gl.seriesGroups
+
+    if (!seriesGroups.length) {
+      seriesGroups = [this.w.config.series.map((serie) => serie.name)]
+    }
+    let stackedPoss = {}
+    let stackedNegs = {}
+
+    seriesGroups.forEach((group) => {
+      stackedPoss[group] = []
+      stackedNegs[group] = []
+      const indicesOfSeriesInGroup = this.w.config.series
+        .map((serie, si) => (group.indexOf(serie.name) > -1 ? si : null))
+        .filter((f) => f !== null)
+
+      indicesOfSeriesInGroup.forEach((i) => {
+        for (let j = 0; j < gl.series[gl.maxValsInArrayIndex].length; j++) {
+          if (typeof stackedPoss[group][j] === 'undefined') {
+            stackedPoss[group][j] = 0
+            stackedNegs[group][j] = 0
+          }
+
           if (gl.series[i][j] !== null && Utils.isNumber(gl.series[i][j])) {
-            // 0.0001 fixes #185 when values are very small
             gl.series[i][j] > 0
-              ? (poss = poss + parseFloat(gl.series[i][j]) + 0.0001)
-              : (negs = negs + parseFloat(gl.series[i][j]))
+              ? (stackedPoss[group][j] += parseFloat(gl.series[i][j]) + 0.0001)
+              : (stackedNegs[group][j] += parseFloat(gl.series[i][j]))
           }
-
-          if (i === gl.series.length - 1) {
-            // push all the totals to the array for future use
-            stackedPoss.push(poss)
-            stackedNegs.push(negs)
-          }
         }
-      }
-    }
+      })
+    })
 
-    // get the max/min out of the added parallel values
-    for (let z = 0; z < stackedPoss.length; z++) {
-      gl.maxY = Math.max(gl.maxY, stackedPoss[z])
-      gl.minY = Math.min(gl.minY, stackedNegs[z])
-    }
+    Object.entries(stackedPoss).forEach(([key]) => {
+      stackedPoss[key].forEach((_, stgi) => {
+        gl.maxY = Math.max(gl.maxY, stackedPoss[key][stgi])
+        gl.minY = Math.min(gl.minY, stackedNegs[key][stgi])
+      })
+    })
   }
@@ -556,0 +566,0 @@ }

src/modules/settings/Globals.js

@@ -29,4 +29,6 @@ import Utils from './../../utils/Utils'
     gl.labels = []
-    gl.hasGroups = false
+    gl.hasXaxisGroups = false
     gl.groups = []
+    gl.hasSeriesGroups = false
+    gl.seriesGroups = []
     gl.categoryLabels = []
@@ -33,0 +35,0 @@ gl.timescaleLabels = []

types/apexcharts.d.ts

@@ -315,2 +315,3 @@ // Typescript declarations for Apex class and module.
   color?: string
+  group?: string
   data:
@@ -317,0 +318,0 @@ | (number | null)[]

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

4309776

increased by0.44%

Lines of code

69555

increased by0.3%

No dependency changes