Made some fixes to the timeline - waiting for chartist to support dynamic timeaxis.

Added legend to campaign_results email donut chart.

static/css/main.css

@@ -280,3 +280,27 @@
 .ct-series-a .ct-slice-donut {
     stroke:#1abc9c !important;
 }
+
+.ct-slice-donut.ct-slice-donut-error {
+    stroke:#6c7a89 !important;
+}
+
+.ct-slice-donut.ct-slice-donut-success{
+    stroke:#f05b4f !important;
+}
+
+.ct-legend-sent {
+    background-color: #1abc9c !important;
+}
+
+.ct-legend-error {
+    background-color: #6c7a89 !important;
+}
+
+.ct-legend-success {
+    background-color: #f05b4f !important;
+}
+
+.ct-legend-clicked {
+    background-color: #eb9532 !important;
+}

static/js/app/campaign_results.js

@@ -3,11 +3,30 @@
 var labels = {
     "Email Sent" : "label-primary",
     "Email Opened" : "label-info",
-	"Success" : "label-success",
     "Clicked Link" : "label-success",
 	"Error" : "label-danger"
 }
 
+//
+var classes = {
+    "Email Sent" : {
+        slice: "ct-slice-donut-sent",
+        legend: "ct-legend-sent"
+    },
+    "Email Opened" : {
+        slice: "ct-slice-donut-opened",
+        legend: "ct-legend-opened"
+    },
+    "Clicked Link" : {
+        slice: "ct-slice-donut-clicked",
+        legend: "ct-legend-clicked"
+    },
+    "Error" : {
+        slice: "ct-slice-donut-error",
+        legend: "ct-legend-error"
+    }
+}
+
 var campaign = {}
 
 function dismiss(){
@@ -39,12 +58,21 @@ $(document).ready(function(){
             // Set the title
             $("#page-title").text("Results for " + c.name)
             // Setup our graphs
-            var timeline_data = {labels:[],series:[]}
+            var timeline_data = {series:[{
+                name: "Events",
+                data: []
+            }]}
             var email_data = {series:[]}
+            var email_legend = {}
             var email_series_data = {}
             var timeline_opts = {
                 axisX: {
                     showGrid: false,
+                    type: Chartist.FixedScaleAxis,
+                    divisor: 5,
+                    labelInterpolationFnc: function(value){
+                        return moment(value).format('MMMM Do YYYY h:mm')
+                    }
                 },
                 axisY: {
                     type: Chartist.FixedScaleAxis,
@@ -52,7 +80,7 @@ $(document).ready(function(){
                     low: 0,
                     showLabel: false
                 },
-                showArea: true,
+                showArea: false,
                 plugins: []
             }
             var email_opts = {
@@ -80,14 +108,14 @@ $(document).ready(function(){
             })
             // Setup the graphs
             $.each(campaign.timeline, function(i, event){
-                timeline_data.labels.push(moment(event.time).format('MMMM Do YYYY h:mm'))
-                timeline_data.series.push([{meta : i, value: 1}])
+                console.log(moment(event.time).format('MMMM Do YYYY h:mm'))
+                timeline_data.series[0].data.push({meta : i, x: new Date(event.time), y:1})
             })
+            console.log(timeline_data)
             $.each(email_series_data, function(status, count){
                 email_data.series.push({meta: status, value: count})
             })
             var timeline_chart = new Chartist.Line('#timeline_chart', timeline_data, timeline_opts)
-
             // Setup the overview chart listeners
             $chart = $("#timeline_chart")
             var $toolTip = $chart
@@ -104,7 +132,6 @@ $(document).ready(function(){
                 }
                 $toolTip.html(html).show()
             });
-
             $chart.on('mouseleave', '.ct-point', function() {
                 $toolTip.hide();
             });
@@ -114,9 +141,16 @@ $(document).ready(function(){
                     top: (event.offsetY + 70 || event.originalEvent.layerY) - $toolTip.height() - 40
                 });
             });
-            $("#loading").hide()
-            $("#campaignResults").show()
             var email_chart = new Chartist.Pie("#email_chart", email_data, email_opts)
+            email_chart.on('draw', function(data){
+                // We don't want to create the legend twice
+                if (!email_legend[data.meta]) {
+                    console.log(data.meta)
+                    $("#email_chart_legend").append('<li><span class="' + classes[data.meta].legend + '"></span>' + data.meta + '</li>')
+                    email_legend[data.meta] = true
+                }
+                data.element.addClass(classes[data.meta].slice)
+            })
             // Setup the average chart listeners
             $piechart = $("#email_chart")
             var $pietoolTip = $piechart
@@ -137,9 +171,11 @@ $(document).ready(function(){
             $piechart.on('mousemove', function(event) {
                 $pietoolTip.css({
                     left: (event.offsetX || event.originalEvent.layerX) - $pietoolTip.width() / 2 - 10,
-                    top: (event.offsetY + 80 || event.originalEvent.layerY) - $pietoolTip.height() - 80
+                    top: (event.offsetY + 40 || event.originalEvent.layerY) - $pietoolTip.height() - 80
                 });
             });
+            $("#loading").hide()
+            $("#campaignResults").show()
         }
     })
     .error(function(){

static/js/app/campaigns.js

@@ -70,9 +70,9 @@ $(document).ready(function(){
                     campaign.name,
                     moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
                     "<span class=\"label " + label + "\">" + campaign.status + "</span>",
-                    "<div class='pull-right'><button class='btn btn-primary' onclick='alert(\"test\")'>\
+                    "<div class='pull-right'><a class='btn btn-primary' href='/campaigns/" + campaign.id + "'>\
                     <i class='fa fa-bar-chart'></i>\
-                    </button>\
+                    </a>\
                     <button class='btn btn-danger' onclick='alert(\"test\")'>\
                     <i class='fa fa-trash-o'></i>\
                     </button></div>"

static/js/app/dashboard.js

@@ -87,7 +87,7 @@ $(document).ready(function(){
                 var $point = $(this)
                 value = $point.attr('ct:value')
                 cidx = $point.attr('ct:meta')
-                $toolTip.html(campaigns[cidx].name + '<br>' + "Successes: " + value.toString()).show();
+                $toolTip.html(campaigns[cidx].name + '<br>' + "Successes: " + value.toString() + "%").show();
             });
 
             $chart.on('mouseleave', '.ct-point', function() {

templates/campaign_results.html

@@ -64,7 +64,11 @@
                         </div>
                         <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                             <p style="text-align:center;">Email Status</p>
-                            <div id="email_chart"></div>
+                            <div id="email_chart" class="col-lg-7 col-md-7"></div>
+                            <div class="col-lg-5 col-md-5">
+                                <ul id="email_chart_legend" class="chartist-legend">
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>