Add chart to dashboard

css/app.css

@@ -109,3 +109,14 @@
     overflow-y: scroll;
     overflow-x: hidden;
 }
+
+.legend {
+    width: 7em;
+}
+
+.legend .title {
+    margin: 0.5em;
+    border-style: solid;
+    border-width: 0 0 0 1em;
+    padding: 0 0.3em;
+}

index.html

@@ -59,6 +59,8 @@
     <script src="lib/angular/angular-resource.js"></script>
 
     <script src="lib/jquery.gritter.min.js"></script>
+    <script src="lib/Chart.min.js"></script>
+    <script src="lib/legend.js"></script>
 
     <script src="js/app.js"></script>
     <script src="js/services.js"></script>

js/controllers.js

@@ -4,6 +4,51 @@ function MastheadController($scope) {
 }
 
 function DashboardController($scope, Container) {
+    $scope.predicate = '-Created';
+    $scope.containers = [];
+   
+    Container.query({all: 1}, function(d) {
+       var running = 0
+       var ghost = 0;
+       var stopped = 0;
+
+       for (var i = 0; i < d.length; i++) {
+           var item = d[i];
+
+           if (item.Status === "Ghost") {
+               ghost += 1;
+           } else if (item.Status.indexOf('Exit') !== -1) {
+               stopped += 1;
+           } else {
+               running += 1;
+               $scope.containers.push(new ContainerViewModel(item));
+           }
+       }
+
+      var ctx = $("#containers-chart").get(0).getContext("2d");
+      var c = new Chart(ctx);
+      var data = [
+        {
+            value: running,
+            color: '#5bb75b',
+            title: 'Running'
+        }, // running
+        {
+            value: stopped,
+            color: '#C7604C',
+            title: 'Stopped'
+        }, // stopped
+        {
+            value: ghost,
+            color: '#E2EAE9',
+            title: 'Ghost'
+        } // ghost
+      ];
+        
+      c.Doughnut(data, {}); 
+      var lgd = $('#chart-legend').get(0);
+      legend(lgd, data);
+   });
 }
 
 function MessageController($scope, Messages) {

partials/dashboard.html

@@ -3,6 +3,23 @@
     <!--<div class="sidebar span4">
         <div ng-include="template" ng-controller="SideBarController"></div>
     </div>-->
+    <div class="span12">
+        <div class="span6">
+            <h3>Running Containers</h3>
+            <ul>
+                <li ng-repeat="container in containers|orderBy:predicate">
+                    <a href="/#/containers/{{ container.Id }}/">{{ container.Command }}</a>
+                    <span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
+                </li>
+            </ul>
+        </div>
+        <div class="span6">
+            <canvas id="containers-chart">
+                Get a better broswer... Your holding everyone back.
+            </canvas>
+            <div id="chart-legend"></div>
+        </div>
+    </div>
     <div class="span12">
         <div class="jumbotron">
             <h1>DockerUI</h1>