Graficas y Visualizacion de Datos

Biblioteca de graficas basada en Recharts con area, barras, lineas, pastel y radial — todas adaptables al tema, responsivas y componibles con widgets de dashboard.

Última actualización: 2025-02-18

Graficas y Visualizacion de Datos

La biblioteca de graficas de Certexi esta construida sobre Recharts con temas personalizados de Tailwind CSS. Todas las graficas responden al modo oscuro, se redimensionan fluidamente y se componen en widgets de dashboard.

certexi.com/app/dashboard/kpi
Loading interactive demo...

Dashboard de KPIs — contadores animados, tendencias de utilizacion y graficas de rendimiento construidos completamente con componentes de la biblioteca.

Tipos de Graficas

GraficaCaso de UsoComponente
AreaTendencias en el tiempo (rendimiento, utilizacion)AreaChart
BarrasComparacion por categoria (ocupacion por zona, incidentes)BarChart
LineasTendencias multi-serie (temperatura, peso)LineChart
PastelDistribucion (tipos de activos, tipos de eventos)PieChart
RadialIndicador de valor unico (puntuacion de cumplimiento)RadialBarChart
CompuestoTipos de grafica mixtos en un ejeComposedChart

Grafica de Tendencia de Utilizacion

Seguimiento de la utilizacion de zona a lo largo del tiempo. El gradiente de area utiliza propiedades CSS personalizadas para adaptarse automaticamente a temas claro y oscuro.

<Card className="w-full">
  <CardHeader className="pb-2">
    <CardTitle className="text-sm">Tendencia Semanal de Utilizacion</CardTitle>
    <CardDescription>Zona A — Almacenamiento</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-2">
      <div className="flex items-center justify-between text-xs text-muted-foreground">
        <span>Lun</span><span>Mar</span><span>Mie</span><span>Jue</span><span>Vie</span><span>Sab</span><span>Dom</span>
      </div>
      <div className="flex items-end gap-1 h-24">
        <div className="flex-1 bg-blue-500/20 rounded-t" style={{height: '60%'}} />
        <div className="flex-1 bg-blue-500/30 rounded-t" style={{height: '72%'}} />
        <div className="flex-1 bg-blue-500/40 rounded-t" style={{height: '85%'}} />
        <div className="flex-1 bg-blue-500/50 rounded-t" style={{height: '78%'}} />
        <div className="flex-1 bg-blue-500/60 rounded-t" style={{height: '92%'}} />
        <div className="flex-1 bg-blue-500/40 rounded-t" style={{height: '65%'}} />
        <div className="flex-1 bg-blue-500/20 rounded-t" style={{height: '45%'}} />
      </div>
      <div className="flex justify-between text-xs">
        <span className="text-muted-foreground">Prom: 71%</span>
        <Badge variant="outline">Pico: 92%</Badge>
      </div>
    </div>
  </CardContent>
</Card>

Grafica de Barras de Rendimiento

Rendimiento diario de unidades de transporte procesadas — compare entre dias con estado codificado por color.

<Card className="w-full">
  <CardHeader className="pb-2">
    <CardTitle className="text-sm">Rendimiento Diario</CardTitle>
    <CardDescription>Unidades de transporte procesadas</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-1.5">
      <div className="flex items-center gap-2">
        <span className="text-xs w-8 text-muted-foreground">Lun</span>
        <div className="flex-1 h-5 bg-muted rounded overflow-hidden">
          <div className="h-full bg-green-500 rounded" style={{width: '82%'}} />
        </div>
        <span className="text-xs w-8 text-right">164</span>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-xs w-8 text-muted-foreground">Mar</span>
        <div className="flex-1 h-5 bg-muted rounded overflow-hidden">
          <div className="h-full bg-green-500 rounded" style={{width: '91%'}} />
        </div>
        <span className="text-xs w-8 text-right">182</span>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-xs w-8 text-muted-foreground">Mie</span>
        <div className="flex-1 h-5 bg-muted rounded overflow-hidden">
          <div className="h-full bg-amber-500 rounded" style={{width: '68%'}} />
        </div>
        <span className="text-xs w-8 text-right">136</span>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-xs w-8 text-muted-foreground">Jue</span>
        <div className="flex-1 h-5 bg-muted rounded overflow-hidden">
          <div className="h-full bg-green-500 rounded" style={{width: '95%'}} />
        </div>
        <span className="text-xs w-8 text-right">190</span>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-xs w-8 text-muted-foreground">Vie</span>
        <div className="flex-1 h-5 bg-muted rounded overflow-hidden">
          <div className="h-full bg-green-500 rounded" style={{width: '88%'}} />
        </div>
        <span className="text-xs w-8 text-right">176</span>
      </div>
    </div>
  </CardContent>
</Card>

Distribucion de Incidentes

Visualice las categorias de incidentes en la instalacion como un desglose segmentado.

<Card className="w-72">
  <CardHeader className="pb-2">
    <CardTitle className="text-sm">Incidentes por Tipo</CardTitle>
    <CardDescription>Ultimos 30 dias</CardDescription>
  </CardHeader>
  <CardContent className="space-y-3">
    <div className="flex h-4 rounded-full overflow-hidden">
      <div className="bg-red-500" style={{width: '35%'}} />
      <div className="bg-amber-500" style={{width: '25%'}} />
      <div className="bg-blue-500" style={{width: '22%'}} />
      <div className="bg-gray-400" style={{width: '18%'}} />
    </div>
    <div className="grid grid-cols-2 gap-2 text-xs">
      <div className="flex items-center gap-1.5">
        <div className="w-2.5 h-2.5 rounded-full bg-red-500" />
        <span>Variacion de peso (35%)</span>
      </div>
      <div className="flex items-center gap-1.5">
        <div className="w-2.5 h-2.5 rounded-full bg-amber-500" />
        <span>Evidencia faltante (25%)</span>
      </div>
      <div className="flex items-center gap-1.5">
        <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
        <span>Sello no coincide (22%)</span>
      </div>
      <div className="flex items-center gap-1.5">
        <div className="w-2.5 h-2.5 rounded-full bg-gray-400" />
        <span>Otros (18%)</span>
      </div>
    </div>
  </CardContent>
</Card>

Arquitectura

Todas las graficas siguen el mismo patron de composicion:

Loading diagram…

Indicador / Puntuacion de Cumplimiento

Un indicador de progreso radial para metricas de valor unico como el porcentaje de cumplimiento.

<Card className="w-48">
  <CardContent className="pt-6 flex flex-col items-center">
    <div className="relative w-28 h-28">
      <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" strokeWidth="8" className="text-muted" />
        <circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" strokeWidth="8" className="text-green-500" strokeDasharray="264" strokeDashoffset="40" strokeLinecap="round" />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-2xl font-bold">85%</span>
      </div>
    </div>
    <p className="text-sm text-muted-foreground mt-2">Puntuacion de Cumplimiento</p>
  </CardContent>
</Card>

Uso

import {
  AreaChart, Area, XAxis, YAxis, CartesianGrid,
  Tooltip, ResponsiveContainer
} from 'recharts';

// Wrap in ResponsiveContainer for fluid sizing
<ResponsiveContainer width="100%" height={300}>
  <AreaChart data={utilizationData}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="date" />
    <YAxis />
    <Tooltip />
    <Area
      type="monotone"
      dataKey="utilization"
      stroke="hsl(var(--primary))"
      fill="hsl(var(--primary) / 0.2)"
    />
  </AreaChart>
</ResponsiveContainer>

Temas

Todas las graficas usan propiedades CSS personalizadas del sistema de diseno:

TokenUso
--primaryColor de serie predeterminado
--destructiveSerie de error/alerta
--mutedLineas de cuadricula, ejes
--foregroundEtiquetas, texto
--chart-1 hasta --chart-5Paleta multi-serie

Las graficas se adaptan automaticamente cuando el usuario alterna el modo oscuro.

Relacionado