Pantalla: Comparativa Historica¶

Identificador: SCR-ADH-008 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	Comparativa Historica
Proposito	Comparacion de adherencia entre dos periodos
Tipo	Full Screen
Acceso	SCR-ADH-003 > "Comparar"
Prioridad	Baja

2. Wireframe ASCII¶

2.1. Estado: Comparativa Completa¶

+------------------------------------------+
|  [<]    Comparar Periodos                 |
+------------------------------------------+
|                                           |
|  Periodo 1                Periodo 2       |
|  ┌─────────────┐         ┌─────────────┐  |
|  │ Nov 2024    │   vs    │ Dic 2024    │  |
|  │     [v]     │         │     [v]     │  |
|  └─────────────┘         └─────────────┘  |
|                                           |
|  ─────────────────────────────────────    |
|                                           |
|  ADHERENCIA GENERAL                       |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │    ┌─────┐          ┌─────┐        │  |
|  │   ╱       ╲        ╱       ╲       │  |
|  │  │  82%   │   →   │  91%   │       │  |
|  │   ╲       ╱        ╲       ╱       │  |
|  │    └─────┘          └─────┘        │  |
|  │                                     │  |
|  │         +9% de mejora 📈           │  |
|  │                                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  POR MEDICAMENTO                          |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │  Metformina                         │  |
|  │  Nov: ████████░░░░ 78%              │  |
|  │  Dic: ██████████░░ 89%   +11% 📈    │  |
|  │                                     │  |
|  │  Lisinopril                         │  |
|  │  Nov: ██████████░░ 92%              │  |
|  │  Dic: ███████████░ 95%   +3% 📈     │  |
|  │                                     │  |
|  │  Atorvastatina                      │  |
|  │  Nov: █████████░░░ 85%              │  |
|  │  Dic: ████████░░░░ 82%   -3% 📉     │  |
|  │                                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  METRICAS ADICIONALES                     |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │  Racha maxima                       │  |
|  │  Nov: 12 dias  →  Dic: 23 dias      │  |
|  │                                     │  |
|  │  Tomas a tiempo                     │  |
|  │  Nov: 75%  →  Dic: 88%              │  |
|  │                                     │  |
|  │  Omisiones totales                  │  |
|  │  Nov: 18  →  Dic: 9                 │  |
|  │                                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  [Compartir comparativa]                  |
|                                           |
+------------------------------------------+

2.2. Seleccion de Periodo¶

+------------------------------------------+
|                                           |
|  Seleccionar periodo                      |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │  ○ Esta semana                      │  |
|  │  ○ Este mes                         │  |
|  │  ○ Ultimo trimestre                 │  |
|  │  ● Mes especifico                   │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │   <  Noviembre 2024  >              │  |  <- Month picker
|  └─────────────────────────────────────┘  |
|                                           |
|  [Cancelar]                [Aplicar]      |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Period Selector Dual¶

Propiedad	Valor
Componente	CMP-ADH-015 (DualPeriodSelector) NUEVO
Layout	Dos dropdowns lado a lado
Conector	"vs" centrado
Validacion	Periodo 2 > Periodo 1

3.2. Comparison Circles¶

Propiedad	Valor
Componente	CMP-ADH-016 (ComparisonCircles) NUEVO
Layout	Dos circulos con flecha central
Circulo size	100x100dp
Flecha	→ direccion de mejora
Badge	"+X%" o "-X%" con color

3.3. Comparison Bar¶

Propiedad	Valor
Componente	CMP-ADH-017 (ComparisonBar) NUEVO
Layout	Dos barras apiladas por medicamento
Barra 1	Color neutral.500 (periodo anterior)
Barra 2	Color primary.500 (periodo actual)
Delta badge	"+X%" verde o "-X%" rojo

3.4. Metric Comparison Row¶

Propiedad	Valor
Layout	Label: Value1 → Value2
Flecha	→ con color segun mejora
Tipografia	Label sm, Values lg

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Period selector	Abrir picker
Tap	"Compartir"	Share sheet
Swipe	Between periods	Mover ambos +1

4.2. Calculos de Delta¶

// Formula de cambio
deltaPercentage = period2.adherence - period1.adherence;
deltaDirection = deltaPercentage > 0 ? 'UP' : deltaPercentage < 0 ? 'DOWN' : 'STABLE';

// Colores
if (deltaDirection === 'UP') color = success.500;
if (deltaDirection === 'DOWN') color = error.500;
if (deltaDirection === 'STABLE') color = neutral.500;

4.3. Validaciones¶

Validacion	Mensaje
Periodo 1 == Periodo 2	"Selecciona periodos diferentes"
Periodo sin datos	"No hay datos para {periodo}"
< 7 dias de datos	"Datos insuficientes para comparar"

5. Datos Requeridos¶

5.1. Input Data¶

interface ComparisonData {
  period1: PeriodData;
  period2: PeriodData;
  comparison: ComparisonResult;
}

interface PeriodData {
  label: string;               // "Nov 2024"
  start: Date;
  end: Date;
  adherencePercentage: number;
  adherenceLevel: string;
  medications: MedicationPeriodData[];
  metrics: {
    maxStreak: number;
    onTimePercentage: number;
    totalSkips: number;
    dosesConfirmed: number;
    dosesScheduled: number;
  };
  hasEnoughData: boolean;
}

interface MedicationPeriodData {
  medicationId: string;
  name: string;
  adherencePercentage: number;
}

interface ComparisonResult {
  overallDelta: number;           // +9%
  overallDirection: 'UP' | 'DOWN' | 'STABLE';
  medicationDeltas: {
    medicationId: string;
    name: string;
    delta: number;
    direction: 'UP' | 'DOWN' | 'STABLE';
  }[];
  metricDeltas: {
    maxStreak: number;
    onTimePercentage: number;
    totalSkips: number;
  };
  summary: string;               // "Mejoraste 9% en adherencia"
}

5.2. Output Events¶

Evento	Payload	Destino
onPeriod1Change	period	Recalcular
onPeriod2Change	period	Recalcular
onShare	-	Share sheet

6. Accesibilidad¶

6.1. Labels¶

Elemento	accessibilityLabel
Period selector	"Seleccionar {periodo 1 o 2}"
Comparison	"Adherencia cambio de {X}% a {Y}%, {delta}"
Metric row	"{metrica}, {valor1} a {valor2}"

Evento	Anuncio
Comparacion cargada	"Comparando {periodo1} con {periodo2}. {resumen}"
Periodo cambiado	"Nuevo periodo seleccionado: {periodo}"

7. Metricas¶

7.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "comparison"
period_select	period_number, value
comparison_share	period1, period2, delta

8. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)