fix(bar): filter zero-height bars from rendering (#1281)

Closes #1279
elastic · Aug 9, 2021 · e324521 · e324521
1 parent 0cd7dd4
commit e324521
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 6 deletions.
diff --git a/...ts-for-all-stories-bar-chart-test-rect-border-visually-looks-correct-1-snap.png b/...ts-for-all-stories-bar-chart-test-rect-border-visually-looks-correct-1-snap.png
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/primitives/rect.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/primitives/rect.ts
@@ -19,7 +19,7 @@ export function renderRect(
   stroke?: Stroke,
   disableBoardOffset: boolean = false,
 ) {
-  if (!fill && !stroke) {
+  if ((!fill && !stroke) || !rect.height) {
     return;
   }
 

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 = {
+      height: 250,
+      width: 200,
+      x: 560,
+      y: 30,
+    };
 
     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 };
 }
diff --git a/storybook/stories/bar/57_test_rect_border_bars.tsx b/storybook/stories/bar/57_test_rect_border_bars.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  return (
+    <Chart renderer="canvas">
+      <Settings theme={useBaseTheme()} />
+      <Axis id="count" title="count" position={Position.Left} />
+      <Axis id="x" title="goods" position={Position.Bottom} />
+      <BarSeries
+        id="bars"
+        name="amount"
+        xScaleType={ScaleType.Ordinal}
+        xAccessor="x"
+        yAccessors={['y']}
+        barSeriesStyle={{
+          rectBorder: {
+            visible: true,
+            strokeWidth: 10,
+            stroke: 'black',
+          },
+        }}
+        data={[
+          { x: 'A', y: 0, val: 1222 },
+          { x: 'B', y: 20, val: 1222 },
+          { x: 'C', y: 750, val: 1222 },
+          { x: 'D', y: 854, val: 1222 },
+        ]}
+      />
+    </Chart>
+  );
+};
diff --git a/storybook/stories/bar/bars.stories.tsx b/storybook/stories/bar/bars.stories.tsx
@@ -75,3 +75,4 @@ export { Example as testTooltipAndRotation } from './48_test_tooltip';
 export { Example as tooltipBoundary } from './55_tooltip_boundary';
 export { Example as testDualYAxis } from './49_test_dual_axis';
 export { Example as testUseDefaultGroupDomain } from './56_test_use_dfl_gdomain';
+export { Example as testRectBorder } from './57_test_rect_border_bars';