Skip to content

Commit cfcdccc

Browse files
nagixsimonbrunel
nagix
authored and
simonbrunel
committed
Support boundary filling modes in radialLinear scale (#6281)
1 parent 7d8526f commit cfcdccc

22 files changed

+450
-12
lines changed

‎src/plugins/plugin.filler.js

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ var mappers = {
3737
var x = boundary ? boundary.x : null;
3838
var y = boundary ? boundary.y : null;
3939

40+
if (helpers.isArray(boundary)) {
41+
return function(point, i) {
42+
return boundary[i];
43+
};
44+
}
45+
4046
return function(point) {
4147
return {
4248
x: x === null ? point.x : x,
@@ -96,7 +102,7 @@ function decodeFill(el, index, count) {
96102
}
97103
}
98104

99-
function computeBoundary(source) {
105+
function computeLinearBoundary(source) {
100106
var model = source.el._model || {};
101107
var scale = source.el._scale || {};
102108
var fill = source.fill;
@@ -117,8 +123,6 @@ function computeBoundary(source) {
117123
target = model.scaleTop === undefined ? scale.top : model.scaleTop;
118124
} else if (model.scaleZero !== undefined) {
119125
target = model.scaleZero;
120-
} else if (scale.getBasePosition) {
121-
target = scale.getBasePosition();
122126
} else if (scale.getBasePixel) {
123127
target = scale.getBasePixel();
124128
}
@@ -140,6 +144,44 @@ function computeBoundary(source) {
140144
return null;
141145
}
142146

147+
function computeCircularBoundary(source) {
148+
var scale = source.el._scale;
149+
var options = scale.options;
150+
var length = scale.chart.data.labels.length;
151+
var fill = source.fill;
152+
var target = [];
153+
var start, end, center, i, point;
154+
155+
if (!length) {
156+
return null;
157+
}
158+
159+
start = options.ticks.reverse ? scale.max : scale.min;
160+
end = options.ticks.reverse ? scale.min : scale.max;
161+
center = scale.getPointPositionForValue(0, start);
162+
for (i = 0; i < length; ++i) {
163+
point = fill === 'start' || fill === 'end'
164+
? scale.getPointPositionForValue(i, fill === 'start' ? start : end)
165+
: scale.getBasePosition(i);
166+
if (options.gridLines.circular) {
167+
point.cx = center.x;
168+
point.cy = center.y;
169+
point.angle = scale.getIndexAngle(i) - Math.PI / 2;
170+
}
171+
target.push(point);
172+
}
173+
return target;
174+
}
175+
176+
function computeBoundary(source) {
177+
var scale = source.el._scale || {};
178+
179+
if (scale.getPointPositionForValue) {
180+
return computeCircularBoundary(source);
181+
}
182+
return computeLinearBoundary(source);
183+
}
184+
143185
function resolveTarget(sources, index, propagate) {
144186
var source = sources[index];
145187
var fill = source.fill;
@@ -191,7 +233,7 @@ function isDrawable(point) {
191233
}
192234

193235
function drawArea(ctx, curve0, curve1, len0, len1) {
194-
var i;
236+
var i, cx, cy, r;
195237

196238
if (!len0 || !len1) {
197239
return;
@@ -203,6 +245,16 @@ function drawArea(ctx, curve0, curve1, len0, len1) {
203245
helpers.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
204246
}
205247

248+
if (curve1[0].angle !== undefined) {
249+
cx = curve1[0].cx;
250+
cy = curve1[0].cy;
251+
r = Math.sqrt(Math.pow(curve1[0].x - cx, 2) + Math.pow(curve1[0].y - cy, 2));
252+
for (i = len1 - 1; i > 0; --i) {
253+
ctx.arc(cx, cy, r, curve1[i].angle, curve1[i - 1].angle, true);
254+
}
255+
return;
256+
}
257+
206258
// joining the two area curves
207259
ctx.lineTo(curve1[len1 - 1].x, curve1[len1 - 1].y);
208260

‎src/scales/scale.radialLinear.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -437,12 +437,12 @@ module.exports = LinearScaleBase.extend({
437437
return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
438438
},
439439

440-
getBasePosition: function() {
440+
getBasePosition: function(index) {
441441
var me = this;
442442
var min = me.min;
443443
var max = me.max;
444444

445-
return me.getPointPositionForValue(0,
445+
return me.getPointPositionForValue(index || 0,
446446
me.beginAtZero ? 0 :
447447
min < 0 && max < 0 ? max :
448448
min > 0 && max > 0 ? min :

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
6+
"datasets": [{
7+
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
9+
}, {
10+
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
12+
}, {
13+
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
15+
}, {
16+
"backgroundColor": "rgba(128, 0, 128, 0.25)",
17+
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
18+
}]
19+
},
20+
"options": {
21+
"responsive": false,
22+
"legend": false,
23+
"title": false,
24+
"scale": {
25+
"display": false,
26+
"gridLines": {
27+
"circular": true
28+
}
29+
},
30+
"elements": {
31+
"point": {
32+
"radius": 0
33+
},
34+
"line": {
35+
"borderColor": "transparent",
36+
"fill": "end"
37+
}
38+
}
39+
}
40+
},
41+
"options": {
42+
"canvas": {
43+
"height": 256,
44+
"width": 256
45+
}
46+
}
47+
}

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

19.1 KB
Loading

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
6+
"datasets": [{
7+
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
9+
}, {
10+
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
12+
}, {
13+
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
15+
}, {
16+
"backgroundColor": "rgba(128, 0, 128, 0.25)",
17+
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
18+
}]
19+
},
20+
"options": {
21+
"responsive": false,
22+
"legend": false,
23+
"title": false,
24+
"scale": {
25+
"display": false
26+
},
27+
"elements": {
28+
"point": {
29+
"radius": 0
30+
},
31+
"line": {
32+
"borderColor": "transparent",
33+
"fill": "end"
34+
}
35+
}
36+
}
37+
},
38+
"options": {
39+
"canvas": {
40+
"height": 256,
41+
"width": 256
42+
}
43+
}
44+
}

‎test/fixtures/plugin.filler/fill-radar-boundary-end.png

18.6 KB
Loading

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
6+
"datasets": [{
7+
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
9+
}, {
10+
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
12+
}, {
13+
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
15+
}, {
16+
"backgroundColor": "rgba(128, 0, 128, 0.25)",
17+
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
18+
}]
19+
},
20+
"options": {
21+
"responsive": false,
22+
"legend": false,
23+
"title": false,
24+
"scale": {
25+
"display": false,
26+
"gridLines": {
27+
"circular": true
28+
}
29+
},
30+
"elements": {
31+
"point": {
32+
"radius": 0
33+
},
34+
"line": {
35+
"borderColor": "transparent",
36+
"fill": "origin"
37+
}
38+
}
39+
}
40+
},
41+
"options": {
42+
"canvas": {
43+
"height": 256,
44+
"width": 256
45+
}
46+
}
47+
}

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

15.3 KB
Loading

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
66
"datasets": [{
77
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8-
"data": [null, null, 2, 4, 2, 1, -1, 1, 2]
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
99
}, {
1010
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11-
"data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
1212
}, {
1313
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14-
"data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
1515
}, {
1616
"backgroundColor": "rgba(128, 0, 128, 0.25)",
1717
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]

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

4.75 KB
Loading

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
66
"datasets": [{
77
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8-
"data": [null, null, 2, 4, 2, 1, -1, 1, 2]
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
99
}, {
1010
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11-
"data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
1212
}, {
1313
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14-
"data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
1515
}, {
1616
"backgroundColor": "rgba(128, 0, 128, 0.25)",
1717
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]

‎test/fixtures/plugin.filler/fill-radar-boundary-origin.png

5.26 KB
Loading

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
6+
"datasets": [{
7+
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
9+
}, {
10+
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
12+
}, {
13+
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
15+
}, {
16+
"backgroundColor": "rgba(128, 0, 128, 0.25)",
17+
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
18+
}]
19+
},
20+
"options": {
21+
"responsive": false,
22+
"legend": false,
23+
"title": false,
24+
"scale": {
25+
"display": false,
26+
"gridLines": {
27+
"circular": true
28+
}
29+
},
30+
"elements": {
31+
"point": {
32+
"radius": 0
33+
},
34+
"line": {
35+
"borderColor": "transparent",
36+
"fill": "start"
37+
}
38+
}
39+
}
40+
},
41+
"options": {
42+
"canvas": {
43+
"height": 256,
44+
"width": 256
45+
}
46+
}
47+
}

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

14.3 KB
Loading

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
6+
"datasets": [{
7+
"backgroundColor": "rgba(0, 0, 192, 0.25)",
8+
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
9+
}, {
10+
"backgroundColor": "rgba(0, 192, 0, 0.25)",
11+
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
12+
}, {
13+
"backgroundColor": "rgba(192, 0, 0, 0.25)",
14+
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
15+
}, {
16+
"backgroundColor": "rgba(128, 0, 128, 0.25)",
17+
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
18+
}]
19+
},
20+
"options": {
21+
"responsive": false,
22+
"legend": false,
23+
"title": false,
24+
"scale": {
25+
"display": false
26+
},
27+
"elements": {
28+
"point": {
29+
"radius": 0
30+
},
31+
"line": {
32+
"borderColor": "transparent",
33+
"fill": "start"
34+
}
35+
}
36+
}
37+
},
38+
"options": {
39+
"canvas": {
40+
"height": 256,
41+
"width": 256
42+
}
43+
}
44+
}

‎test/fixtures/plugin.filler/fill-radar-boundary-start.png

9.89 KB
Loading

0 commit comments

Comments
 (0)