boussole-pluss/frontend/pages/result.vue

<script lang="ts" setup>

import {type Quiz, useQuizStore} from "~/store/quiz";

const scores = ref<number[]>();
const loading = ref(true);

onMounted(() => {
  loading.value = true;
  useQuizStore().findById(useRoute().query.quiz).then((quiz: Quiz) => {
    scores.value = quiz.axes.map(value => value.average);
  })
    .finally(() => loading.value = false);
});
</script>

<template>
  <section>
    <h1>Bravo !</h1>
    <p class="text-center">Merci pour votre contribution à la production locale et bravo pour votre implication.</p>
    <div v-if="!loading" class="chart-area">
      <polar-area-chart :data="scores"/>
      <Legend/>
    </div>
    <loader v-else class="center"/>
    <nuxt-link class="button orange" to="/dashboard">Retour à l'accueil</nuxt-link>
  </section>
</template>


<style lang="scss" scoped>

@import "assets/css/spacing";

.chart-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: $small 0;
}

</style>