Skip to content

Commit

Permalink
Versatile clipping for lines (#6660)
Browse files Browse the repository at this point in the history
  • Loading branch information
kurkle authored and etimberg committed Nov 2, 2019
1 parent ad26311 commit 201fe46
Show file tree
Hide file tree
Showing 16 changed files with 362 additions and 6 deletions.
2 changes: 2 additions & 0 deletions docs/charts/line.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ The line chart allows a number of properties to be specified for each dataset. T
| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
| [`clip`](#line-styling) | <code>number&#124;object</code> | - | - | `borderWidth / 2`
| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
Expand Down Expand Up @@ -117,6 +118,7 @@ The style of the line can be controlled with the following properties:
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | The line width (in pixels).
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `fill` | How to fill the area under the line. See [area charts](area.md).
| `lineTension` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
| `showLine` | If false, the line is not drawn for this dataset.
Expand Down
59 changes: 53 additions & 6 deletions src/controllers/controller.line.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,51 @@ defaults._set('line', {
}
});

function scaleClip(scale, halfBorderWidth) {
var tickOpts = scale && scale.options.ticks || {};
var reverse = tickOpts.reverse;
var min = tickOpts.min === undefined ? halfBorderWidth : 0;
var max = tickOpts.max === undefined ? halfBorderWidth : 0;
return {
start: reverse ? max : min,
end: reverse ? min : max
};
}

function defaultClip(xScale, yScale, borderWidth) {
var halfBorderWidth = borderWidth / 2;
var x = scaleClip(xScale, halfBorderWidth);
var y = scaleClip(yScale, halfBorderWidth);

return {
top: y.end,
right: x.end,
bottom: y.start,
left: x.start
};
}

function toClip(value) {
var t, r, b, l;

if (helpers.isObject(value)) {
t = value.top;
r = value.right;
b = value.bottom;
l = value.left;
} else {
t = r = b = l = value;
}

return {
top: t,
right: r,
bottom: b,
left: l
};
}


module.exports = DatasetController.extend({

datasetElementType: elements.Line,
Expand Down Expand Up @@ -173,6 +218,7 @@ module.exports = DatasetController.extend({
values.spanGaps = valueOrDefault(config.spanGaps, options.spanGaps);
values.tension = valueOrDefault(config.lineTension, lineOptions.tension);
values.steppedLine = resolve([custom.steppedLine, config.steppedLine, lineOptions.stepped]);
values.clip = toClip(valueOrDefault(config.clip, defaultClip(me._xScale, me._yScale, values.borderWidth)));

return values;
},
Expand Down Expand Up @@ -275,18 +321,19 @@ module.exports = DatasetController.extend({
var meta = me.getMeta();
var points = meta.data || [];
var area = chart.chartArea;
var canvas = chart.canvas;
var i = 0;
var ilen = points.length;
var halfBorderWidth;
var clip;

if (me._showLine) {
halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2;
clip = meta.dataset._model.clip;

helpers.canvas.clipArea(chart.ctx, {
left: area.left - halfBorderWidth,
right: area.right + halfBorderWidth,
top: area.top - halfBorderWidth,
bottom: area.bottom + halfBorderWidth
left: clip.left === false ? 0 : area.left - clip.left,
right: clip.right === false ? canvas.width : area.right + clip.right,
top: clip.top === false ? 0 : area.top - clip.top,
bottom: clip.bottom === false ? canvas.height : area.bottom + clip.bottom
});

meta.dataset.draw();
Expand Down
38 changes: 38 additions & 0 deletions test/fixtures/controller.line/clip/default-x-max.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"config": {
"type": "scatter",
"data": {
"datasets": [{
"borderColor": "red",
"data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
"fill": false,
"showLine": true,
"borderWidth": 20,
"pointRadius": 0
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{
"ticks": {
"max": 3,
"display": false
}
}],
"yAxes": [{"ticks": {"display": false}}]
},
"layout": {
"padding": 24
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions test/fixtures/controller.line/clip/default-x-min.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"config": {
"type": "scatter",
"data": {
"datasets": [{
"borderColor": "red",
"data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
"fill": false,
"showLine": true,
"borderWidth": 20,
"pointRadius": 0
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{
"ticks": {
"min": -2,
"display": false
}
}],
"yAxes": [{"ticks": {"display": false}}]
},
"layout": {
"padding": 24
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions test/fixtures/controller.line/clip/default-x.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"config": {
"type": "scatter",
"data": {
"datasets": [{
"borderColor": "red",
"data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
"fill": false,
"showLine": true,
"borderWidth": 20,
"pointRadius": 0
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{
"ticks": {
"min": -2,
"max": 3,
"display": false
}
}],
"yAxes": [{"ticks": {"display": false}}]
},
"layout": {
"padding": 24
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}
Binary file added test/fixtures/controller.line/clip/default-x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions test/fixtures/controller.line/clip/default-y-max.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"config": {
"type": "scatter",
"data": {
"datasets": [{
"borderColor": "red",
"data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
"fill": false,
"showLine": true,
"borderWidth": 20,
"pointRadius": 0
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{"ticks": {"display": false}}],
"yAxes": [{
"ticks": {
"max": 6,
"display": false
}
}]
},
"layout": {
"padding": 24
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions test/fixtures/controller.line/clip/default-y-min.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"config": {
"type": "scatter",
"data": {
"datasets": [{
"borderColor": "red",
"data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
"fill": false,
"showLine": true,
"borderWidth": 20,
"pointRadius": 0
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{"ticks": {"display": false}}],
"yAxes": [{
"ticks": {
"min": 2,
"display": false
}
}]
},
"layout": {
"padding": 24
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions test/fixtures/controller.line/clip/default-y.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"config": {
"type": "scatter",
"data": {
"datasets": [{
"borderColor": "red",
"data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
"fill": false,
"showLine": true,
"borderWidth": 20,
"pointRadius": 0
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{"ticks": {"display": false}}],
"yAxes": [{
"ticks": {
"min": 2,
"max": 6,
"display": false
}
}]
},
"layout": {
"padding": 24
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}
Binary file added test/fixtures/controller.line/clip/default-y.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 201fe46

Please sign in to comment.