apexcharts - npm Package Compare versions

Comparing version 3.39.0 to 3.40.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "description": "A JavaScript Chart Library",
@@ -67,3 +67,3 @@ "repository": {
     "jest": "27.3.1",
-    "nunjucks": "3.2.1",
+    "nunjucks": "3.2.4",
     "nyc": "15.0.0",
@@ -70,0 +70,0 @@ "pixelmatch": "5.1.0",

src/charts/BarStacked.js

@@ -227,2 +227,8 @@ import CoreUtils from '../modules/CoreUtils'
 
+      if (w.globals.seriesGroups?.length) {
+        barHeight = barHeight / w.globals.seriesGroups.length
+      }
+      if (String(w.config.plotOptions.bar.barHeight).indexOf('%') === -1) {
+        barHeight = parseInt(w.config.plotOptions.bar.barHeight, 10)
+      }
       zeroW =
@@ -250,3 +256,8 @@ this.baseLineInvertedY +
       }
-
+      if (w.globals.seriesGroups?.length) {
+        barWidth = barWidth / w.globals.seriesGroups.length
+      }
+      if (String(w.config.plotOptions.bar.columnWidth).indexOf('%') === -1) {
+        barWidth = parseInt(w.config.plotOptions.bar.columnWidth, 10)
+      }
       zeroH =
@@ -266,8 +277,4 @@ w.globals.gridHeight -
       xDivision,
-      barHeight: w.globals.seriesGroups?.length
-        ? barHeight / w.globals.seriesGroups.length
-        : barHeight,
-      barWidth: w.globals.seriesGroups?.length
-        ? barWidth / w.globals.seriesGroups.length
-        : barWidth,
+      barHeight,
+      barWidth,
       zeroH,
@@ -274,0 +281,0 @@ zeroW

src/charts/common/bar/Helpers.js

@@ -78,2 +78,6 @@ import Fill from '../../../modules/Fill'
 
+      if (String(this.barCtx.barOptions.barHeight).indexOf('%') === -1) {
+        barHeight = parseInt(this.barCtx.barOptions.barHeight, 10)
+      }
+
       zeroW =
@@ -120,2 +124,5 @@ this.barCtx.baseLineInvertedY +
       }
+      if (String(this.barCtx.barOptions.columnWidth).indexOf('%') === -1) {
+        barWidth = parseInt(this.barCtx.barOptions.columnWidth, 10)
+      }
 
@@ -521,2 +528,12 @@ zeroH =
     let goals = []
+
+    const pushGoal = (value, attrs) => {
+      goals.push({
+        [type]:
+          type === 'x'
+            ? this.getXForValue(value, zeroW, false)
+            : this.getYForValue(value, zeroH, false),
+        attrs
+      })
+    }
     if (
@@ -528,11 +545,23 @@ w.globals.seriesGoals[i] &&
       w.globals.seriesGoals[i][j].forEach((goal) => {
-        goals.push({
-          [type]:
-            type === 'x'
-              ? this.getXForValue(goal.value, zeroW, false)
-              : this.getYForValue(goal.value, zeroH, false),
-          attrs: goal
-        })
+        pushGoal(goal.value, goal)
       })
     }
+    if (this.barCtx.barOptions.isDumbbell && w.globals.seriesRange.length) {
+      let colors = this.barCtx.barOptions.dumbbellColors
+        ? this.barCtx.barOptions.dumbbellColors
+        : w.globals.colors
+      const commonAttrs = {
+        strokeHeight: type === 'x' ? 0 : w.globals.markers.size[i],
+        strokeWidth: type === 'x' ? w.globals.markers.size[i] : 0,
+        strokeDashArray: 0,
+        strokeLineCap: 'round',
+        strokeColor: Array.isArray(colors[i]) ? colors[i][0] : colors[i]
+      }
+
+      pushGoal(w.globals.seriesRangeStart[i][j], commonAttrs)
+      pushGoal(w.globals.seriesRangeEnd[i][j], {
+        ...commonAttrs,
+        strokeColor: Array.isArray(colors[i]) ? colors[i][1] : colors[i]
+      })
+    }
     return goals
@@ -554,2 +583,12 @@ }
 
+    lineGroup.node.classList.add('apexcharts-element-hidden')
+    this.barCtx.w.globals.delayedElements.push({
+      el: lineGroup.node
+    })
+
+    lineGroup.attr(
+      'clip-path',
+      `url(#gridRectMarkerMask${this.barCtx.w.globals.cuid})`
+    )
+
     let line = null
@@ -556,0 +595,0 @@ if (this.barCtx.isHorizontal) {

src/modules/axes/Grid.js

@@ -238,3 +238,3 @@ import CoreUtils from '../CoreUtils'
 
-    if (excludeBorders) {
+    if (excludeBorders && w.config.grid.show) {
       this.elGridBorders.add(line)
@@ -454,2 +454,3 @@ } else {
       if (this.isRangeBar) {
+        xCount--
         yTickAmount = w.globals.labels.length
@@ -456,0 +457,0 @@ if (w.config.xaxis.tickAmount && w.config.xaxis.labels.formatter) {

src/modules/axes/XAxis.js

@@ -160,4 +160,3 @@ import Graphics from '../Graphics'
       )
-
-      if (this.elgrid && this.elgrid.elGridBorders) {
+      if (this.elgrid && this.elgrid.elGridBorders && w.config.grid.show) {
         this.elgrid.elGridBorders.add(elHorzLine)
@@ -502,3 +501,3 @@ } else {
 
-      if (this.elgrid && this.elgrid.elGridBorders) {
+      if (this.elgrid && this.elgrid.elGridBorders && w.config.grid.show) {
         this.elgrid.elGridBorders.add(elVerticalLine)
@@ -505,0 +504,0 @@ } else {

src/modules/axes/YAxis.js

@@ -335,3 +335,3 @@ import Graphics from '../Graphics'
       // in horizontal bars, we append axisBorder to elGridBorders element to avoid z-index issues
-      if (this.elgrid && this.elgrid.elGridBorders) {
+      if (this.elgrid && this.elgrid.elGridBorders && w.config.grid.show) {
         this.elgrid.elGridBorders.add(elHorzLine)
@@ -338,0 +338,0 @@ } else {

src/modules/Graphics.js

@@ -48,2 +48,4 @@ import Animations from './Animations'
   roundPathCorners(pathString, radius) {
+    if (pathString.indexOf('NaN') > -1) pathString = ''
+
     function moveTowardsLength(movingPoint, targetPoint, amount) {
@@ -50,0 +52,0 @@ var width = targetPoint.x - movingPoint.x

src/modules/settings/Config.js

@@ -58,3 +58,3 @@ import Defaults from './Defaults'
 
-      if (opts.chart.brush && opts.chart.brush.enabled) {
+      if (opts.chart.brush?.enabled) {
         chartDefaults = defaults.brush(chartDefaults)
@@ -67,2 +67,6 @@ }
 
+      if (opts.plotOptions?.bar?.isDumbbell) {
+        opts = defaults.dumbbell(opts)
+      }
+
       // If user has specified a dark theme, make the tooltip dark too
@@ -83,6 +87,4 @@ this.checkForDarkTheme(window.Apex) // check global window Apex options
       if (
-        (opts.chart.sparkline && opts.chart.sparkline.enabled) ||
-        (window.Apex.chart &&
-          window.Apex.chart.sparkline &&
-          window.Apex.chart.sparkline.enabled)
+        opts.chart.sparkline?.enabled ||
+        window.Apex.chart?.sparkline?.enabled
       ) {
@@ -114,5 +116,3 @@ chartDefaults = defaults.sparkline(chartDefaults)
       (chartType === 'bar' || chartType === 'boxPlot') &&
-      opts.plotOptions &&
-      opts.plotOptions.bar &&
-      opts.plotOptions.bar.horizontal
+      opts.plotOptions?.bar?.horizontal
 
@@ -119,0 +119,0 @@ const unsupportedZoom =

src/modules/settings/Defaults.js

@@ -397,2 +397,7 @@ import Utils from '../../utils/Utils'
     return {
+      chart: {
+        animations: {
+          animateGradually: false
+        }
+      },
       stroke: {
@@ -439,2 +444,5 @@ width: 0,
       },
+      markers: {
+        size: 10
+      },
       tooltip: {
@@ -469,2 +477,12 @@ shared: false,
 
+  dumbbell(opts) {
+    if (!opts.plotOptions.bar?.barHeight) {
+      opts.plotOptions.bar.barHeight = 2
+    }
+    if (!opts.plotOptions.bar?.columnWidth) {
+      opts.plotOptions.bar.columnWidth = 2
+    }
+    return opts
+  }
+
   area() {
@@ -471,0 +489,0 @@ return {

src/modules/settings/Options.js

@@ -415,2 +415,4 @@ /**
           hideZeroBarsWhenGrouped: false,
+          isDumbbell: false,
+          dumbbellColors: undefined,
           colors: {
@@ -417,0 +419,0 @@ ranges: [],

types/apexcharts.d.ts

@@ -513,4 +513,4 @@ // Typescript declarations for Apex class and module.
     horizontal?: boolean
-    columnWidth?: string
-    barHeight?: string
+    columnWidth?: string | number;
+    barHeight?: string | number;
     distributed?: boolean
@@ -523,2 +523,4 @@ borderRadius?: number;
     rangeBarGroupRows?: boolean
+    isDumbbell?: boolean;
+    dumbbellColors?: string[][];
     colors?: {
@@ -525,0 +527,0 @@ ranges?: {

No alert changes

Improved metrics

Total package byte prevSize

4326913

0.32%

Lines of code

69699

0.23%

No dependency changes