diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index 434a795eba7..3388bb821d2 100644 --- a/src/plugins/plugin.filler.js +++ b/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); diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 47b1089d93d..c0730898def 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -438,12 +438,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 : diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json b/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json new file mode 100644 index 00000000000..cbe5b11ba69 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.png b/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.png new file mode 100644 index 00000000000..1dff6bf84d0 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-end.json b/test/fixtures/plugin.filler/fill-radar-boundary-end.json new file mode 100644 index 00000000000..5022cf0e8a0 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-end.png b/test/fixtures/plugin.filler/fill-radar-boundary-end.png new file mode 100644 index 00000000000..c17f9367d24 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-boundary-end.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json b/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json new file mode 100644 index 00000000000..0e0184e27dc --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.png b/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.png new file mode 100644 index 00000000000..7a4cc427345 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.json b/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.json index e5c4b2f8009..4dde04f2d6f 100644 --- a/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.json +++ b/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] diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png b/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png index bff65ad3c30..05f8f345015 100644 Binary files a/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png and b/test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin.json b/test/fixtures/plugin.filler/fill-radar-boundary-origin.json index 0cc32b4a93a..024ba5f2c49 100644 --- a/test/fixtures/plugin.filler/fill-radar-boundary-origin.json +++ b/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] diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin.png b/test/fixtures/plugin.filler/fill-radar-boundary-origin.png index 82b1f60478d..af1725f910c 100644 Binary files a/test/fixtures/plugin.filler/fill-radar-boundary-origin.png and b/test/fixtures/plugin.filler/fill-radar-boundary-origin.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json b/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json new file mode 100644 index 00000000000..5048a0fdac9 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.png b/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.png new file mode 100644 index 00000000000..8be3f232cc2 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-start.json b/test/fixtures/plugin.filler/fill-radar-boundary-start.json new file mode 100644 index 00000000000..1801c9a68a9 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-start.png b/test/fixtures/plugin.filler/fill-radar-boundary-start.png new file mode 100644 index 00000000000..82b1f60478d Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-boundary-start.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-dataset-border.json b/test/fixtures/plugin.filler/fill-radar-dataset-border.json new file mode 100644 index 00000000000..0ce6d938727 --- /dev/null +++ b/test/fixtures/plugin.filler/fill-radar-dataset-border.json @@ -0,0 +1,53 @@ +{ + "config": { + "type": "radar", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"], + "datasets": [{ + "backgroundColor": "rgba(255, 0, 0, 0.25)", + "data": ["NaN", "NaN", 0, -1, 0, 1, 0, -1, 0], + "fill": 1 + }, { + "backgroundColor": "rgba(0, 255, 0, 0.25)", + "data": [1, 0, "NaN", 1, 0, "NaN", -1, 0, 1], + "fill": "+1" + }, { + "backgroundColor": "rgba(0, 0, 255, 0.25)", + "data": [0, 2, 0, -2, 0, 2, 0], + "fill": 3 + }, { + "backgroundColor": "rgba(255, 0, 255, 0.25)", + "data": [2, 0, -2, 0, 2, 0, -2, 0, 2], + "fill": "-2" + }, { + "backgroundColor": "rgba(255, 255, 0, 0.25)", + "data": [3, 1, -1, -3, -1, 1, 3, 1, -1], + "fill": "-1" + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scale": { + "display": false + }, + "elements": { + "point": { + "radius": 0 + }, + "line": { + "borderColor": "black", + "borderWidth": 5, + "tension": 0 + } + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 256 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-dataset-border.png b/test/fixtures/plugin.filler/fill-radar-dataset-border.png new file mode 100644 index 00000000000..fbc4e772c11 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-dataset-border.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-dataset-spline.json b/test/fixtures/plugin.filler/fill-radar-dataset-spline.json new file mode 100644 index 00000000000..32f09a703ca --- /dev/null +++ b/test/fixtures/plugin.filler/fill-radar-dataset-spline.json @@ -0,0 +1,52 @@ +{ + "config": { + "type": "radar", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"], + "datasets": [{ + "backgroundColor": "rgba(255, 0, 0, 0.25)", + "data": ["NaN", "NaN", 0, -1, 0, 1, 0, -1, 0], + "fill": 1 + }, { + "backgroundColor": "rgba(0, 255, 0, 0.25)", + "data": [1, 0, "NaN", 1, 0, "NaN", -1, 0, 1], + "fill": "+1" + }, { + "backgroundColor": "rgba(0, 0, 255, 0.25)", + "data": [0, 2, 0, -2, 0, 2, 0], + "fill": 3 + }, { + "backgroundColor": "rgba(255, 0, 255, 0.25)", + "data": [2, 0, -2, 0, 2, 0, -2, 0, 2], + "fill": "-2" + }, { + "backgroundColor": "rgba(255, 255, 0, 0.25)", + "data": [3, 1, -1, -3, -1, 1, 3, 1, -1], + "fill": "-1" + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scale": { + "display": false + }, + "elements": { + "point": { + "radius": 0 + }, + "line": { + "borderColor": "transparent", + "tension": 0.5 + } + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 256 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-dataset-spline.png b/test/fixtures/plugin.filler/fill-radar-dataset-spline.png new file mode 100644 index 00000000000..3dbc538656f Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-dataset-spline.png differ diff --git a/test/fixtures/plugin.filler/fill-radar-dataset.json b/test/fixtures/plugin.filler/fill-radar-dataset.json new file mode 100644 index 00000000000..b0f40bc1212 --- /dev/null +++ b/test/fixtures/plugin.filler/fill-radar-dataset.json @@ -0,0 +1,52 @@ +{ + "config": { + "type": "radar", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"], + "datasets": [{ + "backgroundColor": "rgba(255, 0, 0, 0.25)", + "data": ["NaN", "NaN", 0, -1, 0, 1, 0, -1, 0], + "fill": 1 + }, { + "backgroundColor": "rgba(0, 255, 0, 0.25)", + "data": [1, 0, "NaN", 1, 0, "NaN", -1, 0, 1], + "fill": "+1" + }, { + "backgroundColor": "rgba(0, 0, 255, 0.25)", + "data": [0, 2, 0, -2, 0, 2, 0], + "fill": 3 + }, { + "backgroundColor": "rgba(255, 0, 255, 0.25)", + "data": [2, 0, -2, 0, 2, 0, -2, 0, 2], + "fill": "-2" + }, { + "backgroundColor": "rgba(255, 255, 0, 0.25)", + "data": [3, 1, -1, -3, -1, 1, 3, 1, -1], + "fill": "-1" + }] + }, + "options": { + "responsive": false, + "legend": false, + "title": false, + "scale": { + "display": false + }, + "elements": { + "point": { + "radius": 0 + }, + "line": { + "borderColor": "transparent", + "tension": 0 + } + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 256 + } + } +} diff --git a/test/fixtures/plugin.filler/fill-radar-dataset.png b/test/fixtures/plugin.filler/fill-radar-dataset.png new file mode 100644 index 00000000000..450ce2e0a73 Binary files /dev/null and b/test/fixtures/plugin.filler/fill-radar-dataset.png differ