Initial polar area tests

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 25b19de56bf0983d23b438faf377cacd6666cb4a..59d3919f5cbedbdad0e3a0a2a0f6e9659d5f99fe 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -156,7 +156,6 @@
                                endAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : endAngle,
 
                                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),
                                borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
                                borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
 
@@ -180,7 +179,6 @@
                                        endAngle: endAngle,
 
                                        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),
                                        borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
                                        borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
 
@@ -204,7 +202,7 @@
 
                        arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
                        arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString());
-                       arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, arc._model.borderWidth);
+                       arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
                },
 
                removeHoverStyle: function(arc) {

diff --git a/test/controller.polarArea.tests.js b/test/controller.polarArea.tests.js
new file mode 100644 (file)
index 0000000..1a92a62
--- /dev/null
+++ b/test/controller.polarArea.tests.js
@@ -0,0 +1,508 @@
+// Test the polar area controller
+describe('Polar area controller tests', function() {
+       it('Should be constructed', function() {
+               var chart = {
+                       data: {
+                               datasets: [{
+                                       data: []
+                               }]
+                       }
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+               expect(controller).not.toBe(undefined);
+               expect(controller.index).toBe(0);
+               expect(chart.data.datasets[0].metaData).toEqual([]);
+
+               controller.updateIndex(1);
+               expect(controller.index).toBe(1);
+       });
+
+       it('Should create arc elements for each data item during initialization', function() {
+               var chart = {
+                       data: {
+                               datasets: [{
+                                       data: [10, 15, 0, -4]
+                               }]
+                       },
+                       config: {
+                               type: 'polarArea'
+                       },
+                       options: {
+                       }
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+
+               expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 arcs created
+               expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true);
+       });
+
+       it('should draw all elements', function() {
+               var chart = {
+                       data: {
+                               datasets: [{
+                                       data: [10, 15, 0, -4]
+                               }]
+                       },
+                       config: {
+                               type: 'polarArea'
+                       },
+                       options: {
+                       }
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+
+               spyOn(chart.data.datasets[0].metaData[0], 'draw');
+               spyOn(chart.data.datasets[0].metaData[1], 'draw');
+               spyOn(chart.data.datasets[0].metaData[2], 'draw');
+               spyOn(chart.data.datasets[0].metaData[3], 'draw');
+
+               controller.draw();
+
+               expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
+               expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1);
+               expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
+               expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
+       });
+
+       it('should update elements', function() {
+               var data = {
+                       datasets: [{
+                               data: [10, 15, 0, -4],
+                               label: 'dataset2',
+                       }],
+                       labels: ['label1', 'label2', 'label3', 'label4']
+               };
+               var mockContext = window.createMockContext();
+
+               var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+               var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+               scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+               var scale = new ScaleConstructor({
+                       ctx: mockContext,
+                       options: scaleConfig,
+                       chart: {
+                               data: data
+                       },
+               });
+
+               // Update ticks & set physical dimensions
+               scale.update(300, 300);
+               scale.top = 0;
+               scale.left = 0;
+               scale.right = 300;
+               scale.bottom = 300;
+
+               var chart = {
+                       chartArea: {
+                               bottom: 300,
+                               left: 0,
+                               right: 300,
+                               top: 0
+                       },
+                       data: data,
+                       config: {
+                               type: 'line'
+                       },
+                       options: {
+                               showLines: true,
+                               elements: {
+                                       arc: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderColor: 'rgb(0, 255, 0)',
+                                               borderWidth: 1.2,
+                                       },
+                               },
+                       },
+                       scale: scale
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+               controller.update();
+
+               expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 59.5,
+                       startAngle: -0.5 * Math.PI,
+                       endAngle: 0,
+                       backgroundColor: 'rgb(255, 0, 0)',
+                       borderColor: 'rgb(0, 255, 0)',
+                       borderWidth: 1.2,
+                       label: 'label1'
+               });
+
+               expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 80.75,
+                       startAngle: 0,
+                       endAngle: 0.5 * Math.PI,
+                       backgroundColor: 'rgb(255, 0, 0)',
+                       borderColor: 'rgb(0, 255, 0)',
+                       borderWidth: 1.2,
+                       label: 'label2'
+               });
+
+               expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 17,
+                       startAngle: 0.5 * Math.PI,
+                       endAngle: Math.PI,
+                       backgroundColor: 'rgb(255, 0, 0)',
+                       borderColor: 'rgb(0, 255, 0)',
+                       borderWidth: 1.2,
+                       label: 'label3'
+               });
+
+               expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 0,
+                       startAngle: Math.PI,
+                       endAngle: 1.5 * Math.PI,
+                       backgroundColor: 'rgb(255, 0, 0)',
+                       borderColor: 'rgb(0, 255, 0)',
+                       borderWidth: 1.2,
+                       label: 'label4'
+               });
+
+               // arc styles
+               chart.data.datasets[0].backgroundColor = 'rgb(128, 129, 130)';
+               chart.data.datasets[0].borderColor = 'rgb(56, 57, 58)';
+               chart.data.datasets[0].borderWidth = 1.123;
+
+               controller.update();
+
+               expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 59.5,
+                       startAngle: -0.5 * Math.PI,
+                       endAngle: 0,
+                       backgroundColor: 'rgb(128, 129, 130)',
+                       borderWidth: 1.123,
+                       borderColor: 'rgb(56, 57, 58)',
+                       label: 'label1'
+               });
+
+               expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 80.75,
+                       startAngle: 0,
+                       endAngle: 0.5 * Math.PI,
+                       backgroundColor: 'rgb(128, 129, 130)',
+                       borderWidth: 1.123,
+                       borderColor: 'rgb(56, 57, 58)',
+                       label: 'label2'
+               });
+
+               expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 17,
+                       startAngle: 0.5 * Math.PI,
+                       endAngle: Math.PI,
+                       backgroundColor: 'rgb(128, 129, 130)',
+                       borderWidth: 1.123,
+                       borderColor: 'rgb(56, 57, 58)',
+                       label: 'label3'
+               });
+
+               expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 0,
+                       startAngle: Math.PI,
+                       endAngle: 1.5 * Math.PI,
+                       backgroundColor: 'rgb(128, 129, 130)',
+                       borderWidth: 1.123,
+                       borderColor: 'rgb(56, 57, 58)',
+                       label: 'label4'
+               });
+
+               // arc styles
+               chart.data.datasets[0].metaData[0].custom = {
+                       backgroundColor: 'rgb(0, 1, 3)',
+                       borderColor: 'rgb(4, 6, 8)',
+                       borderWidth: 0.787,
+
+               };
+
+               controller.update();
+
+               expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+                       x: 150,
+                       y: 150,
+                       innerRadius: 0,
+                       outerRadius: 59.5,
+                       startAngle: -0.5 * Math.PI,
+                       endAngle: 0,
+                       backgroundColor: 'rgb(0, 1, 3)',
+                       borderWidth: 0.787,
+                       borderColor: 'rgb(4, 6, 8)',
+                       label: 'label1'
+               });
+       });
+
+       it('should handle number of data point changes in update', function() {
+               var data = {
+                       datasets: [{
+                               data: [10, 15, 0, -4],
+                               label: 'dataset2',
+                       }],
+                       labels: ['label1', 'label2', 'label3', 'label4']
+               };
+               var mockContext = window.createMockContext();
+
+               var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+               var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+               scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+               var scale = new ScaleConstructor({
+                       ctx: mockContext,
+                       options: scaleConfig,
+                       chart: {
+                               data: data
+                       },
+               });
+
+               // Update ticks & set physical dimensions
+               scale.update(300, 300);
+               scale.top = 0;
+               scale.left = 0;
+               scale.right = 300;
+               scale.bottom = 300;
+
+               var chart = {
+                       chartArea: {
+                               bottom: 300,
+                               left: 0,
+                               right: 300,
+                               top: 0
+                       },
+                       data: data,
+                       config: {
+                               type: 'line'
+                       },
+                       options: {
+                               showLines: true,
+                               elements: {
+                                       arc: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderColor: 'rgb(0, 255, 0)',
+                                               borderWidth: 1.2,
+                                       },
+                               },
+                       },
+                       scale: scale
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+               controller.update();
+               expect(chart.data.datasets[0].metaData.length).toBe(4);
+
+               chart.data.datasets[0].data = [1, 2]; // remove 2 items
+               controller.buildOrUpdateElements();
+               controller.update();
+               expect(chart.data.datasets[0].metaData.length).toBe(2);
+               expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+
+               chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
+               controller.buildOrUpdateElements();
+               controller.update();
+               expect(chart.data.datasets[0].metaData.length).toBe(5);
+               expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true);
+               expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Arc).toBe(true);
+       });
+
+       it('should set arc hover styles', function() {
+               var data = {
+                       datasets: [{
+                               data: [10, 15, 0, -4],
+                               label: 'dataset2',
+                       }],
+                       labels: ['label1', 'label2', 'label3', 'label4']
+               };
+               var mockContext = window.createMockContext();
+
+               var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+               var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+               scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+               var scale = new ScaleConstructor({
+                       ctx: mockContext,
+                       options: scaleConfig,
+                       chart: {
+                               data: data
+                       },
+               });
+
+               // Update ticks & set physical dimensions
+               scale.update(300, 300);
+               scale.top = 0;
+               scale.left = 0;
+               scale.right = 300;
+               scale.bottom = 300;
+
+               var chart = {
+                       chartArea: {
+                               bottom: 300,
+                               left: 0,
+                               right: 300,
+                               top: 0
+                       },
+                       data: data,
+                       config: {
+                               type: 'line'
+                       },
+                       options: {
+                               showLines: true,
+                               elements: {
+                                       arc: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderColor: 'rgb(0, 255, 0)',
+                                               borderWidth: 1.2,
+                                       },
+                               },
+                       },
+                       scale: scale
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+               controller.update();
+               var arc = chart.data.datasets[0].metaData[0];
+
+               controller.setHoverStyle(arc);
+               expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
+               expect(arc._model.borderColor).toBe('rgb(0, 230, 0)');
+               expect(arc._model.borderWidth).toBe(1.2);
+
+               // Can set hover style per dataset
+               chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
+               chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
+               chart.data.datasets[0].hoverBorderWidth = 2.1;
+
+               controller.setHoverStyle(arc);
+               expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
+               expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
+               expect(arc._model.borderWidth).toBe(2.1);
+
+               // Custom style
+               arc.custom = {
+                       hoverBorderWidth: 5.5,
+                       hoverBackgroundColor: 'rgb(0, 0, 0)',
+                       hoverBorderColor: 'rgb(10, 10, 10)'
+               };
+
+               controller.setHoverStyle(arc);
+               expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
+               expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
+               expect(arc._model.borderWidth).toBe(5.5);
+       });
+
+       it('should remove hover styles', function() {
+               var data = {
+                       datasets: [{
+                               data: [10, 15, 0, -4],
+                               label: 'dataset2',
+                       }],
+                       labels: ['label1', 'label2', 'label3', 'label4']
+               };
+               var mockContext = window.createMockContext();
+
+               var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+               var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+               scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+               var scale = new ScaleConstructor({
+                       ctx: mockContext,
+                       options: scaleConfig,
+                       chart: {
+                               data: data
+                       },
+               });
+
+               // Update ticks & set physical dimensions
+               scale.update(300, 300);
+               scale.top = 0;
+               scale.left = 0;
+               scale.right = 300;
+               scale.bottom = 300;
+
+               var chart = {
+                       chartArea: {
+                               bottom: 300,
+                               left: 0,
+                               right: 300,
+                               top: 0
+                       },
+                       data: data,
+                       config: {
+                               type: 'line'
+                       },
+                       options: {
+                               showLines: true,
+                               elements: {
+                                       arc: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderColor: 'rgb(0, 255, 0)',
+                                               borderWidth: 1.2,
+                                       },
+                               },
+                       },
+                       scale: scale
+               };
+
+               var controller = new Chart.controllers.polarArea(chart, 0);
+               controller.update();
+               var arc = chart.data.datasets[0].metaData[0];
+
+               chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)';
+               chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)';
+               chart.options.elements.arc.borderWidth = 10.1;
+
+               controller.removeHoverStyle(arc);
+               expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)');
+               expect(arc._model.borderColor).toBe('rgb(50, 51, 52)');
+               expect(arc._model.borderWidth).toBe(10.1);
+
+               // Can set hover style per dataset
+               chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
+               chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
+               chart.data.datasets[0].borderWidth = 2.1;
+
+               controller.removeHoverStyle(arc);
+               expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
+               expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
+               expect(arc._model.borderWidth).toBe(2.1);
+
+               // Custom style
+               arc.custom = {
+                       borderWidth: 5.5,
+                       backgroundColor: 'rgb(0, 0, 0)',
+                       borderColor: 'rgb(10, 10, 10)'
+               };
+
+               controller.removeHoverStyle(arc);
+               expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
+               expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
+               expect(arc._model.borderWidth).toBe(5.5);
+       });
+});
\ No newline at end of file