react-zeanium-ui-ui/src/chart/StateChart.js

Zeanium UI Framework for React.js

require('./chart.less');
require('./StateChart.less');
var React = require('react');

Date.prototype.format =function(format){
	var o = {
		"M+" : this.getMonth()+1, //month
		"d+" : this.getDate(), //day
		"h+" : this.getHours(), //hour
		"m+" : this.getMinutes(), //minute
		"s+" : this.getSeconds(), //second
		"q+" : Math.floor((this.getMonth()+3)/3), //quarter
		"S" : this.getMilliseconds() //millisecond
	}
	if(/(y+)/.test(format)){
		format=format.replace(RegExp.$1, (this.getFullYear()+"").substr(4- RegExp.$1.length));
	}
	for(var k in o){
		if(new RegExp("("+ k +")").test(format)) {
			format = format.replace(RegExp.$1, RegExp.$1.length==1? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
		}
	}
	return format;
}

function rd(n, m){
    var c = m-n+1;
    return Math.floor(Math.random() * c + n);
}

module.exports = React.createClass({
	displayName:'StateChart',
	getInitialState:function(){
		var _data = [];
		for(var i=0; i<50; i++){
			_data.push(null);
		}
		return {
			loading: false,
			data: _data
		}
	},
	componentDidMount:function(){
		this._interval = setInterval(function (){
			this.state.data.push({
				x: (new Date()).format('hh:mm:ss'),
				value: rd(0, 2)
			});
			if (this.state.data.length > 50){
				//window.clearInterval(this._interval);
				this.state.data.shift();
			}
			this.forceUpdate();
		}.bind(this), 500);
		this.props.onDidMount && this.props.onDidMount(this);
	},
	loading: function (loading){
		this.setState({ loading: loading });
	},
	xRender: function (){

	},
	render:function(){
		return (
			<div className={"c-chart c-chart-state " + (this.state.loading?'loading':'')}  style={this.props.style}>
				<div className="chart-container">
					<div className="chart-content">
						<ul>
							{
								this.state.data.map(function (item, index){
									return <li key={index}>
										{item&&<div><span className={"point status-"+item.value}></span></div>}
									</li>;
								})
							}
						</ul>
					</div>
				</div>
				<div className="chart-x">
					<ul>

					</ul>
				</div>
				<div className="chart-y">

				</div>
			</div>
		);
	}
});