467 lines
20 KiB
Markdown
467 lines
20 KiB
Markdown
# US-BI-004: Navegacion Drill-Down y Filtros Dinamicos
|
|
|
|
**Epica:** MAI-006 - Reportes y Business Intelligence
|
|
**Sprint:** 20
|
|
**Story Points:** 5
|
|
**Prioridad:** Media
|
|
**Asignado a:** Backend + Frontend
|
|
|
|
---
|
|
|
|
## Historia de Usuario
|
|
|
|
**Como** Analista de BI
|
|
**Quiero** navegar desde vistas consolidadas hasta el detalle granular con drill-down
|
|
**Para** explorar datos con diferentes niveles de profundidad y encontrar insights especificos
|
|
|
|
---
|
|
|
|
## Criterios de Aceptacion
|
|
|
|
### 1. Navegacion Drill-Down Multi-Nivel
|
|
- [ ] Puedo hacer clic en cualquier metrica agregada para ver su detalle
|
|
- [ ] La navegacion soporta hasta 5 niveles de profundidad:
|
|
- **Nivel 1:** Corporativo (todos los proyectos)
|
|
- **Nivel 2:** Por proyecto individual
|
|
- **Nivel 3:** Por partida o fase de obra
|
|
- **Nivel 4:** Por concepto especifico
|
|
- **Nivel 5:** Transacciones individuales
|
|
- [ ] Cada nivel muestra datos relevantes al contexto
|
|
- [ ] El cambio de nivel es instantaneo (<500ms)
|
|
|
|
### 2. Breadcrumbs de Navegacion
|
|
- [ ] Veo breadcrumbs mostrando mi ruta de navegacion actual:
|
|
```
|
|
Inicio > Proyectos > Los Pinos > Estructura > Cimentacion > Detalle
|
|
```
|
|
- [ ] Puedo hacer clic en cualquier nivel del breadcrumb para regresar
|
|
- [ ] Los filtros activos se mantienen al navegar por breadcrumbs
|
|
- [ ] El breadcrumb se actualiza automaticamente al cambiar de nivel
|
|
|
|
### 3. Filtros Globales Dinamicos
|
|
- [ ] Veo un panel de filtros siempre visible con opciones:
|
|
- **Periodo:** Fecha inicio y fin, o presets (Hoy, Semana, Mes, Trimestre, Ano, Custom)
|
|
- **Proyectos:** Multi-select de proyectos
|
|
- **Region:** Multi-select de regiones geograficas
|
|
- **Tipo de Obra:** Vertical, Horizontal, Remodelacion
|
|
- **Estado:** Activo, Pausado, Completado, Cancelado
|
|
- **Responsable:** Multi-select de directores/gerentes
|
|
- [ ] Los filtros se aplican en tiempo real sin necesidad de boton "Aplicar"
|
|
- [ ] Los filtros persisten entre vistas y niveles de drill-down
|
|
- [ ] Puedo guardar combinaciones de filtros como "Vistas guardadas"
|
|
|
|
### 4. Contador de Registros y Resumen
|
|
- [ ] Veo un contador mostrando cuantos registros cumplen los filtros actuales:
|
|
```
|
|
Mostrando 347 de 1,250 proyectos
|
|
```
|
|
- [ ] Veo un resumen de los valores agregados con filtros aplicados:
|
|
- Total presupuesto filtrado
|
|
- Promedio de avance
|
|
- Suma de desviaciones
|
|
- [ ] El resumen se actualiza en tiempo real al cambiar filtros
|
|
|
|
### 5. Filtros Contextuales por Columna
|
|
- [ ] Puedo hacer clic en encabezado de columna para filtrar:
|
|
- **Numericos:** Rangos, mayor/menor que, entre valores
|
|
- **Texto:** Contiene, empieza con, termina con
|
|
- **Fechas:** Antes/despues de, entre fechas, ultimos N dias
|
|
- **Categoricos:** Multi-select de opciones unicas
|
|
- [ ] Los filtros de columna se combinan con filtros globales (AND)
|
|
- [ ] Veo icono indicando que columna tiene filtro activo
|
|
- [ ] Puedo limpiar filtro de columna individual
|
|
|
|
### 6. Segmentacion Avanzada
|
|
- [ ] Puedo crear segmentos personalizados con condiciones multiples:
|
|
```
|
|
Segmento: "Proyectos en Riesgo"
|
|
- Desviacion costo > 10% AND
|
|
- Avance < 50% AND
|
|
- Dias restantes < 60
|
|
```
|
|
- [ ] Puedo guardar segmentos para reutilizar
|
|
- [ ] Puedo compartir segmentos con mi equipo
|
|
- [ ] Los segmentos guardados aparecen como filtros rapidos
|
|
|
|
### 7. Drill-Down desde Graficas
|
|
- [ ] Puedo hacer clic en barra de grafica de barras para ver detalle
|
|
- [ ] Puedo hacer clic en segmento de grafica de pastel para filtrar
|
|
- [ ] Puedo hacer clic en punto de grafica de lineas para ver ese periodo
|
|
- [ ] Al hacer drill-down, la grafica se actualiza al nuevo nivel
|
|
- [ ] Puedo volver al nivel anterior con boton "Volver"
|
|
|
|
### 8. Exportacion con Filtros Aplicados
|
|
- [ ] Puedo exportar datos con filtros activos aplicados
|
|
- [ ] El archivo exportado incluye nota de filtros usados
|
|
- [ ] Puedo exportar:
|
|
- Vista actual (datos visibles en pantalla)
|
|
- Todos los datos filtrados (incluyendo datos paginados)
|
|
- Nivel de detalle seleccionado
|
|
- [ ] El nombre del archivo incluye timestamp y descripcion de filtros
|
|
|
|
### 9. Historial de Navegacion
|
|
- [ ] Puedo ver mi historial de navegacion reciente (ultimas 10 vistas)
|
|
- [ ] Cada entrada muestra:
|
|
- Ruta de breadcrumbs
|
|
- Filtros aplicados
|
|
- Timestamp
|
|
- [ ] Puedo hacer clic en entrada del historial para regresar a esa vista exacta
|
|
- [ ] El historial se guarda en sesion del navegador
|
|
|
|
### 10. Performance con Grandes Volumenes
|
|
- [ ] El sistema maneja eficientemente hasta 100,000 registros
|
|
- [ ] Uso de paginacion virtual para tablas grandes
|
|
- [ ] Los filtros se aplican en backend (no filtrado en frontend)
|
|
- [ ] Indicador de carga mientras se aplican filtros complejos
|
|
- [ ] Cache de resultados de filtros frecuentes
|
|
|
|
---
|
|
|
|
## Mockup / Wireframe
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ 📊 Analisis de Proyectos 🔍 Busqueda │
|
|
├─────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌─ Breadcrumbs ────────────────────────────────────────────────────────────┐│
|
|
│ │ Inicio > Proyectos > Los Pinos > Estructura [⬅️ Volver]│
|
|
│ └──────────────────────────────────────────────────────────────────────────┘│
|
|
│ │
|
|
│ ┌─ Filtros Globales ───────────────────────────────────────────────────────┐│
|
|
│ │ ││
|
|
│ │ Periodo: [📅 01/01/2025] - [📅 31/12/2025] [Mes actual ▼] ││
|
|
│ │ ││
|
|
│ │ Proyectos: [Los Pinos] [Vertical Reforma] [+ 3 mas...] [Seleccionar ▼] ││
|
|
│ │ ││
|
|
│ │ Region: [Norte ✓] [Sur ✓] [Centro ✓] [Oeste ✓] ││
|
|
│ │ ││
|
|
│ │ Estado: [🟢 Activos ✓] [🟡 En Pausa] [✅ Completados] ││
|
|
│ │ ││
|
|
│ │ [💾 Guardar Vista] [🗑️ Limpiar Filtros] [⭐ Vistas Guardadas ▼] ││
|
|
│ └───────────────────────────────────────────────────────────────────────────┘│
|
|
│ │
|
|
│ ┌─ Resumen Filtrado ───────────────────────────────────────────────────────┐│
|
|
│ │ ││
|
|
│ │ Mostrando: 5 de 18 proyectos | Total Presup: $207.4M | Avance: 68.2% ││
|
|
│ └───────────────────────────────────────────────────────────────────────────┘│
|
|
│ │
|
|
│ ┌─ Datos - Nivel: Partidas de "Los Pinos" ────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ┌──────────────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │Partida 🔽│Presupuesto🔽│Real 🔽│Desv.%🔽│Avance🔽│Accion│ │ │
|
|
│ │ ├──────────────────────────────────────────────────────────────────┤ │ │
|
|
│ │ │Preliminares │ $2,450,000 │$2,398,000│ -2.1% │ 100% │[📊] │ ← Drill│ │
|
|
│ │ │Cimentacion │ $8,750,000 │$8,892,000│ +1.6% │ 100% │[📊] │ │ │
|
|
│ │ │Estructura │$15,200,000 │$12,450,000│-18.1%│ 82% │[📊] │ ← Click│ │
|
|
│ │ │Albañileria │ $9,500,000 │ $6,120,000│-35.6%│ 64% │[📊] │ │ │
|
|
│ │ │Instalaciones │ $6,300,000 │ $2,450,000│-61.1%│ 39% │[📊] │ │ │
|
|
│ │ │Acabados │ $3,000,000 │ $0 │ 0% │ 0% │[📊] │ │ │
|
|
│ │ └──────────────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ Pagina 1 de 1 [20 por pagina ▼] │ │
|
|
│ │ │ │
|
|
│ │ Filtros de columna activos: Avance > 50% ✓ [Limpiar] │ │
|
|
│ └───────────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─ Drill-Down al hacer click en "Estructura" ─────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ Breadcrumb actualizado: │ │
|
|
│ │ Inicio > Proyectos > Los Pinos > Estructura > [Conceptos] │ │
|
|
│ │ │ │
|
|
│ │ Mostrando: 24 conceptos de partida "Estructura" │ │
|
|
│ │ │ │
|
|
│ │ ┌──────────────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │Concepto │Cantidad│Unidad│PU │Importe │Real │Desv.│ │ │
|
|
│ │ ├──────────────────────────────────────────────────────────────────┤ │ │
|
|
│ │ │Acero fy=4200 │ 85.5 t │ ton │$18,500│$1,581,750│$1,623,000│+2.6│ │ │
|
|
│ │ │Concreto f'c=250 │ 420 m³ │ m³ │$2,100 │ $882,000│ $856,000│-2.9│ │ │
|
|
│ │ │Cimbra contacto │1,850 m²│ m² │$185 │ $342,250│ $335,000│-2.1│ │ │
|
|
│ │ └──────────────────────────────────────────────────────────────────┘ │ │
|
|
│ └───────────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─ Segmentos Guardados ────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ [⭐ Proyectos en Riesgo] [⭐ Alto Rendimiento] [⭐ Proximos a Terminar] │ │
|
|
│ │ │ │
|
|
│ │ [+ Crear Nuevo Segmento] │ │
|
|
│ └───────────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [📥 Exportar con Filtros] [🔄 Actualizar] [⚙️ Config] │
|
|
└─────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Flujo de Trabajo
|
|
|
|
```
|
|
1. USUARIO ACCEDE A VISTA CORPORATIVA
|
|
↓
|
|
Dashboard Corporativo → Tabla de Proyectos
|
|
↓
|
|
Se muestran todos los proyectos (Nivel 1)
|
|
Breadcrumb: [Inicio > Proyectos]
|
|
|
|
2. APLICAR FILTROS GLOBALES
|
|
↓
|
|
Usuario selecciona:
|
|
- Periodo: "Q4 2025"
|
|
- Estado: "Activos"
|
|
- Region: "Norte, Sur"
|
|
↓
|
|
Sistema ejecuta query con filtros
|
|
↓
|
|
Tabla se actualiza mostrando 5 de 18 proyectos
|
|
↓
|
|
Resumen se actualiza: Total Presup: $207.4M
|
|
|
|
3. DRILL-DOWN A PROYECTO ESPECIFICO
|
|
↓
|
|
Usuario hace clic en fila "Los Pinos"
|
|
↓
|
|
Sistema navega a Nivel 2 (Detalle de Proyecto)
|
|
↓
|
|
Breadcrumb: [Inicio > Proyectos > Los Pinos]
|
|
↓
|
|
Se muestran partidas del proyecto
|
|
↓
|
|
Filtros globales se mantienen activos
|
|
|
|
4. DRILL-DOWN A PARTIDA
|
|
↓
|
|
Usuario hace clic en "Estructura"
|
|
↓
|
|
Sistema navega a Nivel 3 (Conceptos de Partida)
|
|
↓
|
|
Breadcrumb: [Inicio > Proyectos > Los Pinos > Estructura]
|
|
↓
|
|
Se muestran 24 conceptos de la partida
|
|
|
|
5. APLICAR FILTRO DE COLUMNA
|
|
↓
|
|
Usuario hace clic en icono de filtro en columna "Desviacion"
|
|
↓
|
|
Selecciona: "Mayor a 5%"
|
|
↓
|
|
Tabla se filtra mostrando solo conceptos con desv > 5%
|
|
↓
|
|
Icono de filtro activo aparece en columna
|
|
|
|
6. GUARDAR SEGMENTO
|
|
↓
|
|
Usuario hace clic en [+ Crear Segmento]
|
|
↓
|
|
Modal:
|
|
- Nombre: "Sobrecostos Criticos"
|
|
- Condiciones:
|
|
* Desviacion > 10%
|
|
* Avance > 50%
|
|
↓
|
|
[Guardar] → Segmento disponible en filtros rapidos
|
|
|
|
7. NAVEGAR CON BREADCRUMBS
|
|
↓
|
|
Usuario hace clic en "Los Pinos" en breadcrumb
|
|
↓
|
|
Sistema regresa a Nivel 2 (Partidas del proyecto)
|
|
↓
|
|
Filtros se mantienen
|
|
↓
|
|
Vista se restaura instantaneamente
|
|
|
|
8. EXPORTAR DATOS FILTRADOS
|
|
↓
|
|
Usuario hace clic en [Exportar con Filtros]
|
|
↓
|
|
Modal:
|
|
- Nivel a exportar: [Nivel actual ▼]
|
|
- Formato: [Excel ▼]
|
|
- Incluir graficas: [✓]
|
|
↓
|
|
Sistema genera archivo:
|
|
"Proyectos_Norte_Sur_Q4_2025_20251118.xlsx"
|
|
↓
|
|
Archivo incluye nota de filtros aplicados
|
|
```
|
|
|
|
---
|
|
|
|
## Notas Tecnicas
|
|
|
|
### Estructura de Niveles de Drill-Down
|
|
|
|
```typescript
|
|
// Jerarquia de navegacion
|
|
const drillDownLevels = {
|
|
level1: {
|
|
name: 'Corporativo',
|
|
entity: 'projects',
|
|
endpoint: '/api/analytics/projects',
|
|
columns: ['name', 'budget', 'progress', 'margin', 'status'],
|
|
drillDownTo: 'level2'
|
|
},
|
|
level2: {
|
|
name: 'Proyecto',
|
|
entity: 'budget-items',
|
|
endpoint: '/api/analytics/projects/:id/budget-items',
|
|
columns: ['item', 'budget', 'actual', 'variance', 'progress'],
|
|
drillDownTo: 'level3'
|
|
},
|
|
level3: {
|
|
name: 'Partida',
|
|
entity: 'concepts',
|
|
endpoint: '/api/analytics/budget-items/:id/concepts',
|
|
columns: ['concept', 'quantity', 'unit', 'unit-price', 'amount', 'actual'],
|
|
drillDownTo: 'level4'
|
|
},
|
|
level4: {
|
|
name: 'Concepto',
|
|
entity: 'transactions',
|
|
endpoint: '/api/analytics/concepts/:id/transactions',
|
|
columns: ['date', 'document', 'quantity', 'price', 'amount', 'status'],
|
|
drillDownTo: 'level5'
|
|
},
|
|
level5: {
|
|
name: 'Transaccion',
|
|
entity: 'transaction-detail',
|
|
endpoint: '/api/analytics/transactions/:id',
|
|
columns: ['field', 'value'],
|
|
drillDownTo: null
|
|
}
|
|
};
|
|
```
|
|
|
|
### Sistema de Filtros
|
|
|
|
```typescript
|
|
// Estructura de filtros
|
|
interface FilterState {
|
|
global: GlobalFilters;
|
|
columns: ColumnFilters;
|
|
segments: Segment[];
|
|
breadcrumbs: Breadcrumb[];
|
|
}
|
|
|
|
interface GlobalFilters {
|
|
period: {
|
|
start: Date;
|
|
end: Date;
|
|
preset?: 'today' | 'week' | 'month' | 'quarter' | 'year';
|
|
};
|
|
projects: string[]; // Array de project IDs
|
|
regions: string[];
|
|
types: string[];
|
|
status: string[];
|
|
responsibles: string[];
|
|
}
|
|
|
|
interface ColumnFilter {
|
|
column: string;
|
|
operator: 'eq' | 'ne' | 'gt' | 'lt' | 'gte' | 'lte' | 'between' | 'contains' | 'in';
|
|
value: any;
|
|
}
|
|
|
|
interface Segment {
|
|
id: string;
|
|
name: string;
|
|
conditions: ColumnFilter[];
|
|
operator: 'AND' | 'OR';
|
|
isShared: boolean;
|
|
createdBy: string;
|
|
}
|
|
|
|
// Aplicacion de filtros
|
|
function buildQuery(filters: FilterState, level: string): QueryParams {
|
|
const query = {
|
|
...filters.global,
|
|
columnFilters: filters.columns,
|
|
level: level
|
|
};
|
|
|
|
// Aplicar segmento si esta activo
|
|
if (filters.activeSegment) {
|
|
query.segment = filters.activeSegment.conditions;
|
|
}
|
|
|
|
return query;
|
|
}
|
|
```
|
|
|
|
### Endpoints Necesarios
|
|
|
|
```typescript
|
|
// Navegacion drill-down
|
|
GET /api/analytics/drill-down/projects // Nivel 1
|
|
GET /api/analytics/drill-down/projects/:id/budget-items // Nivel 2
|
|
GET /api/analytics/drill-down/budget-items/:id/concepts // Nivel 3
|
|
GET /api/analytics/drill-down/concepts/:id/transactions // Nivel 4
|
|
GET /api/analytics/drill-down/transactions/:id // Nivel 5
|
|
|
|
// Filtros
|
|
POST /api/analytics/filters/apply // Aplicar filtros
|
|
POST /api/analytics/filters/save // Guardar vista
|
|
GET /api/analytics/filters/saved // Obtener vistas guardadas
|
|
|
|
// Segmentos
|
|
POST /api/analytics/segments // Crear segmento
|
|
GET /api/analytics/segments // Listar segmentos
|
|
PUT /api/analytics/segments/:id // Actualizar segmento
|
|
DELETE /api/analytics/segments/:id // Eliminar segmento
|
|
|
|
// Exportacion
|
|
POST /api/analytics/export // Exportar con filtros
|
|
```
|
|
|
|
### Optimizacion de Performance
|
|
|
|
```typescript
|
|
// 1. Queries optimizadas con indices
|
|
CREATE INDEX idx_projects_status ON projects(status);
|
|
CREATE INDEX idx_projects_region ON projects(region);
|
|
CREATE INDEX idx_budget_items_project ON budget_items(project_id);
|
|
|
|
// 2. Cache de resultados frecuentes
|
|
const cacheKey = `analytics:${level}:${hash(filters)}`;
|
|
const cachedResult = await redis.get(cacheKey);
|
|
if (cachedResult) return JSON.parse(cachedResult);
|
|
|
|
// 3. Paginacion virtual para grandes datasets
|
|
const pagination = {
|
|
limit: 100,
|
|
offset: page * 100,
|
|
totalCount: await countTotal(filters)
|
|
};
|
|
|
|
// 4. Lazy loading de detalles
|
|
const basicData = await fetchBasicColumns(filters);
|
|
// Detalles adicionales se cargan bajo demanda
|
|
```
|
|
|
|
---
|
|
|
|
## Definicion de "Done"
|
|
|
|
- [ ] Navegacion drill-down funcional con 5 niveles
|
|
- [ ] Breadcrumbs mostrando ruta de navegacion
|
|
- [ ] Filtros globales con 6 categorias minimo
|
|
- [ ] Filtros aplicandose en tiempo real (<500ms)
|
|
- [ ] Filtros contextuales por columna funcionales
|
|
- [ ] Sistema de segmentos con CRUD completo
|
|
- [ ] Contador de registros filtrados
|
|
- [ ] Resumen de valores agregados
|
|
- [ ] Drill-down desde graficas implementado
|
|
- [ ] Exportacion con filtros aplicados
|
|
- [ ] Historial de navegacion (10 entradas)
|
|
- [ ] Performance con 100k registros validada
|
|
- [ ] Tests de integracion de filtros
|
|
- [ ] Tests de performance de queries
|
|
- [ ] Documentacion de API completa
|
|
- [ ] Validado con Analistas de BI
|
|
|
|
---
|
|
|
|
**Estimacion:** 5 Story Points
|
|
**Dependencias:** Requiere US-BI-001 (Dashboard Corporativo)
|
|
**Fecha:** 2025-11-18
|