post-comment-chart

post_comment_chart.js.jsx

var PostsCommentsChart = React.createClass({
  getInitialState: function() {
    return {
      data: [],
      step: ""
    };
  },

  handleChange: function(data) {
    var self = this;
    $.ajax({
      url: '/posts/set_posts_chart',
      type: 'GET',
      dataType: 'json',
      data: {
        start_at: data.start_at,
        end_at: data.end_at,
        step: data.step
      },
      success: function(data) {
        console.log("Change DatePicker: success");
        self.setState({
          data: data
        })
      },
      error: function(error){
        console.log('something wrong');
      }
    })
  },

  radioClick: function(e) {
    this.setState({step: e.target.value});
  },

  render: function(){
    return(
      <div>
        <div className="row">
          <div className="title col-md-4">
            <h4>Posts/Comments Chart</h4>
          </div>
          <div className="posts-comments-chart col-md-3">
            <DatePicker isChange={this.handleChange}/>
          </div>
          <div className="col-md-3">
            <label className="radio-inline">
              <input type="radio" name="optradio" value="day" onChange={this.radioClick}/>Day
            </label>
            <label className="radio-inline">
              <input type="radio" name="optradio" value="week" onChange={this.radioClick}/>Week
            </label>
            <label className="radio-inline">
              <input type="radio" name="optradio" value="month" onChange={this.radioClick}/>Month
            </label>
          </div>
        </div>
        <div className="row">
          <div className="col-md-12">
            <div style={{height: 250}} id={this.props.graph_name}></div>
          </div>
        </div>
      </div>
     )
  },

  componentDidMount: function() {
    this.handleChange({start_at: "", end_at: ""})
  },

  componentDidUpdate: function() {
    this.drawChart();
  },

  drawChart: function(){
    var arrData = [];
    this.state.data.map(function(item) {
      arrData.push([item[0], item[1], item[2], item[3], item[4]]);
    })

    var options = {
      height: 400,
      legend: { position: 'top', maxLines: 3 },
      bar: { groupWidth: '75%' },
      isStacked: true,
      annotations: {
      boxStyle: {
        gradient:{
          color1: '#547fbb',
          color2: '#91d9fc'
          }
        }
      }
    };

    var chart = new google.visualization.ColumnChart(
      document.getElementById(this.props.graph_name)
    );
    chart.draw(google.visualization.arrayToDataTable(arrData), options);
  }
})