[RSPEED-2053] Fix legend hovering after PF6 upgrade #236
Conversation
| getInteractiveLegendEvents, | ||
| getInteractiveLegendItemStyles, | ||
| } from '@patternfly/react-charts/victory'; | ||
| import { VictoryLegend } from 'victory-legend'; |
There was a problem hiding this comment.
I'm not sure if we want to use directly the vicotry-legend as it seems to me we won't have the patternfly customizations (patternfly charts are based on victory). When I check the interactive legend in patternfly docs, ChartLegend and getInteractiveLegendEvents are still used in the code.
I believe it's also the source of difference in the look, notice the bigger gap and missing crossed eye. This is how it looks now:
and this is with the previous code (basically the same look as in the patternfly docs):
There was a problem hiding this comment.
Good catch thanks! I was able to use the patternfly components instead of directly from Victory
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## pf6-upgrade #236 +/- ##
==============================================
Coverage ? 61.52%
==============================================
Files ? 40
Lines ? 7412
Branches ? 697
==============================================
Hits ? 4560
Misses ? 2823
Partials ? 29 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| })} | ||
| legendComponent={ | ||
| <ChartLegend | ||
| name="chart5-ChartLegend" |
There was a problem hiding this comment.
I had a feeling we probably should use styles from getInteractiveLegendItemStyles to reduce complexity. So I tried a small collab with gpt-5.1-codex and here is the result: Only thing we need it to use custom event handling instead of the onLegendClick - this seems buggy in our use case. So then the Chart looks like:
<Chart
key={renderKey} // Force re-render when renderKey changes
legendAllowWrap
ariaDesc="Support timelines of packages and RHEL versions"
legendComponent={
<ChartLegend
name="chart5-ChartLegend"
events={[
{
target: 'data',
eventHandlers: {
onClick: (_event, props) => {
handleLegendClick({ index: props.index });
return [];
},
},
},
{
target: 'labels',
eventHandlers: {
onClick: (_event, props) => {
handleLegendClick({ index: props.index });
return [];
},
},
},
]}
symbolSpacer={1}
borderPadding={{ top: 12, bottom: 0, left: 10, right: 0 }}
data={getLegendData()}
height={50}
gutter={20}
/>
}
legendPosition="bottom-left"
...
events moved to ChartLegend and added padding on the left. Any other change is needed. From my testing, this seems to be working. Could you please check if that works also for you?
There was a problem hiding this comment.
ahhh, I see. The onHover doesn't work, I forgot it should work.... Sorry
There was a problem hiding this comment.
I tried to get it to work, only benefit I see is missing calculation of the legend symbol (if there should be square or eyeslash, it's handled by patternfly logic). Otherwise, it uses manual handling of the actions. You can check, but your solution is also nice!
onhover.txt
(It's a git diff output, GitHub just doesn't allow .diff files, so I used .txt. You can apply it using git apply onhover.txt in the repo.)
2 participants
Description
This PR fixes the issue with legend hovering since upgrading to patternfly 6.
Jira link:
RSPEED-2053
Screenshots
Before:
After:
Checklist ☑️