Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal bars hide bar annotations when they shouldn't #268

Open
marshallpete opened this issue Apr 26, 2024 · 0 comments
Open

Horizontal bars hide bar annotations when they shouldn't #268

marshallpete opened this issue Apr 26, 2024 · 0 comments
Labels
bug Something isn't working open for contribution Issue is available for contribution rsc:Bar

Comments

@marshallpete
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working open for contribution Issue is available for contribution rsc:Bar
Projects
None yet
Development

No branches or pull requests

1 participant