apexcharts - npm Package Compare versions

Comparing version 3.36.3 to 3.37.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.36.3",
+  "version": "3.37.0",
   "description": "A JavaScript Chart Library",
@@ -81,3 +81,3 @@ "repository": {
     "style-loader": "1.1.2",
-    "svg-inline-loader": "0.8.0",
+    "svg-inline-loader": "0.8.2",
     "terser": "5.14.2",
@@ -84,0 +84,0 @@ "tslint": "5.12.1",

src/apexcharts.js

@@ -264,6 +264,2 @@ import Annotations from './modules/annotations/Annotations'
 
-      if (w.config.chart.type !== 'treemap') {
-        me.axes.drawAxis(w.config.chart.type, elgrid)
-      }
-
       me.annotations = new Annotations(me)
@@ -275,22 +271,7 @@ me.annotations.drawImageAnnos()
         w.globals.dom.elGraphical.add(elgrid.el)
+        if (elgrid && elgrid.elGridBorders && elgrid.elGridBorders.node) {
+          w.globals.dom.elGraphical.add(elgrid.elGridBorders)
+        }
       }
 
-      let xAxis = new XAxis(this.ctx, elgrid)
-      let yaxis = new YAxis(this.ctx, elgrid)
-      if (elgrid !== null) {
-        xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
-        yaxis.setYAxisTextAlignments()
-
-        w.config.yaxis.map((yaxe, index) => {
-          if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
-            yaxis.yAxisTitleRotate(index, yaxe.opposite)
-          }
-        })
-      }
-
-      if (w.config.annotations.position === 'back') {
-        w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
-        me.annotations.drawAxesAnnotations()
-      }
-
       if (Array.isArray(graphData.elGraph)) {
@@ -306,8 +287,7 @@ for (let g = 0; g < graphData.elGraph.length; g++) {
         w.globals.dom.elGraphical.add(elgrid.el)
+        if (elgrid && elgrid.elGridBorders && elgrid.elGridBorders.node) {
+          w.globals.dom.elGraphical.add(elgrid.elGridBorders)
+        }
       }
 
-      if (elgrid && elgrid.elGridBorders && elgrid.elGridBorders.node) {
-        w.globals.dom.elGraphical.add(elgrid.elGridBorders)
-      }
-
       if (w.config.xaxis.crosshairs.position === 'front') {
@@ -326,2 +306,24 @@ me.crosshairs.drawXCrosshairs()
 
+      if (w.config.chart.type !== 'treemap') {
+        me.axes.drawAxis(w.config.chart.type, elgrid)
+      }
+
+      let xAxis = new XAxis(this.ctx, elgrid)
+      let yaxis = new YAxis(this.ctx, elgrid)
+      if (elgrid !== null) {
+        xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
+        yaxis.setYAxisTextAlignments()
+
+        w.config.yaxis.map((yaxe, index) => {
+          if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
+            yaxis.yAxisTitleRotate(index, yaxe.opposite)
+          }
+        })
+      }
+
+      if (w.config.annotations.position === 'back') {
+        w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
+        me.annotations.drawAxesAnnotations()
+      }
+
       if (!w.globals.noData) {
@@ -328,0 +330,0 @@ // draw tooltips at the end

src/charts/Bar.js

@@ -443,6 +443,7 @@ import BarDataLabels from './common/bar/DataLabels'
       }
-
-      x =
-        (w.globals.seriesX[sxI][j] - w.globals.minX) / this.xRatio -
-        (barWidth * this.seriesLen) / 2
+      if (w.globals.seriesX[sxI][j]) {
+        x =
+          (w.globals.seriesX[sxI][j] - w.globals.minX) / this.xRatio -
+          (barWidth * this.seriesLen) / 2
+      }
     }
@@ -449,0 +450,0 @@

src/charts/BarStacked.js

@@ -452,3 +452,2 @@ import CoreUtils from '../modules/CoreUtils'
       ) {
-        // Use the same calc way as line #485
         barYPosition = zeroH
@@ -464,7 +463,14 @@ } else {
 
-    y =
-      barYPosition -
-      this.series[i][j] / this.yRatio[this.yaxisIndex] +
-      (this.isReversed ? this.series[i][j] / this.yRatio[this.yaxisIndex] : 0) *
-        2
+    if (this.series[i][j]) {
+      y =
+        barYPosition -
+        this.series[i][j] / this.yRatio[this.yaxisIndex] +
+        (this.isReversed
+          ? this.series[i][j] / this.yRatio[this.yaxisIndex]
+          : 0) *
+          2
+    } else {
+      // fixes #3610
+      y = barYPosition
+    }
 
@@ -471,0 +477,0 @@ const paths = this.barHelpers.getColumnPaths({

src/modules/axes/Axes.js

@@ -34,2 +34,8 @@ import XAxis from './XAxis'
             gl.dom.Paper.add(elYaxis)
+
+            if (this.w.config.grid.position === 'back') {
+              const inner = gl.dom.Paper.children()[1]
+              inner.remove()
+              gl.dom.Paper.add(inner)
+            }
           }
@@ -36,0 +42,0 @@ })

src/modules/axes/Grid.js

@@ -286,45 +286,20 @@ import CoreUtils from '../CoreUtils'
     const categoryLines = ({ xC, x1, y1, x2, y2 }) => {
-      if (
-        typeof w.config.xaxis.tickAmount !== 'undefined' &&
-        w.config.xaxis.tickAmount !== 'dataPoints' &&
-        w.config.xaxis.tickPlacement === 'on'
-      ) {
-        // user has specified tickamount in a category x-axis chart
-        const visibleLabels = w.globals.dom.baseEl.querySelectorAll(
-          '.apexcharts-text.apexcharts-xaxis-label tspan:not(:empty)'
-        )
-
-        visibleLabels.forEach((d, i) => {
-          const textRect = d.getBBox()
-
-          this._drawGridLines({
-            i,
-            x1: textRect.x + textRect.width / 2,
-            y1,
-            x2: textRect.x + textRect.width / 2,
-            y2,
-            xCount,
-            parent: this.elgridLinesV
-          })
+      for (let i = 0; i < xC + (w.globals.isXNumeric ? 0 : 1); i++) {
+        if (i === 0 && xC === 1 && w.globals.dataPoints === 1) {
+          // single datapoint
+          x1 = w.globals.gridWidth / 2
+          x2 = x1
+        }
+        this._drawGridLines({
+          i,
+          x1,
+          y1,
+          x2,
+          y2,
+          xCount,
+          parent: this.elgridLinesV
         })
-      } else {
-        for (let i = 0; i < xC + (w.globals.isXNumeric ? 0 : 1); i++) {
-          if (i === 0 && xC === 1 && w.globals.dataPoints === 1) {
-            // single datapoint
-            x1 = w.globals.gridWidth / 2
-            x2 = x1
-          }
-          this._drawGridLines({
-            i,
-            x1,
-            y1,
-            x2,
-            y2,
-            xCount,
-            parent: this.elgridLinesV
-          })
 
-          x1 = x1 + w.globals.gridWidth / (w.globals.isXNumeric ? xC - 1 : xC)
-          x2 = x1
-        }
+        x1 = x1 + w.globals.gridWidth / (w.globals.isXNumeric ? xC - 1 : xC)
+        x2 = x1
       }
@@ -346,6 +321,2 @@ }
         }
-        if (w.config.xaxis.convertedCatToNumeric) {
-          // in case of a convertedCatToNumeric, some labels might be skipped due to hideOverLapping labels, hence use this var to get the visible ticks
-          xCount = w.globals.xaxisLabelsCount
-        }
         categoryLines({ xC: xCount, x1, y1, x2, y2 })
@@ -352,0 +323,0 @@ }

src/modules/axes/XAxis.js

@@ -130,3 +130,3 @@ import Graphics from '../Graphics'
           parseFloat(this.xaxisFontSize) +
-          (w.config.xaxis.title.position === 'bottom'
+          (w.config.xaxis.position === 'bottom'
             ? w.globals.xAxisLabelsHeight
@@ -284,6 +284,2 @@ : -w.globals.xAxisLabelsHeight - 10) +
 
-      if (isLeafGroup && label.text) {
-        w.globals.xaxisLabelsCount++
-      }
-
       if (w.config.xaxis.labels.show) {
@@ -408,7 +404,23 @@ let elText = graphics.drawText({
         }
+
+        let offsetX = ylabels.offsetX - 15
+        let textAnchor = 'end'
+        if (this.yaxis.opposite) {
+          textAnchor = 'start'
+        }
+        if (w.config.yaxis[0].labels.align === 'left') {
+          offsetX = ylabels.offsetX
+          textAnchor = 'start'
+        } else if (w.config.yaxis[0].labels.align === 'center') {
+          offsetX = ylabels.offsetX
+          textAnchor = 'middle'
+        } else if (w.config.yaxis[0].labels.align === 'right') {
+          textAnchor = 'end'
+        }
+
         let elLabel = graphics.drawText({
-          x: ylabels.offsetX - 15,
+          x: offsetX,
           y: yPos + colHeight + ylabels.offsetY - multiY,
           text: label,
-          textAnchor: this.yaxis.opposite ? 'start' : 'end',
+          textAnchor,
           foreColor: getForeColor(),
@@ -415,0 +427,0 @@ fontSize: ylabels.style.fontSize,

src/modules/axes/YAxis.js

@@ -83,2 +83,14 @@ import Graphics from '../Graphics'
 
+        let textAnchor = 'end'
+        if (w.config.yaxis[realIndex].opposite) {
+          textAnchor = 'start'
+        }
+        if (w.config.yaxis[realIndex].labels.align === 'left') {
+          textAnchor = 'start'
+        } else if (w.config.yaxis[realIndex].labels.align === 'center') {
+          textAnchor = 'middle'
+        } else if (w.config.yaxis[realIndex].labels.align === 'right') {
+          textAnchor = 'end'
+        }
+
         const yColors = this.axesUtils.getYAxisForeColor(
@@ -96,3 +108,3 @@ yaxisStyle.colors,
           text: val,
-          textAnchor: w.config.yaxis[realIndex].opposite ? 'start' : 'end',
+          textAnchor,
           fontSize: yaxisFontSize,
@@ -528,3 +540,3 @@ fontFamily: yaxisFontFamily,
       // proceed only if user has specified alignment
-      if (yaxe && yaxe.labels.align !== undefined) {
+      if (yaxe && !yaxe.floating && yaxe.labels.align !== undefined) {
         const yAxisInner = w.globals.dom.baseEl.querySelector(
@@ -531,0 +543,0 @@ `.apexcharts-yaxis[rel='${index}'] .apexcharts-yaxis-texts-g`

src/modules/Scales.js

@@ -209,3 +209,7 @@ import Utils from '../utils/Utils'
     // Create as many ticks as there is range in the logs.
-    for (let i = 0, logTick = logMin; i < ticks; i++, logTick += logTickSpacing) {
+    for (
+      let i = 0, logTick = logMin;
+      i < ticks;
+      i++, logTick += logTickSpacing
+    ) {
       logs.push(Math.pow(base, logTick))
@@ -231,7 +235,6 @@ }
     ) {
-      const formattedVal = this.w.config.yaxis[index].labels.formatter(1)
-      if (
-        Utils.isNumber(Number(formattedVal)) &&
-        !Utils.isFloat(formattedVal)
-      ) {
+      const formattedVal = Number(
+        this.w.config.yaxis[index].labels.formatter(1)
+      )
+      if (Utils.isNumber(formattedVal) && this.w.globals.yValueDecimal === 0) {
         newTicks = Math.ceil(range)
@@ -238,0 +241,0 @@ }

src/modules/settings/Config.js

@@ -22,17 +22,2 @@ import Defaults from './Defaults'
 
-    if (this.chartType === 'histogram') {
-      // technically, a histogram can be drawn by a column chart with no spaces in between
-      opts.chart.type = 'bar'
-      opts = Utils.extend(
-        {
-          plotOptions: {
-            bar: {
-              columnWidth: '99.99%'
-            }
-          }
-        },
-        opts
-      )
-    }
-
     opts = this.extendYAxis(opts)
@@ -53,3 +38,2 @@ opts = this.extendAnnotations(opts)
         'rangeArea',
-        'histogram',
         'bubble',
@@ -56,0 +40,0 @@ 'scatter',

src/modules/settings/Defaults.js

 import Utils from '../../utils/Utils'
 import DateTime from '../../utils/DateTime'
+import Formatters from '../Formatters'
 
@@ -10,3 +11,11 @@ /**
 
-const getRangeValues = ({ ctx, seriesIndex, dataPointIndex, y1, y2, w }) => {
+const getRangeValues = ({
+  isTimeline,
+  ctx,
+  seriesIndex,
+  dataPointIndex,
+  y1,
+  y2,
+  w
+}) => {
   let start = w.globals.seriesRangeStart[seriesIndex][dataPointIndex]
@@ -18,3 +27,3 @@ let end = w.globals.seriesRangeEnd[seriesIndex][dataPointIndex]
     : ''
-  const yLbFormatter = w.config.tooltip.y.formatter
+  const yLbFormatter = w.globals.ttKeyFormatter
   const yLbTitleFormatter = w.config.tooltip.y.title.formatter
@@ -34,5 +43,16 @@
   if (w.config.series[seriesIndex].data[dataPointIndex]?.x) {
-    ylabel = w.config.series[seriesIndex].data[dataPointIndex].x + ':'
+    ylabel = w.config.series[seriesIndex].data[dataPointIndex].x
   }
 
+  if (!isTimeline) {
+    if (w.config.xaxis.type === 'datetime') {
+      let xFormat = new Formatters(ctx)
+      ylabel = xFormat.xLabelFormat(w.globals.ttKeyFormatter, ylabel, ylabel, {
+        i: undefined,
+        dateFormatter: new DateTime(ctx).formatDate,
+        w
+      })
+    }
+  }
+
   if (typeof yLbFormatter === 'function') {
@@ -119,3 +139,3 @@ ylabel = yLbFormatter(ylabel, opts)
     ylabel +
-    ' </span> ' +
+    ': </span> ' +
     valueHTML +
@@ -355,5 +375,6 @@ ' </div>' +
     const handleTimelineTooltip = (opts) => {
-      const { color, seriesName, ylabel, startVal, endVal } = getRangeValues(
-        opts
-      )
+      const { color, seriesName, ylabel, startVal, endVal } = getRangeValues({
+        ...opts,
+        isTimeline: true
+      })
       return buildRangeTooltipHTML({
@@ -360,0 +381,0 @@ ...opts,

src/modules/settings/Globals.js

@@ -40,3 +40,2 @@ import Utils from './../../utils/Utils'
     gl.isXNumeric = false
-    gl.xaxisLabelsCount = 0
     gl.skipLastTimelinelabel = false
@@ -43,0 +42,0 @@ gl.skipFirstTimelinelabel = false

src/modules/settings/Options.js

@@ -734,3 +734,3 @@ /**
           lines: {
-            show: false
+            show: true
           }
@@ -737,0 +737,0 @@ },

src/modules/TimeScale.js

@@ -662,6 +662,3 @@ import DateTime from '../utils/DateTime'
       let year = this._getYear(currentYear, month, yrCounter)
-      pos =
-        hour === 0 && i === 0
-          ? remainingMins * minutesWidthOnXAxis
-          : 60 * minutesWidthOnXAxis + pos
+      pos = 60 * minutesWidthOnXAxis + pos
       let val = hour === 0 ? date : hour
@@ -668,0 +665,0 @@ this.timeScaleArray.push({

src/modules/tooltip/Labels.js

@@ -97,3 +97,13 @@ import Formatters from '../Formatters'
         const getValBySeriesIndex = (index) => {
-          return f.yLbFormatter(w.globals.series[index][j], {
+          let _val = ''
+          if (w.globals.isRangeData) {
+            _val +=
+              f.yLbFormatter(w.globals.seriesRangeStart?.[index]?.[j], {
+                series: w.globals.seriesRangeStart,
+                seriesIndex: index,
+                dataPointIndex: j,
+                w
+              }) + ' - '
+          }
+          _val += f.yLbFormatter(w.globals.series[index][j], {
             series: w.globals.series,
@@ -104,2 +114,4 @@ seriesIndex: index,
           })
+
+          return _val
         }
@@ -132,10 +144,10 @@ if (shared) {
           // get a color from a hover area (if it's a line pattern then get from a first line)
-          const targetFill = e?.target?.getAttribute('fill');
+          const targetFill = e?.target?.getAttribute('fill')
           if (targetFill) {
-            pColor = (targetFill.indexOf("url") !== -1) ? (
-              document
-                .querySelector(targetFill.substr(4).slice(0, -1))
-                .childNodes[0]
-                .getAttribute("stroke")
-            ) : targetFill;
+            pColor =
+              targetFill.indexOf('url') !== -1
+                ? document
+                    .querySelector(targetFill.substr(4).slice(0, -1))
+                    .childNodes[0].getAttribute('stroke')
+                : targetFill
           }
@@ -213,3 +225,3 @@ val = getValBySeriesIndex(i)
       } else {
-        yLbFormatter = function (label) {
+        yLbFormatter = function(label) {
           return label
@@ -221,3 +233,3 @@ }
     if (typeof yLbTitleFormatter !== 'function') {
-      yLbTitleFormatter = function (label) {
+      yLbTitleFormatter = function(label) {
         return label
@@ -361,25 +373,2 @@ }
       }
-
-      // TODO: issue #1240 needs to be looked at again. commenting it because this also hides single series values with 0 in it (shared tooltip)
-
-      // if (w.globals.stackedSeriesTotals[j] === 0) {
-      //   // shared tooltip and all values are null, so we need to hide the x value too
-      //   let allYZeroForJ = false
-      //   for (let si = 1; si < w.globals.seriesYvalues.length; si++) {
-      //     if (
-      //       w.globals.seriesYvalues[si][j] ===
-      //       w.globals.seriesYvalues[si - 1][j]
-      //     ) {
-      //       allYZeroForJ = true
-      //     }
-      //   }
-
-      //   if (allYZeroForJ) {
-      //     ttCtx.tooltipTitle.style.display = 'none'
-      //   } else {
-      //     ttCtx.tooltipTitle.style.display = w.config.tooltip.items.display
-      //   }
-      // } else {
-      //   ttCtx.tooltipTitle.style.display = w.config.tooltip.items.display
-      // }
     }
@@ -386,0 +375,0 @@ }

src/modules/tooltip/Tooltip.js

@@ -834,7 +834,18 @@ import Labels from './Labels'
 
+    const commonSeriesTextsParams = {
+      ttItems,
+      i: capturedSeries,
+      j,
+      ...(typeof w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y1 !==
+        'undefined' && {
+        y1: w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y1
+      }),
+      ...(typeof w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y2 !==
+        'undefined' && {
+        y2: w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y2
+      })
+    }
     if (shared) {
       ttCtx.tooltipLabels.drawSeriesTexts({
-        ttItems,
-        i: capturedSeries,
-        j,
+        ...commonSeriesTextsParams,
         shared: this.showOnIntersect ? false : this.tConfig.shared
@@ -873,5 +884,3 @@ })
         shared: false,
-        ttItems,
-        i: capturedSeries,
-        j
+        ...commonSeriesTextsParams
       })
@@ -878,0 +887,0 @@

types/apexcharts.d.ts

@@ -106,3 +106,2 @@ // Typescript declarations for Apex class and module.
     | 'bar'
-    | 'histogram'
     | 'pie'
@@ -109,0 +108,0 @@ | 'donut'

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

4297644

increased by0.51%

Number of package files

185

increased by1.09%

Lines of code

69237

increased by0.06%

No dependency changes