Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 9b1306a

Browse filesBrowse files
authored
feature: make above/below colors in filler plugin work with pivoted line charts (#12058)
* adapted filler plugin to make above/below colors work with pivoted line charts resolved conflicts in src/plugins/plugin.filler/filler.drawing.js * fixed doFill; added tests
1 parent 817bec0 commit 9b1306a
Copy full SHA for 9b1306a

File tree

Expand file treeCollapse file tree

3 files changed

+93
-7
lines changed
Filter options
Expand file treeCollapse file tree

3 files changed

+93
-7
lines changed

‎src/plugins/plugin.filler/filler.drawing.js

Copy file name to clipboardExpand all lines: src/plugins/plugin.filler/filler.drawing.js
+47-7Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,24 @@ function doFill(ctx, cfg) {
2424

2525
ctx.save();
2626

27-
if (property === 'x' && below !== above) {
28-
clipVertical(ctx, target, area.top);
29-
fill(ctx, {line, target, color: above, scale, property, clip});
30-
ctx.restore();
31-
ctx.save();
32-
clipVertical(ctx, target, area.bottom);
27+
let fillColor = below;
28+
if (below !== above) {
29+
if (property === 'x') {
30+
clipVertical(ctx, target, area.top);
31+
fill(ctx, {line, target, color: above, scale, property, clip});
32+
ctx.restore();
33+
ctx.save();
34+
clipVertical(ctx, target, area.bottom);
35+
} else if (property === 'y') {
36+
clipHorizontal(ctx, target, area.left);
37+
fill(ctx, {line, target, color: below, scale, property, clip});
38+
ctx.restore();
39+
ctx.save();
40+
clipHorizontal(ctx, target, area.right);
41+
fillColor = above;
42+
}
3343
}
34-
fill(ctx, {line, target, color: below, scale, property, clip});
44+
fill(ctx, {line, target, color: fillColor, scale, property, clip});
3545

3646
ctx.restore();
3747
}
@@ -66,6 +76,36 @@ function clipVertical(ctx, target, clipY) {
6676
ctx.clip();
6777
}
6878

79+
function clipHorizontal(ctx, target, clipX) {
80+
const {segments, points} = target;
81+
let first = true;
82+
let lineLoop = false;
83+
84+
ctx.beginPath();
85+
for (const segment of segments) {
86+
const {start, end} = segment;
87+
const firstPoint = points[start];
88+
const lastPoint = points[_findSegmentEnd(start, end, points)];
89+
if (first) {
90+
ctx.moveTo(firstPoint.x, firstPoint.y);
91+
first = false;
92+
} else {
93+
ctx.lineTo(clipX, firstPoint.y);
94+
ctx.lineTo(firstPoint.x, firstPoint.y);
95+
}
96+
lineLoop = !!target.pathSegment(ctx, segment, {move: lineLoop});
97+
if (lineLoop) {
98+
ctx.closePath();
99+
} else {
100+
ctx.lineTo(clipX, lastPoint.y);
101+
}
102+
}
103+
104+
ctx.lineTo(clipX, target.first().y);
105+
ctx.closePath();
106+
ctx.clip();
107+
}
108+
69109
function fill(ctx, cfg) {
70110
const {line, target, property, color, scale, clip} = cfg;
71111
const segments = _segments(line, target, property);
+46Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
module.exports = {
2+
config: {
3+
type: 'line',
4+
data: {
5+
labels: [1, 2, 3, 4],
6+
datasets: [
7+
{
8+
data: [200, 400, 200, 400],
9+
cubicInterpolationMode: 'monotone',
10+
tension: 0.4,
11+
spanGaps: true,
12+
borderColor: 'blue',
13+
pointRadius: 0,
14+
fill: {
15+
target: 1,
16+
below: 'rgba(255, 0, 0, 0.4)',
17+
above: 'rgba(53, 221, 53, 0.4)',
18+
}
19+
},
20+
{
21+
data: [400, 200, 400, 200],
22+
cubicInterpolationMode: 'monotone',
23+
tension: 0.4,
24+
spanGaps: true,
25+
borderColor: 'orange',
26+
pointRadius: 0,
27+
},
28+
]
29+
},
30+
options: {
31+
indexAxis: 'y',
32+
// maintainAspectRatio: false,
33+
plugins: {
34+
filler: {
35+
propagate: false
36+
},
37+
datalabels: {
38+
display: false
39+
},
40+
legend: {
41+
display: false
42+
},
43+
}
44+
}
45+
}
46+
};
Loading

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.