Saltar a contenido

SCR-ANA-005: Grafico de Parametro (Tendencia)

Identificador: SCR-ANA-005 Modulo: MTS-ANA-001 - Analisis Clinicos Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight)


1. Informacion General

Atributo Valor
Nombre Grafico de Parametro
Tipo Pantalla de visualizacion
Prioridad Alta
Roles PI, CR, CS (con permiso)

2. Proposito

Mostrar la evolucion historica de un parametro de laboratorio en formato grafico, permitiendo identificar tendencias.


3. Wireframe ASCII

+------------------------------------------+
| [<] Colesterol Total              [...]  |
+------------------------------------------+
|                                          |
| ULTIMO VALOR                             |
| +--------------------------------------+ |
| |                                      | |
| |      220 mg/dL                       | |
| |      15 Dic 2025                     | |
| |                                      | |
| |  [!] Por encima del rango normal     | |
| |      Rango: < 200 mg/dL              | |
| |                                      | |
| +--------------------------------------+ |
|                                          |
| TENDENCIA                     [6M v]     |
+------------------------------------------+
|                                          |
|  250 |                                   |
|      |        *                          |
|  225 |  *           *                    |
|      |       *           *               |
|  200 |-----------------------------      |
|      |  *                                |
|  175 |                                   |
|      |_____________________________      |
|       Jul  Ago  Sep  Oct  Nov  Dic       |
|                                          |
+------------------------------------------+
| HISTORIAL                                |
+------------------------------------------+
|                                          |
| 15 Dic 2025  |  220 mg/dL   [!]  Lab SA  |
| 20 Nov 2025  |  215 mg/dL   [!]  Lab SA  |
| 15 Oct 2025  |  230 mg/dL   [!]  Lab CN  |
| 10 Sep 2025  |  225 mg/dL   [!]  Lab SA  |
| 05 Ago 2025  |  195 mg/dL   [-]  Lab SA  |
| 10 Jul 2025  |  190 mg/dL   [-]  Lab SA  |
|                                          |
+------------------------------------------+
| INFORMACION                              |
+------------------------------------------+
| El colesterol total es la suma de        |
| LDL, HDL y otros lipidos. Valores        |
| elevados aumentan el riesgo de           |
| enfermedad cardiovascular.               |
|                                          |
| [Ver mas informacion]                    |
+------------------------------------------+

4. Elementos de UI

4.1. Header

Elemento Componente Accion
Back button IconButton Volver
Titulo TopAppBar Nombre del parametro
More options IconButton Compartir/Exportar

4.2. Current Value Card

Elemento Componente Especificacion
Container Card elevated Destacado
Value Display1 Grande, bold
Unit Headline6 Unidad
Date Body2 Fecha del ultimo
Status StatusBanner Normal/Alto/Bajo
Reference Caption Rango normal

4.3. Grafico

Elemento Componente Especificacion
Container Card -
Time Selector Chips 3M/6M/1A/Todo
Chart LineChart Interactivo
Reference Line HorizontalLine Limite normal
Data Points Circles Tap para detalle
Tooltip Overlay Valor + fecha

4.4. Historial Section

Elemento Componente Especificacion
Section Header SectionHeader "HISTORIAL"
History Row ListItem Fecha + valor + estado + lab
Status Icon Icon ! o check

4.5. Info Section

Elemento Componente Especificacion
Section Header SectionHeader "INFORMACION"
Description Body2 Texto educativo
More Link TextButton Link a mas info

5. Comportamiento

5.1. Grafico Interactivo

Gesto Accion
Tap punto Mostrar tooltip
Drag horizontal Pan en tiempo
Pinch Zoom in/out
Long press Seleccionar rango

5.2. Time Ranges

Rango Agrupacion
3M Por semana
6M Por mes
1A Por mes
Todo Por mes/trimestre

5.3. Linea de Referencia

  • Linea horizontal en limite normal
  • Color verde si por debajo
  • Color rojo si por encima
  • Area sombreada para rango

6. Estados

6.1. Estado Normal

  • Grafico visible
  • Puntos de colores segun estado
  • Historial completo

6.2. Estado Pocos Datos

+------------------------------------------+
| TENDENCIA                                |
+------------------------------------------+
|                                          |
|    Necesitas al menos 3 mediciones       |
|    para ver una tendencia.               |
|                                          |
|    Mediciones actuales: 2                |
|                                          |
+------------------------------------------+

6.3. Estado Sin Datos

+------------------------------------------+
|                                          |
|    No hay mediciones de este             |
|    parametro todavia.                    |
|                                          |
|    [+ Agregar resultado]                 |
|                                          |
+------------------------------------------+

7. Accesibilidad

7.1. WCAG 2.1 AA

Criterio Implementacion
1.1.1 Alt text para grafico
1.4.1 No solo color
1.4.11 Contraste en lineas

7.2. Alternativa Textual

  • Tabla de datos disponible
  • Descripcion de tendencia en texto
  • "Tendencia ascendente/descendente/estable"

7.3. Screen Reader

Elemento Anuncio
Grafico "Grafico de [param], [count] mediciones, tendencia [direccion]"
Punto "[Fecha], [valor], [estado]"
Reference "Limite normal: [valor]"

8. Navegacion

8.1. Entradas

Origen Accion Parametros
SCR-ANA-001 Tap sparkline param_code
SCR-ANA-004 Tap param param_code
Deep link medtime://results/param/{code} param_code

8.2. Salidas

Destino Accion Parametros
Detalle resultado Tap historial row result_id
SCR-ANA-007 Compartir param_data
Info educativa Ver mas param_code

9. Analytics

Evento Trigger Datos
graph_viewed Pantalla visible param, data_count
time_range_changed Cambiar rango range
point_tapped Tap en punto date, value
share_initiated Menu compartir param

Documento generado por MobileUxUiDrone (Eight of Eight)