gistfile1.txt

window.FlotBar = React.createClass({

	getDefaultProps: function() {
		return {
			data: [],
			id: "",
		}
	},

	drawGraph: function() {
		var options = {
			bars: {
        show: true,
        align:'center',
        barWidth: 0.5,
    	},
	    hoverable: true,
      grid: {
		    show: true,
		    aboveData: false,
		    color: '#fff',
		    backgroundColor: '#212A36',
		    borderColor: '#212A36',
		    clickable: true,
		    hoverable: true,
			},
			xaxis: {
				show: false,
				ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']],
 		 		tickLength: 0,
 		 		axisLabel: 'Campaigns',
 		 		axisLabelFontSizePixels: 12,
 		 		color:'#7B94A3',
 		 		axisLabelUseCanvas: false,
 		 		min: 0.1
			},
			yaxis:{
				tickLength: 0,
				color: '#7B94A3',
				lineStyle: "dashed",
			},
			bars:{
				color: '#fff',
				show: true,
				barWidth: 0.4,
				fill: 1.0
			},
			tooltip: {
			    show: true,
			    content: this.generateTooltip
			}
		}

		var node = this.refs.chartNode.getDOMNode();
		console.log(node);

		$.plot(node, [
	    {
	        data: this.props.data,
	        color: "#1ab394", 
	        clickable: true,
	    }
		], options);

		$('.flot-tick-label.tickLabel').css('color','#7B94A3');

		$("#" + this.props.id).bind("plotclick", function (event, pos, item) {
        if (item) {
        	GraphActions.updateCampaign(item.datapoint[0]);
          $('#myModal').modal('show');
        }
    });
	},

	componentDidMount: function() {
		this.drawGraph();
	},

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

	generateTooltip: function(label, xval, yval, flotItem) {
		return "<div class='graph-tooltip' style='color:#000;font-size:14px'> Campaign: " + xval + "<br/> Rate: " + yval + "% </div>"
	},

	render: function() {
		return (
			<div className="flot-chart" id={this.props.id} ref="chartNode"></div>
		);
	}

});