mirror of https://github.com/gophish/gophish
Removed chartjs in favor of chartist-js (better interaction, more customization, etc.)
Made a poc of the dashboard charts - need to work on styling. Some basic css / nav changespull/24/head
unknown
parent
a2252c1b5b
commit
1183cc1bee
File diff suppressed because one or more lines are too long
|
|
@ -153,22 +153,18 @@
|
|||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.typeahead {
|
||||
border-left-radius:6px !important;
|
||||
float:none !important;
|
||||
}
|
||||
|
||||
.tt-query {
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.tt-hint {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.tt-menu { // used to be tt-dropdown-menu in older versions
|
||||
width: 422px;
|
||||
margin-top: 4px;
|
||||
|
|
@ -183,22 +179,49 @@
|
|||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 3px 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tt-suggestion.tt-cursor {
|
||||
color: #fff;
|
||||
background-color: #0097cf;
|
||||
|
||||
}
|
||||
|
||||
.tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.typeahead-button {
|
||||
line-height:1.39 !important;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.chartist-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;
|
||||
top:100%;
|
||||
left:50%;
|
||||
width:0;
|
||||
height:0;
|
||||
margin-left:-15px;
|
||||
border:15px solid transparent;
|
||||
border-top-color:#34495e
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,30 @@
|
|||
var overview_chart_options = {
|
||||
animationEasing:"linear",
|
||||
customTooltips: function(tooltip) {
|
||||
console.log(tooltip)
|
||||
}
|
||||
}
|
||||
var campaigns = []
|
||||
|
||||
function load(){
|
||||
$(document).ready(function(){
|
||||
api.campaigns.get()
|
||||
.success(function(campaigns){
|
||||
.success(function(cs){
|
||||
campaigns = cs
|
||||
if (campaigns.length > 0){
|
||||
var overview_ctx = $("#overview_chart").get(0).getContext("2d");
|
||||
// Create the overview chart data
|
||||
var overview_data = {labels:[],datasets:[{data:[]}]}
|
||||
var overview_data = {labels:[],series:[[]]}
|
||||
var average_data = {series:[]}
|
||||
var overview_opts = {
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
showArea: true,
|
||||
plugins: []
|
||||
}
|
||||
var average_opts = {
|
||||
donut : true,
|
||||
donutWidth: 30
|
||||
}
|
||||
var average = 0
|
||||
$("#emptyMessage").hide()
|
||||
$("#campaignTable").show()
|
||||
campaignTable = $("#campaignTable").DataTable();
|
||||
$.each(campaigns, function(i, campaign){
|
||||
var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a')
|
||||
var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY h:mm')
|
||||
// Add it to the table
|
||||
campaignTable.row.add([
|
||||
campaign.name,
|
||||
|
|
@ -25,7 +32,6 @@ function load(){
|
|||
campaign.status
|
||||
]).draw()
|
||||
// Add it to the chart data
|
||||
overview_data.labels.push(campaign_date)
|
||||
campaign.y = 0
|
||||
$.each(campaign.results, function(j, result){
|
||||
if (result.status == "Success"){
|
||||
|
|
@ -34,17 +40,45 @@ function load(){
|
|||
})
|
||||
campaign.y = Math.floor((campaign.y / campaign.results.length) * 100)
|
||||
average += campaign.y
|
||||
overview_data.datasets[0].data.push({y:campaign.y, test: "test"})
|
||||
// Add the data to the overview chart
|
||||
overview_data.labels.push(campaign_date)
|
||||
overview_data.series[0].push({meta : i, value: campaign.y})
|
||||
})
|
||||
average = Math.floor(average / campaigns.length);
|
||||
var overview_chart = new Chart(overview_ctx).Line(overview_data, overview_chart_options);
|
||||
average_data.series.push({meta: "Successful Phishes", value: average})
|
||||
average_data.series.push({meta: "Unsuccessful Phishes", value: 100 - average})
|
||||
var average_chart = new Chartist.Pie("#average_chart", average_data, average_opts)
|
||||
var overview_chart = new Chartist.Line('#overview_chart', overview_data, overview_opts)
|
||||
$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')
|
||||
.hide();
|
||||
|
||||
$chart.on('mouseenter', '.ct-point', function() {
|
||||
var $point = $(this)
|
||||
value = $point.attr('ct:value')
|
||||
cidx = $point.attr('ct:meta')
|
||||
$toolTip.html(campaigns[cidx].name + '<br>' + "Successes: " + value.toString()).show();
|
||||
});
|
||||
|
||||
$chart.on('mouseleave', '.ct-point', function() {
|
||||
$toolTip.hide();
|
||||
});
|
||||
$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
|
||||
});
|
||||
});
|
||||
$("#overview_chart").on("click", ".ct-point", function(e) {
|
||||
var $cidx = $(this).attr('ct:meta');
|
||||
window.location.href = "/campaigns/" + campaigns[cidx].id
|
||||
});
|
||||
}
|
||||
})
|
||||
.error(function(){
|
||||
errorFlash("Error fetching campaigns")
|
||||
})
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
load()
|
||||
})
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -21,6 +21,7 @@
|
|||
<link href="/css/flat-ui.css" rel="stylesheet">
|
||||
<link href="/css/dataTables.bootstrap.css" rel="stylesheet">
|
||||
<link href="/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="/css/chartist.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<script>
|
||||
{{if .User}}
|
||||
|
|
@ -67,18 +68,10 @@
|
|||
<li>
|
||||
{{if .User}}
|
||||
<div class="btn-group" id="navbar-dropdown">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-user"></i> {{.User.Username}}</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret" style="border-top-color:#FFFFFF"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#/settings">Settings</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="/logout">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="btn btn-primary" href="/settings"><i class="fa fa-user"></i> {{.User.Username}}</a>
|
||||
<a class="btn btn-primary dropdown-toggle" href="/logout">
|
||||
<i class="fa fa-sign-out"></i>
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<a href="/login">
|
||||
|
|
@ -96,7 +89,7 @@
|
|||
<script src="/js/bootstrap.min.js"></script>
|
||||
<script src="/js/jquery.dataTables.min.js"></script>
|
||||
<script src="/js/dataTables.bootstrap.js"></script>
|
||||
<script src="/js/chartjs.min.js"></script>
|
||||
<script src="/js/chartist.min.js"></script>
|
||||
<script src="/js/moment.min.js"></script>
|
||||
<script src="/js/ckeditor/ckeditor.js"></script>
|
||||
<script src="/js/ckeditor/adapters/jquery.js"></script>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<canvas id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></canvas>
|
||||
<canvas id="average_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></canvas>
|
||||
<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>
|
||||
<div class="row">
|
||||
<h2>Recent Campaigns</h2>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-3 col-md-2 sidebar">
|
||||
<ul class="nav nav-sidebar">
|
||||
<li><a href="#">Dashboard</a>
|
||||
<li><a href="/">Dashboard</a>
|
||||
</li>
|
||||
<li><a href="/campaigns">Campaigns</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-3 col-md-2 sidebar">
|
||||
<ul class="nav nav-sidebar">
|
||||
<li><a href="#">Dashboard</a>
|
||||
<li><a href="/">Dashboard</a>
|
||||
</li>
|
||||
<li><a href="/campaigns">Campaigns</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-3 col-md-2 sidebar">
|
||||
<ul class="nav nav-sidebar">
|
||||
<li><a href="#">Dashboard</a>
|
||||
<li><a href="/">Dashboard</a>
|
||||
</li>
|
||||
<li><a href="/campaigns">Campaigns</a>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue