Support boundary filling modes in radialLinear scale (#6281)

src/plugins/plugin.filler.js

@@ -37,6 +37,12 @@ var mappers = {
 		var x = boundary ? boundary.x : null;
 		var y = boundary ? boundary.y : null;
 
+		if (helpers.isArray(boundary)) {
+			return function(point, i) {
+				return boundary[i];
+			};
+		}
+
 		return function(point) {
 			return {
 				x: x === null ? point.x : x,
@@ -96,7 +102,7 @@ function decodeFill(el, index, count) {
 	}
 }
 
-function computeBoundary(source) {
+function computeLinearBoundary(source) {
 	var model = source.el._model || {};
 	var scale = source.el._scale || {};
 	var fill = source.fill;
@@ -117,8 +123,6 @@ function computeBoundary(source) {
 		target = model.scaleTop === undefined ? scale.top : model.scaleTop;
 	} else if (model.scaleZero !== undefined) {
 		target = model.scaleZero;
-	} else if (scale.getBasePosition) {
-		target = scale.getBasePosition();
 	} else if (scale.getBasePixel) {
 		target = scale.getBasePixel();
 	}
@@ -140,6 +144,44 @@ function computeBoundary(source) {
 	return null;
 }
 
+function computeCircularBoundary(source) {
+	var scale = source.el._scale;
+	var options = scale.options;
+	var length = scale.chart.data.labels.length;
+	var fill = source.fill;
+	var target = [];
+	var start, end, center, i, point;
+
+	if (!length) {
+		return null;
+	}
+
+	start = options.ticks.reverse ? scale.max : scale.min;
+	end = options.ticks.reverse ? scale.min : scale.max;
+	center = scale.getPointPositionForValue(0, start);
+	for (i = 0; i < length; ++i) {
+		point = fill === 'start' || fill === 'end'
+			? scale.getPointPositionForValue(i, fill === 'start' ? start : end)
+			: scale.getBasePosition(i);
+		if (options.gridLines.circular) {
+			point.cx = center.x;
+			point.cy = center.y;
+			point.angle = scale.getIndexAngle(i) - Math.PI / 2;
+		}
+		target.push(point);
+	}
+	return target;
+}
+
+function computeBoundary(source) {
+	var scale = source.el._scale || {};
+
+	if (scale.getPointPositionForValue) {
+		return computeCircularBoundary(source);
+	}
+	return computeLinearBoundary(source);
+}
+
 function resolveTarget(sources, index, propagate) {
 	var source = sources[index];
 	var fill = source.fill;
@@ -191,7 +233,7 @@ function isDrawable(point) {
 }
 
 function drawArea(ctx, curve0, curve1, len0, len1) {
-	var i;
+	var i, cx, cy, r;
 
 	if (!len0 || !len1) {
 		return;
@@ -203,6 +245,16 @@ function drawArea(ctx, curve0, curve1, len0, len1) {
 		helpers.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
 	}
 
+	if (curve1[0].angle !== undefined) {
+		cx = curve1[0].cx;
+		cy = curve1[0].cy;
+		r = Math.sqrt(Math.pow(curve1[0].x - cx, 2) + Math.pow(curve1[0].y - cy, 2));
+		for (i = len1 - 1; i > 0; --i) {
+			ctx.arc(cx, cy, r, curve1[i].angle, curve1[i - 1].angle, true);
+		}
+		return;
+	}
+
 	// joining the two area curves
 	ctx.lineTo(curve1[len1 - 1].x, curve1[len1 - 1].y);
 

src/scales/scale.radialLinear.js

@@ -437,12 +437,12 @@ module.exports = LinearScaleBase.extend({
 		return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
 	},
 
-	getBasePosition: function() {
+	getBasePosition: function(index) {
 		var me = this;
 		var min = me.min;
 		var max = me.max;
 
-		return me.getPointPositionForValue(0,
+		return me.getPointPositionForValue(index || 0,
 			me.beginAtZero ? 0 :
 			min < 0 && max < 0 ? max :
 			min > 0 && max > 0 ? min :

test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json

@@ -0,0 +1,47 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+            "datasets": [{
+                "backgroundColor": "rgba(0, 0, 192, 0.25)",
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
+            }, {
+                "backgroundColor": "rgba(0, 192, 0, 0.25)",
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
+            }, {
+                "backgroundColor": "rgba(192, 0, 0, 0.25)",
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
+            }, {
+                "backgroundColor": "rgba(128, 0, 128, 0.25)",
+                "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false,
+                "gridLines": {
+                    "circular": true
+                }
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "transparent",
+                    "fill": "end"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}

test/fixtures/plugin.filler/fill-radar-boundary-end.json

@@ -0,0 +1,44 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+            "datasets": [{
+                "backgroundColor": "rgba(0, 0, 192, 0.25)",
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
+            }, {
+                "backgroundColor": "rgba(0, 192, 0, 0.25)",
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
+            }, {
+                "backgroundColor": "rgba(192, 0, 0, 0.25)",
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
+            }, {
+                "backgroundColor": "rgba(128, 0, 128, 0.25)",
+                "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "transparent",
+                    "fill": "end"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}

test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json

@@ -0,0 +1,47 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+            "datasets": [{
+                "backgroundColor": "rgba(0, 0, 192, 0.25)",
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
+            }, {
+                "backgroundColor": "rgba(0, 192, 0, 0.25)",
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
+            }, {
+                "backgroundColor": "rgba(192, 0, 0, 0.25)",
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
+            }, {
+                "backgroundColor": "rgba(128, 0, 128, 0.25)",
+                "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false,
+                "gridLines": {
+                    "circular": true
+                }
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "transparent",
+                    "fill": "origin"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}

test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.json

@@ -5,13 +5,13 @@
             "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
             "datasets": [{
                 "backgroundColor": "rgba(0, 0, 192, 0.25)",
-                "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
             }, {
                 "backgroundColor": "rgba(0, 192, 0, 0.25)",
-                "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
             }, {
                 "backgroundColor": "rgba(192, 0, 0, 0.25)",
-                "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
             }, {
                 "backgroundColor": "rgba(128, 0, 128, 0.25)",
                 "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]

test/fixtures/plugin.filler/fill-radar-boundary-origin.json

@@ -5,13 +5,13 @@
             "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
             "datasets": [{
                 "backgroundColor": "rgba(0, 0, 192, 0.25)",
-                "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
             }, {
                 "backgroundColor": "rgba(0, 192, 0, 0.25)",
-                "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
             }, {
                 "backgroundColor": "rgba(192, 0, 0, 0.25)",
-                "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
             }, {
                 "backgroundColor": "rgba(128, 0, 128, 0.25)",
                 "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]

test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json

@@ -0,0 +1,47 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+            "datasets": [{
+                "backgroundColor": "rgba(0, 0, 192, 0.25)",
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
+            }, {
+                "backgroundColor": "rgba(0, 192, 0, 0.25)",
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
+            }, {
+                "backgroundColor": "rgba(192, 0, 0, 0.25)",
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
+            }, {
+                "backgroundColor": "rgba(128, 0, 128, 0.25)",
+                "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false,
+                "gridLines": {
+                    "circular": true
+                }
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "transparent",
+                    "fill": "start"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}

test/fixtures/plugin.filler/fill-radar-boundary-start.json

@@ -0,0 +1,44 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+            "datasets": [{
+                "backgroundColor": "rgba(0, 0, 192, 0.25)",
+                "data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
+            }, {
+                "backgroundColor": "rgba(0, 192, 0, 0.25)",
+                "data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
+            }, {
+                "backgroundColor": "rgba(192, 0, 0, 0.25)",
+                "data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
+            }, {
+                "backgroundColor": "rgba(128, 0, 128, 0.25)",
+                "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "transparent",
+                    "fill": "start"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}