Pie: Fix last slice animation and NaN handling (#8760)

* Pie: Fix last slice animation and NaN handling

* Add tests

* Fix polarArea

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index 713b035d434a622d7a53590d530df9587d38f538..47e28b57bac11ebd211dd463b8317e656599cd81 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -203,7 +203,7 @@ export default class DoughnutController extends DatasetController {
 
     for (i = 0; i < metaData.length; i++) {
       const value = meta._parsed[i];
-      if (value !== null && this.chart.getDataVisibility(i)) {
+      if (value !== null && !isNaN(value) && this.chart.getDataVisibility(i)) {
         total += Math.abs(value);
       }
     }

diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js
index d2123c425a67c9541564e8ea0878cf7bf49ae058..37d6625259ecf98be392f49861c66802feac6749 100644 (file)
--- a/src/elements/element.arc.js
+++ b/src/elements/element.arc.js
@@ -40,6 +40,8 @@ function drawArc(ctx, element) {
     for (let i = 0; i < element.fullCircles; ++i) {
       ctx.fill();
     }
+  }
+  if (!isNaN(element.curcumference)) {
     element.endAngle = element.startAngle + element.circumference % TAU;
   }
 

diff --git a/test/fixtures/controller.doughnut/doughnut-NaN.js b/test/fixtures/controller.doughnut/doughnut-NaN.js
new file mode 100644 (file)
index 0000000..47e8d09
--- /dev/null
+++ b/test/fixtures/controller.doughnut/doughnut-NaN.js
@@ -0,0 +1,25 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: ['A', 'B', 'C', 'D', 'E'],
+      datasets: [{
+        data: [1, 5, NaN, 50, 100],
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.8)',
+          'rgba(54, 162, 235, 0.8)',
+          'rgba(255, 206, 86, 0.8)',
+          'rgba(75, 192, 192, 0.8)',
+          'rgba(153, 102, 255, 0.8)'
+        ],
+        borderColor: [
+          'rgb(255, 99, 132)',
+          'rgb(54, 162, 235)',
+          'rgb(255, 206, 86)',
+          'rgb(75, 192, 192)',
+          'rgb(153, 102, 255)'
+        ]
+      }]
+    },
+  }
+};

diff --git a/test/fixtures/controller.doughnut/doughnut-NaN.png b/test/fixtures/controller.doughnut/doughnut-NaN.png
new file mode 100644 (file)
index 0000000..5f0d8a3
Binary files /dev/null and b/test/fixtures/controller.doughnut/doughnut-NaN.png differ

diff --git a/test/fixtures/controller.doughnut/doughnut-animation-hide-last.js b/test/fixtures/controller.doughnut/doughnut-animation-hide-last.js
new file mode 100644 (file)
index 0000000..56af197
--- /dev/null
+++ b/test/fixtures/controller.doughnut/doughnut-animation-hide-last.js
@@ -0,0 +1,65 @@
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+const ctx = canvas.getContext('2d');
+
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: ['A', 'B', 'C', 'D', 'E'],
+      datasets: [{
+        data: [1],
+        backgroundColor: 'rgba(255, 99, 132, 0.8)',
+        borderWidth: 4,
+        borderColor: 'rgb(255, 99, 132)',
+      }]
+    },
+    options: {
+      animation: {
+        duration: 0,
+        easing: 'linear',
+      },
+      responsive: false,
+      plugins: {
+        legend: false,
+        title: false,
+        tooltip: false,
+        filler: false
+      }
+    },
+  },
+  options: {
+    canvas: {
+      height: 512,
+      width: 512
+    },
+    run: function(chart) {
+      chart.options.animation.duration = 8000;
+      chart.toggleDataVisibility(0);
+      chart.update();
+      const animator = Chart.animator;
+      // disable animator
+      const backup = animator._refresh;
+      animator._refresh = function() { };
+
+      return new Promise((resolve) => {
+        window.requestAnimationFrame(() => {
+          const anims = animator._getAnims(chart);
+          const start = anims.items[0]._start;
+          for (let i = 0; i < 16; i++) {
+            animator._update(start + i * 500);
+            let x = i % 4 * 128;
+            let y = Math.floor(i / 4) * 128;
+            ctx.drawImage(chart.canvas, x, y, 128, 128);
+          }
+          Chart.helpers.clearCanvas(chart.canvas);
+          chart.ctx.drawImage(canvas, 0, 0);
+
+          animator._refresh = backup;
+          resolve();
+        });
+      });
+    }
+  }
+};

diff --git a/test/fixtures/controller.doughnut/doughnut-animation-hide-last.png b/test/fixtures/controller.doughnut/doughnut-animation-hide-last.png
new file mode 100644 (file)
index 0000000..eff14b8
Binary files /dev/null and b/test/fixtures/controller.doughnut/doughnut-animation-hide-last.png differ