Shopify/polaris-viz

SimpleBarChart Horizontal Bar is too short - doubly subtracts the label width

Closed this issue · 0 comments

Bringer128 commented

Bug summary

We were showing a visualization of the number of session that a merchant could see and the bar was surprising short for the available space.

image

From looking into and debugging the code we found that the label width is subtracted once here and once here. This leads to having the bar be about 20px wide despite the available space being 250px and the label being about 80px wide.

Expected behavior

When available space is approx 242px
image

And the label takes up approx 90px
image

Then the bar should be between 100 and 150px wide.

Actual behavior

Bar is only 28px wide

image

Steps to reproduce the problem

  1. Render a horizontal bar chart with long X axis labels in terms of number of characters, with a sizeable horizontal space
  2. See that no matter the values, the bars end up squished

Reduced test case

Reproducible here with 9.4.0 Polaris Viz: https://codesandbox.io/s/shopify-polaris-viz-react-typescript-playground-forked-q9g3st?file=/src/index.tsx

Unable to reproduce with the same code with 8.2.0 Polaris Viz; so it's been introduced since then.

Specifications

  • Polaris-Viz version number: 9.4.0
  • Browser: Chrome
  • Device: M1 Mac OS
  • Operating System: M1 Mac OS