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

static/css/main.css

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

static/js/app/dashboard.js

@@ -1,23 +1,30 @@
-var overview_chart_options = {
+var campaigns = []
-    animationEasing:"linear",
-    customTooltips: function(tooltip) {
-        console.log(tooltip)
-    }
-}
 
-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()
 })

templates/base.html

@@ -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>
+                            <a class="btn btn-primary" href="/settings"><i class="fa fa-user"></i> {{.User.Username}}</a>
-                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                            <a class="btn btn-primary dropdown-toggle" href="/logout">
-                                <span class="caret" style="border-top-color:#FFFFFF"></span>
+                                    <i class="fa fa-sign-out"></i>
-                                <span class="sr-only">Toggle Dropdown</span>
+                            </a>
-                            </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>
                         </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>

templates/dashboard.html

@@ -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>
+            <div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
-            <canvas id="average_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></canvas>
+            <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>

templates/landing_pages.html

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

templates/templates.html

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

templates/users.html

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