kvilches1410
113 lines
4.0 KiB
Markdown
113 lines
4.0 KiB
Markdown
# 📊 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 |
|
|
|
|
---
|
|
|
|
## 📁 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.
|
|
|
|
---
|