mirror of https://github.com/gophish/gophish
Made some fixes to the timeline - waiting for chartist to support dynamic timeaxis.
Added legend to campaign_results email donut chart.pull/24/head
unknown
parent
530a60cd08
commit
8c3bb3c04d
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<p style="text-align:center;">Average Phishing Results</p>
|
||||
<div id="average_chart"class="col-lg-7 col-md-7"></div>
|
||||
<div id="average_chart" class="col-lg-7 col-md-7"></div>
|
||||
<div id="average_chart_legend" class="col-lg-5 col-md-5">
|
||||
<ul class="chartist-legend">
|
||||
<li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue