Chart by days for domain

Author: Stigmatoz

src/components/ByDays.vue

@@ -41,7 +41,7 @@
         <div class="header">{{ t('averageTimeByDays.message') }}</div>
         <p>{{ convertSummaryTimeToString(tabsByDays!.averageTime) }}</p>
       </div>
-      <div class="ml-20 mr-20">
+      <div class="ml-20 mr-20 by-days-chart">
         <ByDaysChart :data="tabsByDays!" />
       </div>
       <div>
@@ -161,4 +161,7 @@ async function exportToCsv() {
   justify-content: space-between;
   margin: 0 25px;
 }
+.by-days-chart {
+  height: 240px;
+}
 </style>

src/components/ByDaysChart.vue

@@ -95,7 +95,7 @@ function refreshChart() {
 
 <style scoped>
 .chart {
-  min-height: 230px;
+  height: 100%;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px;

src/components/WebsiteStats.vue

@@ -45,7 +45,7 @@
             </template></VueDatePicker
           >
         </div>
-        <div class="mt-20 ml-10 mr-10">
+        <div class="mt-20 ml-10 mr-10 by-days-chart">
           <ByDaysChart :data="tabInfoByDays!" />
         </div>
       </div>
@@ -68,7 +68,7 @@ import { openPage } from '../utils/open-page';
 import { computed, onMounted, ref } from 'vue';
 import { SettingsTab } from '../utils/enums';
 import { ThisWeekRange, ranges } from '../utils/date';
-import { useDomainStatsByDays } from '../compositions/useDomainStatsByDays';
+import { useTabStatsByDays } from '../compositions/useTabStatsByDays';
 import { TabListByDays } from '../dto/tabListSummary';
 import { Tab } from '../entity/tab';
 import { getTypeOfUrl } from '../utils/get-type-of-url';
@@ -98,12 +98,16 @@ onMounted(async () => {
   const dateTo = selectedDate.value?.[1] as Date;
   const repo = await injectTabsRepository();
   tab.value = repo.getTab(props.domain);
+  if (tab == undefined) {
+    noData.value = true;
+    return;
+  }
 
   await loadList(dateFrom, dateTo);
 });
 
 async function loadList(dateFrom: Date, dateTo: Date) {
-  const tabList = await useDomainStatsByDays(dateFrom, dateTo);
+  const tabList = await useTabStatsByDays(dateFrom, dateTo, tab.value?.url!);
   if (tabList != null) {
     tabInfoByDays.value = tabList;
     if (tabList.days.length == 0 && tabList.summaryTime == 0) noData.value = true;
@@ -130,4 +134,7 @@ async function handleDate(modelData: Date[]) {
   display: flex;
   justify-content: space-between;
 }
+.by-days-chart {
+  height: 400px;
+}
 </style>

src/compositions/useTabStatsByDays.ts

@@ -0,0 +1,84 @@
+import { CurrentTabItem } from '../dto/currentTabItem';
+import { DayTabs, TabListByDays } from '../dto/tabListSummary';
+import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import { isSameDay } from 'date-fns';
+
+export async function useTabStatsByDays(
+  dateFrom: Date,
+  dateTo: Date,
+  domain: string,
+): Promise<TabListByDays | null> {
+  const repo = await injectTabsRepository();
+  const tab = repo.getTab(domain);
+  let daysTabs: DayTabs[] = [];
+
+  if (tab == undefined) return null;
+
+  const isTheSameDay = isSameDay(dateFrom, dateTo);
+
+  const unSortedTabsByDays = isTheSameDay
+    ? tab.days.filter(s => isSameDay(new Date(s.date), dateFrom))
+    : tab.days.filter(s => new Date(s.date) >= dateFrom && new Date(s.date) <= dateTo);
+
+  if (unSortedTabsByDays.length == 0)
+    return {
+      days: [],
+      averageTime: 0,
+      summaryTime: 0,
+    };
+
+  unSortedTabsByDays.forEach(tabDay => {
+    if (
+      (new Date(tabDay.date) >= dateFrom && new Date(tabDay.date) <= dateTo) ||
+      (isTheSameDay && isSameDay(new Date(tabDay.date), dateFrom))
+    ) {
+      let dayTab = daysTabs.find(x => x.day == tabDay.date);
+      if (dayTab == undefined) {
+        dayTab = {
+          day: tabDay.date,
+          tabs: [],
+          time: tabDay.summary,
+        };
+        dayTab.tabs.push({
+          favicon: tab.favicon,
+          url: tab.url,
+          sessions: tabDay.counter,
+          summaryTime: tabDay.summary,
+        });
+        daysTabs.push(dayTab);
+      } else {
+        dayTab.time += tabDay.summary;
+        dayTab.tabs.push({
+          favicon: tab.favicon,
+          url: tab.url,
+          sessions: tabDay.counter,
+          summaryTime: tabDay.summary,
+        });
+      }
+    }
+  });
+
+  daysTabs.sort(function (a, b) {
+    return new Date(a.day).valueOf() - new Date(b.day).valueOf();
+  });
+
+  daysTabs.forEach(dayTab => {
+    dayTab.tabs.sort(function (a: CurrentTabItem, b: CurrentTabItem) {
+      return b.summaryTime - a.summaryTime;
+    });
+  });
+
+  const summaryTime = daysTabs
+    .map(x => x.time)
+    .reduce(function (a, b) {
+      return a + b;
+    });
+
+  const averageTime = Math.round(summaryTime / daysTabs.length);
+
+  return {
+    days: daysTabs,
+    summaryTime: summaryTime,
+    averageTime: averageTime,
+  };
+}