438 lines
19 KiB
Markdown
438 lines
19 KiB
Markdown
# US-BI-003: Dashboards Personalizables con Widgets
|
|
|
|
**Epica:** MAI-006 - Reportes y Business Intelligence
|
|
**Sprint:** 20
|
|
**Story Points:** 8
|
|
**Prioridad:** Media-Alta
|
|
**Asignado a:** Backend + Frontend
|
|
|
|
---
|
|
|
|
## Historia de Usuario
|
|
|
|
**Como** Gerente de Operaciones
|
|
**Quiero** crear dashboards personalizados con widgets arrastrables (drag & drop)
|
|
**Para** visualizar solo las metricas mas relevantes para mi rol y necesidades especificas
|
|
|
|
---
|
|
|
|
## Criterios de Aceptacion
|
|
|
|
### 1. Crear Nuevo Dashboard Personalizado
|
|
- [ ] Puedo acceder a "Mis Dashboards" desde el menu principal
|
|
- [ ] Puedo crear un nuevo dashboard con:
|
|
- Nombre descriptivo (max 50 caracteres)
|
|
- Descripcion opcional
|
|
- Visibilidad: Privado / Compartido con equipo / Publico
|
|
- Layout: 1 columna, 2 columnas, o 3 columnas
|
|
- [ ] El dashboard se guarda y aparece en mi lista de dashboards
|
|
- [ ] Puedo crear hasta 10 dashboards personalizados
|
|
|
|
### 2. Catalogo de Widgets Disponibles
|
|
- [ ] Veo un catalogo con widgets disponibles organizados por categoria:
|
|
- **KPIs:** Metricas numericas individuales
|
|
- **Graficas:** Lineas, barras, pastel, dona
|
|
- **Tablas:** Tablas de datos con paginacion
|
|
- **Mapas:** Mapas geograficos
|
|
- **Alertas:** Panel de notificaciones
|
|
- **Texto:** Notas y descripciones
|
|
- [ ] Cada widget muestra:
|
|
- Icono representativo
|
|
- Nombre del widget
|
|
- Descripcion breve
|
|
- Preview miniatura
|
|
- [ ] Puedo buscar widgets por nombre o categoria
|
|
|
|
### 3. Agregar Widgets al Dashboard (Drag & Drop)
|
|
- [ ] Puedo arrastrar un widget del catalogo al area del dashboard
|
|
- [ ] Al soltar el widget, se abre configuracion:
|
|
- Titulo del widget
|
|
- Fuente de datos (proyecto, periodo, filtros)
|
|
- Parametros especificos del widget
|
|
- Tamano (pequeno, mediano, grande)
|
|
- [ ] El widget se renderiza inmediatamente con datos reales
|
|
- [ ] Puedo agregar hasta 12 widgets por dashboard
|
|
|
|
### 4. Reorganizar Widgets (Drag & Drop)
|
|
- [ ] Puedo arrastrar widgets dentro del dashboard para reordenar
|
|
- [ ] Los widgets se ajustan automaticamente al soltar
|
|
- [ ] El layout se guarda automaticamente al hacer cambios
|
|
- [ ] Veo indicador visual de donde quedara el widget al mover
|
|
- [ ] El orden se mantiene entre sesiones
|
|
|
|
### 5. Redimensionar Widgets
|
|
- [ ] Puedo cambiar el tamano de cada widget:
|
|
- Pequeno: 1x1 (para KPIs)
|
|
- Mediano: 2x1 (para graficas pequenas)
|
|
- Grande: 2x2 (para graficas complejas)
|
|
- Extra Grande: 3x2 (para tablas)
|
|
- [ ] Los widgets se redimensionan con esquinas arrastrables
|
|
- [ ] Los demas widgets se ajustan automaticamente
|
|
- [ ] El tamano se guarda con el dashboard
|
|
|
|
### 6. Configurar Widgets Individualmente
|
|
- [ ] Puedo editar configuracion de cualquier widget haciendo clic en icono de engrane
|
|
- [ ] Opciones de configuracion comunes:
|
|
- Titulo personalizado
|
|
- Periodo de datos (hoy, semana, mes, trimestre, ano)
|
|
- Filtros (proyecto, region, tipo)
|
|
- Formato de numeros (moneda, porcentaje, entero)
|
|
- Colores del tema
|
|
- Mostrar/ocultar leyenda
|
|
- [ ] Los cambios se aplican en tiempo real
|
|
- [ ] Puedo duplicar un widget configurado
|
|
|
|
### 7. Widgets Especificos Disponibles
|
|
- [ ] **KPI Widget:** Muestra metrica unica con tendencia
|
|
- [ ] **Grafica de Avance:** Curva S de proyecto seleccionado
|
|
- [ ] **Top 5 Proyectos:** Ranking por criterio seleccionado
|
|
- [ ] **Semaforo de Salud:** Estado de multiples proyectos
|
|
- [ ] **Presupuesto vs Real:** Comparacion financiera
|
|
- [ ] **Distribucion de Costos:** Grafica de pastel
|
|
- [ ] **Calendario de Hitos:** Proximos eventos importantes
|
|
- [ ] **Mapa de Proyectos:** Ubicacion geografica con estado
|
|
- [ ] **Tabla de Pendientes:** Actividades por vencer
|
|
- [ ] **Alerta de Sobrecostos:** Proyectos con desviacion
|
|
- [ ] **Comparacion de Margenes:** Multi-proyecto
|
|
- [ ] **Timeline de Obra:** Diagrama Gantt compacto
|
|
|
|
### 8. Compartir y Duplicar Dashboards
|
|
- [ ] Puedo compartir un dashboard con:
|
|
- Usuarios especificos (por email o rol)
|
|
- Todo mi equipo
|
|
- Toda la organizacion
|
|
- [ ] Los usuarios con acceso pueden:
|
|
- Ver el dashboard (solo lectura)
|
|
- Duplicar para crear su propia version
|
|
- Recibir notificaciones de cambios
|
|
- [ ] Puedo revocar acceso en cualquier momento
|
|
- [ ] Puedo clonar un dashboard publico para personalizarlo
|
|
|
|
### 9. Vistas Predefinidas (Templates)
|
|
- [ ] El sistema incluye templates predefinidos:
|
|
- **Dashboard Ejecutivo:** KPIs corporativos
|
|
- **Dashboard de Proyecto:** Metricas de obra
|
|
- **Dashboard Financiero:** Analisis de costos y margenes
|
|
- **Dashboard de Operaciones:** Avances y productividad
|
|
- [ ] Puedo usar un template como punto de partida
|
|
- [ ] Puedo guardar mi dashboard como template para otros
|
|
|
|
### 10. Actualizacion y Refresh de Datos
|
|
- [ ] Los widgets se actualizan automaticamente cada 5 minutos
|
|
- [ ] Puedo forzar actualizacion manual con boton "Refresh"
|
|
- [ ] Veo timestamp de ultima actualizacion en cada widget
|
|
- [ ] Puedo configurar frecuencia de auto-refresh por dashboard
|
|
|
|
---
|
|
|
|
## Mockup / Wireframe
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ 📊 Mis Dashboards [+ Nuevo Dashboard] │
|
|
├─────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌─ Dashboard: Mi Vista Ejecutiva ────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ [✏️ Editar] [🔄 Refresh] [⚙️ Configurar] [👥 Compartir] [⋮ Mas] │ │
|
|
│ │ │ │
|
|
│ │ Modo Edicion: [ON] | Layout: [2 Columnas ▼] | [+ Agregar Widget] │ │
|
|
│ │ │ │
|
|
│ │ ┌─────────────────────────────┬─────────────────────────────┐ │ │
|
|
│ │ │ │ │ │ │
|
|
│ │ │ 💰 Margen Promedio │ 📈 Avance General │ │ │
|
|
│ │ │ │ │ │ │
|
|
│ │ │ 18.3% │ 67.5% │ │ │
|
|
│ │ │ ↗ +1.2% │ ↗ +3.2% │ │ │
|
|
│ │ │ │ │ │ │
|
|
│ │ │ [⚙️] [⋮] │ [⚙️] [⋮] │ │ │
|
|
│ │ └─────────────────────────────┴─────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ ┌───────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ │ │ │
|
|
│ │ │ 📊 Evolucion de Costos - Ultimos 6 meses │ │ │
|
|
│ │ │ │ │ │
|
|
│ │ │ $M │ │ │
|
|
│ │ │ 60│ ╱─ │ │ │
|
|
│ │ │ 50│ ╱────╯ │ │ │
|
|
│ │ │ 40│ ╱────╯ │ │ │
|
|
│ │ │ 30│ ╱────╯ │ │ │
|
|
│ │ │ 20│ ╱────╯ │ │ │
|
|
│ │ │ 10│ ╱────╯ │ │ │
|
|
│ │ │ 0└────────────────────────────────────────── │ │ │
|
|
│ │ │ M J J A S O N │ │ │
|
|
│ │ │ │ │ │
|
|
│ │ │ [⚙️] [⋮] │ │ │
|
|
│ │ └───────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ ┌─────────────────────────────┬─────────────────────────────┐ │ │
|
|
│ │ │ │ │ │ │
|
|
│ │ │ 🚨 Alertas Criticas │ 🏆 Top 3 Proyectos │ │ │
|
|
│ │ │ │ │ │ │
|
|
│ │ │ 🔴 Vertical Ref: -8.2% │ 1. El Bosque 🟢 89% │ │ │
|
|
│ │ │ 🟡 Conjunto Nte: +8d │ 2. Los Pinos 🟢 78% │ │ │
|
|
│ │ │ 🔴 Alameda: Sin reporte │ 3. Resid. Sur 🟢 62% │ │ │
|
|
│ │ │ │ │ │ │
|
|
│ │ │ [⚙️] [⋮] │ [⚙️] [⋮] │ │ │
|
|
│ │ └─────────────────────────────┴─────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ Ultima actualizacion: 18/11/2025 14:32 │ │
|
|
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─ Catalogo de Widgets ───────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ Buscar: [____________] Categoria: [Todas ▼] │ │
|
|
│ │ │ │
|
|
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
|
|
│ │ │ 💰 KPI │ │ 📊 Graf. │ │ 📍 Mapa │ │ 📋 Tabla │ │ 🚨 Alert │ │ │
|
|
│ │ │ Numerico │ │ Barras │ │ Proyect. │ │ Datos │ │ Critica │ │ │
|
|
│ │ │ │ │ │ │ │ │ │ │ │ │ │
|
|
│ │ │ [+ Add] │ │ [+ Add] │ │ [+ Add] │ │ [+ Add] │ │ [+ Add] │ │ │
|
|
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
|
|
│ │ │ │
|
|
│ │ [Ver mas widgets...] │ │
|
|
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [💾 Guardar Dashboard] [❌ Cancelar] │
|
|
└─────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Flujo de Trabajo
|
|
|
|
```
|
|
1. CREAR DASHBOARD PERSONALIZADO
|
|
↓
|
|
Usuario → Mis Dashboards → [+ Nuevo Dashboard]
|
|
↓
|
|
Formulario:
|
|
- Nombre: "Mi Vista Ejecutiva"
|
|
- Descripcion: "Dashboard para monitoreo diario"
|
|
- Layout: 2 columnas
|
|
- Visibilidad: Privado
|
|
↓
|
|
[Crear] → Dashboard vacio en modo edicion
|
|
|
|
2. AGREGAR WIDGETS
|
|
↓
|
|
Usuario ve catalogo de widgets
|
|
↓
|
|
Arrastra "KPI - Margen Promedio" al dashboard
|
|
↓
|
|
Modal de configuracion:
|
|
- Titulo: "Margen Promedio"
|
|
- Periodo: "Mes actual"
|
|
- Proyectos: "Todos los activos"
|
|
- Formato: "Porcentaje con 1 decimal"
|
|
↓
|
|
[Guardar] → Widget se renderiza con datos
|
|
|
|
3. CONFIGURAR WIDGET
|
|
↓
|
|
Usuario hace clic en icono de engrane del widget
|
|
↓
|
|
Panel de configuracion se abre
|
|
↓
|
|
Usuario cambia:
|
|
- Periodo: "Ultimos 3 meses"
|
|
- Mostrar tendencia: SI
|
|
↓
|
|
Widget se actualiza en tiempo real
|
|
|
|
4. REORGANIZAR LAYOUT
|
|
↓
|
|
Usuario arrastra widget "Evolucion Costos" a la parte superior
|
|
↓
|
|
Otros widgets se reajustan automaticamente
|
|
↓
|
|
Usuario suelta el mouse
|
|
↓
|
|
Layout se guarda automaticamente
|
|
|
|
5. REDIMENSIONAR WIDGET
|
|
↓
|
|
Usuario arrastra esquina inferior derecha de "Tabla de Proyectos"
|
|
↓
|
|
Widget se expande a tamano "Extra Grande"
|
|
↓
|
|
Widgets debajo se ajustan
|
|
↓
|
|
Tamano se guarda
|
|
|
|
6. COMPARTIR DASHBOARD
|
|
↓
|
|
Usuario hace clic en [👥 Compartir]
|
|
↓
|
|
Modal:
|
|
- Compartir con: [Equipo de Operaciones ▼]
|
|
- Permisos: [Solo lectura ▼]
|
|
- Notificar: [✓]
|
|
↓
|
|
[Compartir] → Email enviado a equipo
|
|
|
|
7. USAR TEMPLATE
|
|
↓
|
|
Usuario → [+ Nuevo Dashboard] → [Desde Template]
|
|
↓
|
|
Lista de templates:
|
|
- Dashboard Ejecutivo
|
|
- Dashboard de Proyecto
|
|
- Dashboard Financiero
|
|
↓
|
|
Usuario selecciona "Dashboard Ejecutivo"
|
|
↓
|
|
Dashboard se crea pre-configurado con widgets
|
|
↓
|
|
Usuario personaliza segun necesidad
|
|
```
|
|
|
|
---
|
|
|
|
## Notas Tecnicas
|
|
|
|
### Arquitectura de Widgets
|
|
|
|
```typescript
|
|
// Interface base para widgets
|
|
interface Widget {
|
|
id: string;
|
|
type: WidgetType;
|
|
title: string;
|
|
size: 'small' | 'medium' | 'large' | 'xlarge';
|
|
position: { x: number; y: number };
|
|
config: WidgetConfig;
|
|
dataSource: DataSource;
|
|
}
|
|
|
|
// Tipos de widgets disponibles
|
|
enum WidgetType {
|
|
KPI = 'kpi',
|
|
LineChart = 'line-chart',
|
|
BarChart = 'bar-chart',
|
|
PieChart = 'pie-chart',
|
|
Table = 'table',
|
|
Map = 'map',
|
|
Alert = 'alert',
|
|
Text = 'text',
|
|
Calendar = 'calendar'
|
|
}
|
|
|
|
// Configuracion de widget KPI
|
|
interface KPIWidgetConfig {
|
|
metric: string; // 'margin', 'progress', 'cost'
|
|
period: string; // 'today', 'week', 'month', 'quarter'
|
|
projects: string[]; // Array de IDs de proyectos
|
|
format: 'currency' | 'percentage' | 'number';
|
|
showTrend: boolean;
|
|
trendPeriod: string; // 'day', 'week', 'month'
|
|
threshold?: {
|
|
warning: number;
|
|
critical: number;
|
|
};
|
|
}
|
|
|
|
// Dashboard personalizado
|
|
interface CustomDashboard {
|
|
id: string;
|
|
userId: string;
|
|
name: string;
|
|
description: string;
|
|
layout: '1col' | '2col' | '3col';
|
|
visibility: 'private' | 'team' | 'public';
|
|
widgets: Widget[];
|
|
sharedWith: string[]; // Array de user IDs
|
|
isTemplate: boolean;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
}
|
|
```
|
|
|
|
### Endpoints Necesarios
|
|
|
|
```typescript
|
|
// Dashboards
|
|
POST /api/dashboards // Crear dashboard
|
|
GET /api/dashboards // Listar mis dashboards
|
|
GET /api/dashboards/:id // Obtener dashboard
|
|
PUT /api/dashboards/:id // Actualizar dashboard
|
|
DELETE /api/dashboards/:id // Eliminar dashboard
|
|
POST /api/dashboards/:id/share // Compartir dashboard
|
|
POST /api/dashboards/:id/clone // Clonar dashboard
|
|
|
|
// Widgets
|
|
POST /api/dashboards/:id/widgets // Agregar widget
|
|
PUT /api/dashboards/:id/widgets/:widgetId // Actualizar widget
|
|
DELETE /api/dashboards/:id/widgets/:widgetId // Eliminar widget
|
|
PUT /api/dashboards/:id/widgets/reorder // Reordenar widgets
|
|
|
|
// Templates
|
|
GET /api/dashboard-templates // Listar templates
|
|
POST /api/dashboards/from-template/:id // Crear desde template
|
|
|
|
// Data para widgets
|
|
POST /api/widgets/data // Obtener datos del widget
|
|
```
|
|
|
|
### Grid System para Drag & Drop
|
|
|
|
```typescript
|
|
// Sistema de grid responsivo
|
|
const GRID_SYSTEM = {
|
|
columns: {
|
|
'1col': 1,
|
|
'2col': 2,
|
|
'3col': 3
|
|
},
|
|
sizes: {
|
|
small: { w: 1, h: 1 }, // 1x1
|
|
medium: { w: 2, h: 1 }, // 2x1
|
|
large: { w: 2, h: 2 }, // 2x2
|
|
xlarge: { w: 3, h: 2 } // 3x2
|
|
},
|
|
gap: 16, // pixels entre widgets
|
|
breakpoints: {
|
|
mobile: 640,
|
|
tablet: 1024,
|
|
desktop: 1280
|
|
}
|
|
};
|
|
|
|
// Libreria recomendada: react-grid-layout
|
|
import GridLayout from 'react-grid-layout';
|
|
|
|
const layout = widgets.map(w => ({
|
|
i: w.id,
|
|
x: w.position.x,
|
|
y: w.position.y,
|
|
w: GRID_SYSTEM.sizes[w.size].w,
|
|
h: GRID_SYSTEM.sizes[w.size].h
|
|
}));
|
|
```
|
|
|
|
---
|
|
|
|
## Definicion de "Done"
|
|
|
|
- [ ] CRUD completo de dashboards personalizados
|
|
- [ ] Catalogo de 12 widgets minimo implementados
|
|
- [ ] Funcionalidad drag & drop para agregar widgets
|
|
- [ ] Funcionalidad drag & drop para reorganizar
|
|
- [ ] Redimensionamiento de widgets funcional
|
|
- [ ] Configuracion individual de cada widget
|
|
- [ ] Sistema de compartir con permisos
|
|
- [ ] 4 templates predefinidos disponibles
|
|
- [ ] Auto-refresh cada 5 minutos
|
|
- [ ] Guardado automatico de cambios
|
|
- [ ] Responsive design para tablets
|
|
- [ ] Tests de integracion de widgets
|
|
- [ ] Documentacion de API de widgets
|
|
- [ ] Performance: dashboard con 12 widgets carga en <2s
|
|
- [ ] Validado con Gerentes de Operaciones
|
|
|
|
---
|
|
|
|
**Estimacion:** 8 Story Points
|
|
**Dependencias:** Requiere todos los modulos anteriores para fuentes de datos
|
|
**Fecha:** 2025-11-18
|