From b82bf3639d0442b23acb75b4fcb5b0cf78cea435 Mon Sep 17 00:00:00 2001
From: "Bernard A. Badger" <bab9e9@gmail.com>
Date: Wed, 20 May 2020 17:51:10 -0400
Subject: [PATCH 1/5] Break hovertemplate: at each <br>

---
 vue-definitions.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 8e80f57..9d4f156 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -733,7 +733,11 @@ window.app = new Vue({
           color: 'rgba(0,0,0,0.15)'
         },
         hoverinfo: 'x+y+text',
-        hovertemplate: '%{text}<br>Total ' + this.selectedData + ': %{x:,}<br>Weekly ' + this.selectedData + ': %{y:,}<extra></extra>',
+        hovertemplate:
+          '%{text}' +
+          '<br>Total ' + this.selectedData + ': %{x:,}' +
+          '<br>Weekly ' + this.selectedData + ': %{y:,}' +
+          '<extra></extra>',
       })
       );
 

From 7784f2dc000d2200fb0dd7dfb1b8792731bb9c36 Mon Sep 17 00:00:00 2001
From: "Bernard A. Badger" <bab9e9@gmail.com>
Date: Wed, 20 May 2020 18:13:09 -0400
Subject: [PATCH 2/5] hovertemplate: Weekly first, then Total

---
 vue-definitions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 9d4f156..a952dc0 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -735,8 +735,8 @@ window.app = new Vue({
         hoverinfo: 'x+y+text',
         hovertemplate:
           '%{text}' +
-          '<br>Total ' + this.selectedData + ': %{x:,}' +
           '<br>Weekly ' + this.selectedData + ': %{y:,}' +
+          '<br>Total ' + this.selectedData + ': %{x:,}' +
           '<extra></extra>',
       })
       );

From 666b7d9d5b758cee9c6d687dbbf5380aaef6b638 Mon Sep 17 00:00:00 2001
From: "Bernard A. Badger" <bab9e9@gmail.com>
Date: Wed, 20 May 2020 18:27:21 -0400
Subject: [PATCH 3/5] DRY (don't repeat yourself) -- Use hovertemplateBody for
 both trace1 and trace2

---
 vue-definitions.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index a952dc0..91a204a 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -716,6 +716,11 @@ window.app = new Vue({
 
       let showDailyMarkers = this.filteredCovidData.length <= 2;
 
+      let weeklyTotalExtra =
+        '<br>%{y:8,}: Weekly ' + this.selectedData +
+        '<br>%{x:8,}: Total ' + this.selectedData +
+        '<extra></extra>';
+
       // draws grey lines (line plot for each location)
       let trace1 = this.filteredCovidData.map((e, i) => ({
         x: e.cases.slice(0, this.day),
@@ -733,11 +738,7 @@ window.app = new Vue({
           color: 'rgba(0,0,0,0.15)'
         },
         hoverinfo: 'x+y+text',
-        hovertemplate:
-          '%{text}' +
-          '<br>Weekly ' + this.selectedData + ': %{y:,}' +
-          '<br>Total ' + this.selectedData + ': %{x:,}' +
-          '<extra></extra>',
+        hovertemplate: '%{text}' + weeklyTotalExtra,
       })
       );
 
@@ -754,7 +755,7 @@ window.app = new Vue({
           size: 6,
           color: 'rgba(254, 52, 110, 1)'
         },
-        hovertemplate: '%{data.text}<br>Total ' + this.selectedData + ': %{x:,}<br>Weekly ' + this.selectedData + ': %{y:,}<extra></extra>',
+        hovertemplate: '%{data.text}' +  weeklyTotalExtra,
 
       }));
 

From 9d7f9c00c3653b5afef15b9155c2c047ea55f2af Mon Sep 17 00:00:00 2001
From: "Bernard A. Badger" <bab9e9@gmail.com>
Date: Wed, 20 May 2020 18:33:44 -0400
Subject: [PATCH 4/5] Use width 10 in '%{y:10,}' and '%{x:10,} since US Cases
 is now over 1,000,000

---
 vue-definitions.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 91a204a..14b7078 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -716,9 +716,9 @@ window.app = new Vue({
 
       let showDailyMarkers = this.filteredCovidData.length <= 2;
 
-      let weeklyTotalExtra =
-        '<br>%{y:8,}: Weekly ' + this.selectedData +
-        '<br>%{x:8,}: Total ' + this.selectedData +
+      let hovertemplateBody =
+        '<br>%{y:10,}: Weekly ' + this.selectedData +
+        '<br>%{x:10,}: Total ' + this.selectedData +
         '<extra></extra>';
 
       // draws grey lines (line plot for each location)
@@ -738,7 +738,7 @@ window.app = new Vue({
           color: 'rgba(0,0,0,0.15)'
         },
         hoverinfo: 'x+y+text',
-        hovertemplate: '%{text}' + weeklyTotalExtra,
+        hovertemplate: '%{text}' + hovertemplateBody,
       })
       );
 
@@ -755,7 +755,7 @@ window.app = new Vue({
           size: 6,
           color: 'rgba(254, 52, 110, 1)'
         },
-        hovertemplate: '%{data.text}' +  weeklyTotalExtra,
+        hovertemplate: '%{data.text}' +  hovertemplateBody,
 
       }));
 

From 89825660cc19541289f15aeec171d0386db99375 Mon Sep 17 00:00:00 2001
From: "Bernard A. Badger" <bab9e9@gmail.com>
Date: Wed, 20 May 2020 18:54:54 -0400
Subject: [PATCH 5/5] Remove extra space after + sign

---
 vue-definitions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-definitions.js b/vue-definitions.js
index 14b7078..9e1e1d1 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -755,7 +755,7 @@ window.app = new Vue({
           size: 6,
           color: 'rgba(254, 52, 110, 1)'
         },
-        hovertemplate: '%{data.text}' +  hovertemplateBody,
+        hovertemplate: '%{data.text}' + hovertemplateBody,
 
       }));