Card Metric
El componente Card Metric brinda al usuario información resumida sobre un conjunto de datos. Permite visualizar métricas clave de manera clara y concisa.
Playground
- Twig
<twig:card-metric
url="/capacitaciones/metrics"
:items="[
{
"name": "Aprobados",
"type": "amount",
"tooltipText": "tooltip1"
}
]"
/>
Lista de parámetros
- Twig
| Propiedad | Tipo | Detalle |
|---|---|---|
| items | Array | Array de objetos que representan los items a mostrar en el card metric. Cada objeto debe contener las siguientes propiedades:name (String): Nombre del item.tooltipText (String): Texto para el tooltip asociado al item. type (String): Tipo de métrica. Puede ser "amount", "currency", "percentage" o "time". |
| url | String | Es la ruta desde donde el componente obtiene los datos. El CardMetric hace una llamada HTTP a esa URL. El backend debe responder con los valores de cada métrica en el mismo orden que están definidos en items. Ejemplo: [{value: 75}, {value: 25}] |
Anatomía
Tipos
Amount
Muestra la sumatoria de la cantidad de registros, que contienen el dato a comunicar.
¿Cómo funciona?
Los valores van del 0 en adelante.
Muestra el valor numérico exacto. No existen valores decimales.
Currency
Muestra la sumatoria de los montos de cada registro, que contienen el dato a comunicar.
¿Cómo funciona?
Su valor está compuesto de números, puntos y comas de acuerdo a la nomenclatura de cada país. Y al lado izquierdo va el símbolo de la moneda representativo.
Ejemplo: En México ($1,250.50), Argentina ($1.250,50), Chile ($1.250), Perú (S/ 1,250.50), Colombia ($1.250,50), Brasil (R$ 1.250,50), etc.
Percentage
Muestra en forma de porcentaje la proporción que hay de la cantidad de registros(que contienen el dato a comunicar) sobre el total.
¿Cómo funciona?
Su valor está compuesto por números enteros y decimales.
Ejemplo: Si hay 20 registros marcados como finalizados de 100 registros totales. Eso seria el 20%
Time
Muestra la sumatoria de los tiempos de cada registro, que contienen el dato a comunicar.
¿Cómo funciona?
Muestra el valor con horas y minutos(sin contar segundos).
Ejemplo: Si solo fuera minutos se ve de la siguiente manera: 00:34 Hr
Comportamiento
Extensión
¿Cuántos card metric se podrán usar?
- Máximo 4 card metric por vista, evitando el scroll horizontal.
- Debe ser responsive, en mobile las 4 card se acomodan 2 cards por fila.
¿Puedo poner cualquier elemento en un card metric?
- No, solo se manejará información consultiva.
¿Puedo poner varios valores en un solo card metric?
- No, solo se usa un card metric para reflejar un dato que aporte valor en la vista.
- Cada card metric comunica 1 tipo de valor distinto.
**Esto está alineado con PMs que hoy tienen más de 1 valor por card metric.
Componentes
¿Qué componentes se pueden usar dentro del card metric?
- Componentes permitidos: Tooltip
- Son componentes que no alteran la extensión del contenido (agregando o quitando elementos).
Acciones
¿Un card metric puede funcionar como acceso directo, contener links o botones?
- No, el objetivo es comunicar métricas de valor para que el usuario tome una decisión en la vista y no hacerlo salir del flujo.
Uso en soportes
¿Se puede usar en vistas desktop y mobile?
- Sí, el componente será responsive y se adaptará al viewport disponible.
- Se usará solo en vistas full width y no en modales, al menos por ahora.
Ubicación
Vista sin tab y sin scope
¿Dónde se ubica el card metric?
Lo usamos cuando estamos cargando todo el contenido del body.
¿Por qué tiene esta ubicación?
El card metric está relacionado a la vista en general. Dicha vista solo contiene un única tabla y los card metric están relacionados a los registros de esa tabla.
Vista con solo tab + ayuda contextual
¿Dónde se ubica el card metric?
En el siguiente orden: Titulo > Tab > Ayuda contextual > Card metric > Filtro + acciones > Tabla
¿Por qué tiene esta ubicación?
El card metric está relacionado a cada tab. Porque el contenido de la vista cambia por tab, donde cada tab contiene su propia tabla, el cual contiene los registros a los que están relacionados cada card metric. Siendo el tab, el último nivel de jerarquía.
Vista con solo scope
¿Dónde se ubica el card metric?
En el siguiente orden: Titulo > Scope > Card metric > Filtro + acciones > Tabla
¿Por qué tiene esta ubicación?
El card metric está relacionado a cada scope. Porque el contenido de la vista, se organiza por scope, donde cada scope contiene una versión filtrada de la misma tabla, el cual contiene los registros a los que están relacionados cada card metric. Siendo el scope, el último nivel de jerarquía.
Vista con tab+scope
¿Dónde se ubica el card metric?
En el siguiente orden: Titulo > Tab > Scope > Card metric > Filtro + acciones > Tabla
¿Por qué tiene esta ubicación?
El card metric está relacionado a cada scope. Porque el contenido de la vista, primero se organiza por tab y luego por scope, donde cada scope contiene su propia tabla, el cual contiene los registros a los que están relacionados cada card metric. Siendo el scope, el último nivel de jerarquía.
