Add legend

app/assets/javascripts/exercise_collections.js.erb

@@ -65,8 +65,7 @@ $(function() {
       .data(data)
       .enter()
       .append("rect")
-      .style("fill", "#008cba")
-      .style("cursor", "pointer")
+      .attr("class", "value-bar")
       .on("mousemove", function (d){
         tooltip
           .style("left", d3.event.pageX - 50 + "px")

app/assets/stylesheets/exercise_collections.scss

@@ -1,13 +1,60 @@
+$time-color: #008cba;
+$min-color: #8efa00;
+$avg-color: #ffca00;
+$max-color: #ff2600;
+
 path.line.minimum-working-time {
-  stroke: #8efa00;
+  stroke: $min-color;
 }
 
 path.line.average-working-time {
-  stroke: #ffca00;
+  stroke: $avg-color;
 }
 
 path.line.maximum-working-time {
-  stroke: #ff2600;
+  stroke: $max-color;
+}
+
+rect.value-bar {
+  fill: $time-color;
+  cursor: pointer;
+}
+
+#legend {
+  display: flex;
+  margin-top: 20px;
+
+  .legend-entry {
+    flex-grow: 1;
+    display: flex;
+
+    .box {
+      width: 20px;
+      height: 20px;
+      border: solid 1px #000;
+    }
+
+    .box.time {
+      background-color: $time-color;
+    }
+
+    .box.min {
+      background-color: $min-color;
+    }
+
+    .box.avg {
+      background-color: $avg-color;
+    }
+
+    .box.max {
+      background-color: $max-color;
+    }
+
+    .box-label {
+      margin-left: 5px;
+      margin-right: 15px;
+    }
+  }
 }
 
 .exercise-id-tooltip {

app/views/exercise_collections/statistics.html.slim

@@ -7,3 +7,11 @@ h1 = @exercise_collection
 
 #graph
   #data.hidden(data-working-times=ActiveSupport::JSON.encode(@exercise_collection.exercise_working_times) data-average-working-time=@exercise_collection.average_working_time)
+  #legend
+    - {time: t('exercises.statistics.average_worktime'),
+        min: 'min. anomaly threshold',
+        avg: 'average time',
+        max: 'max. anomaly threshold'}.each_pair do |klass, label|
+      .legend-entry
+        div(class="box #{klass}")
+        .box-label = label