apexcharts - npm Package Compare versions

Comparing version 4.4.0 to 4.5.0

package.json

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

src/apexcharts.js

@@ -754,2 +754,6 @@ import Annotations from './modules/annotations/Annotations'
 
+  getSvgString(scale) {
+    return new Exports(this.ctx).getSvgString(scale)
+  }
+
   exportToCSV(options = {}) {
@@ -756,0 +760,0 @@ const exp = new Exports(this.ctx)

src/charts/Bar.js

@@ -473,14 +473,5 @@ import BarDataLabels from './common/bar/DataLabels'
       if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
-        let nonZeroColumns = 0
-        let zeroEncounters = 0
-        w.globals.seriesPercent.forEach((_s, _si) => {
-          if (_s[j]) {
-            nonZeroColumns++
-          }
+        const { nonZeroColumns, zeroEncounters } =
+          this.barHelpers.getZeroValueEncounters({ i, j })
 
-          if (_si < i && _s[j] === 0) {
-            zeroEncounters++
-          }
-        })
-
         if (nonZeroColumns > 0) {
@@ -487,0 +478,0 @@ barHeight = (this.seriesLen * barHeight) / nonZeroColumns

src/charts/BarStacked.js

@@ -332,3 +332,5 @@ import CoreUtils from '../modules/CoreUtils'
     let gsi = i // an index to keep track of the series inside a group
-    gsi = seriesGroup.indexOf(w.config.series[realIndex].name)
+    if (w.config.series[realIndex].name) {
+      gsi = seriesGroup.indexOf(w.config.series[realIndex].name)
+    }
 
@@ -335,0 +337,0 @@ if (gsi > 0) {

src/charts/common/bar/DataLabels.js

@@ -243,2 +243,3 @@ import Graphics from '../../../modules/Graphics'
       if (
+        !w.config.chart.stacked &&
         zeroEncounters > 0 &&
@@ -406,2 +407,6 @@ w.config.plotOptions.bar.hideZeroBarsWhenGrouped
     let dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints
+    const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
+      i,
+      j,
+    })
 
@@ -418,2 +423,9 @@ barWidth = Math.abs(barWidth)
 
+    if (
+      !w.config.chart.stacked &&
+      zeroEncounters > 0 &&
+      w.config.plotOptions.bar.hideZeroBarsWhenGrouped
+    ) {
+      dataLabelsY -= barHeight * zeroEncounters
+    }
     let totalDataLabelsX
@@ -420,0 +432,0 @@ let totalDataLabelsY

src/modules/Core.js

@@ -110,5 +110,3 @@ import Bar from '../charts/Bar'
 
-    gl.dom.elLegendWrap.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
-    gl.dom.elLegendForeign.appendChild(gl.dom.elLegendWrap)
-
+    gl.dom.elWrap.appendChild(gl.dom.elLegendWrap)
     gl.dom.Paper.node.appendChild(gl.dom.elLegendForeign)
@@ -134,3 +132,3 @@
       bubble: { series: [], i: [] },
-      column: { series: [], i: [] },
+      bar: { series: [], i: [] },
       candlestick: { series: [], i: [] },
@@ -147,3 +145,7 @@ boxPlot: { series: [], i: [] },
     gl.series.forEach((serie, st) => {
-      const seriesType = ser[st].type || chartType
+      const seriesType =
+        ser[st].type === 'column'
+          ? 'bar'
+          : ser[st].type || (chartType === 'column' ? 'bar' : chartType)
+
       if (seriesTypes[seriesType]) {
@@ -158,4 +160,3 @@ if (seriesType === 'rangeArea') {
 
-        if (seriesType === 'column' || seriesType === 'bar')
-          w.globals.columnSeries = seriesTypes.column
+        if (seriesType === 'bar') w.globals.columnSeries = seriesTypes.bar
       } else if (
@@ -173,5 +174,2 @@ [
         nonComboType = seriesType
-      } else if (seriesType === 'bar') {
-        seriesTypes['column'].series.push(serie)
-        seriesTypes['column'].i.push(st)
       } else {
@@ -191,8 +189,5 @@ console.warn(
       }
-      if (
-        seriesTypes.column.series.length > 0 &&
-        cnf.plotOptions.bar.horizontal
-      ) {
-        comboCount -= seriesTypes.column.series.length
-        seriesTypes.column = { series: [], i: [] }
+      if (seriesTypes.bar.series.length > 0 && cnf.plotOptions.bar.horizontal) {
+        comboCount -= seriesTypes.bar.series.length
+        seriesTypes.bar = { series: [], i: [] }
         w.globals.columnSeries = { series: [], i: [] }
@@ -226,13 +221,11 @@ console.warn(
       }
-      if (seriesTypes.column.series.length > 0) {
+      if (seriesTypes.bar.series.length > 0) {
         if (cnf.chart.stacked) {
           const barStacked = new BarStacked(ctx, xyRatios)
           elGraph.push(
-            barStacked.draw(seriesTypes.column.series, seriesTypes.column.i)
+            barStacked.draw(seriesTypes.bar.series, seriesTypes.bar.i)
           )
         } else {
           ctx.bar = new Bar(ctx, xyRatios)
-          elGraph.push(
-            ctx.bar.draw(seriesTypes.column.series, seriesTypes.column.i)
-          )
+          elGraph.push(ctx.bar.draw(seriesTypes.bar.series, seriesTypes.bar.i))
         }
@@ -239,0 +232,0 @@ }

src/modules/Exports.js

@@ -12,2 +12,8 @@ import Data from '../modules/Data'
 
+  svgStringToNode(svgString) {
+    const parser = new DOMParser()
+    const svgDoc = parser.parseFromString(svgString, 'image/svg+xml')
+    return svgDoc.documentElement
+  }
+
   scaleSvgNode(svg, scale) {
@@ -34,9 +40,34 @@ // get current both width and height of the svg
       }
-      let svgString = this.w.globals.dom.Paper.svg()
 
-      // clone the svg node so it remains intact in the UI
-      const svgNode = this.w.globals.dom.Paper.node.cloneNode(true)
+      const width = w.globals.svgWidth * scale
+      const height = w.globals.svgHeight * scale
 
-      // in case the scale is different than 1, the svg needs to be rescaled
+      const clonedNode = w.globals.dom.elWrap.cloneNode(true)
+      clonedNode.style.width = width + 'px'
+      clonedNode.style.height = height + 'px'
+      const serializedNode = new XMLSerializer().serializeToString(clonedNode)
 
+      let svgString = `
+        <svg xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          class="apexcharts-svg"
+          xmlns:data="ApexChartsNS"
+          transform="translate(0, 0)"
+          width="${w.globals.svgWidth}px" height="${w.globals.svgHeight}px">
+          <foreignObject width="100%" height="100%">
+            <div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px; height:${height}px;">
+            <style type="text/css">
+              .apexcharts-tooltip, .apexcharts-toolbar, .apexcharts-xaxistooltip, .apexcharts-yaxistooltip, .apexcharts-xcrosshairs, .apexcharts-ycrosshairs, .apexcharts-zoom-rect, .apexcharts-selection-rect {
+                display: none;
+              }
+            </style>
+              ${serializedNode}
+            </div>
+          </foreignObject>
+        </svg>
+      `
+
+      const svgNode = this.svgStringToNode(svgString)
+
       if (scale !== 1) {
@@ -46,3 +77,3 @@ // scale the image
       }
-      // Convert image URLs to base64
+
       this.convertImagesToBase64(svgNode).then(() => {
@@ -90,33 +121,4 @@ svgString = new XMLSerializer().serializeToString(svgNode)
 
-  cleanup() {
-    const w = this.w
-
-    // hide some elements to avoid printing them on exported svg
-    const xcrosshairs = w.globals.dom.baseEl.getElementsByClassName(
-      'apexcharts-xcrosshairs'
-    )
-    const ycrosshairs = w.globals.dom.baseEl.getElementsByClassName(
-      'apexcharts-ycrosshairs'
-    )
-    const zoomSelectionRects = w.globals.dom.baseEl.querySelectorAll(
-      '.apexcharts-zoom-rect, .apexcharts-selection-rect'
-    )
-    Array.prototype.forEach.call(zoomSelectionRects, (z) => {
-      z.setAttribute('width', 0)
-    })
-    if (xcrosshairs && xcrosshairs[0]) {
-      xcrosshairs[0].setAttribute('x', -500)
-      xcrosshairs[0].setAttribute('x1', -500)
-      xcrosshairs[0].setAttribute('x2', -500)
-    }
-    if (ycrosshairs && ycrosshairs[0]) {
-      ycrosshairs[0].setAttribute('y', -100)
-      ycrosshairs[0].setAttribute('y1', -100)
-      ycrosshairs[0].setAttribute('y2', -100)
-    }
-  }
-
   svgUrl() {
     return new Promise((resolve) => {
-      this.cleanup()
       this.getSvgString().then((svgData) => {
@@ -139,3 +141,2 @@ const svgBlob = new Blob([svgData], {
 
-      this.cleanup()
       const canvas = document.createElement('canvas')
@@ -142,0 +143,0 @@ canvas.width = w.globals.svgWidth * scale

src/modules/legend/Legend.js

@@ -1,3 +0,1 @@
-import { SVG } from '@svgdotjs/svg.js'
-
 import CoreUtils from '../CoreUtils'
@@ -4,0 +2,0 @@ import Dimensions from '../dimensions/Dimensions'

src/modules/Range.js

@@ -429,3 +429,3 @@ import Utils from '../utils/Utils'
         if (gl.isXNumeric) {
-          const diff = gl.maxX - gl.minX
+          const diff = Math.round(gl.maxX - gl.minX)
           if (diff < 30) {
@@ -432,0 +432,0 @@ ticks = diff - 1

src/modules/Scales.js

@@ -439,3 +439,3 @@ import CoreUtils from './CoreUtils'
 
-    step = Math.round((step + Number.EPSILON) * 10) / 10
+    step = Math.round((step + Number.EPSILON) * 100) / 100
 
@@ -586,3 +586,3 @@ if (ticks === Number.MAX_VALUE) {
     const gl = w.globals
-    let diff = Math.abs(maxX - minX)
+    let diff = Math.round(Math.abs(maxX - minX))
     if (maxX === -Number.MAX_VALUE || !Utils.isNumber(maxX)) {
@@ -594,5 +594,2 @@ // no data in the chart. Either all series collapsed or user passed a blank array
 
-      if (diff < 10 && diff > 1) {
-        ticks = diff
-      }
       gl.xAxisScale = this.linearScale(
@@ -599,0 +596,0 @@ minX,

src/modules/tooltip/Labels.js

@@ -271,3 +271,3 @@ import Formatters from '../Formatters'
     if (w.config.tooltip.fillSeriesColor) {
-      ttItems[t].style.color = pColor
+      ttItems[t].style.backgroundColor = pColor
       ttItemsChildren[0].style.display = 'none'
@@ -313,3 +313,7 @@ }
 
-      ttItemsChildren[0].style.color = pColor
+      if (w.config.tooltip.fillSeriesColor) {
+        ttItemsChildren[0].style.backgroundColor = pColor
+      } else {
+        ttItemsChildren[0].style.color = pColor
+      }
     }
@@ -316,0 +320,0 @@

src/modules/tooltip/Tooltip.js

@@ -150,4 +150,9 @@ import Labels from './Labels'
       point.classList.add('apexcharts-tooltip-marker')
-      point.style.color = w.globals.colors[i]
 
+      if (w.config.tooltip.fillSeriesColor) {
+        point.style.backgroundColor = w.globals.colors[i]
+      } else {
+        point.style.color = w.globals.colors[i]
+      }
+
       let mShape = w.config.markers.shape
@@ -154,0 +159,0 @@ let shape = mShape

No alert changes

Improved metrics

Total package byte prevSize

4938315

increased by0.1%

Lines of code

76745

increased by0.02%

No dependency changes