From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Sat, 25 Sep 2021 04:52:03 +0000 (+0300)
Subject: Bar: fix too thick borders (#9678)
X-Git-Tag: v3.6.0~28
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c3a53f06d7fcfb36b6363a7e94bca0c9a862a33e;p=thirdparty%2FChart.js.git

Bar: fix too thick borders (#9678)
---

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index c7ef6670e..325ca9c36 100644
--- a/docs/charts/bar.md
+++ b/docs/charts/bar.md
@@ -86,6 +86,7 @@ Only the `data` option needs to be specified in the dataset namespace.
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
 | [`hoverBorderRadius`](#interactions) | `number` | Yes | Yes | `0`
 | [`indexAxis`](#general) | `string` | - | - | `'x'`
+| [`inflateAmount`](#inflateamount) | `number`\|`'auto'` | Yes | Yes | `'auto'`
 | [`maxBarThickness`](#maxbarthickness) | `number` | - | - | |
 | [`minBarLength`](#styling) | `number` | - | - | |
 | [`label`](#general) | `string` | - | - | `''`
@@ -176,6 +177,10 @@ If this value is a number, it is applied to all corners of the rectangle (topLef
 When the border radius is supplied as a number and the chart is stacked, the radius will only be applied to the bars that are at the edges of the stack or where the bar is floating. The object syntax can be used to override this behavior.
 :::
 
+#### inflateAmount
+
+This option can be used to inflate the rects that are used to draw the bars. This can be used to hide artifacts between bars when `barPercentage`(#barpercentage) * `categoryPercentage`(#categorypercentage) is 1. The default value `'auto'` should work in most cases.
+
 ### Interactions
 
 The interaction with each bar can be controlled with the following properties:
diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md
index 9623714f2..aff436011 100644
--- a/docs/configuration/elements.md
+++ b/docs/configuration/elements.md
@@ -84,6 +84,7 @@ Namespace: `options.elements.bar`, global bar options: `Chart.defaults.elements.
 | `borderColor` | [`Color`](/general/colors.md) | `Chart.defaults.borderColor` | Bar stroke color.
 | `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'middle'`, `'bottom'`, `'left'`, `'top'`, `'right'` or `false`.
 | `borderRadius` | `number`\|`object` | `0` | The bar border radius (in pixels).
+| `inflateAmount` | `number`\|`'auto'` | `'auto'` | The amount of pixels to inflate the bar rectangle(s) when drawing.
 | [`pointStyle`](#point-styles) | `string`\|`Image`\|`HTMLCanvasElement` | `'circle'` | Style of the point for legend.
 
 ## Arc Configuration
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index c9a8e7ef8..dd10cf09f 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -244,6 +244,12 @@ function startEnd(v, start, end) {
   return v === 'start' ? start : v === 'end' ? end : v;
 }
 
+function setInflateAmount(properties, {inflateAmount}, ratio) {
+  properties.inflateAmount = inflateAmount === 'auto'
+    ? ratio === 1 ? 0.33 : 0
+    : inflateAmount;
+}
+
 export default class BarController extends DatasetController {
 
   /**
@@ -369,7 +375,9 @@ export default class BarController extends DatasetController {
       if (includeOptions) {
         properties.options = sharedOptions || this.resolveDataElementOptions(i, bars[i].active ? 'active' : mode);
       }
-      setBorderSkipped(properties, properties.options || bars[i].options, stack, index);
+      const options = properties.options || bars[i].options;
+      setBorderSkipped(properties, options, stack, index);
+      setInflateAmount(properties, options, ruler.ratio);
       this.updateElement(bars[i], i, properties, mode);
     }
   }
diff --git a/src/elements/element.bar.js b/src/elements/element.bar.js
index 049a8984f..41a609b75 100644
--- a/src/elements/element.bar.js
+++ b/src/elements/element.bar.js
@@ -146,6 +146,7 @@ export default class BarElement extends Element {
     this.base = undefined;
     this.width = undefined;
     this.height = undefined;
+    this.inflateAmount = undefined;
 
     if (cfg) {
       Object.assign(this, cfg);
@@ -153,10 +154,9 @@ export default class BarElement extends Element {
   }
 
   draw(ctx) {
-    const options = this.options;
+    const {inflateAmount, options: {borderColor, backgroundColor}} = this;
     const {inner, outer} = boundingRects(this);
     const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
-    const inflateAmount = 0.33;
 
     ctx.save();
 
@@ -165,13 +165,13 @@ export default class BarElement extends Element {
       addRectPath(ctx, inflateRect(outer, inflateAmount, inner));
       ctx.clip();
       addRectPath(ctx, inflateRect(inner, -inflateAmount, outer));
-      ctx.fillStyle = options.borderColor;
+      ctx.fillStyle = borderColor;
       ctx.fill('evenodd');
     }
 
     ctx.beginPath();
-    addRectPath(ctx, inflateRect(inner, inflateAmount, outer));
-    ctx.fillStyle = options.backgroundColor;
+    addRectPath(ctx, inflateRect(inner, inflateAmount));
+    ctx.fillStyle = backgroundColor;
     ctx.fill();
 
     ctx.restore();
@@ -211,7 +211,7 @@ BarElement.defaults = {
   borderSkipped: 'start',
   borderWidth: 0,
   borderRadius: 0,
-  enableBorderRadius: true,
+  inflateAmount: 'auto',
   pointStyle: undefined
 };
 
diff --git a/test/fixtures/controller.bar/bar-base-value.png b/test/fixtures/controller.bar/bar-base-value.png
index 87219e676..98c679751 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/bar-thickness-flex-offset.png b/test/fixtures/controller.bar/bar-thickness-flex-offset.png
index 59171e08c..14491751d 100644
Binary files a/test/fixtures/controller.bar/bar-thickness-flex-offset.png and b/test/fixtures/controller.bar/bar-thickness-flex-offset.png differ
diff --git a/test/fixtures/controller.bar/bar-thickness-flex.png b/test/fixtures/controller.bar/bar-thickness-flex.png
index 791a29d25..62fb2307d 100644
Binary files a/test/fixtures/controller.bar/bar-thickness-flex.png and b/test/fixtures/controller.bar/bar-thickness-flex.png differ
diff --git a/test/fixtures/controller.bar/bar-thickness-offset.png b/test/fixtures/controller.bar/bar-thickness-offset.png
index 8dcecac88..6b35e9257 100644
Binary files a/test/fixtures/controller.bar/bar-thickness-offset.png and b/test/fixtures/controller.bar/bar-thickness-offset.png differ
diff --git a/test/fixtures/controller.bar/bar-thickness-reverse.png b/test/fixtures/controller.bar/bar-thickness-reverse.png
index cf6d621cc..0913be22e 100644
Binary files a/test/fixtures/controller.bar/bar-thickness-reverse.png and b/test/fixtures/controller.bar/bar-thickness-reverse.png differ
diff --git a/test/fixtures/controller.bar/bar-thickness-stacked.png b/test/fixtures/controller.bar/bar-thickness-stacked.png
index 696829ee3..7392dd57c 100644
Binary files a/test/fixtures/controller.bar/bar-thickness-stacked.png and b/test/fixtures/controller.bar/bar-thickness-stacked.png differ
diff --git a/test/fixtures/controller.bar/baseLine/bottom.png b/test/fixtures/controller.bar/baseLine/bottom.png
index 87e982e1e..c689dd3c6 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 19b328c3b..340f71e7e 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 d6b377677..e12c967d2 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 646fd8051..eca057a63 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 2f98f893a..9de9a9e58 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 e04b9b0bd..efe34e918 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 23ed06dd6..bb8407e93 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 7063fd102..f0de92265 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/borderRadius/border-radius-stacked-number-mixed-chart.png b/test/fixtures/controller.bar/borderRadius/border-radius-stacked-number-mixed-chart.png
index 0c96f07f5..7449d7fa4 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 2635b2792..fa769073c 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 13b82c32a..951b2eb63 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 ec5e8a63d..196b00db5 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/borderSkipped/middle.png b/test/fixtures/controller.bar/borderSkipped/middle.png
index 89796e0ca..41fd20195 100644
Binary files a/test/fixtures/controller.bar/borderSkipped/middle.png and b/test/fixtures/controller.bar/borderSkipped/middle.png differ
diff --git a/test/fixtures/controller.bar/borderWidth/indexable.png b/test/fixtures/controller.bar/borderWidth/indexable.png
index 88428927e..0929ef0e6 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 3b36d96cb..ed251dfa7 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 58fec25d8..4f6aca614 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 96f16777a..839864535 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/controller.bar/minBarLength/vertical.png b/test/fixtures/controller.bar/minBarLength/vertical.png
index 2074397ea..0595425bc 100644
Binary files a/test/fixtures/controller.bar/minBarLength/vertical.png and b/test/fixtures/controller.bar/minBarLength/vertical.png differ
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 548720c57..6d2fe7839 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1915,7 +1915,7 @@ export interface BarOptions extends CommonElementOptions {
   base: number;
 
   /**
-   *   Skipped (excluded) border: 'start', 'end', 'left',  'right', 'bottom', 'top' or false (none).
+   * Skipped (excluded) border: 'start', 'end', 'left',  'right', 'bottom', 'top' or false (none).
    * @default 'start'
    */
   borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | false;
@@ -1925,6 +1925,13 @@ export interface BarOptions extends CommonElementOptions {
    * @default 0
    */
   borderRadius: number | BorderRadius;
+
+  /**
+   * Amount to inflate the rectangle(s). This can be used to hide artifacts between bars.
+   * Unit is pixels. 'auto' translates to 0.33 pixels when barPercentage * categoryPercentage is 1, else 0.
+   * @default 'auto'
+   */
+  inflateAmount: number | 'auto';
 }
 
 export interface BorderRadius {