Gráfico de línea/área informativo del precio de referencia de un activo en el tiempo. No es una herramienta de trading: sin velas, sin indicadores técnicos, sin order book, sin señales. Solo el dato neutro. El número que muestra es referencial — el precio operativo real incluye spread y comisión y se fija al confirmar.
El encabezado comunica el qué (precio de referencia) y el cuánto cambió (variación del período). El gráfico es deliberadamente sobrio: una sola línea, un relleno tenue, ejes mínimos. Arrastra el dedo sobre la línea para ver el scrub en vivo.
Nunca "Precio" a secas. El ícono info abre el privacy-popover explicando que el precio final incluye spread y comisión, fijados al confirmar.
El dato más grande de la pantalla. JetBrains Mono con tabular-nums para que los dígitos no salten. Formato es-CO: $458.320.000. Sin count-up.
Badge success (sube) / error (baja) / neutro (plano). Flecha sutil. Se refiere solo al timeframe activo: cambiar de 24h a 1A recalcula este número.
Color primary, 2dp, curva suavizada. La línea no cambia de color según la dirección — el color vive solo en el badge. Sobriedad: no pintamos todo de rojo al bajar.
Degradé vertical primary → transparente, muy tenue (~16% arriba). Da volumen sin gritar. Nada de glow ni saturación.
3–4 labels de precio (eje Y, derecha) sobre el lienzo + labels de tiempo (eje X) abajo. Línea base hairline. Sin grilla completa.
Segmented control existente — el pill se desliza. Default 24h. Cambiar de frame redibuja la línea (draw-in) y recalcula precio + variación.
Cinco rangos: 24h · 7D · 1M · 1A · Máx. Es un segmented control (≤5 labels cortos, dentro de la regla del componente). Al cambiar: el precio de referencia y la variación se recalculan para ese rango, y la línea hace draw-in. Pruébalo — toca los segmentos.
selectionClick() al cambiar de segmento.Tocar y arrastrar sobre el gráfico revela el precio histórico de cada punto: línea guía vertical hairline + punto sobre la línea, y el encabezado se sincroniza — el precio mono muestra el valor del punto y la etiqueta «Precio de referencia» se reemplaza por su fecha/hora. Sin caja flotante; nada ocluye la línea. Al soltar, snap de vuelta al precio actual. Es para leer el histórico, no para operar.
Un punto primary con halo blanco se ancla sobre la línea en el dato más cercano al dedo. Una guía vertical hairline cae desde el punto. Sin grilla extra, sin caja flotante.
El precio grande (mono) se reescribe al valor del punto y la etiqueta «Precio de referencia» se reemplaza por la fecha/hora de ese dato. El ojo no se mueve y nada ocluye la línea.
Descartamos el tooltip-burbuja sobre el punto: en pantallas pequeñas tapa la línea justo bajo el dedo. Toda la lectura vive en el encabezado, que ya es el ancla visual de la pantalla.
Al levantar el dedo, el punto y la guía se desvanecen (duration-fast) y el encabezado hace snap de vuelta al precio actual del frame + variación del período.
El valor escrubeado se lee en el encabezado: el precio mono se reescribe al punto y la etiqueta se vuelve su fecha/hora. Nada flota sobre la línea. Es el patrón más calmado y «no-trading». La Opción A queda registrada como alternativa considerada.
El precio grande del encabezado se reescribe al valor del punto mientras arrastras y la etiqueta «Precio de referencia» se reemplaza por la fecha/hora. El ojo no se mueve, nada ocluye la línea. Al soltar, snap al precio actual + variación del período.
Burbuja sobre el punto con precio + fecha. Reconocible, pero puede tapar la línea bajo el dedo en pantallas pequeñas. Descartada como variante viva.
El gráfico conserva su altura en todos los estados — la pantalla nunca salta. Loading usa el chart skeleton (shimmer) ya definido; el encabezado de precio también es skeleton para no mentir un número mientras carga.
success. La línea es del mismo color que en el caso negativo.error. Misma línea verde — no se pinta de rojo. Solo el badge cambia.USDT sigue esencialmente la tasa del dólar (TRM), no la volatilidad cripto: su línea en COP es casi recta. Comunicamos qué busca hacer (paridad con el dólar) y el riesgo de que no lo logre (depeg). Nunca afirmamos "USDT = 1 USD" ni paridad garantizada.
La variación rondará 0% (badge neutro, ícono minus). Mostramos el dato real aunque sea pequeño; no lo redondeamos a 0,0% si no lo es.
"USDT busca mantener paridad con el dólar estadounidense." Verbo busca, nunca es ni equivale a. El acento usa el verde de marca de USDT.
Alert warning bajo el gráfico. No es descartable en el detalle del activo: es información de riesgo, no una notificación.
El eje Y se ajusta a un rango estrecho para que las micro-variaciones de la TRM se lean, pero sin exagerar la amplitud (nada de zoom dramático que simule volatilidad).
El movimiento es funcional y sobrio. Tres reglas; nada más.
duration-slow 350ms + ease-standard. Toca para repetir.MediaQuery.disableAnimationsOf(context)Con reduced motion activo: la línea aparece estática y completa (sin wipe), el shimmer del skeleton se reemplaza por un pulso de opacidad, y el scrub sigue funcionando igual (nunca dependió de animación). Esta página respeta prefers-reduced-motion en tu sistema.
En dark la línea usa primary-300 (#27A89C) para sostener contraste sobre bg-elevated. El relleno baja su alpha. Labels de eje en fg-subtle. El tooltip se oscurece aún más para destacar.
El render real es fl_chart · LineChart. Esta página simula el comportamiento en SVG, pero las decisiones de diseño se mapean 1:1 a la API del paquete.
Una sola LineChartBarData. Sin candlesticks (fl_chart no los trae y es deliberado). El scrub usa el touchCallback nativo del paquete; el draw-in se hace animando el factor de recorte de la barra.
isCurved: true, curveSmoothness: 0.28, barWidth: 2, color: primary500. Área: BelowBarData(show:true) con LinearGradient vertical primary @ 0.16 → transparent. dotData: FlDotData(show:false) salvo el punto de scrub.
gridData: FlGridData(show:false) (solo línea base via borderData inferior). leftTitles/rightTitles: 3–4 labels en mono. bottomTitles: tiempo según frame. Reservar el alto para que el cambio de estado no salte.
lineTouchData: LineTouchData con getTouchedSpotIndicator para la guía vertical + punto. Sin tooltip incorporado (touchTooltipData → getTooltipItems vacío); en su lugar, touchCallback sincroniza el estado del encabezado (precio + fecha) y al soltar restaura el precio actual + variación del período.
Animar un AnimationController (350ms, Curves.fastOutSlowIn) que recorta la barra (ClipRect + Align widthFactor) de izq→der. Si MediaQuery.disableAnimationsOf(context) → pintar completo sin animar. Nunca animar el texto del precio.
// Línea de precio — sobria, informativa (no trading) LineChartBarData( spots: spots, // List<FlSpot> del frame activo isCurved: true, curveSmoothness: 0.28, color: MiCapi.primary500, // la línea NO cambia por dirección barWidth: 2, isStrokeCapRound: true, dotData: const FlDotData(show: false), belowBarData: BarAreaData( show: true, gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [MiCapi.primary500.withOpacity(0.16), Colors.transparent], ), ), )