Added stats to challenges

components/TheNavbar.vue

@@ -18,7 +18,7 @@ const handleLogout = async () => {
     <UContainer>
       <div class="flex justify-between items-center">
         <NuxtLink to="/" class="flex-1">
-          <img src="/img/incidir-para-existir-logo.png" alt="Incidir para existir" class="h-12 w-auto mx-auto md:mr-auto" >
+          <img src="/img/incidir-para-existir-logo.png" alt="Incidir para existir" class="h-12 w-auto ml-auto mr-auto md:ml-0 md:mr-auto" >
         </NuxtLink>
         <div class="hidden md:flex items-center space-x-5 font-oswald uppercase">
           <NuxtLink to="/" class="navbar-item">Inicio</NuxtLink>

components/desafios/Stats.vue

@@ -0,0 +1,47 @@
+<script setup>
+const { $api } = useNuxtApp()
+
+const isLoading = ref(false)
+
+onMounted(async () => {
+  getInitData()
+})
+
+const dimensions = ref([])
+const cities = ref([])
+const challengesStats = ref({})
+const dataFetchDone = ref(false)
+
+const getInitData = async () => {
+  isLoading.value = true
+  try {
+    const [dimensionsData, citiesData, theStatsData] = await Promise.all([
+      $api('/utils/dimensions'),
+      $api('/utils/cities'),
+      $api('/challenges/stats')
+    ])
+    dimensions.value = dimensionsData
+    cities.value = citiesData
+    challengesStats.value = theStatsData
+    dataFetchDone.value = true
+  } catch (error) {
+    console.error(error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+</script>
+
+<template>
+  <div>
+    <UCard v-if="isLoading">
+      <UProgress />
+    </UCard>
+    <div v-else>
+      <div class="grid grid-cols-1 gap-1">
+        <DesafiosChartsDimensions v-if="challengesStats.radarData" :graph-data="challengesStats.radarData"/>
+      </div>
+    </div>
+  </div>
+</template>

components/desafios/charts/Dimensions.vue

@@ -0,0 +1,54 @@
+
+<script setup>
+provide(THEME_KEY, 'dark');
+const props = defineProps({
+  graphData: {
+    type: Object,
+    required: true
+  }
+});
+
+console.log(props.graphData);
+
+const option = ref({
+  backgroundColor: 'transparent',
+  title: {
+    text: 'Cantidad de desafíos por dimensiones',
+    subtext: 'Cada serie representa una ciudad',
+    top: 0,
+    left: 0
+  },
+  legend: {
+    data: props.graphData.legendData,
+    right: 0,
+    bottom: 0
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  radar: {
+    // shape: 'circle',
+    indicator: props.graphData.radarIndicator
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      data: props.graphData.radar.data
+    }
+  ]
+});
+
+</script>
+
+<template>
+  <UCard>
+    <VChart class="chart" :option="option" />
+  </UCard>
+</template>
+
+<style scoped>
+.chart {
+  height: 500px;
+}
+</style>

nuxt.config.ts

@@ -14,7 +14,7 @@ export default defineNuxtConfig({
   },
   echarts: {
     renderer: ['svg', 'canvas'],
-    charts: ['PieChart'],
+    charts: ['PieChart', 'RadarChart'],
     components: ['TitleComponent','TooltipComponent','LegendComponent']
   },
   runtimeConfig: {

pages/desafios.vue

@@ -44,6 +44,11 @@ const showDesafiosForm = ref(false)
     <div class="my-10 w-full md:w-2/3 mx-auto" v-if="showDesafiosForm">
       <DesafiosForm />
     </div>
+  <UDivider size="md" class="my-5" />
+    <p class="font-oswald text-4xl text-center uppercase leading-tight text-mindaro mb-5">Estadisticas</p>
+    <ClientOnly>
+      <DesafiosStats />
+    </ClientOnly>
   </UContainer> 
 </template>