Split radial scale lineArc setting into a combination of existing and…

… new settings. gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines #3082 pointLabels.display is a new option that toggles the display of point labels. The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings. This required changing the default polar area config.
chartjs · Jan 15, 2017 · 941d94d · 941d94d
1 parent 27b2e33
commit 941d94d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/docs/02-Scales.md b/docs/02-Scales.md
@@ -310,14 +310,14 @@ The following additional configuration options are provided by the radial linear
 
 Name | Type | Default | Description
 --- | --- | --- | ---
-lineArc | Boolean | false | If true, circular arcs are used else straight lines are used. The former is used by the polar area chart and the latter by the radar chart
+*gridLines*.circular | Boolean | false | if true, radial lines are circular. If false, they are straight lines connecting the the different angle line locations.
 angleLines | Object | - | See the Angle Line Options section below for details.
 pointLabels | Object | - | See the Point Label Options section below for details.
 ticks | Object | - | See the Ticks table below for options.
 
 #### Angle Line Options
 
-The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `lineArc` is false.
+The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `angleLines.display` is true.
 
 Name | Type | Default | Description
 --- | --- | --- | ---
@@ -327,10 +327,11 @@ lineWidth | Number | 1 | Width of angled lines
 
 #### Point Label Options
 
-The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `lineArc` is false.
+The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `pointLabels.display` is true.
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+display | Boolean | true | If true, point labels are shown
 callback | Function | - | Callback function to transform data label to axis label
 fontColor | Color | '#666' | Font color
 fontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family to render

diff --git a/docs/06-Polar-Area-Chart.md b/docs/06-Polar-Area-Chart.md
@@ -79,7 +79,6 @@ Name | Type | Default | Description
 startAngle | Number | -0.5 * Math.PI | Sets the starting angle for the first item in a dataset
 scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid.
 *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale).
-*scale*.lineArc | Boolean | true | When true, lines are circular.
 *animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart.
 *animation*.animateScale | Boolean | true | If true, will animate scaling the chart.
 *legend*.*labels*.generateLabels | Function | `function(data) {} ` | Returns labels for each the legend

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
@@ -8,7 +8,15 @@ module.exports = function(Chart) {
 
 		scale: {
 			type: 'radialLinear',
-			lineArc: true, // so that lines are circular
+			angleLines: {
+				display: false
+			},
+			gridLines: {
+				circular: true
+			},
+			pointLabels: {
+				display: false
+			},
 			ticks: {
 				beginAtZero: true
 			}

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -10,7 +10,6 @@ module.exports = function(Chart) {
 
 		// Boolean - Whether to animate scaling the chart from the centre
 		animate: true,
-		lineArc: false,
 		position: 'chartArea',
 
 		angleLines: {
@@ -19,6 +18,10 @@ module.exports = function(Chart) {
 			lineWidth: 1
 		},
 
+		gridLines: {
+			circular: false
+		},
+
 		// label settings
 		ticks: {
 			// Boolean - Show a backdrop to the scale label
@@ -37,6 +40,9 @@ module.exports = function(Chart) {
 		},
 
 		pointLabels: {
+			// Boolean - if true, show point labels
+			display: true,
+
 			// Number - Point label font size in pixels
 			fontSize: 10,
 
@@ -48,7 +54,8 @@ module.exports = function(Chart) {
 	};
 
 	function getValueCount(scale) {
-		return !scale.options.lineArc ? scale.chart.data.labels.length : 0;
+		var opts = scale.options;
+		return opts.angleLines.display || opts.pointLabels.display ? scale.chart.data.labels.length : 0;
 	}
 
 	function getPointLabelFontOptions(scale) {
@@ -253,19 +260,22 @@ module.exports = function(Chart) {
 				ctx.stroke();
 				ctx.closePath();
 			}
-			// Extra 3px out for some label spacing
-			var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5);
 
-			// Keep this in loop since we may support array properties here
-			var pointLabelFontColor = getValueOrDefault(pointLabelOpts.fontColor, globalDefaults.defaultFontColor);
-			ctx.font = plFont.font;
-			ctx.fillStyle = pointLabelFontColor;
+			if (pointLabelOpts.display) {
+				// Extra 3px out for some label spacing
+				var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5);
 
-			var angleRadians = scale.getIndexAngle(i);
-			var angle = helpers.toDegrees(angleRadians);
-			ctx.textAlign = getTextAlignForAngle(angle);
-			adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition);
-			fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);
+				// Keep this in loop since we may support array properties here
+				var pointLabelFontColor = getValueOrDefault(pointLabelOpts.fontColor, globalDefaults.defaultFontColor);
+				ctx.font = plFont.font;
+				ctx.fillStyle = pointLabelFontColor;
+
+				var angleRadians = scale.getIndexAngle(i);
+				var angle = helpers.toDegrees(angleRadians);
+				ctx.textAlign = getTextAlignForAngle(angle);
+				adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition);
+				fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);
+			}
 		}
 	}
 
@@ -274,7 +284,7 @@ module.exports = function(Chart) {
 		ctx.strokeStyle = helpers.getValueAtIndexOrDefault(gridLineOpts.color, index - 1);
 		ctx.lineWidth = helpers.getValueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
 
-		if (scale.options.lineArc) {
+		if (scale.options.gridLines.circular) {
 			// Draw circular arcs between the points
 			ctx.beginPath();
 			ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2);
@@ -365,10 +375,10 @@ module.exports = function(Chart) {
 			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 		},
 		fit: function() {
-			if (this.options.lineArc) {
-				fit(this);
-			} else {
+			if (this.options.pointLabels.display) {
 				fitWithPointLabels(this);
+			} else {
+				fit(this);
 			}
 		},
 		/**
@@ -502,7 +512,7 @@ module.exports = function(Chart) {
 					}
 				});
 
-				if (!opts.lineArc) {
+				if (opts.angleLines.display || opts.pointLabels.display) {
 					drawPointLabels(me);
 				}
 			}

diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js
@@ -17,6 +17,7 @@ describe('Test the radial linear scale', function() {
 			animate: true,
 			display: true,
 			gridLines: {
+				circular: false,
 				color: 'rgba(0, 0, 0, 0.1)',
 				drawBorder: true,
 				drawOnChartArea: true,
@@ -30,8 +31,8 @@ describe('Test the radial linear scale', function() {
 				borderDash: [],
 				borderDashOffset: 0.0
 			},
-			lineArc: false,
 			pointLabels: {
+				display: true,
 				fontSize: 10,
 				callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
 			},