# 📊 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)](https://www.chartjs.org/)
- **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:
```bash
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:
```bash
npm install -g vercel
```

### 3. Configurar Variables de Entorno
Copiá el archivo de entorno de ejemplo como `.env` en la raíz del proyecto.
```bash
cp ex.env .env
```
Luego, editá el `.env` e ingresá tus credenciales de Jira:
```env
# 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á:
```bash
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

```text
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](https://vercel.com/). 

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.