Details stats component

Author: Stigmatoz

src/components/WebsiteStats.vue

@@ -46,7 +46,10 @@
           >
         </div>
         <div class="mt-20 ml-10 mr-10 by-days-chart">
-          <ByDaysChart :data="tabInfoByDays!" />
+          <by-days-chart :data="tabInfoByDays!" />
+        </div>
+        <div>
+          <website-stats-details :details="tabInfoByDays!" />
         </div>
       </div>
     </div>
@@ -64,6 +67,7 @@ import { useI18n } from 'vue-i18n';
 import Favicon from './Favicon.vue';
 import NoDataByDays from './NoDataByDays.vue';
 import ByDaysChart from '../components/ByDaysChart.vue';
+import WebsiteStatsDetails from '../components/WebsiteStatsDetails.vue';
 import { openPage } from '../utils/open-page';
 import { computed, onMounted, ref } from 'vue';
 import { SettingsTab } from '../utils/enums';

src/components/WebsiteStatsDetails.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="container">
+    <div class="block">
+      <p class="title">Total time</p>
+      <p class="value">
+        {{ convertSummaryTimeToString(details.summaryTime) }}
+      </p>
+    </div>
+    <div class="block">
+      <p class="title">Total sessions</p>
+      <p class="value">
+        {{ details.sessions }}
+      </p>
+    </div>
+    <div class="block">
+      <p class="title">Average daily time</p>
+      <p class="value">
+        {{ convertSummaryTimeToString(details.averageTime) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'WebsiteStatsDetails',
+};
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { TabListByDays } from '../dto/tabListSummary';
+import { convertSummaryTimeToString } from '../utils/converter';
+
+defineProps<{
+  details: TabListByDays;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style scoped>
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.container {
+  display: flex;
+  width: auto;
+}
+.block {
+  padding: 10px;
+  background-color: rgb(237 237 237);
+  border-radius: 10px;
+  margin-right: 30px;
+  box-shadow: 12px 12px 2px 1px rgb(185 255 171);
+}
+.block p.title {
+  font-size: 15px;
+  color: grey;
+}
+.block p.value {
+  margin: 5px;
+  font-size: 20px;
+  font-weight: 600;
+}
+</style>

src/compositions/useTabListByDays.ts

@@ -26,6 +26,7 @@ export async function useTabListByDays(
       days: [],
       averageTime: 0,
       summaryTime: 0,
+      sessions: 0,
     };
 
   unSortedTabsByDays.forEach(tab => {
@@ -40,6 +41,7 @@ export async function useTabListByDays(
             day: day.date,
             tabs: [],
             time: day.summary,
+            sessions: day.counter,
           };
           dayTab.tabs.push({
             favicon: tab.favicon,
@@ -50,6 +52,7 @@ export async function useTabListByDays(
           daysTabs.push(dayTab);
         } else {
           dayTab.time += day.summary;
+          dayTab.sessions += day.counter;
           dayTab.tabs.push({
             favicon: tab.favicon,
             url: tab.url,
@@ -77,11 +80,18 @@ export async function useTabListByDays(
       return a + b;
     });
 
+  const totalSessions = daysTabs
+    .map(x => x.sessions)
+    .reduce(function (a, b) {
+      return a + b;
+    });
+
   const averageTime = Math.round(summaryTime / daysTabs.length);
 
   return {
     days: daysTabs,
     summaryTime: summaryTime,
     averageTime: averageTime,
+    sessions: totalSessions,
   };
 }

src/compositions/useTabStatsByDays.ts

@@ -25,6 +25,7 @@ export async function useTabStatsByDays(
       days: [],
       averageTime: 0,
       summaryTime: 0,
+      sessions: 0,
     };
 
   unSortedTabsByDays.forEach(tabDay => {
@@ -38,6 +39,7 @@ export async function useTabStatsByDays(
           day: tabDay.date,
           tabs: [],
           time: tabDay.summary,
+          sessions: tabDay.counter,
         };
         dayTab.tabs.push({
           favicon: tab.favicon,
@@ -48,6 +50,7 @@ export async function useTabStatsByDays(
         daysTabs.push(dayTab);
       } else {
         dayTab.time += tabDay.summary;
+        dayTab.sessions += tabDay.counter;
         dayTab.tabs.push({
           favicon: tab.favicon,
           url: tab.url,
@@ -74,11 +77,18 @@ export async function useTabStatsByDays(
       return a + b;
     });
 
+  const totalSessions = daysTabs
+    .map(x => x.sessions)
+    .reduce(function (a, b) {
+      return a + b;
+    });
+
   const averageTime = Math.round(summaryTime / daysTabs.length);
 
   return {
     days: daysTabs,
     summaryTime: summaryTime,
     averageTime: averageTime,
+    sessions: totalSessions,
   };
 }

src/dto/tabListSummary.ts

@@ -33,10 +33,12 @@ export interface TabListByDays {
   days: DayTabs[];
   averageTime: number;
   summaryTime: number;
+  sessions: number;
 }
 
 export interface DayTabs {
   day: string;
   tabs: CurrentTabItem[];
   time: number;
+  sessions: number;
 }