Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow configuration of borderWidth as object #6077

Merged
merged 13 commits into from
Feb 25, 2019
11 changes: 9 additions & 2 deletions docs/charts/bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ the color of the bars is generally set this way.
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `0`
| [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
| [`data`](#data-structure) | `object[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
Expand All @@ -97,7 +97,7 @@ The style of each bar can be controlled with the following properties:
| `backgroundColor` | The bar background color.
| `borderColor` | The bar border color.
| [`borderSkipped`](#borderskipped) | The edge to skip when drawing bar.
| `borderWidth` | The bar border width (in pixels).
| [`borderWidth`](#borderwidth) | The bar border width (in pixels).

All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.

Expand All @@ -107,11 +107,18 @@ This setting is used to avoid drawing the bar stroke at the base of the fill.
In general, this does not need to be changed except when creating chart types
that derive from a bar chart.

**Note:** for negative bars in vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in horizontal chart.

Options are:
* `'bottom'`
* `'left'`
* `'top'`
* `'right'`
* `false`

#### borderWidth

If this value is a number, it is applied to all sides of the rectangle (left, top, right, bottom), except [`borderSkipped`](#borderskipped). If this value is an object, the `left` property defines the left border width. Similarly the `right`, `top` and `bottom` properties can also be specified. Omitted borders and [`borderSkipped`](#borderskipped) are skipped.

### Interactions

Expand Down
185 changes: 95 additions & 90 deletions src/elements/element.rectangle.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

var defaults = require('../core/core.defaults');
var Element = require('../core/core.element');
var helpers = require('../helpers/index');

var defaultColor = defaults.global.defaultColor;

Expand All @@ -28,22 +29,20 @@ function isVertical(bar) {
*/
function getBarBounds(bar) {
var vm = bar._view;
var x1, x2, y1, y2;
var x1, x2, y1, y2, half;

if (isVertical(bar)) {
// vertical
var halfWidth = vm.width / 2;
x1 = vm.x - halfWidth;
x2 = vm.x + halfWidth;
half = vm.width / 2;
x1 = vm.x - half;
x2 = vm.x + half;
y1 = Math.min(vm.y, vm.base);
y2 = Math.max(vm.y, vm.base);
} else {
// horizontal bar
var halfHeight = vm.height / 2;
half = vm.height / 2;
x1 = Math.min(vm.x, vm.base);
x2 = Math.max(vm.x, vm.base);
y1 = vm.y - halfHeight;
y2 = vm.y + halfHeight;
y1 = vm.y - half;
y2 = vm.y + half;
}

return {
Expand All @@ -54,96 +53,102 @@ function getBarBounds(bar) {
};
}

module.exports = Element.extend({
draw: function() {
var ctx = this._chart.ctx;
var vm = this._view;
var left, right, top, bottom, signX, signY, borderSkipped;
var borderWidth = vm.borderWidth;

if (!vm.horizontal) {
// bar
left = vm.x - vm.width / 2;
right = vm.x + vm.width / 2;
top = vm.y;
bottom = vm.base;
signX = 1;
signY = bottom > top ? 1 : -1;
borderSkipped = vm.borderSkipped || 'bottom';
} else {
// horizontal bar
left = vm.base;
right = vm.x;
top = vm.y - vm.height / 2;
bottom = vm.y + vm.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
}
function swap(orig, v1, v2) {
return orig === v1 ? v2 : orig === v2 ? v1 : orig;
}

function parseBorderSkipped(bar) {
var vm = bar._view;
var edge = vm.borderSkipped;
var res = {};

if (!edge) {
return res;
}

// Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) {
// borderWidth shold be less than bar width and bar height.
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize ? barSize : borderWidth;
var halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
// not become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not become a horizontal line?
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
if (isVertical(bar)) {
if (vm.base < vm.y) {
edge = swap(edge, 'bottom', 'top');
}
} else if (vm.base > vm.x) {
edge = swap(edge, 'left', 'right');
}

res[edge] = true;
return res;
}

function parseBorderWidth(value, bar, maxWidth, maxHeight) {
var _skip = parseBorderSkipped(bar);
var t, r, b, l;

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

return {
top: _skip.top || (t < 0) ? 0 : t > maxHeight ? maxHeight : t,
right: _skip.right || (r < 0) ? 0 : r > maxWidth ? maxWidth : r,
bottom: _skip.bottom || (b < 0) ? 0 : b > maxWidth ? maxWidth : b,
left: _skip.left || (l < 0) ? 0 : l > maxWidth ? maxWidth : l
};
}

module.exports = Element.extend({
draw: function() {
var me = this;
var ctx = me._chart.ctx;
var vm = me._view;
var bounds = getBarBounds(me);
var left = bounds.left;
var top = bounds.top;
var width = bounds.right - left;
var height = bounds.bottom - top;
var border = parseBorderWidth(vm.borderWidth, me, width / 2, height / 2);
var bLeft = border.left;
var bTop = border.top;
var bRight = border.right;
var bBottom = border.bottom;
var maxBorder = Math.max(bLeft, bTop, bRight, bBottom);
var halfBorder = maxBorder / 2;
var inner = {
left: left + bLeft,
top: top + bTop,
width: width - bLeft - bRight,
height: height - bBottom - bTop
};

ctx.beginPath();
ctx.fillStyle = vm.backgroundColor;
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = borderWidth;

// Corner points, from bottom-left to bottom-right clockwise
// | 1 2 |
// | 0 3 |
var corners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];

// Find first (starting) corner with fallback to 'bottom'
var borders = ['bottom', 'left', 'top', 'right'];
var startCorner = borders.indexOf(borderSkipped, 0);
if (startCorner === -1) {
startCorner = 0;
}

function cornerAt(index) {
return corners[(startCorner + index) % 4];
if (!maxBorder) {
ctx.fillRect(left, top, width, height);
return;
}

// Draw rectangle from 'startCorner'
var corner = cornerAt(0);
ctx.moveTo(corner[0], corner[1]);
ctx.fillRect(inner.left, inner.top, inner.width, inner.height);

for (var i = 1; i < 4; i++) {
corner = cornerAt(i);
ctx.lineTo(corner[0], corner[1]);
}
// offset inner rectangle by half of widest border
// move edges additional 1px out, where there is no border, to prevent artifacts
inner.left -= halfBorder + (bLeft ? 0 : 1);
inner.top -= halfBorder + (bTop ? 0 : 1);
inner.width += maxBorder + (bLeft ? 0 : 1) + (bRight ? 0 : 1);
inner.height += maxBorder + (bTop ? 0 : 1) + (bBottom ? 0 : 1);

ctx.fill();
if (borderWidth) {
ctx.stroke();
}
ctx.save();
ctx.beginPath();
ctx.rect(left, top, width, height);
ctx.clip();
ctx.beginPath();
ctx.rect(inner.left, inner.top, inner.width, inner.height);
ctx.lineWidth = maxBorder + 1; // + 1 to prevent artifacts
ctx.strokeStyle = vm.borderColor;
ctx.stroke();
ctx.restore();
},

height: function() {
Expand Down
5 changes: 5 additions & 0 deletions test/fixtures/controller.bar/borderSkipped/value.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ module.exports = {
{
// option in element (fallback)
data: [0, 5, -10, null],
},
{
// option in dataset
data: [0, 5, -10, null],
borderSkipped: false
}
]
},
Expand Down
Binary file modified test/fixtures/controller.bar/borderSkipped/value.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions test/fixtures/controller.bar/borderWidth/indexable-object.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
module.exports = {
config: {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
borderSkipped: false,
borderWidth: [
{},
{bottom: 1, left: 1, top: 1, right: 1},
{bottom: 1, left: 2, top: 1, right: 2},
{bottom: 1, left: 3, top: 1, right: 3},
{bottom: 1, left: 4, top: 1, right: 4},
{bottom: 1, left: 5, top: 1, right: 5}
]
},
{
// option in element (fallback)
data: [0, 5, 10, null, -10, -5],
}
]
},
options: {
legend: false,
title: false,
elements: {
rectangle: {
backgroundColor: 'transparent',
borderColor: '#80808080',
borderSkipped: false,
borderWidth: [
{bottom: 1, left: 5, top: 1, right: 5},
{bottom: 1, left: 4, top: 1, right: 4},
{bottom: 1, left: 3, top: 1, right: 3},
{bottom: 1, left: 2, top: 1, right: 2},
{bottom: 1, left: 1, top: 1, right: 1},
{}
]
}
},
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
}
}
},
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.
Binary file modified test/fixtures/controller.bar/borderWidth/indexable.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions test/fixtures/controller.bar/borderWidth/negative.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
module.exports = {
config: {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [
{
// option in dataset
data: [0, 5, 10, null, -10, -5],
borderWidth: -2
},
{
// option in element (fallback)
data: [0, 5, 10, null, -10, -5],
},
{
data: [0, 5, 10, null, -10, -5],
borderWidth: {left: -5, top: -5, bottom: -5, right: -5},
borderSkipped: false
},
{
data: [0, 5, 10, null, -10, -5],
borderWidth: {}
},
]
},
options: {
legend: false,
title: false,
elements: {
rectangle: {
backgroundColor: '#888',
borderColor: '#f00',
borderWidth: -4
}
},
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
}
}
},
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.
Loading