attempting pie chart

content/reading-tracker.html

@@ -262,6 +262,7 @@ <h3><span class="tally-display-hours"></span> hours and <span class="tally-displ
                     data-operation="increment"
                 ></button>
             </div>
+            <label for="book-dropdown">Book</label>
             <select id="book-dropdown">
               <option value="Genesis">Genesis</option>
               <option value="Exodus">Exodus</option>
@@ -346,6 +347,9 @@ <h2>Hours of the day</h2>
 
   <h2>Days of the week</h2>
     <canvas id="daysChart"></canvas>
+
+  <h2>Book</h2>
+    <canvas id="bookChart"></canvas>
 </div>
 
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -357,12 +361,13 @@ <h2>Days of the week</h2>
 
   <script>
     getTimespans().then((timespans) => {
-      const [hoursMap, daysMap, weeklyMap] = timespans;
+      const [hoursMap, daysMap, weeklyMap, booksMap] = timespans;
       const endIndex = daysMap.size - 1;
 
       const hoursChart = document.getElementById('hoursChart');
       const daysChart = document.getElementById('daysChart');
       const weekChart = document.getElementById('weekChart');
+      const bookChart = document.getElementById('bookChart');
 
       new Chart(weekChart, {
         type: 'line',
@@ -420,5 +425,16 @@ <h2>Days of the week</h2>
           }
         }
       });
+
+      new Chart(bookChart, {
+        type: 'pie',
+        data: {
+          labels: [...booksMap.keys()],
+          datasets: [{
+            label: 'Time spent in each book',
+            data: [...booksMap.values()]
+          }]
+        }
+      });
     }).catch(error => console.log(error));
   </script>

static/reading.js

@@ -33,14 +33,16 @@ async function getTimespans(tallyType = 'reading') {
     const json = await response.json();
     let hoursMap = new Map();
     let daysMap = new Map();
+    let booksMap = new Map();
     let timespans = json.timespans;
     timespans.forEach(element => {
         populateHoursMap(hoursMap, element);
         populateDaysMap(daysMap, element);
+        populateBooksMap(booksMap, element);
     });
     daysMap = formatDaysMap(daysMap);
     const weeklyMap = populateWeeklyMap(timespans);
-    return [hoursMap, daysMap, weeklyMap];
+    return [hoursMap, daysMap, weeklyMap, booksMap];
 }
 
 function populateDaysMap(daysMap, element) {
@@ -75,6 +77,14 @@ function populateWeeklyMap(timespans) {
     return weeklyMap;
 }
 
+function populateBooksMap(booksMap, element) {
+    let entry = booksMap.get(element.passage);
+    let sum = element.duration + (entry || 0);
+    booksMap.set(element.passage, sum);
+
+    return booksMap;
+}
+
 function isInCurrentWeek(element, sunday) {
     const submittedTime = new Date(element.submitted_time);
     return (submittedTime > sunday);