Browse Source

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 changes
pull/24/head
unknown 6 years ago
parent
commit
1183cc1bee
10 changed files with 104 additions and 55 deletions
  1. +1
    -0
      static/css/chartist.min.css
  2. +31
    -8
      static/css/main.css
  3. +52
    -18
      static/js/app/dashboard.js
  4. +9
    -0
      static/js/chartist.min.js
  5. +0
    -11
      static/js/chartjs.min.js
  6. +6
    -13
      templates/base.html
  7. +2
    -2
      templates/dashboard.html
  8. +1
    -1
      templates/landing_pages.html
  9. +1
    -1
      templates/templates.html
  10. +1
    -1
      templates/users.html

+ 1
- 0
static/css/chartist.min.css
File diff suppressed because it is too large
View File


+ 31
- 8
static/css/main.css View File

@ -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
}

+ 52
- 18
static/js/app/dashboard.js View File

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

+ 9
- 0
static/js/chartist.min.js
File diff suppressed because it is too large
View File


+ 0
- 11
static/js/chartjs.min.js
File diff suppressed because it is too large
View File


+ 6
- 13
templates/base.html View File

@ -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>

+ 2
- 2
templates/dashboard.html View File

@ -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>

+ 1
- 1
templates/landing_pages.html View File

@ -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>

+ 1
- 1
templates/templates.html View File

@ -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>

+ 1
- 1
templates/users.html View File

@ -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…
Cancel
Save