Replace jqPlot with dygraphs and Chart.js (ported from speed.pypy.org)

codespeed/static/css/dygraph.css

@@ -0,0 +1,121 @@
+/**
+ * Default styles for the dygraphs charting library.
+ */
+
+.dygraph-legend {
+  position: absolute;
+  font-size: 14px;
+  z-index: 10;
+  width: 250px;  /* labelsDivWidth */
+  /*
+  dygraphs determines these based on the presence of chart labels.
+  It might make more sense to create a wrapper div around the chart proper.
+  top: 0px;
+  right: 2px;
+  */
+  background: white;
+  line-height: normal;
+  text-align: left;
+  overflow: hidden;
+}
+
+.dygraph-legend[dir="rtl"] {
+  text-align: right;
+}
+
+/* styles for a solid line in the legend */
+.dygraph-legend-line {
+  display: inline-block;
+  position: relative;
+  bottom: .5ex;
+  padding-left: 1em;
+  height: 1px;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  /* border-bottom-color is set based on the series color */
+}
+
+/* styles for a dashed line in the legend, e.g. when strokePattern is set */
+.dygraph-legend-dash {
+  display: inline-block;
+  position: relative;
+  bottom: .5ex;
+  height: 1px;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  /* border-bottom-color is set based on the series color */
+  /* margin-right is set based on the stroke pattern */
+  /* padding-left is set based on the stroke pattern */
+}
+
+.dygraph-roller {
+  position: absolute;
+  z-index: 10;
+}
+
+/* This class is shared by all annotations, including those with icons */
+.dygraph-annotation {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+}
+
+/* This class only applies to annotations without icons */
+/* Old class name: .dygraphDefaultAnnotation */
+.dygraph-default-annotation {
+  border: 1px solid black;
+  background-color: white;
+  text-align: center;
+}
+
+.dygraph-axis-label {
+  /* position: absolute; */
+  /* font-size: 14px; */
+  z-index: 10;
+  line-height: normal;
+  overflow: hidden;
+  color: black;  /* replaces old axisLabelColor option */
+}
+
+.dygraph-axis-label-x {
+}
+
+.dygraph-axis-label-y {
+}
+
+.dygraph-axis-label-y2 {
+}
+
+.dygraph-title {
+  font-weight: bold;
+  z-index: 10;
+  text-align: center;
+  /* font-size: based on titleHeight option */
+}
+
+.dygraph-xlabel {
+  text-align: center;
+  /* font-size: based on xLabelHeight option */
+}
+
+/* For y-axis label */
+.dygraph-label-rotate-left {
+  text-align: center;
+  /* See http://caniuse.com/#feat=transforms2d */
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+}
+
+/* For y2-axis label */
+.dygraph-label-rotate-right {
+  text-align: center;
+  /* See http://caniuse.com/#feat=transforms2d */
+  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+}

codespeed/static/css/main.css

@@ -234,7 +234,19 @@ div.about_content { text-align: left; }
 .boxbody input { margin-left: 0; vertical-align: top; }
 #options li { margin-bottom: 0.8em; }
 .seriescolor { float: right; margin-top: 2px; height: 13px; width: 14px; }
+.compplot-wrap { display: inline-block; }
 a.togglefold { font-size: normal; color: #000000; }
+a.togglefold::before {
+  content: '▶';
+  display: inline-block;
+  margin-right: 0.3em;
+  font-size: 0.7em;
+  transition: transform 0.2s ease;
+  transform: rotate(90deg);
+}
+a.togglefold.folded::before {
+  transform: rotate(0deg);
+}
 a.checkall, a.uncheckall { font-size: small; color: #AAAAAA; }
 
 p.errormessage { line-height: 10em; margin-bottom: 10em; }
@@ -456,13 +468,25 @@ div.miniplot {
     float: left;
     height: 130px;
     width: 23%;
+    border: 1px solid #9DADC6;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
 }
 div.miniplot:hover { background-color: #F1F1F1; }
-.jqplot-highlighter-tooltip {
-    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
+
+#dygraph-tooltip {
+    display: none;
+    position: absolute;
+    background: rgba(255,255,255,0.92);
+    border: 1px solid #9DADC6;
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 100;
+    white-space: nowrap;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.15);
 }
 
 div.compplot {

codespeed/static/js/codespeed.js

@@ -43,8 +43,14 @@ $(function() {
 
     $('.togglefold').each(function() {
         var lis = $(this).parent().children("li");
+        var allUnchecked = lis.find("input[type='checkbox']").filter(':checked').length === 0;
+        if (allUnchecked) {
+            lis.hide();
+            $(this).addClass('folded');
+        }
         $(this).click(function() {
             lis.slideToggle();
+            $(this).toggleClass('folded');
             return false;
         });
     });