View overall stats

Author: Stigmatoz

src/index.html

@@ -58,42 +58,45 @@
             </div>
          </div>
          <div>
-            <div class="most-inactive-days-title">
-               <div class="most-inactive-days-value">
-                  <span>Most inactive day</span>
+            <div class="title-block">
+               <span>Today</span>
+               <span class="span-time" id="statTodayTime"></span>
+            </div>
+            <div class="inline-block">
+               <span>All-time</span>
+               <span class="span-time" id="statAllDaysTime"></span>
+            </div>
+         </div>
+         <div>
+            <div class="most-active-days-title">
+               <div class="most-active-days-value">
+                  <span>Most active day</span>
                </div>
                <div class="inline-block">
-                  <div class="value-block" id="statInActiveDay"></div>
-                  <div class="value-block" id="statInActiveDayTime"></div>
+                  <div class="value-block" id="statActiveDay"></div>
+                  <div class="span-time" id="statActiveDayTime"></div>
                </div>
             </div>
             <div class="inline-block">
                <div style="display: inline-block;vertical-align: top;">
-                  <span>Most active day</span>
+                  <span>Most inactive day</span>
                </div>
                <div class="inline-block">
-                     <div class="value-block" id="statActiveDay"></div>
-                     <div class="value-block" id="statActiveDayTime"></div>
+                  <div class="value-block" id="statInActiveDay"></div>
+                  <div class="span-time" id="statInActiveDayTime"></div>
                </div>
             </div>
          </div>
-         <div>
-            <div class="title-block">
-               <span>Today</span>
-               <span class="value-block" id="statTodayTime"></span>
-            </div>
-            <div class="inline-block">
-               <span>All-time</span>
-               <span class="value-block" id="statAllDaysTime"></span>
-            </div>
-         </div>
       </div>
    </div>
    <div id="blockForChartBtn">
       <a class="button active chart-btn chart-btn-donut" id="donutChartBtn">Common chart</a>
       <a class="button chart-btn chart-btn-heatmap" id="heatMapChartBtn">Time chart</a>
    </div>
    <div id="chart"></div>
+   <div id="labelForTimeInterval" class="warning hide">
+      <label>Only time intervals greater than 3 seconds are shown</label>
+   </div>
    <div id="timeChart"></div>
    <div id="resultTable" class="list-of-site"></div>
    <div id="total" class="inline-flex"></div>

src/scripts/activity.js

@@ -102,6 +102,7 @@ class Activity {
     setCurrentActiveTab(domain) {
         this.closeIntervalForCurrentTab();
         currentTab = domain;
+        this.addTimeInterval(domain);
     }
 
     clearCurrentActiveTab() {

src/scripts/background.js

@@ -202,6 +202,10 @@ function deleteTimeIntervalFromTabs() {
     })
 }
 
+function deleteYesterdayTimeInterval(){
+    timeIntervalList = timeIntervalList.filter(x => x.day == new Date().toLocaleDateString("en-US"));
+}
+
 function loadBlackList() {
     storage.getValue(STORAGE_BLACK_LIST, function (items) {
         setting_black_list = items;
@@ -215,6 +219,7 @@ function loadTimeIntervals() {
             for (var i = 0; i < items.length; i++) {
                 timeIntervalList.push(new TimeInterval(items[i].day, items[i].domain, items[i].intervals));
             }
+            deleteYesterdayTimeInterval();
         }
     });
 }

src/scripts/common.js

@@ -183,3 +183,14 @@ function isDomainEquals(first, second) {
         else return false;
     }
 }
+
+function treatAsUTC(date) {
+    var result = new Date(date);
+    result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
+    return result;
+}
+
+function daysBetween(startDate, endDate) {
+    var millisecondsPerDay = 24 * 60 * 60 * 1000;
+    return ((treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay) + 1;
+}

src/scripts/ui.js

@@ -11,6 +11,7 @@ class UI {
         document.getElementById('btnByDays').classList.remove('active');
         document.getElementById('blockForChartBtn').classList.remove('hide');
         document.getElementById('stats').classList.add('hide');
+        document.getElementById('labelForTimeInterval').classList.add('hide');
         this.setUIForDonutChart();
 
         this.clearUI();
@@ -22,6 +23,7 @@ class UI {
         document.getElementById('btnByDays').classList.remove('active');
         document.getElementById('blockForChartBtn').classList.add('hide');
         document.getElementById('stats').classList.remove('hide');
+        document.getElementById('labelForTimeInterval').classList.add('hide');
 
         this.clearUI();
     }
@@ -32,6 +34,7 @@ class UI {
         document.getElementById('btnToday').classList.remove('active');
         document.getElementById('blockForChartBtn').classList.add('hide');
         document.getElementById('stats').classList.add('hide');
+        document.getElementById('labelForTimeInterval').classList.add('hide');
 
         this.clearUI();
         this.addBlockForCalendar(range);
@@ -49,12 +52,14 @@ class UI {
         document.getElementById('donutChartBtn').classList.add('active');
         document.getElementById('heatMapChartBtn').classList.remove('active');
         document.getElementById('timeChart').innerHTML = null;
+        document.getElementById('labelForTimeInterval').classList.add('hide');
     }
 
     setUIForTimeChart() {
         document.getElementById('donutChartBtn').classList.remove('active');
         document.getElementById('heatMapChartBtn').classList.add('active');
         document.getElementById('chart').innerHTML = null;
+        document.getElementById('labelForTimeInterval').classList.remove('hide');
     }
 
     createTotalBlock(totalTime, currentTypeOfList, counter) {

src/scripts/webact.js

@@ -10,16 +10,40 @@ var today = new Date().toLocaleDateString("en-US");
 var setting_range_days;
 var restrictionList;
 var stat = {
-    'firstDay': null,
-    'lastDay': null,
-    'activeDays': null,
-    'totalDays': null,
-    'inActiveDay': null,
-    'inActiveDayTime': null,
-    'activeDay': null,
-    'activeDayTime': null,
-    'todayTime': null,
-    'allDaysTime': null
+    set firstDay(value){
+        document.getElementById('statFirstDay').innerHTML = value;
+    },
+    set lastDay(value){
+        document.getElementById('statLastDay').innerHTML = value;
+    },
+    set activeDays(value){
+        document.getElementById('statActiveDays').innerHTML = value;
+    },
+    set totalDays(value){
+        document.getElementById('statTotalDays').innerHTML = value;
+    },
+    set inActiveDay(value){
+        document.getElementById('statInActiveDay').innerHTML = value;
+    },
+    set inActiveDayTime(value){
+        document.getElementById('statInActiveDayTime').innerHTML = '';
+        ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statInActiveDayTime'));
+    },
+    set activeDay(value){
+        document.getElementById('statActiveDay').innerHTML = value;
+    },
+    set activeDayTime(value){
+        document.getElementById('statActiveDayTime').innerHTML = '';
+        ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statActiveDayTime'));
+    },
+    set todayTime(value){
+        document.getElementById('statTodayTime').innerHTML = '';
+        ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statTodayTime'));
+    },
+    set allDaysTime(value){
+        document.getElementById('statAllDaysTime').innerHTML = '';
+        ui.createElementsForTotalTime(value, TypeListEnum.All, document.getElementById('statAllDaysTime'));
+    },
 };
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -295,16 +319,47 @@ function getFirstDay() {
                 return array.push(a.date);
         });
     });
+    
     array = array.sort(function (a, b) {
         return new Date(a) - new Date(b);
     });
 
+    setStatData(array);
     return {
         'countOfDays': array.length,
         'minDate': array[0]
     };
 }
 
+function setStatData(array){
+    var arrayAscByTime = [];
+    tabsFromStorage.forEach(tab => {
+        return tab.days.forEach(day => {
+            var item = arrayAscByTime.find(x => x.date == day.date);
+            if (item !== undefined) {
+                return item.total += day.summary;
+            }
+            if (item === undefined)
+                return arrayAscByTime.push({
+                    'date': day.date,
+                    'total': day.summary
+                });
+        });
+    });
+
+    arrayAscByTime = arrayAscByTime.sort(function (a, b) {
+        return a.total - b.total;
+    });
+    stat.inActiveDay = arrayAscByTime[0].date;
+    stat.activeDay = arrayAscByTime[arrayAscByTime.length-1].date;
+    stat.inActiveDayTime = arrayAscByTime[0].total;
+    stat.activeDayTime = arrayAscByTime[arrayAscByTime.length-1].total;
+    stat.firstDay = array[0];
+    stat.lastDay = array[array.length-1];
+    stat.activeDays = array.length;
+    stat.totalDays = daysBetween(array[0], array[array.length-1]);
+}
+
 function getTabsByDays(tabs) {
     var range = ui.getDateRange();
     if (tabs === undefined) {

src/style/webact.css

@@ -421,13 +421,19 @@ p.table-header{
     display: inline-block;
   }
 
-  #statsBlock .most-inactive-days-title{
+  #statsBlock .most-active-days-title{
     width: 50%; 
     display: inline-block;
   }
 
-  #statsBlock .most-inactive-days-value{
+  #statsBlock .most-active-days-value{
     display: inline-block;
     margin-left:20%;
     vertical-align: top;
+  }
+
+  .warning{
+    color: #9b9b9b;
+    font-size: 13px;
+    text-align: center;
   }