
import React from 'react';
import Reflux from 'reflux';

import Donut from '../../components/donut';

import Store from './store';
import Actions from './actions';

const ExpenseDonutWidget = React.createClass({
  mixins: [
    Reflux.connectFilter(Store, "store", function(storeData) {
      return storeData.widgetData[this.props.name];
    })
  ],

  getInitialState() {
    var storeData = Store.getDefaultData(this.props.name);

    return {
      store: storeData.widgetData[this.props.name]
    };
  },

  componentDidMount() {
    Actions.load(this.props.name, this.props.url);
  },

  renderChart() {
    if (this.state.store.data.length === 0) {
      return '';
    }

    let data = this.state.store.data.map((item) => {
      return {label: this.props.categories[item.category_id].name, value: item.amount}
    });

    let colors = this.state.store.data.map((item) => {
      return this.props.categories[item.category_id].colour
    });

    return <Donut name={this.props.name}
                  data={data}
                  colors={colors} />;
  },

  render() {
    return (
      <section className="col-lg-6 connectedSortable ui-sortable">
        <div className="box box-solid bg-green-gradient">
          <div className="box-header">
            <i className="fa fa-calendar"></i>
            <h3 className="box-title">{this.props.title}</h3>
            <div className="pull-right box-tools">
              <div className="btn-group">
                <button className="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
                  <i className="fa fa-bars"></i>
                </button>
                <ul className="dropdown-menu pull-right" role="menu">
                  <li><a href="#">Add new event</a></li>
                  <li><a href="#">Clear events</a></li>
                  <li className="divider"></li>
                  <li><a href="#">View calendar</a></li>
                </ul>
              </div>
              <button className="btn btn-success btn-sm" data-widget="collapse">
                <i className="fa fa-minus"></i>
              </button>
              <button className="btn btn-success btn-sm" data-widget="remove">
                <i className="fa fa-times"></i>
              </button>
            </div>
          </div>
          <div className="box-body no-padding">
            <div id="calendar"></div>
          </div>
          <div className="box-footer text-black">
            <div className="row">
              {this.renderChart()}
            </div>
          </div>
        </div>
      </section>
    );
  }
});

export default ExpenseDonutWidget;



@@ -737,22 +737,105 @@
     
-return %7B
+let label = 'Transactions';%0A%0A      if (this.props.categories%5Bitem.category_id%5D) %7B%0A        
 label
-:
+ =
  thi
@@ -875,16 +875,53 @@
 id%5D.name
+;%0A      %7D%0A%0A      return %7Blabel: label
 , value:
@@ -994,24 +994,79 @@
 (item) =%3E %7B%0A
+      if (this.props.categories%5Bitem.category_id%5D) %7B%0A  
       return
@@ -1113,16 +1113,45 @@
 .colour%0A
+      %7D%0A%0A      return '#444'%0A
     %7D);%0A

Fix dashboard to work with `Transactions`