From 84cbbd2b176f02cc09c140c475b4769c793bb353 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Wed, 19 Sep 2018 11:49:20 -0400
Subject: [PATCH] Add a filter to put background color on chart labels

---
 templates/workspaces/reports/index.html | 41 +++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/templates/workspaces/reports/index.html b/templates/workspaces/reports/index.html
index 903ed4be..05e33d2f 100644
--- a/templates/workspaces/reports/index.html
+++ b/templates/workspaces/reports/index.html
@@ -137,9 +137,45 @@
       </header>
 
       <svg v-bind:height='height' v-bind:width='width'>
+
+        <defs>
+          <filter x="-0.04" y="0" width="1.08" height="1" class='filter__text-background' id="text-background">
+            <feFlood/>
+            <feComposite in="SourceGraphic"/>
+          </filter>
+        </defs>
+
+        {# spend/projected budget path lines #}
+        <path class='budget-chart__projected-path' v-bind:d='projectedPath'></path>
+        <path class='budget-chart__spend-path' v-bind:d='spendPath'></path>
+
+        {# max budget line #}
+        <line
+          class='budget-chart__budget-line'
+          x1='0'
+          v-bind:x2='width'
+          v-bind:y1='budgetHeight'
+          v-bind:y2='budgetHeight'></line>
+
         <g v-for='month in displayedMonths' >
+
           {# make this clickable to focus on that month #}
           <a v-bind:href='"{{ reports_url }}?month=" + month.date.monthIndex + "&year=" + month.date.year'>
+
+            <defs>
+              <filter
+                x="-0.04"
+                y="0"
+                width="1.08"
+                height="1"
+                class='filter__text-background'
+                v-bind:class='{ "filter__text-background--highlighted": month.isHighlighted }'
+                v-bind:id="'text-background__' +month.date.month + month.date.year">
+                <feFlood/>
+                <feComposite in="SourceGraphic"/>
+              </filter>
+            </defs>
+
             <title>
               <span v-html='month.date.month + " " + month.date.year'></span>&nbsp;|&nbsp;<!--
               --><template v-if='month.budget'><!--
@@ -193,6 +229,7 @@
 
             {# task order expiration label #}
             <text
+              v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
               v-if='month.isExpirationMonth'
               v-bind:x='month.metrics.blockX + 10'
               v-bind:y='budgetHeight + 20'
@@ -209,6 +246,7 @@
             {# abbreviated cumulative label #}
             <text
               v-if='month.budget'
+              v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
               v-bind:x='month.metrics.cumulativeX'
               v-bind:y='month.metrics.cumulativeY - 10'
               text-anchor='middle'
@@ -217,6 +255,7 @@
 
             {# abbreviated spend label #}
             <text
+              v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
               v-bind:x='month.metrics.cumulativeX'
               v-bind:y='baseHeight + 20'
               text-anchor='middle'
@@ -225,6 +264,7 @@
 
             {# month label #}
             <text
+              v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
               v-bind:x='month.metrics.cumulativeX'
               v-bind:y='baseHeight + 40'
               text-anchor='middle'
@@ -233,6 +273,7 @@
 
             {# year label #}
             <text
+              v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
               v-if='month.showYear'
               v-bind:x='month.metrics.cumulativeX'
               v-bind:y='baseHeight + 55'