react-spectrum-charts icon indicating copy to clipboard operation
react-spectrum-charts copied to clipboard

Horizontal bars hide bar annotations when they shouldn't

Open marshallpete opened this issue 1 year ago โ€ข 0 comments

Provide a general summary of the issue here

Annotations on bars a designed so that if the width of the annotation is wider than the bar width, it will hide the annotation so that it can't collide with neighboring annotations/bars. When horizontal bars were added, this logic was not updated. It should instead be, if the bar height is shorter than the text height for horizontal bars but it's still setup the original way.

This means that annotations will be hidden when they shouldn't.

๐Ÿค” Expected Behavior?

For horizontal bars, annotations should be hidden if they are taller than the bars For vertical bars, annotations should be hidden if they are wider than the bars

๐Ÿ˜ฏ Current Behavior

For vertical and horizontal bars, annotations are be hidden if they are wider than the bars

๐Ÿ’ Possible Solution

Update the expressions that hide the annotations if they are too large: https://github.com/adobe/react-spectrum-charts/blob/main/src/specBuilder/bar/barUtils.ts#L325 https://github.com/adobe/react-spectrum-charts/blob/main/src/specBuilder/bar/barUtils.ts#L346

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

https://codesandbox.io/p/sandbox/sweet-sky-3d2825?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvdw2d0d00063b6k6jo50ugc%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvdw2d0d00023b6kdt1y1332%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvdw2d0d00033b6k1zffy4xy%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvdw2d0d00053b6k89hdwmwa%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B51.04562180468267%252C48.95437819531733%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvdw2d0d00023b6kdt1y1332%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvdw2d0d00013b6k0lss585u%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvdw2d0d00023b6kdt1y1332%2522%252C%2522activeTabId%2522%253A%2522clvdw2d0d00013b6k0lss585u%2522%257D%252C%2522clvdw2d0d00053b6k89hdwmwa%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvdw2d0d00043b6k28a08oag%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvdw2d0d00053b6k89hdwmwa%2522%252C%2522activeTabId%2522%253A%2522clvdw2d0d00043b6k28a08oag%2522%257D%252C%2522clvdw2d0d00033b6k1zffy4xy%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clvdw2d0d00033b6k1zffy4xy%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS 14.4

๐Ÿงข Your Company/Team

Adobe

๐Ÿ•ท Tracking Issue

No response

marshallpete avatar Apr 26 '24 19:04 marshallpete