From fa409cdb3a193a539126d7a7088dbdd17aba674f Mon Sep 17 00:00:00 2001
From: TTalex <alex.bourreau@free.fr>
Date: Sat, 5 Oct 2024 17:59:01 +0200
Subject: [PATCH 1/8] feat(Challenge Page): first draft

---
 src/components/PriceChart.vue  |  12 +-
 src/router.js                  |   1 +
 src/views/CurrentChallenge.vue | 226 +++++++++++++++++++++++++++++++++
 3 files changed, 237 insertions(+), 2 deletions(-)
 create mode 100644 src/views/CurrentChallenge.vue

diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index 0ec4216d614..b40da30f41c 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -13,6 +13,14 @@ export default {
     priceList: {
       type: Array,
       default: () => []
+    },
+    aggregate: {
+      type: String,
+      default: () => "mean"
+    },
+    dateField: {
+      type: String,
+      default: () => "date"
     }
   },
   data() {
@@ -44,9 +52,9 @@ export default {
           tooltip: true
         },
         encoding: {
-          x: {timeUnit: 'yearmonthdate', field: 'date', type: 'temporal', axis: { title: this.$t('Common.Date') }},
+          x: {timeUnit: 'yearmonthdate', field: this.dateField, type: 'temporal', axis: { title: this.$t('Common.Date') }},
           // y: {field: 'price', type: 'quantitative'}
-          y: {aggregate: 'mean', field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
+          y: {aggregate: this.aggregate, field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
         }
       }
       embed('#vega-lite-chart', vlSpec, {actions: false, theme: this.theme.global.name})
diff --git a/src/router.js b/src/router.js
index 8c29083ff35..c279c247ebc 100644
--- a/src/router.js
+++ b/src/router.js
@@ -43,6 +43,7 @@ const routes = [
   { path: '/stats', name: 'stats', component: () => import('./views/Stats.vue'), meta: { title: 'Stats', icon: 'mdi-chart-box-outline', drawerMenu: true, breadcrumbs: [{title: 'Stats', disabled: true }] }},
   { path: '/settings', name: 'settings', component: () => import('./views/Settings.vue'), meta: { title: 'Settings', icon: 'mdi-cog-outline', drawerMenu: true, breadcrumbs: [{title: 'Settings', disabled: true }] }},
   { path: '/about', name: 'about', component: () => import('./views/About.vue'), meta: { title: 'About', icon: 'mdi-information-outline', drawerMenu: true, breadcrumbs: [{title: 'About', disabled: true }] }},
+  { path: '/challenge', name: 'challenge', component: () => import('./views/CurrentChallenge.vue'), meta: { title: 'Current Challenge', icon: 'mdi-medal-outline', drawerMenu: true }},
   // Why this redirect?
   // The app used to be available at https://prices.openfoodfacts.org/app
   // It is now available at https://prices.openfoodfacts.org
diff --git a/src/views/CurrentChallenge.vue b/src/views/CurrentChallenge.vue
new file mode 100644
index 00000000000..970b2fe4093
--- /dev/null
+++ b/src/views/CurrentChallenge.vue
@@ -0,0 +1,226 @@
+<template>
+  <h1 class="text-h5 mb-1">
+    The current Challenge is ...  {{ challenge.icon }} {{ challenge.title }}  {{ challenge.icon }}
+  </h1>
+
+  <h2 class="text-h6 mb-1">
+    {{ challenge.subtitle }}
+  </h2>
+
+  <v-row>
+    <v-col md="6">
+      TODO: Explain the challenge, how to contribute etc..
+      TODO: maybe add a place for proofs with missing prices (ideally proofs would be tagged for the challenge)
+      TODO: what about rewards ? badges for top 3 ? participation badges ?
+      TODO: Maybe a goal should be a number of product / prices, instead of the day
+    </v-col>
+    <v-col md="6">
+      <v-timeline direction="horizontal" truncate-line="both">
+        <v-timeline-item dot-color="success">
+          <div class="text-h6">
+            Start
+          </div>
+          <template #opposite>
+            {{ challenge.start_date }}
+          </template>
+        </v-timeline-item>
+        <v-timeline-item dot-color="error">
+          <template #opposite>
+            <div class="text-h6">
+              End
+            </div>
+          </template>
+          {{ challenge.end_date }}
+        </v-timeline-item>
+      </v-timeline>
+      <v-progress-linear
+        color="info"
+        height="25"
+        :model-value="progress"
+        striped
+        style="width: 50%; margin-left: 25%; top: -55px; margin-top: -25px"
+      >
+        <strong>{{ days_left_text }}</strong>
+      </v-progress-linear>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="12" md="6">
+      <h2 class="text-h6 mb-1">
+        General stats
+      </h2>
+
+      <v-row>
+        <v-col cols="6">
+          <StatCard :value="challenge.number_of_contributions" :subtitle="'Total number of prices added'" />
+        </v-col>
+        <v-col cols="6">
+          <StatCard :value="challenge.number_of_contributors" :subtitle="'Total number of contributors'" />
+        </v-col>
+      </v-row>
+    </v-col>
+    
+    <v-col cols="12" md="6">
+      <h2 v-if="username" class="text-h6 mb-1">
+        Your stats
+      </h2>
+      <v-row v-if="username">
+        <v-col cols="6">
+          <StatCard :value="challenge.user_contributions" :subtitle="'Prices added by you'" />
+        </v-col>
+        <v-col cols="6">
+          <v-card :title="`${challenge.user_rank == 0 ? '50+' : challenge.user_rank} / ${challenge.number_of_contributors}`" :subtitle="'Your rank'" variant="tonal" density="compact" />
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+  
+  <v-row>
+    <v-col cols="12" md="6">
+      <v-card
+        :title="'Top 5 contributors'"
+        variant="tonal"
+        density="compact"
+      >
+        <v-card-text>
+          <v-list density="compact">
+            <v-list-item
+              v-for="(contributor, i) in challenge.top_contributors.slice(0, 5)"
+              :key="i"
+              :value="contributor"
+              color="primary"
+            >
+              <template #prepend>
+                {{ 
+                  i === 0 ? '🥇' :
+                  i === 1 ? '🥈' :
+                  i === 2 ? '🥉' :
+                  '🏅'
+                }}
+              </template>
+
+              <v-list-item-title>
+                {{ i+1 }}. {{ contributor.user_id }}, {{ contributor.price_count }} prices
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card>    
+    </v-col>
+    
+    <v-col v-if="challenge.latest_contributions.length" cols="12" md="6">
+      <v-card
+        :title="'Number of contributions per day'"
+        variant="tonal"
+        density="compact"
+      >
+        <v-card-text>
+          <PriceChart :priceList="challenge.latest_contributions" aggregate="count" dateField="created" />
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <h2 class="text-h6 mb-1">
+    Most recent contributions
+  </h2>
+  <v-row v-if="challenge.latest_contributions">
+    <v-col v-for="price in challenge.latest_contributions.slice(0, 10)" :key="price" cols="12" sm="6" md="4" xl="3">
+      <PriceCard :price="price" :product="price.product" elevation="1" height="100%" />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import constants from '../constants'
+import api from '../services/api.js'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
+
+export default {
+  components: {
+    StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
+    PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
+    PriceChart: defineAsyncComponent(() => import('../components/PriceChart.vue'))
+  },
+  data() {
+    return {
+      challenge: {
+        title: "MILK",
+        subtitle: "(and milk alternatives)",
+        icon: "🥛",
+        start_date: "2024-09-01",
+        end_date: "2024-10-31",
+        categories: ["en:milk-substitutes", "en:milks"],
+        top_contributors: [],
+        number_of_contributors: 0,
+        number_of_contributions: 0,
+        latest_contributions: [],
+        user_contributions: 0,
+        user_rank: 0
+      },
+      loading: false,
+    }
+  },
+  computed: {
+    ...mapStores(useAppStore),
+    username() {
+      return this.appStore.user.username
+    },
+    nb_days() {
+      return Math.round((new Date(this.challenge.end_date) - new Date(this.challenge.start_date)) / (1000 * 60 * 60 * 24))
+    },
+    today_index() {
+      return Math.round((new Date() - new Date(this.challenge.start_date)) / (1000 * 60 * 60 * 24))
+    },
+    days_left_text() {
+      const days_left = this.nb_days - this.today_index
+      if (days_left <= 0) return "Challenge over"
+      if (days_left >= this.nb_days) return "Not started"
+      return `${days_left} days left`
+    },
+    progress() {
+      return Math.min(100, this.today_index * 100 / this.nb_days)
+    }
+  },
+  mounted() {
+    this.getStats()
+  },
+  methods: {
+    getStats() {
+      this.loading = true
+      // TODO: This should fetch only prices matching one of the product categories in this.challenge.categories
+      api.getPrices({ size: 100, created__gte: this.challenge.start_date, created__lte: this.challenge.end_date })
+      .then((data) => {
+        this.challenge.latest_contributions = data.items
+        this.challenge.number_of_contributions = data.total
+        this.loading = false
+      })
+
+      // TODO: this should only fetch users that contributed to one of the product categories in this.challenge.categories, in the designated time range
+      api.getUsers({ order_by: constants.USER_ORDER_LIST[0].key, size: 50})
+      .then((data) => {
+        this.challenge.top_contributors = data.items
+        this.challenge.number_of_contributors = data.total
+        for (let i = 0; i < data.items.length; i++) {
+          const user = data.items[i]
+          if (this.username && this.username == user.user_id) {
+            this.challenge.user_rank = i
+            break
+          }
+        }
+      })
+      if (this.username) {
+        // TODO: This should fetch only prices matching one of the product categories in this.challenge.categories
+        api.getPrices({ owner: this.username, created__gte: this.challenge.start_date, created__lte: this.challenge.end_date })
+        .then((data) => {
+          this.challenge.user_contributions = data.total
+        })
+      }
+      
+    }
+      
+  }
+}
+</script>

From 0ef58473235b475b0210c3448ac3fe1d38588902 Mon Sep 17 00:00:00 2001
From: TTalex <alex.bourreau@free.fr>
Date: Sat, 5 Oct 2024 20:16:31 +0200
Subject: [PATCH 2/8] feat(PriceChart): fit container size

---
 src/components/PriceChart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index b40da30f41c..10d1e3fced2 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="vega-lite-chart" style="width:100%;" />
+  <div id="vega-lite-chart" style="width: 100%;" />
 </template>
 
 <script>
@@ -41,7 +41,7 @@ export default {
       var vlSpec = {
         $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
         description: 'A simple bar chart with embedded data.',
-        width: 'container',
+        width: "container",
         autosize: { type: 'fit', resize: true},
         data: {
           values: this.priceList

From d702e49bff5e907a426bcd5d8d88c0e3826c469c Mon Sep 17 00:00:00 2001
From: TTalex <alex.bourreau@free.fr>
Date: Sat, 5 Oct 2024 20:17:38 +0200
Subject: [PATCH 3/8] feat(Challenge Page): added more content, and started
 split in components

---
 src/components/ChallengeExample.vue         |  46 ++++++
 src/components/ChallengeTimeline.vue        |  58 +++++++
 src/components/ChallengeTopContributors.vue |  38 +++++
 src/views/CurrentChallenge.vue              | 171 +++++++-------------
 4 files changed, 202 insertions(+), 111 deletions(-)
 create mode 100644 src/components/ChallengeExample.vue
 create mode 100644 src/components/ChallengeTimeline.vue
 create mode 100644 src/components/ChallengeTopContributors.vue

diff --git a/src/components/ChallengeExample.vue b/src/components/ChallengeExample.vue
new file mode 100644
index 00000000000..c2af967a198
--- /dev/null
+++ b/src/components/ChallengeExample.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-row v-if="priceExample">
+    <v-col>
+      <h2 class="text-h6 mb-1">
+        A good example of proof to photograph
+      </h2>
+      <v-img :src="priceExample.proofUrl" style="max-height: 200px" />
+    </v-col>
+    <v-col>
+      <h2 class="text-h6 mb-1">
+        A good example of price to add
+      </h2>
+      <PriceCard :price="priceExample" :product="priceExample.product" elevation="1" />
+    </v-col>
+  </v-row>
+</template>
+  
+<script>
+import { defineAsyncComponent } from 'vue'
+import api from '../services/api.js'
+
+export default {
+  components: {
+    PriceCard: defineAsyncComponent(() => import('./PriceCard.vue')),
+  },
+  props: {
+    exampleId: {
+      type: Number,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      priceExample: null
+    }
+  },
+  mounted() {
+    api.getPriceById(this.exampleId)
+    .then((data) => {
+      data.proofUrl = `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${data.proof.file_path}`
+      this.priceExample = data
+    })
+  }
+}
+</script>
+  
\ No newline at end of file
diff --git a/src/components/ChallengeTimeline.vue b/src/components/ChallengeTimeline.vue
new file mode 100644
index 00000000000..4260dc0e0a0
--- /dev/null
+++ b/src/components/ChallengeTimeline.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-timeline direction="horizontal" truncate-line="both">
+    <v-timeline-item dot-color="success">
+      <div class="text-h6">
+        Start
+      </div>
+      <template #opposite>
+        {{ challenge.startDate }}
+      </template>
+    </v-timeline-item>
+    <v-timeline-item dot-color="error">
+      <template #opposite>
+        <div class="text-h6">
+          End
+        </div>
+      </template>
+      {{ challenge.endDate }}
+    </v-timeline-item>
+  </v-timeline>
+  <v-progress-linear
+    color="info"
+    height="25"
+    :model-value="progress"
+    striped
+    style="width: 50%; margin-left: 25%; top: -55px; margin-top: -25px"
+  >
+    <strong>{{ daysLeftText }}</strong>
+  </v-progress-linear>
+</template>
+  
+<script>
+export default {
+  props: {
+    challenge: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    nbDays() {
+      return Math.round((new Date(this.challenge.endDate) - new Date(this.challenge.startDate)) / (1000 * 60 * 60 * 24))
+    },
+    todayIndex() {
+      return Math.round((new Date() - new Date(this.challenge.startDate)) / (1000 * 60 * 60 * 24))
+    },
+    daysLeftText() {
+      const daysLeft = this.nbDays - this.todayIndex
+      if (daysLeft <= 0) return "Challenge over"
+      if (daysLeft >= this.nbDays) return "Not started"
+      return `${daysLeft} days left`
+    },
+    progress() {
+      return Math.min(100, this.todayIndex * 100 / this.nbDays)
+    }
+  }
+}
+</script>
+  
\ No newline at end of file
diff --git a/src/components/ChallengeTopContributors.vue b/src/components/ChallengeTopContributors.vue
new file mode 100644
index 00000000000..83d566821f1
--- /dev/null
+++ b/src/components/ChallengeTopContributors.vue
@@ -0,0 +1,38 @@
+<template>
+  <h2 class="text-h6 mb-1">
+    Top 5 contributor
+  </h2>
+  <v-list density="compact">
+    <v-list-item
+      v-for="(contributor, i) in topContributors.slice(0, 5)"
+      :key="i"
+      :value="contributor"
+      color="primary"
+    >
+      <template #prepend>
+        {{ 
+          i === 0 ? '🥇' :
+          i === 1 ? '🥈' :
+          i === 2 ? '🥉' :
+          '🏅'
+        }}
+      </template>
+
+      <v-list-item-title>
+        {{ i+1 }}. {{ contributor.user_id }}, {{ contributor.price_count }} prices
+      </v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+  
+<script>
+export default {
+  props: {
+    topContributors: {
+      type: Array,
+      default: () => []
+    }
+  },
+}
+</script>
+  
\ No newline at end of file
diff --git a/src/views/CurrentChallenge.vue b/src/views/CurrentChallenge.vue
index 970b2fe4093..a3ac93444cd 100644
--- a/src/views/CurrentChallenge.vue
+++ b/src/views/CurrentChallenge.vue
@@ -8,42 +8,34 @@
   </h2>
 
   <v-row>
-    <v-col md="6">
-      TODO: Explain the challenge, how to contribute etc..
-      TODO: maybe add a place for proofs with missing prices (ideally proofs would be tagged for the challenge)
-      TODO: what about rewards ? badges for top 3 ? participation badges ?
-      TODO: Maybe a goal should be a number of product / prices, instead of the day
+    <v-col cols="12" lg="6">
+      <blockquote class="blockquote">
+        <p class="mb-2">
+          {{ challenge.icon }} Join other food price enthousiast (such as {{ challenge.topContributors[0]?.user_id || "you?" }}) in gathering information about {{ challenge.title }} {{ challenge.subtitle }}.
+        </p>
+        <p class="mb-2">
+          {{ challenge.icon }} Your goal is to go nearby stores, find corresponding products and 
+          <v-btn to="/prices/add" variant="text" density="compact">
+            adding prices
+          </v-btn>
+        </p>
+        <p class="mb-2">
+          {{ challenge.icon }} This challenge categories are 
+          <v-chip v-for="category in challenge.categories" :key="category" density="compact" label class="mr-2 mb-2" @click="$router.push({ path: `/categories/${category}` })">
+            {{ category }}
+          </v-chip>
+        </p>
+      </blockquote>
     </v-col>
-    <v-col md="6">
-      <v-timeline direction="horizontal" truncate-line="both">
-        <v-timeline-item dot-color="success">
-          <div class="text-h6">
-            Start
-          </div>
-          <template #opposite>
-            {{ challenge.start_date }}
-          </template>
-        </v-timeline-item>
-        <v-timeline-item dot-color="error">
-          <template #opposite>
-            <div class="text-h6">
-              End
-            </div>
-          </template>
-          {{ challenge.end_date }}
-        </v-timeline-item>
-      </v-timeline>
-      <v-progress-linear
-        color="info"
-        height="25"
-        :model-value="progress"
-        striped
-        style="width: 50%; margin-left: 25%; top: -55px; margin-top: -25px"
-      >
-        <strong>{{ days_left_text }}</strong>
-      </v-progress-linear>
+    <v-col cols="12" lg="6">
+      <ChallengeTimeline :challenge="challenge" />
     </v-col>
   </v-row>
+  
+  <ChallengeExample :exampleId="challenge.exampleId" />
+
+  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
+
   <v-row>
     <v-col cols="12" md="6">
       <h2 class="text-h6 mb-1">
@@ -52,10 +44,10 @@
 
       <v-row>
         <v-col cols="6">
-          <StatCard :value="challenge.number_of_contributions" :subtitle="'Total number of prices added'" />
+          <StatCard :value="challenge.numberOfContributions" :subtitle="'Total number of prices added'" />
         </v-col>
         <v-col cols="6">
-          <StatCard :value="challenge.number_of_contributors" :subtitle="'Total number of contributors'" />
+          <StatCard :value="challenge.numberOfContributors" :subtitle="'Total number of contributors'" />
         </v-col>
       </v-row>
     </v-col>
@@ -66,10 +58,10 @@
       </h2>
       <v-row v-if="username">
         <v-col cols="6">
-          <StatCard :value="challenge.user_contributions" :subtitle="'Prices added by you'" />
+          <StatCard :value="challenge.userContributions" :subtitle="'Prices added by you'" />
         </v-col>
         <v-col cols="6">
-          <v-card :title="`${challenge.user_rank == 0 ? '50+' : challenge.user_rank} / ${challenge.number_of_contributors}`" :subtitle="'Your rank'" variant="tonal" density="compact" />
+          <v-card :title="`${challenge.userRank == 0 ? '50+' : challenge.userRank} / ${challenge.numberOfContributors}`" :subtitle="'Your rank'" variant="tonal" density="compact" />
         </v-col>
       </v-row>
     </v-col>
@@ -77,55 +69,22 @@
   
   <v-row>
     <v-col cols="12" md="6">
-      <v-card
-        :title="'Top 5 contributors'"
-        variant="tonal"
-        density="compact"
-      >
-        <v-card-text>
-          <v-list density="compact">
-            <v-list-item
-              v-for="(contributor, i) in challenge.top_contributors.slice(0, 5)"
-              :key="i"
-              :value="contributor"
-              color="primary"
-            >
-              <template #prepend>
-                {{ 
-                  i === 0 ? '🥇' :
-                  i === 1 ? '🥈' :
-                  i === 2 ? '🥉' :
-                  '🏅'
-                }}
-              </template>
-
-              <v-list-item-title>
-                {{ i+1 }}. {{ contributor.user_id }}, {{ contributor.price_count }} prices
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-card-text>
-      </v-card>    
+      <ChallengeTopContributors :topContributors="challenge.topContributors" />
     </v-col>
     
-    <v-col v-if="challenge.latest_contributions.length" cols="12" md="6">
-      <v-card
-        :title="'Number of contributions per day'"
-        variant="tonal"
-        density="compact"
-      >
-        <v-card-text>
-          <PriceChart :priceList="challenge.latest_contributions" aggregate="count" dateField="created" />
-        </v-card-text>
-      </v-card>
+    <v-col v-if="challenge.latestContributions.length" cols="12" md="6">
+      <h2 class="text-h6 mb-1">
+        Number of contributions per day
+      </h2>
+      <PriceChart :priceList="challenge.latestContributions" aggregate="count" dateField="created" />
     </v-col>
   </v-row>
 
   <h2 class="text-h6 mb-1">
     Most recent contributions
   </h2>
-  <v-row v-if="challenge.latest_contributions">
-    <v-col v-for="price in challenge.latest_contributions.slice(0, 10)" :key="price" cols="12" sm="6" md="4" xl="3">
+  <v-row v-if="challenge.latestContributions">
+    <v-col v-for="price in challenge.latestContributions.slice(0, 10)" :key="price" cols="12" sm="6" md="4" xl="3">
       <PriceCard :price="price" :product="price.product" elevation="1" height="100%" />
     </v-col>
   </v-row>
@@ -142,7 +101,10 @@ export default {
   components: {
     StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
-    PriceChart: defineAsyncComponent(() => import('../components/PriceChart.vue'))
+    PriceChart: defineAsyncComponent(() => import('../components/PriceChart.vue')),
+    ChallengeTimeline: defineAsyncComponent(() => import('../components/ChallengeTimeline.vue')),
+    ChallengeExample: defineAsyncComponent(() => import('../components/ChallengeExample.vue')),
+    ChallengeTopContributors: defineAsyncComponent(() => import('../components/ChallengeTopContributors.vue')),
   },
   data() {
     return {
@@ -150,15 +112,16 @@ export default {
         title: "MILK",
         subtitle: "(and milk alternatives)",
         icon: "🥛",
-        start_date: "2024-09-01",
-        end_date: "2024-10-31",
+        startDate: "2024-09-01",
+        endDate: "2024-10-31",
         categories: ["en:milk-substitutes", "en:milks"],
-        top_contributors: [],
-        number_of_contributors: 0,
-        number_of_contributions: 0,
-        latest_contributions: [],
-        user_contributions: 0,
-        user_rank: 0
+        topContributors: [],
+        numberOfContributors: 0,
+        numberOfContributions: 0,
+        latestContributions: [],
+        userContributions: 0,
+        userRank: 0,
+        exampleId: 32900
       },
       loading: false,
     }
@@ -168,21 +131,6 @@ export default {
     username() {
       return this.appStore.user.username
     },
-    nb_days() {
-      return Math.round((new Date(this.challenge.end_date) - new Date(this.challenge.start_date)) / (1000 * 60 * 60 * 24))
-    },
-    today_index() {
-      return Math.round((new Date() - new Date(this.challenge.start_date)) / (1000 * 60 * 60 * 24))
-    },
-    days_left_text() {
-      const days_left = this.nb_days - this.today_index
-      if (days_left <= 0) return "Challenge over"
-      if (days_left >= this.nb_days) return "Not started"
-      return `${days_left} days left`
-    },
-    progress() {
-      return Math.min(100, this.today_index * 100 / this.nb_days)
-    }
   },
   mounted() {
     this.getStats()
@@ -191,36 +139,37 @@ export default {
     getStats() {
       this.loading = true
       // TODO: This should fetch only prices matching one of the product categories in this.challenge.categories
-      api.getPrices({ size: 100, created__gte: this.challenge.start_date, created__lte: this.challenge.end_date })
+      // TODO: Also, this is both used to show a few recent contribution and to display the number of contributions per day
+      //       The first requires only a size of 10, the second requires the entire data, so it probably should be another API point
+      api.getPrices({ size: 200, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
       .then((data) => {
-        this.challenge.latest_contributions = data.items
-        this.challenge.number_of_contributions = data.total
+        this.challenge.latestContributions = data.items
+        this.challenge.numberOfContributions = data.total
         this.loading = false
       })
 
       // TODO: this should only fetch users that contributed to one of the product categories in this.challenge.categories, in the designated time range
       api.getUsers({ order_by: constants.USER_ORDER_LIST[0].key, size: 50})
       .then((data) => {
-        this.challenge.top_contributors = data.items
-        this.challenge.number_of_contributors = data.total
+        this.challenge.topContributors = data.items
+        this.challenge.numberOfContributors = data.total
         for (let i = 0; i < data.items.length; i++) {
           const user = data.items[i]
           if (this.username && this.username == user.user_id) {
-            this.challenge.user_rank = i
+            this.challenge.userRank = i
             break
           }
         }
       })
       if (this.username) {
         // TODO: This should fetch only prices matching one of the product categories in this.challenge.categories
-        api.getPrices({ owner: this.username, created__gte: this.challenge.start_date, created__lte: this.challenge.end_date })
+        api.getPrices({ owner: this.username, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
         .then((data) => {
-          this.challenge.user_contributions = data.total
+          this.challenge.userContributions = data.total
         })
       }
       
     }
-      
   }
 }
 </script>

From 3433cfcfa292814daa0b03a7ac3385fe5e70a46f Mon Sep 17 00:00:00 2001
From: TTalex <github@bourreau.dev>
Date: Sat, 11 Jan 2025 16:02:38 +0100
Subject: [PATCH 4/8] Update for nutella challenge

---
 src/components/ChallengeExample.vue          |  46 -----
 src/components/ChallengeTakePicturesCard.vue |  42 +++++
 src/components/ChallengeTopContributors.vue  |   5 +-
 src/components/ChallengeValidateCard.vue     |  37 ++++
 src/components/PriceChart.vue                |   6 +-
 src/i18n/locales/en.json                     |  33 ++++
 src/router.js                                |   2 +-
 src/services/api.js                          |  18 ++
 src/views/CurrentChallenge.vue               | 170 +++++++++++--------
 src/views/Experiments.vue                    |   7 +
 10 files changed, 242 insertions(+), 124 deletions(-)
 delete mode 100644 src/components/ChallengeExample.vue
 create mode 100644 src/components/ChallengeTakePicturesCard.vue
 create mode 100644 src/components/ChallengeValidateCard.vue

diff --git a/src/components/ChallengeExample.vue b/src/components/ChallengeExample.vue
deleted file mode 100644
index c2af967a198..00000000000
--- a/src/components/ChallengeExample.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <v-row v-if="priceExample">
-    <v-col>
-      <h2 class="text-h6 mb-1">
-        A good example of proof to photograph
-      </h2>
-      <v-img :src="priceExample.proofUrl" style="max-height: 200px" />
-    </v-col>
-    <v-col>
-      <h2 class="text-h6 mb-1">
-        A good example of price to add
-      </h2>
-      <PriceCard :price="priceExample" :product="priceExample.product" elevation="1" />
-    </v-col>
-  </v-row>
-</template>
-  
-<script>
-import { defineAsyncComponent } from 'vue'
-import api from '../services/api.js'
-
-export default {
-  components: {
-    PriceCard: defineAsyncComponent(() => import('./PriceCard.vue')),
-  },
-  props: {
-    exampleId: {
-      type: Number,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      priceExample: null
-    }
-  },
-  mounted() {
-    api.getPriceById(this.exampleId)
-    .then((data) => {
-      data.proofUrl = `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${data.proof.file_path}`
-      this.priceExample = data
-    })
-  }
-}
-</script>
-  
\ No newline at end of file
diff --git a/src/components/ChallengeTakePicturesCard.vue b/src/components/ChallengeTakePicturesCard.vue
new file mode 100644
index 00000000000..035331f4ce4
--- /dev/null
+++ b/src/components/ChallengeTakePicturesCard.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-card v-if="exampleProofUrl">
+    <v-card-title>
+      {{ $t('Challenge.Step1TakePictures.Title') }}
+    </v-card-title>
+    <v-card-text>
+      <p class="mb-2">
+        {{ $t('Challenge.Step1TakePictures.line1') }}
+      </p>
+      <v-img :src="exampleProofUrl" style="max-height: 200px" />
+      <p class="mb-2 mt-2">
+        {{ $t('Challenge.Step1TakePictures.line2') }}
+      </p>
+    </v-card-text>
+    <v-card-actions>
+      <v-row>
+        <v-col>
+          <v-btn 
+            class="float-right"
+            color="success"
+            variant="flat"
+            to="/proofs/add/multiple"
+          >
+            {{ $t('Challenge.Step1TakePictures.AddPictures') }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-actions>
+  </v-card>
+</template>
+  
+<script>
+export default {
+  props: {
+    exampleProofUrl: {
+      type: String,
+      default: () => {}
+    }
+  },
+}
+</script>
+  
\ No newline at end of file
diff --git a/src/components/ChallengeTopContributors.vue b/src/components/ChallengeTopContributors.vue
index 83d566821f1..61e5343c158 100644
--- a/src/components/ChallengeTopContributors.vue
+++ b/src/components/ChallengeTopContributors.vue
@@ -1,12 +1,13 @@
 <template>
   <h2 class="text-h6 mb-1">
-    Top 5 contributor
+    {{ $t('Challenge.Top5Contributors') }}
   </h2>
   <v-list density="compact">
     <v-list-item
       v-for="(contributor, i) in topContributors.slice(0, 5)"
       :key="i"
       :value="contributor"
+      :to="`/users/${contributor.owner}`"
       color="primary"
     >
       <template #prepend>
@@ -19,7 +20,7 @@
       </template>
 
       <v-list-item-title>
-        {{ i+1 }}. {{ contributor.user_id }}, {{ contributor.price_count }} prices
+        {{ i+1 }}. {{ contributor.owner }}, {{ contributor.price__count }} {{ $t('Common.Prices') }}
       </v-list-item-title>
     </v-list-item>
   </v-list>
diff --git a/src/components/ChallengeValidateCard.vue b/src/components/ChallengeValidateCard.vue
new file mode 100644
index 00000000000..f93640d3a27
--- /dev/null
+++ b/src/components/ChallengeValidateCard.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-card class="fill-height d-flex flex-column">
+    <v-card-title>
+      {{ $t('Challenge.Step2Validate.Title') }}
+    </v-card-title>
+    <v-card-text class="flex-grow-1">
+      <p class="mb-2">
+        {{ $t('Challenge.Step2Validate.line1') }}
+      </p>
+      <p class="mb-4">
+        {{ $t('Challenge.Step2Validate.line2') }}
+      </p>
+      <p class="mb-2">
+        {{ $t('Challenge.Step2Validate.line3') }}
+      </p>
+      <p class="mb-4">
+        {{ $t('Challenge.Step2Validate.line4') }}
+      </p>
+    </v-card-text>
+    <v-card-actions>
+      <v-row>
+        <v-col>
+          <v-btn
+            class="float-right"
+            color="success"
+            variant="flat"
+            to="/experiments/price-validation-assistant"
+          >
+            {{ $t('Challenge.Step2Validate.ValidatePrices') }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-actions>
+  </v-card>
+</template>
+<script>
+</script>
\ No newline at end of file
diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index 10d1e3fced2..a6fecf957c4 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -21,6 +21,10 @@ export default {
     dateField: {
       type: String,
       default: () => "date"
+    },
+    field: {
+      type: String,
+      default: () => "price"
     }
   },
   data() {
@@ -54,7 +58,7 @@ export default {
         encoding: {
           x: {timeUnit: 'yearmonthdate', field: this.dateField, type: 'temporal', axis: { title: this.$t('Common.Date') }},
           // y: {field: 'price', type: 'quantitative'}
-          y: {aggregate: this.aggregate, field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
+          y: {aggregate: this.aggregate, field: this.field, type: 'quantitative', axis: { title: this.$t('Common.Price') }},
         }
       }
       embed('#vega-lite-chart', vlSpec, {actions: false, theme: this.theme.global.name})
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 82d1b39d7a6..06f6943d37e 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -134,6 +134,36 @@
 		"Submit": "Submit",
 		"Title": "Type a barcode"
 	},
+	"Challenge": {
+		"Title": "The current Challenge is ...",
+		"Subtitle": "Join other food price enthousiast (such as '{top_contributor_name}') in gathering information about {challenge_title} {challenge_subtitle}.",
+		"YouQuestion": "you ?",
+		"Step1TakePictures": {
+			"Title": "Step 1: Take pictures of price tags in stores",
+			"line1": "Pictures can include one or more price tags. Barcodes should be readable. For example :",
+			"line2": "Once ready, find your shop and upload your pictures using the button below.",
+			"AddPictures": "Add Pictures"
+		},
+		"Step2Validate": {
+			"Title": "Step 2 (optional): Validate the detected prices",
+			"line1": "Price tags are automatically detected, but the robots still need your help to validate them.",
+			"line2": "Visit the price validation page using the button below, edit the barcode and price if needed, and validate !",
+			"line3": "If you're having trouble reading the label, mark it as unreable.",
+			"line4": "This is a collaborative effort, even if you didn't send many pictures, you can still help others by validating.",
+			"ValidatePrices": "Validate Prices"
+		},
+		"GeneralStats": "General stats",
+		"TotalPicturesAdded": "Total number of pictures added",
+		"TotalContributions": "Total number of prices added",
+		"TotalContributors": "Total number of contributors",
+		"Top5Contributors": "Top 5 contributors",
+		"NumberOfContributionsPerDay": "Number of contributions per day",
+		"YourStats": "Your stats",
+		"PicturesAddedByYou": "Pictures added by you",
+		"PricesAddedByYou": "Prices added by you",
+		"YourRank": "Your rank, out of {number_of_contributors} contributors",
+		"MostRecentContributions": "Most recent contributions"
+	},
 	"Common": {
 		"About": "About",
 		"AddPrice": "Add a price",
@@ -626,6 +656,9 @@
 		},
 		"PriceValidationAssistant": {
 			"Title": "Price Validation Assistant"
+		},
+		"Challenge Page": {
+			"Title": "Challenge Page"
 		}
 	},
 	"Search": {
diff --git a/src/router.js b/src/router.js
index c279c247ebc..e8832061903 100644
--- a/src/router.js
+++ b/src/router.js
@@ -43,7 +43,7 @@ const routes = [
   { path: '/stats', name: 'stats', component: () => import('./views/Stats.vue'), meta: { title: 'Stats', icon: 'mdi-chart-box-outline', drawerMenu: true, breadcrumbs: [{title: 'Stats', disabled: true }] }},
   { path: '/settings', name: 'settings', component: () => import('./views/Settings.vue'), meta: { title: 'Settings', icon: 'mdi-cog-outline', drawerMenu: true, breadcrumbs: [{title: 'Settings', disabled: true }] }},
   { path: '/about', name: 'about', component: () => import('./views/About.vue'), meta: { title: 'About', icon: 'mdi-information-outline', drawerMenu: true, breadcrumbs: [{title: 'About', disabled: true }] }},
-  { path: '/challenge', name: 'challenge', component: () => import('./views/CurrentChallenge.vue'), meta: { title: 'Current Challenge', icon: 'mdi-medal-outline', drawerMenu: true }},
+  { path: '/experiments/challenge', name: 'challenge', component: () => import('./views/CurrentChallenge.vue'), meta: { title: 'Current Challenge', icon: 'mdi-medal-outline',  breadcrumbs: [{title: 'Experiments', disabled: false, to: '/experiments' }, {title: 'Challenge Page', disabled: true }] }},
   // Why this redirect?
   // The app used to be available at https://prices.openfoodfacts.org/app
   // It is now available at https://prices.openfoodfacts.org
diff --git a/src/services/api.js b/src/services/api.js
index 2af79fac1d6..594fcbc1340 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -321,6 +321,24 @@ export default {
     .then((response) => response.json())
   },
 
+  getPriceStats(params = {}) {
+    const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices/stats?${buildURLParams({...params})}`
+    return fetch(url, {
+      method: 'GET',
+      headers: OP_DEFAULT_HEADERS,
+    })
+    .then((response) => response.json())
+  },
+
+  getPricesGroupedStats(params = {}) {
+    const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices/grouped_stats?${buildURLParams({...params})}`
+    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/CurrentChallenge.vue b/src/views/CurrentChallenge.vue
index a3ac93444cd..c843e6225db 100644
--- a/src/views/CurrentChallenge.vue
+++ b/src/views/CurrentChallenge.vue
@@ -1,89 +1,93 @@
 <template>
   <h1 class="text-h5 mb-1">
-    The current Challenge is ...  {{ challenge.icon }} {{ challenge.title }}  {{ challenge.icon }}
+    {{ $t('Challenge.Title') }}  {{ challenge.icon }} {{ challenge.title }}  {{ challenge.icon }}
   </h1>
 
-  <h2 class="text-h6 mb-1">
-    {{ challenge.subtitle }}
-  </h2>
-
   <v-row>
     <v-col cols="12" lg="6">
-      <blockquote class="blockquote">
-        <p class="mb-2">
-          {{ challenge.icon }} Join other food price enthousiast (such as {{ challenge.topContributors[0]?.user_id || "you?" }}) in gathering information about {{ challenge.title }} {{ challenge.subtitle }}.
-        </p>
-        <p class="mb-2">
-          {{ challenge.icon }} Your goal is to go nearby stores, find corresponding products and 
-          <v-btn to="/prices/add" variant="text" density="compact">
-            adding prices
-          </v-btn>
-        </p>
-        <p class="mb-2">
-          {{ challenge.icon }} This challenge categories are 
-          <v-chip v-for="category in challenge.categories" :key="category" density="compact" label class="mr-2 mb-2" @click="$router.push({ path: `/categories/${category}` })">
-            {{ category }}
-          </v-chip>
-        </p>
-      </blockquote>
+      <p class="mb-2">
+        {{ $t('Challenge.Subtitle', {top_contributor_name: challenge.topContributors[0]?.owner || $t('Challenge.YouQuestion'), challenge_title: challenge.title, challenge_subtitle: challenge.subtitle}) }}
+      </p>
     </v-col>
     <v-col cols="12" lg="6">
       <ChallengeTimeline :challenge="challenge" />
     </v-col>
   </v-row>
   
-  <ChallengeExample :exampleId="challenge.exampleId" />
+  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
+
+  <v-row>
+    <v-col cols="12" lg="6">
+      <ChallengeTakePicturesCard :exampleProofUrl="challenge.exampleProofUrl" />
+    </v-col>
+    <v-col cols="12" lg="6">
+      <ChallengeValidateCard />
+    </v-col>
+  </v-row>
 
   <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
 
   <v-row>
-    <v-col cols="12" md="6">
+    <v-col cols="12">
       <h2 class="text-h6 mb-1">
-        General stats
+        {{ $t('Challenge.GeneralStats') }}
       </h2>
 
       <v-row>
-        <v-col cols="6">
-          <StatCard :value="challenge.numberOfContributions" :subtitle="'Total number of prices added'" />
+        <v-col cols="4">
+          <StatCard :value="challenge.numberOfProofs" :subtitle="$t('Challenge.TotalPicturesAdded')" />
         </v-col>
-        <v-col cols="6">
-          <StatCard :value="challenge.numberOfContributors" :subtitle="'Total number of contributors'" />
+        <v-col cols="4">
+          <StatCard :value="challenge.numberOfContributions" :subtitle="$t('Challenge.TotalContributions')" />
         </v-col>
-      </v-row>
-    </v-col>
-    
-    <v-col cols="12" md="6">
-      <h2 v-if="username" class="text-h6 mb-1">
-        Your stats
-      </h2>
-      <v-row v-if="username">
-        <v-col cols="6">
-          <StatCard :value="challenge.userContributions" :subtitle="'Prices added by you'" />
-        </v-col>
-        <v-col cols="6">
-          <v-card :title="`${challenge.userRank == 0 ? '50+' : challenge.userRank} / ${challenge.numberOfContributors}`" :subtitle="'Your rank'" variant="tonal" density="compact" />
+        <v-col cols="4">
+          <StatCard :value="challenge.numberOfContributors" :subtitle="$t('Challenge.TotalContributors')" />
         </v-col>
       </v-row>
     </v-col>
   </v-row>
-  
   <v-row>
-    <v-col cols="12" md="6">
+    <v-col v-if="challenge.topContributors.length" cols="12" md="6">
       <ChallengeTopContributors :topContributors="challenge.topContributors" />
     </v-col>
     
-    <v-col v-if="challenge.latestContributions.length" cols="12" md="6">
+    <v-col v-if="challenge.pricesPerDay.length" cols="12" md="6">
+      <h2 class="text-h6 mb-1">
+        {{ $t('Challenge.NumberOfContributionsPerDay') }}
+      </h2>
+      <PriceChart :priceList="challenge.pricesPerDay" aggregate="sum" dateField="date" field="price__count" />
+    </v-col>
+  </v-row>
+  
+  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
+
+  <v-row>
+    <v-col v-if="username" cols="12">
       <h2 class="text-h6 mb-1">
-        Number of contributions per day
+        {{ $t('Challenge.YourStats') }}
       </h2>
-      <PriceChart :priceList="challenge.latestContributions" aggregate="count" dateField="created" />
+      <v-row>
+        <v-col cols="4">
+          <StatCard :value="challenge.userProofContributions" :subtitle="$t('Challenge.PicturesAddedByYou')" />
+        </v-col>
+        <v-col cols="4">
+          <StatCard :value="challenge.userContributions" :subtitle="$t('Challenge.PricesAddedByYou')" />
+        </v-col>
+        <v-col cols="4">
+          <v-card :title="`${challenge.userRank == 0 ? '50+' : challenge.userRank}`" :subtitle="$t('Challenge.YourRank', {number_of_contributors: challenge.numberOfContributors})" variant="tonal" density="compact" />
+        </v-col>
+      </v-row>
     </v-col>
   </v-row>
 
-  <h2 class="text-h6 mb-1">
-    Most recent contributions
-  </h2>
-  <v-row v-if="challenge.latestContributions">
+  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
+
+  <v-row v-if="challenge.latestContributions.length">
+    <v-col cols="12">
+      <h2 class="text-h6">
+        {{ $t('Challenge.MostRecentContributions') }}
+      </h2>
+    </v-col>
     <v-col v-for="price in challenge.latestContributions.slice(0, 10)" :key="price" cols="12" sm="6" md="4" xl="3">
       <PriceCard :price="price" :product="price.product" elevation="1" height="100%" />
     </v-col>
@@ -92,7 +96,6 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
-import constants from '../constants'
 import api from '../services/api.js'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
@@ -103,25 +106,29 @@ export default {
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
     PriceChart: defineAsyncComponent(() => import('../components/PriceChart.vue')),
     ChallengeTimeline: defineAsyncComponent(() => import('../components/ChallengeTimeline.vue')),
-    ChallengeExample: defineAsyncComponent(() => import('../components/ChallengeExample.vue')),
+    ChallengeTakePicturesCard: defineAsyncComponent(() => import('../components/ChallengeTakePicturesCard.vue')),
+    ChallengeValidateCard: defineAsyncComponent(() => import('../components/ChallengeValidateCard.vue')),
     ChallengeTopContributors: defineAsyncComponent(() => import('../components/ChallengeTopContributors.vue')),
   },
   data() {
     return {
       challenge: {
-        title: "MILK",
-        subtitle: "(and milk alternatives)",
-        icon: "🥛",
-        startDate: "2024-09-01",
-        endDate: "2024-10-31",
-        categories: ["en:milk-substitutes", "en:milks"],
+        title: "Nutella",
+        subtitle: "(and other hazelnut spreads)",
+        icon: "🌰",
+        startDate: "2025-01-20",
+        endDate: "2025-01-31",
+        categories: ["en:hazelnut-spreads"],
         topContributors: [],
         numberOfContributors: 0,
         numberOfContributions: 0,
         latestContributions: [],
+        pricesPerDay: [],
+        numberOfProofs: 0,
         userContributions: 0,
+        userProofContributions: 0,
         userRank: 0,
-        exampleId: 32900
+        exampleProofUrl: "https://prices.openfoodfacts.org/img/0029/nCWeCVnpQJ.webp"
       },
       loading: false,
     }
@@ -138,34 +145,49 @@ export default {
   methods: {
     getStats() {
       this.loading = true
-      // TODO: This should fetch only prices matching one of the product categories in this.challenge.categories
-      // TODO: Also, this is both used to show a few recent contribution and to display the number of contributions per day
-      //       The first requires only a size of 10, the second requires the entire data, so it probably should be another API point
-      api.getPrices({ size: 200, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
+      api.getPriceStats({ product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate})
       .then((data) => {
-        this.challenge.latestContributions = data.items
-        this.challenge.numberOfContributions = data.total
+        this.challenge.numberOfContributions = data.price__count
         this.loading = false
       })
 
-      // TODO: this should only fetch users that contributed to one of the product categories in this.challenge.categories, in the designated time range
-      api.getUsers({ order_by: constants.USER_ORDER_LIST[0].key, size: 50})
+      api.getPrices({ size: 10, product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
       .then((data) => {
+        this.challenge.latestContributions = data.items
+      })
+
+      api.getProofs({ size: 1, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
+      .then((data) => {
+        this.challenge.numberOfProofs = data.total
+      })
+
+      api.getPricesGroupedStats({ group_by: "owner", order_by: "-price__count", size: 50, product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
+      .then((data) => {
+        console.log(data)
         this.challenge.topContributors = data.items
         this.challenge.numberOfContributors = data.total
         for (let i = 0; i < data.items.length; i++) {
-          const user = data.items[i]
-          if (this.username && this.username == user.user_id) {
-            this.challenge.userRank = i
+          const stat = data.items[i]
+          if (this.username && this.username == stat.owner) {
+            this.challenge.userRank = i+1
             break
           }
         }
       })
+
+      api.getPricesGroupedStats({ group_by: "date", product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
+      .then((data) => {
+        this.challenge.pricesPerDay = data.items
+      })
+
       if (this.username) {
-        // TODO: This should fetch only prices matching one of the product categories in this.challenge.categories
-        api.getPrices({ owner: this.username, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
+        api.getPriceStats({ product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate, owner: this.username})
+        .then((data) => {
+          this.challenge.userContributions = data.price__count
+        })
+        api.getProofs({ size: 1, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate, owner: this.username })
         .then((data) => {
-          this.challenge.userContributions = data.total
+          this.challenge.userProofContributions = data.total
         })
       }
       
diff --git a/src/views/Experiments.vue b/src/views/Experiments.vue
index 69ad7b5acf8..b722a2c536f 100644
--- a/src/views/Experiments.vue
+++ b/src/views/Experiments.vue
@@ -21,6 +21,13 @@
         to="/experiments/price-validation-assistant"
       />
     </v-col>
+    <v-col cols="12" sm="6" lg="4">
+      <v-card
+        :title="$t('Router.Challenge.Title')"
+        prepend-icon="mdi-checkbox-marked-circle-plus-outline"
+        to="/experiments/challenge"
+      />
+    </v-col>
   </v-row>
 
   <br>

From 0fa8cdf42cc5fe56a32dae372534d05f33ec416f Mon Sep 17 00:00:00 2001
From: TTalex <github@bourreau.dev>
Date: Sat, 11 Jan 2025 16:17:22 +0100
Subject: [PATCH 5/8] fix link in experiments page

---
 src/views/Experiments.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Experiments.vue b/src/views/Experiments.vue
index b722a2c536f..9a8bef1fc19 100644
--- a/src/views/Experiments.vue
+++ b/src/views/Experiments.vue
@@ -23,8 +23,8 @@
     </v-col>
     <v-col cols="12" sm="6" lg="4">
       <v-card
-        :title="$t('Router.Challenge.Title')"
-        prepend-icon="mdi-checkbox-marked-circle-plus-outline"
+        :title="$t('Router.Challenge Page.Title')"
+        prepend-icon="mdi-trophy"
         to="/experiments/challenge"
       />
     </v-col>

From ff0ecbfa479c3d762adf08adf19ba6177da57b5c Mon Sep 17 00:00:00 2001
From: TTalex <github@bourreau.dev>
Date: Sat, 11 Jan 2025 17:31:03 +0100
Subject: [PATCH 6/8] Removed elements requiring grouped stats

---
 src/components/ChallengeTopContributors.vue | 39 --------------
 src/components/PriceChart.vue               |  6 +--
 src/i18n/locales/en.json                    |  6 +--
 src/services/api.js                         |  9 ----
 src/views/CurrentChallenge.vue              | 57 ++++-----------------
 5 files changed, 11 insertions(+), 106 deletions(-)
 delete mode 100644 src/components/ChallengeTopContributors.vue

diff --git a/src/components/ChallengeTopContributors.vue b/src/components/ChallengeTopContributors.vue
deleted file mode 100644
index 61e5343c158..00000000000
--- a/src/components/ChallengeTopContributors.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <h2 class="text-h6 mb-1">
-    {{ $t('Challenge.Top5Contributors') }}
-  </h2>
-  <v-list density="compact">
-    <v-list-item
-      v-for="(contributor, i) in topContributors.slice(0, 5)"
-      :key="i"
-      :value="contributor"
-      :to="`/users/${contributor.owner}`"
-      color="primary"
-    >
-      <template #prepend>
-        {{ 
-          i === 0 ? '🥇' :
-          i === 1 ? '🥈' :
-          i === 2 ? '🥉' :
-          '🏅'
-        }}
-      </template>
-
-      <v-list-item-title>
-        {{ i+1 }}. {{ contributor.owner }}, {{ contributor.price__count }} {{ $t('Common.Prices') }}
-      </v-list-item-title>
-    </v-list-item>
-  </v-list>
-</template>
-  
-<script>
-export default {
-  props: {
-    topContributors: {
-      type: Array,
-      default: () => []
-    }
-  },
-}
-</script>
-  
\ No newline at end of file
diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index a6fecf957c4..10d1e3fced2 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -21,10 +21,6 @@ export default {
     dateField: {
       type: String,
       default: () => "date"
-    },
-    field: {
-      type: String,
-      default: () => "price"
     }
   },
   data() {
@@ -58,7 +54,7 @@ export default {
         encoding: {
           x: {timeUnit: 'yearmonthdate', field: this.dateField, type: 'temporal', axis: { title: this.$t('Common.Date') }},
           // y: {field: 'price', type: 'quantitative'}
-          y: {aggregate: this.aggregate, field: this.field, type: 'quantitative', axis: { title: this.$t('Common.Price') }},
+          y: {aggregate: this.aggregate, field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
         }
       }
       embed('#vega-lite-chart', vlSpec, {actions: false, theme: this.theme.global.name})
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 06f6943d37e..50a4aca033f 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -136,8 +136,7 @@
 	},
 	"Challenge": {
 		"Title": "The current Challenge is ...",
-		"Subtitle": "Join other food price enthousiast (such as '{top_contributor_name}') in gathering information about {challenge_title} {challenge_subtitle}.",
-		"YouQuestion": "you ?",
+		"Subtitle": "Join other food price enthousiast in gathering information about {challenge_title} {challenge_subtitle}.",
 		"Step1TakePictures": {
 			"Title": "Step 1: Take pictures of price tags in stores",
 			"line1": "Pictures can include one or more price tags. Barcodes should be readable. For example :",
@@ -156,12 +155,9 @@
 		"TotalPicturesAdded": "Total number of pictures added",
 		"TotalContributions": "Total number of prices added",
 		"TotalContributors": "Total number of contributors",
-		"Top5Contributors": "Top 5 contributors",
-		"NumberOfContributionsPerDay": "Number of contributions per day",
 		"YourStats": "Your stats",
 		"PicturesAddedByYou": "Pictures added by you",
 		"PricesAddedByYou": "Prices added by you",
-		"YourRank": "Your rank, out of {number_of_contributors} contributors",
 		"MostRecentContributions": "Most recent contributions"
 	},
 	"Common": {
diff --git a/src/services/api.js b/src/services/api.js
index 594fcbc1340..390570ea92c 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -330,15 +330,6 @@ export default {
     .then((response) => response.json())
   },
 
-  getPricesGroupedStats(params = {}) {
-    const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices/grouped_stats?${buildURLParams({...params})}`
-    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/CurrentChallenge.vue b/src/views/CurrentChallenge.vue
index c843e6225db..f54bb7c00ce 100644
--- a/src/views/CurrentChallenge.vue
+++ b/src/views/CurrentChallenge.vue
@@ -6,7 +6,7 @@
   <v-row>
     <v-col cols="12" lg="6">
       <p class="mb-2">
-        {{ $t('Challenge.Subtitle', {top_contributor_name: challenge.topContributors[0]?.owner || $t('Challenge.YouQuestion'), challenge_title: challenge.title, challenge_subtitle: challenge.subtitle}) }}
+        {{ $t('Challenge.Subtitle', {challenge_title: challenge.title, challenge_subtitle: challenge.subtitle}) }}
       </p>
     </v-col>
     <v-col cols="12" lg="6">
@@ -34,30 +34,18 @@
       </h2>
 
       <v-row>
-        <v-col cols="4">
+        <v-col cols="12" md="4">
           <StatCard :value="challenge.numberOfProofs" :subtitle="$t('Challenge.TotalPicturesAdded')" />
         </v-col>
-        <v-col cols="4">
+        <v-col cols="12" md="4">
           <StatCard :value="challenge.numberOfContributions" :subtitle="$t('Challenge.TotalContributions')" />
         </v-col>
-        <v-col cols="4">
+        <v-col cols="12" md="4">
           <StatCard :value="challenge.numberOfContributors" :subtitle="$t('Challenge.TotalContributors')" />
         </v-col>
       </v-row>
     </v-col>
   </v-row>
-  <v-row>
-    <v-col v-if="challenge.topContributors.length" cols="12" md="6">
-      <ChallengeTopContributors :topContributors="challenge.topContributors" />
-    </v-col>
-    
-    <v-col v-if="challenge.pricesPerDay.length" cols="12" md="6">
-      <h2 class="text-h6 mb-1">
-        {{ $t('Challenge.NumberOfContributionsPerDay') }}
-      </h2>
-      <PriceChart :priceList="challenge.pricesPerDay" aggregate="sum" dateField="date" field="price__count" />
-    </v-col>
-  </v-row>
   
   <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
 
@@ -67,15 +55,12 @@
         {{ $t('Challenge.YourStats') }}
       </h2>
       <v-row>
-        <v-col cols="4">
+        <v-col cols="12" md="4">
           <StatCard :value="challenge.userProofContributions" :subtitle="$t('Challenge.PicturesAddedByYou')" />
         </v-col>
-        <v-col cols="4">
+        <v-col cols="12" md="4">
           <StatCard :value="challenge.userContributions" :subtitle="$t('Challenge.PricesAddedByYou')" />
         </v-col>
-        <v-col cols="4">
-          <v-card :title="`${challenge.userRank == 0 ? '50+' : challenge.userRank}`" :subtitle="$t('Challenge.YourRank', {number_of_contributors: challenge.numberOfContributors})" variant="tonal" density="compact" />
-        </v-col>
       </v-row>
     </v-col>
   </v-row>
@@ -104,11 +89,9 @@ export default {
   components: {
     StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
-    PriceChart: defineAsyncComponent(() => import('../components/PriceChart.vue')),
     ChallengeTimeline: defineAsyncComponent(() => import('../components/ChallengeTimeline.vue')),
     ChallengeTakePicturesCard: defineAsyncComponent(() => import('../components/ChallengeTakePicturesCard.vue')),
     ChallengeValidateCard: defineAsyncComponent(() => import('../components/ChallengeValidateCard.vue')),
-    ChallengeTopContributors: defineAsyncComponent(() => import('../components/ChallengeTopContributors.vue')),
   },
   data() {
     return {
@@ -119,15 +102,12 @@ export default {
         startDate: "2025-01-20",
         endDate: "2025-01-31",
         categories: ["en:hazelnut-spreads"],
-        topContributors: [],
         numberOfContributors: 0,
         numberOfContributions: 0,
         latestContributions: [],
-        pricesPerDay: [],
         numberOfProofs: 0,
         userContributions: 0,
         userProofContributions: 0,
-        userRank: 0,
         exampleProofUrl: "https://prices.openfoodfacts.org/img/0029/nCWeCVnpQJ.webp"
       },
       loading: false,
@@ -145,13 +125,13 @@ export default {
   methods: {
     getStats() {
       this.loading = true
-      api.getPriceStats({ product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate})
+      api.getPriceStats({ product__categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate})
       .then((data) => {
         this.challenge.numberOfContributions = data.price__count
         this.loading = false
       })
 
-      api.getPrices({ size: 10, product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
+      api.getPrices({ size: 10, product__categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
       .then((data) => {
         this.challenge.latestContributions = data.items
       })
@@ -161,27 +141,8 @@ export default {
         this.challenge.numberOfProofs = data.total
       })
 
-      api.getPricesGroupedStats({ group_by: "owner", order_by: "-price__count", size: 50, product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
-      .then((data) => {
-        console.log(data)
-        this.challenge.topContributors = data.items
-        this.challenge.numberOfContributors = data.total
-        for (let i = 0; i < data.items.length; i++) {
-          const stat = data.items[i]
-          if (this.username && this.username == stat.owner) {
-            this.challenge.userRank = i+1
-            break
-          }
-        }
-      })
-
-      api.getPricesGroupedStats({ group_by: "date", product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
-      .then((data) => {
-        this.challenge.pricesPerDay = data.items
-      })
-
       if (this.username) {
-        api.getPriceStats({ product_categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate, owner: this.username})
+        api.getPriceStats({ product__categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate, owner: this.username})
         .then((data) => {
           this.challenge.userContributions = data.price__count
         })

From 12081781e7ca520612b93c8c2adf7976a6356866 Mon Sep 17 00:00:00 2001
From: TTalex <github@bourreau.dev>
Date: Sat, 11 Jan 2025 17:38:23 +0100
Subject: [PATCH 7/8] revert PriceChart changes

---
 src/components/PriceChart.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index 10d1e3fced2..0ec4216d614 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="vega-lite-chart" style="width: 100%;" />
+  <div id="vega-lite-chart" style="width:100%;" />
 </template>
 
 <script>
@@ -13,14 +13,6 @@ export default {
     priceList: {
       type: Array,
       default: () => []
-    },
-    aggregate: {
-      type: String,
-      default: () => "mean"
-    },
-    dateField: {
-      type: String,
-      default: () => "date"
     }
   },
   data() {
@@ -41,7 +33,7 @@ export default {
       var vlSpec = {
         $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
         description: 'A simple bar chart with embedded data.',
-        width: "container",
+        width: 'container',
         autosize: { type: 'fit', resize: true},
         data: {
           values: this.priceList
@@ -52,9 +44,9 @@ export default {
           tooltip: true
         },
         encoding: {
-          x: {timeUnit: 'yearmonthdate', field: this.dateField, type: 'temporal', axis: { title: this.$t('Common.Date') }},
+          x: {timeUnit: 'yearmonthdate', field: 'date', type: 'temporal', axis: { title: this.$t('Common.Date') }},
           // y: {field: 'price', type: 'quantitative'}
-          y: {aggregate: this.aggregate, field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
+          y: {aggregate: 'mean', field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
         }
       }
       embed('#vega-lite-chart', vlSpec, {actions: false, theme: this.theme.global.name})

From edbdb4a36962d165e2d82f6cbaf8942045d7fd27 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Wed, 15 Jan 2025 15:28:01 +0100
Subject: [PATCH 8/8] wording fixes

---
 src/components/ChallengeTakePicturesCard.vue |  8 ++---
 src/components/ChallengeValidateCard.vue     | 12 +++----
 src/i18n/locales/en.json                     | 38 ++++++++++++--------
 src/router.js                                |  2 +-
 src/views/CurrentChallenge.vue               | 20 ++++-------
 src/views/Experiments.vue                    |  2 +-
 6 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/components/ChallengeTakePicturesCard.vue b/src/components/ChallengeTakePicturesCard.vue
index 035331f4ce4..4b05f2f6573 100644
--- a/src/components/ChallengeTakePicturesCard.vue
+++ b/src/components/ChallengeTakePicturesCard.vue
@@ -1,15 +1,15 @@
 <template>
   <v-card v-if="exampleProofUrl">
     <v-card-title>
-      {{ $t('Challenge.Step1TakePictures.Title') }}
+      {{ $t('Challenge.StepTakePictures.Title') }}
     </v-card-title>
     <v-card-text>
       <p class="mb-2">
-        {{ $t('Challenge.Step1TakePictures.line1') }}
+        {{ $t('Challenge.StepTakePictures.line1') }}
       </p>
       <v-img :src="exampleProofUrl" style="max-height: 200px" />
       <p class="mb-2 mt-2">
-        {{ $t('Challenge.Step1TakePictures.line2') }}
+        {{ $t('Challenge.StepTakePictures.line2') }}
       </p>
     </v-card-text>
     <v-card-actions>
@@ -21,7 +21,7 @@
             variant="flat"
             to="/proofs/add/multiple"
           >
-            {{ $t('Challenge.Step1TakePictures.AddPictures') }}
+            {{ $t('Challenge.StepTakePictures.AddPictures') }}
           </v-btn>
         </v-col>
       </v-row>
diff --git a/src/components/ChallengeValidateCard.vue b/src/components/ChallengeValidateCard.vue
index f93640d3a27..de1c251efd8 100644
--- a/src/components/ChallengeValidateCard.vue
+++ b/src/components/ChallengeValidateCard.vue
@@ -1,20 +1,20 @@
 <template>
   <v-card class="fill-height d-flex flex-column">
     <v-card-title>
-      {{ $t('Challenge.Step2Validate.Title') }}
+      {{ $t('Challenge.StepValidate.Title') }}
     </v-card-title>
     <v-card-text class="flex-grow-1">
       <p class="mb-2">
-        {{ $t('Challenge.Step2Validate.line1') }}
+        {{ $t('Challenge.StepValidate.line1') }}
       </p>
       <p class="mb-4">
-        {{ $t('Challenge.Step2Validate.line2') }}
+        {{ $t('Challenge.StepValidate.line2') }}
       </p>
       <p class="mb-2">
-        {{ $t('Challenge.Step2Validate.line3') }}
+        {{ $t('Challenge.StepValidate.line3') }}
       </p>
       <p class="mb-4">
-        {{ $t('Challenge.Step2Validate.line4') }}
+        {{ $t('Challenge.StepValidate.line4') }}
       </p>
     </v-card-text>
     <v-card-actions>
@@ -26,7 +26,7 @@
             variant="flat"
             to="/experiments/price-validation-assistant"
           >
-            {{ $t('Challenge.Step2Validate.ValidatePrices') }}
+            {{ $t('Challenge.StepValidate.ValidatePrices') }}
           </v-btn>
         </v-col>
       </v-row>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 50a4aca033f..0e6872f7728 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -135,27 +135,24 @@
 		"Title": "Type a barcode"
 	},
 	"Challenge": {
-		"Title": "The current Challenge is ...",
-		"Subtitle": "Join other food price enthousiast in gathering information about {challenge_title} {challenge_subtitle}.",
-		"Step1TakePictures": {
-			"Title": "Step 1: Take pictures of price tags in stores",
+		"Title": "The current challenge is ...",
+		"Subtitle": "Join other food price enthusiasts in gathering information about {challenge_title} {challenge_subtitle}.",
+		"StepTakePictures": {
+			"Title": "Take pictures of price tags in stores",
 			"line1": "Pictures can include one or more price tags. Barcodes should be readable. For example :",
 			"line2": "Once ready, find your shop and upload your pictures using the button below.",
-			"AddPictures": "Add Pictures"
+			"AddPictures": "Add pictures"
 		},
-		"Step2Validate": {
-			"Title": "Step 2 (optional): Validate the detected prices",
+		"StepValidate": {
+			"Title": "Validate the detected prices",
 			"line1": "Price tags are automatically detected, but the robots still need your help to validate them.",
 			"line2": "Visit the price validation page using the button below, edit the barcode and price if needed, and validate !",
 			"line3": "If you're having trouble reading the label, mark it as unreable.",
 			"line4": "This is a collaborative effort, even if you didn't send many pictures, you can still help others by validating.",
-			"ValidatePrices": "Validate Prices"
+			"ValidatePrices": "Validate prices"
 		},
-		"GeneralStats": "General stats",
-		"TotalPicturesAdded": "Total number of pictures added",
-		"TotalContributions": "Total number of prices added",
-		"TotalContributors": "Total number of contributors",
-		"YourStats": "Your stats",
+		"Stats": "Challenge stats",
+		"MyStats": "My stats",
 		"PicturesAddedByYou": "Pictures added by you",
 		"PricesAddedByYou": "Prices added by you",
 		"MostRecentContributions": "Most recent contributions"
@@ -190,6 +187,10 @@
 		"Category": "Category",
 		"Categories": "Categories",
 		"CategoryTotal": "{count} categories | {count} category | {count} categories",
+		"Challenge": "Challenge",
+		"Challenges": "Challenges",
+		"ChallengeCurrent": "Current challenge",
+		"ChallengeOngoing": "Ongoing challenge",
 		"Chart": "Chart",
 		"Clear": "Clear",
 		"Contributors": "Contributors",
@@ -274,11 +275,15 @@
 		"OrderUserCountDESC": "User count",
 		"PersonalInfo": "Personal information",
 		"Physical": "Physical",
+		"Picture": "Picture",
+		"Pictures": "Pictures",
+		"PicturesAdded": "Pictures added",
 		"PRICE_TAG": "Price tag",
 		"PriceCount": "{count} prices | {count} price | {count} prices",
 		"PriceToValidateCount": "{count} prices to validate | {count} price to validate | {count} prices to validate",
 		"PriceCreated": "Price created!",
 		"PricesMore": "More prices",
+		"PricesAdded": "Prices added",
 		"PricesAddedToday": "Prices added today",
 		"PricesToday": "Prices today",
 		"Private": "Private",
@@ -653,8 +658,11 @@
 		"PriceValidationAssistant": {
 			"Title": "Price Validation Assistant"
 		},
-		"Challenge Page": {
-			"Title": "Challenge Page"
+		"Challenge": {
+			"Title": "Challenge"
+		},
+		"CurrentChallenge": {
+			"Title": "Current Challenge"
 		}
 	},
 	"Search": {
diff --git a/src/router.js b/src/router.js
index e8832061903..09e1e1d0955 100644
--- a/src/router.js
+++ b/src/router.js
@@ -43,7 +43,7 @@ const routes = [
   { path: '/stats', name: 'stats', component: () => import('./views/Stats.vue'), meta: { title: 'Stats', icon: 'mdi-chart-box-outline', drawerMenu: true, breadcrumbs: [{title: 'Stats', disabled: true }] }},
   { path: '/settings', name: 'settings', component: () => import('./views/Settings.vue'), meta: { title: 'Settings', icon: 'mdi-cog-outline', drawerMenu: true, breadcrumbs: [{title: 'Settings', disabled: true }] }},
   { path: '/about', name: 'about', component: () => import('./views/About.vue'), meta: { title: 'About', icon: 'mdi-information-outline', drawerMenu: true, breadcrumbs: [{title: 'About', disabled: true }] }},
-  { path: '/experiments/challenge', name: 'challenge', component: () => import('./views/CurrentChallenge.vue'), meta: { title: 'Current Challenge', icon: 'mdi-medal-outline',  breadcrumbs: [{title: 'Experiments', disabled: false, to: '/experiments' }, {title: 'Challenge Page', disabled: true }] }},
+  { path: '/experiments/challenge', name: 'challenge', component: () => import('./views/CurrentChallenge.vue'), meta: { title: 'Community Challenge', icon: 'mdi-medal-outline',  breadcrumbs: [{title: 'Experiments', disabled: false, to: '/experiments' }, {title: 'Challenge', disabled: true }] }},
   // Why this redirect?
   // The app used to be available at https://prices.openfoodfacts.org/app
   // It is now available at https://prices.openfoodfacts.org
diff --git a/src/views/CurrentChallenge.vue b/src/views/CurrentChallenge.vue
index f54bb7c00ce..d1f82fd8abf 100644
--- a/src/views/CurrentChallenge.vue
+++ b/src/views/CurrentChallenge.vue
@@ -1,6 +1,6 @@
 <template>
   <h1 class="text-h5 mb-1">
-    {{ $t('Challenge.Title') }}  {{ challenge.icon }} {{ challenge.title }}  {{ challenge.icon }}
+    {{ $t('Challenge.Title') }} {{ challenge.icon }} {{ challenge.title }} {{ challenge.icon }}
   </h1>
 
   <v-row>
@@ -13,8 +13,6 @@
       <ChallengeTimeline :challenge="challenge" />
     </v-col>
   </v-row>
-  
-  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
 
   <v-row>
     <v-col cols="12" lg="6">
@@ -25,34 +23,30 @@
     </v-col>
   </v-row>
 
-  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
-
   <v-row>
     <v-col cols="12">
       <h2 class="text-h6 mb-1">
-        {{ $t('Challenge.GeneralStats') }}
+        {{ $t('Challenge.Stats') }}
       </h2>
 
       <v-row>
         <v-col cols="12" md="4">
-          <StatCard :value="challenge.numberOfProofs" :subtitle="$t('Challenge.TotalPicturesAdded')" />
+          <StatCard :value="challenge.numberOfProofs" :subtitle="$t('Common.PicturesAdded')" />
         </v-col>
         <v-col cols="12" md="4">
-          <StatCard :value="challenge.numberOfContributions" :subtitle="$t('Challenge.TotalContributions')" />
+          <StatCard :value="challenge.numberOfContributions" :subtitle="$t('Common.PricesAdded')" />
         </v-col>
         <v-col cols="12" md="4">
-          <StatCard :value="challenge.numberOfContributors" :subtitle="$t('Challenge.TotalContributors')" />
+          <StatCard :value="challenge.numberOfContributors" :subtitle="$t('Common.Contributors')" />
         </v-col>
       </v-row>
     </v-col>
   </v-row>
-  
-  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
 
   <v-row>
     <v-col v-if="username" cols="12">
       <h2 class="text-h6 mb-1">
-        {{ $t('Challenge.YourStats') }}
+        {{ $t('Challenge.MyStats') }}
       </h2>
       <v-row>
         <v-col cols="12" md="4">
@@ -65,8 +59,6 @@
     </v-col>
   </v-row>
 
-  <v-divider :thickness="2" class="border-opacity-100 mt-5 mb-3" />
-
   <v-row v-if="challenge.latestContributions.length">
     <v-col cols="12">
       <h2 class="text-h6">
diff --git a/src/views/Experiments.vue b/src/views/Experiments.vue
index 9a8bef1fc19..9f507b84cc8 100644
--- a/src/views/Experiments.vue
+++ b/src/views/Experiments.vue
@@ -23,7 +23,7 @@
     </v-col>
     <v-col cols="12" sm="6" lg="4">
       <v-card
-        :title="$t('Router.Challenge Page.Title')"
+        :title="$t('Router.CurrentChallenge.Title')"
         prepend-icon="mdi-trophy"
         to="/experiments/challenge"
       />