Merge pull request Stigmatoz#122 from Stigmatoz/website-stats

Website stats

Author: Stigmatoz

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/assets/icons/details-link.svg

@@ -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/assets/icons/open-link.svg

@@ -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/ByDays.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>