From: Jacco van den Berg <jaccoberg2281@gmail.com>
Date: Sat, 30 Jul 2022 12:12:53 +0000 (+0200)
Subject: Skip all borders if borderSkipped === true (#10530)
X-Git-Tag: v3.9.0~6
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=1fef75d990ccdb557f19d9be5e67f217d8b5c90d;p=thirdparty%2FChart.js.git

Skip all borders if borderSkipped === true (#10530)

* Skip all borders if borderSkipped === true

This will allow you to skip all borders (not just one side) if you set borderSkipped to boolean true and so allow you to have a consistent legend marker even for bars without borders. Reason is that even if same colored borders are set there are artifacts that make the bar look bad and also even with inflateAmount the bars do look good when big but when only a few pixel in size they start to look bad too so this was the only way for me to make it work so legends are looking good and bars too.

* fix failing test, update docs and typings

* update typing comment

Co-authored-by: Istvan Petres <pijulius@users.noreply.github.com>
---

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index 853130f96..b5a24fc48 100644
--- a/docs/charts/bar.md
+++ b/docs/charts/bar.md
@@ -74,7 +74,7 @@ Only the `data` option needs to be specified in the dataset namespace.
 | [`barPercentage`](#barpercentage) | `number` | - | - | `0.9` |
 | [`barThickness`](#barthickness) | `number`\|`string` | - | - | |
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
-| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'`
+| [`borderSkipped`](#borderskipped) | `string`\|`boolean` | Yes | Yes | `'start'`
 | [`borderWidth`](#borderwidth) | `number`\|`object` | Yes | Yes | `0`
 | [`borderRadius`](#borderradius) | `number`\|`object` | Yes | Yes | `0`
 | [`categoryPercentage`](#categorypercentage) | `number` | - | - | `0.8` |
@@ -163,7 +163,8 @@ Options are:
 * `'left'`
 * `'top'`
 * `'right'`
-* `false`
+* `false` (don't skip any borders)
+* `true` (skip all borders)
 
 #### borderWidth
 
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index 557bffbd8..b18ffb71b 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -208,6 +208,11 @@ function setBorderSkipped(properties, options, stack, index) {
     return;
   }
 
+  if (edge === true) {
+    properties.borderSkipped = {top: true, right: true, bottom: true, left: true};
+    return;
+  }
+
   const {start, end, reverse, top, bottom} = borderProps(properties);
 
   if (edge === 'middle' && stack) {
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 8fd5a41f6..75304c1f2 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1984,10 +1984,10 @@ export interface BarOptions extends Omit<CommonElementOptions, 'borderWidth'> {
   base: number;
 
   /**
-   * Skipped (excluded) border: 'start', 'end', 'left',  'right', 'bottom', 'top', 'middle' or false (none).
+   * Skipped (excluded) border: 'start', 'end', 'left',  'right', 'bottom', 'top', 'middle', false (none) or true (all).
    * @default 'start'
    */
-  borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | 'middle' | false;
+  borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | 'middle' | boolean;
 
   /**
    * Border radius