show chart for all milestones; #67

src/js/components/Chart.jsx

@@ -12,7 +12,7 @@ export default React.createClass({
   displayName: 'Chart.jsx',
 
   render() {
-    return <div id="chart" ref="el" />;
+    return <div id="chart" ref="el" style={this.props.style} />;
   },
 
   componentDidMount() {

src/js/components/pages/ChartPage.jsx

@@ -18,7 +18,7 @@ export default React.createClass({
 
   render() {
     let content;
-    if (!this.state.app.loading) {
+    if (!this.state.app.system.loading) {
       let projects = this.state.projects;
       // Find the milestone.
       let milestone;

src/js/components/pages/MilestonesPage.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 
 import Page from '../../lib/PageMixin.js';
 
@@ -16,13 +17,51 @@ export default React.createClass({
 
   render() {
     let content;
-    if (!this.state.app.loading) {
+    if (!this.state.app.system.loading) {
       let projects = this.state.projects;
-      content = (
-        <div>
-          <Milestones projects={projects} project={this.props} />
-        </div>
-      );
+
+      // Create the all milestones payload.
+      let data;
+      _.find(projects.list, (obj) => {
+        if (obj.owner == this.props.owner && obj.name == this.props.name) {
+          if (obj.milestones) {
+            let created_at = 'Z',
+                due_on = '0',
+                issues = {
+                  'closed': { 'list': [], 'size': 0 },
+                  'open':   { 'list': [], 'size': 0 }
+                };
+            // Merge all the milestone issues together.
+            _(obj.milestones).filter((m) => !m.stats.isEmpty).each((m) => {
+              if (m.created_at < created_at) created_at = m.created_at;
+              if (m.due_on > due_on) due_on = m.due_on;
+              _.each([ 'closed', 'open' ], (k) => {
+                issues[k].list = issues[k].list.concat(m.issues[k].list);
+                issues[k].size += m.issues[k].size;
+              });
+            }).value();
+
+            issues.closed.list = _.sortBy(issues.closed.list, 'closed_at');
+
+            // A meta milestone.
+            data = { issues, created_at, 'stats': { 'isEmpty': false } };
+
+            if (due_on != '0') data.due_on = due_on;
+          }
+          return true;
+        }
+      });
+
+      if (data) {
+        content = (
+          <div>
+            <Chart data={data} style={{ 'marginBottom': '40px' }} />
+            <Milestones projects={projects} project={this.props} />
+          </div>
+        );
+      } else {
+        content = <Milestones projects={projects} project={this.props} />
+      }
     }
 
     return (

src/js/components/pages/ProjectsPage.jsx

@@ -29,7 +29,7 @@ export default React.createClass({
 
   render() {
     let content;
-    if (!this.state.app.loading) {
+    if (!this.state.app.system.loading) {
       let projects = this.state.projects;
       if (projects.list.length) {
         if (!this.state.edit) {