From: Jukka Kurkela Date: Wed, 31 Mar 2021 19:25:25 +0000 (+0300) Subject: Pie: Fix last slice animation and NaN handling (#8760) X-Git-Tag: v3.0.0-rc.7~9 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=f1810586f7288208c04c485cd14dbb6471988de2;p=thirdparty%2FChart.js.git 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 713b035d4..47e28b57b 100644 --- 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 d2123c425..37d662525 100644 --- 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 index 000000000..47e8d09df --- /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 index 000000000..5f0d8a3d5 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 index 000000000..56af1974b --- /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 index 000000000..eff14b8f1 Binary files /dev/null and b/test/fixtures/controller.doughnut/doughnut-animation-hide-last.png differ