victory icon indicating copy to clipboard operation
victory copied to clipboard

VictoryGroup fails to pass shared events to children

Open dlabrecq opened this issue 2 years ago • 2 comments

Bug Reports

Checklist

  • [x] I have read through the FAQ and Guides

  • [x] I am using the latest version of Victory

  • [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

VictoryGroup does not appear to pass shared events from its parent to its children. At least, events do not provide style props for children of VictoryGroup. I recall this worked at one point, but now it seems that events only work as expected with direct children?

Reproduction

I created an interactive legend that uses events. When hovering over legend symbols and labels, we want to highlight the data associated with that particular legend item. That is, all other data (not associated with that legend item) is muted by applying an opacity style.

Events are located on VictoryChart because the legend is a direct child. However, the events fail to provide style properties for my VictoryArea and VictoryScatter components when they're placed inside VictoryGroup. Thus, I cannot apply the component's style properly to achieve the desired functionality.

Example 1 This code sandbox shows what is expected visually, but we're not able to use VictoryGroup here. https://codesandbox.io/s/events-working-h67i5x?file=/src/App.js

chrome-capture-good

Example 2 This code sandbox does NOT work with VictoryGroup. In this scenario, events don't provide component style properties. https://codesandbox.io/s/events-not-working-d59wkm

chrome-capture-bad

dlabrecq avatar May 11 '22 02:05 dlabrecq

I noticed that you're passing an xstyle prop into VictoryArea in your non-working example. Renaming xstyle to style seems to work, as far as I can tell. Here's a forked Sandbox with the change: https://codesandbox.io/s/events-not-working-forked-k3qzy4?file=/src/App.js

jmezzacappa avatar Jul 07 '23 18:07 jmezzacappa

I had renamed style as xstyle to disable the property. I've cleaned that up - sorry for the confusion.

I was trying to show that the event does not inherit the colorScale and style props from VictoryGroup. Instead the event providing styles like fillOpacity and color; for example, we end up with solid gray.

dlabrecq avatar Jul 10 '23 14:07 dlabrecq