53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
|
var React = require('react');
|
||
|
|
|
||
|
|
var Panel = require('react-bootstrap').Panel;
|
||
|
|
|
||
|
|
module.exports = React.createClass({
|
||
|
|
displayName: "BarChart",
|
||
|
|
render: function() {
|
||
|
|
/* Expects 'this.props.data' to be in the form:
|
||
|
|
* var data = [
|
||
|
|
* {'label': 'foo', 'value': 1.4},
|
||
|
|
* {'label': 'bar', 'value': 8}
|
||
|
|
* ];
|
||
|
|
*/
|
||
|
|
if (this.props.data.length < 1)
|
||
|
|
return (<div />);
|
||
|
|
|
||
|
|
var max = parseFloat(this.props.data[0].value);
|
||
|
|
var min = parseFloat(this.props.data[0].value);
|
||
|
|
for (var i = 0; i < this.props.data.length; i++) {
|
||
|
|
var cur = parseFloat(this.props.data[i].value);
|
||
|
|
if (cur > max)
|
||
|
|
max = cur;
|
||
|
|
if (cur < min)
|
||
|
|
min = cur;
|
||
|
|
}
|
||
|
|
|
||
|
|
var rows = [];
|
||
|
|
for (var i = 0; i < this.props.data.length; i++) {
|
||
|
|
var rowData = this.props.data[i];
|
||
|
|
if ((max - min) == 0.0)
|
||
|
|
var percent = 100;
|
||
|
|
else if (min < 0)
|
||
|
|
var percent = 100*(parseFloat(rowData.value)-min)/(max-min);
|
||
|
|
else
|
||
|
|
var percent = 100*parseFloat(rowData.value)/max;
|
||
|
|
rows.push((
|
||
|
|
<tr key={i}>
|
||
|
|
<td style={{'width': '20%'}}>{rowData.label + " (" + rowData.value + ")"}</td>
|
||
|
|
<td style={{'width': '80%'}}><div style={{'width': percent + "%", 'backgroundColor': 'steelblue'}}> </div></td>
|
||
|
|
</tr>
|
||
|
|
));
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Panel header={this.props.title}>
|
||
|
|
<table style={{'width': '100%'}}><tbody>
|
||
|
|
{rows}
|
||
|
|
</tbody></table>
|
||
|
|
</Panel>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|