Applying localization to statistics page

frontend/i18n/en/projects/statistics.js

@@ -1,7 +1,9 @@
 export default {
   statistics: 'Statistics',
-  completed: 'Completed',
-  incomplete: 'Incomplete',
+  progress: [
+    'Completed',
+    'Incomplete'
+  ],
   labelStats: 'Label stats',
   userStats: 'User stats'
 }

frontend/i18n/fr/projects/statistics.js

@@ -1,7 +1,9 @@
 export default {
   statistics: 'Statistiques',
-  completed: 'Complété',
-  incomplete: 'Incomplet',
+  progress: [
+    'Complété',
+    'Incomplet'
+  ],
   labelStats: 'Étiqueter les stats',
   userStats: 'Stats des utilisateurs'
 }

frontend/pages/projects/_id/statistics/index.vue

@@ -6,7 +6,7 @@
     >
       <v-card>
         <doughnut-chart
-          :chart-data="progress"
+          :chart-data="progressLocale()"
         />
       </v-card>
     </v-col>
@@ -16,7 +16,7 @@
     >
       <v-card>
         <bar-chart
-          :chart-data="labelStats"
+          :chart-data="labelStatsLocale()"
         />
       </v-card>
     </v-col>
@@ -26,7 +26,7 @@
     >
       <v-card>
         <bar-chart
-          :chart-data="userStats"
+          :chart-data="userStatsLocale()"
         />
       </v-card>
     </v-col>
@@ -58,7 +58,16 @@ export default {
   },
 
   methods: {
-    ...mapActions('statistics', ['fetchStatistics'])
+    ...mapActions('statistics', ['fetchStatistics']),
+    progressLocale() {
+      return this.progress(this.$t('statistics.progress'))
+    },
+    labelStatsLocale() {
+      return this.labelStats(this.$t('statistics.labelStats'))
+    },
+    userStatsLocale() {
+      return this.userStats(this.$t('statistics.userStats'))
+    }
   },
 
   validate({ params }) {

frontend/store/statistics.js

@@ -29,25 +29,27 @@ export const mutations = {
 
 export const getters = {
   progress(state) {
-    const complete = state.stats.total - state.stats.remaining
-    const incomplete = state.stats.remaining
-    return {
-      datasets: [{
-        data: [complete, incomplete],
-        backgroundColor: ['#00d1b2', '#ffdd57']
-      }],
-
-      labels: [
-        'Completed',
-        'Incomplete'
-      ]
+    return (labels) => {
+      const complete = state.stats.total - state.stats.remaining
+      const incomplete = state.stats.remaining
+      return {
+        datasets: [{
+          data: [complete, incomplete],
+          backgroundColor: ['#00d1b2', '#ffdd57']
+        }],
+        labels
+      }
     }
   },
   labelStats(state) {
-    return makeData(state.stats.label, 'Label stats')
+    return (label) => {
+      return makeData(state.stats.label, label)
+    }
   },
   userStats(state) {
-    return makeData(state.stats.user, 'User stats')
+    return (label) => {
+      return makeData(state.stats.user, label)
+    }
   }
 }