Nexus – Elemento: Sparkline

image_pdfimage_print

¿Qué es?

Sparkline es un componente de tipo Data. Muestra un mini gráfico de tendencia, minimalista y sin ejes visibles, ideal para mostrar la evolución de un valor en poco espacio. Al arrastrarlo al lienzo viene con un ejemplo precargado (gráfico de línea, “Last 10 days”).

Propiedades

Al seleccionar Sparkline en el lienzo, el panel derecho muestra “Properties of Sparkline”, organizado en tres pestañas: Content, Style y Behavior.

  • Component ID: identificador único del componente, autogenerado (ej. spk_81de3c19).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

  • Data: array simple de números que representa los puntos del gráfico (ej. [12,18,14,22,19,28,25,31,27,35]).
  • Chart Type: menú desplegable que define el tipo de gráfico. Opciones: Line, Bar.
  • Value Field: nombre del campo a usar como valor, cuando los datos provienen de una estructura más compleja (objetos) en vez de un array simple de números (vacío por defecto).
  • Label: texto descriptivo debajo del gráfico (ej. “Last 10 days”).
  • Show Dots: casilla que muestra u oculta los puntos sobre la línea del gráfico.
  • Fill Area: casilla que rellena de color el área debajo de la línea del gráfico.

Pestaña Style:

  • Color: color de la línea/barras del gráfico, con selector visual y campo hexadecimal (ej. #6366f1).
  • Custom Class: clase CSS personalizada.
  • Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
  • Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.

Ejemplo de uso

Sparkline es ideal para acompañar una métrica (por ejemplo, dentro de una Stat Card o al lado de un KPI Card) mostrando su tendencia reciente sin ocupar el espacio de un gráfico completo. Con Data se carga la serie de valores directamente como array de números (ej. [12,18,14,22,19,28,25,31,27,35]), y con Chart Type se elige si se representa como línea continua o como barras. Activando Fill Area y Show Dots se le da más presencia visual al gráfico, útil cuando el Sparkline es un elemento protagonista y no solo un acompañamiento discreto.