Add link to export timeline charts as PNGs

Author: str4d

codespeed/static/css/main.css

@@ -484,6 +484,22 @@ p.note {
     background-image: url(../images/note.png);
 }
 
+div.plotpng a {
+    background-color: #F1F1F1;
+    background-repeat: no-repeat;
+    background-position: 3px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    -moz-box-shadow: 3px 3px 3px #888;
+    -webkit-box-shadow: 3px 3px 3px #888;
+    box-shadow: 3px 3px 3px #888;
+    float: right;
+    margin-top: 20px;
+    padding: 1em;
+    text-decoration: underline;
+}
+
 div.footer{
     color: white;
     font-size: small;

codespeed/static/css/timeline.css

@@ -1,3 +1,6 @@
 select#baseline {
     width: 100%;
 }
+div#plotdescription {
+    margin-right: 55px;
+}

codespeed/static/js/timeline.js

@@ -165,7 +165,11 @@ function renderPlot(data) {
         digits++;
       }
     }
-    $("#plotgrid").html('<div id="plot"></div><div id="plotdescription"></div>');
+    $("#plotgrid").html('<div id="plot"></div><div class="plotpng"><a id="pnglink" href="#">PNG</a></div><div id="plotdescription"></div>');
+
+    $("#pnglink").click(function() {
+        window.location = $("#plot").jqplotToImageStr();
+    });
 
     if (data.benchmark_description) {
       $("#plotdescription").html('<p class="note"><i>' + data.benchmark + '</i>: ' + data.benchmark_description + '</p>');