Pantalla: Tendencias Semanales/Mensuales¶

Identificador: SCR-ADH-003 Modulo: MTS-ADH-001 - Motor de Adherencia Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Informacion General¶

Atributo	Valor
Nombre	Tendencias Semanales/Mensuales
Proposito	Graficos de evolucion temporal de adherencia
Tipo	Tab Content (dentro de Dashboard)
Acceso	SCR-ADH-001 > Tab "Tendencias"
Prioridad	Media

2. Wireframe ASCII¶

2.1. Estado: Vista Semanal (Default)¶

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [General] [Por Med] [Tendencias*]        |
|  ─────────────────────────────────────    |
|                                           |
|  [Semana*] [Mes] [Trimestre]              |  <- Sub-tabs
|                                           |
|  Ultimas 4 semanas                        |
|                                           |
|  100% ┤                                   |
|       │          ●─────●                  |
|   90% ┤      ●───┘         ╲              |
|       │  ●───┘              ●             |
|   80% ┤                                   |
|       │                                   |
|   70% ┤                                   |
|       │                                   |
|   60% ┤                                   |
|       └────┬────┬────┬────┬────          |
|          Sem1  Sem2 Sem3  Sem4           |
|          85%   92%  95%   88%            |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  📈 Tendencia: +3% vs mes anterior  │  |
|  │     Promedio 4 semanas: 90%         │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  💡 Tu mejor semana fue la 3        │  |
|  │     con 95% de adherencia           │  |
|  │                     [Comparar ->]   │  |
|  └─────────────────────────────────────┘  |
|                                           |
+------------------------------------------+
| [Home] [Pills] [Calendar] [Stats*] [More] |
+------------------------------------------+

2.2. Estado: Vista Mensual¶

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [General] [Por Med] [Tendencias*]        |
|                                           |
|  [Semana] [Mes*] [Trimestre]              |
|                                           |
|  Ultimos 6 meses                          |
|                                           |
|  100% ┤                                   |
|       │                      ●────●       |
|   90% ┤              ●───────┘            |
|       │      ●───────┘                    |
|   80% ┤  ●───┘                            |
|       │                                   |
|   70% ┤                                   |
|       └────┬────┬────┬────┬────┬────     |
|          Jul  Ago  Sep  Oct  Nov  Dic    |
|          78%  82%  88%  91%  93%  90%    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  📈 Tendencia: +12% en 6 meses      │  |
|  │     Mejor mes: Noviembre (93%)      │  |
|  └─────────────────────────────────────┘  |
|                                           |
+------------------------------------------+

2.3. Estado: Datos Insuficientes¶

+------------------------------------------+
|  [<]    Mi Adherencia              [...]  |
+------------------------------------------+
|                                           |
|  [General] [Por Med] [Tendencias*]        |
|                                           |
|  [Semana*] [Mes] [Trimestre]              |
|                                           |
|                                           |
|            ┌─────────────────┐            |
|            │                 │            |
|            │  📊             │            |
|            │                 │            |
|            └─────────────────┘            |
|                                           |
|     Aun no hay suficientes datos          |
|                                           |
|   Necesitamos al menos 2 semanas de       |
|   registros para mostrar tendencias.      |
|                                           |
|   Llevas: 5 dias                          |
|   Necesitas: 14 dias                      |
|                                           |
|   ████████░░░░░░░░░░░░░░  36%             |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Sub-Tab Bar¶

Propiedad	Valor
Componente	CMP-NAV-004 (Chip Group)
Opciones	Semana, Mes, Trimestre
Seleccion	Single
Default	Semana

3.2. Line Chart (Componente Nuevo)¶

Propiedad	Valor
Componente	CMP-ADH-007 (AdherenceLineChart) NUEVO
Height	200dp
Padding	16dp
Line color	primary.500
Point radius	8dp
Point touch area	44x44dp
Grid lines	Horizontal a 60%, 80%, 100%
Animation	Draw line, 800ms

Elementos del Grafico:

Elemento	Estilo
Linea	3dp, primary.500
Puntos	8dp filled, primary.500
Punto seleccionado	12dp, con ring
Area bajo curva	primary.100, 20% opacity
Grid	1dp, neutral.200
Labels Y	12sp, neutral.600
Labels X	14sp, neutral.800

3.3. Trend Summary Card¶

Propiedad	Valor
Componente	CMP-ADH-008 (TrendSummaryCard) NUEVO
Background	success.50 o error.50 segun tendencia
Icono	📈 o 📉
Texto principal	"+X% vs periodo anterior"
Texto secundario	"Promedio: Y%"

3.4. Best Period Highlight Card¶

Propiedad	Valor
Background	info.50
Icono	💡
Contenido	Mejor periodo destacado
CTA	"Comparar" link

4. Comportamientos¶

4.1. Interacciones con Grafico¶

Gesto	Accion
Tap en punto	Mostrar tooltip con detalle
Long press en punto	Navegar a SCR-ADH-006 para ese periodo
Swipe horizontal	Pan por mas datos
Pinch	Zoom in/out (tablet)

       ┌───────────────────┐
       │  Semana 3         │
       │  21-27 Nov        │
       │  ──────────────   │
       │  Adherencia: 95%  │
       │  47 de 49 tomas   │
       │  [Ver detalle]    │
       └────────┬──────────┘
                │
                ●

4.3. Animaciones¶

Elemento	Animacion	Duracion
Linea	Draw from left	800ms
Puntos	Scale in staggered	100ms/punto
Area fill	Fade in	400ms
Tab switch	Crossfade	200ms

5. Datos Requeridos¶

5.1. Input Data¶

interface TrendsData {
  granularity: 'week' | 'month' | 'quarter';
  dataPoints: TrendPoint[];
  summary: TrendSummary;
  bestPeriod: BestPeriod;
  hasEnoughData: boolean;
  minimumDataDays: number;
  currentDataDays: number;
}

interface TrendPoint {
  periodStart: Date;
  periodEnd: Date;
  label: string;           // "Sem 1", "Nov", etc.
  percentage: number;
  dosesConfirmed: number;
  dosesScheduled: number;
  isHighlighted: boolean;  // Mejor periodo
}

interface TrendSummary {
  direction: 'UP' | 'DOWN' | 'STABLE';
  changePercentage: number;
  comparedTo: string;      // "mes anterior"
  average: number;
}

interface BestPeriod {
  label: string;
  percentage: number;
  insight: string;
}

5.2. Output Events¶

Evento	Payload	Destino
onPointTap	period	Tooltip
onPointLongPress	period	SCR-ADH-006
onGranularityChange	granularity	Recalcular
onCompare	-	SCR-ADH-008

6. Accesibilidad¶

6.1. Alternativa Tabular¶

Para usuarios con screen reader, el grafico tiene representacion tabular:

| Periodo    | Adherencia | Tomas   |
|------------|------------|---------|
| Semana 1   | 85%        | 42/49   |
| Semana 2   | 92%        | 46/50   |
| Semana 3   | 95%        | 47/49   |
| Semana 4   | 88%        | 44/50   |

6.2. Labels¶

Elemento	accessibilityLabel
Grafico	"Grafico de tendencias. {descripcion de datos}"
Punto	"{periodo}, {X}% adherencia"
Tab	"Ver por {granularidad}"

Evento	Anuncio
Tab cambiada	"Mostrando tendencias {granularidad}"
Punto seleccionado	"{periodo}: {X}%, {N} de {M} tomas"

7. Responsive Design¶

7.1. Breakpoints¶

Ancho	Layout
< 360dp	Chart height 160dp
360-600dp	Chart height 200dp
> 600dp	Chart height 280dp, mas puntos visibles

8. Metricas¶

8.1. Analytics Events¶

Evento	Parametros
tab_view	tab: "trends", granularity
point_tap	period, percentage
granularity_change	from, to
compare_tap	-

9. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)