add table header with summary count of days and first date

Author: hai-altx-soft

scripts/ui.js

@@ -71,21 +71,37 @@ class UI {
 
     drawChart(tabs) {
         var donut = donutChart()
-                .width(480)
-                .height(280)
-                .cornerRadius(5) // sets how rounded the corners are on each slice
-                .padAngle(0.020) // effectively dictates the gap between slices
-                .variable('percentage')
-                .category('url');
+            .width(480)
+            .height(280)
+            .cornerRadius(5) // sets how rounded the corners are on each slice
+            .padAngle(0.020) // effectively dictates the gap between slices
+            .variable('percentage')
+            .category('url');
 
         d3.select('#chart')
-                .datum(tabs) // bind data to the div
-                .call(donut); // draw chart in div
+            .datum(tabs) // bind data to the div
+            .call(donut); // draw chart in div
 
         ui.addHrAfterChart();
     }
 
-    addLineToTableOfSite(tab, currentTab, summaryTime){
+    addTableHeader(currentTypeOfList, totalDays) {
+        var p = document.createElement('p');
+        p.classList.add('table-header');
+        if (currentTypeOfList === TypeListEnum.ToDay)
+            p.innerHTML = 'Today';
+        if (currentTypeOfList === TypeListEnum.All && totalDays !== undefined) {
+            if (totalDays.countOfDays > 0) {
+                p.innerHTML = 'Aggregate data since ' + totalDays.minDate + ' (' + totalDays.countOfDays + ' days)';
+            } else {
+                p.innerHTML = 'Aggregate data since ' + today;
+            }
+        }
+
+        this.getTableOfSite().appendChild(p);
+    }
+
+    addLineToTableOfSite(tab, currentTab, summaryTime) {
         var div = document.createElement('div');
         div.classList.add('inline-flex');
 

scripts/webact.js

@@ -69,6 +69,11 @@ function getTabsFromStorage(tabs) {
         }
     }
 
+    if (currentTypeOfList === TypeListEnum.All)
+        ui.addTableHeader(currentTypeOfList, getFirstDay());
+    if (currentTypeOfList === TypeListEnum.ToDay)
+        ui.addTableHeader(currentTypeOfList);
+
     var currentTab = getCurrentTab();
 
     var tabsForChart = [];
@@ -144,4 +149,22 @@ function addTabOthersForChart(tabsForChart, summaryTime) {
         tab['summary'] += summaryTime;
         tab['percentage'] = getPercentageForChart(tab['summary']);
     }
+}
+
+function getFirstDay() {
+    var array = [];
+    tabsFromStorage.map(function (a) {
+        return a.days.map(function (a) {
+            if (array.indexOf(a.date) === -1)
+                return array.push(a.date);
+        });
+    });
+    array = array.sort(function (a, b) {
+        return new Date(a) - new Date(b);
+    });
+
+    return {
+        'countOfDays': array.length,
+        'minDate': array[0]
+    };
 }

style/webact.css

@@ -124,4 +124,12 @@ input[type="button"].active {
     text-align: center;
     font-weight: 600;
     font-size: 14px;
+.table-header{
+    margin:3px 0;
+    border-radius: 5px;
+    font-weight: 600;
+    font-size: 13px;
+    padding: 4px;
+    background-color: rgb(223, 221, 221);
+    text-align: center;
 }