From 0ed101c1b3008a0b9e2e2552de59d0d2bf2ba2e1 Mon Sep 17 00:00:00 2001
From: Guillermo Croppi <guillermocroppi@gmail.com>
Date: Fri, 20 Dec 2024 15:10:11 -0300
Subject: [PATCH] Added stats to challenges

---
 components/TheNavbar.vue                  |  2 +-
 components/desafios/Stats.vue             | 47 ++++++++++++++++++++
 components/desafios/charts/Dimensions.vue | 54 +++++++++++++++++++++++
 nuxt.config.ts                            |  2 +-
 pages/desafios.vue                        |  5 +++
 5 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 components/desafios/Stats.vue
 create mode 100644 components/desafios/charts/Dimensions.vue

diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index b366952..3f6d7a3 100644
--- a/components/TheNavbar.vue
+++ b/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>
diff --git a/components/desafios/Stats.vue b/components/desafios/Stats.vue
new file mode 100644
index 0000000..64a2505
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/desafios/charts/Dimensions.vue b/components/desafios/charts/Dimensions.vue
new file mode 100644
index 0000000..d7e81d9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8b46605..b346299 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
   },
   echarts: {
     renderer: ['svg', 'canvas'],
-    charts: ['PieChart'],
+    charts: ['PieChart', 'RadarChart'],
     components: ['TitleComponent','TooltipComponent','LegendComponent']
   },
   runtimeConfig: {
diff --git a/pages/desafios.vue b/pages/desafios.vue
index ab58d81..83a9928 100644
--- a/pages/desafios.vue
+++ b/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>