search

dumptyd / vue-css-donut-chart

Lightweight Vue component for drawing pure CSS donut charts
https://dumptyd.github.io/vue-css-donut-chart/
MIT License
128 stars 19 forks source link

Hover events #22

Closed cjblomqvist closed 4 years ago

cjblomqvist commented 4 years ago

See #20 which is part of this PR as well.

Adds support for adding a class to legends and sections on hover - regardless if hovering either the legend or the section (both will get the class anyway). This makes it possible to style those elements differently on hover.

Also makes it possible to handle the case specified in #19 - although in a way that is not super nice. Basically, it's possible to watch the sectionHoverIndex data property. This property is -1 when nothing is hovered, and changes to the index of the section that is hovered whenever any hover of any section is made by the user.

dumptyd commented 4 years ago

The way you're implementing the hover behavior is very opinionated. A better approach would be to expose various events that are supported by native events, like mouseover/out/enter etc and let the user do what they want with it.

And instead of adding and emitting each event separately, we can make it a little more dynamic by specifying the list of events in one place and then using v-on and a computed property to emit and bubble these events up. This also makes adding support for new events just a single line change.

You can check out #26 to see how it's implemented right now. Closing since this is already resolved. :slightly_smiling_face: