diff --git a/src/elements/element.bar.js b/src/elements/element.bar.js index c7e82309ec6..0981b5745d1 100644 --- a/src/elements/element.bar.js +++ b/src/elements/element.bar.js @@ -1,5 +1,5 @@ import Element from '../core/core.element'; -import {isObject} from '../helpers'; +import {isObject, valueOrDefault, _limitValue} from '../helpers'; import {addRoundedRectPath} from '../helpers/helpers.canvas'; import {toTRBL, toTRBLCorners} from '../helpers/helpers.options'; @@ -67,7 +67,7 @@ function startEnd(v, start, end) { } function skipOrLimit(skip, value, min, max) { - return skip ? 0 : Math.max(Math.min(value, max), min); + return skip ? 0 : _limitValue(value, min, max); } function parseBorderWidth(bar, maxW, maxH) { @@ -156,6 +156,20 @@ function addNormalRectPath(ctx, rect) { ctx.rect(rect.x, rect.y, rect.w, rect.h); } +function inflateRect(rect, amount, refRect = {}) { + const x = rect.x !== refRect.x ? -amount : 0; + const y = rect.y !== refRect.y ? -amount : 0; + const w = (rect.x + rect.w !== refRect.x + refRect.w ? amount : 0) - x; + const h = (rect.y + rect.h !== refRect.y + refRect.h ? amount : 0) - y; + return { + x: rect.x + x, + y: rect.y + y, + w: rect.w + w, + h: rect.h + h, + radius: rect.radius + }; +} + export default class BarElement extends Element { constructor(cfg) { @@ -176,20 +190,21 @@ export default class BarElement extends Element { const options = this.options; const {inner, outer} = boundingRects(this); const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath; + const inflateAmount = valueOrDefault(options.inflateAmount, 0.33); ctx.save(); if (outer.w !== inner.w || outer.h !== inner.h) { ctx.beginPath(); - addRectPath(ctx, outer); + addRectPath(ctx, inflateRect(outer, inflateAmount, inner)); ctx.clip(); - addRectPath(ctx, inner); + addRectPath(ctx, inflateRect(inner, -inflateAmount, outer)); ctx.fillStyle = options.borderColor; ctx.fill('evenodd'); } ctx.beginPath(); - addRectPath(ctx, inner); + addRectPath(ctx, inflateRect(inner, inflateAmount, outer)); ctx.fillStyle = options.backgroundColor; ctx.fill(); diff --git a/test/fixtures/controller.bar/bar-base-value.png b/test/fixtures/controller.bar/bar-base-value.png index 5d5986bdf86..87219e676a9 100644 Binary files a/test/fixtures/controller.bar/bar-base-value.png and b/test/fixtures/controller.bar/bar-base-value.png differ diff --git a/test/fixtures/controller.bar/baseLine/bottom.png b/test/fixtures/controller.bar/baseLine/bottom.png index d7107153bb0..87e982e1e23 100644 Binary files a/test/fixtures/controller.bar/baseLine/bottom.png and b/test/fixtures/controller.bar/baseLine/bottom.png differ diff --git a/test/fixtures/controller.bar/baseLine/left.png b/test/fixtures/controller.bar/baseLine/left.png index ca5e1227b5c..19b328c3bee 100644 Binary files a/test/fixtures/controller.bar/baseLine/left.png and b/test/fixtures/controller.bar/baseLine/left.png differ diff --git a/test/fixtures/controller.bar/baseLine/mid-x.png b/test/fixtures/controller.bar/baseLine/mid-x.png index 1f4feb2e36b..d6b37767769 100644 Binary files a/test/fixtures/controller.bar/baseLine/mid-x.png and b/test/fixtures/controller.bar/baseLine/mid-x.png differ diff --git a/test/fixtures/controller.bar/baseLine/mid-y.png b/test/fixtures/controller.bar/baseLine/mid-y.png index 88c21a15374..646fd805184 100644 Binary files a/test/fixtures/controller.bar/baseLine/mid-y.png and b/test/fixtures/controller.bar/baseLine/mid-y.png differ diff --git a/test/fixtures/controller.bar/baseLine/right.png b/test/fixtures/controller.bar/baseLine/right.png index 2ad1dfdb3ea..2f98f893a72 100644 Binary files a/test/fixtures/controller.bar/baseLine/right.png and b/test/fixtures/controller.bar/baseLine/right.png differ diff --git a/test/fixtures/controller.bar/baseLine/top.png b/test/fixtures/controller.bar/baseLine/top.png index 8472c0fbf0d..e04b9b0bd7e 100644 Binary files a/test/fixtures/controller.bar/baseLine/top.png and b/test/fixtures/controller.bar/baseLine/top.png differ diff --git a/test/fixtures/controller.bar/baseLine/value-x.png b/test/fixtures/controller.bar/baseLine/value-x.png index 1fd0161a55f..23ed06dd6aa 100644 Binary files a/test/fixtures/controller.bar/baseLine/value-x.png and b/test/fixtures/controller.bar/baseLine/value-x.png differ diff --git a/test/fixtures/controller.bar/baseLine/value-y.png b/test/fixtures/controller.bar/baseLine/value-y.png index 15fe7871013..7063fd102a1 100644 Binary files a/test/fixtures/controller.bar/baseLine/value-y.png and b/test/fixtures/controller.bar/baseLine/value-y.png differ diff --git a/test/fixtures/controller.bar/borderColor/border+dpr.js b/test/fixtures/controller.bar/borderColor/border+dpr.js new file mode 100644 index 00000000000..3fa0b53c017 --- /dev/null +++ b/test/fixtures/controller.bar/borderColor/border+dpr.js @@ -0,0 +1,35 @@ +module.exports = { + threshold: 0, + tolerance: 0, + config: { + type: 'bar', + data: { + labels: [0, 1, 2, 3, 4, 5, 6], + datasets: [ + { + // option in dataset + data: [5, 4, 3, 2, 3, 4, 5], + }, + ] + }, + options: { + events: [], + devicePixelRatio: 1.5, + barPercentage: 1, + categoryPercentage: 1, + backgroundColor: 'black', + borderColor: 'black', + borderWidth: 8, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + canvas: { + height: 256, + width: 501 + } + } +}; diff --git a/test/fixtures/controller.bar/borderColor/border+dpr.png b/test/fixtures/controller.bar/borderColor/border+dpr.png new file mode 100644 index 00000000000..0fae394e8f9 Binary files /dev/null and b/test/fixtures/controller.bar/borderColor/border+dpr.png differ diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png index 3aff7387b1d..0c96f07f537 100644 Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png differ diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png index 24eb8e0ea00..aad97e35bd8 100644 Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-with-order.png differ diff --git a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png index 2b8af4bb8d0..13b82c32a89 100644 Binary files a/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png and b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number.png differ diff --git a/test/fixtures/controller.bar/borderRadius/border-radius.png b/test/fixtures/controller.bar/borderRadius/border-radius.png index 68e7c0dd291..ec5e8a63d31 100644 Binary files a/test/fixtures/controller.bar/borderRadius/border-radius.png and b/test/fixtures/controller.bar/borderRadius/border-radius.png differ diff --git a/test/fixtures/controller.bar/borderRadius/no-spacing.js b/test/fixtures/controller.bar/borderRadius/no-spacing.js new file mode 100644 index 00000000000..53a0fc47fbe --- /dev/null +++ b/test/fixtures/controller.bar/borderRadius/no-spacing.js @@ -0,0 +1,33 @@ +module.exports = { + threshold: 0.01, + config: { + type: 'bar', + data: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + datasets: [ + { + data: [9, 25, 13, 17, 12, 21, 20, 19, 6, 12, 14, 20], + categoryPercentage: 1, + barPercentage: 1, + backgroundColor: '#2E5C76', + borderWidth: 2, + borderColor: '#377395', + borderRadius: 5, + }, + ] + }, + options: { + devicePixelRatio: 1.25, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.bar/borderRadius/no-spacing.png b/test/fixtures/controller.bar/borderRadius/no-spacing.png new file mode 100644 index 00000000000..b630cf5ca8a Binary files /dev/null and b/test/fixtures/controller.bar/borderRadius/no-spacing.png differ diff --git a/test/fixtures/controller.bar/borderWidth/indexable.png b/test/fixtures/controller.bar/borderWidth/indexable.png index d3f1b85c867..88428927ec1 100644 Binary files a/test/fixtures/controller.bar/borderWidth/indexable.png and b/test/fixtures/controller.bar/borderWidth/indexable.png differ diff --git a/test/fixtures/controller.bar/borderWidth/object.png b/test/fixtures/controller.bar/borderWidth/object.png index 04576006af4..3b36d96cb2f 100644 Binary files a/test/fixtures/controller.bar/borderWidth/object.png and b/test/fixtures/controller.bar/borderWidth/object.png differ diff --git a/test/fixtures/controller.bar/borderWidth/value.png b/test/fixtures/controller.bar/borderWidth/value.png index af89232e972..58fec25d81b 100644 Binary files a/test/fixtures/controller.bar/borderWidth/value.png and b/test/fixtures/controller.bar/borderWidth/value.png differ diff --git a/test/fixtures/controller.bar/horizontal-borders.png b/test/fixtures/controller.bar/horizontal-borders.png index 73adeead561..96f16777ae3 100644 Binary files a/test/fixtures/controller.bar/horizontal-borders.png and b/test/fixtures/controller.bar/horizontal-borders.png differ diff --git a/test/fixtures/scale.category/ticks-from-data.js b/test/fixtures/scale.category/ticks-from-data.js index d002927420d..a82f643a332 100644 --- a/test/fixtures/scale.category/ticks-from-data.js +++ b/test/fixtures/scale.category/ticks-from-data.js @@ -4,19 +4,13 @@ module.exports = { type: 'bar', data: { datasets: [{ - data: [10, 5, 0, 25, 78] + data: [10, 5, 0, 25, 78], + backgroundColor: 'transparent' }], labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'] }, options: { indexAxis: 'y', - elements: { - bar: { - backgroundColor: '#AAAAAA80', - borderColor: '#80808080', - borderWidth: {bottom: 6, left: 15, top: 6, right: 15} - } - }, scales: { x: {display: false}, y: {display: true} @@ -24,6 +18,10 @@ module.exports = { } }, options: { - spriteText: true + spriteText: true, + canvas: { + width: 128, + height: 256 + } } }; diff --git a/test/fixtures/scale.category/ticks-from-data.png b/test/fixtures/scale.category/ticks-from-data.png index 4a65b49fe11..6ce9dc90cec 100644 Binary files a/test/fixtures/scale.category/ticks-from-data.png and b/test/fixtures/scale.category/ticks-from-data.png differ