📊 Dashboard LABS — JIRA Story Points

Un dashboard en tiempo real para visualizar métricas, progreso de Story Points (SP), y la velocidad del equipo utilizando datos extraídos directamente de la API de Jira.

Este proyecto está diseñado con un frontend ligero sin frameworks pesados y un backend Serverless preparado para ser desplegado en plataformas como Vercel o funcionar de manera local.

---

🏗️ Stack Tecnológico

• Frontend: HTML5 + Vanilla TypeScript/JavaScript + Chart.js (v4.4.1)
• Backend: Node.js Serverless Function
• API: Integración directa con Jira REST API v3
• Autenticación: Basic Auth mediante Email y API Token de Jira
• Caching: Caché en memoria (24hs) + CDN-level Cache con "stale-while-revalidate"

✨ Características Principales

1. Estado Actual del Equipo:

   • Visualización de KPIS clave: SP en Progreso, SP por Hacer, SP Completados y Desarrolladores Activos.
   • Gráficos detallados del progreso por desarrollador.
   • Tabla que resume el porcentaje de carga de trabajo de cada uno.

2. Histórico por Período:

   • Resumen mensual de los Story Points completados.
   • Velocidad histórica del equipo a lo largo del tiempo.
   • Gráfico de top Épicas y distribución de SP.

3. Performance Optimizado:

   • Consulta eficiente con parámetros JQL directos.
   • Sistema de caché dual (Node memory + Vercel Edge) para evitar excesos de Rate Limiting en Jira y cargar instantáneamente.

---

🚀 Instalación y Configuración Local

1. Clonar el repositorio

Cloná este repositorio y accedé a la carpeta del proyecto:

git clone https://github.com/kvilches1410/dashlabs.git
cd dashlabs

2. Instalar el CLI de Vercel

Para correr las funciones serverless del backend (api/data.js de Vercel) localmente, necesitas instalar Vercel CLI de forma global:

npm install -g vercel

3. Configurar Variables de Entorno

Copiá el archivo de entorno de ejemplo como .env en la raíz del proyecto.

cp ex.env .env

Luego, editá el .env e ingresá tus credenciales de Jira:

# Ejemplo de .env
JIRA_EMAIL=tu-email@tudominio.com
JIRA_TOKEN=tu-jira-api-token

Nota: Podés generar un API Token de Jira en tu la configuración de seguridad de tu cuenta de Atlassian.

4. Entorno de Desarrollo

Para levantar el proyecto y la API simulando el entorno de Vercel, ejecutá:

vercel dev

Luego, abrí http://localhost:3000 en tu navegador.

---

🔧 Configuración del Modelo de Datos de JIRA

Los campos personalizados (Custom Fields) varían según cada entorno de Jira. Actualmente, el mapeo de campos está de la siguiente manera:

Campo / Tipo	Código (Custom Field)	Descripción
Story Points Estimate	customfield_10016	La estimación de SP original del ticket
Story Points Finales	customfield_11217	SP finales acordados (Suele tener prioridad)
Desarrollador	customfield_10628	Campo Multi-usuario para asignación de tareas

⚠️ Importante: Verificá en tu instancia de Jira (https://<tu-instancia>.atlassian.net/rest/api/3/fields) que los IDs de estos campos correspondan a los utilizados en la API del dashboard. Si implementaste la nueva arquitectura, vas a pordelo modificar directamente en api/config.js.

---

📁 Estructura del Proyecto

dashlabs/
├── index.html        # Frontend central. Contiene todo el layout, CSS y JS con Chart.js
├── package.json      # Dependencias y scripts
├── vercel.json       # Configuración para despliegue en Vercel
├── .gitignore        
├── ex.env            # Variables de entorno de ejemplo (TEMPLATE)
└── api/
    ├── config.js     # [Opcional] Configuración modular para el Request de JIRA
    └── data.js       # Vercel Serverless Function: Maneja el fetch, transformación de datos y caché

---

🌐 Despliegue en Producción (Vercel)

El proyecto está diseñado para funcionar nativamente dentro de Vercel.

1. Conectá el repositorio en el panel de Vercel.
2. Agregá en Vercel Environment Variables:
   • JIRA_EMAIL
   • JIRA_TOKEN
3. Dale a Deploy.

La carpeta /api será parseada de manera automática y transformada en endpoints /api/data para que el index.html los consuma.

---

🤝 Contribuciones y Futuras Mejoras

Algunos puntos clave (propuestos) a iterar en las siguientes versiones:

• Paginación o control de loop dinámico para extraer más allá de MAX_RESULTS sin quemar límites.
• Implementar Zustand o algún state-manager si el frontend de "Vanilla JS" crece en complejidad.
• Posibilidad de tener filtros aplicados mediante Query Params o selectores en la UI antes de ejecutar cálculos.