Chart by days

Author: Stigmatoz

src/components/ByDays.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="no-data" v-if="countOfDays == undefined || countOfDays == 0">No data</div>
+  <div v-else>
+    <ByDaysChart :data="tabsByDays" />
+    <!-- <TabItem v-for="(tab, i) of tabs" :key="i" :item="getItem(tab)" /> -->
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'TabList',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import ByDaysChart from '../components/ByDaysChart.vue';
+import { TabListByDays } from '../dto/tabListSummary';
+import { useTabListByDays } from '../compositions/tab-list-by-days';
+
+const tabsByDays = ref<TabListByDays>();
+
+const countOfDays = computed(() =>
+  tabsByDays.value != undefined ? tabsByDays.value.days.length : 0,
+);
+
+async function loadList() {
+  tabsByDays.value = await useTabListByDays(new Date('06/01/2023'), new Date('06/10/2023'));
+}
+
+onMounted(async () => {
+  await loadList();
+});
+</script>

src/components/ByDaysChart.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="chart">
+    <Bar :data="data" :options="options" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'BarChart',
+};
+</script>
+
+<script lang="ts" setup>
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js';
+import { convertSummaryTimeToString } from '../utils/converter';
+import { TabListByDays } from '../dto/tabListSummary';
+
+const props = defineProps<{
+  data: TabListByDays;
+}>();
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+const labelsForChart = props.data.days.map(x => x.day);
+const dataForChart = props.data.days.map(x => x.time);
+const maxTimeValue = dataForChart.sort((a, b) => b - a)[0];
+const tickStep = Math.round(maxTimeValue / 5 / 60) * 60;
+
+const data = {
+  labels: labelsForChart,
+  datasets: [
+    {
+      backgroundColor: ['#5668e2'],
+      data: dataForChart,
+    },
+  ],
+};
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: 'none',
+    },
+    legendDistance: {
+      padding: 50,
+    },
+    tooltip: {
+      callbacks: {
+        label: function (context: any) {
+          return convertSummaryTimeToString(context.raw);
+        },
+      },
+    },
+  },
+  scales: {
+    y: {
+      ticks: {
+        max: maxTimeValue / 60,
+        stepSize: tickStep,
+        callback: function (value: any, index: number, ticks: number) {
+          return convertSummaryTimeToString(value);
+        },
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.chart {
+  height: 230px;
+  margin: auto;
+  width: 80%;
+  margin-top: -10px;
+  margin-bottom: 10px;
+}
+</style>

src/compositions/tab-list-by-days.ts

@@ -0,0 +1,57 @@
+import { ActiveDay, DayTabs, TabListByDays } 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 useTabListByDays(dateFrom: Date, dateTo: Date): Promise<TabListByDays> {
+  const repo = await injectTabsRepository();
+  const unSortedTabs = repo.getTabs();
+  let daysTabs: DayTabs[] = [];
+
+  const unSortedTabsByDays = unSortedTabs.filter(
+    x => x.days.find(s => new Date(s.date) >= dateFrom && new Date(s.date) <= dateTo) != undefined,
+  );
+
+  unSortedTabsByDays.forEach(tab => {
+    tab.days.forEach(day => {
+      if (new Date(day.date) >= dateFrom && new Date(day.date) <= dateTo) {
+        let dayTab = daysTabs.find(x => x.day == day.date);
+        if (dayTab == undefined) {
+          dayTab = {
+            day: day.date,
+            tabs: [],
+            time: day.summary,
+          };
+          dayTab.tabs.push({
+            favicon: tab.favicon,
+            url: tab.url,
+            sessions: day.counter,
+            summaryTime: day.summary,
+            summaryTimeForCurrent: day.summary,
+          });
+          daysTabs.push(dayTab);
+        } else {
+          dayTab.time += day.summary;
+          dayTab.tabs.push({
+            favicon: tab.favicon,
+            url: tab.url,
+            sessions: day.counter,
+            summaryTime: day.summary,
+            summaryTimeForCurrent: day.summary,
+          });
+        }
+      }
+    });
+  });
+
+  daysTabs = daysTabs.sort(function (a, b) {
+    return new Date(a.day).valueOf() - new Date(b.day).valueOf();
+  });
+
+  return {
+    days: daysTabs,
+    summaryTime: 0,
+  };
+}

src/dto/tabListSummary.ts

@@ -1,4 +1,5 @@
 import { Tab } from '../entity/tab';
+import { CurrentTabItem } from './currentTabItem';
 
 export interface OverallStats extends TabListSummary {
   firstDay: Date;
@@ -25,3 +26,14 @@ export interface DataForChart {
   timeForChart: number[];
   sitesForChart: string[];
 }
+
+export interface TabListByDays {
+  days: DayTabs[];
+  summaryTime: number;
+}
+
+export interface DayTabs {
+  day: string;
+  tabs: CurrentTabItem[];
+  time: number;
+}

src/pages/Popup.vue

@@ -40,18 +40,18 @@
 
     <div class="slider"><div class="indicator"></div></div>
     <div class="content">
-      <section>
+      <section id="todayTabList">
         <TabList
           v-if="activeTab == TypeOfList.Today"
           :type="TypeOfList.Today"
           :showAllStats="false"
         />
       </section>
-      <section>
+      <section id="summary">
         <TabList v-if="activeTab == TypeOfList.All" :type="TypeOfList.All" :showAllStats="true" />
       </section>
-      <section>
-        <h2>Shipping</h2>
+      <section id="byDaysTabList">
+        <ByDays v-if="activeTab == TypeOfList.ByDays" />
       </section>
     </div>
   </div>
@@ -61,6 +61,7 @@
 import { onMounted, ref } from 'vue';
 import Browser from 'webextension-polyfill';
 import TabList from '../components/TabList.vue';
+import ByDays from '../components/ByDays.vue';
 import { TypeOfList } from '../utils/enums';
 
 async function openSettings() {