Shopify/polaris-viz

SimpleBarChart horizontal bars are truncated when trend indicators are present

Closed this issue · 1 comments

Bug summary

The width of the trend indicator is being subtracted from the length of the bar in <HorizontalBars>, which causes bars with a trend indicator to be rendered at an incorrect scale.

Screenshot 2023-06-28 at 16 15 54

Expected behavior

The horizontal scale of the chart should take trend indicators into account, instead of subtracting the width of the trend indicator (when present) from a horizontal bar.

Actual behavior

The horizontal scale is calculated without trend indicators, and bars that have a trend indicator are shortened by an amount equal to the width of the trend indicator. This can cause bars that represent the same value to have different lengths:

Steps to reproduce the problem

  1. Create a <SimpleBarChart> that has a couple of data points with the same value
  2. Add a trend indicator for one of the data points
  3. The bars will be different sizes even though they represent equivalent values

Reduced test case

In the following CodeSandbox, all three bars have equivalent values but the bars with trend indicators are rendered at a different size:

https://codesandbox.io/s/trend-indicator-scale-issue-c5chmv?file=/src/index.tsx

Specifications

  • Polaris-Viz version number: 9.4
  • Browser: Chrome
  • Device: MacBook Pro M1 Pro
  • Operating System: macOS Ventura 13.4

Fixed in #1549