Merge pull request Stigmatoz#108 from Stigmatoz/time-chart

Time chart

Author: Stigmatoz

src/_locales/de/messages.json

@@ -114,7 +114,7 @@
     "message": "Im letzten Monat"
   },
   "generalSettings": {
-    "message": "Grundlegende Einstellungen"
+    "message": "Einstellungen"
   },
   "whiteListSettings": {
     "message": "Weiße Liste"
@@ -130,7 +130,7 @@
   },
   "viewTimeInBadge": {
     "message": "Zeitindikator anzeigen",
-    "description": "Sie können die aktuellen Informationen zur verbrauchten Zeit im Kurzformat auf dem Erweiterungssymbol anzeigen"
+    "description": "Sie können die aktuellen Informationen zur \"verbrauchten Zeit\" im Kurzformat anzeigen"
   },
   "deferringDescription": {
     "message": "Sie können die Sperre nur einmal während des Tages um 5 Minuten verschieben"
@@ -194,7 +194,7 @@
     "description": "Dieser Text wird in der Benachrichtigung für Websites angezeigt"
   },
   "notificationTimeSetting": {
-    "message": "Zeigt eine Benachrichtigung an, die eine Zusammenfassung Ihrer täglichen Nutzung enthält"
+    "message": "Benachrichtigungszeit mit zusammenfassenden Informationen zur täglichen Nutzung"
   },
   "github": {
     "message": "Wenn Sie eine Frage haben oder ein Problem melden möchten, können Sie dies tun"
@@ -225,5 +225,11 @@
   },
   "mostVisited": {
     "message": "Die meistbesuchte Website "
+  },
+  "dashboard": {
+    "message": "Dashboard"
+  },
+  "timeChartDescription": {
+    "message": "Dies ist eine stundenweise Zeitleiste für den Tag"
   }
 }

src/_locales/en/messages.json

@@ -114,7 +114,7 @@
     "message": "Last month"
   },
   "generalSettings": {
-    "message": "General Settings"
+    "message": "Settings"
   },
   "whiteListSettings": {
     "message": "WhiteList"
@@ -137,10 +137,10 @@
   },
   "allowDeferringBlock": {
     "message": "Allow deferring block for 5 minutes",
-    "description": "After the site is blocked, you can postpone the blocking for 5 minutes once during the day"
+    "description": "After the site is blocked, you can postpone the blocking for 5 minutes during the day only once"
   },
   "intervalInactivity": {
-    "message": "Stop the tracker if there is no action during:",
+    "message": "Stop the tracker if there is no action for",
     "description": "These are any actions with the mouse or keyboard"
   },
   "exportToCsvSetting": {
@@ -172,8 +172,8 @@
     "message": "Enter notification message..."
   },
   "limits": {
-    "message": "Daily restrictions on access to websites",
-    "description": "Set the maximum time allowed to visit the site per day. After this time, the site will be blocked."
+    "message": "Daily access restrictions for the websites",
+    "description": "Set the maximum time allowed to visit the website per day. After this time, the site will be blocked."
   },
   "limitsTip": {
     "message": "If you set the blocking time to 0 hours 0 minutes, the website will be blocked immediately"
@@ -197,33 +197,39 @@
     "message": "Notification time with summary information about your daily usage"
   },
   "github": {
-    "message": "If you have feedback or would like to report an issue, you can do so on the"
+    "message": "Leave your feedback or report an issue on "
   },
   "question": {
-    "message": "You can also ask questions or leave your suggestions here"
+    "message": "You can also ask questions and leave your suggestions"
   },
   "supportForm": {
     "message": "support form"
   },
   "doYouEnjoy": {
-    "message": "Do you enjoy using Web Activity Time Tracker?"
+    "message": "Do you enjoy Web Activity Time Tracker?"
   },
   "review": {
     "message": "Leave a review!"
   },
   "block": {
-    "message": "You've reached your limit today on "
+    "message": "You've reached your limit for today on "
   },
   "5mins": {
     "message": "+ 5 minutes"
   },
   "todayUsageTime": {
-    "message": "Today's total usage time "
+    "message": "Total usage time for today "
   },
   "comparedToYesterday": {
     "message": " compared to yesterday "
   },
   "mostVisited": {
     "message": "Most visited website "
+  },
+  "dashboard": {
+    "message": "Dashboard"
+  },
+  "timeChartDescription": {
+    "message": "This is a chart of time during the day by the hour"
   }
 }

src/_locales/ru/messages.json

@@ -114,7 +114,7 @@
     "message": "Последний месяц"
   },
   "generalSettings": {
-    "message": "Основные настройки"
+    "message": "Настройки"
   },
   "whiteListSettings": {
     "message": "Белый список"
@@ -176,7 +176,7 @@
     "description": "Установите максимальное время, разрешенное для посещения сайта в день. По истечении этого времени сайт будет заблокирован."
   },
   "limitsTip": {
-    "message": "Если вы установите время блокировки равным 0 часам 0 минутам, сайт будет немедленно заблокирован"
+    "message": "Если вы установите время блокировки на 0 часов 0 минут, сайт будет немедленно заблокирован"
   },
   "save": {
     "message": "Сохранить"
@@ -200,13 +200,13 @@
     "message": "Если \u0443 вас есть вопрос или вы хотели бы сообщить \u043E проблеме, вы можете сделать это на"
   },
   "question": {
-    "message": "Также вы можете задать вопросы или оставить свои предложения здесь"
+    "message": "Также вы можете задать вопросы или оставить свои предложения "
   },
   "supportForm": {
     "message": "поддержка"
   },
   "doYouEnjoy": {
-    "message": "Вам нравится использовать Web Activity Time Tracker?"
+    "message": "Вам нравится Web Activity Time Tracker?"
   },
   "review": {
     "message": "Оставьте отзыв!"
@@ -225,5 +225,11 @@
   },
   "mostVisited": {
     "message": "Самый посещаемый сайт "
+  },
+  "dashboard": {
+    "message": "Дашборд"
+  },
+  "timeChartDescription": {
+    "message": "Это график времени в течение дня по часам"
   }
 }

src/assets/css/dashboard.css

@@ -288,6 +288,7 @@ label {
   bottom: 0;
   padding: 50px;
   border-left: 1px solid #ccc;
+  overflow-y: auto;
 }
 .settings-content span {
   animation: 0.5s ease-out 0s 1 slideInFromTop;

src/assets/css/general.css

@@ -1,3 +1,16 @@
+:root {
+  --main-color: #6ebf5d;
+  --popup-header: #efefef;
+  --progress-bar: #428bff;
+}
+
+.no-data {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 30%;
+}
+
 .float-right {
   float: right;
 }

src/assets/css/main.css

@@ -1,8 +1,3 @@
-:root {
-  --main-color: #6ebf5d;
-  --popup-header: #efefef;
-  --progress-bar: #428bff;
-}
 ::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #f5f5f5;
@@ -24,19 +19,14 @@ body {
   padding: 0;
   margin: 0;
 }
-.no-data {
-  text-align: center;
-  font-size: 16px;
-  font-weight: 600;
-  margin-top: 30%;
-}
 .tabs {
 }
 .tabs input[name='tab-control'] {
   display: none;
 }
 .tabs .content section h2,
 .tabs ul li label {
+  
   font-size: 15px;
   color: #428bff;
 }

src/assets/icons/dashboard.svg

@@ -31,7 +31,11 @@ const isLimit = computedAsync(async () => {
 }, false);
 
 const showDocumentBadge = computed(() => props.type == TypeOfUrl.Document);
-const showLimitBadge = computed(() => props.listType == TypeOfList.Today && isLimit.value == true);
+const showLimitBadge = computed(
+  () =>
+    (props.listType == TypeOfList.Today || props.listType == TypeOfList.Dashboard) &&
+    isLimit.value == true,
+);
 </script>
 
 <style scoped>

src/assets/icons/settings.svg

@@ -0,0 +1,43 @@
+<template>
+  <div class="main">
+    <div class="settings-item">
+      <label class="setting-header"> {{ t('dashboard.message') }} </label>
+      <p class="description">{{ t('timeChartDescription.message') }}</p>
+    </div>
+    <div class="chart chartByHours">
+      <TimeIntervalChart />
+    </div>
+    <div class="chart mt-20">
+      <TabList :type="TypeOfList.Dashboard" :showAllStats="false" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Dashboard',
+};
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import TimeIntervalChart from './TimeIntervalChart.vue';
+import TabList from '../components/TabList.vue';
+import { TypeOfList } from '../utils/enums';
+
+const { t } = useI18n();
+</script>
+
+<style scoped>
+.main {
+  width: 80%;
+  margin: auto;
+}
+.chart {
+  margin: 20px;
+  width: 80%;
+}
+.chartByHours {
+  height: 350px;
+}
+</style>