Add click interactions on legend items

[markov00]

Is your feature request related to a problem? Please describe.
Add click interaction on legend items.
Ideally used to hide/show a series.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Kibana Cross Issues
elastic/kibana#21084

Checklist

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[emmacunningham]

@markov00 Should we also change the domains of the axes based on the currently selected series? For example in the chart below, notice that the y-axis domain changes between the two views because when filtering for just the blue series, the upper bound of values is lower than when all of the series are displayed.

[markov00]

@emmacunningham I think we can just send out the information to an registered listener instead of doing anything on charts (like real filtering on data).
This because we don't know what user want to achieve on clicking, so i rether prefer having just an event, like the click on a bar, with the necessary information when clicking on a legend item.
Will be than the external app to apply filters or whatelse.
Also please check how it's currently handled in kibana:
we have few interactions on legend items: on click open a small panel with a color picker and the possibility to + o - (filter in our out the specific series)
I think we can include that on the legend (all these action will be just events)

[emmacunningham]

@markov00 Great, I've set up the listeners so that they can be passed into the settings and will receive the necessary information to identify the data series selected.

Will add the panel with listeners as well.

[emmacunningham]

@cchaos Do you have a recommendation for what the dropdown panel should look like in the new charts to be consistent with EUI? This is what it currently looks like in Kibana:

I assume we want to use the new EUI color picker component as well as the button icons for the +/- buttons? I was also wondering which components should be used for the panel itself. I was looking through the EUI styleguide and the closest component I could think of was a context menu with custom elements but wondering if there is something better to use. Thanks!

[cchaos]

Hey @emmacunningham I have many thoughts so I'd like to not rush into a decision here. Unfortunately I'm traveling tomorrow (Friday) so I wont have much time before next week to get you something concrete. Off the bat, my gut is that the dot indicating the color in the legend should be the only think clickable to change the color and that it essentially opens the color picker. Then clicking the text part of the legend would filter for that category. But shift clicking it would filter out the category. The tooltip on the item should not display the label but the interaction available for clicking. Meaning, describe that by clicking it will filter for and to filter out, use shift plus click. You can add the delay="long" prop so the tooltip only shows on a prolonged hover.

Hopefully that gives you a starting point and I apologize for any typos as I'm typing this on my phone. ;)

[emmacunningham]

Yes, this is great for a starting point, thanks @cchaos !

[markov00]

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀