From 0e613d941d0bdfd85988088b36e7efe654549ce7 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Mon, 19 Mar 2018 18:45:50 +0100
Subject: [PATCH] Add legend

---
 .../javascripts/exercise_collections.js.erb   |  3 +-
 .../stylesheets/exercise_collections.scss     | 53 +++++++++++++++++--
 .../exercise_collections/statistics.html.slim |  8 +++
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/exercise_collections.js.erb b/app/assets/javascripts/exercise_collections.js.erb
index 7e048b55..3530b636 100644
--- a/app/assets/javascripts/exercise_collections.js.erb
+++ b/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")
diff --git a/app/assets/stylesheets/exercise_collections.scss b/app/assets/stylesheets/exercise_collections.scss
index 6a2d630e..11b6b3a1 100644
--- a/app/assets/stylesheets/exercise_collections.scss
+++ b/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 {
diff --git a/app/views/exercise_collections/statistics.html.slim b/app/views/exercise_collections/statistics.html.slim
index 4a8a04ac..486a0dbd 100644
--- a/app/views/exercise_collections/statistics.html.slim
+++ b/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