feat: bar dimension selection ring #419
Conversation
|
🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-419 |
src/specBuilder/bar/barUtils.ts
Outdated
| strokeWidth: { value: 2 }, | ||
| stroke: { value: getColorValue('static-blue', colorScheme) }, | ||
| cornerRadius: { value: 6 }, | ||
| padding: { value: 5 }, |
There was a problem hiding this comment.
Does this do anything? Looking at the mark docs for rect I don't see anything about padding.
https://vega.github.io/vega/docs/marks/rect/
src/specBuilder/bar/barUtils.ts
Outdated
| y: { value: -5 }, | ||
| y2: { signal: 'height + 5' }, | ||
| xc: { signal: `scale('xBand', datum.${name}_selectedGroupId) + bandwidth('xBand')/2` }, | ||
| width: { signal: `bandwidth('xBand')/(1 - ${paddingRatio} / 2)` }, | ||
| } | ||
| : { | ||
| x: { value: -5 }, | ||
| x2: { signal: 'width + 5' }, |
There was a problem hiding this comment.
The 5 px added above/below the bar causes jitter when you open the popover. This is because you are adding marks that extend belong the chart area and that causes the whole chart to recalculate its size. I'm confirming with Alan but I think we want to drop this so that we don't get jitter.
Screen.Recording.2024-10-01.at.11.30.13.AM.mov
|
Thanks @marshallpete, I made some changes. There is still a slight jitter with the extra 5px removed. I've seen this in other areas as well however. |
|
🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-419 |
|
Adds a selection ring for bar charts when highlighting by dimension
Description
When highlighting by dimension, instead of changing the stoke width and color for the bar that was selected, a new selection ring will appear that circles the entire dimension selected.
Related Issue
#374
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: