Fixed chart heights, made donut a bit wider

Added dynamic labels for campaign statuses at /campaigns

static/css/main.css

@@ -243,6 +243,9 @@
     border-top-color:#34495e
 }
 
+.chartist-chart {
+    height:175px;
+}
 
 .chartist-legend {
   list-style: none;

static/js/app/campaigns.js

@@ -1,3 +1,12 @@
+// labels is a map of campaign statuses to
+// CSS classes
+var labels = {
+    "In progress" : "label-primary",
+    "Queued" : "label-info",
+	"Completed" : "label-success",
+	"Error" : "label-danger"
+}
+
 // Save attempts to POST to /campaigns/
 function save(){
     var campaign = {
@@ -56,10 +65,11 @@ $(document).ready(function(){
             $("#campaignTable").show()
             campaignTable = $("#campaignTable").DataTable();
             $.each(campaigns, function(i, campaign){
+                label = labels[campaign.status] || "label-default";
                 campaignTable.row.add([
                     campaign.name,
                     moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
-                    "<span class=\"label label-primary\">" + campaign.status + "</span>",
+                    "<span class=\"label " + label + "\">" + campaign.status + "</span>",
                     "<div class='pull-right'><button class='btn btn-primary' onclick='alert(\"test\")'>\
                     <i class='fa fa-bar-chart'></i>\
                     </button>\

static/js/app/dashboard.js

@@ -17,7 +17,7 @@ $(document).ready(function(){
             }
             var average_opts = {
                 donut : true,
-                donutWidth: 30,
+                donutWidth: 40,
                 chartPadding: 0,
                 showLabel: false
             }

templates/dashboard.html

@@ -32,12 +32,12 @@
     </div>
     <div>
         <div class="row">
-            <div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12 chartist-chart">
                 <p style="text-align:center;">Phishing Success Overview</p>
             </div>
             <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                 <p style="text-align:center;">Average Phishing Results</p>
-                <div id="average_chart" class="col-lg-7 col-md-7"></div>
+                <div id="average_chart"class="col-lg-7 col-md-7 chartist-chart"></div>
                 <div id="average_chart_legend" class="col-lg-5 col-md-5">
                     <ul class="chartist-legend">
                         <li>