Fixed tabs on campaign_results

Added email status chart on campaign_results

static/css/dashboard.css

@@ -32,7 +32,6 @@ body {
     top: 51px;
     bottom: 0;
     left: 0;
-    z-index: 1000;
     display: block;
     padding: 20px;
     overflow-x: hidden;

static/js/app/campaign_results.js

@@ -36,9 +36,12 @@ $(document).ready(function(){
     .success(function(c){
         campaign = c
         if (campaign){
+            // Set the title
+            $("#page-title").text("Results for " + c.name)
             // Setup our graphs
             var timeline_data = {labels:[],series:[]}
             var email_data = {series:[]}
+            var email_series_data = {}
             var timeline_opts = {
                 axisX: {
                     showGrid: false,
@@ -69,12 +72,20 @@ $(document).ready(function(){
                     result.position || "",
                     "<span class=\"label " + label + "\">" + result.status + "</span>"
                 ]).draw()
+                if (!email_series_data[result.status]){
+                    email_series_data[result.status] = 1
+                } else {
+                    email_series_data[result.status]++;
+                }
             })
             // 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}])
             })
+            $.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
@@ -83,7 +94,6 @@ $(document).ready(function(){
             .append('<div class="chartist-tooltip"></div>')
             .find('.chartist-tooltip')
             .hide();
-
             $chart.on('mouseenter', '.ct-point', function() {
                 var $point = $(this)
                 value = $point.attr('ct:value')
@@ -101,11 +111,35 @@ $(document).ready(function(){
             $chart.on('mousemove', function(event) {
                 $toolTip.css({
                     left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
-                    top: (event.offsetY + 0 || event.originalEvent.layerY) - $toolTip.height() - 40
+                    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)
+            // Setup the average chart listeners
+            $piechart = $("#email_chart")
+            var $pietoolTip = $piechart
+            .append('<div class="chartist-tooltip"></div>')
+            .find('.chartist-tooltip')
+            .hide();
+
+            $piechart.on('mouseenter', '.ct-slice-donut', function() {
+                var $point = $(this)
+                value = $point.attr('ct:value')
+                label = $point.attr('ct:meta')
+                $pietoolTip.html(label + ': ' + value.toString()).show();
+            });
+
+            $piechart.on('mouseleave', '.ct-slice-donut', function() {
+                $pietoolTip.hide();
+            });
+            $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
+                });
+            });
         }
     })
     .error(function(){

templates/campaign_results.html

@@ -48,21 +48,33 @@
         </div>
         <br />
         <div class="row">
-            <tabset>
+            <ul class="nav nav-tabs" role="tablist">
-                <tab heading="Overview">
+                <li class="active"><a href="#overview" aria-controls="home" role="tab" data-toggle="tab">Overview</a></li>
+                <li><a href="#plugins" aria-controls="profile" role="tab" data-toggle="tab">Plugins</a></li>
+                <li><a href="#demographics" aria-controls="settings" role="tab" data-toggle="tab">Demographics</a></li>
+            </ul>
+            <div class="tab-content">
+                <div role="tabpanel" class="tab-pane active" id="overview">
                     <br/>
                     <div class="row">
                         <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                            <p style="text-align:center;">Campaign Timeline</p>
+                            <br/>
                             <div id="timeline_chart"></div>
                         </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>
                     </div>
-                </tab>
+                </div>
-                <tab heading="Plugins">Plugins here</tab>
+                <div role="tabpanel" class="tab-pane" id="plugins">
-                <tab heading="Demographics">Demographics here</tab>
+                    Plugins here
-            </tabset>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="demographics">
+                    Demographics here
+                </div>
+            </div>
         </div>
         <div class="row">
             <h2>Details</h2>