From 8c3bb3c04dd2ec7bb0a3c1d2736f4d03b4ecf3dc Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 4 Aug 2015 21:27:04 -0500 Subject: [PATCH] Made some fixes to the timeline - waiting for chartist to support dynamic timeaxis. Added legend to campaign_results email donut chart. --- static/css/main.css | 24 +++++++++++++ static/js/app/campaign_results.js | 56 +++++++++++++++++++++++++------ static/js/app/campaigns.js | 4 +-- static/js/app/dashboard.js | 2 +- templates/campaign_results.html | 6 +++- templates/dashboard.html | 2 +- 6 files changed, 79 insertions(+), 15 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 777f04d7..1b8a1083 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -280,3 +280,27 @@ .ct-series-a .ct-slice-donut { stroke:#1abc9c !important; } + +.ct-slice-donut.ct-slice-donut-error { + stroke:#6c7a89 !important; +} + +.ct-slice-donut.ct-slice-donut-success{ + stroke:#f05b4f !important; +} + +.ct-legend-sent { + background-color: #1abc9c !important; +} + +.ct-legend-error { + background-color: #6c7a89 !important; +} + +.ct-legend-success { + background-color: #f05b4f !important; +} + +.ct-legend-clicked { + background-color: #eb9532 !important; +} diff --git a/static/js/app/campaign_results.js b/static/js/app/campaign_results.js index 1bd1f5ab..4ddd1533 100644 --- a/static/js/app/campaign_results.js +++ b/static/js/app/campaign_results.js @@ -3,11 +3,30 @@ var labels = { "Email Sent" : "label-primary", "Email Opened" : "label-info", - "Success" : "label-success", "Clicked Link" : "label-success", "Error" : "label-danger" } +// +var classes = { + "Email Sent" : { + slice: "ct-slice-donut-sent", + legend: "ct-legend-sent" + }, + "Email Opened" : { + slice: "ct-slice-donut-opened", + legend: "ct-legend-opened" + }, + "Clicked Link" : { + slice: "ct-slice-donut-clicked", + legend: "ct-legend-clicked" + }, + "Error" : { + slice: "ct-slice-donut-error", + legend: "ct-legend-error" + } +} + var campaign = {} function dismiss(){ @@ -39,12 +58,21 @@ $(document).ready(function(){ // Set the title $("#page-title").text("Results for " + c.name) // Setup our graphs - var timeline_data = {labels:[],series:[]} + var timeline_data = {series:[{ + name: "Events", + data: [] + }]} var email_data = {series:[]} + var email_legend = {} var email_series_data = {} var timeline_opts = { axisX: { showGrid: false, + type: Chartist.FixedScaleAxis, + divisor: 5, + labelInterpolationFnc: function(value){ + return moment(value).format('MMMM Do YYYY h:mm') + } }, axisY: { type: Chartist.FixedScaleAxis, @@ -52,7 +80,7 @@ $(document).ready(function(){ low: 0, showLabel: false }, - showArea: true, + showArea: false, plugins: [] } var email_opts = { @@ -80,14 +108,14 @@ $(document).ready(function(){ }) // Setup the graphs $.each(campaign.timeline, function(i, event){ - timeline_data.labels.push(moment(event.time).format('MMMM Do YYYY h:mm')) - timeline_data.series.push([{meta : i, value: 1}]) + console.log(moment(event.time).format('MMMM Do YYYY h:mm')) + timeline_data.series[0].data.push({meta : i, x: new Date(event.time), y:1}) }) + console.log(timeline_data) $.each(email_series_data, function(status, count){ email_data.series.push({meta: status, value: count}) }) var timeline_chart = new Chartist.Line('#timeline_chart', timeline_data, timeline_opts) - // Setup the overview chart listeners $chart = $("#timeline_chart") var $toolTip = $chart @@ -104,7 +132,6 @@ $(document).ready(function(){ } $toolTip.html(html).show() }); - $chart.on('mouseleave', '.ct-point', function() { $toolTip.hide(); }); @@ -114,9 +141,16 @@ $(document).ready(function(){ top: (event.offsetY + 70 || event.originalEvent.layerY) - $toolTip.height() - 40 }); }); - $("#loading").hide() - $("#campaignResults").show() var email_chart = new Chartist.Pie("#email_chart", email_data, email_opts) + email_chart.on('draw', function(data){ + // We don't want to create the legend twice + if (!email_legend[data.meta]) { + console.log(data.meta) + $("#email_chart_legend").append('
  • ' + data.meta + '
    • ') + email_legend[data.meta] = true + } + data.element.addClass(classes[data.meta].slice) + }) // Setup the average chart listeners $piechart = $("#email_chart") var $pietoolTip = $piechart @@ -137,9 +171,11 @@ $(document).ready(function(){ $piechart.on('mousemove', function(event) { $pietoolTip.css({ left: (event.offsetX || event.originalEvent.layerX) - $pietoolTip.width() / 2 - 10, - top: (event.offsetY + 80 || event.originalEvent.layerY) - $pietoolTip.height() - 80 + top: (event.offsetY + 40 || event.originalEvent.layerY) - $pietoolTip.height() - 80 }); }); + $("#loading").hide() + $("#campaignResults").show() } }) .error(function(){ diff --git a/static/js/app/campaigns.js b/static/js/app/campaigns.js index dd03803b..dcf168fa 100644 --- a/static/js/app/campaigns.js +++ b/static/js/app/campaigns.js @@ -70,9 +70,9 @@ $(document).ready(function(){ campaign.name, moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'), "" + campaign.status + "", - "
    \ + \
    " diff --git a/static/js/app/dashboard.js b/static/js/app/dashboard.js index 620652e0..21967147 100644 --- a/static/js/app/dashboard.js +++ b/static/js/app/dashboard.js @@ -87,7 +87,7 @@ $(document).ready(function(){ var $point = $(this) value = $point.attr('ct:value') cidx = $point.attr('ct:meta') - $toolTip.html(campaigns[cidx].name + '
    ' + "Successes: " + value.toString()).show(); + $toolTip.html(campaigns[cidx].name + '
    ' + "Successes: " + value.toString() + "%").show(); }); $chart.on('mouseleave', '.ct-point', function() { diff --git a/templates/campaign_results.html b/templates/campaign_results.html index 86078b1e..ed6b15f8 100644 --- a/templates/campaign_results.html +++ b/templates/campaign_results.html @@ -64,7 +64,11 @@

    Email Status

    -
    +
    +
    +
      +
    +
    diff --git a/templates/dashboard.html b/templates/dashboard.html index a0ea91e9..f8cf9a34 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -37,7 +37,7 @@

    Average Phishing Results

    -
    +