Add template option for point labels + test + doc update

diff --git a/docs/01-Scales.md b/docs/01-Scales.md
index 55f797cf0ae12197630c1547c8d424c62eb9c117..1c2a4313733abfcab8dacbe09cc852e68ee4160c 100644 (file)
--- 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 7d901aaf0b91c2f42e72733e0b5edebaf2829969..a25857b9e2961d12e1c5a716bc73fbf181842767 100644 (file)
--- 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 b3eeebd8775b95ae87478f15278cb7dc9b93b430..61c59021c71f5da38914e7ed64c95763aa2f9cd0 100644 (file)
--- 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() {