apexcharts - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

package.json

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

src/apexcharts.js

@@ -17,5 +17,4 @@ import Annotations from './modules/Annotations'
 import Scroller from './modules/Scroller'
-import Title from './modules/Title'
+import TitleSubtitle from './modules/TitleSubtitle'
 import Toolbar from './modules/Toolbar'
-import SubTitle from './modules/SubTitle'
 import Options from './modules/settings/Options'
@@ -164,6 +163,5 @@
     formatters.setLabelFormatters()
-    const title = new Title(this.ctx)
-    title.drawTitle()
-    const subtitle = new SubTitle(this.ctx)
-    subtitle.drawSubtitle()
+    const titleSubtitle = new TitleSubtitle(this.ctx)
+    titleSubtitle.draw()
+
     // legend is calculated here before coreCalculations because it affects the plottable area
@@ -170,0 +168,0 @@ new Legend(this.ctx).init()

src/charts/Bar.js

@@ -184,41 +184,3 @@ import Fill from '../modules/Fill'
 
-        let lineFill = w.globals.stroke.colors[realIndex]
-
-        if (this.isNullValue) {
-          pathFill = 'none'
-        }
-
-        let delay =
-        (j /
-        w.config.chart.animations.animateGradually.delay *
-        (w.config.chart.animations.speed /
-        w.globals.dataPoints)) / 2.4
-
-        let renderedPath = graphics.renderPaths({
-          i,
-          realIndex,
-          pathFrom: pathFrom,
-          pathTo: pathTo,
-          stroke: lineFill,
-          strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
-          fill: pathFill,
-          animationDelay: delay,
-          initialSpeed: w.config.chart.animations.speed,
-          dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
-          className: 'apexcharts-bar-area',
-          id: 'apexcharts-bar-area'
-        })
-
-        this.setSelectedBarFilter(renderedPath, realIndex, j)
-
-        elSeries.add(renderedPath)
-
-        let dataLabels = this.calculateBarDataLabels({ x, y, i, j, series, realIndex, barHeight, barWidth, renderedPath, visibleSeries: this.visibleI })
-
-        if (dataLabels !== null) {
-          elDataLabelsWrap.add(dataLabels)
-        }
-
-        elSeries.add(elDataLabelsWrap)
+        elSeries = this.renderSeries({ realIndex, pathFill, j, i, pathFrom, pathTo, strokeWidth, elSeries, x, y, series, barHeight, barWidth, elDataLabelsWrap, visibleSeries: this.visibleI, type: 'bar' })
       }
@@ -236,2 +198,43 @@
 
+  renderSeries ({ realIndex, pathFill, j, i, pathFrom, pathTo, strokeWidth, elSeries, x, y, series, barHeight, barWidth, elDataLabelsWrap, visibleSeries, type }) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
+
+    let lineFill = w.globals.stroke.colors[realIndex]
+    if (this.isNullValue) {
+      pathFill = 'none'
+    }
+
+    let delay = (j /
+      w.config.chart.animations.animateGradually.delay *
+      (w.config.chart.animations.speed /
+        w.globals.dataPoints)) / 2.4
+
+    let renderedPath = graphics.renderPaths({
+      i,
+      realIndex,
+      pathFrom: pathFrom,
+      pathTo: pathTo,
+      stroke: lineFill,
+      strokeWidth,
+      strokeLineCap: w.config.stroke.lineCap,
+      fill: pathFill,
+      animationDelay: delay,
+      initialSpeed: w.config.chart.animations.speed,
+      dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
+      className: `apexcharts-${type}-area`,
+      id: `apexcharts-${type}-area`
+    })
+    this.setSelectedBarFilter(renderedPath, realIndex, j)
+    elSeries.add(renderedPath)
+
+    let dataLabels = this.calculateBarDataLabels({ x, y, i, j, series, realIndex, barHeight, barWidth, renderedPath, visibleSeries })
+    if (dataLabels !== null) {
+      elDataLabelsWrap.add(dataLabels)
+    }
+
+    elSeries.add(elDataLabelsWrap)
+    return elSeries
+  }
+
   initVariables (series, shouldGetVisibleItems) {
@@ -238,0 +241,0 @@ const w = this.w

src/charts/BarStacked.js

@@ -181,37 +181,3 @@ import Bar from './Bar'
 
-        let lineFill = w.globals.stroke.colors[realIndex]
-
-        let delay =
-        (j /
-          w.config.chart.animations.animateGradually.delay *
-          (w.config.chart.animations.speed /
-          w.globals.dataPoints)) / 2.4
-
-        let renderedPath = this.graphics.renderPaths({
-          i,
-          realIndex,
-          pathFrom: pathFrom,
-          pathTo: pathTo,
-          stroke: lineFill,
-          strokeWidth: strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
-          fill: pathFill,
-          animationDelay: delay,
-          initialSpeed: w.config.chart.animations.speed,
-          dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
-          className: 'apexcharts-bar-area',
-          id: 'apexcharts-bar-area'
-        })
-
-        elSeries.add(renderedPath)
-
-        this.setSelectedBarFilter(renderedPath, realIndex, j)
-
-        let dataLabels = this.bar.calculateBarDataLabels({ x, y, i, j, realIndex, series, barHeight, barWidth, visibleSeries: 0, renderedPath })
-
-        if (dataLabels !== null) {
-          elDataLabelsWrap.add(dataLabels)
-        }
-
-        elSeries.add(elDataLabelsWrap)
+        elSeries = this.renderSeries({ realIndex, pathFill, j, i, pathFrom, pathTo, strokeWidth, elSeries, x, y, series, barHeight, barWidth, elDataLabelsWrap, type: 'bar', visibleSeries: 0 })
       }
@@ -218,0 +184,0 @@

src/charts/CandleStick.js

@@ -123,41 +123,3 @@ import Bar from './Bar'
 
-        let lineFill = w.globals.stroke.colors[realIndex]
-
-        if (this.isNullValue) {
-          pathFill = 'none'
-        }
-
-        let delay =
-        (j /
-        w.config.chart.animations.animateGradually.delay *
-        (w.config.chart.animations.speed /
-        w.globals.dataPoints)) / 2.4
-
-        let renderedPath = graphics.renderPaths({
-          i,
-          realIndex,
-          pathFrom: pathFrom,
-          pathTo: pathTo,
-          stroke: lineFill,
-          strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
-          fill: pathFill,
-          animationDelay: delay,
-          initialSpeed: w.config.chart.animations.speed,
-          dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
-          className: 'apexcharts-candlestick-area',
-          id: 'apexcharts-candlestick-area'
-        })
-
-        this.setSelectedBarFilter(renderedPath, realIndex, j)
-
-        elSeries.add(renderedPath)
-
-        let dataLabels = this.calculateBarDataLabels({ x, y, i, j, series, realIndex, barHeight, barWidth, renderedPath, visibleSeries: this.visibleI })
-
-        if (dataLabels !== null) {
-          elDataLabelsWrap.add(dataLabels)
-        }
-
-        elSeries.add(elDataLabelsWrap)
+        elSeries = this.renderSeries({ realIndex, pathFill, j, i, pathFrom, pathTo, strokeWidth, elSeries, x, y, series, barHeight, barWidth, elDataLabelsWrap, visibleSeries: this.visibleI, type: 'candlestick' })
       }
@@ -164,0 +126,0 @@

src/charts/Line.js

@@ -9,3 +9,3 @@ import Graphics from '../modules/Graphics'
  * ApexCharts Line Class responsible for drawing Line / Area Charts.
- * This class is also responsible for generating values for Bubble/Scatter charts
+ * This class is also responsible for generating values for Bubble/Scatter charts, so need to rename it to Axis Charts to avoid confusions
  * @module Line
@@ -12,0 +12,0 @@ **/

src/modules/Annotations.js

@@ -40,3 +40,3 @@ import Graphics from './Graphics'
 
-  addXAxisAnnotation (anno, parent, index) {
+  addXaxisAnnotation (anno, parent, index) {
     let w = this.w
@@ -89,3 +89,3 @@ let graphics = new Graphics(this.ctx)
     w.config.annotations.xaxis.map((anno, index) => {
-      this.addXAxisAnnotation(anno, elg.node, index)
+      this.addXaxisAnnotation(anno, elg.node, index)
     })
@@ -96,3 +96,3 @@
 
-  addYAxisAnnotation (anno, parent, index) {
+  addYaxisAnnotation (anno, parent, index) {
     let w = this.w
@@ -145,3 +145,3 @@ let graphics = new Graphics(this.ctx)
     w.config.annotations.yaxis.map((anno, index) => {
-      this.addYAxisAnnotation(anno, elg.node, index)
+      this.addYaxisAnnotation(anno, elg.node, index)
     })
@@ -303,27 +303,21 @@
 
-    w.config.annotations.xaxis.map((anno, i) => {
-      let xAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='${i}']`)
+    const add = (anno, i, type) => {
+      let annoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-${type}-annotations .apexcharts-${type}-annotation-label[rel='${i}']`)
 
-      const parent = xAnnoLabel.parentNode
-      const elRect = this.addBackgroundToAnno(xAnnoLabel, anno)
+      const parent = annoLabel.parentNode
+      const elRect = this.addBackgroundToAnno(annoLabel, anno)
 
-      parent.insertBefore(elRect.node, xAnnoLabel)
+      parent.insertBefore(elRect.node, annoLabel)
+    }
+
+    w.config.annotations.xaxis.map((anno, i) => {
+      add(anno, i, 'xaxis')
     })
 
     w.config.annotations.yaxis.map((anno, i) => {
-      let yAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-yaxis-annotations .apexcharts-yaxis-annotation-label[rel='${i}']`)
-
-      const parent = yAnnoLabel.parentNode
-      const elRect = this.addBackgroundToAnno(yAnnoLabel, anno)
-
-      parent.insertBefore(elRect.node, yAnnoLabel)
+      add(anno, i, 'yaxis')
     })
 
     w.config.annotations.points.map((anno, i) => {
-      let pointAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-point-annotations .apexcharts-point-annotation-label[rel='${i}']`)
-
-      const parent = pointAnnoLabel.parentNode
-      const elRect = this.addBackgroundToAnno(pointAnnoLabel, anno)
-
-      parent.insertBefore(elRect.node, pointAnnoLabel)
+      add(anno, i, 'point')
     })
@@ -370,80 +364,44 @@ }
   addPointAnnotationExternal (params, pushToMemory, context) {
-    const me = context
-    const w = me.w
+    this.addAnnotationExternal({params, pushToMemory, context, type: 'point', contextMethod: context.addPointAnnotation})
+    return context
+  }
 
-    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-point-annotations')
-    const index = parent.childNodes.length + 1
-
-    const options = new Options()
-    const pointAnno = Object.assign({}, options.pointAnnotation)
-    const anno = Utils.extend(pointAnno, params)
-
-    this.addPointAnnotation(anno, parent, index)
-
-    // add background
-    let pointLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-point-annotations .apexcharts-point-annotation-label[rel='${index}']`)
-    const elRect = this.addBackgroundToAnno(pointLabel, anno)
-    parent.insertBefore(elRect.node, pointLabel)
-
-    if (pushToMemory) {
-      w.globals.memory.methodsToExec.push({
-        context: me,
-        method: me.addPointAnnotation,
-        params: params
-      })
-    }
-
+  addYaxisAnnotationExternal (params, pushToMemory, context) {
+    this.addAnnotationExternal({params, pushToMemory, context, type: 'yaxis', contextMethod: context.addYaxisAnnotation})
     return context
   }
 
-  addYAxisAnnotationExternal (params, pushToMemory, context) {
-    const me = context
-    const w = me.w
-
-    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-yaxis-annotations')
-    const index = parent.childNodes.length + 1
-
-    const options = new Options()
-    const yAxisAnno = Object.assign({}, options.yAxisAnnotation)
-    const anno = Utils.extend(yAxisAnno, params)
-
-    this.addYAxisAnnotation(anno, parent, index)
-
-    // add background
-    let yAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-yaxis-annotations .apexcharts-yaxis-annotation-label[rel='${index}']`)
-    const elRect = this.addBackgroundToAnno(yAnnoLabel, anno)
-    parent.insertBefore(elRect.node, yAnnoLabel)
-
-    if (pushToMemory) {
-      w.globals.memory.methodsToExec.push({
-        context: me,
-        method: me.addYaxisAnnotation,
-        params: params
-      })
-    }
-
+  // The addXaxisAnnotation method requires a parent class, and user calling this method externally on the chart instance may not specify parent, hence a different method
+  addXaxisAnnotationExternal (params, pushToMemory, context) {
+    this.addAnnotationExternal({ params, pushToMemory, context, type: 'xaxis', contextMethod: context.addXaxisAnnotation })
     return context
   }
 
-  // The addXAxisAnnotation method requires a parent class, and user calling this method externally on the chart instance may not specify parent, hence a different method
-  addXAxisAnnotationExternal (params, pushToMemory, context) {
+  addAnnotationExternal ({ params, pushToMemory, context, type, contextMethod }) {
     const me = context
     const w = me.w
-
-    const parent = w.globals.dom.baseEl.querySelector('.apexcharts-xaxis-annotations')
+    const parent = w.globals.dom.baseEl.querySelector(`.apexcharts-${type}-annotations`)
     const index = parent.childNodes.length + 1
 
-    const options = new Options()
-    const xAxisAnno = Object.assign({}, options.xAxisAnnotation)
-    const anno = Utils.extend(xAxisAnno, params)
+    const opt = new Options()
+    const axesAnno = Object.assign({}, (type === 'xaxis') ? (opt.xAxisAnnotation) : ((type === 'yaxis') ? (opt.yAxisAnnotation) : (opt.pointAnnotation)))
 
-    this.addXAxisAnnotation(anno, parent, index)
+    const anno = Utils.extend(axesAnno, params)
 
-    // set if orientation changed for xaxis
-    this.setOrientations([anno], index)
+    switch (type) {
+      case 'xaxis':
+        this.addXaxisAnnotation(anno, parent, index)
+        break
+      case 'yaxis':
+        this.addYaxisAnnotation(anno, parent, index)
+        break
+      case 'point':
+        this.addPointAnnotation(anno, parent, index)
+        break
+    }
 
     // add background
-    let xAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='${index}']`)
-    const elRect = this.addBackgroundToAnno(xAnnoLabel, anno)
-    parent.insertBefore(elRect.node, xAnnoLabel)
+    let axesAnnoLabel = w.globals.dom.baseEl.querySelector(`.apexcharts-${type}-annotations .apexcharts-${type}-annotation-label[rel='${index}']`)
+    const elRect = this.addBackgroundToAnno(axesAnnoLabel, anno)
+    parent.insertBefore(elRect.node, axesAnnoLabel)
 
@@ -453,3 +411,3 @@ if (pushToMemory) {
         context: me,
-        method: me.addXaxisAnnotation,
+        method: contextMethod,
         params: params
@@ -456,0 +414,0 @@ })

src/modules/axes/XAxis.js

@@ -411,15 +411,17 @@ import Graphics from '../Graphics'
 
-    if (xAxisTexts.length > 0) {
-      let firstLabelPos = xAxisTexts[0].getBBox()
-      let lastLabelPos = xAxisTexts[xAxisTexts.length - 1].getBBox()
-      if (firstLabelPos.x < -25) {
-        xAxisTexts[0].parentNode.removeChild(xAxisTexts[0])
-      }
-      if (lastLabelPos.x + lastLabelPos.width > w.globals.gridWidth + 15) {
-        xAxisTexts[xAxisTexts.length - 1].parentNode.removeChild(xAxisTexts[xAxisTexts.length - 1])
-      }
-    }
+    // the below code removes any labels which doesn't fits in the grid area.
+    // but many users didn't liked it - so commented out, will remove it
+    // if (xAxisTexts.length > 0) {
+    // let firstLabelPos = xAxisTexts[0].getBBox()
+    // let lastLabelPos = xAxisTexts[xAxisTexts.length - 1].getBBox()
+    // if (xAxisTexts[0].getAttribute('x') < -10) {
+    //   xAxisTexts[0].parentNode.removeChild(xAxisTexts[0])
+    // }
+    // if (lastLabelPos.x + lastLabelPos.width > w.globals.gridWidth + 15) {
+    //   xAxisTexts[xAxisTexts.length - 1].parentNode.removeChild(xAxisTexts[xAxisTexts.length - 1])
+    // }
+    // }
 
     if (yAxisTextsInversed.length > 0) {
-      // truncate y axis in bar chart
+      // truncate rotated y axis in bar chart (x axis)
       let firstLabelPosX = yAxisTextsInversed[yAxisTextsInversed.length - 1].getBBox()
@@ -436,3 +438,3 @@ let lastLabelPosX = yAxisTextsInversed[0].getBBox()
 
-      // truncate y axis in bar chart
+      // truncate rotated x axis in bar chart (y axis)
       for (let xat = 0; xat < xAxisTextsInversed.length; xat++) {
@@ -439,0 +441,0 @@ graphics.placeTextWithEllipsis(

src/modules/Core.js

@@ -84,3 +84,2 @@ import Bar from '../charts/Bar'
     })
-    gl.dom.elWrap.style.background = cnf.chart.background
     this.el.appendChild(gl.dom.elWrap)
@@ -95,2 +94,4 @@
 
+    gl.dom.Paper.node.style.background = cnf.chart.background
+
     this.setSVGDimensions()
@@ -97,0 +98,0 @@

src/modules/Exports.js

@@ -35,3 +35,3 @@
     downloadLink.href = svgUrl
-    downloadLink.download = 'apexcharts-' + w.globals.cuid + '.svg'
+    downloadLink.download = this.w.globals.chartID + '.svg'
     document.body.appendChild(downloadLink)
@@ -38,0 +38,0 @@ downloadLink.click()

src/modules/settings/Options.js

@@ -225,2 +225,3 @@ /**
         height: 'auto',
+        id: undefined,
         offsetX: 0,
@@ -227,0 +228,0 @@ offsetY: 0,

src/modules/Toolbar.js

@@ -223,2 +223,4 @@ import Graphics from './Graphics'
     )
+
+    this.zoomCallback(newMinX, newMaxX)
   }
@@ -247,4 +249,20 @@
     )
+
+    this.zoomCallback(newMinX, newMaxX)
   }
 
+  zoomCallback (xLowestValue, xHighestValue) {
+    const w = this.w
+
+    if (typeof w.config.chart.events.zoomed === 'function') {
+      w.config.chart.events.zoomed(this.ctx,
+        {
+          xaxis: {
+            min: xLowestValue,
+            max: xHighestValue
+          }
+        })
+    }
+  }
+
   downloadSVG () {
@@ -251,0 +269,0 @@ // const w = this.w

src/modules/tooltip/Intersect.js

@@ -21,2 +21,3 @@ import Utils from '../../utils/Utils'
     const ttCtx = this.ttCtx
+    const w = this.w
 
@@ -38,7 +39,11 @@ if (e.target.classList.contains('apexcharts-heatmap-rect')) {
 
-      x = cx + (ttCtx.tooltipRect.ttWidth / 2) - width
+      x = cx + (ttCtx.tooltipRect.ttWidth / 2) + width / 2
       y = cy + (ttCtx.tooltipRect.ttHeight / 2) - height / 2
 
+      if (x > w.globals.gridWidth / 2) {
+        x = cx - ttCtx.tooltipRect.ttWidth / 2 + width
+      }
       if (ttCtx.w.config.tooltip.followCursor) {
         const seriesBound = ttCtx.elGrid.getBoundingClientRect()
+        // x = ttCtx.e.clientX - seriesBound.left
         y = ttCtx.e.clientY - seriesBound.top
@@ -45,0 +50,0 @@ }

No alert changes

Worsened metrics

Total package byte prevSize

2304683

decreased by-0.21%

Number of package files

109

decreased by-0.91%

Lines of code

40161

decreased by-0.4%

No dependency changes