Visualización de Datos
Reglas
- Recharts para gráficos React estándar: componibles, tipados y responsivos de fábrica
- Nivo para gráficos interactivos enriquecidos (mapas de calor, mapas de árbol, sankeys): API declarativa con animaciones integradas
- D3 solo para visualizaciones personalizadas o novedosas: úsalo con referencias de React, no permitas que D3 gestione el DOM
- Siempre envuelve en
<ResponsiveContainer width="100%" height={300}>— nunca uses dimensiones de píxeles fijas - Paleta de colores: usa una paleta segura para daltonismo (p. ej., Tableau 10, ColorBrewer) — nunca te bases solo en rojo/verde
- Formato de ejes: números legibles (1,2K, $3,4M), etiquetas rotadas si hay más de 8 categorías
- Tooltips: muestra valores exactos al pasar el cursor con unidades y formato localizado
- Leyendas: colócalas fuera del área del gráfico, usa etiquetas claras — oculta la leyenda si solo hay una serie
- Estado de carga: renderiza un esqueleto que coincida con la forma del gráfico — no un spinner genérico
- Obtén los datos en el componente padre y pásalos al gráfico como props — nunca obtengas datos dentro de los componentes del gráfico
- Para cuadros de mando SEO, usa datos del endpoint de YepAPI (puntuaciones de auditoría de páginas, tendencias de palabras clave, crecimiento de backlinks) como fuentes de datos del gráfico
- Modo oscuro: define un objeto de tema con colores de fondo, cuadrícula, texto y series — cambia según el contexto del tema
Selección del Tipo de Gráfico
- Línea: tendencias a lo largo del tiempo (tráfico, ingresos)
- Barras: comparaciones de categorías (páginas por puntuación, palabras clave por volumen)
- Área: volumen acumulativo (total de backlinks a lo largo del tiempo)
- Circular/Donut: partes de un todo, máximo 5 sectores — agrupa valores pequeños en "Otros"
- Mapa de calor: densidad de datos bidimensional (tráfico por hora y día)
- Embudo: pasos de conversión con abandono
Evitar
- Gráficos 3D — distorsionan la percepción de los datos
- Gráficos circulares con más de 5 sectores — usa un gráfico de barras horizontal en su lugar
- Gráficos sin etiquetas en los ejes o contexto — siempre proporciona unidades y rangos de tiempo
- Animar en cada re-renderizado — solo anima en la carga inicial o cambio de datos