var campaigns = [] // labels is a map of campaign statuses to // CSS classes var labels = { "In progress": "label-primary", "Queued": "label-info", "Completed": "label-success", "Emails Sent": "label-success", "Error": "label-danger" } $(document).ready(function() { api.campaigns.get() .success(function(cs) { $("#loading").hide() campaigns = cs if (campaigns.length > 0) { $("#dashboard").show() // Create the overview chart 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: 40, chartPadding: 0, showLabel: false } var average = 0 campaignTable = $("#campaignTable").DataTable(); $.each(campaigns, function(i, campaign) { var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY h:mm:ss a') var label = labels[campaign.status] || "label-default"; // Add it to the table campaignTable.row.add([ campaign.name, campaign_date, "" + campaign.status + "", "
\ \ \
" ]).draw() // Add it to the chart data campaign.y = 0 $.each(campaign.results, function(j, result) { if (result.status == "Success") { campaign.y++; } }) campaign.y = Math.floor((campaign.y / campaign.results.length) * 100) average += campaign.y // 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); 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('
') .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") var $toolTip = $chart .append('
') .find('.chartist-tooltip') .hide(); $chart.on('mouseenter', '.ct-point', function() { var $point = $(this) value = $point.attr('ct:value') || 0 cidx = $point.attr('ct:meta') $toolTip.html(campaigns[cidx].name + '
' + "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 + 40 || 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 }); } else { $("#emptyMessage").show() } }) .error(function() { errorFlash("Error fetching campaigns") }) })