Fix line segments with alignToPixel (#9042)

This commit is contained in:
Jukka Kurkela 2021-05-07 04:06:40 +03:00 committed by GitHub
parent 1a1e677699
commit 137b51d87d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 0 deletions

View File

@ -100,6 +100,11 @@ export function _boundSegment(segment, points, bounds) {
}
value = normalize(point[property]);
if (value === prevValue) {
continue;
}
inside = between(value, startBound, endBound);
if (subStart === null && shouldStart()) {

View File

@ -0,0 +1,46 @@
module.exports = {
config: {
type: 'line',
data: {
datasets: [
{
data: [
{x: 0, y: 0},
{x: 1, y: 20},
{x: 1.00001, y: 30},
{x: 2, y: 100},
{x: 2.00001, y: 100}
],
backgroundColor: '#FF000070',
borderColor: 'black',
radius: 0,
segment: {
borderDash: ctx => ctx.p0.parsed.x > 1 ? [10, 5] : undefined,
},
fill: true
}
]
},
options: {
plugins: {
legend: false
},
scales: {
x: {
type: 'linear',
alignToPixels: true,
display: false
},
y: {
display: false
}
}
}
},
options: {
canvas: {
width: 300,
height: 240
}
}
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -49,5 +49,13 @@ describe('helpers.segments', function() {
{start: 3, end: 4, loop: false, style: undefined},
]);
});
it('should find correct segments when there are multiple points with same property value', function() {
const repeatedPoints = [{x: 1, y: 5}, {x: 1, y: 6}, {x: 2, y: 5}, {x: 2, y: 6}, {x: 3, y: 5}, {x: 3, y: 6}, {x: 3, y: 7}];
expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 1, end: 1.1})).toEqual([{start: 0, end: 2, loop: false, style: undefined}]);
expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 2, end: 2.1})).toEqual([{start: 2, end: 4, loop: false, style: undefined}]);
expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 2, end: 3.1})).toEqual([{start: 2, end: 6, loop: false, style: undefined}]);
expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 0, end: 8})).toEqual([{start: 0, end: 6, loop: false, style: undefined}]);
});
});
});