From 674c71e271484c5d56ddfc3dac85419a8a74aebe Mon Sep 17 00:00:00 2001
From: unknown <jmwright798@gmail.com>
Date: Mon, 27 Jul 2015 21:06:20 -0500
Subject: [PATCH] Added better donut chart with tooltips and legend.

---
 static/css/main.css        | 48 ++++++++++++++++++++++++++++++++++++++
 static/js/app/dashboard.js | 35 +++++++++++++++++++++++----
 templates/dashboard.html   | 19 +++++++++++++--
 3 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 47371cb0..fdea32b5 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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;
+}
diff --git a/static/js/app/dashboard.js b/static/js/app/dashboard.js
index 925efa37..79e712a1 100644
--- a/static/js/app/dashboard.js
+++ b/static/js/app/dashboard.js
@@ -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) {
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 73d69d74..aac9fcff 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -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>