import React from 'react';
import Chartist from 'chartist';
import classnames from 'classnames';

export default class Chart extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      datapoint: {
        name: '',
        value: '',
      }
    };

    this.onMouseOver = this.onMouseOver.bind(this);
  }

  componentDidMount() {
    this.updateChart(this.props);
  }

  componentWillReceiveProps(newProps) {
    this.updateChart(newProps);
  }

  componentWillUnmount() {
    this.chartist.detach();
  }

  render() {
    return (
      <div>
        <div ref = "chart"
             className = {classnames('ct-chart', this.props.classnames)}
             onMouseOver = {this.onMouseOver}></div>
        <div className = "ct-tooltip">
          <span className = "ct-tooltip-name">{this.state.datapoint.name}</span>
          <span className = "ct-tooltip-value">{this.state.datapoint.value}</span>
        </div>
      </div>
    );
  }

  updateChart(props) {
    const {type, data, options = {}, responsiveOptions = [], events = {}} = props,
          create = () => {
            this.chartist = new Chartist[type](React.findDOMNode(this.refs.chart), data, options, responsiveOptions);

            Object.keys(events).forEach(x => this.chartist.on(x, events[x].bind(this.chartist)));
          };

    this.chartist ? this.chartist.update(data, options, true) :
    data.series ? create() :
    null;
  }

  onMouseOver({target}) {
    let $parent = target.parentNode;

    const name = $parent.attributes['ct:series-name'],
          value = target.attributes['ct:value'];

    value && this.setState({
               datapoint: {
                 name: name ? name.value : '',
                 value: value.value
               }
             });
  }
}

Chart.propTypes = {
  type: React.PropTypes.string.isRequired,
  classnames: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.object
  ]),
  data: React.PropTypes.shape({
    labels: React.PropTypes.array,
    series: React.PropTypes.array
  }),
  options: React.PropTypes.object,
  responsiveOptions: React.PropTypes.array,
  events: React.PropTypes.object
};

@@ -261,24 +261,82 @@
 ue: '',%0A
+      %7D,%0A      tooltip: %7B%0A        top: 0,%0A        left: 0%0A
       %7D%0A
     %7D;%0A%0A
@@ -323,24 +323,24 @@
 : 0%0A      %7D%0A
-
     %7D;%0A%0A    
@@ -800,33 +800,35 @@
 div className = 
-%22
+%7B%5B'
 ct-tooltip%22%3E%0A   
@@ -821,17 +821,462 @@
 -tooltip
-%22
+', this.state.tooltip.classname%5D.join(' ').trim()%7D%0A             style = %7B%7B%0A               position: 'fixed',%0A               top: this.state.tooltip.top,%0A               left: this.state.tooltip.left,%0A               minWidth: '5rem',%0A               padding: '0.5rem',%0A               border: '1px #fff solid',%0A               textAlign: 'center',%0A               fontSize: 12,%0A               color: '#fff',%0A               opacity: 0.75%0A             %7D%7D
 %3E%0A      
@@ -2019,16 +2019,65 @@
   const 
+rect = target.getBoundingClientRect(),%0A          
 name = $
@@ -2263,24 +2263,24 @@
 value : '',%0A
-
             
@@ -2303,16 +2303,201 @@
 e.value%0A
+               %7D,%0A               tooltip: %7B%0A                 classname: %60ct-tooltip-$%7B$parent.classList%5B1%5D.substr(3)%7D%60,%0A                 top: rect.top,%0A                 left: rect.left%0A
         

Add basic stylings to tooltip