]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Fix bar chart and doughnut chart animations 2067/head
authorEvert Timberg <evert.timberg@gmail.com>
Sat, 27 Feb 2016 17:32:20 +0000 (12:32 -0500)
committerEvert Timberg <evert.timberg@gmail.com>
Sat, 27 Feb 2016 17:32:20 +0000 (12:32 -0500)
src/controllers/controller.bar.js
src/controllers/controller.doughnut.js
src/core/core.controller.js
test/controller.doughnut.tests.js

index b61b4e82ed31a47b1457f62c3f9538fd9e8290b9..094292b53b0f5219f453ec3c0772288e54766064 100644 (file)
@@ -113,7 +113,7 @@ module.exports = function(Chart) {
                                        datasetLabel: this.getDataset().label,
 
                                        // Appearance
-                                       base: this.calculateBarBase(this.index, index),
+                                       base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
                                        width: this.calculateBarWidth(numBars),
                                        backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
                                        borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
index 249d18fb9f2d1cb3216e0e290d5aa6439992bdfd..92816a028a734b455a61a9bee40dad038dcdf1e4 100644 (file)
@@ -163,16 +163,11 @@ module.exports = function(Chart) {
                updateElement: function(arc, index, reset) {
                        var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
                        var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
-
-                       var resetModel = {
-                               x: centerX,
-                               y: centerY,
-                               startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
-                               endAngle: Math.PI * -0.5,
-                               circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
-                               outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
-                               innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius
-                       };
+                       var startAngle = Math.PI * -0.5; // non reset case handled later
+                       var endAngle = Math.PI * -0.5; // non reset case handled later
+                       var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]);
+                       var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius;
+                       var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius;
 
                        helpers.extend(arc, {
                                // Utility
@@ -181,12 +176,14 @@ module.exports = function(Chart) {
                                _index: index,
 
                                // Desired view properties
-                               _model: reset ? resetModel : {
+                               _model: {
                                        x: centerX,
                                        y: centerY,
-                                       circumference: this.calculateCircumference(this.getDataset().data[index]),
-                                       outerRadius: this.outerRadius,
-                                       innerRadius: this.innerRadius,
+                                       startAngle: startAngle,
+                                       endAngle: endAngle,
+                                       circumference: circumference,
+                                       outerRadius: outerRadius,
+                                       innerRadius: innerRadius,
 
                                        backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
                                        hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
@@ -197,6 +194,7 @@ module.exports = function(Chart) {
                                }
                        });
 
+                       // Set correct angles if not resetting
                        if (!reset) {
 
                                if (index === 0) {
@@ -206,12 +204,6 @@ module.exports = function(Chart) {
                                }
 
                                arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
-
-
-                               //Check to see if it's the last arc, if not get the next and update its start angle
-                               if (index < this.getDataset().data.length - 1) {
-                                       this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
-                               }
                        }
 
                        arc.pivot();
index fc5bbdedc5c900491de90cd08ce62a5b91a78a86..1c6a6f587e928852413504702b521d931231d80f 100644 (file)
@@ -58,7 +58,6 @@ module.exports = function(Chart) {
                        this.updateLayout();
                        this.resetElements();
                        this.initToolTip();
-                       this.draw();
                        this.update();
 
                        // TODO
index 865d7b8cd4e727f02b4a3d6122a702ee57987864..bed2da5aa79f9be09804e626a7381ac4a61ed1ed 100644 (file)
@@ -82,7 +82,7 @@ describe('Doughnut controller tests', function() {
                var controller = new Chart.controllers.doughnut(chart, 1);
                controller.reset(); // reset first
 
-               expect(chart.data.datasets[1].metaData[0]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: Math.PI * -0.5,
@@ -90,9 +90,9 @@ describe('Doughnut controller tests', function() {
                        circumference: 2.166614539857563,
                        outerRadius: 49,
                        innerRadius: 36.75
-               });
+               }));
 
-               expect(chart.data.datasets[1].metaData[1]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: Math.PI * -0.5,
@@ -100,9 +100,9 @@ describe('Doughnut controller tests', function() {
                        circumference: 3.2499218097863447,
                        outerRadius: 49,
                        innerRadius: 36.75
-               });
+               }));
 
-               expect(chart.data.datasets[1].metaData[2]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: Math.PI * -0.5,
@@ -110,9 +110,9 @@ describe('Doughnut controller tests', function() {
                        circumference: 0,
                        outerRadius: 49,
                        innerRadius: 36.75
-               });
+               }));
 
-               expect(chart.data.datasets[1].metaData[3]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: Math.PI * -0.5,
@@ -120,11 +120,11 @@ describe('Doughnut controller tests', function() {
                        circumference: 0.8666458159430251,
                        outerRadius: 49,
                        innerRadius: 36.75
-               });
+               }));
 
                controller.update();
 
-               expect(chart.data.datasets[1].metaData[0]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: Math.PI * -0.5,
@@ -139,9 +139,9 @@ describe('Doughnut controller tests', function() {
                        hoverBackgroundColor: 'rgb(255, 255, 255)',
 
                        label: 'label0',
-               });
+               }));
 
-               expect(chart.data.datasets[1].metaData[1]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: 0.5958182130626666,
@@ -156,9 +156,9 @@ describe('Doughnut controller tests', function() {
                        hoverBackgroundColor: 'rgb(255, 255, 255)',
 
                        label: 'label1'
-               });
+               }));
 
-               expect(chart.data.datasets[1].metaData[2]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: 3.8457400228490113,
@@ -173,9 +173,9 @@ describe('Doughnut controller tests', function() {
                        hoverBackgroundColor: 'rgb(255, 255, 255)',
 
                        label: 'label2'
-               });
+               }));
 
-               expect(chart.data.datasets[1].metaData[3]._model).toEqual({
+               expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
                        x: 50,
                        y: 100,
                        startAngle: 3.8457400228490113,
@@ -190,7 +190,7 @@ describe('Doughnut controller tests', function() {
                        hoverBackgroundColor: 'rgb(255, 255, 255)',
                        
                        label: 'label3'
-               });
+               }));
 
                // Change the amount of data and ensure that arcs are updated accordingly
                chart.data.datasets[1].data = [1, 2]; // remove 2 elements from dataset 0