import React, { Component, PropTypes } from 'react';

class MyPoll extends Component {
  constructor(props){
    super(props);
    this.mydata = props.data;
    this.min = props.min;
    this.drawChart = this.drawChart.bind(this);
    this.refreshOnWindowSizeChange = this.refreshOnWindowSizeChange.bind(this);
  }

  drawChart(mydata){
    console.log('call drawChart');
    const baseElement = document.getElementById('chartContainer')
    baseElement.querySelector("svg").innerHTML = '';
    const chartWidth = document.getElementById('chartContainer').clientWidth;
    const chartHeight = window.innerHeight / 2;

    const dataInfo = mydata.reduce((p, x) => {
      const max = (p.max > x.value) ? p.max : x.value;
      const min = (p.min < x.value) ? p.min : x.value;
      return {max, min};
    }, {max: Number.MIN_VALUE, min: Number.MAX_VALUE});

    const widthScaler = d3.scaleLinear()
    .domain([0, mydata.length])
    .range([0, chartWidth]);

    const heightScaler = d3.scaleLinear()
    .domain([0, dataInfo.max])
    .range([0, chartHeight]);

    let svg = d3.select("svg")
    .attr("width", chartWidth)
    .attr("height", chartHeight);
    let g = svg.append("g")
    .attr("class", "bar");

    g.selectAll(".bar")
      .data(mydata)
      .enter().append("rect")
      .attr("width", (d, i) => widthScaler(1)*0.75 )
      .attr("height", ({value}) => heightScaler(value))
      .attr("x", (d, i) => widthScaler(i))
      .attr("y", ({value}) => heightScaler(dataInfo.max) - heightScaler(value));
  }

  refreshOnWindowSizeChange(){
    const mydata = this.mydata;
    const drawChart = this.drawChart;
    window.addEventListener("resize", ()=>drawChart(mydata));
    console.log('adding event listenr')
  }

  componentDidMount(){
    this.drawChart(this.mydata);
    this.refreshOnWindowSizeChange();
  }

  render(){
    return(
      <div>
        <div className="row">
          <div className="col-sm-6">
            Test 3
          </div>
          <div className="col-sm-6">
            Test 4
          </div>
          <div className="col-sm-6">
            Test 5
          </div>
        </div>
        <div id="chartContainer">
          <svg/>
        </div>
        <button onClick={()=>this.drawChart(this.mydata)}>Refresh State</button>
      </div>
    );
  }
}
MyPoll.propTypes = {
  data: PropTypes.object
};

export default MyPoll;

@@ -311,16 +311,46 @@
 %0A  %7D%0A%0A  
+componentDidMount()%7B%0A    this.
 drawChar
@@ -355,38 +355,66 @@
 art(
+this.
 mydata)
-%7B
+;
 %0A    
-console.log('call
+this.refreshOnWindowSizeChange();%0A  %7D%0A%0A 
  dra
@@ -423,11 +423,17 @@
 hart
-');
+(mydata)%7B
 %0A   
@@ -494,16 +494,17 @@
 tainer')
+;
 %0A    bas
@@ -1368,26 +1368,16 @@
 %22width%22,
- (d, i) =%3E
  widthSc
@@ -1390,10 +1390,10 @@
 )*0.
-75
+90
  )%0A 
@@ -1743,147 +1743,8 @@
 ));%0A
-    console.log('adding event listenr')%0A  %7D%0A%0A  componentDidMount()%7B%0A    this.drawChart(this.mydata);%0A    this.refreshOnWindowSizeChange();%0A
   %7D%0A
@@ -2114,89 +2114,8 @@
 iv%3E%0A
-        %3Cbutton onClick=%7B()=%3Ethis.drawChart(this.mydata)%7D%3ERefresh State%3C/button%3E%0A
     
@@ -2181,16 +2181,41 @@
 s.object
+,%0A  min: PropTypes.number
 %0A%7D;%0A%0Aexp

fix code warnings