Working on campaign results page (added tabs)

Added timeline graph to campaign results
pull/24/head
Jordan 2014-07-07 23:02:40 -05:00
parent 523c2087f5
commit fee943cf36
4 changed files with 100 additions and 10 deletions

View File

@ -1,4 +1,6 @@
.nav-tabs {
cursor:pointer;
}
.navbar-logo {
margin: 4px 0px;
float: left;

View File

@ -104,16 +104,14 @@ app.controller('DashboardCtrl', function($scope, $filter, $location, CampaignSer
},
},
series: [{
data: [
{
data: [{
name: "Successful Phishes",
color: "#e74c3c",
y: avg
},
{
}, {
name: "Unsuccessful Phishes",
color: "#7cb5ec",
y: 100-avg
y: 100 - avg
}]
}],
title: {
@ -265,7 +263,7 @@ var CampaignModalCtrl = function($scope, $modalInstance) {
}
};
app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupService, ngTableParams, $http, $window) {
app.controller('CampaignResultsCtrl', function($scope, $filter, CampaignService, GroupService, ngTableParams, $http, $window) {
id = $window.location.hash.split('/')[2];
$scope.flashes = []
$scope.mainTableParams = new ngTableParams({
@ -298,6 +296,10 @@ app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupSer
})
}
});
angular.forEach(campaign.timeline, function(e, key) {
e.x = new Date(e.time);
e.y = 0;
});
$scope.email_chart = {
options: {
chart: {
@ -337,6 +339,71 @@ app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupSer
},
loading: false,
}
$scope.timeline_chart = {
options: {
global: {
useUTC: false
},
chart: {
type: 'scatter',
zoomType: "x"
},
tooltip: {
formatter: function() {
var label = "Event: " + this.point.message + "<br/>";
if (this.point.email) {
label += "Email: " + this.point.email + "<br/>";
}
label += "Date: " + $filter("date")(this.point.x, "medium");
return label
},
style: {
padding: 10,
fontWeight: 'bold'
}
},
plotOptions: {
series: {
cursor: 'pointer',
}
},
yAxis: {
labels: {
enabled: false
},
title: {
text: "Events"
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: "%e of %b",
hour: "%l:%M",
second: '%l:%M:%S',
minute: '%l:%M'
},
max: Date.now(),
title: {
text: 'Date'
}
},
},
series: [{
name: "Events",
data: $scope.campaign.timeline
}],
title: {
text: 'Campaign Timeline'
},
size: {
height: 300
},
credits: {
enabled: false
},
loading: false,
}
params.total(campaign.results.length)
$defer.resolve(campaign.results.slice((params.page() - 1) * params.count(), params.page() * params.count()));
})

View File

@ -38,10 +38,24 @@
<button type="button" class="btn btn-danger" tooltip="Delete Campaign" tooltip-placement="right"><i class="fa fa-times fa-lg"></i>
</button>
</div>
<br />
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<highchart config="email_chart"></highchart>
</div>
<tabset>
<tab heading="Overview">
<br/>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<highchart config="timeline_chart"></highchart>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<highchart config="email_chart"></highchart>
</div>
</div>
</tab>
<tab heading="Timeline">Timeline here</tab>
<tab heading="Plugins">Plugins here</tab>
<tab heading="Demographics">Demographics here</tab>
</tabset>
</div>
<div class="row">
<h2>Details</h2>

View File

@ -103,6 +103,13 @@
<script src="/js/app/app.js"></script>
<script src="/js/app/controllers.js"></script>
<script src="/js/app/factories.js"></script>
<script>
Highcharts.setOptions({
global: {
timezoneOffset: 5 * 60
}
});
</script>
</body>
</html>