diff --git a/static/js/app/campaign_results.js b/static/js/app/campaign_results.js index cc70f4c9..0a89161a 100644 --- a/static/js/app/campaign_results.js +++ b/static/js/app/campaign_results.js @@ -37,11 +37,17 @@ $(document).ready(function(){ campaign = c if (campaign){ // Setup our graphs - var timeline_chart = {labels:[],series:[[]]} - var email_chart = {series:[]} + var timeline_data = {labels:[],series:[]} + var email_data = {series:[]} var timeline_opts = { axisX: { - showGrid: false + showGrid: false, + }, + axisY: { + type: Chartist.FixedScaleAxis, + ticks: [0, 1, 2], + low: 0, + showLabel: false }, showArea: true, plugins: [] @@ -52,8 +58,7 @@ $(document).ready(function(){ chartPadding: 0, showLabel: false } - $("#loading").hide() - $("#campaignResults").show() + // Setup the results table resultsTable = $("#resultsTable").DataTable(); $.each(campaign.results, function(i, result){ label = labels[result.status] || "label-default"; @@ -65,6 +70,42 @@ $(document).ready(function(){ "" + result.status + "" ]).draw() }) + // 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}]) + }) + var timeline_chart = new Chartist.Line('#timeline_chart', timeline_data, timeline_opts) + + // Setup the overview chart listeners + $chart = $("#timeline_chart") + var $toolTip = $chart + .append('
') + .find('.chartist-tooltip') + .hide(); + + $chart.on('mouseenter', '.ct-point', function() { + var $point = $(this) + value = $point.attr('ct:value') + cidx = $point.attr('ct:meta') + html = "Event: " + campaign.timeline[cidx].message + if (campaign.timeline[cidx].email) { + html += '
' + "Email: " + campaign.timeline[cidx].email + } + $toolTip.html(html).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 + 0 || event.originalEvent.layerY) - $toolTip.height() - 40 + }); + }); + $("#loading").hide() + $("#campaignResults").show() } }) .error(function(){