From f85ffbc09cd8424e65f38e93f71bce129c6a74e9 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Fri, 13 Nov 2015 11:21:44 -0500 Subject: [PATCH] Use the dataset backgroundColor, borderWidth, and borderColor, if specified, for points. Added tests for this case. --- src/controllers/controller.line.js | 55 +++++++++++++-- test/controller.line.tests.js | 108 +++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+), 6 deletions(-) diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 954686e06..e8d08ba0e 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -169,6 +169,49 @@ this.updateBezierControlPoints(); }, + getPointBackgroundColor: function(point, index) { + var backgroundColor = this.chart.options.elements.point.backgroundColor; + var dataset = this.getDataset(); + + if (point.custom && point.custom.backgroundColor) { + backgroundColor = point.custom.backgroundColor; + } else if (dataset.pointBackgroundColor) { + backgroundColor = helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, backgroundColor); + } else if (dataset.backgroundColor) { + backgroundColor = dataset.backgroundColor; + } + + return backgroundColor; + }, + getPointBorderColor: function(point, index) { + var borderColor = this.chart.options.elements.point.borderColor; + var dataset = this.getDataset(); + + if (point.custom && point.custom.borderColor) { + borderColor = point.custom.borderColor; + } else if (dataset.pointBorderColor) { + borderColor = helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, borderColor); + } else if (dataset.borderColor) { + borderColor = dataset.borderColor; + } + + return borderColor; + }, + getPointBorderWidth: function(point, index) { + var borderWidth = this.chart.options.elements.point.borderWidth; + var dataset = this.getDataset(); + + if (point.custom && point.custom.borderWidth !== undefined) { + borderWidth = point.custom.borderWidth; + } else if (dataset.pointBorderWidth !== undefined) { + borderWidth = helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, borderWidth); + } else if (dataset.borderWidth !== undefined) { + borderWidth = dataset.borderWidth; + } + + return borderWidth; + }, + updateElement: function(point, index, reset) { var yScale = this.getScaleForId(this.getDataset().yAxisID); var xScale = this.getScaleForId(this.getDataset().xAxisID); @@ -197,9 +240,9 @@ // Appearance tension: point.custom && point.custom.tension ? point.custom.tension : (this.getDataset().tension || this.chart.options.elements.line.tension), radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius), - backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor), - borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor), - borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth), + backgroundColor: this.getPointBackgroundColor(point, index), + borderColor: this.getPointBorderColor(point, index), + borderWidth: this.getPointBorderWidth(point, index), // Tooltip hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius), }, @@ -312,9 +355,9 @@ var index = point._index; point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius); - point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor); - point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor); - point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth); + point._model.backgroundColor = this.getPointBackgroundColor(point, index); + point._model.borderColor = this.getPointBorderColor(point, index); + point._model.borderWidth = this.getPointBorderWidth(point, index); } }); }).call(this); diff --git a/test/controller.line.tests.js b/test/controller.line.tests.js index 7e86c99bd..20ae0328c 100644 --- a/test/controller.line.tests.js +++ b/test/controller.line.tests.js @@ -516,6 +516,114 @@ describe('Line controller tests', function() { }); }); + it ('should fall back to the line styles for points', function() { + var data = { + datasets: [{ + data: [0, 0], + label: 'dataset2', + xAxisID: 'firstXScaleID', + yAxisID: 'firstYScaleID', + + // line styles + backgroundColor: 'rgb(98, 98, 98)', + borderColor: 'rgb(8, 8, 8)', + borderWidth: 0.55, + }], + 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.line.scales.yAxes[0]); + var yScale = new VerticalScaleConstructor({ + ctx: mockContext, + options: verticalScaleConfig, + 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.line.scales.xAxes[0]); + var xScale = new HorizontalScaleConstructor({ + ctx: mockContext, + options: horizontalScaleConfig, + 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' + }, + options: { + 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, + } + }, + scales: { + xAxes: [{ + id: 'firstXScaleID' + }], + yAxes: [{ + id: 'firstYScaleID' + }] + } + }, + scales: { + firstXScaleID: xScale, + firstYScaleID: yScale, + } + }; + + var controller = new Chart.controllers.line(chart, 0); + controller.update(); + + expect(chart.data.datasets[0].metaData[0]._model.backgroundColor).toBe('rgb(98, 98, 98)'); + expect(chart.data.datasets[0].metaData[0]._model.borderColor).toBe('rgb(8, 8, 8)'); + expect(chart.data.datasets[0].metaData[0]._model.borderWidth).toBe(0.55); + }); + it('should handle number of data point changes in update', function() { var data = { datasets: [{ -- 2.47.2