From 5dc27b846d65c84a580f9a13b5691613e0846e4c Mon Sep 17 00:00:00 2001 From: Istvan Petres Date: Thu, 30 Jun 2022 13:06:25 +0300 Subject: [PATCH 1/3] 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. --- src/controllers/controller.bar.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 557bffbd8c9..7d07764662d 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -207,6 +207,11 @@ function setBorderSkipped(properties, options, stack, index) { properties.borderSkipped = res; return; } + + if (edge === true) { + properties.borderSkipped = { top: true, right: true, bottom: true, left: true }; + return; + } const {start, end, reverse, top, bottom} = borderProps(properties); From 122f6da40ac13d9472e43d7c261207156fe8c4c7 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Fri, 29 Jul 2022 15:15:46 +0200 Subject: [PATCH 2/3] fix failing test, update docs and typings --- docs/charts/bar.md | 5 +++-- src/controllers/controller.bar.js | 4 ++-- types/index.esm.d.ts | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 261beec470e..b9eb25cdc6b 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 7d07764662d..b18ffb71b33 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -207,9 +207,9 @@ function setBorderSkipped(properties, options, stack, index) { properties.borderSkipped = res; return; } - + if (edge === true) { - properties.borderSkipped = { top: true, right: true, bottom: true, left: true }; + properties.borderSkipped = {top: true, right: true, bottom: true, left: true}; return; } diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 3edb09464ba..a66d14cb997 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1982,7 +1982,7 @@ export interface BarOptions extends Omit { * Skipped (excluded) border: 'start', 'end', 'left', 'right', 'bottom', 'top', 'middle' or false (none). * @default 'start' */ - borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | 'middle' | false; + borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top' | 'middle' | boolean; /** * Border radius From 733c2613c2ee1ff834f4fc49a2a71d56a641a29e Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Fri, 29 Jul 2022 15:51:12 +0200 Subject: [PATCH 3/3] update typing comment --- types/index.esm.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index a66d14cb997..12ed6369b3a 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1979,7 +1979,7 @@ export interface BarOptions extends Omit { 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' | boolean;