Tasks - Analytics Module

Convenciones y Alcance del Plan

Plan de ejecución para implementar el módulo Analytics siguiendo arquitectura Angular 20 + NGXS con componentes standalone y integración con Chart.js para visualizaciones.

Desglose de Trabajo (WBS)

Épica 1: Fundación del Módulo

T-001: Configuración Base del Módulo Analytics

Descripción: Crear estructura base del módulo Analytics con configuración NGXS, Chart.js y rutas principales.

Cobertura: Infraestructura base para todos los US-001 a US-007

Dependencias: Ninguna

DoD VERIFICABLE:

• ✅ Estructura de carpetas creada: nx g @nx/angular:lib analytics --directory=libs/modules
• ✅ Chart.js y ng-chartjs instalados: npm list chart.js ng2-charts muestra versiones
• ✅ Barrel exports configurados: index.ts exporta componentes públicos
• ✅ NGXS State configurado: nx build analytics ejecuta sin errores
• ✅ Rutas principales: navegación /analytics y /admin/metrics funcional
• ✅ Tests base: nx test analytics --coverage ≥90% coverage
• ✅ Integración con @libs-core/shared-models validada

Estimación: M | Responsable: Frontend Lead

T-002: Modelos y Contratos de Analytics

Descripción: Implementar interfaces TypeScript para Analytics data, KPIs y DTOs según design.md.

Cobertura: R-001, R-004, R-007, R-010 - Estructuras de datos base

Dependencias: T-001

DoD VERIFICABLE:

• ✅ Interfaces DashboardData, KpiMetric, UserAnalytics, ProductAnalytics implementadas
• ✅ DTOs para filtros y exportación definidos según design.md
• ✅ Validación de tipos: nx build analytics --configuration=production sin errores TypeScript
• ✅ Tests unitarios de modelos: nx test analytics --testNamePattern="models" pasa 100%
• ✅ Exportación en barrel: interfaces disponibles desde index.ts

Estimación: M | Responsable: Frontend Developer

T-003: Analytics Service y HTTP Client

Descripción: Implementar AnalyticsService con métodos HTTP según API contracts del design.md.

Cobertura: R-001, R-004, R-007, R-010 - Comunicación con backend

Dependencias: T-002

DoD VERIFICABLE:

• ✅ AnalyticsService implementado con métodos: getDashboard(), getUserAnalytics(), getProductAnalytics(), getSystemAnalytics()
• ✅ Error handling y retry logic implementados
• ✅ Cache de 1 hora implementado con timestamp validation
• ✅ Tests unitarios servicios: nx test analytics --testNamePattern="service" ≥90% coverage
• ✅ Mock API responses configurados para testing
• ✅ Integration tests: nx test analytics --testNamePattern="integration" valida HTTP calls

Estimación: L | Responsable: Frontend Developer

Épica 2: Dashboard Principal

T-004: NGXS State Management Setup

Descripción: Configurar NGXS store para analytics con actions, selectors y effects.

Cobertura: US-001, US-005 - Estado centralizado para dashboard

Dependencias: T-003

DoD VERIFICABLE:

• ✅ AnalyticsState con actions: LoadDashboard, SetDateFilter, LoadUserMetrics, LoadProductMetrics
• ✅ Selectors tipados: getDashboardData(), getUserMetrics(), getActiveFilters()
• ✅ Effects para HTTP calls y cache management implementados
• ✅ Tests unitarios state: nx test analytics --testNamePattern="state" ≥95% coverage
• ✅ DevTools integration: Redux DevTools funcional en desarrollo
• ✅ Filter persistence: filtros persisten en sessionStorage

Estimación: L | Responsable: Frontend Developer

T-005: Dashboard Container Component

Descripción: Implementar componente principal del dashboard con layout de widgets y filtros globales.

Cobertura: US-001 (AC-001, AC-002, AC-003, AC-004, AC-005) - Dashboard principal

Dependencias: T-004

DoD VERIFICABLE:

• ✅ AnalyticsDashboardComponent standalone implementado con OnPush strategy
• ✅ Layout responsive: grid de widgets adapta a móvil/tablet/desktop
• ✅ Filtros globales: selector de período funcional
• ✅ Loading states: skeletons durante carga de widgets
• ✅ Error handling: mensajes amigables para errores de API
• ✅ Tests unitarios componente: nx test analytics --testNamePattern="AnalyticsDashboard" ≥90% coverage
• ✅ E2E test: nx e2e analytics-e2e --testNamePattern="dashboard navigation" pasa

Estimación: L | Responsable: Frontend Developer

T-006: KPI Widget Component

Descripción: Crear componente reutilizable para mostrar KPIs individuales con indicadores visuales.

Cobertura: US-001 (AC-001, AC-004) - Widgets de KPIs

Dependencias: T-005

DoD VERIFICABLE:

• ✅ KpiWidgetComponent standalone con inputs: kpi data, size, theme
• ✅ Indicadores visuales: verde/amarillo/rojo según thresholds
• ✅ Trend indicators: arrows up/down/stable con porcentajes
• ✅ Formato de números: currency, percentage, number con locale
• ✅ Responsive: adapta contenido según tamaño disponible
• ✅ Tests unitarios: nx test analytics --testNamePattern="KpiWidget" ≥95% coverage
• ✅ Visual regression tests: screenshots consistent

Estimación: M | Responsable: Frontend Developer

T-007: Chart Widget Base Component

Descripción: Implementar componente base genérico para gráficos con Chart.js.

Cobertura: US-001, US-002, US-003, US-004 - Base para todas las visualizaciones

Dependencias: T-006

DoD VERIFICABLE:

• ✅ ChartWidgetComponent con soporte para: line, bar, pie, doughnut charts
• ✅ Chart.js configurado con tema consistent con UI framework
• ✅ Responsive charts: auto-resize cuando cambia container
• ✅ Loading state: skeleton mientras carga datos
• ✅ Error state: mensaje cuando falla carga de datos
• ✅ Tests unitarios: nx test analytics --testNamePattern="ChartWidget" ≥90% coverage
• ✅ Performance test: render <1s con 1000 data points

Estimación: L | Responsable: Frontend Developer

Épica 3: Métricas de Usuarios

T-008: User Analytics Container

Descripción: Implementar container de métricas de usuarios con gráficos específicos.

Cobertura: US-002 (AC-006, AC-007, AC-008, AC-009, AC-010) - Análisis de usuarios

Dependencias: T-007

DoD VERIFICABLE:

• ✅ UserAnalyticsComponent con layout de gráficos de usuarios
• ✅ Gráfico de nuevos usuarios: line chart con datos por día/semana/mes
• ✅ Pie chart de distribución por roles con leyenda
• ✅ Métricas de actividad: usuarios activos diarios/semanales
• ✅ Filtros temporales aplicados: último día, semana, mes
• ✅ Tests unitarios: nx test analytics --testNamePattern="UserAnalytics" ≥90% coverage
• ✅ E2E test: navegación y filtrado en métricas de usuarios

Estimación: L | Responsable: Frontend Developer

T-009: User Registration Chart Component

Descripción: Crear gráfico específico de tendencia de registros de usuarios.

Cobertura: US-002 (AC-006) - Tendencia de nuevos usuarios

Dependencias: T-008

DoD VERIFICABLE:

• ✅ UserRegistrationChartComponent con line chart de registros por período
• ✅ Tooltips informativos: fecha, cantidad, porcentaje de cambio
• ✅ Zoom functionality: permite acercar períodos específicos
• ✅ Data aggregation: día/semana/mes según período seleccionado
• ✅ Export capability: data del gráfico a CSV
• ✅ Tests unitarios: nx test analytics --testNamePattern="UserRegistrationChart" ≥90% coverage
• ✅ Performance: smooth rendering con 365 data points (1 año)

Estimación: M | Responsable: Frontend Developer

Épica 4: Métricas de Productos

T-010: Product Analytics Container

Descripción: Implementar análisis de métricas de productos y comportamiento del catálogo.

Cobertura: US-003 (AC-011, AC-012, AC-013, AC-014, AC-015) - Análisis de productos

Dependencias: T-009

DoD VERIFICABLE:

• ✅ ProductAnalyticsComponent con layout de métricas de productos
• ✅ Top 10 productos: lista con nombre, vistas, conversión
• ✅ Word cloud de búsquedas más frecuentes
• ✅ Bar chart de visualizaciones por categoría
• ✅ Lista de productos sin visualizaciones
• ✅ Tests unitarios: nx test analytics --testNamePattern="ProductAnalytics" ≥90% coverage
• ✅ E2E test: interacción con métricas de productos

Estimación: L | Responsable: Frontend Developer

T-011: Top Products List Component

Descripción: Crear componente para mostrar productos más populares con métricas.

Cobertura: US-003 (AC-011, AC-014) - Productos top y conversión

Dependencias: T-010

DoD VERIFICABLE:

• ✅ TopProductsListComponent con ranking de productos
• ✅ Métricas por producto: vistas, clicks, conversión rate
• ✅ Links a detalle de producto (integración con product-catalog)
• ✅ Paginación para más de 10 productos
• ✅ Ordenamiento por diferentes métricas
• ✅ Tests unitarios: nx test analytics --testNamePattern="TopProductsList" ≥90% coverage
• ✅ Integration test: navegación a product detail funciona

Estimación: M | Responsable: Frontend Developer

Épica 5: Sistema y Eventos

T-012: System Analytics Container

Descripción: Implementar monitoreo de eventos del sistema y métricas de health.

Cobertura: US-004 (AC-016, AC-017, AC-018, AC-019, AC-020) - Eventos del sistema

Dependencias: T-011

DoD VERIFICABLE:

• ✅ SystemAnalyticsComponent con dashboard de eventos del sistema
• ✅ Stacked bar chart de eventos por tipo
• ✅ Timeline de eventos críticos con detalles
• ✅ Métricas de performance: response time promedio
• ✅ Error metrics por módulo con alertas visuales
• ✅ Tests unitarios: nx test analytics --testNamePattern="SystemAnalytics" ≥90% coverage
• ✅ E2E test: filtrado de eventos por tipo y módulo

Estimación: L | Responsable: Frontend Developer

T-013: Event Timeline Component

Descripción: Crear timeline interactivo de eventos críticos del sistema.

Cobertura: US-004 (AC-017) - Timeline de eventos

Dependencias: T-012

DoD VERIFICABLE:

• ✅ EventTimelineComponent con timeline scrolleable
• ✅ Event details en tooltips: timestamp, módulo, descripción, severity
• ✅ Filtrado por tipo de evento: info, warning, error, critical
• ✅ Zoom temporal: día, semana, mes en timeline
• ✅ Real-time updates: nuevos eventos aparecen automáticamente
• ✅ Tests unitarios: nx test analytics --testNamePattern="EventTimeline" ≥85% coverage
• ✅ Performance: smooth scroll con 1000+ eventos

Estimación: M | Responsable: Frontend Developer

Épica 6: Filtros y Exportación

T-014: Filter Panel Component

Descripción: Implementar panel de filtros temporales con date pickers y presets.

Cobertura: US-005 (AC-021, AC-022, AC-023, AC-024, AC-025) - Filtros temporales

Dependencias: T-013

DoD VERIFICABLE:

• ✅ FilterPanelComponent con presets: último día, semana, mes
• ✅ Date range picker para períodos personalizados
• ✅ Aplicación global de filtros a todos los widgets
• ✅ Persistencia en sessionStorage durante navegación
• ✅ Indicador visual del período activo en todos los dashboards
• ✅ Tests unitarios: nx test analytics --testNamePattern="FilterPanel" ≥95% coverage
• ✅ E2E test: filtros aplicados correctamente en todos los gráficos

Estimación: M | Responsable: Frontend Developer

T-015: Export Functionality

Descripción: Implementar exportación de datos analytics a CSV con validación de permisos.

Cobertura: US-006 (AC-026, AC-027, AC-028, AC-029, AC-030) - Exportación de datos

Dependencias: T-014

DoD VERIFICABLE:

• ✅ ExportButtonComponent con dropdown de opciones: users, products, system
• ✅ Generación server-side de CSV con download URL
• ✅ Progress indicator durante generación de export
• ✅ Filtros aplicados incluidos en export
• ✅ Validación de permisos analytics.export antes de exportar
• ✅ Tests unitarios: nx test analytics --testNamePattern="Export" ≥90% coverage
• ✅ E2E test: export completo y descarga de archivo

Estimación: L | Responsable: Frontend Developer

Épica 7: Seguridad y Optimización

T-016: Security Implementation

Descripción: Implementar control de acceso granular con @libs-core/security.

Cobertura: US-007 (AC-031, AC-032, AC-033, AC-034, AC-035) - Seguridad del módulo

Dependencias: T-015

DoD VERIFICABLE:

• ✅ Guards aplicados: authGuard, permissionGuard en rutas analytics
• ✅ Permisos granulares: analytics.read, analytics.export implementados
• ✅ Multi-tenant context: filtrado de datos por tenantId
• ✅ Ocultación de widgets según permisos de usuario
• ✅ Validación de permisos antes de exportaciones
• ✅ Tests unitarios: nx test analytics --testNamePattern="security|guard|permission" ≥95% coverage
• ✅ E2E test: acceso denegado para usuarios sin permisos

Estimación: M | Responsable: Frontend Developer

T-017: Performance Optimization

Descripción: Optimizar performance de gráficos y carga de datos con cache inteligente.

Cobertura: NFR-001, NFR-004 - Performance y UX requirements

Dependencias: T-016

DoD VERIFICABLE:

• ✅ Lazy loading de rutas analytics implementado
• ✅ OnPush strategy en todos los componentes verificado
• ✅ Chart.js optimizado: canvas rendering, responsive animations
• ✅ Cache de 1 hora para datos analytics verificado
• ✅ Virtual scrolling en listas largas (timeline, top products)
• ✅ Performance test: nx test analytics --testNamePattern="performance" <3s carga inicial
• ✅ Lighthouse audit: score ≥85 para dashboard

Estimación: M | Responsable: Frontend Developer

T-018: Testing and Documentation

Descripción: Completar suite de tests y documentación técnica del módulo.

Cobertura: Todos los US - Quality assurance completo

Dependencias: T-017

DoD VERIFICABLE:

• ✅ Unit tests coverage: nx test analytics --coverage ≥90%
• ✅ Integration tests: nx test analytics --testNamePattern="integration" ≥5 escenarios
• ✅ E2E tests: nx e2e analytics-e2e flujos críticos cubiertos
• ✅ Performance tests: <3s carga inicial, <1s render de gráficos
• ✅ Chart rendering tests: screenshots consistency across browsers
• ✅ API documentation: endpoints documentados con ejemplos
• ✅ Component documentation: Storybook stories para widgets principales

Estimación: M | Responsable: Frontend Developer

Secuenciación y Hitos

Milestone 1: Fundación (Semana 1-2)

Entregables: T-001, T-002, T-003, T-004 Criterios VERIFICABLES:

• ✅ nx build analytics ejecuta sin errores
• ✅ nx test analytics coverage base ≥90%
• ✅ Chart.js integración funcional

Milestone 2: Dashboard Principal (Semana 3)

Entregables: T-005, T-006, T-007 Criterios VERIFICABLES:

• ✅ Navegación /analytics funcional
• ✅ KPI widgets renderizan correctamente
• ✅ Chart base components operativos

Milestone 3: Métricas de Usuarios (Semana 4)

Entregables: T-008, T-009 Criterios VERIFICABLES:

• ✅ User analytics dashboard funcional
• ✅ Gráficos de registros operativos
• ✅ Filtros temporales aplicados

Milestone 4: Métricas de Productos y Sistema (Semana 5)

Entregables: T-010, T-011, T-012, T-013 Criterios VERIFICABLES:

• ✅ Product analytics dashboard funcional
• ✅ System events timeline operativo
• ✅ Top products rankings correctos

Milestone 5: Filtros y Exportación (Semana 6)

Entregables: T-014, T-015 Criterios VERIFICABLES:

• ✅ Filtros globales funcionales
• ✅ Exportación CSV operativa
• ✅ Persistencia de filtros

Milestone 6: Producción (Semana 7)

Entregables: T-016, T-017, T-018 Criterios VERIFICABLES:

• ✅ Seguridad implementada y validada
• ✅ Performance optimizada <3s carga
• ✅ Tests completos ≥90% coverage

Quality Gates

Build Gates

• nx build analytics --configuration=production sin errores TypeScript
• nx lint analytics sin errores ESLint
• Bundle size <600KB gzipped (incluyendo Chart.js)

Test Gates

• nx test analytics --coverage ≥90% coverage
• nx e2e analytics-e2e todos los tests críticos pasan
• Performance tests <3s carga inicial, <1s render gráficos

Security Gates

• Guards aplicados en todas las rutas analytics
• Permisos validados en exportaciones
• Multi-tenant filtering verificado

Performance Gates

• Lighthouse score ≥85 para dashboards
• Chart rendering <1s con 1000 data points
• Memory usage <80MB con múltiples gráficos

Riesgos Operativos y Plan de Rollback

Riesgo 1: Performance de Chart.js

Contingencia: Optimización de datasets, agregación de datos, lazy rendering Rollback: Gráficos simplificados sin animaciones

Riesgo 2: Disponibilidad de Analytics API

Contingencia: Mock data extendido, cache agresivo, offline mode Rollback: Dashboard estático con datos históricos

Riesgo 3: Complejidad de Filtros

Contingencia: Simplificar UI, presets más claros, mejor UX Rollback: Filtros básicos sin rangos personalizados