From: Evert Timberg <evert.timberg@gmail.com>
Date: Sat, 9 Jan 2016 19:39:43 +0000 (-0500)
Subject: Add template option for point labels + test + doc update
X-Git-Tag: v2.0.0~72^2~1
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=5070059ac10b16e5afb2e62c9c8fb8fcfd3f5161;p=thirdparty%2FChart.js.git

Add template option for point labels + test + doc update
---

diff --git a/docs/01-Scales.md b/docs/01-Scales.md
index 55f797cf0..1c2a43137 100644
--- a/docs/01-Scales.md
+++ b/docs/01-Scales.md
@@ -276,6 +276,11 @@ The radial linear scale extends the core scale class with the following tick tem
 
 		//String - Point label font colour
 		fontColor: "#666",
+
+		//Function - Used to determine point labels to show in scale
+		callback: function(pointLabel) {
+			return pointLabel;
+		}
 	},
 }
 ```
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index 7d901aaf0..a25857b9e 100644
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -46,6 +46,11 @@
 
 			//String - Point label font colour
 			fontColor: "#666",
+
+			//Function - Used to convert point labels
+			callback: function(label) {
+				return label;
+			}
 		},
 	};
 
@@ -171,6 +176,12 @@
 
 			this.zeroLineIndex = this.ticks.indexOf(0);
 		},
+		convertTicksToLabels: function() {
+			Chart.Scale.prototype.convertTicksToLabels.call(this);
+
+			// Point labels
+			this.pointLabels = this.chart.data.labels.map(this.options.pointLabels.callback, this);
+		},
 		getLabelForIndex: function(index, datasetIndex) {
 			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 		},
@@ -229,7 +240,7 @@
 			for (i = 0; i < this.getValueCount(); i++) {
 				// 5px to space the text slightly out - similar to what we do in the draw function.
 				pointPosition = this.getPointPosition(i, largestPossibleRadius);
-				textWidth = this.ctx.measureText(this.options.ticks.callback(this.chart.data.labels[i])).width + 5;
+				textWidth = this.ctx.measureText(this.options.ticks.callback(this.pointLabels[i])).width + 5;
 				if (i === 0 || i === this.getValueCount() / 2) {
 					// If we're at index zero, or exactly the middle, we're at exactly the top/bottom
 					// of the radar chart, so text will be aligned centrally, so we'll half it and compare
@@ -389,8 +400,8 @@
 						ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
 						ctx.fillStyle = this.options.pointLabels.fontColor;
 
-						var labelsCount = this.chart.data.labels.length,
-							halfLabelsCount = this.chart.data.labels.length / 2,
+						var labelsCount = this.pointLabels.length,
+							halfLabelsCount = this.pointLabels.length / 2,
 							quarterLabelsCount = halfLabelsCount / 2,
 							upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
 							exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
@@ -413,7 +424,7 @@
 							ctx.textBaseline = 'top';
 						}
 
-						ctx.fillText(this.chart.data.labels[i], pointLabelPosition.x, pointLabelPosition.y);
+						ctx.fillText(this.pointLabels[i], pointLabelPosition.x, pointLabelPosition.y);
 					}
 				}
 			}
diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js
index b3eeebd87..61c59021c 100644
--- a/test/scale.radialLinear.tests.js
+++ b/test/scale.radialLinear.tests.js
@@ -32,6 +32,7 @@ describe('Test the radial linear scale', function() {
 				fontFamily: "'Arial'",
 				fontSize: 10,
 				fontStyle: "normal",
+				callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
 			},
 			position: "chartArea",
 			scaleLabel: {
@@ -65,6 +66,7 @@ describe('Test the radial linear scale', function() {
 
 		// Is this actually a function
 		expect(defaultConfig.ticks.callback).toEqual(jasmine.any(Function));
+		expect(defaultConfig.pointLabels.callback).toEqual(jasmine.any(Function));
 	});
 
 	it('Should correctly determine the max & min data values', function() {
@@ -332,7 +334,7 @@ describe('Test the radial linear scale', function() {
 				yAxisID: scaleID,
 				data: [10, 5, 0, 25, 78]
 			}],
-			labels: []
+			labels: ['label1', 'label2', 'label3', 'label4', 'label5']
 		};
 
 		var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
@@ -355,6 +357,40 @@ describe('Test the radial linear scale', function() {
 
 		// Just the index
 		expect(scale.ticks).toEqual(['0', '1', '2', '3', '4']);
+		expect(scale.pointLabels).toEqual(['label1', 'label2', 'label3', 'label4', 'label5']);
+	});
+
+	it('Should build point labels using the user supplied callback', function() {
+		var scaleID = 'myScale';
+
+		var mockData = {
+			datasets: [{
+				yAxisID: scaleID,
+				data: [10, 5, 0, 25, 78]
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4', 'label5']
+		};
+
+		var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		config.pointLabels.callback = function(value, index) {
+			return index.toString();
+		};
+
+		var mockContext = window.createMockContext();
+		var Constructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scale = new Constructor({
+			ctx: mockContext,
+			options: config,
+			chart: {
+				data: mockData
+			},
+			id: scaleID,
+		});
+
+		scale.update(200, 300);
+
+		// Just the index
+		expect(scale.pointLabels).toEqual(['0', '1', '2', '3', '4']);
 	});
 
 	it('should correctly set the center point', function() {