Shopify/polaris-viz

Horizontal scale does not take trend indicators into account

Closed this issue · 1 comments

Bug summary

Trend indicators can be clipped off the right edge of a <SimpleBarChart> when the horizontal bar is at its minimum size. This is related to #1552, which can cause horizontal bars with the same value to have different sizes from each other when trend indicators are displayed.

Expected behavior

Trend indicators should not extend past the bounds of the chart. The horizontal scale calculation should include the size of any trend indicators to ensure that they're not clipped at one of the edges.

Actual behavior

The width of a horizontal bar is clamped to make room for a trend indicator (when present). After the clamping behavior was added in #1539, this can cause the trend indicator to extend past the bounds of the chart.

Screenshot 2023-06-28 at 16 47 32

Steps to reproduce the problem

  1. Create a horizontal <SimpleBarChart> with one or more small, positive values and at least one negative value that is much larger.
  2. Add trend indicators to one of the small positive values
  3. The trend indicator will be clipped at the right edge of the chart if the bar is short enough that it can't be clamped to a smaller value (see #1539)

Reduced test case

https://codesandbox.io/s/chart-scale-not-taking-trend-indicators-into-account-p7czm5?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