19 KiB
19 KiB
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
// 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
// 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
// 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