Nexus – Elemento: KPI Card

¿Qué es?

KPI Card es un componente de tipo Data. Muestra un indicador clave de rendimiento con su valor actual, una barra de progreso hacia un objetivo, y datos complementarios como el porcentaje de avance, el período correspondiente y una tendencia. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Revenue Goal”, valor actual $78.5k sobre un objetivo de $100.0k, período Q1 2026, con tendencia +12%).

Propiedades

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

  • Component ID: identificador único del componente, autogenerado (ej. kpi_1c55dcd3).
  • 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.
  • Selector S / M / L: ajusta el tamaño de visualización del panel de propiedades.

Pestaña Content:

  • Title: título de la tarjeta (ej. “Revenue Goal”).
  • Current Value: valor actual del indicador, en formato numérico simple (ej. 78500; se muestra abreviado en el componente como “$78.5k”).
  • Target Value: valor objetivo a alcanzar (ej. 100000).
  • Unit (prefix, e.g. $): símbolo o texto que se antepone a los valores mostrados (ej. “$”).
  • Period Label: etiqueta del período que representa el KPI (ej. “Q1 2026”).
  • Trend Label: texto que indica la variación respecto a un período anterior (ej. “+12%”).
  • Trend Direction: menú desplegable que determina el color con que se muestra el Trend Label (verde para positivo, rojo para negativo, gris/neutro para sin cambios). Opciones disponibles:

    • Up
    • Down
    • Neutral

Además, en la esquina superior derecha del componente se muestra automáticamente el porcentaje de avance (Current Value / Target Value), calculado sin necesidad de configuración adicional (ej. “79%”).

Pestaña Style:

  • 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

Para adaptar KPI Card a otra métrica, por ejemplo un objetivo de tickets resueltos en soporte:

  • Title: Tickets Resolved
  • Current Value: 340
  • Target Value: 500
  • Unit (prefix): (vacío, ya que no es un valor monetario)
  • Period Label: September
  • Trend Label: -8%
  • Trend Direction: Down

La barra de progreso se calcula automáticamente a partir de Current Value y Target Value, por lo que no requiere configuración manual. Trend Direction es puramente visual (colorea el Trend Label) y es independiente del signo que se escriba en el texto, por lo que ambos deben coincidir manualmente para que el indicador sea coherente.