diff --git a/static/css/dashboard.css b/static/css/dashboard.css index 2efe8ce3..1c6a5a4c 100644 --- a/static/css/dashboard.css +++ b/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; diff --git a/static/js/app/campaign_results.js b/static/js/app/campaign_results.js index 0a89161a..1bd1f5ab 100644 --- a/static/js/app/campaign_results.js +++ b/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 || "", "" + result.status + "" ]).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('
') .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('
') + .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(){ diff --git a/templates/campaign_results.html b/templates/campaign_results.html index 59e7b50a..86078b1e 100644 --- a/templates/campaign_results.html +++ b/templates/campaign_results.html @@ -48,21 +48,33 @@
- - + +
+

+

Campaign Timeline

+
+

Email Status

- - Plugins here - Demographics here - +
+
+ Plugins here +
+
+ Demographics here +
+

Details