Website stats

src/_locales/de/messages.json

@@ -86,6 +86,9 @@
   "averageTime": {
     "message": "Durchschnittliche Zeit an aktiven Tagen"
   },
+  "averageDailyUsage": {
+    "message": "Durchschnittliche tägliche Nutzung"
+  },
   "mostActiveDay": {
     "message": "Der aktivste Tag"
   },

src/_locales/en/messages.json

@@ -86,6 +86,9 @@
   "averageTime": {
     "message": "Average time for active days"
   },
+  "averageDailyUsage": {
+    "message": "Average daily usage"
+  },
   "mostActiveDay": {
     "message": "The most active day"
   },

src/_locales/ru/messages.json

@@ -86,6 +86,9 @@
   "averageTime": {
     "message": "Среднее время по активным дням"
   },
+  "averageDailyUsage": {
+    "message": "Среднее ежедневное использование"
+  },
   "mostActiveDay": {
     "message": "Самый активный день"
   },

src/assets/css/dashboard.css

@@ -281,6 +281,10 @@ label {
   display: table-cell;
   cursor: pointer;
 }
+.settings-tab label[name='tabName']:hover {
+  background-color: #cccccc !important;
+    border-radius: 10px;
+}
 .settings-tab [type='radio'] {
   display: none;
 }

src/assets/css/general.css

@@ -35,6 +35,12 @@
 .mr-10 {
   margin-right: 10px;
 }
+.ml-20 {
+  margin-left: 20px;
+}
+.mr-20 {
+  margin-right: 20px;
+}
 .mr-5 {
   margin-right: 5px;
 }
@@ -61,12 +67,6 @@ select {
 .w-100 {
   width: 100%;
 }
-.w-80 {
-  width: 80%;
-}
-.w-60 {
-  width: 60%;
-}
 input[type='button'] {
   background: #428bff;
   color: #fff;
@@ -143,3 +143,13 @@ input[type='button'][disabled] {
   text-decoration: none;
   cursor: pointer;
 }
+.no-data .date-picker {
+  font-weight: normal;
+  text-align: center;
+  width: 250px;
+  margin: auto;
+  margin-top: 15px;
+}
+.date-block .date-picker {
+  width: 250px;
+}

src/components/ByDays.vue

@@ -3,9 +3,7 @@
     <img height="55" src="../assets/icons/preloader.gif" />
   </div>
   <div v-else>
-    <div class="no-data" v-if="countOfDays == undefined || (countOfDays == 0 && !noData)">
-      {{ t('noData.message') }}
-    </div>
+    <no-data-by-days v-if="countOfDays == undefined || (countOfDays == 0 && !noData)" />
     <div v-else-if="noData">
       <div class="no-data">
         {{ t('noDataForPeriod.message') }}
@@ -43,7 +41,9 @@
         <div class="header">{{ t('averageTimeByDays.message') }}</div>
         <p>{{ convertSummaryTimeToString(tabsByDays!.averageTime) }}</p>
       </div>
-      <ByDaysChart :data="tabsByDays!" />
+      <div class="ml-20 mr-20 by-days-chart">
+        <ByDaysChart :data="tabsByDays!" />
+      </div>
       <div>
         <Expander
           v-for="(tabDay, i) of tabsByDays?.days"
@@ -73,6 +73,7 @@ export default {
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import TabItem from '../components/TabItem.vue';
+import NoDataByDays from './NoDataByDays.vue';
 import ByDaysChart from '../components/ByDaysChart.vue';
 import Expander from '../components/Expander.vue';
 import { TabListByDays } from '../dto/tabListSummary';
@@ -160,14 +161,7 @@ async function exportToCsv() {
   justify-content: space-between;
   margin: 0 25px;
 }
-.date-block .date-picker {
-  width: 250px;
-}
-.no-data .date-picker {
-  font-weight: normal;
-  text-align: center;
-  width: 250px;
-  margin: auto;
-  margin-top: 15px;
+.by-days-chart {
+  height: 240px;
 }
 </style>

src/components/ByDaysChart.vue

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

src/components/Dashboad.vue

@@ -1,33 +1,27 @@
 <template>
-  <div class="main">
-    <div class="settings-item">
-      <label class="title"> {{ t('dashboard.message') }} </label>
-    </div>
-    <div class="chart chartByHours">
-      <div class="mt-10 mb-20">
-        <input
-          type="button"
-          :class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
-          :value="t('byHours.message')"
-          @click="openChart(TypeOfChart.Horly)"
-        />
-        <input
-          type="button"
-          :class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
-          :value="t('intervals.message')"
-          @click="openChart(TypeOfChart.Interval)"
-        />
-      </div>
-      <HourlyChart v-if="chart == TypeOfChart.Horly" />
-      <TimeIntervalChart v-if="chart == TypeOfChart.Interval" />
-    </div>
-    <div class="tab-items">
-      <TabList
-        :type="TypeOfList.Dashboard"
-        :showAllStats="false"
-        v-if="chart == TypeOfChart.Horly"
+  <div class="settings-item">
+    <label class="title"> {{ t('dashboard.message') }} </label>
+  </div>
+  <div class="chart chartByHours">
+    <div class="mt-10 mb-20">
+      <input
+        type="button"
+        :class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
+        :value="t('byHours.message')"
+        @click="openChart(TypeOfChart.Horly)"
+      />
+      <input
+        type="button"
+        :class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
+        :value="t('intervals.message')"
+        @click="openChart(TypeOfChart.Interval)"
       />
     </div>
+    <HourlyChart v-if="chart == TypeOfChart.Horly" />
+    <TimeIntervalChart v-if="chart == TypeOfChart.Interval" />
+  </div>
+  <div class="tab-items">
+    <TabList :type="TypeOfList.Dashboard" :showAllStats="false" v-if="chart == TypeOfChart.Horly" />
   </div>
 </template>
 

src/components/DashboadContainer.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="main">
+    <Dashboad v-if="type == SettingsTab.Dashboard" />
+    <WebsiteStats v-if="type == SettingsTab.WebsiteStats" :domain="domain!" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'DashboadContainer',
+};
+</script>
+
+<script lang="ts" setup>
+import { SettingsTab } from '../utils/enums';
+import WebsiteStats from './WebsiteStats.vue';
+import Dashboad from './Dashboad.vue';
+
+defineProps<{
+  type: SettingsTab;
+  domain: string | undefined;
+}>();
+</script>
+
+<style scoped>
+.main {
+  width: 80%;
+  margin: auto;
+}
+</style>

src/components/NoDataByDays.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="no-data">
+    {{ t('noData.message') }}
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'NoDataByDays',
+};
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>

src/components/TabItem.vue

@@ -1,11 +1,32 @@
 <template>
   <div class="tab-item">
     <Favicon :favicon="item.favicon" :type="typeOfUrl" />
-    <div class="ml-10 flex-grow-2">
+    <div
+      class="ml-10 flex-grow-2"
+      @mouseover="isShowCmdButtons = true"
+      @mouseleave="isShowCmdButtons = false"
+    >
       <div class="first-block">
-        <div :class="listType == TypeOfList.All ? 'w-60' : 'w-80'">
-          <p class="url" @click="openUrl(item.url)">{{ url }}</p>
+        <div>
+          <p class="url">{{ url }}</p>
           <BadgeIcons :url="url" :type="typeOfUrl" :listType="listType" />
+          <p class="links" v-if="isShowCmdButtons" title="Statistics">
+            <img
+              class="link"
+              src="../assets/icons/details-link.svg"
+              height="21"
+              @click="openStats(item.url)"
+            />
+          </p>
+
+          <p class="links" v-if="isShowCmdButtons" title="Open website">
+            <img
+              class="link"
+              src="../assets/icons/open-link.svg"
+              height="21"
+              @click="openUrl(item.url)"
+            />
+          </p>
         </div>
         <p class="text-right time">{{ summaryTimeForTab }}</p>
       </div>
@@ -37,7 +58,9 @@ import BadgeIcons from './BadgeIcons.vue';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { getPercentage } from '../utils/common';
 import { CurrentTabItem } from '../dto/currentTabItem';
-import { TypeOfList, TypeOfUrl } from '../utils/enums';
+import { SettingsTab, TypeOfList, TypeOfUrl } from '../utils/enums';
+import { openPage } from '../utils/open-page';
+import { getTypeOfUrl } from '../utils/get-type-of-url';
 
 const { t } = useI18n();
 
@@ -47,9 +70,9 @@ const props = defineProps<{
   listType: TypeOfList;
 }>();
 
-const typeOfUrl = computed(() =>
-  props.item.url.startsWith('file:') ? TypeOfUrl.Document : TypeOfUrl.WebSite,
-);
+const isShowCmdButtons = ref<boolean>();
+
+const typeOfUrl = computed(() => getTypeOfUrl(props.item.url));
 
 const url = computed(() =>
   typeOfUrl.value == TypeOfUrl.Document
@@ -75,6 +98,10 @@ function openUrl(url: string) {
   } else showWarningMessage.value = true;
 }
 
+async function openStats(url: string) {
+  await openPage(SettingsTab.WebsiteStats, url);
+}
+
 const showWarningMessage = ref<boolean>();
 </script>
 
@@ -91,12 +118,21 @@ const showWarningMessage = ref<boolean>();
 .tab-item:hover {
   border: 1px rgb(202, 202, 202) solid;
 }
+
+.tab-item .links {
+  display: inline-block;
+  margin: 0;
+  cursor: pointer;
+  margin: 0 5px;
+}
+.tab-item .links .link {
+  vertical-align: middle;
+}
 .tab-item .url {
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   overflow-wrap: anywhere;
-  max-width: 80%;
   display: inline-block;
 }
 .tab-item .url:hover {