Also replace the 2 spaces indentation in controller.bar.tests.js by tabs to match the overall code style.
// Test the bar controller
describe('Bar controller tests', function() {
- it('Should be constructed', function() {
- var chart = {
- data: {
- datasets: [{
-
- }, {
- xAxisID: 'myXAxis',
- yAxisID: 'myYAxis',
- data: []
- }]
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
- expect(controller).not.toBe(undefined);
- expect(controller.index).toBe(1);
- expect(chart.data.datasets[1].metaData).toEqual([]);
-
- controller.updateIndex(0);
- expect(controller.index).toBe(0);
- });
-
- it('Should use the first scale IDs if the dataset does not specify them', function() {
- var chart = {
- data: {
- datasets: [{
-
- }, {
- data: []
- }]
- },
- options: {
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
- expect(chart.data.datasets[1].xAxisID).toBe('firstXScaleID');
- expect(chart.data.datasets[1].yAxisID).toBe('firstYScaleID');
- });
-
- it('should correctly count the number of bar datasets', function() {
- var chart = {
- data: {
- datasets: [{}, {
- bar: true
- }, {
- bar: true
- }]
- },
- config: {
- type: 'bar'
- },
- options: {
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
- expect(controller.getBarCount()).toBe(2);
- });
-
- it('should correctly get the bar index accounting for hidden datasets', function() {
- var chart = {
- data: {
- datasets: [{
- bar: true,
- }, {
- bar: true,
- hidden: true
- }, {}, {
- bar: true,
- }]
- },
- config: {
- type: 'bar'
- },
- options: {
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
- expect(controller.getBarIndex(0)).toBe(0);
- expect(controller.getBarIndex(3)).toBe(1);
- });
-
- it('Should create rectangle elements for each data item during initialization', function() {
- var chart = {
- data: {
- datasets: [{}, {
- data: [10, 15, 0, -4]
- }]
- },
- config: {
- type: 'bar'
- },
- options: {
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
-
- expect(chart.data.datasets[1].metaData.length).toBe(4); // 4 rectangles created
- expect(chart.data.datasets[1].metaData[0] instanceof Chart.elements.Rectangle).toBe(true);
- expect(chart.data.datasets[1].metaData[1] instanceof Chart.elements.Rectangle).toBe(true);
- expect(chart.data.datasets[1].metaData[2] instanceof Chart.elements.Rectangle).toBe(true);
- expect(chart.data.datasets[1].metaData[3] instanceof Chart.elements.Rectangle).toBe(true);
- });
-
- it('should update elements', function() {
- var data = {
- datasets: [{
- data: [1, 2],
- label: 'dataset1',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID',
- bar: true
- }, {
- data: [10, 15, 0, -4],
- label: 'dataset2'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
- var chart = {
- data: data,
- config: {
- type: 'bar'
- },
- options: {
- elements: {
- rectangle: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderSkipped: 'top',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- }
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
-
- chart.data.datasets[1].data = [1, 2]; // remove 2 items
- controller.buildOrUpdateElements();
- controller.update();
-
- expect(chart.data.datasets[1].metaData.length).toBe(2);
-
- var bar1 = chart.data.datasets[1].metaData[0];
- var bar2 = chart.data.datasets[1].metaData[1];
-
- expect(bar1._datasetIndex).toBe(1);
- expect(bar1._index).toBe(0);
- expect(bar1._xScale).toBe(chart.scales.firstXScaleID);
- expect(bar1._yScale).toBe(chart.scales.firstYScaleID);
- expect(bar1._model).toEqual({
- x: 117.9,
- y: 194,
- label: 'label1',
- datasetLabel: 'dataset2',
- base: 194,
- width: 13.32,
- backgroundColor: 'rgb(255, 0, 0)',
- borderSkipped: 'top',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2
- });
-
- expect(bar2._datasetIndex).toBe(1);
- expect(bar2._index).toBe(1);
- expect(bar2._xScale).toBe(chart.scales.firstXScaleID);
- expect(bar2._yScale).toBe(chart.scales.firstYScaleID);
- expect(bar2._model).toEqual({
- x: 154.89999999999998,
- y: 6,
- label: 'label2',
- datasetLabel: 'dataset2',
- base: 194,
- width: 13.32,
- backgroundColor: 'rgb(255, 0, 0)',
- borderSkipped: 'top',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2
- });
-
- chart.data.datasets[1].data = [1, 2, 3];
- controller.buildOrUpdateElements();
- controller.update();
-
- expect(chart.data.datasets[1].metaData.length).toBe(3); // should add a new meta data item
- });
-
- it('should get the correct bar points when datasets of different types exist', function() {
- var data = {
- datasets: [{
- data: [1, 2],
- label: 'dataset1',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID',
- bar: true,
- }, {
- data: [10, 15],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID',
- }, {
- data: [30, 25],
- label: 'dataset3',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID',
- bar: true
- }],
- labels: ['label1', 'label2']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
- var chart = {
- data: data,
- config: {
- type: 'bar'
- },
- options: {
- elements: {
- rectangle: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- }
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 2);
- controller.buildOrUpdateElements();
- controller.update();
-
- var bar1 = chart.data.datasets[2].metaData[0];
- var bar2 = chart.data.datasets[2].metaData[1];
-
- expect(bar1._model.x).toBe(119.9);
- expect(bar1._model.y).toBe(6);
- expect(bar2._model.x).toBe(186.9);
- expect(bar2._model.y).toBe(37);
- });
-
- it('should update elements when the scales are stacked', function() {
- var data = {
- datasets: [{
- data: [10, -10, 10, -10],
- label: 'dataset1',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID',
- bar: true
- }, {
- data: [10, 15, 0, -4],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID',
- bar: true
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
- verticalScaleConfig.stacked = true;
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
- horizontalScaleConfig.stacked = true;
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
- var chart = {
- data: data,
- config: {
- type: 'bar'
- },
- options: {
- elements: {
- rectangle: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- }
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller0 = new Chart.controllers.bar(chart, 0);
- var controller1 = new Chart.controllers.bar(chart, 1);
-
- controller0.buildOrUpdateElements();
- controller0.update();
- controller1.buildOrUpdateElements();
- controller1.update();
-
- expect(chart.data.datasets[0].metaData[0]._model).toEqual(jasmine.objectContaining({
- x: 110.5,
- y: 60,
- base: 113,
- width: 29.6
- }));
- expect(chart.data.datasets[0].metaData[1]._model).toEqual(jasmine.objectContaining({
- x: 147.5,
- y: 167,
- base: 113,
- width: 29.6
- }));
- expect(chart.data.datasets[0].metaData[2]._model).toEqual(jasmine.objectContaining({
- x: 185.5,
- y: 60,
- base: 113,
- width: 29.6
- }));
- expect(chart.data.datasets[0].metaData[3]._model).toEqual(jasmine.objectContaining({
- x: 223.5,
- y: 167,
- base: 113,
- width: 29.6
- }));
-
- expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
- x: 110.5,
- y: 6,
- base: 60,
- width: 29.6
- }));
- expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
- x: 147.5,
- y: 33,
- base: 113,
- width: 29.6
- }));
- expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
- x: 185.5,
- y: 60,
- base: 60,
- width: 29.6
- }));
- expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
- x: 223.5,
- y: 189,
- base: 167,
- width: 29.6
- }));
- });
-
- it('should draw all bars', function() {
- var data = {
- datasets: [{}, {
- data: [10, 15, 0, -4],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
-
- var chart = {
- data: data,
- config: {
- type: 'bar'
- },
- options: {
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
-
- spyOn(chart.data.datasets[1].metaData[0], 'draw');
- spyOn(chart.data.datasets[1].metaData[1], 'draw');
- spyOn(chart.data.datasets[1].metaData[2], 'draw');
- spyOn(chart.data.datasets[1].metaData[3], 'draw');
-
- controller.draw();
-
- expect(chart.data.datasets[1].metaData[0].draw.calls.count()).toBe(1);
- expect(chart.data.datasets[1].metaData[1].draw.calls.count()).toBe(1);
- expect(chart.data.datasets[1].metaData[2].draw.calls.count()).toBe(1);
- expect(chart.data.datasets[1].metaData[3].draw.calls.count()).toBe(1);
- });
-
- it('should set hover styles on rectangles', function() {
- var data = {
- datasets: [{}, {
- data: [10, 15, 0, -4],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
-
- var chart = {
- data: data,
- config: {
- type: 'bar'
- },
- options: {
- elements: {
- rectangle: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- }
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
- controller.update();
- var bar = chart.data.datasets[1].metaData[0];
- controller.setHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(230, 0, 0)');
- expect(bar._model.borderColor).toBe('rgb(0, 0, 230)');
- expect(bar._model.borderWidth).toBe(2);
-
- // Set a dataset style
- chart.data.datasets[1].hoverBackgroundColor = 'rgb(128, 128, 128)';
- chart.data.datasets[1].hoverBorderColor = 'rgb(0, 0, 0)';
- chart.data.datasets[1].hoverBorderWidth = 5;
-
- controller.setHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
- expect(bar._model.borderColor).toBe('rgb(0, 0, 0)');
- expect(bar._model.borderWidth).toBe(5);
-
- // Should work with array styles so that we can set per bar
- chart.data.datasets[1].hoverBackgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)'];
- chart.data.datasets[1].hoverBorderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)'];
- chart.data.datasets[1].hoverBorderWidth = [2.5, 5];
-
- controller.setHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
- expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
- expect(bar._model.borderWidth).toBe(2.5);
-
- // Should allow a custom style
- bar.custom = {
- hoverBackgroundColor: 'rgb(255, 0, 0)',
- hoverBorderColor: 'rgb(0, 255, 0)',
- hoverBorderWidth: 1.5
- };
-
- controller.setHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
- expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
- expect(bar._model.borderWidth).toBe(1.5);
- });
-
- it('should remove a hover style from a bar', function() {
- var data = {
- datasets: [{}, {
- data: [10, 15, 0, -4],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
-
- var chart = {
- data: data,
- config: {
- type: 'bar'
- },
- options: {
- elements: {
- rectangle: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- }
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller = new Chart.controllers.bar(chart, 1);
- controller.update();
- var bar = chart.data.datasets[1].metaData[0];
-
- // Change default
- chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)';
- chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)';
- chart.options.elements.rectangle.borderWidth = 3.14;
-
- // Remove to defaults
- controller.removeHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
- expect(bar._model.borderColor).toBe('rgb(15, 15, 15)');
- expect(bar._model.borderWidth).toBe(3.14);
-
- // Should work with array styles so that we can set per bar
- chart.data.datasets[1].backgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)'];
- chart.data.datasets[1].borderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)'];
- chart.data.datasets[1].borderWidth = [2.5, 5];
-
- controller.removeHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
- expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
- expect(bar._model.borderWidth).toBe(2.5);
-
- // Should allow a custom style
- bar.custom = {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.5
- };
-
- controller.removeHoverStyle(bar);
-
- expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
- expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
- expect(bar._model.borderWidth).toBe(1.5);
- });
+
+ beforeEach(function() {
+ window.addDefaultMatchers(jasmine);
+ });
+
+ afterEach(function() {
+ window.releaseAllCharts();
+ });
+
+ it('should be constructed', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [
+ { data: [] },
+ { data: [] }
+ ],
+ labels: []
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.type).toEqual('bar');
+ expect(meta.data).toEqual([]);
+ expect(meta.hidden).toBe(null);
+ expect(meta.controller).not.toBe(undefined);
+ expect(meta.controller.index).toBe(1);
+ expect(meta.xAxisID).not.toBe(null);
+ expect(meta.yAxisID).not.toBe(null);
+
+ meta.controller.updateIndex(0);
+ expect(meta.controller.index).toBe(0);
+ });
+
+ it('should use the first scale IDs if the dataset does not specify them', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [
+ { data: [] },
+ { data: [] }
+ ],
+ labels: []
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ id: 'firstXScaleID'
+ }],
+ yAxes: [{
+ id: 'firstYScaleID'
+ }]
+ }
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.xAxisID).toBe('firstXScaleID');
+ expect(meta.yAxisID).toBe('firstYScaleID');
+ });
+
+ it('should correctly count the number of bar datasets', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [
+ { data: [], type: 'line' },
+ { data: [], hidden: true },
+ { data: [] },
+ { data: [] }
+ ],
+ labels: []
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.controller.getBarCount()).toBe(2);
+ });
+
+ it('should correctly get the bar index accounting for hidden datasets', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [
+ { data: [] },
+ { data: [], hidden: true },
+ { data: [], type: 'line' },
+ { data: [] }
+ ],
+ labels: []
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.controller.getBarIndex(0)).toBe(0);
+ expect(meta.controller.getBarIndex(3)).toBe(1);
+ });
+
+ it('should create rectangle elements for each data item during initialization', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [
+ { data: [] },
+ { data: [10, 15, 0, -4] }
+ ],
+ labels: []
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.data.length).toBe(4); // 4 rectangles created
+ expect(meta.data[0] instanceof Chart.elements.Rectangle).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Rectangle).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Rectangle).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Rectangle).toBe(true);
+ });
+
+ it('should update elements when modifying data', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [1, 2],
+ label: 'dataset1'
+ }, {
+ data: [10, 15, 0, -4],
+ label: 'dataset2',
+ borderColor: 'blue'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
+ },
+ options: {
+ elements: {
+ rectangle: {
+ backgroundColor: 'red',
+ borderSkipped: 'top',
+ borderColor: 'green',
+ borderWidth: 2,
+ }
+ },
+ scales: {
+ xAxes: [{
+ id: 'firstXScaleID',
+ type: 'category'
+ }],
+ yAxes: [{
+ id: 'firstYScaleID',
+ type: 'linear'
+ }]
+ }
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.data.length).toBe(4);
+
+ chart.data.datasets[1].data = [1, 2]; // remove 2 items
+ chart.data.datasets[1].borderWidth = 1;
+ chart.update();
+
+ expect(meta.data.length).toBe(2);
+
+ [ { x: 122, y: 484 },
+ { x: 234, y: 32 }
+ ].forEach(function(expected, i) {
+ expect(meta.data[i]._datasetIndex).toBe(1);
+ expect(meta.data[i]._index).toBe(i);
+ expect(meta.data[i]._xScale).toBe(chart.scales.firstXScaleID);
+ expect(meta.data[i]._yScale).toBe(chart.scales.firstYScaleID);
+ expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
+ expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
+ expect(meta.data[i]._model.base).toBeCloseToPixel(484);
+ expect(meta.data[i]._model.width).toBeCloseToPixel(40);
+ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+ datasetLabel: chart.config.data.datasets[1].label,
+ label: chart.config.data.labels[i],
+ backgroundColor: 'red',
+ borderSkipped: 'top',
+ borderColor: 'blue',
+ borderWidth: 1
+ }));
+ });
+
+ chart.data.datasets[1].data = [1, 2, 3]; // add 1 items
+ chart.update();
+
+ expect(meta.data.length).toBe(3); // should add a new meta data item
+ });
+
+ it('should get the correct bar points when datasets of different types exist', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [1, 2],
+ label: 'dataset1'
+ }, {
+ type: 'line',
+ data: [4, 6],
+ label: 'dataset2'
+ }, {
+ data: [8, 10],
+ label: 'dataset3'
+ }],
+ labels: ['label1', 'label2']
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ type: 'category'
+ }],
+ yAxes: [{
+ type: 'linear'
+ }]
+ }
+ }
+ });
+
+ var meta = chart.getDatasetMeta(2);
+ expect(meta.data.length).toBe(2);
+
+ var bar1 = meta.data[0];
+ var bar2 = meta.data[1];
+
+ expect(bar1._model.x).toBeCloseToPixel(194);
+ expect(bar1._model.y).toBeCloseToPixel(132);
+ expect(bar2._model.x).toBeCloseToPixel(424);
+ expect(bar2._model.y).toBeCloseToPixel(32);
+ });
+
+ it('should update elements when the scales are stacked', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [10, -10, 10, -10],
+ label: 'dataset1'
+ }, {
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ type: 'category',
+ stacked: true
+ }],
+ yAxes: [{
+ type: 'linear',
+ stacked: true
+ }]
+ }
+ }
+ });
+
+ var meta0 = chart.getDatasetMeta(0);
+
+ [ { b: 290, w: 91, x: 95, y: 161 },
+ { b: 290, w: 91, x: 209, y: 419 },
+ { b: 290, w: 91, x: 322, y: 161 },
+ { b: 290, w: 91, x: 436, y: 419 }
+ ].forEach(function(values, i) {
+ expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b);
+ expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w);
+ expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
+ expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
+ });
+
+ var meta1 = chart.getDatasetMeta(1);
+
+ [ { b: 161, w: 91, x: 95, y: 32 },
+ { b: 290, w: 91, x: 209, y: 97 },
+ { b: 161, w: 91, x: 322, y: 161 },
+ { b: 419, w: 91, x: 436, y: 471 }
+ ].forEach(function(values, i) {
+ expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b);
+ expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w);
+ expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
+ expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
+ });
+ });
+
+ it('should draw all bars', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [],
+ }, {
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+
+ spyOn(meta.data[0], 'draw');
+ spyOn(meta.data[1], 'draw');
+ spyOn(meta.data[2], 'draw');
+ spyOn(meta.data[3], 'draw');
+
+ chart.update();
+
+ expect(meta.data[0].draw.calls.count()).toBe(1);
+ expect(meta.data[1].draw.calls.count()).toBe(1);
+ expect(meta.data[2].draw.calls.count()).toBe(1);
+ expect(meta.data[3].draw.calls.count()).toBe(1);
+ });
+
+ it('should set hover styles on rectangles', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [],
+ }, {
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
+ },
+ options: {
+ elements: {
+ rectangle: {
+ backgroundColor: 'rgb(255, 0, 0)',
+ borderColor: 'rgb(0, 0, 255)',
+ borderWidth: 2,
+ }
+ }
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ var bar = meta.data[0];
+
+ meta.controller.setHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(230, 0, 0)');
+ expect(bar._model.borderColor).toBe('rgb(0, 0, 230)');
+ expect(bar._model.borderWidth).toBe(2);
+
+ // Set a dataset style
+ chart.data.datasets[1].hoverBackgroundColor = 'rgb(128, 128, 128)';
+ chart.data.datasets[1].hoverBorderColor = 'rgb(0, 0, 0)';
+ chart.data.datasets[1].hoverBorderWidth = 5;
+
+ meta.controller.setHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
+ expect(bar._model.borderColor).toBe('rgb(0, 0, 0)');
+ expect(bar._model.borderWidth).toBe(5);
+
+ // Should work with array styles so that we can set per bar
+ chart.data.datasets[1].hoverBackgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)'];
+ chart.data.datasets[1].hoverBorderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)'];
+ chart.data.datasets[1].hoverBorderWidth = [2.5, 5];
+
+ meta.controller.setHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
+ expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
+ expect(bar._model.borderWidth).toBe(2.5);
+
+ // Should allow a custom style
+ bar.custom = {
+ hoverBackgroundColor: 'rgb(255, 0, 0)',
+ hoverBorderColor: 'rgb(0, 255, 0)',
+ hoverBorderWidth: 1.5
+ };
+
+ meta.controller.setHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
+ expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
+ expect(bar._model.borderWidth).toBe(1.5);
+ });
+
+ it('should remove a hover style from a bar', function() {
+ var chart = window.acquireChart({
+ type: 'bar',
+ data: {
+ datasets: [{
+ data: [],
+ }, {
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
+ },
+ options: {
+ elements: {
+ rectangle: {
+ backgroundColor: 'rgb(255, 0, 0)',
+ borderColor: 'rgb(0, 0, 255)',
+ borderWidth: 2,
+ }
+ }
+ }
+ });
+
+ var meta = chart.getDatasetMeta(1);
+ var bar = meta.data[0];
+
+ // Change default
+ chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)';
+ chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)';
+ chart.options.elements.rectangle.borderWidth = 3.14;
+
+ // Remove to defaults
+ meta.controller.removeHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)');
+ expect(bar._model.borderColor).toBe('rgb(15, 15, 15)');
+ expect(bar._model.borderWidth).toBe(3.14);
+
+ // Should work with array styles so that we can set per bar
+ chart.data.datasets[1].backgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)'];
+ chart.data.datasets[1].borderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)'];
+ chart.data.datasets[1].borderWidth = [2.5, 5];
+
+ meta.controller.removeHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
+ expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
+ expect(bar._model.borderWidth).toBe(2.5);
+
+ // Should allow a custom style
+ bar.custom = {
+ backgroundColor: 'rgb(255, 0, 0)',
+ borderColor: 'rgb(0, 255, 0)',
+ borderWidth: 1.5
+ };
+
+ meta.controller.removeHoverStyle(bar);
+ expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
+ expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
+ expect(bar._model.borderWidth).toBe(1.5);
+ });
});
// Test the bubble controller
describe('Bubble controller tests', function() {
- it('Should be constructed', function() {
- var chart = {
+
+ beforeEach(function() {
+ window.addDefaultMatchers(jasmine);
+ });
+
+ afterEach(function() {
+ window.releaseAllCharts();
+ });
+
+ it('should be constructed', function() {
+ var chart = window.acquireChart({
+ type: 'bubble',
data: {
datasets: [{
- xAxisID: 'myXAxis',
- yAxisID: 'myYAxis',
data: []
}]
}
- };
+ });
- var controller = new Chart.controllers.bubble(chart, 0);
- expect(controller).not.toBe(undefined);
- expect(controller.index).toBe(0);
- expect(chart.data.datasets[0].metaData).toEqual([]);
+ var meta = chart.getDatasetMeta(0);
+ expect(meta.type).toBe('bubble');
+ expect(meta.controller).not.toBe(undefined);
+ expect(meta.controller.index).toBe(0);
+ expect(meta.data).toEqual([]);
- controller.updateIndex(1);
- expect(controller.index).toBe(1);
+ meta.controller.updateIndex(1);
+ expect(meta.controller.index).toBe(1);
});
- it('Should use the first scale IDs if the dataset does not specify them', function() {
- var chart = {
+ it('should use the first scale IDs if the dataset does not specify them', function() {
+ var chart = window.acquireChart({
+ type: 'bubble',
data: {
datasets: [{
data: []
}]
}
}
- };
+ });
+
+ var meta = chart.getDatasetMeta(0);
- var controller = new Chart.controllers.bubble(chart, 0);
- expect(chart.data.datasets[0].xAxisID).toBe('firstXScaleID');
- expect(chart.data.datasets[0].yAxisID).toBe('firstYScaleID');
+ expect(meta.xAxisID).toBe('firstXScaleID');
+ expect(meta.yAxisID).toBe('firstYScaleID');
});
- it('Should create point elements for each data item during initialization', function() {
- var chart = {
+ it('should create point elements for each data item during initialization', function() {
+ var chart = window.acquireChart({
+ type: 'bubble',
data: {
datasets: [{
data: [10, 15, 0, -4]
}]
- },
- config: {
- type: 'bubble'
- },
- options: {
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
}
- };
+ });
- var controller = new Chart.controllers.bubble(chart, 0);
+ var meta = chart.getDatasetMeta(0);
- expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 points created
- expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data.length).toBe(4); // 4 points created
+ expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
});
it('should draw all elements', function() {
- var chart = {
+ var chart = window.acquireChart({
+ type: 'bubble',
data: {
datasets: [{
data: [10, 15, 0, -4]
}]
},
- config: {
- type: 'bubble'
- },
options: {
- showLines: true,
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
+ animation: false,
+ showLines: true
}
- };
+ });
- var controller = new Chart.controllers.bubble(chart, 0);
+ var meta = chart.getDatasetMeta(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');
+ spyOn(meta.data[0], 'draw');
+ spyOn(meta.data[1], 'draw');
+ spyOn(meta.data[2], 'draw');
+ spyOn(meta.data[3], 'draw');
- controller.draw();
+ chart.update();
- 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);
+ expect(meta.data[0].draw.calls.count()).toBe(1);
+ expect(meta.data[1].draw.calls.count()).toBe(1);
+ expect(meta.data[2].draw.calls.count()).toBe(1);
+ expect(meta.data[3].draw.calls.count()).toBe(1);
});
- it('should update elements', function() {
- var data = {
- datasets: [{
- data: [{
- x: 10,
- y: 10,
- r: 5
- }, {
- x: -15,
- y: -10,
- r: 1
- }, {
- x: 0,
- y: -9,
- r: 2
- }, {
- x: -4,
- y: 10,
- r: 1
+ it('should update elements when modifying style', function() {
+ var chart = window.acquireChart({
+ type: 'bubble',
+ data: {
+ datasets: [{
+ data: [{
+ x: 10,
+ y: 10,
+ r: 5
+ }, {
+ x: -15,
+ y: -10,
+ r: 1
+ }, {
+ x: 0,
+ y: -9,
+ r: 2
+ }, {
+ x: -4,
+ y: 10,
+ r: 1
+ }]
}],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
- horizontalScaleConfig.position = 'bottom';
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
-
- var chart = {
- chartArea: {
- bottom: 200,
- left: xScale.left,
- right: xScale.left + 200,
- top: 0
- },
- data: data,
- config: {
- type: 'bubble'
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
- showLines: true,
- elements: {
- line: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderCapStyle: 'round',
- borderColor: 'rgb(0, 255, 0)',
- borderDash: [],
- borderDashOffset: 0.1,
- borderJoinStyle: 'bevel',
- borderWidth: 1.2,
- fill: true,
- tension: 0.1,
- },
- point: {
- backgroundColor: Chart.defaults.global.defaultColor,
- borderWidth: 1,
- borderColor: Chart.defaults.global.defaultColor,
- hitRadius: 1,
- hoverRadius: 4,
- hoverBorderWidth: 1,
- radius: 3,
- pointStyle: 'circle'
- }
- },
scales: {
xAxes: [{
- id: 'firstXScaleID'
+ type: 'category'
}],
yAxes: [{
- id: 'firstYScaleID'
+ type: 'linear'
}]
}
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
}
- };
-
- var controller = new Chart.controllers.bubble(chart, 0);
- controller.update();
-
- expect(chart.data.datasets[0].metaData[0]._model).toEqual({
- backgroundColor: Chart.defaults.global.defaultColor,
- borderWidth: 1,
- borderColor: Chart.defaults.global.defaultColor,
- hitRadius: 1,
- radius: 5,
- skip: false,
-
- // Point
- x: 195,
- y: 6,
-
- });
-
- expect(chart.data.datasets[0].metaData[1]._model).toEqual({
- backgroundColor: Chart.defaults.global.defaultColor,
- borderWidth: 1,
- borderColor: Chart.defaults.global.defaultColor,
- hitRadius: 1,
- radius: 1,
- skip: false,
-
- // Point
- x: 89,
- y: 194,
- });
-
- expect(chart.data.datasets[0].metaData[2]._model).toEqual({
- backgroundColor: Chart.defaults.global.defaultColor,
- borderWidth: 1,
- borderColor: Chart.defaults.global.defaultColor,
- hitRadius: 1,
- radius: 2,
- skip: false,
-
- // Point
- x: 153,
- y: 185,
});
- expect(chart.data.datasets[0].metaData[3]._model).toEqual({
- backgroundColor: Chart.defaults.global.defaultColor,
- borderWidth: 1,
- borderColor: Chart.defaults.global.defaultColor,
- hitRadius: 1,
- radius: 1,
- skip: false,
-
- // Point
- x: 136,
- y: 6,
+ var meta = chart.getDatasetMeta(0);
+
+ [ { r: 5, x: 38, y: 32 },
+ { r: 1, x: 189, y: 484 },
+ { r: 2, x: 341, y: 461 },
+ { r: 1, x: 492, y: 32 }
+ ].forEach(function(expected, i) {
+ expect(meta.data[i]._model.radius).toBe(expected.r);
+ expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x);
+ expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y);
+ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+ backgroundColor: Chart.defaults.global.defaultColor,
+ borderColor: Chart.defaults.global.defaultColor,
+ borderWidth: 1,
+ hitRadius: 1,
+ skip: false
+ }));
});
// Use dataset level styles for lines & points
chart.data.datasets[0].radius = 22;
chart.data.datasets[0].hitRadius = 3.3;
- controller.update();
-
- expect(chart.data.datasets[0].metaData[0]._model).toEqual({
- backgroundColor: 'rgb(98, 98, 98)',
- borderWidth: 0.55,
- borderColor: 'rgb(8, 8, 8)',
- hitRadius: 3.3,
- radius: 5,
- skip: false,
-
- // Point
- x: 195,
- y: 6,
- });
-
- expect(chart.data.datasets[0].metaData[1]._model).toEqual({
- backgroundColor: 'rgb(98, 98, 98)',
- borderWidth: 0.55,
- borderColor: 'rgb(8, 8, 8)',
- hitRadius: 3.3,
- radius: 1,
- skip: false,
-
- // Point
- x: 89,
- y: 194,
- });
+ chart.update();
- expect(chart.data.datasets[0].metaData[2]._model).toEqual({
- backgroundColor: 'rgb(98, 98, 98)',
- borderWidth: 0.55,
- borderColor: 'rgb(8, 8, 8)',
- hitRadius: 3.3,
- radius: 2,
- skip: false,
-
- // Point
- x: 153,
- y: 185,
- });
-
- expect(chart.data.datasets[0].metaData[3]._model).toEqual({
- backgroundColor: 'rgb(98, 98, 98)',
- borderWidth: 0.55,
- borderColor: 'rgb(8, 8, 8)',
- hitRadius: 3.3,
- radius: 1,
- skip: false,
-
- // Point
- x: 136,
- y: 6,
- });
+ for (var i=0; i<4; ++i) {
+ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+ backgroundColor: 'rgb(98, 98, 98)',
+ borderColor: 'rgb(8, 8, 8)',
+ borderWidth: 0.55,
+ hitRadius: 3.3,
+ skip: false
+ }));
+ }
// point styles
- chart.data.datasets[0].metaData[0].custom = {
+ meta.data[0].custom = {
radius: 2.2,
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
borderWidth: 0.787,
tension: 0.15,
- skip: true,
hitRadius: 5,
+ skip: true
};
- controller.update();
+ chart.update();
- expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+ expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
backgroundColor: 'rgb(0, 1, 3)',
- borderWidth: 0.787,
borderColor: 'rgb(4, 6, 8)',
+ borderWidth: 0.787,
hitRadius: 5,
- radius: 2.2,
- skip: true,
-
- // Point
- x: 195,
- y: 6,
- });
+ skip: true
+ }));
});
it('should handle number of data point changes in update', function() {
- var data = {
- datasets: [{
- data: [{
- x: 10,
- y: 10,
- r: 5
- }, {
- x: -15,
- y: -10,
- r: 1
- }, {
- x: 0,
- y: -9,
- r: 2
- }, {
- x: -4,
- y: 10,
- r: 1
+ var chart = window.acquireChart({
+ type: 'bubble',
+ data: {
+ datasets: [{
+ data: [{
+ x: 10,
+ y: 10,
+ r: 5
+ }, {
+ x: -15,
+ y: -10,
+ r: 1
+ }, {
+ x: 0,
+ y: -9,
+ r: 2
+ }, {
+ x: -4,
+ y: 10,
+ r: 1
+ }]
}],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
+ labels: ['label1', 'label2', 'label3', 'label4']
+ }
});
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
+ var meta = chart.getDatasetMeta(0);
+ expect(meta.data.length).toBe(4);
- var chart = {
- chartArea: {
- bottom: 200,
- left: xScale.left,
- right: 200,
- top: 0
- },
- data: data,
- config: {
- type: 'line'
- },
- options: {
- elements: {
- line: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2,
- },
- point: {
- backgroundColor: Chart.defaults.global.defaultColor,
- borderWidth: 1,
- borderColor: Chart.defaults.global.defaultColor,
- hitRadius: 1,
- hoverRadius: 4,
- hoverBorderWidth: 1,
- radius: 3,
- }
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
- }
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
- }
- };
-
- var controller = new Chart.controllers.bubble(chart, 0);
chart.data.datasets[0].data = [{
x: 1,
y: 1,
y: 5,
r: 2
}]; // remove 2 items
- controller.buildOrUpdateElements();
- controller.update();
- expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+
+ chart.update();
+
+ expect(meta.data.length).toBe(2);
+ expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
chart.data.datasets[0].data = [{
x: 10,
y: 0,
r: 3
}]; // add 3 items
- controller.buildOrUpdateElements();
- controller.update();
- expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
- expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Point).toBe(true);
+
+ chart.update();
+
+ expect(meta.data.length).toBe(5);
+ expect(meta.data[0] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Point).toBe(true);
+ expect(meta.data[4] instanceof Chart.elements.Point).toBe(true);
});
it('should set hover styles', function() {
- var data = {
- datasets: [{
- data: [{
- x: 10,
- y: 10,
- r: 5
- }, {
- x: -15,
- y: -10,
- r: 1
- }, {
- x: 0,
- y: -9,
- r: 2
- }, {
- x: -4,
- y: 10,
- r: 1
+ var chart = window.acquireChart({
+ type: 'bubble',
+ data: {
+ datasets: [{
+ data: [{
+ x: 10,
+ y: 10,
+ r: 5
+ }, {
+ x: -15,
+ y: -10,
+ r: 1
+ }, {
+ x: 0,
+ y: -9,
+ r: 2
+ }, {
+ x: -4,
+ y: 10,
+ r: 1
+ }]
}],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
-
- var chart = {
- chartArea: {
- bottom: 200,
- left: xScale.left,
- right: 200,
- top: 0
- },
- data: data,
- config: {
- type: 'line'
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
elements: {
- line: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2,
- },
point: {
backgroundColor: 'rgb(255, 255, 0)',
borderWidth: 1,
hitRadius: 1,
hoverRadius: 4,
hoverBorderWidth: 1,
- radius: 3,
+ radius: 3
}
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
}
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
}
- };
+ });
- var controller = new Chart.controllers.bubble(chart, 0);
- controller.update();
- var point = chart.data.datasets[0].metaData[0];
+ var meta = chart.getDatasetMeta(0);
+ var point = meta.data[0];
- controller.setHoverStyle(point);
+ meta.controller.setHoverStyle(point);
expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)');
expect(point._model.borderColor).toBe('rgb(230, 230, 230)');
expect(point._model.borderWidth).toBe(1);
chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
chart.data.datasets[0].hoverBorderWidth = 2.1;
- controller.setHoverStyle(point);
+ meta.controller.setHoverStyle(point);
expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
expect(point._model.borderWidth).toBe(2.1);
hoverBorderColor: 'rgb(10, 10, 10)'
};
- controller.setHoverStyle(point);
+ meta.controller.setHoverStyle(point);
expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
expect(point._model.borderWidth).toBe(5.5);
});
it('should remove hover styles', function() {
- var data = {
- datasets: [{
- data: [{
- x: 10,
- y: 10,
- r: 5
- }, {
- x: -15,
- y: -10,
- r: 1
- }, {
- x: 0,
- y: -9,
- r: 2
- }, {
- x: -4,
- y: 10,
- r: 1
+ var chart = window.acquireChart({
+ type: 'bubble',
+ data: {
+ datasets: [{
+ data: [{
+ x: 10,
+ y: 10,
+ r: 5
+ }, {
+ x: -15,
+ y: -10,
+ r: 1
+ }, {
+ x: 0,
+ y: -9,
+ r: 2
+ }, {
+ x: -4,
+ y: 10,
+ r: 1
+ }]
}],
- label: 'dataset2',
- xAxisID: 'firstXScaleID',
- yAxisID: 'firstYScaleID'
- }],
- labels: ['label1', 'label2', 'label3', 'label4']
- };
- var mockContext = window.createMockContext();
-
- var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
- var yScale = new VerticalScaleConstructor({
- ctx: mockContext,
- options: verticalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstYScaleID'
- });
-
- // Update ticks & set physical dimensions
- var verticalSize = yScale.update(50, 200);
- yScale.top = 0;
- yScale.left = 0;
- yScale.right = verticalSize.width;
- yScale.bottom = verticalSize.height;
-
- var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
- var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
- horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
- var xScale = new HorizontalScaleConstructor({
- ctx: mockContext,
- options: horizontalScaleConfig,
- chart: {
- data: data
- },
- id: 'firstXScaleID'
- });
-
- // Update ticks & set physical dimensions
- var horizontalSize = xScale.update(200, 50);
- xScale.left = yScale.right;
- xScale.top = yScale.bottom;
- xScale.right = horizontalSize.width + xScale.left;
- xScale.bottom = horizontalSize.height + xScale.top;
-
-
- var chart = {
- chartArea: {
- bottom: 200,
- left: xScale.left,
- right: 200,
- top: 0
- },
- data: data,
- config: {
- type: 'line'
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
elements: {
- line: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2,
- fill: true,
- tension: 0.1,
- },
point: {
backgroundColor: 'rgb(255, 255, 0)',
borderWidth: 1,
hitRadius: 1,
hoverRadius: 4,
hoverBorderWidth: 1,
- radius: 3,
+ radius: 3
}
- },
- scales: {
- xAxes: [{
- id: 'firstXScaleID'
- }],
- yAxes: [{
- id: 'firstYScaleID'
- }]
}
- },
- scales: {
- firstXScaleID: xScale,
- firstYScaleID: yScale,
}
- };
+ });
- var controller = new Chart.controllers.bubble(chart, 0);
- controller.update();
- var point = chart.data.datasets[0].metaData[0];
+ var meta = chart.getDatasetMeta(0);
+ var point = meta.data[0];
chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)';
chart.options.elements.point.borderColor = 'rgb(50, 51, 52)';
chart.options.elements.point.borderWidth = 10.1;
chart.options.elements.point.radius = 1.01;
- controller.removeHoverStyle(point);
+ meta.controller.removeHoverStyle(point);
expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)');
expect(point._model.borderColor).toBe('rgb(50, 51, 52)');
expect(point._model.borderWidth).toBe(10.1);
chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
chart.data.datasets[0].borderWidth = 2.1;
- controller.removeHoverStyle(point);
+ meta.controller.removeHoverStyle(point);
expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
expect(point._model.borderWidth).toBe(2.1);
borderColor: 'rgb(10, 10, 10)'
};
- controller.removeHoverStyle(point);
+ meta.controller.removeHoverStyle(point);
expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
expect(point._model.borderWidth).toBe(5.5);
expect(point._model.radius).toBe(4.4);
});
-});
\ No newline at end of file
+});
// Test the bar controller
describe('Doughnut controller tests', function() {
- it('Should be constructed', function() {
- var chart = {
+
+ beforeEach(function() {
+ window.addDefaultMatchers(jasmine);
+ });
+
+ afterEach(function() {
+ window.releaseAllCharts();
+ });
+
+ it('should be constructed', function() {
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
data: []
- }]
+ }],
+ labels: []
}
- };
+ });
- var controller = new Chart.controllers.doughnut(chart, 0);
- expect(controller).not.toBe(undefined);
- expect(controller.index).toBe(0);
- expect(chart.data.datasets[0].metaData).toEqual([]);
+ var meta = chart.getDatasetMeta(0);
+ expect(meta.type).toBe('doughnut');
+ expect(meta.controller).not.toBe(undefined);
+ expect(meta.controller.index).toBe(0);
+ expect(meta.data).toEqual([]);
- controller.updateIndex(1);
- expect(controller.index).toBe(1);
+ meta.controller.updateIndex(1);
+ expect(meta.controller.index).toBe(1);
});
- it('Should create arc elements for each data item during initialization', function() {
- var chart = {
+ it('should create arc elements for each data item during initialization', function() {
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
data: [10, 15, 0, 4]
- }]
- },
- config: {
- type: 'doughnut'
- },
- options: {
+ }],
+ labels: []
}
- };
-
- var controller = new Chart.controllers.doughnut(chart, 0);
-
- expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 rectangles 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);
+ });
+
+ var meta = chart.getDatasetMeta(0);
+ expect(meta.data.length).toBe(4); // 4 rectangles created
+ expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
});
- it ('Should reset and update elements', function() {
- var chart = {
- chartArea: {
- left: 0,
- top: 0,
- right: 100,
- bottom: 200,
- },
+ it ('should reset and update elements', function() {
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
+ data: [1, 2, 3, 4],
hidden: true
}, {
- data: [10, 15, 0, 4]
+ data: [5, 6, 0, 7]
}, {
- data: [1]
+ data: [8, 9, 10, 11]
}],
labels: ['label0', 'label1', 'label2', 'label3']
},
- config: {
- type: 'doughnut'
- },
options: {
- animation: {
- animateRotate: false,
- animateScale: false
- },
cutoutPercentage: 50,
rotation: Math.PI * -0.5,
circumference: Math.PI * 2.0,
}
}
}
- };
-
- var controller = new Chart.controllers.doughnut(chart, 1);
- controller.reset(); // reset first
-
- expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: Math.PI * -0.5,
- endAngle: Math.PI * -0.5,
- circumference: 2.1666156231653746,
- outerRadius: 49,
- innerRadius: 36.75
- }));
-
- expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: Math.PI * -0.5,
- endAngle: Math.PI * -0.5,
- circumference: 3.249923434748062,
- outerRadius: 49,
- innerRadius: 36.75
- }));
-
- expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: Math.PI * -0.5,
- endAngle: Math.PI * -0.5,
- circumference: 0,
- outerRadius: 49,
- innerRadius: 36.75
- }));
-
- expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: Math.PI * -0.5,
- endAngle: Math.PI * -0.5,
- circumference: 0.8666462492661499,
- outerRadius: 49,
- innerRadius: 36.75
- }));
-
- controller.update();
-
- expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: Math.PI * -0.5,
- endAngle: 0.595819296370478,
- circumference: 2.1666156231653746,
- outerRadius: 49,
- innerRadius: 36.75,
-
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- hoverBackgroundColor: 'rgb(255, 255, 255)',
-
- label: 'label0',
- }));
-
- expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: 0.595819296370478,
- endAngle: 3.84574273111854,
- circumference: 3.249923434748062,
- outerRadius: 49,
- innerRadius: 36.75,
-
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- hoverBackgroundColor: 'rgb(255, 255, 255)',
-
- label: 'label1'
- }));
-
- expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: 3.84574273111854,
- endAngle: 3.84574273111854,
- circumference: 0,
- outerRadius: 49,
- innerRadius: 36.75,
-
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- hoverBackgroundColor: 'rgb(255, 255, 255)',
-
- label: 'label2'
- }));
-
- expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
- x: 50,
- y: 100,
- startAngle: 3.84574273111854,
- endAngle: 4.71238898038469,
- circumference: 0.8666462492661499,
- outerRadius: 49,
- innerRadius: 36.75,
-
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- hoverBackgroundColor: 'rgb(255, 255, 255)',
-
- label: 'label3'
- }));
+ });
+
+ var meta = chart.getDatasetMeta(1);
+
+ meta.controller.reset(); // reset first
+
+ expect(meta.data.length).toBe(4);
+
+ [ { c: 1.7453292519 },
+ { c: 2.0943951023 },
+ { c: 0, },
+ { c: 2.4434609527 }
+ ].forEach(function(expected, i) {
+ expect(meta.data[i]._model.x).toBeCloseToPixel(256);
+ expect(meta.data[i]._model.y).toBeCloseToPixel(272);
+ expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(239);
+ expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(179);
+ expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8);
+ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+ startAngle: Math.PI * -0.5,
+ endAngle: Math.PI * -0.5,
+ label: chart.data.labels[i],
+ hoverBackgroundColor: 'rgb(255, 255, 255)',
+ backgroundColor: 'rgb(255, 0, 0)',
+ borderColor: 'rgb(0, 0, 255)',
+ borderWidth: 2
+ }));
+ })
+
+ chart.update();
+
+ [ { c: 1.7453292519, s: -1.5707963267, e: 0.1745329251 },
+ { c: 2.0943951023, s: 0.1745329251, e: 2.2689280275 },
+ { c: 0, s: 2.2689280275, e: 2.2689280275 },
+ { c: 2.4434609527, s: 2.2689280275, e: 4.7123889803 }
+ ].forEach(function(expected, i) {
+ expect(meta.data[i]._model.x).toBeCloseToPixel(256);
+ expect(meta.data[i]._model.y).toBeCloseToPixel(272);
+ expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(239);
+ expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(179);
+ expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8);
+ expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8);
+ expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8);
+ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+ label: chart.data.labels[i],
+ hoverBackgroundColor: 'rgb(255, 255, 255)',
+ backgroundColor: 'rgb(255, 0, 0)',
+ borderColor: 'rgb(0, 0, 255)',
+ borderWidth: 2
+ }));
+ })
// 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
- controller.buildOrUpdateElements();
- controller.update();
+ chart.update();
- expect(chart.data.datasets[1].metaData.length).toBe(2);
- expect(chart.data.datasets[1].metaData[0] instanceof Chart.elements.Arc).toBe(true);
- expect(chart.data.datasets[1].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data.length).toBe(2);
+ expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
// Add data
chart.data.datasets[1].data = [1, 2, 3, 4];
- controller.buildOrUpdateElements();
- controller.update();
-
- expect(chart.data.datasets[1].metaData.length).toBe(4);
- expect(chart.data.datasets[1].metaData[0] instanceof Chart.elements.Arc).toBe(true);
- expect(chart.data.datasets[1].metaData[1] instanceof Chart.elements.Arc).toBe(true);
- expect(chart.data.datasets[1].metaData[2] instanceof Chart.elements.Arc).toBe(true);
- expect(chart.data.datasets[1].metaData[3] instanceof Chart.elements.Arc).toBe(true);
+ chart.update();
+
+ expect(meta.data.length).toBe(4);
+ expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
});
- it ('Should rotate and limit circumference', function() {
- var chart = {
- chartArea: {
- left: 0,
- top: 0,
- right: 200,
- bottom: 100,
- },
+ it ('should rotate and limit circumference', function() {
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
+ data: [2, 4],
hidden: true
}, {
data: [1, 3]
}, {
- data: [1]
+ data: [1, 0]
}],
labels: ['label0', 'label1']
},
- config: {
- type: 'doughnut'
- },
options: {
- animation: {
- animateRotate: false,
- animateScale: false
- },
cutoutPercentage: 50,
rotation: Math.PI,
circumference: Math.PI * 0.5,
}
}
}
- };
-
- var controller = new Chart.controllers.doughnut(chart, 1);
- controller.update();
-
- expect(chart.data.datasets[1].metaData[0]._model.x).toEqual(149);
- expect(chart.data.datasets[1].metaData[0]._model.y).toEqual(99);
- expect(chart.data.datasets[1].metaData[0]._model.startAngle).toBeCloseTo(Math.PI, 10);
- expect(chart.data.datasets[1].metaData[0]._model.endAngle).toBeCloseTo(Math.PI + Math.PI / 8, 10);
- expect(chart.data.datasets[1].metaData[0]._model.circumference).toBeCloseTo(Math.PI / 8, 10);
- expect(chart.data.datasets[1].metaData[0]._model.outerRadius).toBeCloseTo(98, 10);
- expect(chart.data.datasets[1].metaData[0]._model.innerRadius).toBeCloseTo(73.5, 10);
-
- expect(chart.data.datasets[1].metaData[1]._model.x).toEqual(149);
- expect(chart.data.datasets[1].metaData[1]._model.y).toEqual(99);
- expect(chart.data.datasets[1].metaData[1]._model.startAngle).toBeCloseTo(Math.PI + Math.PI / 8, 10);
- expect(chart.data.datasets[1].metaData[1]._model.endAngle).toBeCloseTo(Math.PI + Math.PI / 2, 10);
- expect(chart.data.datasets[1].metaData[1]._model.circumference).toBeCloseTo(3 * Math.PI / 8, 10);
- expect(chart.data.datasets[1].metaData[1]._model.outerRadius).toBeCloseTo(98, 10);
- expect(chart.data.datasets[1].metaData[1]._model.innerRadius).toBeCloseTo(73.5, 10);
+ });
+
+ var meta = chart.getDatasetMeta(1);
+
+ expect(meta.data.length).toBe(2);
+
+ // Only startAngle, endAngle and circumference should be different.
+ [ { c: Math.PI / 8, s: Math.PI, e: Math.PI + Math.PI / 8 },
+ { c: 3 * Math.PI / 8, s: Math.PI + Math.PI / 8, e: Math.PI + Math.PI / 2 }
+ ].forEach(function(expected, i) {
+ expect(meta.data[i]._model.x).toBeCloseToPixel(495);
+ expect(meta.data[i]._model.y).toBeCloseToPixel(511);
+ expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(478);
+ expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(359);
+ expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c,8);
+ expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8);
+ expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8);
+ })
});
it ('should draw all arcs', function() {
- var chart = {
- chartArea: {
- left: 0,
- top: 0,
- right: 100,
- bottom: 200,
- },
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
data: [10, 15, 0, 4]
}],
labels: ['label0', 'label1', 'label2', 'label3']
- },
- config: {
- type: 'doughnut'
- },
- options: {
- animation: {
- animateRotate: false,
- animateScale: false
- },
- cutoutPercentage: 50,
- elements: {
- arc: {
- backgroundColor: 'rgb(255, 0, 0)',
- borderColor: 'rgb(0, 0, 255)',
- borderWidth: 2,
- hoverBackgroundColor: 'rgb(255, 255, 255)'
- }
- }
}
- };
+ });
- var controller = new Chart.controllers.doughnut(chart, 0);
+ var meta = chart.getDatasetMeta(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');
+ spyOn(meta.data[0], 'draw');
+ spyOn(meta.data[1], 'draw');
+ spyOn(meta.data[2], 'draw');
+ spyOn(meta.data[3], 'draw');
- controller.draw();
+ chart.update();
- 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);
+ expect(meta.data[0].draw.calls.count()).toBe(1);
+ expect(meta.data[1].draw.calls.count()).toBe(1);
+ expect(meta.data[2].draw.calls.count()).toBe(1);
+ expect(meta.data[3].draw.calls.count()).toBe(1);
});
it ('should set the hover style of an arc', function() {
- var chart = {
- chartArea: {
- left: 0,
- top: 0,
- right: 100,
- bottom: 200,
- },
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
data: [10, 15, 0, 4]
}],
labels: ['label0', 'label1', 'label2', 'label3']
},
- config: {
- type: 'doughnut'
- },
options: {
- animation: {
- animateRotate: false,
- animateScale: false
- },
- cutoutPercentage: 50,
elements: {
arc: {
backgroundColor: 'rgb(255, 0, 0)',
}
}
}
- };
+ });
- var controller = new Chart.controllers.doughnut(chart, 0);
- controller.reset(); // reset first
- controller.update();
-
- var arc = chart.data.datasets[0].metaData[0];
-
- controller.setHoverStyle(arc);
+ var meta = chart.getDatasetMeta(0);
+ var arc = meta.data[0];
+ meta.controller.setHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
expect(arc._model.borderColor).toBe('rgb(0, 0, 230)');
expect(arc._model.borderWidth).toBe(2);
chart.data.datasets[0].hoverBorderColor = 'rgb(18, 18, 18)';
chart.data.datasets[0].hoverBorderWidth = 1.56;
- controller.setHoverStyle(arc);
-
+ meta.controller.setHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(9, 9, 9)');
expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
expect(arc._model.borderWidth).toBe(1.56);
chart.data.datasets[0].hoverBorderColor = ['rgb(18, 18, 18)'];
chart.data.datasets[0].hoverBorderWidth = [0.1, 1.56];
- controller.setHoverStyle(arc);
-
+ meta.controller.setHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(255, 255, 255)');
expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
expect(arc._model.borderWidth).toBe(0.1);
hoverBorderWidth: 3.14159,
};
- controller.setHoverStyle(arc);
-
+ meta.controller.setHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(7, 7, 7)');
expect(arc._model.borderColor).toBe('rgb(17, 17, 17)');
expect(arc._model.borderWidth).toBe(3.14159);
});
it ('should unset the hover style of an arc', function() {
- var chart = {
- chartArea: {
- left: 0,
- top: 0,
- right: 100,
- bottom: 200,
- },
+ var chart = window.acquireChart({
+ type: 'doughnut',
data: {
datasets: [{
data: [10, 15, 0, 4]
}],
labels: ['label0', 'label1', 'label2', 'label3']
},
- config: {
- type: 'doughnut'
- },
options: {
- animation: {
- animateRotate: false,
- animateScale: false
- },
- cutoutPercentage: 50,
elements: {
arc: {
backgroundColor: 'rgb(255, 0, 0)',
}
}
}
- };
-
- var controller = new Chart.controllers.doughnut(chart, 0);
- controller.reset(); // reset first
- controller.update();
-
- var arc = chart.data.datasets[0].metaData[0];
+ });
- controller.removeHoverStyle(arc);
+ var meta = chart.getDatasetMeta(0);
+ var arc = meta.data[0];
+ meta.controller.removeHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(255, 0, 0)');
expect(arc._model.borderColor).toBe('rgb(0, 0, 255)');
expect(arc._model.borderWidth).toBe(2);
chart.data.datasets[0].borderColor = 'rgb(18, 18, 18)';
chart.data.datasets[0].borderWidth = 1.56;
- controller.removeHoverStyle(arc);
-
+ meta.controller.removeHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(9, 9, 9)');
expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
expect(arc._model.borderWidth).toBe(1.56);
chart.data.datasets[0].borderColor = ['rgb(18, 18, 18)'];
chart.data.datasets[0].borderWidth = [0.1, 1.56];
- controller.removeHoverStyle(arc);
-
+ meta.controller.removeHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(255, 255, 255)');
expect(arc._model.borderColor).toBe('rgb(18, 18, 18)');
expect(arc._model.borderWidth).toBe(0.1);
borderWidth: 3.14159,
};
- controller.removeHoverStyle(arc);
-
+ meta.controller.removeHoverStyle(arc);
expect(arc._model.backgroundColor).toBe('rgb(7, 7, 7)');
expect(arc._model.borderColor).toBe('rgb(17, 17, 17)');
expect(arc._model.borderWidth).toBe(3.14159);
});
-});
\ No newline at end of file
+});
// 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([]);
+ beforeEach(function() {
+ window.addDefaultMatchers(jasmine);
+ });
- controller.updateIndex(1);
- expect(controller.index).toBe(1);
+ afterEach(function() {
+ window.releaseAllCharts();
});
- 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: {
- }
- };
+ it('should be constructed', function() {
+ var chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
+ datasets: [
+ { data: [] },
+ { data: [] }
+ ],
+ labels: []
+ }
+ });
- var controller = new Chart.controllers.polarArea(chart, 0);
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.type).toEqual('polarArea');
+ expect(meta.data).toEqual([]);
+ expect(meta.hidden).toBe(null);
+ expect(meta.controller).not.toBe(undefined);
+ expect(meta.controller.index).toBe(1);
- 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);
+ meta.controller.updateIndex(0);
+ expect(meta.controller.index).toBe(0);
});
- it('should draw all elements', function() {
- var chart = {
+ it('should create arc elements for each data item during initialization', function() {
+ var chart = window.acquireChart({
+ type: 'polarArea',
data: {
- datasets: [{
- data: [10, 15, 0, -4]
- }]
- },
- config: {
- type: 'polarArea'
- },
- options: {
+ datasets: [
+ { data: [] },
+ { data: [10, 15, 0, -4] }
+ ],
+ labels: []
}
- };
-
- 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);
+ var meta = chart.getDatasetMeta(1);
+ expect(meta.data.length).toBe(4); // 4 arcs created
+ expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
});
- it('should update elements', function() {
- var data = {
+ it('should draw all elements', function() {
+ var chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
datasets: [{
data: [10, 15, 0, -4],
- label: 'dataset2',
+ 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'
+ var meta = chart.getDatasetMeta(0);
+
+ spyOn(meta.data[0], 'draw');
+ spyOn(meta.data[1], 'draw');
+ spyOn(meta.data[2], 'draw');
+ spyOn(meta.data[3], 'draw');
+
+ chart.update();
+
+ expect(meta.data[0].draw.calls.count()).toBe(1);
+ expect(meta.data[1].draw.calls.count()).toBe(1);
+ expect(meta.data[2].draw.calls.count()).toBe(1);
+ expect(meta.data[3].draw.calls.count()).toBe(1);
+ });
+
+ it('should update elements when modifying data', function() {
+ var chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
showLines: true,
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'
+ borderWidth: 1.2
+ }
+ }
+ }
});
- 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'
+ var meta = chart.getDatasetMeta(0);
+ expect(meta.data.length).toBe(4);
+
+ [ { o: 156, s: -0.5 * Math.PI, e: 0 },
+ { o: 211, s: 0, e: 0.5 * Math.PI },
+ { o: 45, s: 0.5 * Math.PI, e: Math.PI },
+ { o: 0, s: Math.PI, e: 1.5 * Math.PI }
+ ].forEach(function(expected, i) {
+ expect(meta.data[i]._model.x).toBeCloseToPixel(256);
+ expect(meta.data[i]._model.y).toBeCloseToPixel(272);
+ expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0);
+ expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o);
+ expect(meta.data[i]._model.startAngle).toBe(expected.s);
+ expect(meta.data[i]._model.endAngle).toBe(expected.e);
+ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
+ backgroundColor: 'rgb(255, 0, 0)',
+ borderColor: 'rgb(0, 255, 0)',
+ borderWidth: 1.2,
+ label: chart.data.labels[i]
+ }));
});
// arc styles
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'
- });
+ chart.update();
- 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'
- });
+ for (var i = 0; i < 4; ++i) {
+ expect(meta.data[i]._model.backgroundColor).toBe('rgb(128, 129, 130)');
+ expect(meta.data[i]._model.borderColor).toBe('rgb(56, 57, 58)');
+ expect(meta.data[i]._model.borderWidth).toBe(1.123);
+ }
// arc styles
- chart.data.datasets[0].metaData[0].custom = {
+ meta.data[0].custom = {
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
- borderWidth: 0.787,
-
+ borderWidth: 0.787
};
- controller.update();
+ chart.update();
- expect(chart.data.datasets[0].metaData[0]._model).toEqual({
- x: 150,
- y: 150,
- innerRadius: 0,
- outerRadius: 59.5,
+ expect(meta.data[0]._model.x).toBeCloseToPixel(256);
+ expect(meta.data[0]._model.y).toBeCloseToPixel(272);
+ expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0);
+ expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(156);
+ expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
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'
+ var chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
showLines: true,
arc: {
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2,
- },
- },
- },
- scale: scale
- };
+ borderWidth: 1.2
+ }
+ }
+ }
+ });
- 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);
+ var meta = chart.getDatasetMeta(0);
+ expect(meta.data.length).toBe(4);
+
+ // remove 2 items
+ chart.data.labels = ['label1', 'label2'];
+ chart.data.datasets[0].data = [1, 2];
+ chart.update();
+
+ expect(meta.data.length).toBe(2);
+ expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+
+ // add 3 items
+ chart.data.labels = ['label1', 'label2', 'label3', 'label4', 'label5'];
+ chart.data.datasets[0].data = [1, 2, 3, 4, 5];
+ chart.update();
+
+ expect(meta.data.length).toBe(5);
+ expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true);
+ expect(meta.data[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'
+ var chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
showLines: true,
arc: {
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2,
- },
- },
- },
- scale: scale
- };
+ borderWidth: 1.2
+ }
+ }
+ }
+ });
- var controller = new Chart.controllers.polarArea(chart, 0);
- controller.update();
- var arc = chart.data.datasets[0].metaData[0];
+ var meta = chart.getDatasetMeta(0);
+ var arc = meta.data[0];
- controller.setHoverStyle(arc);
+ meta.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);
chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
chart.data.datasets[0].hoverBorderWidth = 2.1;
- controller.setHoverStyle(arc);
+ meta.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);
hoverBorderColor: 'rgb(10, 10, 10)'
};
- controller.setHoverStyle(arc);
+ meta.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'
+ var chart = window.acquireChart({
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [10, 15, 0, -4],
+ label: 'dataset2'
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
},
options: {
showLines: true,
arc: {
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 255, 0)',
- borderWidth: 1.2,
- },
- },
- },
- scale: scale
- };
+ borderWidth: 1.2
+ }
+ }
+ }
+ });
- var controller = new Chart.controllers.polarArea(chart, 0);
- controller.update();
- var arc = chart.data.datasets[0].metaData[0];
+ var meta = chart.getDatasetMeta(0);
+ var arc = meta.data[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);
+ meta.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);
chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
chart.data.datasets[0].borderWidth = 2.1;
- controller.removeHoverStyle(arc);
+ meta.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);
borderColor: 'rgb(10, 10, 10)'
};
- controller.removeHoverStyle(arc);
+ meta.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
+});
projects / thirdparty / Chart.js.git / commitdiff
