Results page: export graph in PNG (#197)

Makefile

@@ -35,6 +35,7 @@ uglify:
 		public/js/vendor/flot/jquery.flot.time.js \
 		public/js/vendor/flot/jquery.flot.selection.js \
 		public/js/vendor/flot/jquery.flot.resize.js \
+		public/js/vendor/helpers/html2canvas.min.js \
 		public/js/site.js \
 		-o ./public/js/site.min.js
 	@$(TASK_DONE)

public/js/site.js

@@ -132,7 +132,7 @@ $(document).ready(function(){
         plotGraphData();
     });
 
-    $(ruleTooltip).tooltip();
+    ruleTooltip.tooltip();
 
     // Function to animate sections
     function animateSection (sectionName, offset){
@@ -172,6 +172,7 @@ $(document).ready(function(){
 
     function plotGraphData () {
         $.plot(graphContainer, getData(), graphOptions);
+        exportGraph();
     }
 
     function getData() {
@@ -202,6 +203,37 @@ $(document).ready(function(){
         zoomResetButton.toggleClass('hidden');
     }
 
+	function exportGraph() {
+		var exportBtn = $('.btn_action_export');
+
+		exportBtn.click(function(e) {
+			e.preventDefault();
+
+			var fileName = $('h1').text().toLowerCase().split(' ').join('_');
+			var date = new Date();
+
+			fileName += '_' + date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+
+			html2canvas($('.graph').get(0), {
+				onrendered: function (canvas) {
+					downloadFile(canvas.toDataURL('image/png'), fileName + '.png');
+				}
+			});
+		});
+	}
+
+	function downloadFile(dataurl, filename) {
+		var link = document.createElement('a');
+		link.href = dataurl;
+		link.setAttribute('download', filename);
+
+		var clickEvent = document.createEvent('MouseEvents');
+		clickEvent.initEvent('click', false, true);
+		link.dispatchEvent(clickEvent);
+
+		return false;
+	}
+
     graphContainer.bind('plotselected', function (event, ranges) {
         // clamp the zooming to prevent eternal zoom
         if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {

public/less/site.less

@@ -523,8 +523,8 @@ ul.date-links {
 }
 
 .series-checkboxes {
-  padding: 0 30px;
-  margin-bottom: 15px;
+  padding: 0 15px;
+  margin-bottom: 16px;
 
   li {
 	width: 32%;
@@ -532,7 +532,7 @@ ul.date-links {
 	border-radius: @border-radius-base;
 
 	.series-checkbox-container {
-	  padding: 2px 4px 3px 4px;
+	  padding: 4px 4px 5px 4px;
 	}
 
 	label {

view/partial/graph.html

@@ -17,7 +17,13 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-12 clearfix">
 	<div class="graph-container graph-spacer ruled clearfix">
 		<div class="row">
-			<ul class="list-unstyled floated-list series-checkboxes clearfix col-md-5 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
+			<div class="col-md-3 col-sm-4 col-xs-3">
+				<span class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</span>
+			</div>
+
+			<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
+				<ul class="list-unstyled floated-list series-checkboxes clearfix" data-role="series-checkboxes"></ul>
+			</div>
 		</div>
 		<div data-role="graph" class="graph"></div>
 		<div class="dashedLegend">