d3rrc
Version:
Reusable D3 Charts for React.js
139 lines (133 loc) • 4.26 kB
HTML
<meta charset="utf-8">
<html>
<head>
<script type="text/javascript" src="../js/react-with-addons.js"></script>
<script type="text/javascript" src="../../dist/bundle.js"></script>
<script src="../js/JSXTransformer.js"></script>
</head>
<body>
<h1>Multi Line Chart</h1>
<div id="output"></div>
<script type="text/jsx">
var LineChart = D3RRC.LineChart;
var seriesNames = function(d){
return d.name;
};
var seriesValues = function(d){
return d.values;
};
var pointNames = function(d){
return d.text;
};
var pointValues = function(d){
return d.value;
};
var pointIndexes = function(d, i){
return d.index;
};
var data = (function(num, size){
var data = [], series;
var i, l=size, j=0, k=num;
for(; j<k; j++){
series = {name: 'Series '+j, values: []};
for(i=0; i<l; i++){
series.values.push({
value: Math.floor(Math.random() * 90)+10,
text: "Series "+j+" - Value "+i,
index: i
});
series.max = i;
}
series.num = j;
data.push(series);
}
return data;
})(2, 10);
var itterations = 0;
var Demo = React.createClass({
getInitialState(){
return {
data: this.props.data||[]
}
},
componentDidMount(){
setInterval(function(){
var data = this.state.data;
var max = data[0].max;
itterations++;
if(itterations % 5 === 0){
var val = {
value: Math.floor(Math.random() * 90)+10,
text: "Series "+itterations+" - Value "+max,
index: max-1
};
data.push({
name: 'Series '+itterations,
num: itterations,
max: max,
values: [val]
});
if(data.length > 5){
data.shift();
}
}
data.forEach(function(series){
var val = {
value: Math.floor(Math.random() * 90)+10,
text: "Series "+series.num+" - Value "+series.max,
index: series.max
};
if(series.values.length >= 10){
series.values.shift();
}
series.max++;
series.values.push(val);
});
this.setState({
data: data
});
}.bind(this), 1000);
},
render(){
var style = {
'.axis path': 'fill: none; stroke: #000; shape-rendering: crispEdges;',
'.axis line': 'fill: none; stroke: #000; shape-rendering: crispEdges;',
'.x.axis path': 'display: none;',
'.line': 'fill: none; stroke-width: 1.5px;',
};
return (<LineChart
chart-height="320"
chart-seriesNames={seriesNames}
chart-seriesValues={seriesValues}
chart-pointNames={pointNames}
chart-pointValues={pointValues}
chart-pointIndexes={pointIndexes}
chart-lineInterpolation="cardinal"
chart-style={style}
data={this.state.data}
/>);
}
});
React.render(
<Demo data={data} />,
document.getElementById('output')
);
//SOURCE DUMP
var src = document.querySelector('[type="text/jsx"]').innerText
.split('//SOURCE DUMP').shift();
var pre = document.createElement('pre');
var ws = src.match(/[ \t]+/).shift();
var reWS = new RegExp('^'+ws, 'gm');
var header = document.createElement('h2');
header.innerText = 'Source';
pre.style.padding="10px 10px 10px 10px";
pre.style.margin="0px 0px 0px 0px";
pre.style.background='silver';
pre.style.border='1px solid black';
pre.appendChild(document.createTextNode(src.replace(reWS, '').trim()));
document.body.appendChild(header);
document.body.appendChild(pre);
</script>
</body>
</html>