localhots/empact
1
0
Fork 0
Code Releases Activity

Nice barchart

Browse Source
This commit is contained in:
Gregory Eremin 2015-03-08 17:02:14 +07:00
parent 6ebab740b7
commit 311bd021a8
7 changed files with 140 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/app.html
View File

@ -5,6 +5,7 @@
<title>Empact</title> <title>Empact</title>
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css"> <link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="/styles/app.css"> <link rel="stylesheet" href="/styles/app.css">
<link rel="stylesheet" href="/styles/charts.css">
</head> </head>
<body></body> <body></body>
<script src="/bower_components/react/react.js"></script> <script src="/bower_components/react/react.js"></script>

16
app/scripts/app.jsx
View File

@ -34,8 +34,8 @@ var Menu = React.createClass({
render: function() { render: function() {
var renderTeam = function(team) { var renderTeam = function(team) {
return ( return (
<li key={team.slug} className="nav team"> <li key={team.name} className="nav team">
<Link to="team" params={{org: team.owner, team: team.slug}}>{team.name}</Link> <Link to="team" params={{org: team.owner, team: team.name}}>{team.name}</Link>
</li> </li>
) )
}; };
@ -67,10 +67,11 @@ var Dashboard = React.createClass({
var OrgStats = React.createClass({ var OrgStats = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.Navigation, Router.State],
render: function(){ 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 ( return (
<section className="content"> <section className="content">
<BarChart url={topTeams} /> <BarChart api={topTeams} link={teamURL}/>
</section> </section>
); );
} }
@ -79,13 +80,8 @@ var OrgStats = React.createClass({
var TeamStats = React.createClass({ var TeamStats = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.Navigation, Router.State],
render: function(){ render: function(){
var url = "/api/stat/teams/top?org="+ this.getParams().org;
return ( return (
<section className="content"> <section className="content">Team stats!</section>
<div className="left">
<BarChart url={url} />
</div>
</section>
); );
} }
}); });

67
app/scripts/charts.js
View File

@ -1,14 +1,22 @@
var Router = ReactRouter;
var BarChart = React.createClass({displayName: "BarChart", var BarChart = React.createClass({displayName: "BarChart",
barHeight: 40, barHeight: 40,
barMargin: 5, barMargin: 5,
getInitialState: function() { getInitialState: function() {
return {points: []}; return {points: [], max: 1};
}, },
componentDidMount: function() { componentDidMount: function() {
$.get(this.props.url, function(res){ $.get(this.props.api, function(res){
this.setState({points: res}); var max = 1;
res.map(function(el) {
if (el.value > max) {
max = el.value
}
});
this.setState({points: res, max: max});
}.bind(this)) }.bind(this))
}, },
@ -25,22 +33,45 @@ var BarChart = React.createClass({displayName: "BarChart",
}, },
render: function() { 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 ( return (
React.createElement("svg", {className: "bar_chart", width: "100%", height: this.height()}, React.createElement("svg", {className: "barchart", width: "100%", height: this.height()},
this.state.points.map(renderPoint) 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)
) )
); );
} }

67
app/scripts/charts.jsx
View File

@ -1,14 +1,22 @@
var Router = ReactRouter;
var BarChart = React.createClass({ var BarChart = React.createClass({
barHeight: 40, barHeight: 40,
barMargin: 5, barMargin: 5,
getInitialState: function() { getInitialState: function() {
return {points: []}; return {points: [], max: 1};
}, },
componentDidMount: function() { componentDidMount: function() {
$.get(this.props.url, function(res){ $.get(this.props.api, function(res){
this.setState({points: res}); var max = 1;
res.map(function(el) {
if (el.value > max) {
max = el.value
}
});
this.setState({points: res, max: max});
}.bind(this)) }.bind(this))
}, },
@ -25,23 +33,46 @@ var BarChart = React.createClass({
}, },
render: function() { 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 ( return (
<svg className="bar_chart" width="100%" height={this.height()}> <svg className="barchart" width="100%" height={this.height()}>
{this.state.points.map(renderPoint)} {this.state.points.map(this.renderBar)}
</svg> </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>
);
} }
}); });

24
app/scripts/colors.js
View File

@ -36,6 +36,30 @@ var Colors = [
"#252F99", "#00CCFF", "#674E60", "#FC009C", "#92896B" "#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() { function randomColor() {
return Colors[Math.floor(Math.random()*Colors.length)]; return Colors[Math.floor(Math.random()*Colors.length)];
} }

1
app/styles/app.css
View File

@ -28,6 +28,7 @@ li.nav {
} }
.content { .content {
margin-top: 15px;
width: calc(100% - 13em); width: calc(100% - 13em);
} }
.content .left, .content .right { .content .left, .content .right {

10
app/styles/charts.css Normal file
View File

@ -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);
}