Add link to export timeline charts as PNGs

Author: str4d

codespeed/static/css/main.css

@@ -409,8 +409,12 @@ tbody.commits tr td.date {
 	overflow: auto;
 }
 
-a#permalink { float: right; font-size: small; }
-a#permalink:hover { text-decoration: underline; }
+a#permalink, a#pnglink {
+    float: right;
+    font-size: small;
+    margin-left: 0.5em;
+}
+a#permalink:hover, a#pnglink:hover { text-decoration: underline; }
 
 /* Plot styles */
 div#plot { text-align: left; height: 500px; width: 100%; }

codespeed/static/js/timeline.js

@@ -102,6 +102,7 @@ function renderPlot(data) {
   seriesindex = [];
   var hiddenSeries = 0;
   var median = data['data_type'] === 'M';
+  $("#pnglink").css("display", "inline");
   for (var branch in data.branches) {
     // NOTE: Currently, only the "default" branch is shown in the timeline
     for (var exe_id in data.branches[branch]) {
@@ -281,6 +282,7 @@ function render(data) {
   $("#revisions").attr("disabled", false);
   $("#equidistant").attr("disabled", false);
   $("span.options.median").css("display", "none");
+  $("#pnglink").css("display", "none");
   $("#plotgrid").html("");
   if(data.error !== "None") {
     var h = $("#content").height();//get height for error message
@@ -421,6 +423,10 @@ function init(def) {
     $("#permalink").click(function() {
         window.location = "?" + $.param(getConfiguration());
     });
+
+    $("#pnglink").click(function() {
+        window.location = $("#plot").jqplotToImageStr();
+    });
 }
 
 return {

codespeed/templates/codespeed/timeline.html

@@ -96,6 +96,7 @@
   </span>
   {% endif %}
   <a id="permalink" href="#">Permalink</a>
+  <a id="pnglink" href="#" style="display: none">PNG</a>
 </div>
 <div id="content" class="clearfix">
 <div id="plotgrid"></div>