Org and team charts

app/scripts/app.jsx

@@ -67,11 +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,
-            teamURL = "/app/"+ this.getParams().org +"/teams/";
+        var topRepos = "/api/stat/orgs/top?org="+ this.getParams().org +"&item=repo",
+            repoURL = "/app/"+ this.getParams().org +"/repos/";
         return (
             <section className="content">
-                <BarChart api={topTeams} link={teamURL}/>
+                <BarChart api={topRepos} link={repoURL}/>
             </section>
         );
     }
@@ -80,8 +80,12 @@ var OrgStats = React.createClass({
 var TeamStats = React.createClass({
     mixins: [Router.Navigation, Router.State],
     render: function(){
+        var topRepos = "/api/stat/teams/top?org="+ this.getParams().org +"&team="+ this.getParams().team +"&item=repo",
+            repoURL = "/app/"+ this.getParams().org +"/repos/";
         return (
-            <section className="content">Team stats!</section>
+            <section className="content">
+                <BarChart api={topRepos} link={repoURL}/>
+            </section>
         );
     }
 });

app/scripts/charts.js

@@ -1,78 +0,0 @@
-var Router = ReactRouter;
-
-var BarChart = React.createClass({displayName: "BarChart",
-    barHeight: 40,
-    barMargin: 5,
-
-    getInitialState: function() {
-        return {points: [], max: 1};
-    },
-
-    componentDidMount: function() {
-        $.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))
-    },
-
-    height: function() {
-        if (this.state.points.length === 0) {
-            return 0;
-        } else {
-            return this.y(this.state.points.length) - this.barMargin;
-        }
-    },
-
-    y: function(i) {
-        return i*(this.barHeight + this.barMargin);
-    },
-
-    render: function() {
-        return (
-            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)
-            )
-        );
-    }
-});

app/scripts/charts.jsx

@@ -10,10 +10,11 @@ var BarChart = React.createClass({
 
     componentDidMount: function() {
         $.get(this.props.api, function(res){
+            res = res.slice(0, 15);
             var max = 1;
             res.map(function(el) {
-                if (el.value > max) {
-                    max = el.value
+                if (el.commits > max) {
+                    max = el.commits
                 }
             });
             this.setState({points: res, max: max});
@@ -44,7 +45,7 @@ var BarChart = React.createClass({
         return (
             <Bar key={point.item} point={point} i={i} link={this.props.link}
                 y={this.y(i)}
-                width={point.value/this.state.max}
+                width={point.commits/this.state.max}
                 height={this.barHeight} />
         );
     }
@@ -59,9 +60,10 @@ var Bar = React.createClass({
     render: function() {
         var p = this.props.point
             w = this.props.width*500,
-            label = p.item + ": " + p.value,
+            label = p.item + ": " + p.commits,
+            lw = label.length*10 + 5,
             tx = 10;
-        if (label.length*15 > w) {
+        if (lw > w) {
             tx = w + tx;
         }
         return (
@@ -70,7 +72,7 @@ var Bar = React.createClass({
                     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" />
+                <rect className="label_underlay" x={tx-6} y={this.props.y+10} height={20} width={lw} rx="3" ry="3" />
                 <text className="label" x={tx} y={this.props.y + 26}>{label}</text>
             </g>
         );