apexcharts - npm Package Compare versions

Comparing version 3.41.1 to 3.42.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.41.1",
+  "version": "3.42.0",
   "description": "A JavaScript Chart Library",
@@ -36,2 +36,3 @@ "repository": {
   "dependencies": {
+    "@yr/monotone-cubic-spline": "^1.0.3",
     "svg.draggable.js": "^2.2.2",
@@ -38,0 +39,0 @@ "svg.easing.js": "^2.0.0",

src/charts/Line.js

@@ -9,3 +9,3 @@ import CoreUtils from '../modules/CoreUtils'
 import Helpers from './common/line/Helpers'
-
+import { svgPath, spline } from '../libs/monotone-cubic'
 /**
@@ -70,2 +70,3 @@ * ApexCharts Line Class responsible for drawing Line / Area / RangeArea Charts.
       let yArrj = [] // hold y values of current iterating series
+      let y2Arrj = [] // holds y2 values in range-area charts
       let xArrj = [] // hold x values of current iterating series
@@ -118,2 +119,3 @@
         pY2 = prevY2
+        y2Arrj.push(prevY2)
       }
@@ -147,2 +149,3 @@
         yArrj,
+        y2Arrj,
         seriesRangeEnd,
@@ -477,2 +480,3 @@ }
     yArrj,
+    y2Arrj,
     isRangeStart,
@@ -566,2 +570,3 @@ seriesRangeEnd,
       yArrj.push(y)
+      y2Arrj.push(y2)
 
@@ -587,2 +592,5 @@ let pointsPos = this.lineHelpers.calculatePoints({
         y2,
+        xArrj,
+        yArrj,
+        y2Arrj,
         pX,
@@ -605,3 +613,6 @@ pY,
 
-      if (this.appendPathFrom) {
+      if (
+        this.appendPathFrom &&
+        !(w.config.stroke.curve === 'monotoneCubic' && type === 'rangeArea')
+      ) {
         pathFromLine = pathFromLine + graphics.line(x, this.zeroY)
@@ -682,3 +693,6 @@ pathFromArea = pathFromArea + graphics.line(x, this.zeroY)
     y,
+    xArrj,
+    yArrj,
     y2,
+    y2Arrj,
     pX,
@@ -707,2 +721,11 @@ pY,
 
+    if (
+      ((type === 'rangeArea' &&
+        (w.globals.hasNullValues || w.config.forecastDataPoints.count > 0)) ||
+        w.globals.hasNullValues) &&
+      curve === 'monotoneCubic'
+    ) {
+      curve = 'straight'
+    }
+
     // logic of smooth curve derived from chartist
@@ -733,6 +756,4 @@ // CREDITS: https://gionkunz.github.io/chartist-js/
       } else {
-        linePath =
-          linePath + graphics.curve(pX + length, pY, x - length, y, x, y)
-        areaPath =
-          areaPath + graphics.curve(pX + length, pY, x - length, y, x, y)
+        linePath += graphics.curve(pX + length, pY, x - length, y, x, y)
+        areaPath += graphics.curve(pX + length, pY, x - length, y, x, y)
       }
@@ -745,4 +766,3 @@
         // last loop, close path
-        areaPath =
-          areaPath +
+        areaPath +=
           graphics.curve(pX, pY, x, y, x, areaBottomY) +
@@ -753,7 +773,4 @@ graphics.move(x, y) +
         if (type === 'rangeArea' && isRangeStart) {
-          linePath =
-            linePath +
-            graphics.curve(pX, pY, x, y, x, y2) +
-            graphics.move(x, y2) +
-            'z'
+          linePath +=
+            graphics.curve(pX, pY, x, y, x, y2) + graphics.move(x, y2) + 'z'
         } else {
@@ -766,2 +783,50 @@ if (!w.globals.hasNullValues) {
       }
+    } else if (curve === 'monotoneCubic') {
+      const shouldRenderMonotone =
+        type === 'rangeArea'
+          ? xArrj.length === w.globals.dataPoints
+          : j === series[i].length - 2
+
+      if (shouldRenderMonotone) {
+        const monotoneInputPoints = xArrj.map((_, i) => {
+          return [xArrj[i], yArrj[i]]
+        })
+
+        const points = spline.points(monotoneInputPoints)
+
+        linePath += svgPath(points)
+        areaPath += svgPath(points)
+
+        pX = x
+        pY = y
+
+        if (type === 'rangeArea' && isRangeStart) {
+          // draw the line to connect y with y2; then draw the other end of range
+          linePath += graphics.line(
+            xArrj[xArrj.length - 1],
+            y2Arrj[y2Arrj.length - 1]
+          )
+
+          const xArrjInversed = xArrj.slice().reverse()
+          const y2ArrjInversed = y2Arrj.slice().reverse()
+          const monotoneInputPointsY2 = xArrjInversed.map((_, i) => {
+            return [xArrjInversed[i], y2ArrjInversed[i]]
+          })
+
+          const pointsY2 = spline.points(monotoneInputPointsY2)
+
+          linePath += svgPath(pointsY2)
+
+          // in range area, we don't have separate line and area path
+          areaPath = linePath
+        } else {
+          areaPath +=
+            graphics.curve(pX, pY, x, y, x, areaBottomY) +
+            graphics.move(x, y) +
+            'z'
+        }
+
+        linePaths.push(linePath)
+        areaPaths.push(areaPath)
+      }
     } else {
@@ -768,0 +833,0 @@ if (series[i][j + 1] === null) {

src/modules/settings/Options.js

@@ -902,3 +902,3 @@ /**
         show: true,
-        curve: 'smooth', // "smooth" / "straight" / "stepline"
+        curve: 'smooth', // "smooth" / "straight" / "monotoneCubic" / "stepline"
         lineCap: 'butt', // round, butt , square
@@ -905,0 +905,0 @@ width: 2,

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

4386843

increased by0.47%

Number of package files

186

increased by0.54%

Lines of code

70804

increased by0.62%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@yr/monotone-cubic-spline@^1.0.3

• + Added@yr/monotone-cubic-spline@1.0.3(transitive)