Fill overall stats for all days

- remove unnecessary icons

Author: Stigmatoz

src/assets/css/main.css

@@ -1,6 +1,6 @@
 :root {
   --main-color: #6ebf5d;
-  --popup-header: #f3f3f3;
+  --popup-header: #efefef;
   --progress-bar: #428bff;
 }
 ::-webkit-scrollbar-track {
@@ -134,7 +134,7 @@ body {
   border-radius: 1px;
 }
 .tabs .content {
-  margin-top: 30px;
+  margin-top: 10px;
 }
 .tabs .content section {
   display: none;

src/assets/icons/eye.png

@@ -0,0 +1,92 @@
+<template>
+  <div class="stats-block">
+    <div class="row">
+      <div class="block">
+        <div class="header">The first active day</div>
+        <p>{{ data.firstDay.toLocaleDateString() }}</p>
+      </div>
+      <div class="block">
+        <div class="header">Number of active days</div>
+        <p>{{ data.activeDaysTotal }}</p>
+      </div>
+      <div class="block">
+        <div class="header">Total number of days</div>
+        <p>{{ data.daysTotal }}</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="block">
+        <div class="header">Time for today</div>
+        <p>{{ convertSummaryTimeToString(data.todaySummaryTime) }}</p>
+      </div>
+      <div class="block">
+        <div class="header">All the time</div>
+        <p>{{ convertSummaryTimeToString(data.summaryTime) }}</p>
+      </div>
+      <div class="block">
+        <div class="header">Average time on active days</div>
+        <p>{{ convertSummaryTimeToString(data.averageTimeByActiveDays) }}</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="block">
+        <div class="header">The most active day</div>
+        <p>{{ data.mostActiveDay.date.toLocaleDateString() }}</p>
+        <p>{{ convertSummaryTimeToString(data.mostActiveDay.summaryTime) }}</p>
+      </div>
+      <div class="block">
+        <div class="header">The most inactive day</div>
+        <p>{{ data.mostInactiveDay.date.toLocaleDateString() }}</p>
+        <p>{{ convertSummaryTimeToString(data.mostInactiveDay.summaryTime) }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'OverallStatistics',
+};
+</script>
+
+<script lang="ts" setup>
+import { OverallStats } from '../dto/tabListSummary';
+import { convertSummaryTimeToString } from '../utils/converter';
+
+const props = defineProps<{
+  data: OverallStats;
+}>();
+</script>
+
+<style scoped>
+.stats-block {
+  margin: 5px 35px;
+}
+
+.stats-block .row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 10px 0;
+}
+
+.stats-block .block {
+  width: 165px;
+  text-align: center;
+}
+
+.stats-block .block .header {
+  background-color: var(--popup-header);
+  color: rgb(66, 66, 66);
+  padding: 5px 5px;
+  border-radius: 5px;
+}
+
+.stats-block .block p {
+  margin: 2px;
+  text-align: center;
+  font-weight: 700;
+  font-size: 13px;
+  color: rgb(59, 59, 59);
+}
+</style>

src/assets/icons/heat-map-16.png

@@ -1,6 +1,7 @@
 <template>
   <div class="no-data" v-if="countOfSites == undefined || countOfSites == 0">No data</div>
   <div v-else>
+    <OverallStatistics v-if="isShowOverallStats" :data="dataForOvarallStats" />
     <DonutChart :time="timeForChart" :labels="sitesForChart" />
     <TabItemHeader
       :listType="type"
@@ -25,19 +26,24 @@ import { computed, onMounted, ref } from 'vue';
 import TabItem from '../components/TabItem.vue';
 import TabItemHeader from '../components/TabItemHeader.vue';
 import DonutChart from '../components/DonutChart.vue';
-import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import OverallStatistics from '../components/OverallStatistics.vue';
 import { Tab } from '../entity/tab';
 import { SortingBy, TypeOfList } from '../utils/enums';
 import { useTodayTabListSummary } from '../compositions/today-tab-list-summary';
 import { useAllTabListSummary } from '../compositions/all-tab-list-summary';
 import { CurrentTabItem } from '../dto/currentTabItem';
 import { todayLocalDate } from '../utils/today';
+import { OverallStats } from '../dto/tabListSummary';
 
 const props = defineProps<{
   type: TypeOfList;
+  showAllStats: boolean;
 }>();
 
+const isShowOverallStats = computed(() => props.showAllStats && props.type == TypeOfList.All);
+
 const tabs = ref<Tab[]>();
+const dataForOvarallStats = ref<OverallStats>();
 
 const timeForChart = ref<number[]>();
 const sitesForChart = ref<string[]>();
@@ -46,15 +52,13 @@ const summaryTime = ref<number>();
 
 const countOfSites = computed(() => (tabs.value != undefined ? tabs.value.length : 0));
 
-const firstDay = computed(() => {
-  if (props.type == TypeOfList.All) return;
-});
-
 async function loadList(sortingBy: SortingBy) {
-  const repo = await injectTabsRepository();
   let tabSummary = null;
   if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary(sortingBy);
-  if (props.type == TypeOfList.All) tabSummary = await useAllTabListSummary(sortingBy);
+  if (props.type == TypeOfList.All) {
+    tabSummary = await useAllTabListSummary(sortingBy);
+    dataForOvarallStats.value = tabSummary;
+  }
 
   if (tabSummary != null) {
     tabs.value = tabSummary.tabs;

src/assets/icons/pie-chart.png

@@ -1,21 +1,54 @@
-import { TabListSummary } from '../dto/tabListSummary';
-import { Tab } from '../entity/tab';
+import { ActiveDay, OverallStats } from '../dto/tabListSummary';
+import { Tab, TabDay } from '../entity/tab';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { SortingBy } from '../utils/enums';
+import { daysBetween } from '../utils/time';
+import { todayLocalDate } from '../utils/today';
 
-export async function useAllTabListSummary(sortingBy: SortingBy): Promise<TabListSummary> {
+export async function useAllTabListSummary(sortingBy: SortingBy): Promise<OverallStats> {
   const repo = await injectTabsRepository();
   const unSortedTabs = repo.getTabs();
   let tabs: Tab[] = [];
 
+  const summaryTimeListForToday = unSortedTabs.map(function (tab) {
+    return tab.days.find(day => day.date === todayLocalDate())!.summary;
+  });
+
+  const todaySummaryTime =
+    summaryTimeListForToday != undefined && summaryTimeListForToday.length > 0
+      ? summaryTimeListForToday.reduce(function (a, b) {
+          return a + b;
+        })
+      : 0;
+
   tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
     return b.summaryTime - a.summaryTime;
   });
 
-  tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
-    return sortingBy == SortingBy.UsageTime ? b.summaryTime - a.summaryTime : b.counter - a.counter;
+  let days: TabDay[] = [];
+  tabs.map(function (tab) {
+    return tab.days.forEach(function (day) {
+      const existDay = days.find(x => x.date == day.date);
+      if (!existDay) days.push(day);
+      else {
+        existDay.summary += day.summary;
+        existDay.counter += day.counter;
+      }
+    });
   });
 
+  days = days.sort(function (a, b) {
+    return new Date(a.date).valueOf() - new Date(b.date).valueOf();
+  });
+
+  const firstDay = new Date(days[0].date);
+  const activeDaysTotal = days.length;
+
+  if (sortingBy == SortingBy.Sessions)
+    tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
+      return b.counter - a.counter;
+    });
+
   const summaryTimeList = tabs?.map(function (tab) {
     return tab.summaryTime;
   });
@@ -31,12 +64,39 @@ export async function useAllTabListSummary(sortingBy: SortingBy): Promise<TabLis
           return a + b;
         })
       : 0;
+
+  const averageTimeByActiveDays = Math.round(summaryTime / activeDaysTotal);
+  const daysTotal = daysBetween(firstDay, new Date(days[days.length - 1].date));
+
+  const sortedByTimeDays = days.sort(function (a, b) {
+    return a.summary - b.summary;
+  });
+
+  const mostActiveDay = sortedByTimeDays[0];
+  const mostActiveDayObj = fillMostDay(mostActiveDay);
+
+  const mostInactiveDay = sortedByTimeDays[sortedByTimeDays.length - 1];
+  const mostInactiveDayObj = fillMostDay(mostInactiveDay);
   return {
-    tabs,
-    summaryTime,
+    firstDay: firstDay,
+    daysTotal: daysTotal,
+    activeDaysTotal: activeDaysTotal,
+    todaySummaryTime: todaySummaryTime,
+    averageTimeByActiveDays: averageTimeByActiveDays,
+    mostActiveDay: mostActiveDayObj,
+    mostInactiveDay: mostInactiveDayObj,
+    tabs: tabs,
+    summaryTime: summaryTime,
     chart: {
       timeForChart,
       sitesForChart,
     },
   };
 }
+
+function fillMostDay(mostDat: TabDay): ActiveDay {
+  return {
+    date: new Date(mostDat.date),
+    summaryTime: mostDat.summary,
+  };
+}

src/components/OverallStatistics.vue

@@ -1,5 +1,20 @@
 import { Tab } from '../entity/tab';
 
+export interface OverallStats extends TabListSummary {
+  firstDay: Date;
+  activeDaysTotal: number;
+  daysTotal: number;
+  todaySummaryTime: number;
+  averageTimeByActiveDays: number;
+  mostActiveDay: ActiveDay;
+  mostInactiveDay: ActiveDay;
+}
+
+export interface ActiveDay {
+  date: Date;
+  summaryTime: number;
+}
+
 export interface TabListSummary {
   tabs: Tab[];
   summaryTime: number;

src/components/TabList.vue

@@ -25,10 +25,10 @@
     <div class="slider"><div class="indicator"></div></div>
     <div class="content">
       <section>
-        <TabList :type="TypeOfList.Today" />
+        <TabList :type="TypeOfList.Today" :showAllStats="false" />
       </section>
       <section>
-        <TabList :type="TypeOfList.All" />
+        <TabList :type="TypeOfList.All" :showAllStats="true" />
       </section>
       <section>
         <h2>Shipping</h2>

src/compositions/all-tab-list-summary.ts

@@ -7,3 +7,14 @@ export function getNextTimeOfDay(timeOfDay: number): number {
   const todaysTime = getToday() + timeOfDay;
   return todaysTime > Date.now() ? todaysTime : todaysTime + DAY_MINUTES;
 }
+
+export function treatAsUTC(date: Date): Date {
+  const result = new Date(date);
+  result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
+  return result;
+}
+
+export function daysBetween(startDate: Date, endDate: Date): number {
+  const millisecondsPerDay = 24 * 60 * 60 * 1000;
+  return (treatAsUTC(endDate).valueOf() - treatAsUTC(startDate).valueOf()) / millisecondsPerDay + 1;
+}