charts-stats-b 📊

Una suite de componentes de gráficas React (SVG) de alto rendimiento, diseñadas con animaciones fluidas de entrada, transiciones elásticas y efectos táctiles/hover premium (como ondas expansivas de radar y rebotes orgánicos).

Características principales

• Gráficas de SVG nativas: Sin dependencias pesadas de canvas o librerías de terceros complejas.
• Gráfica de Área Suavizada (AreaChart): Dibuja líneas utilizando curvas de Bézier cúbicas con degradados fluidos y un halo interactivo pulsante (efecto radar/sonar) al hacer hover sobre los puntos de datos.
• Gráfica de Barras con Degradado (BarChart): Barras con gradientes personalizables que crecen elásticamente y se estiran (scale) al tocarlas o posicionar el cursor sobre ellas.
• Gráfica de Pastel / Dona (DonutChart): Renderiza segmentos planos estilizados con porcentajes automáticos calculados y dibujados en el centro de las rebanadas, acompañado de una leyenda con viñetas rotadas en 3D.
• Gráfica de Velocímetro (GaugeChart): Medidor de eficiencia con aguja elástica interactiva y arco de degradado de color dinámico.
• Gráfica de Embudo (FunnelChart): Canal de embudo con escala horizontal interactiva 3D y rebotes en hover.
• Anillos Concéntricos (ConcentricRingsChart): Progreso de múltiples variables apiladas individualmente con efectos de barrido desfasados y control de grosor dinámico.
• Soporte TypeScript completo: Tipados nativos e inteligentes para facilitar la integración.

Instalación

Instala el paquete en tu proyecto usando npm:

npm install charts-stats-b

Guía de Uso

Importa los componentes directamente en tu aplicación de React:

import {
  AreaChart,
  BarChart,
  DonutChart,
  GaugeChart,
  FunnelChart,
  ConcentricRingsChart
} from 'charts-stats-b';

1. Gráfica de Área Suavizada (AreaChart)

Ideal para visualizar tendencias temporales o flujos de datos continuos.

const timelineData = [
  { label: 'Lunes', value: 12 },
  { label: 'Martes', value: 38 },
  { label: 'Miércoles', value: 20 },
  { label: 'Jueves', value: 48 },
  { label: 'Viernes', value: 34 }
];

<AreaChart
  data={timelineData}
  color="#ec4899" // Color de la línea y el brillo
  gradientColor="rgba(236, 72, 153, 0)" // Color final del degradado inferior
  height={240} // Altura en píxeles
/>

2. Gráfica de Barras (BarChart)

Excelente para comparar valores categóricos con gradientes de color.

const categoryData = [
  { label: 'Ene', value: 2 },
  { label: 'Feb', value: 5 },
  { label: 'Mar', value: 1 },
  { label: 'Abr', value: 4 },
  { label: 'May', value: 3 }
];

<BarChart
  data={categoryData}
  colorStart="#3b82f6" // Color inicial del gradiente de la barra
  colorEnd="#10b981"   // Color final del gradiente de la barra
  height={240}
/>

3. Gráfica de Pastel (DonutChart)

Perfecta para ver la distribución porcentual de categorías.

const distributionData = [
  { label: 'Blancas', value: 76, color: '#6366f1' },
  { label: 'Colores', value: 24, color: '#f59e0b' }
];

<DonutChart
  data={distributionData}
  height={240}
/>

4. Gráfica de Medidor / Velocímetro (GaugeChart)

Ideal para tasas de conversión, KPI de eficiencia y niveles de servicio.

<GaugeChart
  value={82} // Porcentaje de 0 a 100
  label="Nivel de Servicio"
  color="#f43f5e"
  height={200}
/>

5. Gráfica de Embudo (FunnelChart)

Perfecta para procesos secuenciales de producción o embudos de conversión.

const funnelData = [
  { label: 'Recibido', value: 34, color: '#6366f1' },
  { label: 'En Lavado', value: 28, color: '#8b5cf6' },
  { label: 'Planchado', value: 22, color: '#d946ef' },
  { label: 'Listo/Entregado', value: 15, color: '#ec4899' }
];

<FunnelChart
  data={funnelData}
  height={200}
/>

6. Gráfica de Anillos Concéntricos (ConcentricRingsChart)

Excelente para visualización paralela de la carga de múltiples equipos.

const ringsData = [
  { label: 'Lavadoras', value: 85, color: '#6366f1' },
  { label: 'Secadoras', value: 60, color: '#ec4899' },
  { label: 'Planchadoras', value: 92, color: '#10b981' }
];

<ConcentricRingsChart
  data={ringsData}
  height={200}
/>

Propiedades (Props)

AreaChart

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | data | DataPoint[] | Requerido | Array de objetos { label: string, value: number } | | color | string | '#ec4899' | Color hexadecimal de la línea, puntos y halo de hover | | gradientColor | string | 'rgba(236, 72, 153, 0)' | Color de base del degradado de área | | height | number | 240 | Altura del contenedor SVG |

BarChart

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | data | BarDataPoint[] | Requerido | Array de objetos { label: string, value: number } | | colorStart | string | '#00a896' | Color superior del gradiente de la barra | | colorEnd | string | '#028090' | Color inferior del gradiente de la barra | | height | number | 240 | Altura del contenedor SVG |

DonutChart

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | data | DonutDataPoint[] | Requerido | Array de objetos { label: string, value: number, color?: string } | | height | number | 240 | Altura del contenedor SVG |

GaugeChart

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | value | number | Requerido | Valor entre 0 y 100 | | label | string | 'Eficiencia' | Etiqueta en el centro inferior | | color | string | '#f43f5e' | Color hexadecimal principal del arco y el brillo | | height | number | 200 | Altura de la gráfica |

FunnelChart

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | data | FunnelStage[] | Requerido | Array de objetos { label: string, value: number, color?: string } | | height | number | 240 | Altura del contenedor SVG |

ConcentricRingsChart

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | data | RingData[] | Requerido | Array de objetos { label: string, value: number, color: string } | | height | number | 240 | Altura del contenedor SVG |

Licencia

ISC