Pantalla: Patrones por Dia/Hora¶

Identificador: SCR-ADH-004 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	Patrones por Dia/Hora
Proposito	Heatmap de adherencia para identificar patrones temporales
Tipo	Screen (Full screen)
Acceso	SCR-ADH-001 > "Ver patrones"
Prioridad	Media

2. Wireframe ASCII¶

2.1. Estado: Heatmap Completo¶

+------------------------------------------+
|  [<]    Patrones de Adherencia     [...]  |
+------------------------------------------+
|                                           |
|  Ultimos 30 dias                   [v]    |  <- Period selector
|                                           |
|  Tus patrones de adherencia               |
|                                           |
|         L    M    M    J    V    S    D   |
|       ┌────┬────┬────┬────┬────┬────┬────┐|
| 06:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ▓▓ │ ▓▓ │|
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 08:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ▓▓ │ ░░ │|  <- Fin de semana baja
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 12:00 │ ▓▓ │ ▓▓ │ ▓▓ │ ▓▓ │ ▓▓ │ ▓▓ │ ▓▓ │|  <- Mediodia problematico
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 14:00 │ ▓▓ │ ░░ │ ▓▓ │ ░░ │ ▓▓ │ ▓▓ │ ▓▓ │|
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 18:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ██ │ ██ │|
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 20:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ██ │ ██ │|
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 22:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ██ │ ██ │|
|       └────┴────┴────┴────┴────┴────┴────┘|
|                                           |
|  Leyenda: ██ 90%+  ▓▓ 70-89%  ░░ <70%    |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  🔍 Patrones detectados             │  |
|  │  ─────────────────────────────────  │  |
|  │  ⚠️ Mediodia (12:00-14:00)          │  |
|  │     Adherencia promedio: 72%        │  |
|  │     20% menos que otras horas       │  |
|  │                                     │  |
|  │  ⚠️ Fines de semana                 │  |
|  │     Adherencia promedio: 78%        │  |
|  │     15% menos que dias laborales    │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  💡 Sugerencia                      │  |
|  │  "Asocia tu toma de mediodia con    │  |
|  │   el almuerzo para mejorar..."      │  |
|  │                      [Ver mas ->]   │  |
|  └─────────────────────────────────────┘  |
|                                           |
+------------------------------------------+

+------------------------------------------+
|                                           |
|         L    M    M    J    V    S    D   |
|       ┌────┬────┬────┬────┬────┬────┬────┐|
| 06:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ▓▓ │ ▓▓ │|
|       ├────┼────┼────┼────┼────┼────┼────┤|
| 08:00 │ ██ │ ██ │ ██ │ ██ │ ██ │ ▓▓ │ ░░ │|
|       ├────┼─┬──┴────┴────┴────┴────┴────┤|
| 12:00 │ ▓▓ │ │ Martes 12:00              │|
|       ├────┼─│ ──────────────            │|
| 14:00 │ ▓▓ │ │ Adherencia: 68%           │|  <- Tooltip
|       ├────┼─│ 3 de 4 tomas              │|
|       │    │ │                           │|
|       │    │ │ Medicamentos afectados:   │|
|       │    │ │ - Metformina (omitida 1x) │|
|       │    │ │                           │|
|       │    │ │ [Ver detalles]            │|
|       │    │ └───────────────────────────│|
|       └────┴────────────────────────────┘ |
|                                           |

3. Componentes UI¶

3.1. Heatmap Grid (Componente Nuevo)¶

Propiedad	Valor
Componente	CMP-ADH-009 (AdherenceHeatmap) NUEVO
Columnas	7 (dias de semana)
Filas	Dinamico segun horarios de tomas
Cell size	44x44dp minimo
Cell gap	2dp
Header row	Dias L-D
Header column	Horas

Colores de Celdas:

Rango	Color	Pattern
>= 90%	success.500	Solido
70-89%	warning.500	Solido
< 70%	error.400	Solido
Sin datos	neutral.200	Striped

3.2. Legend¶

Propiedad	Valor
Layout	Horizontal, debajo del heatmap
Items	3 niveles + "sin datos"
Swatches	16x16dp con border radius 4dp

3.3. Pattern Detection Card¶

Propiedad	Valor
Componente	CMP-ADH-010 (PatternCard) NUEVO
Background	warning.50
Border left	4dp warning.500
Icono	Lupa
Lista	Patrones detectados con severidad

Propiedad	Valor
Trigger	Tap en celda
Position	Arriba o abajo segun espacio
Contenido	Dia/hora, %, tomas, medicamentos
CTA	"Ver detalles" -> SCR-ADH-006
Dismiss	Tap fuera

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Celda	Mostrar tooltip
Tap	"Ver detalles" (tooltip)	SCR-ADH-006 filtrado
Tap	Pattern item	Highlight celdas relacionadas
Tap	Sugerencia	SCR-ADH-007
Pinch	Grid	Zoom (tablet)

4.2. Highlight de Patron¶

Al tap en un patron detectado:

Celdas relacionadas pulsan
Otras celdas bajan opacity a 0.3
Scroll automatico si necesario
Segundo tap quita highlight

4.3. Generacion de Filas¶

Las filas del heatmap se generan dinamicamente basadas en:

Horarios configurados de medicamentos
Agrupados en slots de 2 horas
Solo mostrar horas con datos

5. Datos Requeridos¶

5.1. Input Data¶

interface PatternsData {
  period: {
    start: Date;
    end: Date;
    label: string;
  };

  // Heatmap data
  heatmapData: HeatmapCell[][];  // [hour][dayOfWeek]

  // Detected patterns
  patterns: DetectedPattern[];

  // Suggestions based on patterns
  suggestions: PatternSuggestion[];

  // Time slots with data
  timeSlots: string[];  // ["06:00", "08:00", ...]
}

interface HeatmapCell {
  dayOfWeek: number;       // 0-6 (L-D)
  hour: string;            // "12:00"
  adherencePercentage: number;
  dosesConfirmed: number;
  dosesScheduled: number;
  medicationsAffected: MedicationSummary[];
  hasData: boolean;
}

interface DetectedPattern {
  id: string;
  type: 'TIME_OF_DAY' | 'DAY_OF_WEEK' | 'WEEKEND' | 'SPECIFIC_SLOT';
  severity: 'HIGH' | 'MEDIUM' | 'LOW';
  title: string;
  description: string;
  affectedSlots: {dayOfWeek: number; hour: string}[];
  averageAdherence: number;
  comparisonAdherence: number;  // vs resto
  difference: number;           // -20%, etc
}

interface PatternSuggestion {
  patternId: string;
  suggestion: string;
  actionType: 'ADJUST_TIME' | 'ADD_REMINDER' | 'LINK_TO_ACTIVITY';
}

5.2. Output Events¶

Evento	Payload	Destino
onCellTap	{day, hour}	Tooltip
onCellDetailTap	{day, hour}	SCR-ADH-006
onPatternTap	pattern_id	Highlight cells
onSuggestionTap	suggestion_id	SCR-ADH-007

6. Accesibilidad¶

6.1. Alternativa Tabular¶

Screen readers reciben tabla con headers:

"Tabla de patrones de adherencia.
 Columnas: dias de la semana.
 Filas: horarios de toma.

 Lunes 6:00, 95% adherencia.
 Martes 6:00, 92% adherencia.
 ..."

6.2. Labels¶

Elemento	accessibilityLabel
Celda	"{dia} {hora}, {X}% adherencia"
Pattern	"Patron detectado: {descripcion}"
Legend item	"{rango}: {color}"

6.3. Color + Texto¶

Cada celda tiene indicador adicional:

= 90%: Sin indicador adicional
70-89%: Punto central
< 70%: X central

7. Responsive Design¶

7.1. Breakpoints¶

Ancho	Layout
< 360dp	Celdas 36x36dp, scroll horizontal
360-600dp	Celdas 44x44dp, fit completo
> 600dp	Celdas 56x56dp, mas espacio

7.2. Orientacion¶

Orientacion	Adaptacion
Portrait	Grid sobre patterns
Landscape	Grid lado izquierdo, patterns lado derecho

8. Metricas¶

8.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "patterns"
cell_tap	day, hour, percentage
pattern_highlight	pattern_id, type
suggestion_tap	suggestion_id

9. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)