Fixed tabs on campaign_results

Added email status chart on campaign_results
pull/24/head
unknown 2015-08-01 15:35:32 -05:00
parent 4f03224d98
commit 530a60cd08
3 changed files with 54 additions and 9 deletions

View File

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

View File

@ -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(){

View File

@ -48,21 +48,33 @@
</div>
<br />
<div class="row">
<tabset>
<tab heading="Overview">
<ul class="nav nav-tabs" role="tablist">
<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>
<tab heading="Plugins">Plugins here</tab>
<tab heading="Demographics">Demographics here</tab>
</tabset>
</div>
<div role="tabpanel" class="tab-pane" id="plugins">
Plugins here
</div>
<div role="tabpanel" class="tab-pane" id="demographics">
Demographics here
</div>
</div>
</div>
<div class="row">
<h2>Details</h2>