refactor(stats): Use new /stats endpoint. Show last updated date (#862)

openfoodfacts · Sep 28, 2024 · 255d9f4 · 255d9f4
1 parent 031d5d8
commit 255d9f4
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 92 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -423,7 +423,8 @@
 		"Total": "Total",
 		"WithPrice": "With a price",
 		"WithProduct": "With a product",
-		"WithoutProduct": "Without a product"
+		"WithoutProduct": "Without a product",
+		"LastUpdated": "Last updated on {date}"
 	},
 	"UserDashboard": {
 		"LatestPrices": "Latest prices",

diff --git a/src/services/api.js b/src/services/api.js
@@ -231,6 +231,15 @@ export default {
     .then((response) => response.json())
   },
 
+  getStats() {
+    const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/stats?${buildURLParams()}`
+    return fetch(url, {
+      method: 'GET',
+      headers: OP_DEFAULT_HEADERS,
+    })
+    .then((response) => response.json())
+  },
+
   openfoodfactsProductSearch(code) {
     const url = `${constants.OFF_API_URL}/${code}.json`
     return fetch(url, {

diff --git a/src/views/Stats.vue b/src/views/Stats.vue
@@ -6,48 +6,61 @@
 
   <v-row>
     <v-col cols="12" md="6" lg="4">
-      <v-card :title="$t('Stats.Prices')" height="100%">
+      <v-card :title="$t('Common.Prices')" height="100%">
         <v-card-text>
           <p>
-            {{ $t('Stats.Total') }} <strong>{{ priceTotal }}</strong>
+            {{ $t('Stats.Total') }} <strong>{{ stats.price_count }}</strong>
           </p>
           <p>
             {{ $t('Stats.WithProduct') }} <v-chip label size="small" density="comfortable" class="mr-1">
               barcode
             </v-chip>
-            <strong>{{ priceWithProduct }}</strong>
+            <strong>{{ stats.price_barcode_count }}</strong>
           </p>
           <p>
             {{ $t('Stats.WithoutProduct') }} <v-chip label size="small" density="comfortable" class="mr-1">
               category
             </v-chip>
-            <strong>{{ priceWithoutProduct }}</strong>
+            <strong>{{ stats.price_category_count }}</strong>
           </p>
         </v-card-text>
       </v-card>
     </v-col>
 
     <v-col cols="12" md="6" lg="4">
-      <v-card :title="$t('Stats.Products')" height="100%">
+      <v-card :title="$t('Common.Products')" height="100%">
         <v-card-text>
           <p>
-            {{ $t('Stats.Total') }} <strong>{{ productTotal }}</strong>
+            {{ $t('Stats.Total') }} <strong>{{ stats.product_count }}</strong>
           </p>
           <p>
-            {{ $t('Stats.WithPrice') }} <strong>{{ productWithPriceTotal }}</strong>
+            {{ $t('Stats.WithPrice') }} <strong>{{ stats.product_with_price_count }}</strong>
           </p>
         </v-card-text>
       </v-card>
     </v-col>
 
     <v-col cols="12" md="6" lg="4">
-      <v-card :title="$t('Stats.Locations')" height="100%">
+      <v-card :title="$t('Common.Locations')" height="100%">
         <v-card-text>
           <p>
-            {{ $t('Stats.Total') }} <strong>{{ locationTotal }}</strong>
+            {{ $t('Stats.Total') }} <strong>{{ stats.location_count }}</strong>
           </p>
           <p>
-            {{ $t('Stats.WithPrice') }} <strong>{{ locationWithPriceTotal }}</strong>
+            {{ $t('Stats.WithPrice') }} <strong>{{ stats.location_with_price_count }}</strong>
+          </p>
+        </v-card-text>
+      </v-card>
+    </v-col>
+
+    <v-col cols="12" md="6" lg="4">
+      <v-card :title="$t('Common.Proofs')" height="100%">
+        <v-card-text>
+          <p>
+            {{ $t('Stats.Total') }} <strong>{{ stats.proof_count }}</strong>
+          </p>
+          <p>
+            {{ $t('Stats.WithPrice') }} <strong>{{ stats.proof_with_price_count }}</strong>
           </p>
         </v-card-text>
       </v-card>
@@ -57,115 +70,71 @@
       <v-card :title="$t('Stats.Users')" height="100%">
         <v-card-text>
           <p>
-            {{ $t('Stats.Total') }} <strong>{{ userTotal }}</strong>
+            {{ $t('Stats.Total') }} <strong>{{ stats.user_count }}</strong>
           </p>
           <p>
-            {{ $t('Stats.WithPrice') }} <strong>{{ userWithPriceTotal }}</strong>
+            {{ $t('Stats.WithPrice') }} <strong>{{ stats.user_with_price_count }}</strong>
           </p>
         </v-card-text>
       </v-card>
     </v-col>
   </v-row>
+
+  <v-row>
+    <v-col cols="12">
+      <i18n-t keypath="Stats.LastUpdated" tag="span" :title="getRelativeDateTimeFormatted(stats.updated)">
+        <template #date>
+          {{ getDateTimeFormatted(stats.updated) }}
+        </template>
+      </i18n-t>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
 import api from '../services/api'
+import utils from '../utils.js'
 
 export default {
   data() {
     return {
-      priceTotal: null,
-      // priceWithProduct: null,
-      priceWithoutProduct: null,
-      productTotal: null,
-      productWithPriceTotal: null,
-      locationTotal: null,
-      locationWithPriceTotal: null,  // same
-      userTotal: null,
-      userWithPriceTotal: null,
+      stats: {
+        price_count: 0,
+        price_barcode_count: 0,
+        price_category_count: 0,
+        product_count: 0,
+        product_with_price_count: 0,
+        location_count: 0,
+        location_with_price_count: 0,
+        proof_count: 0,
+        proof_with_price_count: 0,
+        user_count: 0,
+        user_with_price_count: 0,
+        updated: null,
+      },
       loading: false,
     }
   },
-  computed: {
-    priceWithProduct() {
-      return this.priceTotal - this.priceWithoutProduct
-    }
-  },
   mounted() {
-    this.getPrices()
-    this.getPricesWithProduct()
-    this.getProducts()
-    this.getProductsWithPrice()
-    this.getLocations()
-    this.getLocationsWithPrice()
-    this.getUsers()
-    this.getUsersWithPrice()
+    this.getStats()
   },
   methods: {
-    getPrices() {
+    getStats() {
       this.loading = true
-      return api.getPrices({ size: 1 })
+      return api.getStats()
         .then((data) => {
-          this.priceTotal = data.total
+          for (const key in this.stats) {
+            this.stats[key] = data[key]
+          }
           this.loading = false
         })
     },
-    getPricesWithProduct() {
-      this.loading = true
-      return api.getPrices({ product_id__isnull: true, size: 1 })
-        .then((data) => {
-          this.priceWithoutProduct = data.total
-          this.loading = false
-        })
+    getDateTimeFormatted(dateTimeString) {
+      return utils.offDateTime(dateTimeString)
     },
-    getProducts() {
-      this.loading = true
-      return api.getProducts({ size: 1 })
-        .then((data) => {
-          this.productTotal = data.total
-          this.loading = false
-        })
+    getRelativeDateTimeFormatted(dateTimeString) {
+      return utils.prettyRelativeDateTime(dateTimeString, 'short')
     },
-    getProductsWithPrice() {
-      this.loading = true
-      return api.getProducts({ price_count__gte: 1, size: 1 })
-        .then((data) => {
-          this.productWithPriceTotal = data.total
-          this.loading = false
-        })
-    },
-    getLocations() {
-      this.loading = true
-      return api.getLocations({ size: 1 })
-        .then((data) => {
-          this.locationTotal = data.total
-          this.loading = false
-        })
-    },
-    getLocationsWithPrice() {
-      this.loading = true
-      return api.getLocations({ price_count__gte: 1,size: 1 })
-        .then((data) => {
-          this.locationWithPriceTotal = data.total
-          this.loading = false
-        })
-    },
-    getUsers() {
-      this.loading = true
-      return api.getUsers({ size: 1 })
-        .then((data) => {
-          this.userTotal = data.total
-          this.loading = false
-        })
-    },
-    getUsersWithPrice() {
-      this.loading = true
-      return api.getUsers({ price_count__gte: 1, size: 1 })
-        .then((data) => {
-          this.userWithPriceTotal = data.total
-          this.loading = false
-        })
-    }
   }
 }
 </script>