Add legend

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 {