Medidor

Medidor analógico con aguja que oscila hasta su valor.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { AnalogGauge } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
value	number	72	Valor que marca la aguja.
min	number	0	Valor al inicio de la escala.
max	number	100	Valor al final de la escala.
label	string	"Presión"	Rótulo impreso en la carátula.
unit	string	"PSI"	Unidad impresa en la carátula.
ticks	number	11	Marcas grandes con número.
redline	number	85	Valor donde empieza la zona roja (usa el máximo para quitarla).
size	number	320	Diámetro del medidor, en px.
bounce	number	0.55	Cuánto se pasa y oscila la aguja antes de asentarse.
accent	string	"#ff6a2a"	Color pintado en la punta de la aguja.
wander	boolean	false	Cambia el valor solo cada pocos segundos (útil en demos).
interval	number	2.8	Segundos entre cambios cuando wander está activo.

Anillo de progreso
Pro
Anillo de progreso con degradado, punta luminosa que lo encabeza y un número que cuenta; con un clic se llena de nuevo.
Datos
Carrera de barras
Pro
Barras que compiten ronda tras ronda: crecen con resorte y las filas se reordenan cuando alguien rebasa a otro.
Datos
Dona
Pro
Gráfica de dona que se arma por segmentos con leyenda; al pasar el cursor, un segmento se separa y el resto se atenúa.
Datos