# Anillo

Muestra un valor frente a una meta, o las partes de un total, como medio anillo sobre la cifra que lo dice.

### Problemas conocidos
No se conocen problemas.

### Copiar el marcado
Enlaza `components/ring.css` de `@luz-ds/catalog` después de `luz.css`. Un valor frente a una meta:

Ring markup
```html
<figure class="luz-ring" style="--v1: 1260; --max: 2000">
  <figcaption>Visitors this month</figcaption>
  <p class="luz-ring__value">
    <span class="luz-ring__figure">1,260</span>
    <span class="luz-ring__label">of 2,000 visitors</span>
  </p>
</figure>
```

Series que suman un total, con una leyenda:

Stacked ring markup
```html
<figure class="luz-ring" style="--v1: 1260; --v2: 570">
  <figcaption>Visitors by device, this month</figcaption>
  <p class="luz-ring__value">
    <span class="luz-ring__figure">1,830</span>
    <span class="luz-ring__label">visitors</span>
  </p>
  <ul class="luz-ring__legend">
    <li class="luz-ring__item"><span class="luz-ring__name">Desktop</span> <span class="luz-ring__figure">1,260</span></li>
    <li class="luz-ring__item"><span class="luz-ring__name">Mobile</span> <span class="luz-ring__figure">570</span></li>
  </ul>
</figure>
```

### Variantes y opciones
- `--v1`: La primera serie, un número simple (1260, no 1.260). `--v2` a `--v4` añaden hasta tres más, en el orden de la leyenda
- `--max`: La meta. Sin ella, o cuando las series suman más, llenan el anillo
- `--luz-ring-size`: Lo más ancho que llega el medio anillo, 18rem por defecto; se reduce a su caja
- `--luz-ring-color`: El color de la primera serie, como `var(--luz-chart-5)`; las demás conservan de `--luz-chart-2` a `--luz-chart-4`

### Cómo funciona
El texto son los datos: el título, la cifra y su etiqueta y, para las series, una leyenda. El anillo es un dibujo de ellos, hecho por los dos pseudoelementos del párrafo (la pista y las series, cada uno recortado en una banda por una máscara), de modo que la tecnología de apoyo nunca lo encuentra.

Cada serie toma su `--v` sobre `--max`, o sobre la suma de los valores si no hay `--max`, y de `--luz-chart-1` a `--luz-chart-4` en orden, los colores de las muestras de la leyenda. Corre desde la izquierda, en el sentido de las agujas del reloj, en todos los idiomas, como un reloj. El `style` en línea solo da números; con un `style-src` estricto, ponlos en una regla propia.

La figura es un contenedor de tamaño: por debajo de 14em el texto pasa debajo del arco, no dentro. En papel el anillo se omite y se imprime el texto.

### Sin JavaScript
No lo necesita. Sin la hoja de estilos se lee como su título, la cifra con su etiqueta y la leyenda; no hay anillo.

### Teclado y ARIA
Nada recibe el foco y no hay ARIA: un lector de pantalla lee el título, la cifra, su etiqueta y la leyenda, en ese orden. Escribe la meta en la etiqueta («de 2000 visitas»): el anillo solo no la dice.

En colores forzados la pista es el fondo, así que los huecos entre series también lo son; las series y las muestras toman los mismos colores del sistema, y cada muestra enseña el número de su serie.

### Cuándo usarlo
Úsalo en un panel para cuánto falta a un valor para su meta (una cuota, un presupuesto, un límite de almacenamiento), o cómo se reparte un total en dos o tres partes, cuando la cifra es lo importante y el anillo una ojeada a ella.

### Cuándo no usarlo
No lo uses para comparar valores (usa una [lista de barras](https://nandovejer.github.io/luz/es/docs/catalog/bar-list/) o un [gráfico de columnas](https://nandovejer.github.io/luz/es/docs/catalog/column-chart/): una longitud se lee mejor que un ángulo), para más de cuatro series (usa una [barra apilada](https://nandovejer.github.io/luz/es/docs/catalog/stacked-bar/)) ni para un valor en un texto corrido o en un formulario (usa un [medidor](https://nandovejer.github.io/luz/es/docs/components/meter/)).