Bar: inflate rects by 0.33px to avoid artifacts (#9399)

* Bar: inflate rects by 0.33px to avoid artifacts
* Update fixture
* YAGNI

diff --git a/src/elements/element.bar.js b/src/elements/element.bar.js
index c7e82309ec640e4cffef020298ed604f6f3d6779..fc7ebd46b5973bddc0ac09a910d1945a642d472d 100644 (file)
--- 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, _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 = 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 5d5986bdf86a3398271f10de14c81fd10b4b07bf..87219e676a9389bc3ec2c9fe61d880a13eef0f23 100644 (file)
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 d7107153bb098da80a029fc2f58084bb8c2415f4..87e982e1e2303a122ce9dab5d459ea71dfcfdb5b 100644 (file)
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 ca5e1227b5cad1b5f4e8b172859e23fd53a1d834..19b328c3bee431245521885ea22653c6dc5ecc4c 100644 (file)
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 1f4feb2e36b0b554ca6279bec8fab61b1bc2a599..d6b377677694e5926e2b65768cbb6520bd1f6bef 100644 (file)
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 88c21a153742db4bcb547760cd33dd99dbc2cedb..646fd80518411b9802764c98b7e343722922eb6f 100644 (file)
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 2ad1dfdb3ea8372f3e832a1b843ab441abd7c7c9..2f98f893a7229a7222761ce9173da8ea63695cb2 100644 (file)
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 8472c0fbf0db6915ff137f0e74781229679ddaa9..e04b9b0bd7ec0fd806ceb131ed36a0ed35f98963 100644 (file)
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 1fd0161a55f50e2850408d52b9af838f45f45e3f..23ed06dd6aa3bc81882c22bd2a145b2cab8c90be 100644 (file)
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 15fe7871013270ca6760e0af47d0f139d1f37105..7063fd102a1298b2580b63574590128073f4b016 100644 (file)
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 (file)
index 0000000..3fa0b53
--- /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 (file)
index 0000000..0fae394
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 3aff7387b1da289f9164355101eb5dccc9ccb816..0c96f07f537bd077f5706629a9a6b69264799a63 100644 (file)
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 24eb8e0ea003ec8ec470f6cef0f2ae4c0f662bff..2635b2792ab79771cb59eeea1cc0b7b8fd0ba5fe 100644 (file)
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 2b8af4bb8d0dcad63a99b33f302d18192ca4450b..13b82c32a8949092f8aa9126f4277aefac22c919 100644 (file)
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 68e7c0dd2916c1e46bf790706f3a00d634b0c011..ec5e8a63d314f70d79e0e5cffbf54bf93d7c1c41 100644 (file)
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 (file)
index 0000000..53a0fc4
--- /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 (file)
index 0000000..b630cf5
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 d3f1b85c8675193c6deceae1afe9da63a6bab7ff..88428927ec183a9ef0ebe522aef87c32b03e4fc4 100644 (file)
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 04576006af463429104cd7595d23318d113cf6cd..3b36d96cb2f25cf49f5f222ed21159975efcb45b 100644 (file)
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 af89232e9723602b3b02106ba12e409b2a81ac8b..58fec25d81b2766e027ddeef486016345261e600 100644 (file)
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 73adeead5619ec9a0b636a129912c78659d33617..96f16777ae3ed60a66252294dcb577f594e16a22 100644 (file)
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 d002927420d1255e34c146c001c4579e7cf2a9b9..a82f643a332fcf0e7159edf2d3130b56e44af1f9 100644 (file)
--- 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 4a65b49fe11f6fe28d956b6d7f85f16bf04b979a..6ce9dc90cec423b15d0b17926c29c3a94499c462 100644 (file)
Binary files a/test/fixtures/scale.category/ticks-from-data.png and b/test/fixtures/scale.category/ticks-from-data.png differ