Nice barchart
This commit is contained in:
parent
6ebab740b7
commit
311bd021a8
app
|
@ -5,6 +5,7 @@
|
|||
<title>Empact</title>
|
||||
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
|
||||
<link rel="stylesheet" href="/styles/app.css">
|
||||
<link rel="stylesheet" href="/styles/charts.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script src="/bower_components/react/react.js"></script>
|
||||
|
|
|
@ -34,8 +34,8 @@ var Menu = React.createClass({
|
|||
render: function() {
|
||||
var renderTeam = function(team) {
|
||||
return (
|
||||
<li key={team.slug} className="nav team">
|
||||
<Link to="team" params={{org: team.owner, team: team.slug}}>{team.name}</Link>
|
||||
<li key={team.name} className="nav team">
|
||||
<Link to="team" params={{org: team.owner, team: team.name}}>{team.name}</Link>
|
||||
</li>
|
||||
)
|
||||
};
|
||||
|
@ -67,10 +67,11 @@ var Dashboard = React.createClass({
|
|||
var OrgStats = React.createClass({
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
render: function(){
|
||||
var topTeams = "/api/stat/teams/top?org="+ this.getParams().org;
|
||||
var topTeams = "/api/stat/teams/top?org="+ this.getParams().org,
|
||||
teamURL = "/app/"+ this.getParams().org +"/teams/";
|
||||
return (
|
||||
<section className="content">
|
||||
<BarChart url={topTeams} />
|
||||
<BarChart api={topTeams} link={teamURL}/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -79,13 +80,8 @@ var OrgStats = React.createClass({
|
|||
var TeamStats = React.createClass({
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
render: function(){
|
||||
var url = "/api/stat/teams/top?org="+ this.getParams().org;
|
||||
return (
|
||||
<section className="content">
|
||||
<div className="left">
|
||||
<BarChart url={url} />
|
||||
</div>
|
||||
</section>
|
||||
<section className="content">Team stats!</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,14 +1,22 @@
|
|||
var Router = ReactRouter;
|
||||
|
||||
var BarChart = React.createClass({displayName: "BarChart",
|
||||
barHeight: 40,
|
||||
barMargin: 5,
|
||||
|
||||
getInitialState: function() {
|
||||
return {points: []};
|
||||
return {points: [], max: 1};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
$.get(this.props.url, function(res){
|
||||
this.setState({points: res});
|
||||
$.get(this.props.api, function(res){
|
||||
var max = 1;
|
||||
res.map(function(el) {
|
||||
if (el.value > max) {
|
||||
max = el.value
|
||||
}
|
||||
});
|
||||
this.setState({points: res, max: max});
|
||||
}.bind(this))
|
||||
},
|
||||
|
||||
|
@ -25,22 +33,45 @@ var BarChart = React.createClass({displayName: "BarChart",
|
|||
},
|
||||
|
||||
render: function() {
|
||||
var renderPoint = function(point, i) {
|
||||
return (
|
||||
React.createElement("g", {key: point.item},
|
||||
React.createElement("rect", {
|
||||
fill: colorFor(point.item),
|
||||
width: point.value,
|
||||
height: this.barHeight,
|
||||
x: "0",
|
||||
y: this.y(i)}),
|
||||
React.createElement("text", {x: "20", y: this.y(i) + 25}, point.item + ": " + point.value)
|
||||
)
|
||||
);
|
||||
}.bind(this)
|
||||
return (
|
||||
React.createElement("svg", {className: "bar_chart", width: "100%", height: this.height()},
|
||||
this.state.points.map(renderPoint)
|
||||
React.createElement("svg", {className: "barchart", width: "100%", height: this.height()},
|
||||
this.state.points.map(this.renderBar)
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
renderBar: function(point, i) {
|
||||
return (
|
||||
React.createElement(Bar, {key: point.item, point: point, i: i, link: this.props.link,
|
||||
y: this.y(i),
|
||||
width: point.value/this.state.max,
|
||||
height: this.barHeight})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Bar = React.createClass({displayName: "Bar",
|
||||
mixins: [Router.Navigation],
|
||||
handleClick: function(e) {
|
||||
this.transitionTo(this.props.link + this.props.point.item);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var p = this.props.point
|
||||
w = this.props.width*500,
|
||||
label = p.item + ": " + p.value,
|
||||
tx = 10;
|
||||
if (label.length*15 > w) {
|
||||
tx = w + tx;
|
||||
}
|
||||
return (
|
||||
React.createElement("g", {onClick: this.handleClick},
|
||||
React.createElement("rect", {className: "bar", fill: Colors2[this.props.i],
|
||||
width: this.props.width*500,
|
||||
height: this.props.height,
|
||||
x: "0", y: this.props.y, rx: "2", ry: "2"}),
|
||||
React.createElement("rect", {className: "label_underlay", x: tx-6, y: this.props.y+10, height: 20, width: label.length*10+5, rx: "3", ry: "3"}),
|
||||
React.createElement("text", {className: "label", x: tx, y: this.props.y + 26}, label)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,14 +1,22 @@
|
|||
var Router = ReactRouter;
|
||||
|
||||
var BarChart = React.createClass({
|
||||
barHeight: 40,
|
||||
barMargin: 5,
|
||||
|
||||
getInitialState: function() {
|
||||
return {points: []};
|
||||
return {points: [], max: 1};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
$.get(this.props.url, function(res){
|
||||
this.setState({points: res});
|
||||
$.get(this.props.api, function(res){
|
||||
var max = 1;
|
||||
res.map(function(el) {
|
||||
if (el.value > max) {
|
||||
max = el.value
|
||||
}
|
||||
});
|
||||
this.setState({points: res, max: max});
|
||||
}.bind(this))
|
||||
},
|
||||
|
||||
|
@ -25,23 +33,46 @@ var BarChart = React.createClass({
|
|||
},
|
||||
|
||||
render: function() {
|
||||
var renderPoint = function(point, i) {
|
||||
return (
|
||||
<g key={point.item}>
|
||||
<rect
|
||||
fill={colorFor(point.item)}
|
||||
width={point.value}
|
||||
height={this.barHeight}
|
||||
x="0"
|
||||
y={this.y(i)} />
|
||||
<text x="20" y={this.y(i) + 25}>{point.item + ": " + point.value}</text>
|
||||
</g>
|
||||
);
|
||||
}.bind(this)
|
||||
return (
|
||||
<svg className="bar_chart" width="100%" height={this.height()}>
|
||||
{this.state.points.map(renderPoint)}
|
||||
<svg className="barchart" width="100%" height={this.height()}>
|
||||
{this.state.points.map(this.renderBar)}
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
|
||||
renderBar: function(point, i) {
|
||||
return (
|
||||
<Bar key={point.item} point={point} i={i} link={this.props.link}
|
||||
y={this.y(i)}
|
||||
width={point.value/this.state.max}
|
||||
height={this.barHeight} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Bar = React.createClass({
|
||||
mixins: [Router.Navigation],
|
||||
handleClick: function(e) {
|
||||
this.transitionTo(this.props.link + this.props.point.item);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var p = this.props.point
|
||||
w = this.props.width*500,
|
||||
label = p.item + ": " + p.value,
|
||||
tx = 10;
|
||||
if (label.length*15 > w) {
|
||||
tx = w + tx;
|
||||
}
|
||||
return (
|
||||
<g onClick={this.handleClick}>
|
||||
<rect className="bar" fill={Colors2[this.props.i]}
|
||||
width={this.props.width*500}
|
||||
height={this.props.height}
|
||||
x="0" y={this.props.y} rx="2" ry="2" />
|
||||
<rect className="label_underlay" x={tx-6} y={this.props.y+10} height={20} width={label.length*10+5} rx="3" ry="3" />
|
||||
<text className="label" x={tx} y={this.props.y + 26}>{label}</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -36,6 +36,30 @@ var Colors = [
|
|||
"#252F99", "#00CCFF", "#674E60", "#FC009C", "#92896B"
|
||||
];
|
||||
|
||||
var Colors2 = [
|
||||
"#218C8D",
|
||||
"#F97D81",
|
||||
"#6CCECB",
|
||||
"#F9E559",
|
||||
"#EF7126",
|
||||
"#8EDC9D",
|
||||
"#E04836",
|
||||
"#F39D41",
|
||||
"#8D5924",
|
||||
"#5696BC",
|
||||
"#2F5168",
|
||||
"#82AFF9",
|
||||
"#9881F5",
|
||||
"#F9D08B",
|
||||
"#29264E",
|
||||
"#72CBDB",
|
||||
"#55134E",
|
||||
"#A0596B",
|
||||
"#FEC343",
|
||||
"#EF7351",
|
||||
"#473E3F",
|
||||
"#000"
|
||||
];
|
||||
function randomColor() {
|
||||
return Colors[Math.floor(Math.random()*Colors.length)];
|
||||
}
|
||||
|
|
|
@ -28,6 +28,7 @@ li.nav {
|
|||
}
|
||||
|
||||
.content {
|
||||
margin-top: 15px;
|
||||
width: calc(100% - 13em);
|
||||
}
|
||||
.content .left, .content .right {
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
.barchart g {
|
||||
cursor: pointer;
|
||||
}
|
||||
.barchart .label {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
.barchart .label_underlay {
|
||||
fill: rgba(255, 255, 255, .8);
|
||||
}
|
Loading…
Reference in New Issue