From e3245213db59c678ecf1197dc66a5b53b264973b Mon Sep 17 00:00:00 2001 From: Rachel Shen Date: Mon, 9 Aug 2021 09:14:10 -0400 Subject: [PATCH] fix(bar): filter zero-height bars from rendering (#1281) Closes #1279 --- ...t-border-visually-looks-correct-1-snap.png | Bin 0 -> 9473 bytes .../xy_chart/renderer/canvas/bars.ts | 3 +- .../renderer/canvas/primitives/rect.ts | 2 +- .../renderer/canvas/styles/bar.test.ts | 18 +++++++- .../xy_chart/renderer/canvas/styles/bar.ts | 8 +++- .../stories/bar/57_test_rect_border_bars.tsx | 43 ++++++++++++++++++ storybook/stories/bar/bars.stories.tsx | 1 + 7 files changed, 69 insertions(+), 6 deletions(-) create mode 100644 integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-rect-border-visually-looks-correct-1-snap.png create mode 100644 storybook/stories/bar/57_test_rect_border_bars.tsx diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-rect-border-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-rect-border-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..5ed8283a629a535245a33702aa2b536648981a95 GIT binary patch literal 9473 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 AtpET3 literal 0 HcmV?d00001 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 index b91b3ab41f..63d76f489f 100644 --- 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 index 2dfec98d4d..2ddf36b1f7 100644 --- 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 index b5f25805f7..4065170828 100644 --- 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 index 4683fa57d9..b318495438 100644 --- 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 new file mode 100644 index 0000000000..6bb51221a0 --- /dev/null +++ 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 ( + + + + + + + ); +}; diff --git a/storybook/stories/bar/bars.stories.tsx b/storybook/stories/bar/bars.stories.tsx index 1a2d01b4b3..8a048628fc 100644 --- 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';