K
KoreUI

Gauge

Chart

Un número, contra un objetivo, con rangos de color. Reutiliza el arco del donut: un gauge es un arco trazado, no un anillo relleno.

Con rangos de color

«73» dentro de un arco no dice nada; «73, en la banda ámbar, cerca de la roja» sí. Los thresholds son esa banda: un mapa [cota => token]. El número y el arco se pintan con el color de la banda en la que cae el valor, y unos pellizcos marcan dónde empieza cada una.

CPU
Categoría v
0 42
Memoria
Categoría v
0 73
Disco
Categoría v
0 94 
<x-kore::chart :data="[['v' => 73]]" height="12rem" aria-label="Memoria">
    <x-kore::chart.gauge
        y="v"
        :thresholds="[60 => 'success', 85 => 'warning', 100 => 'destructive']"
        caption="Memoria" />
</x-kore::chart>
<x-kore::chart :data="[['v' => 73]]" height="12rem" aria-label="Memoria">
    <x-kore::chart.gauge
        y="v"
        :thresholds="[60 => 'success', 85 => 'warning', 100 => 'destructive']"
        caption="Memoria" />
</x-kore::chart>

Semicírculo y otro dominio

El arco no tiene por qué barrer 270° (sweep también admite 180 = semicírculo). Y el dominio no tiene por qué ser 0–100: un SLA va de donde tú digas, con decimales incluidos.

Disponibilidad
Categoría sla
0 99,2
NPS
Categoría nps
0 34 
<x-kore::chart :data="[['sla' => 99.2]]" height="12rem" aria-label="Disponibilidad">
    <x-kore::chart.gauge y="sla" :min="98" :max="100" :sweep="180"
        :thresholds="[99 => 'destructive', 99.9 => 'warning', 100 => 'success']"
        caption="Disponibilidad %" />
</x-kore::chart>
<x-kore::chart :data="[['sla' => 99.2]]" height="12rem" aria-label="Disponibilidad">
    <x-kore::chart.gauge y="sla" :min="98" :max="100" :sweep="180"
        :thresholds="[99 => 'destructive', 99.9 => 'warning', 100 => 'success']"
        caption="Disponibilidad %" />
</x-kore::chart>

Sin rangos: solo decoración

Sin thresholds, un gauge no es un gauge: es un stat tile con un anillo decorativo. Fíjate en lo poco que aporta el arco frente a un número a secas.

Uso sin rangos
Categoría v
0 68

⚠️ Sin rangos de color, un gauge no es un gauge. Lo que justifica el arco es el contexto: «68 %» no dice gran cosa; «68, en la banda ámbar, cerca de la roja» sí. No se prohíbe pintar un gauge sin thresholds, pero si no los tienes, probablemente quieres <x-kore::stats> en su lugar — ocupa menos y se lee antes. 

<x-kore::chart :data="[['v' => 68]]" height="12rem" aria-label="Uso sin rangos">
    <x-kore::chart.gauge y="v" caption="¿y bien o mal?" />
</x-kore::chart>
<x-kore::chart :data="[['v' => 68]]" height="12rem" aria-label="Uso sin rangos">
    <x-kore::chart.gauge y="v" caption="¿y bien o mal?" />
</x-kore::chart>

Props

Prop Tipo Default Descripción
y string — La columna del valor (se usa la primera fila con dato)
min número 0 El mínimo del dominio del arco
max número 100 El máximo del dominio del arco
sweep número 270 Cuántos grados abarca. 270 = velocímetro, 180 = semicírculo
thresholds array [] Los rangos de color, [cota => token]. Sin ellos, el gauge es decorativo
caption string|null null El texto bajo el número
show bool true Apaga la marca

Un gauge no comparte gráfico

Enseña un número contra un objetivo, no una serie sobre unos ejes. Como el donut, vive solo — y si le pones otra marca, lanza una excepción.

Los tokens de thresholds son los semánticos de kore 
[60 => 'success', 85 => 'warning', 100 => 'destructive']
// Tres bandas: 0–60 verde, 60–85 ámbar, 85–100 rojo.
// Si el valor se sale por arriba, se pinta con la última (que suele ser lo peor).
[60 => 'success', 85 => 'warning', 100 => 'destructive']
// Tres bandas: 0–60 verde, 60–85 ámbar, 85–100 rojo.
// Si el valor se sale por arriba, se pinta con la última (que suele ser lo peor).
Cargando