mirror of https://github.com/gophish/gophish
Added better donut chart with tooltips and legend.
unknown
parent
1183cc1bee
commit
674c71e271
|
|
@ -214,6 +214,23 @@
|
|||
font-size: .75em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.chartist-pie-tooltip{
|
||||
position:absolute;
|
||||
display:inline-block;
|
||||
min-width:5em;
|
||||
padding:.5em;
|
||||
background:#34495e;
|
||||
color:#ffffff;
|
||||
font-weight:700;
|
||||
text-align:center;
|
||||
pointer-events:none;
|
||||
z-index:1;
|
||||
margin-left:1.25em;
|
||||
font-size: .75em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.chartist-tooltip:after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
|
|
@ -225,3 +242,34 @@
|
|||
border:15px solid transparent;
|
||||
border-top-color:#34495e
|
||||
}
|
||||
|
||||
|
||||
.chartist-legend {
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
padding-left:0px;
|
||||
top: 0;
|
||||
}
|
||||
.chartist-legend li {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 5px;
|
||||
padding: 2px 8px 2px 28px;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
-webkit-transition: background-color 200ms ease-in-out;
|
||||
-moz-transition: background-color 200ms ease-in-out;
|
||||
-o-transition: background-color 200ms ease-in-out;
|
||||
transition: background-color 200ms ease-in-out;
|
||||
}
|
||||
.chartist-legend li span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ $(document).ready(function(){
|
|||
}
|
||||
var average_opts = {
|
||||
donut : true,
|
||||
donutWidth: 30
|
||||
donutWidth: 30,
|
||||
chartPadding: 0,
|
||||
showLabel: false
|
||||
}
|
||||
var average = 0
|
||||
$("#emptyMessage").hide()
|
||||
|
|
@ -45,12 +47,37 @@ $(document).ready(function(){
|
|||
overview_data.series[0].push({meta : i, value: campaign.y})
|
||||
})
|
||||
average = Math.floor(average / campaigns.length);
|
||||
average_data.series.push({meta: "Successful Phishes", value: average})
|
||||
average_data.series.push({meta: "Unsuccessful Phishes", value: 100 - average})
|
||||
average_data.series.push({meta: "Successful Phishes", value: average})
|
||||
// Build the charts
|
||||
var average_chart = new Chartist.Pie("#average_chart", average_data, average_opts)
|
||||
var overview_chart = new Chartist.Line('#overview_chart', overview_data, overview_opts)
|
||||
// Setup the average chart listeners
|
||||
$piechart = $("#average_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 + 40 || event.originalEvent.layerY) - $pietoolTip.height() - 80
|
||||
});
|
||||
});
|
||||
|
||||
// Setup the overview chart listeners
|
||||
$chart = $("#overview_chart")
|
||||
$chart.on("click", '.ct-point', function(d){console.log(d)});
|
||||
var $toolTip = $chart
|
||||
.append('<div class="chartist-tooltip"></div>')
|
||||
.find('.chartist-tooltip')
|
||||
|
|
@ -69,7 +96,7 @@ $(document).ready(function(){
|
|||
$chart.on('mousemove', function(event) {
|
||||
$toolTip.css({
|
||||
left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
|
||||
top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
|
||||
top: (event.offsetY + 40 || event.originalEvent.layerY) - $toolTip.height() - 40
|
||||
});
|
||||
});
|
||||
$("#overview_chart").on("click", ".ct-point", function(e) {
|
||||
|
|
|
|||
|
|
@ -32,8 +32,23 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
|
||||
<div id="average_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
|
||||
<div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<p style="text-align:center;">Phishing Success Overview</p>
|
||||
</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_legend" class="col-lg-5 col-md-5">
|
||||
<ul class="chartist-legend">
|
||||
<li>
|
||||
<span style="background-color:#f05b4f;"></span> Successful Phishes
|
||||
</li>
|
||||
<li>
|
||||
<span style="background-color:#34495e;"></span> Unsuccessful Phishes
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h2>Recent Campaigns</h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue