Add link to export timeline charts as PNGs

tobami · Aug 25, 2017 · cfd458d · cfd458d
1 parent 33b2a3d
commit cfd458d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/codespeed/static/css/main.css b/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;

diff --git a/codespeed/static/css/timeline.css b/codespeed/static/css/timeline.css
@@ -1,3 +1,6 @@
 select#baseline {
     width: 100%;
 }
+div#plotdescription {
+    margin-right: 55px;
+}
diff --git a/codespeed/static/js/timeline.js b/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>');