gistfile1.txt

// Chart will take a metric and list
// and generate a chart
window.Chart = React.createClass({

  getDefaultProps: function() {
    return {
      metric: '',
      initialList: null,
      url: '',
      id: ''
    }
  },

  getInitialState: function() {
    return {
      active: GlobalStore.getState().activeList || this.props.initialList,
      data: []
    }
  },
  
  componentDidMount: function() {
    GlobalStore.listen(this.onChange);
    this.fetchData();
  },

  componentWillUnmount: function() {
    GlobalStore.unlisten(this.onChange)
  },

  onChange: function(state) {
    this.setState(state);
    this.fetchData();
  },

  fetchData: function() {
    component = this
    data = {user_id: this.props.user_id, 
           list_name: GlobalStore.getState().activeList, 
           metrics: "id, subject, " + this.props.metric};
    $.get(this.props.url, data)
      .done(function(response) {
        mapped = response.data.map(function(val, index, arr) {
          return [index, val[2]]
        }); 
        component.setState({data: mapped})
      })
  },

  render: function() {
    return (
        <div className="ibox float-e-margins">
            <div className="ibox-title">
                <h5>{this.props.title} for the last 60 days</h5>
            </div>
            <div className="ibox-content">
                <FlotBar data={this.state.data} id={this.props.id} key={this.props.metric} />
            </div>
            <div className="ibox-footer">
                <a data-toggle="modal" data-target="#myModal"><u>Capp notes #3</u></a> is your top performing campaign over the last 60 days.
            </div>
        </div>
    )
  }
})