apexcharts - npm Package Compare versions

Comparing version 2.1.8 to 2.1.9

package.json

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

src/apexcharts.js

@@ -334,2 +334,10 @@ import Annotations from './modules/Annotations'
 
+  clearPreviousPaths () {
+    const w = this.w
+    w.globals.previousPaths = []
+    w.globals.allSeriesCollapsed = false
+    w.globals.collapsedSeries = []
+    w.globals.collapsedSeriesIndices = []
+  }
+
   /**
@@ -363,2 +371,5 @@ * Allows users to update Options after the chart has rendered.
     }
+    if (w.globals.allSeriesCollapsed) {
+      this.clearPreviousPaths()
+    }
     return this._updateOptions(options, redraw, animate, overwriteInitialConfig)
@@ -435,2 +446,7 @@ }
 
+    // if user has collapsed some series with legend, we need to clear those
+    if (w.globals.allSeriesCollapsed) {
+      w.globals.allSeriesCollapsed = false
+    }
+
     if (animate) {
@@ -437,0 +453,0 @@ this.series.getPreviousPaths()

src/charts/Line.js

@@ -43,4 +43,3 @@ import CoreUtils from '../modules/CoreUtils'
     let ret = graphics.group({
-      class: `apexcharts-${type}-series apexcharts-plot-series`,
-      'clip-path': `url(#gridRectMask${w.globals.cuid})`
+      class: `apexcharts-${type}-series apexcharts-plot-series`
     })
@@ -376,5 +375,7 @@
 
+    const curve = Array.isArray(w.config.stroke.curve) ? w.config.stroke.curve[i] : w.config.stroke.curve
+
     // logic of smooth curve derived from chartist
     // CREDITS: https://gionkunz.github.io/chartist-js/
-    if (w.config.stroke.curve === 'smooth') {
+    if (curve === 'smooth') {
       let length = (x - pX) * 0.35
@@ -381,0 +382,0 @@ if (w.globals.hasNullValues) {

src/charts/Pie.js

@@ -331,6 +331,2 @@ import Fill from '../modules/Fill'
     )
-    elPath.node.addEventListener(
-      'touchStart',
-      graphics.pathMouseDown.bind(this, elPath), {passive: true}
-    )
   }
@@ -337,0 +333,0 @@

src/modules/Annotations.js

@@ -332,3 +332,3 @@ import Graphics from './Graphics'
       fontSize: fontSize || '12px',
-      fontFamily: fontFamily || 'Arial',
+      fontFamily: fontFamily || w.config.chart.fontFamily,
       foreColor: foreColor || w.config.chart.foreColor,
@@ -335,0 +335,0 @@ cssClass: 'apexcharts-text ' + cssClass ? cssClass : ''

src/modules/axes/Grid.js

@@ -85,2 +85,5 @@ import Animations from '../Animations'
 
+      const coreUtils = new CoreUtils(this)
+      coreUtils.getLargestMarkerSize()
+
       if (elgrid !== null) {
@@ -104,15 +107,3 @@ xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
 
-    let markerSize = 0
-    const coreUtils = new CoreUtils(this)
-    const largestMarkerSize = coreUtils.getLargestMarkerSize()
-    const largestMarkerSizeIndex = w.globals.markers.size.indexOf(largestMarkerSize)
-
-    if (!w.config.grid.clipMarkers) {
-      const normalMarkerSize = w.globals.markers.size[largestMarkerSizeIndex]
-      const hoverMarkerSize = normalMarkerSize + w.config.markers.hover.sizeOffset
-
-      markerSize = normalMarkerSize > hoverMarkerSize ? normalMarkerSize : hoverMarkerSize
-    }
-
-    gl.dom.elGridRect = graphics.drawRect(0, 0 - markerSize * 1.2, gl.gridWidth, gl.gridHeight + markerSize * 2.4, 0, '#fff')
+    gl.dom.elGridRect = graphics.drawRect(0, 0, gl.gridWidth, gl.gridHeight, 0, '#fff')
     gl.dom.elGridRectMask.appendChild(gl.dom.elGridRect.node)
@@ -119,0 +110,0 @@

src/modules/axes/XAxis.js

@@ -159,4 +159,3 @@ import Graphics from '../Graphics'
 
-        const tspan = elTick.tspan(label)
-        tspan.node.style.fontFamily = this.xaxisFontFamily
+        graphics.addTspan(elTick, label, this.xaxisFontFamily)
 
@@ -163,0 +162,0 @@ let elTooltipTitle = document.createElementNS(w.globals.svgNS, 'title')

src/modules/Filters.js

 import Utils from './../utils/Utils'
 
 /**
- * ApexCharts Filters Class for setting value formatters for axes as well as tooltips.
+ * ApexCharts Filters Class for setting hover/active states on the paths.
  *
@@ -6,0 +6,0 @@ * @module Formatters

src/modules/Graphics.js

@@ -219,2 +219,5 @@ import Utils from '../utils/Utils'
     el.attr('index', realIndex)
+    el.attr({
+      'clip-path': `url(#gridRectMask${w.globals.cuid})`
+    })
 
@@ -236,5 +239,3 @@ // const defaultFilter = el.filterer
     el.node.addEventListener('mouseleave', this.pathMouseLeave.bind(this, el))
-
     el.node.addEventListener('mousedown', this.pathMouseDown.bind(this, el))
-    el.node.addEventListener('touchstart', this.pathMouseDown.bind(this, el), {passive: true})
 
@@ -389,2 +390,3 @@ el.attr({
     }
+    fontFamily = fontFamily || w.config.chart.fontFamily
 
@@ -419,2 +421,11 @@ let elText
 
+  addTspan (textEl, text, fontFamily) {
+    const tspan = textEl.tspan(text)
+
+    if (!fontFamily) {
+      fontFamily = this.w.config.chart.fontFamily
+    }
+    tspan.node.style.fontFamily = fontFamily
+  }
+
   drawMarker (x, y, opts) {
@@ -494,4 +505,6 @@ x = x || 0
     if (w.config.states.hover.filter.type !== 'none') {
-      let hoverFilter = w.config.states.hover.filter
-      filters.applyFilter(path, hoverFilter.type, hoverFilter.value)
+      if (w.config.states.active.filter.type !== 'none' && !w.globals.isTouchDevice) {
+        let hoverFilter = w.config.states.hover.filter
+        filters.applyFilter(path, hoverFilter.type, hoverFilter.value)
+      }
     }
@@ -498,0 +511,0 @@ }

src/modules/Legend.js

@@ -447,2 +447,9 @@ import Dimensions from './Dimensions'
 
+      const legendClick = this.w.config.chart.events.legendClick
+      if (typeof legendClick === 'function') {
+        legendClick(this.ctx, seriesCnt, this.w)
+      }
+
+      this.ctx.fireEvent('legendClick', [this.ctx, seriesCnt, this.w])
+
       this.toggleDataSeries(seriesCnt, isHidden)
@@ -449,0 +456,0 @@ }

src/modules/Markers.js

@@ -20,4 +20,4 @@ import Filters from './Filters'
     if (w.globals.markers.size.length > 0) {
-      if (w.globals.markers.size.length < w.globals.series.length) {
-        for (let i = 0; i < w.globals.series.length - w.globals.markers.size.length + 1; i++) {
+      if (w.globals.markers.size.length < w.globals.series.length + 1) {
+        for (let i = 0; i <= w.globals.series.length - w.globals.markers.size.length + 1; i++) {
           w.globals.markers.size.push(w.globals.markers.size[0])
@@ -24,0 +24,0 @@ }

src/modules/Range.js

@@ -103,3 +103,4 @@ import Utils from '../utils/Utils'
             if (gl.series[i][j] > 0) {
-              poss = poss + parseInt(gl.series[i][j]) + 1
+              // 0.0001 fixes #185 when values are very small
+              poss = poss + parseInt(gl.series[i][j]) + 0.0001
             } else {
@@ -134,4 +135,13 @@ negs = negs + parseInt(gl.series[i][j])
         }
+
         gl.minY = (lowestYInAllSeries - (diff * 5) / 100)
-        gl.maxY = (gl.maxY + (diff * 5) / 100)
+
+        // no negatives present and values are small.
+        if ((lowestYInAllSeries > 0 && gl.maxY < 50) || (lowestYInAllSeries > 0 && gl.minY < 0)) {
+          gl.minY = 0
+        }
+
+        if (gl.maxY > 10) {
+          gl.maxY = (gl.maxY + (diff * 5) / 100) + 0.6
+        }
       }
@@ -138,0 +148,0 @@ }

src/modules/settings/Globals.js

@@ -35,2 +35,3 @@ import Utils from './../../utils/Utils'
       },
+      isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints,
       isDirty: false, // chart has been updated after the initial render. This is different than dataChanged property. isDirty means user manually called some method to update
@@ -51,2 +52,3 @@ initialConfig: null, // we will store the first config user has set to go back when user finishes interactions like zooming and come out of it
       noLabelsProvided: false, // if user didn't provide any categories/labels or x values, fallback to 1,2,3,4...
+      allSeriesCollapsed: false,
       collapsedSeries: [], // when user collapses a series, it goes into this array
@@ -53,0 +55,0 @@ collapsedSeriesIndices: [], // this just stores the index of the collapsedSeries instead of whole object

src/modules/settings/Options.js

@@ -29,3 +29,3 @@ /**
           fontSize: '11px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           cssClass: 'apexcharts-yaxis-label'
@@ -56,3 +56,3 @@ },
           fontSize: '11px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           cssClass: 'apexcharts-yaxis-title'
@@ -95,3 +95,3 @@ }
           fontSize: '11px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           cssClass: 'apexcharts-xaxis-annotation-label',
@@ -127,3 +127,3 @@ padding: {
           fontSize: '11px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           cssClass: 'apexcharts-yaxis-annotation-label',
@@ -164,3 +164,3 @@ padding: {
           fontSize: '11px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           cssClass: 'apexcharts-point-annotation-label',
@@ -216,3 +216,4 @@ padding: {
           updated: undefined,
-          clicked: undefined,
+          click: undefined,
+          legendClick: undefined,
           selection: undefined,
@@ -227,2 +228,3 @@ dataPointSelection: undefined,
         foreColor: '#373d3f',
+        fontFamily: this.defaultFont,
         height: 'auto',
@@ -376,3 +378,3 @@ id: undefined,
               fontSize: '16px',
-              fontFamily: this.defaultFont,
+              fontFamily: undefined,
               color: undefined,
@@ -384,3 +386,3 @@ offsetY: -10
               fontSize: '14px',
-              fontFamily: this.defaultFont,
+              fontFamily: undefined,
               color: undefined,
@@ -438,3 +440,3 @@ offsetY: 16,
           fontSize: '12px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           colors: undefined
@@ -481,3 +483,2 @@ },
         position: 'back',
-        clipMarkers: true,
         xaxis: {
@@ -522,3 +523,3 @@ lines: {
         fontSize: '12px',
-        fontFamily: this.defaultFont,
+        fontFamily: undefined,
         textAnchor: 'start',
@@ -584,3 +585,3 @@ offsetY: 0,
           fontSize: '14px',
-          fontFamily: this.defaultFont
+          fontFamily: undefined
         }
@@ -620,3 +621,3 @@ },
           fontSize: '14px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           color: undefined
@@ -634,3 +635,3 @@ }
           fontSize: '12px',
-          fontFamily: this.defaultFont,
+          fontFamily: undefined,
           color: undefined
@@ -655,6 +656,6 @@ }
         fillSeriesColor: false,
+        theme: 'light',
         onDatasetHover: {
           highlightDataSeries: false
         },
-        theme: 'light',
         x: { // x value
@@ -705,3 +706,3 @@ show: true,
             fontSize: '12px',
-            fontFamily: this.defaultFont,
+            fontFamily: undefined,
             cssClass: 'apexcharts-xaxis-label'
@@ -749,3 +750,3 @@ },
             fontSize: '12px',
-            fontFamily: this.defaultFont,
+            fontFamily: undefined,
             cssClass: 'apexcharts-xaxis-title'
@@ -752,0 +753,0 @@ }

src/modules/Toolbar.js

@@ -305,2 +305,7 @@ import Graphics from './Graphics'
         ch.revertDefaultAxisMinMax()
+
+        if (typeof w.config.chart.events.zoomed === 'function') {
+          this.zoomCallback({ min: w.config.xaxis.min, max: w.config.xaxis.max })
+        }
+
         w.globals.zoomed = false
@@ -307,0 +312,0 @@

src/modules/tooltip/Intersect.js

@@ -172,3 +172,7 @@ import Utils from '../../utils/Utils'
     if (!w.config.tooltip.shared) {
-      ttCtx.tooltipPosition.moveXCrosshairs(bx + bW / 2 - strokeWidth / 2)
+      if (w.globals.comboCharts) {
+        ttCtx.tooltipPosition.moveXCrosshairs(bx + bW / 2 - strokeWidth / 2)
+      } else {
+        ttCtx.tooltipPosition.moveXCrosshairs(bx)
+      }
     }
@@ -175,0 +179,0 @@

No alert changes

Improved metrics

Total package byte prevSize

2595439

increased by0.27%

Lines of code

47545

increased by0.17%

No dependency changes