Add benchmark label and inset shadows to graph

app/assets/stylesheets/dashboard.scss

@@ -4,3 +4,7 @@
   @extend .font-bitter;
   @extend .weight-700;
 }
+
+.graph-footer {
+  font-family: 'Cabin', sans-serif;
+}

app/views/dashboard/_measure_bar_graph.erb

@@ -1,12 +1,31 @@
 <div class="white-bg paxl border-radius-8">
 
   <% heading_gutter = 30 %>
+  <% footer_gutter = 50  %>
   <% measure_row_height = 40 %>
-  <% graph_height = measure_graph_row_presenters.length * measure_row_height + heading_gutter %>
+  <% graph_height = measure_graph_row_presenters.length * measure_row_height + heading_gutter + footer_gutter %>
+  <% graph_background_height = graph_height - footer_gutter %>
   <% measure_row_bar_height = 20 %>
   <% label_padding_right = 24 %>
+
   <svg width="100%" height=<%= graph_height %> xmlns="http://www.w3.org/2000/svg">
-    <svg id="graph-background" x="25%" y="0" width="75%">
+
+    <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feComponentTransfer in=SourceAlpha>
+        <feFuncA type="table" tableValues="1 0" />
+      </feComponentTransfer>
+      <feGaussianBlur stdDeviation="4"/>
+      <feOffset dx="0" dy="5" result="offsetblur"/>
+      <feFlood flood-color="rgb(0, 0, 0)" result="color"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feComposite in2="SourceAlpha" operator="in" />
+      <feMerge>
+        <feMergeNode in="SourceGraphic" />
+        <feMergeNode />
+      </feMerge>
+    </filter>
+
+    <svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>>
       <g id="scale-headings">
         <text class="graph-header" x="8.335%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
         <text class="graph-header" x="25%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
@@ -16,11 +35,11 @@
       </g>
 
       <g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
-        <rect id="warning-zone" x="0" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WARNING %> fill-opacity="0.2" />
-        <rect id="watch-zone" x="16.67%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WATCH %> fill-opacity="0.2" />
-        <rect id="growth-zone" x="33.33%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::GROWTH %> fill-opacity="0.2" />
-        <rect id="approval-zone" x="50%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::APPROVAL %> fill-opacity="0.2" />
-        <rect id="ideal-zone" x="75%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::IDEAL %> fill-opacity="0.2" />
+        <rect id="warning-zone" x="0" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WARNING %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="watch-zone" x="16.67%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WATCH %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="growth-zone" x="33.33%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::GROWTH %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="approval-zone" x="50%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::APPROVAL %> opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="ideal-zone" x="75%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::IDEAL %> opacity="0.2" filter="url(#inset-shadow)"/>
 
         <rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black" />
       </g>
@@ -39,5 +58,9 @@
         <% end %>
       </svg>
     </g>
+
+    <g id="legend">
+      <text class="graph-footer" x="58.33%" y=<%=  graph_background_height + (footer_gutter /2)%>>Benchmark</text>
+    </g>
   </svg>
   </div>