feat: remove border if strokeWidth is greater than the y amount

elastic · Aug 2, 2021 · d42a3f2 · d42a3f2
1 parent f425d13
commit d42a3f2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/bars.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/bars.ts
@@ -64,6 +64,7 @@ function renderPerPanelBars(
       (ctx) => {
         bars.forEach((barGeometry) => {
           const { x, y, width, height, color, seriesStyle, seriesIdentifier } = barGeometry;
+          const rect = { x, y, width, height };
           const geometryStateStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
           const { fill, stroke } = buildBarStyles(
             ctx,
@@ -72,8 +73,8 @@ function renderPerPanelBars(
             seriesStyle.rect,
             seriesStyle.rectBorder,
             geometryStateStyle,
+            rect,
           );
-          const rect = { x, y, width, height };
           withContext(ctx, (ctx) => {
             renderRect(ctx, rect, fill, stroke);
           });

diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.test.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.test.ts
@@ -7,7 +7,7 @@
  */
 
 import { stringToRGB } from '../../../../../common/color_library_wrappers';
-import { Fill, Stroke } from '../../../../../geoms/types';
+import { Fill, Rect, Stroke } from '../../../../../geoms/types';
 import { getMockCanvas, getMockCanvasContext2D, MockStyles } from '../../../../../mocks';
 import * as common from '../../../../../utils/common';
 import { getTextureStyles } from '../../../utils/texture';
@@ -36,6 +36,12 @@ describe('Bar styles', () => {
     let themeRectStyle = MockStyles.rect();
     let themeRectBorderStyle = MockStyles.rectBorder();
     let geometryStateStyle = MockStyles.geometryState();
+    const rect: Rect = {
+      x: 5,
+      y: 5,
+      width: 20,
+      height: 20,
+    };
 
     function setDefaults() {
       baseColor = COLOR;
@@ -45,7 +51,15 @@ describe('Bar styles', () => {
     }
 
     beforeEach(() => {
-      result = buildBarStyles(ctx, imgCanvas, baseColor, themeRectStyle, themeRectBorderStyle, geometryStateStyle);
+      result = buildBarStyles(
+        ctx,
+        imgCanvas,
+        baseColor,
+        themeRectStyle,
+        themeRectBorderStyle,
+        geometryStateStyle,
+        rect,
+      );
     });
 
     it('should call getColorFromVariant with correct args for fill', () => {

diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.ts
@@ -7,7 +7,7 @@
  */
 
 import { stringToRGB, OpacityFn } from '../../../../../common/color_library_wrappers';
-import { Stroke, Fill } from '../../../../../geoms/types';
+import { Stroke, Fill, Rect } from '../../../../../geoms/types';
 import { getColorFromVariant } from '../../../../../utils/common';
 import { GeometryStateStyle, RectStyle, RectBorderStyle } from '../../../../../utils/themes/theme';
 import { getTextureStyles } from '../../../utils/texture';
@@ -31,6 +31,7 @@ export function buildBarStyles(
   themeRectStyle: RectStyle,
   themeRectBorderStyle: RectBorderStyle,
   geometryStateStyle: GeometryStateStyle,
+  rect: Rect,
 ): { fill: Fill; stroke: Stroke } {
   const fillOpacity: OpacityFn = (opacity, seriesOpacity = themeRectStyle.opacity) =>
     opacity * seriesOpacity * geometryStateStyle.opacity;
@@ -47,7 +48,10 @@ export function buildBarStyles(
   const strokeColor = stringToRGB(getColorFromVariant(baseColor, themeRectBorderStyle.stroke), strokeOpacity);
   const stroke: Stroke = {
     color: strokeColor,
-    width: themeRectBorderStyle.visible ? themeRectBorderStyle.strokeWidth : 0,
+    width:
+      themeRectBorderStyle.visible && rect.height > themeRectBorderStyle.strokeWidth
+        ? themeRectBorderStyle.strokeWidth
+        : 0,
   };
   return { fill, stroke };
 }