Merge pull request #8 from ChouquetteCorp/feature/stats-charts

feat: add stats bet section

package.json

@@ -28,6 +28,8 @@
     "@onesignal/onesignal-vue3": "^1.0.2",
     "@supabase/supabase-js": "^2.21.0",
     "browser-image-compression": "^2.0.2",
+    "chart.js": "^4.4.0",
+    "colord": "^2.9.3",
     "pinia": "^2.0.35",
     "primeicons": "^6.0.1",
     "primevue": "^3.29.0",

src/components/BetCounter.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import chouquette from '@/assets/images/chouquette.png'
+
+  defineProps<{
+    nbBet: number
+  }>()
+</script>
+
+<template>
+  <div class="bet-counter">
+    <div class="bet-counter__number">
+      <p>{{ nbBet }}</p>
+      <img :src="chouquette" alt="unit" />
+    </div>
+    <p>{{ $t('EventView.betToast.success.detail', nbBet) }}</p>
+  </div>
+</template>
+
+<style lang="scss">
+  .bet-counter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &__number {
+      display: flex;
+      justify-content: flex-end;
+      align-items: baseline;
+      column-gap: 1rem;
+      height: 8.5rem;
+
+      p {
+        vertical-align: text-bottom;
+        font-size: 7rem;
+        font-weight: 500;
+      }
+      img {
+        height: 3.75rem;
+      }
+    }
+  }
+</style>

src/components/PieChart.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+  import Chart from 'primevue/chart'
+  import { ref, onMounted, watch } from 'vue'
+  import { colord } from 'colord'
+
+  onMounted(() => {
+    const documentStyle = getComputedStyle(document.body)
+
+    colors.value = generateColorsVariant(documentStyle.getPropertyValue('--primary-color'))
+    chartData.value = setChartData()
+  })
+
+  interface Props {
+    datas?: Record<string, number>
+  }
+
+  const props = defineProps<Props>()
+
+  watch(
+    () => props.datas,
+    () => {
+      chartData.value = setChartData()
+    },
+    { deep: true },
+  )
+  const chartData = ref()
+  const colors = ref<string[]>([])
+  const chartOptions = ref({
+    plugins: {
+      legend: {
+        labels: {
+          usePointStyle: true,
+        },
+      },
+    },
+  })
+
+  const generateColorsVariant = (colorHex: string, numberOfColors = 10) => {
+    let color = colord(colorHex)
+    const colors = [colorHex]
+
+    for (let i = 0; i < numberOfColors; i++) {
+      color = color.rotate(-30)
+      colors.push(color.toHex())
+    }
+
+    return colors
+  }
+
+  const setChartData = () => {
+    return {
+      datasets: [
+        {
+          data: props.datas ? Object.values(props.datas) : [],
+          backgroundColor: colors.value,
+        },
+      ],
+      labels: props.datas ? Object.keys(props.datas) : [],
+    }
+  }
+</script>
+
+<template>
+  <Chart v-if="chartData" type="pie" :data="chartData" :options="chartOptions" />
+</template>

src/lang/locales/en.json

@@ -29,7 +29,10 @@
         "detail": "You withdrew your bet"
       }
     },
-    "loginBtn": "Login to bet"
+    "loginBtn": "Login to bet",
+    "statsSection": {
+      "title": "Stats"
+    }
   },
   "CreateView": {
     "editTitle": "Edit the bet",

src/lang/locales/fr.json

@@ -29,7 +29,10 @@
         "detail": "Tu as retiré ton pari"
       }
     },
-    "loginBtn": "Se connecter pour parier"
+    "loginBtn": "Se connecter pour parier",
+    "statsSection": {
+      "title": "Stats"
+    }
   },
   "CreateView": {
     "editTitle": "Modifier le pari",
@@ -284,4 +287,4 @@
     "title": "Matchs",
     "bet": "Parier"
   }
-}
+}

src/stores/event.ts

@@ -17,6 +17,7 @@ export const useEventStore = defineStore('event', () => {
   const userResult = ref<string | null>(null)
 
   const isMyEvent = computed(() => event.value?.author.user_id === auth.userId)
+  const nbBet = computed(() => Object.values(event.value?.countBet ?? 0).reduce((a, b) => a + b, 0))
 
   const recentlyFinishedEvents = computed(() => {
     if (!allEvents.value) return []
@@ -66,9 +67,25 @@ export const useEventStore = defineStore('event', () => {
 
     userBet.value = userBetData[0]
 
+    await setCountBet()
+
     await setDispatchResults()
   }
 
+  async function setCountBet() {
+    if (!event.value) return
+
+    const { data: counts, error: errorCount } = await supabase.rpc('count_guess_for_event', { eventid: event.value.id })
+    if (errorCount) throw errorCount
+
+    const countBet: Record<string, number> = {}
+
+    event.value.propositions.forEach((proposition) => {
+      countBet[proposition] = counts.find(({ guess }: { guess: string }) => guess === proposition)?.sum ?? 0
+    })
+    event.value.countBet = countBet
+  }
+
   async function setDispatchResults() {
     if (!auth.userId || !event.value) return
     const { data: dispatchResultsData, error: dispatchResultsError } = await supabase
@@ -102,6 +119,7 @@ export const useEventStore = defineStore('event', () => {
   async function updateBet(number: number, guess: string) {
     if (number === 0) await deleteBet()
     else await addBet(number, guess)
+    await setCountBet()
   }
 
   async function addBet(number: number, guess: string) {
@@ -173,6 +191,7 @@ export const useEventStore = defineStore('event', () => {
     isRecentlyFinishedEvents,
     isTargetEventRecentlyFinished,
     isMyEvent,
+    nbBet,
     setAllEvents,
     setEvent,
     setBettors,

src/types/interfaces.ts

@@ -32,6 +32,7 @@ export interface Event {
   invite_code: string
   date_finish?: string
   unit: EventUnit
+  countBet?: Record<string, number>
 }
 
 export enum EventUnit {

src/views/EventView.vue

@@ -13,6 +13,9 @@
   import ShareModal from '@/components/ShareModal.vue'
   import { useRouter } from 'vue-router'
   import { useI18n } from 'vue-i18n'
+  import PieChart from '@/components/PieChart.vue'
+  import Fieldset from 'primevue/fieldset'
+  import BetCounter from '@/components/BetCounter.vue'
 
   const router = useRouter()
   const toast = useToast()
@@ -160,6 +163,13 @@
         <p v-if="bettors" class="event__bettors" :class="{ 'event__bettors--anim': isBettorsUpdated }">
           {{ $t('EventView.bettorsSentance', bettors) }}
         </p>
+
+        <Fieldset :legend="$t('EventView.statsSection.title')" :toggleable="true" collapsed>
+          <div class="event__stats-content">
+            <BetCounter :nb-bet="eventStore.nbBet" />
+            <PieChart :datas="event.countBet" class="event__chart" />
+          </div>
+        </Fieldset>
       </template>
     </Card>
     <BetModal
@@ -227,6 +237,18 @@
       white-space: pre-line;
     }
 
+    &__stats-content {
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      justify-content: space-between;
+      grid-template-columns: repeat(2, 1fr);
+      & > * {
+        margin: auto;
+        width: 75%;
+      }
+    }
+
     &__already-bet-wrapper {
       display: flex;
       flex-direction: column;

supabase/migrations/20231006171205_countfunctionEvent.sql

@@ -0,0 +1,15 @@
+create or replace function count_guess_for_event(eventid integer)
+ RETURNS TABLE (
+    guess character varying,
+    sum bigint
+  ) 
+  LANGUAGE plpgsql AS
+$func$
+BEGIN
+return query
+  SELECT b.guess, SUM(number) as sum
+  from bets b 
+  where event_id = eventid
+  group by b.guess;
+END
+$func$;

templates/chouquette/src/lang/locales/en.json

@@ -29,7 +29,10 @@
           "detail": "You withdrew your bet"
         }
       },
-      "loginBtn": "Login to bet"
+      "loginBtn": "Login to bet",
+      "statsSection": {
+        "title": "Stats"
+      }
     },
     "CreateView": {
       "editTitle": "Edit the bet",

templates/chouquette/src/lang/locales/fr.json

@@ -29,7 +29,10 @@
           "detail": "Tu as retiré ton pari"
         }
       },
-      "loginBtn": "Se connecter pour parier"
+      "loginBtn": "Se connecter pour parier",
+      "statsSection": {
+        "title": "Stats"
+      }
     },
     "CreateView": {
       "editTitle": "Modifier le pari",