Implement radar span gaps

benmccann · Jul 9, 2018 · 2454c41 · 2454c41
1 parent 4098f92
commit 2454c41
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js
@@ -51,6 +51,7 @@ module.exports = function(Chart) {
 				// Model
 				_model: {
 					// Appearance
+					spanGaps: helpers.valueOrDefault(dataset.spanGaps, me.chart.options.spanGaps),
 					tension: custom.tension ? custom.tension : helpers.valueOrDefault(dataset.lineTension, lineElementOptions.tension),
 					backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
 					borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
@@ -104,6 +105,7 @@ module.exports = function(Chart) {
 				_model: {
 					x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
 					y: reset ? scale.yCenter : pointPosition.y,
+					skip: custom.skip || isNaN(pointPosition.x) || isNaN(pointPosition.y),
 
 					// Appearance
 					tension: custom.tension ? custom.tension : helpers.valueOrDefault(dataset.lineTension, me.chart.options.elements.line.tension),
@@ -128,6 +130,13 @@ module.exports = function(Chart) {
 			var points = meta.data || [];
 			var i, ilen, model, controlPoints;
 
+			// Only consider points that are drawn in case the spanGaps option is used
+			if (meta.dataset._model.spanGaps) {
+				points = points.filter(function(pt) {
+					return !pt._model.skip;
+				});
+			}
+
 			function capControlPoint(pt, min, max) {
 				return Math.max(Math.min(pt, max), min);
 			}

diff --git a/src/elements/element.line.js b/src/elements/element.line.js
@@ -34,9 +34,15 @@ module.exports = Element.extend({
 		var lastDrawnIndex = -1;
 		var index, current, previous, currentVM;
 
-		// If we are looping, adding the first point again
+		// If we are looping, adding the first non-skipped point again
 		if (me._loop && points.length) {
-			points.push(points[0]);
+			for (index = 0; index < points.length; index++) {
+				current = points[index];
+				if (!current._view.skip) {
+					points.push(current);
+					break;
+				}
+			}
 		}
 
 		ctx.save();

diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js
@@ -220,16 +220,22 @@ function doFill(ctx, points, mapper, view, color, loop) {
 	var len0 = 0;
 	var len1 = 0;
 	var i, ilen, index, p0, p1, d0, d1;
+	var loopOffset;
 
 	ctx.beginPath();
 
-	for (i = 0, ilen = (count + !!loop); i < ilen; ++i) {
+	for (i = 0, ilen = count; i < ilen; i++) {
 		index = i % count;
 		p0 = points[index]._view;
 		p1 = mapper(p0, index, view);
 		d0 = isDrawable(p0);
 		d1 = isDrawable(p1);
 
+		if (loop && loopOffset === undefined && d0) {
+			loopOffset = i + 1;
+			ilen = count + loopOffset;
+		}
+
 		if (d0 && d1) {
 			len0 = curve0.push(p0);
 			len1 = curve1.push(p1);

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -429,8 +429,8 @@ module.exports = function(Chart) {
 		getDistanceFromCenterForValue: function(value) {
 			var me = this;
 
-			if (value === null) {
-				return 0; // null always in center
+			if (value === null || isNaN(value)) {
+				return NaN; // null always in center
 			}
 
 			// Take into account half font size + the yPadding of the top value

diff --git a/test/specs/element.line.tests.js b/test/specs/element.line.tests.js
@@ -1879,6 +1879,9 @@ describe('Chart.elements.Line', function() {
 		}, {
 			name: 'lineTo',
 			args: [19, -5]
+		}, {
+			name: 'lineTo',
+			args: [5, 0]
 		}, {
 			name: 'stroke',
 			args: [],