Feat enterleave

[mjsarfatti]

So, I added support for onMouseEnter and onMouseLeave, on Bar, Pie and Scatterplot at the moment.

If everything looks ok to you I can add support to all the other types (all except Calendar maybe), in their SVG version (I don't think it's needed in the Canvas one, at least for now).

Here is a simple example of use:

<Pie
    {...commonProperties}
    onMouseEnter={(data, event) => {
        console.log({ is: 'mouseenter', data, event }) // eslint-disable-line
    }}
    onMouseLeave={(data, event) => {
        console.log({ is: 'mouseleave', data, event }) // eslint-disable-line
    }}
/>

This allows to connect two or more charts (Eg. when I hover an element on one, the corresponding element on the second one highlights).

It does not interphere with the tooltip functionality.

[pmsoltani]

Hi
This is, indeed, a necessary feature for any interactive chart. I'd like to mention that the docs at https://nivo.rocks/bar do not mention this. They only cover "onClick".

Also, I've implemented the feature in my own chart, but the result lags behind a bit. Perhaps I'm doing something wrong? (Basically, I want to change the bar color and remove the bar's "borderRadius" on hover)

class BarChart extends Component {
  constructor(props) {
    super(props);
    this.state = { currentBarColor: null };
  }

  saveColor(color) {
    this.setState({ currentBarColor: color }, () => {});
  }

  render() {
    const data = [
      { year: "2011", sales: 190 },
      { year: "2012", sales: 61 },
      { year: "2013", sales: 31 },
      { year: "2014", sales: 106 },
      { year: "2015", sales: 109 },
      { year: "2016", sales: 16 },
      { year: "2017", sales: 16 },
      { year: "2018", sales: 16 },
      { year: "2019", sales: 16 }
    ];
    return (
      <ResponsiveBar
        data={data}
        colors={{ scheme: "nivo" }}
        borderRadius={4}

        {...otherProperties}

        onMouseEnter={(data, event) => {
          let color = event.target.getAttribute("fill");
          this.saveColor(color);
          event.target.style.fill = "#ff0000";
          event.target.style.rx = "0";
          event.target.style.ry = "0";
        }}
        onMouseLeave={(_data, event) => {
          event.target.style.fill = this.state.currentBarColor;
          event.target.style.rx = "4";
          event.target.style.ry = "4";
        }}
      />
    );
  }
}