Gráficos de panel con cero dependencias
Construimos las líneas de tendencia, los minigráficos y las barras por categoría de nuestro panel como SVG en línea. Sin librería de gráficos, unos cientos de líneas en total y modo oscuro gratis. Aquí va el argumento a favor de los gráficos hechos a mano, y cuándo no deberías hacerlo bajo ningún concepto.
Cuando añadimos un panel de inventario, lo evidente era instalar una librería de gráficos. Las populares son excelentes. También son grandes, tienen sus propias ideas sobre los temas y están hechas para resolver mil casos cuando nosotros necesitábamos cuatro: una línea de tendencia con dos series, un minigráfico por fila, una barra de nivel de stock y un desglose por categorías. Los escribimos como SVG en línea y el conjunto entero ocupó menos que las definiciones de tipos de la mayoría de las librerías.
Un gráfico es un trazado
Quítale las herramientas y un gráfico de líneas es una cadena de texto: un path de SVG construido a partir de tus valores. Convierte el índice de cada punto en x, cada valor en y, y únelos. La única sutileza que merece la pena apuntar es el margen: coloca el valor máximo unos píxeles por debajo del borde superior o el viewBox partirá por la mitad el trazo de tu pico.
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clippedconst max = Math.max(1, ...values);const x = (i) => (i / (values.length - 1)) * W;const y = (v) => PAD + (H - PAD) * (1 - v / max); const d = values .map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`) .join(' '); // <path d={d} fill="none" stroke="var(--color-primary)" strokeWidth="2" />El modo oscuro no cuesta nada
La victoria discreta son los temas. Nuestros tokens de diseño son variables CSS, y los trazos y rellenos de SVG las aceptan como cualquier otra propiedad. stroke="var(--color-primary)" significa que el gráfico se recolorea en cuanto cambia el tema, sin configuración de tema propia del gráfico, sin una paleta duplicada y sin que los gráficos se desvíen del resto de la interfaz. Cuando más tarde ajustamos nuestra paleta oscura, los gráficos la siguieron sin que los tocáramos.
Los extremos son tuyos
Las librerías son generosas con las funcionalidades y tacañas con los casos límite que solo son tuyos. ¿Qué debería hacer un minigráfico con un único dato? ¿Qué dice el gráfico de tendencia cuando un negocio acaba de empezar y todos los valores son cero? Los componentes hechos a mano hacen que esas decisiones sean explícitas y baratas: un estado vacío honesto con una frase, una línea plana en vez de un error, un resumen en texto junto a cada gráfico para los lectores de pantalla y una sola media query de prefers-reduced-motion que apaga la animación de dibujado.
- Dale a cada gráfico un aria-label y un resumen en lenguaje claro. El SVG es decoración; la frase son los datos.
- Anima los trazos con stroke-dashoffset para el efecto de dibujado, y déjalo detrás de prefers-reduced-motion.
- Mantén juntos el cálculo y el marcado. Un componente de gráfico que se lee de arriba abajo en una pantalla es un gráfico que puedes arreglar a las once de la noche.
- Diseña primero el estado vacío. Las cuentas nuevas lo ven más que ningún otro.
Cuándo deberías usar una librería
Hacerlo a mano deja de ser inteligente en cuanto los requisitos enseñan los dientes. Zoom y selección por arrastre, escalas logarítmicas, áreas apiladas con una interpolación decente, ejes con las marcas bien repartidas, dibujado en canvas para decenas de miles de puntos: son problemas resueltos, y volver a resolverlos a mano es como una funcionalidad de dos días se convierte en una afición de dos meses. Nuestra regla es sencilla. Si el gráfico es presentación, escribe el SVG. Si el gráfico es un instrumento que el usuario maneja, asume la dependencia y alégrate de que alguien la mantenga.
La mejor librería de gráficos para cuatro gráficos pequeños resultó ser un bucle for.
