Merge pull request #4777 from apexcharts/svgjs_3.2_upgrade

Upgrade to Svgjs 3.2

package.json

@@ -35,13 +35,12 @@
     "build:samples": "node samples/source/index.js generate"
   },
   "dependencies": {
-    "@yr/monotone-cubic-spline": "^1.0.3",
-    "svg.draggable.js": "^2.2.2",
-    "svg.easing.js": "^2.0.0",
-    "svg.filter.js": "^2.0.2",
-    "svg.pathmorphing.js": "^0.1.3",
-    "svg.resize.js": "^1.4.3",
-    "svg.select.js": "^3.0.1"
+    "@svgdotjs/svg.draggable.js": "^3.0.4",
+    "@svgdotjs/svg.filter.js": "^3.0.8",
+    "@svgdotjs/svg.js": "^3.2.4",
+    "@svgdotjs/svg.resize.js": "^2.0.2",
+    "@svgdotjs/svg.select.js": "^4.0.1",
+    "@yr/monotone-cubic-spline": "^1.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",

samples/react/sparklines/sparklines.html

@@ -20,6 +20,7 @@
     .col-md-4 {
       width: 33.33%;
       padding: 0 25px;
+      box-sizing: border-box;
     }
 
     table {

samples/source/sparklines/sparklines.xml

@@ -11,6 +11,7 @@
 .col-md-4 {
   width: 33.33%;
   padding: 0 25px;
+  box-sizing: border-box;
 }
 
 table {

samples/vanilla-js/sparklines/sparklines.html

@@ -20,6 +20,7 @@
     .col-md-4 {
       width: 33.33%;
       padding: 0 25px;
+      box-sizing: border-box;
     }
 
     table {

samples/vue/sparklines/sparklines.html

@@ -20,6 +20,7 @@
     .col-md-4 {
       width: 33.33%;
       padding: 0 25px;
+      box-sizing: border-box;
     }
 
     table {

src/assets/apexcharts.css

@@ -398,30 +398,27 @@ rect.legend-mouseover-inactive,
   cursor: move
 }
 
-.svg_select_boundingRect,
-.svg_select_points_rot {
+.svg_select_shape {
+  stroke-width: 1;
+  stroke-dasharray: 10 10;
+  stroke: black;
+  stroke-opacity: 0.1;
   pointer-events: none;
-  opacity: 0;
-  visibility: hidden
+  fill: none;
 }
 
-.apexcharts-selection-rect+g .svg_select_boundingRect,
-.apexcharts-selection-rect+g .svg_select_points_rot {
-  opacity: 0;
-  visibility: hidden
+.svg_select_handle {
+  stroke-width: 3;
+  stroke: black;
+  fill: none;
 }
 
-.apexcharts-selection-rect+g .svg_select_points_l,
-.apexcharts-selection-rect+g .svg_select_points_r {
-  cursor: ew-resize;
-  opacity: 1;
-  visibility: visible
+.svg_select_handle_r {
+  cursor: e-resize;
 }
 
-.svg_select_points {
-  fill: #efefef;
-  stroke: #333;
-  rx: 2
+.svg_select_handle_l {
+  cursor: w-resize;
 }
 
 .apexcharts-svg.apexcharts-zoomable.hovering-zoom {
@@ -680,4 +677,4 @@ rect.legend-mouseover-inactive,
 
 .apexcharts-rangebar-goals-markers {
   pointer-events: none
-}
+}

src/charts/Line.js

@@ -442,7 +442,6 @@ class Line {
           strokeLineCap: null,
           fill: pathFill,
         })
-
         this.elSeries.add(renderedPath)
       }
     }

src/charts/Pie.js

@@ -526,8 +526,8 @@ class Pie {
     }
 
     if (opts.dur !== 0) {
-      el.animate(opts.dur, w.globals.easing, opts.animBeginArr[opts.i])
-        .afterAll(function () {
+      el.animate(opts.dur, opts.animBeginArr[opts.i])
+        .after(function () {
           if (
             me.chartType === 'pie' ||
             me.chartType === 'donut' ||
@@ -594,9 +594,9 @@ class Pie {
 
     let size =
       me.sliceSizes[i] + (w.config.plotOptions.pie.expandOnClick ? 4 : 0)
-    let elPath = w.globals.dom.Paper.select(
+    let elPath = w.globals.dom.Paper.findOne(
       `.apexcharts-${me.chartType.toLowerCase()}-slice-${i}`
-    ).members[0]
+    )
 
     if (elPath.attr('data:pieClicked') === 'true') {
       elPath.attr({
@@ -995,9 +995,9 @@ class Pie {
   revertDataLabelsInner() {
     const w = this.w
     if (this.donutDataLabels.show) {
-      let dataLabelsGroup = w.globals.dom.Paper.select(
+      let dataLabelsGroup = w.globals.dom.Paper.findOne(
         `.apexcharts-datalabels-group`
-      ).members[0]
+      )
 
       let dataLabels = this.renderInnerDataLabels(
         dataLabelsGroup,
@@ -1010,9 +1010,9 @@ class Pie {
         }
       )
 
-      let elPie = w.globals.dom.Paper.select(
+      let elPie = w.globals.dom.Paper.findOne(
         '.apexcharts-radialbar, .apexcharts-pie'
-      ).members[0]
+      )
       elPie.add(dataLabels)
     }
   }

src/charts/Radial.js

@@ -188,7 +188,6 @@ class Radial extends Pie {
         animBeginArr: 0,
         dur: 0,
         isTrack: true,
-        easing: w.globals.easing,
       })
     }
 
@@ -243,9 +242,9 @@ class Radial extends Pie {
     let dataLabels = null
 
     if (this.radialDataLabels.show) {
-      let dataLabelsGroup = w.globals.dom.Paper.select(
+      let dataLabelsGroup = w.globals.dom.Paper.findOne(
         `.apexcharts-datalabels-group`
-      ).members[0]
+      )
 
       dataLabels = this.renderInnerDataLabels(
         dataLabelsGroup,
@@ -441,7 +440,6 @@ class Radial extends Pie {
         animBeginArr: this.animBeginArr,
         dur,
         shouldSetPrevPaths: true,
-        easing: w.globals.easing,
       })
     }
 
@@ -487,9 +485,7 @@ class Radial extends Pie {
       const imgWidth = w.config.plotOptions.radialBar.hollow.imageWidth
       const imgHeight = w.config.plotOptions.radialBar.hollow.imageHeight
       if (imgWidth === undefined && imgHeight === undefined) {
-        let image = w.globals.dom.Paper.image(hollowFillImg).loaded(function (
-          loader
-        ) {
+        let image = w.globals.dom.Paper.image(hollowFillImg, function (loader) {
           this.move(
             opts.centerX -
               loader.width / 2 +
@@ -501,9 +497,7 @@ class Radial extends Pie {
         })
         g.add(image)
       } else {
-        let image = w.globals.dom.Paper.image(hollowFillImg).loaded(function (
-          loader
-        ) {
+        let image = w.globals.dom.Paper.image(hollowFillImg, function (loader) {
           this.move(
             opts.centerX -
               imgWidth / 2 +

src/charts/common/bar/Helpers.js

@@ -246,9 +246,7 @@ export default class Helpers {
     const w = this.w
 
     const alwaysApplyRadius =
-      !this.w.config.chart.stacked ||
-      w.config.plotOptions.bar.borderRadiusWhenStacked !== 'last' ||
-      w.config.plotOptions.bar.borderRadius <= 0
+      !this.w.config.chart.stacked || w.config.plotOptions.bar.borderRadius <= 0
 
     const numSeries = series.length
     const numColumns = series[0]?.length | 0