Add average time by active days

Author: Stigmatoz

src/index.html

@@ -47,44 +47,48 @@
         <div id="statsBlock">
             <div class="title-block">
                 <div class="block">
-                    <div>First day</div>
+                    <div class="summary-title">First day</div>
                     <div class="value-block" id="statFirstDay"></div>
                 </div>
                 <div class="block">
-                    <div>Last day</div>
+                    <div class="summary-title">Last day</div>
                     <div class="value-block" id="statLastDay"></div>
                 </div>
             </div>
             <div class="title-block">
                 <div class="block">
-                    <div>Active days</div>
+                    <div class="summary-title">Active days</div>
                     <div class="value-block" id="statActiveDays"></div>
                 </div>
                 <div class="block">
-                    <div>Days in total</div>
+                    <div class="summary-title">Days in total</div>
                     <div class="value-block" id="statTotalDays"></div>
                 </div>
             </div>
             <div class="title-block">
-                <div class="block">
-                    <div>Today</div>
+                <div class="block-additional">
+                    <div class="summary-title">Today</div>
                     <div class="span-time" id="statTodayTime"></div>
                 </div>
-                <div class="block">
-                    <div>All-time</div>
+                <div class="block-additional">
+                    <div class="summary-title">All-time</div>
                     <div class="span-time" id="statAllDaysTime"></div>
                 </div>
+                <div class="block-additional">
+                    <div class="summary-title">Average by active days</div>
+                    <div class="span-time" id="statAverageTime"></div>
+                </div>
             </div>
             <div class="title-block">
                 <div class="block">
-                    <div>Most active day</div>
+                    <div class="summary-title">Most active day</div>
                     <div class="inline-block">
                         <div class="value-block" id="statActiveDay"></div>
                         <div class="span-time" id="statActiveDayTime"></div>
                     </div>
                 </div>
                 <div class="block">
-                    <div>Most inactive day</div>
+                    <div class="summary-title">Most inactive day</div>
                     <div class="inline-block">
                         <div class="value-block" id="statInActiveDay"></div>
                         <div class="span-time" id="statInActiveDayTime"></div>

src/scripts/webact.js

@@ -3,7 +3,7 @@
 var tabsFromBackground;
 var storage = new LocalStorage();
 var ui = new UI();
-var totalTime;
+var totalTime, averageTime;
 var tabsFromStorage;
 var targetTabs;
 var currentTypeOfList;
@@ -33,6 +33,10 @@ var stat = {
     set activeDay(value) {
         document.getElementById('statActiveDay').innerHTML = value;
     },
+    set averageTime(value) {
+        document.getElementById('statAverageTime').innerHTML = '';
+        ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statAverageTime'));
+    },
     set activeDayTime(value) {
         document.getElementById('statActiveDayTime').innerHTML = '';
         ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statActiveDayTime'));
@@ -147,6 +151,7 @@ function getTabsFromStorage(tabs) {
         if (targetTabs.length > 0) {
             totalTime = getTotalTime(targetTabs);
             stat.allDaysTime = totalTime;
+
         } else {
             ui.fillEmptyBlock('chart');
             return;
@@ -371,6 +376,7 @@ function setStatData(array) {
     stat.firstDay = new Date(array[0]).toLocaleDateString('ru-RU');;
     stat.lastDay = new Date(array[array.length - 1]).toLocaleDateString('ru-RU');;
     stat.activeDays = array.length;
+    stat.averageTime = totalTime / array.length;
     stat.totalDays = daysBetween(array[0], array[array.length - 1]);
 }
 

src/style/webact.css

@@ -393,7 +393,21 @@ input[type='checkbox'] {
 }
 
 #statsBlock .block {
-    width: 40%;
+    width: 45%;
+    display: inline-block;
+    text-align: center;
+}
+
+#statsBlock .summary-title{
+    background: #dbdbdb;
+    border: #dbdbdb 1px solid;
+    border-radius: 10px;
+    color: #919191;
+    padding: 2px;
+}
+
+#statsBlock .block-additional {
+    width: 30%;
     display: inline-block;
     text-align: center;
 }