some changes for project stats view

Arborator · Oct 23, 2024 · 31fafec · 31fafec
1 parent ba3f3e1
commit 31fafec
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 61 deletions.
diff --git a/src/components/project/StatisticsProject.vue b/src/components/project/StatisticsProject.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="row text-h6">
-    {{ $t('projectView.projectOverview') }}
-  </div>
-  <div class="row justify-between q-gutter-md">
+  <div class="row q-pa-md justify-between q-gutter-md">
     <q-card flat bordered class="col">
       <q-item>
         <q-item-section avatar>
           <q-avatar color="primary" text-color="white" icon="group" />
         </q-item-section>
         <q-item-section>
-          <q-item-label class="text-h6">{{ projectStat.users.length }}</q-item-label>
+          <q-item-label class="text-h6">{{ projectStats.users.length }}</q-item-label>
           <q-item-label caption>
             {{ $t('projectStats.users') }}
           </q-item-label>
@@ -22,7 +19,7 @@
           <q-avatar color="secondary" text-color="white" icon="article" />
         </q-item-section>
         <q-item-section>
-          <q-item-label class="text-h6"> {{ projectStat.samplesNumber }}</q-item-label>
+          <q-item-label class="text-h6"> {{ projectStats.samplesNumber }}</q-item-label>
           <q-item-label caption>
             {{ $t('projectStats.samples') }}
           </q-item-label>
@@ -35,7 +32,7 @@
           <q-avatar color="indigo-8" text-color="white" icon="forest" />
         </q-item-section>
         <q-item-section>
-          <q-item-label class="text-h6">{{ projectStat.treesNumber }}</q-item-label>
+          <q-item-label class="text-h6">{{ projectStats.treesNumber }}</q-item-label>
           <q-item-label caption>
             {{ $t('projectStats.trees') }}
           </q-item-label>
@@ -48,29 +45,26 @@
           <q-avatar color="cyan-8" text-color="white" icon="title" />
         </q-item-section>
         <q-item-section>
-          <q-item-label class="text-h6">{{ projectStat.tokensNumber }}</q-item-label>
+          <q-item-label class="text-h6">{{ projectStats.tokensNumber }}</q-item-label>
           <q-item-label caption>
             {{ $t('projectStats.tokens') }}
           </q-item-label>
         </q-item-section>
       </q-item>
     </q-card>
   </div>
-  <div class="row text-h6">
-    {{ $t('projectStats.activityOverview') }}
-  </div>
-  <div class="row justify-between q-gutter-md">
-    <q-card v-if="projectStat.topUser" flat bordered class="col">
+  <div class="row q-pa-md justify-between q-gutter-md">
+    <q-card v-if="projectStats.topUser" flat bordered class="col">
       <q-item>
         <q-item-section avatar>
           <q-avatar>
-            <img :src="projectStat.topUser.userAvatar" alt="avatar" />
+            <img :src="projectStats.topUser.userAvatar" alt="avatar" />
           </q-avatar>
         </q-item-section>
         <q-item-section>
           <q-item-label class="text-h6">{{ $t('projectStats.topContributor') }}</q-item-label>
           <q-item-label caption>
-            {{ projectStat.topUser.username }}
+            {{ projectStats.topUser.username }}
           </q-item-label>
         </q-item-section>
         <q-separator /> 
@@ -83,6 +77,9 @@
             <div class="absolute-full flex flex-center">
               <q-badge color="white" text-color="secondary" :label="topUserProgressLabel" />
             </div>
+            <q-tooltip>
+              {{ $t('projectStats.progressTooltip') }}
+            </q-tooltip>
           </q-linear-progress>
         </q-item-section>
       </q-item>
@@ -96,13 +93,13 @@
       <q-separator />
       <q-card-section horizontal>
         <q-card-section class="col">
-          <div class="text-h6 text-primary"> {{ $t('projectHub.lastWriteAccess') }} {{ timeAgo(projectStat.lastWrite.lastWrite) }}</div>
-          <div class="text-caption">{{ $t('projectStats.by') }} {{ projectStat.lastWrite.lastWriteUsername }}</div>
+          <div class="text-h6 text-primary"> {{ $t('projectHub.lastWriteAccess') }} {{ timeAgo(projectStats.lastWrite.lastWrite) }}</div>
+          <div class="text-caption">{{ $t('projectStats.by') }} {{ projectStats.lastWrite.lastWriteUsername }}</div>
         </q-card-section>
         <q-separator vertical />
         <q-card-section class="col">
-          <div class="text-h6 text-primary"> {{ $t('projectHub.lastAccess') }} {{ timeAgo(projectStat.lastRead.lastRead) }}</div>
-          <div class="text-caption"> {{ $t('projectStats.by') }} {{ projectStat.lastRead.lastReadUsername }}</div>
+          <div class="text-h6 text-primary"> {{ $t('projectHub.lastAccess') }} {{ timeAgo(projectStats.lastRead.lastRead) }}</div>
+          <div class="text-caption"> {{ $t('projectStats.by') }} {{ projectStats.lastRead.lastReadUsername }}</div>
         </q-card-section>
       </q-card-section>
     </q-card>
@@ -120,36 +117,17 @@
       </q-card-section>
     </q-card>
   </div>
-  <q-separator />
 </template>
 <script lang="ts">
-import { statProject_t, sample_t } from 'src/api/backend-types';
-import { notifyError } from 'src/utils/notify';
+import { sample_t } from 'src/api/backend-types';
+import { mapState } from 'pinia';
+import { useStatisticStore } from 'src/pinia/modules/stats';
+
 import { timeAgo } from 'src/utils/timeAgoUtils';
 import { defineComponent, PropType } from 'vue';
-import api from 'src/api/backend-api';
 
 export default defineComponent({
   name: 'StatisticsProject',
-  data() {
-    const projectStat: statProject_t = {
-      users: [],
-      samplesNumber: 0,
-      treesNumber: 0,
-      tokensNumber: 0,
-      sentencesNumber: 0,
-      topUser: { username: '', treesNumber: 0, userAvatar: '' },
-      lastRead: { lastRead: 0, lastReadUsername: '' },
-      lastWrite: { lastWrite: 0, lastWriteUsername: '' },
-    };
-    const topUserProgress: number = 0;
-    const topUserProgressLabel: string = '';
-    return {
-      projectStat,
-      topUserProgress,
-      topUserProgressLabel,
-    }
-  },
   props: {
     projectName: {
       type: String as PropType<string>,
@@ -160,10 +138,8 @@ export default defineComponent({
       required: true,
     }
   },
-  mounted() {
-    this.getStatistics();
-  },
   computed: {
+    ...mapState(useStatisticStore, ['projectStats', 'topUserProgress', 'topUserProgressLabel']),
     projectTags() {
       return this.samples.map((sample) => Object.keys(sample.tags)).reduce((a: string[], b: string[]) => [...a, ...b], []);
     }
@@ -172,20 +148,6 @@ export default defineComponent({
     timeAgo(secsAgo: number) {
       return timeAgo(secsAgo);
     },
-    getStatistics() {
-      api
-        .getStats(this.projectName)
-        .then((response) => {
-          this.projectStat = { ...response.data };
-          if (this.projectStat.topUser) {
-            this.topUserProgress = this.projectStat.topUser.treesNumber / this.projectStat.sentencesNumber;
-            this.topUserProgressLabel =  `${(this.projectStat.topUser.treesNumber / this.projectStat.sentencesNumber * 100).toFixed(2)} %`;
-          }
-        })
-        .catch((error) => {
-          notifyError({ error: `Error while loading project statistics ${error}` });
-        });
-    },
   }
 });
 

diff --git a/src/i18n/en-us/index.ts b/src/i18n/en-us/index.ts
@@ -500,6 +500,7 @@ export default {
     lastAccess: 'Last Access',
     by: 'by',
     usedTags: 'Used tags',
+    progressTooltip: 'Percentage of annotated sentences',
   },
   conllDial: {
     title: 'Conll Dialog',

diff --git a/src/i18n/fr-fra/index.ts b/src/i18n/fr-fra/index.ts
@@ -502,6 +502,7 @@ export default {
     lastAccess: 'Dernier accès',
     by: 'par',
     usedTags: 'Tags utilisés',
+    progressTooltip: 'Pourcentage des phrases annotées',
   },
   conllDial: {
     title: 'Conll Dialog',

diff --git a/src/pages/Project.vue b/src/pages/Project.vue
@@ -36,7 +36,16 @@
           <q-separator />
         </q-card-section>
         <q-card-section class="q-gutter-md">
-          <StatisticsProject :key="reload" v-if="sampleNames.length" :project-name="projectName" :samples="samples"></StatisticsProject>
+          <div class="row">
+            <div class="col text-h6">
+              Project statistics
+            </div>
+            <q-btn flat :icon="!showStats ? 'arrow_drop_down' : 'arrow_drop_up'" color="primary" @click="showStats = !showStats" />
+          </div>
+          <div v-if="showStats">
+            <StatisticsProject :key="reload" v-if="sampleNames.length" :project-name="projectName" :samples="samples"></StatisticsProject>
+          </div>
+          <q-separator />
         </q-card-section>
         <q-card-section>
           <div class="row q-gutter-md" style="justify-content: right">
@@ -128,7 +137,7 @@
 </template>
 
 <script lang="ts">
-import { mapState, mapWritableState } from 'pinia';
+import { mapState, mapWritableState, mapActions } from 'pinia';
 import { sample_t } from 'src/api/backend-types';
 import { useGithubStore } from 'src/pinia/modules/github';
 import { useGrewSearchStore } from 'src/pinia/modules/grewSearch';
@@ -151,6 +160,7 @@ import RelationTable from 'src/components/relationTable/RelationTable.vue';
 import ProjectVisibility from 'src/components/shared/ProjectVisibility.vue';
 import StatisticsProject from 'src/components/project/StatisticsProject.vue';
 import Breadcrumbs from 'src/layouts/Breadcrumbs.vue';
+import { useStatisticStore } from 'src/pinia/modules/stats';
 
 export default defineComponent({
   components: {
@@ -182,6 +192,7 @@ export default defineComponent({
       syncGithubDial: false,
       isDeleteSync: false,
       unselectSamples: false,
+      showStats: false,
       syncGithubRepo: '',
       reload: 0,
     };
@@ -214,6 +225,7 @@ export default defineComponent({
     document.title = `ArboratorGrew: ${this.projectName}`;
     this.loadProjectData();
     this.getSynchronizedGithubRepo();
+    this.getStatistics(this.projectName);
   },
   watch: {
     reloadCommits(newVal) {
@@ -224,6 +236,7 @@ export default defineComponent({
     }
   },
   methods: {
+    ...mapActions(useStatisticStore, ['getStatistics']),
     loadProjectData() {
       this.getProjectSamples();
       this.reload += 1;

diff --git a/src/pinia/modules/stats/index.ts b/src/pinia/modules/stats/index.ts
@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+import { useProjectStore } from "../project";
+import { statProject_t } from "src/api/backend-types";
+import { notifyError } from "src/utils/notify";
+
+import api from "src/api/backend-api";
+
+export const useStatisticStore = defineStore('stats', {
+  state: () => {
+    return {
+      projectStats: {} as statProject_t,
+      topUserProgress: 0 as number,
+      topUserProgressLabel: '' as string,
+    }
+  },
+  actions: {
+    getStatistics(projectName: string) {
+      api
+        .getStats(projectName)
+        .then((response) => {
+          this.projectStats = { ...response.data };
+          if (this.projectStats.topUser) {
+            this.topUserProgress = this.projectStats.topUser.treesNumber / this.projectStats.sentencesNumber;
+            this.topUserProgressLabel = `${(this.projectStats.topUser.treesNumber / this.projectStats.sentencesNumber * 100).toFixed(2)} %`;
+          }
+        })
+        .catch((error) => {
+          notifyError({ error: `Error while loading project statistics ${error}` });
+        })
+    }
+  }
+})