⚡️ Mostrar gráficas colombinas y avanzar cerebro

aplicaciones/www/src/components/LineaTiempo.vue

@@ -38,10 +38,6 @@ onMounted(async () => {
     console.error('Problema descargando datos de listas de publicaciones', error);
   }
 });
-
-// "`${convertirEscala(a.año, 1987, 2024, 0, 100)}%`"
-// :y="`${convertirEscala(+a.conteo, 0, 50, 0, 100)}%`"
-//"`${convertirEscala(+a.conteo, 0, 50, 0, 70)}`"
 </script>
 
 <template>
@@ -58,7 +54,7 @@ onMounted(async () => {
             stroke="white"
             stroke-width="1px"
           />
-          <text class="fecha" :x="`${convertirEscala(+a.nombre, 1987, 2024, 0, 90)}%`" :y="160">
+          <text class="fecha" :x="`${convertirEscala(+a.nombre, 1987, 2024, 0, 90)}%`" :y="120">
             {{ a.nombre }}: {{ a.conteo }}
           </text>
         </g>
@@ -78,7 +74,7 @@ onMounted(async () => {
 
 #contenedorGrafica {
   position: relative;
-  height: 200px;
+  height: 150px;
   background-color: rgb(255, 255, 255);
   z-index: 3;
   width: 100vw;

aplicaciones/www/src/components/ListaNodos.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import type { ElementoLista, LlavesColectivos, LlavesPA } from '@/tipos/compartidos';
-import { nombresListas } from '@/utilidades/cerebro';
+import { nombresListas, usarCerebro } from '@/utilidades/cerebro';
 
 interface Esquema {
   id: LlavesPA | LlavesColectivos;
   lista: ElementoLista[];
 }
 
 defineProps<Esquema>();
+
+const cerebro = usarCerebro();
 </script>
 
 <template>
   <section :id="id" class="lista">
-    <h2 class="titulo">{{ nombresListas[id] }}</h2>
+    <h2 class="titulo" @click="cerebro.cambiarLista(id)">{{ nombresListas[id] }}</h2>
 
     <ul class="contenedorElementos" :class="id">
       <li

aplicaciones/www/src/components/VistaGraficas.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onMounted, ref, watch, type Ref } from 'vue';
+import { convertirEscala } from '@enflujo/alquimia';
+import type { ElementoLista, Listas } from '../../../../tipos/compartidos';
+import { usarCerebro } from '@/utilidades/cerebro';
+import { storeToRefs } from 'pinia';
+
+defineProps<{
+  id: keyof Listas;
+  lista: ElementoLista[];
+}>();
+
+let listas: { [llave: string]: ElementoLista[] } = {};
+const cerebro = usarCerebro();
+const { listaElegida } = storeToRefs(cerebro);
+
+let listaActual = 'años';
+const listaVisible: Ref<ElementoLista[]> = ref([]);
+let valorMaximo: number = 22; //Math.max(...listaVisible.value.map((o) => o.conteo));
+
+watch(listaElegida, (llaveLista) => {
+  if (!llaveLista || llaveLista === listaActual) return;
+  listaActual = llaveLista;
+
+  // Cambiar lista elegida al hacer click en una lista del menú
+  listaVisible.value = listas[llaveLista];
+
+  // ordenar de mayor a menor cantidad
+  listaVisible.value.sort((a, b) => b.conteo - a.conteo);
+  valorMaximo = Math.max(...listaVisible.value.map((o) => o.conteo));
+});
+
+onMounted(async () => {
+  try {
+    const datosListas = await fetch('datos/listas.json').then((res) => res.json());
+    if (datosListas) {
+      // Lista que se muestra al cargar el componente
+      listaVisible.value = datosListas.años;
+      // ordenar de mayor a menor cantidad
+      listaVisible.value.sort((a, b) => b.conteo - a.conteo);
+      listas = datosListas;
+    }
+  } catch (error) {
+    console.error('Problema descargando datos de listas de publicaciones', error);
+  }
+});
+</script>
+
+<template>
+  <div id="contenedorVistaGraficas">
+    <h2>{{ listaActual }}</h2>
+    <div id="contenedorGrafica" width="100%" height="100%">
+      <div class="contenedorElementos" v-for="(elem, i) in listaVisible">
+        <p class="leyenda" :style="`top:${convertirEscala(i, 0, listaVisible.length, 0, 70)}%`">
+          {{ elem.nombre }}
+        </p>
+        <div
+          class="linea"
+          :style="`width:${convertirEscala(+elem.conteo, 0, valorMaximo + 10, 0, 65)}%; top: ${convertirEscala(i, 0, listaVisible.length, 0, 70)}%`"
+        ></div>
+        <div class="colombino"></div>
+        <p class="leyenda conteo">
+          {{ elem.conteo }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '@/scss/constantes';
+
+#contenedorVistaGraficas {
+  max-height: 48vh;
+  width: 80vw;
+  left: 20vw;
+  position: fixed;
+  padding: 0 1em;
+  overflow: auto;
+}
+
+#contenedorGrafica {
+  background-color: rgb(255, 255, 255);
+  z-index: 3;
+  width: 100%;
+  overflow-y: clip;
+  overflow-x: auto;
+
+  .contenedorElementos {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 0.5em;
+  }
+}
+
+.leyenda {
+  margin: 0 1em 0 0;
+  //text-transform: capitalize;
+  font-size: 0.7em;
+  width: 5vw;
+}
+
+.linea {
+  height: 1px;
+  background-color: var(--azulOscuroCuenco);
+}
+
+.colombino {
+  background-color: var(--azulOscuroCuenco);
+  height: 7px;
+  width: 7px;
+  border-radius: 50%;
+}
+
+.conteo {
+  color: var(--azulOscuroCuenco);
+  margin-left: 0.5em;
+}
+
+svg {
+  position: absolute;
+
+  path {
+    fill: black;
+    stroke: black;
+  }
+
+  line {
+    stroke: var(--azulOscuroCuenco);
+    transform: translate(140px, -3px);
+  }
+
+  circle {
+    fill: var(--azulOscuroCuenco);
+    transform: translate(140px, -3px);
+  }
+
+  text {
+    text-transform: lowercase;
+    font-size: 0.6em;
+    fill: var(--magentaCuenco);
+  }
+
+  .cantidad {
+    transform: translate(143px, 0px);
+  }
+}
+</style>

aplicaciones/www/src/scss/estilos.scss

@@ -124,7 +124,7 @@ nav a:first-of-type {
 
 #contenedorListas {
   position: absolute;
-  width: 26vw;
+  width: 20vw;
   max-height: 70vh;
   overflow-y: auto;
   padding: 0 3em;

aplicaciones/www/src/tipos.ts

@@ -1,4 +1,5 @@
 export interface Cerebro {
   publicacionElegida: number | null;
   colectivoElegido: number | null;
+  listaElegida: string | null;
 }

aplicaciones/www/src/utilidades/cerebro.ts

@@ -20,8 +20,13 @@ export const usarCerebro = defineStore('cerebro', {
     return {
       publicacionElegida: null,
       colectivoElegido: null,
+      listaElegida: null,
     };
   },
 
-  actions: {},
+  actions: {
+    cambiarLista(llaveLista: string) {
+      this.listaElegida = llaveLista;
+    },
+  },
 });

aplicaciones/www/src/views/VistaPublicaciones.vue

@@ -3,15 +3,17 @@ import ComponenteMapa from '@/components/ComponenteMapa.vue';
 import LineaTiempo from '../components/LineaTiempo.vue';
 import ListasPublicaciones from '../components/ListasPublicaciones.vue';
 import FichaProduccionAcademica from '@/components/FichaProduccionAcademica.vue';
+import VistaGraficas from '@/components/VistaGraficas.vue';
 </script>
 
 <template>
   <div>
     <h1>Producción Académica</h1>
     <ListasPublicaciones />
-    <ComponenteMapa />
+    <!--  <ComponenteMapa /> -->
+    <VistaGraficas />
     <LineaTiempo />
-    <FichaProduccionAcademica />
+    <!--  <FichaProduccionAcademica /> -->
   </div>
 </template>