Card kpi Chart

Targetas kpi con graficas

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 11-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Card Dashboard

Author Raul antonio de la cruz hernandez

242

Fork Fullscreen

<!DOCTYPE html>
<html lang="es" class=""> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KPIs con Diseño Premium</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            /* Fondo degradado sutil para el efecto de cristal */
            background-color: #f3f4f6; /* Fallback modo claro */
            background-image: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        }

.dark body {
            background-color: #030712; /* Fallback modo oscuro (gray-950) */
            background-image: linear-gradient(135deg, #030712 0%, #111827 100%);
        }

/* Estilo de Tarjeta "Glassmorphism" */
        .cool-kpi-card {
            /* Fondo semi-transparente con desenfoque */
            background-color: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Soporte para Safari */
            
            /* Borde sutil para definir la tarjeta */
            border: 1px solid rgba(255, 255, 255, 0.2);
            
            /* Transiciones y sombra */
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

/* Estilo de Tarjeta en Modo Oscuro */
        .dark .cool-kpi-card {
            background-color: rgba(31, 41, 55, 0.5); /* gray-800 con 50% opacidad */
            border: 1px solid rgba(55, 65, 81, 0.5); /* gray-700 con 50% opacidad */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

/* Efecto Hover más pronunciado */
        .cool-kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 0.8);
        }

.dark .cool-kpi-card:hover {
            background-color: rgba(31, 41, 55, 0.7);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 min-h-screen p-8 transition-colors duration-300">

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

<div class="cool-kpi-card p-6 rounded-2xl">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tráfico Web</span>
                    <div class="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">78,2K</div>
                <div class="h-24 w-full">
                    <canvas id="sparkAreaChart"></canvas>
                </div>
            </div>

<div class="cool-kpi-card p-6 rounded-2xl">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Registros Diarios</span>
                    <div class="p-2 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-lg">
                         <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">451</div>
                <div class="h-24 w-full">
                    <canvas id="sparkBarChart"></canvas>
                </div>
            </div>

<div class="cool-kpi-card p-6 rounded-2xl">
                 <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Meta de Tareas</span>
                     <div class="p-2 bg-green-500/10 dark:bg-green-500/20 rounded-lg">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">85%</div>
                <div class="h-24 w-full flex items-center justify-center">
                    <div class="w-24 h-24"> 
                        <canvas id="sparkDoughnutChart"></canvas>
                    </div>
                </div>
            </div>
            
            
            <div class="cool-kpi-card p-6 rounded-2xl">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tasa de Rebote</span>
                    <div class="p-2 bg-red-500/10 dark:bg-red-500/20 rounded-lg">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0v-8m0 8l-8-8-4 4-6-6"></path></svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-gray-900 dark:text-white mb-4">21.4%</div>
                <div class="h-24 w-full">
                    <canvas id="sparkLineChart"></canvas>
                </div>
            </div>

</div> 
    </div>

// --- Helper para Configuración de Tooltip ---
        function getTooltipConfig(colors) {
            return {
                enabled: true,
                mode: 'index',
                intersect: false,
                displayColors: false,
                backgroundColor: colors.tooltipBg,
                titleColor: colors.tooltipTitle,
                bodyColor: colors.tooltipBody,
                padding: 10,
                cornerRadius: 6,
                titleFont: { family: 'Inter', size: 12, weight: '500' },
                bodyFont: { family: 'Inter', size: 14, weight: 'bold' },
                callbacks: {
                    title: (tooltipItems) => tooltipItems[0].label,
                    label: (tooltipItem) => ` ${tooltipItem.formattedValue}`
                }
            };
        }

// --- Inicialización de TODOS los Gráficos ---
        function initCharts() {
            const isDark = document.documentElement.classList.contains('dark');
            const colors = isDark ? chartColors.dark : chartColors.light;

// 1. Gráfico de ÁREA
            const ctxArea = document.getElementById('sparkAreaChart')?.getContext('2d');
            if (ctxArea) {
                sparkAreaChart = new Chart(ctxArea, {
                    type: 'line',
                    data: {
                        labels: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7'],
                        datasets: [{
                            label: 'Tráfico', data: [30, 40, 25, 50, 45, 60, 55],
                            borderColor: colors.line,
                            borderWidth: 2,
                            fill: true,
                            backgroundColor: colors.areaBg,
                            tension: 0.4,
                            pointRadius: 0, pointHoverRadius: 6,
                            pointHoverBackgroundColor: colors.line, pointHoverBorderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: getTooltipConfig(colors) },
                        scales: { x: { display: false }, y: { display: false } }
                    }
                });
            }

// 2. Gráfico de BARRAS
            const ctxBar = document.getElementById('sparkBarChart')?.getContext('2d');
            if (ctxBar) {
                sparkBarChart = new Chart(ctxBar, {
                    type: 'bar',
                    data: {
                        labels: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7'],
                        datasets: [{
                            label: 'Registros', data: [120, 150, 130, 180, 160, 200, 190],
                            backgroundColor: colors.bar,
                            hoverBackgroundColor: colors.barHover,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: getTooltipConfig(colors) },
                        scales: { x: { display: false }, y: { display: false } }
                    }
                });
            }

// 3. Gráfico de DONA (Pie)
            const ctxDoughnut = document.getElementById('sparkDoughnutChart')?.getContext('2d');
            if (ctxDoughnut) {
                sparkDoughnutChart = new Chart(ctxDoughnut, {
                    type: 'doughnut',
                    data: {
                        labels: ['Completado', 'Pendiente'],
                        datasets: [{
                            data: [85, 15], // 85% completado
                            backgroundColor: [colors.doughnutPrimary, colors.doughnutBg],
                            borderColor: colors.doughnutBorder,
                            borderWidth: 3
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: true,
                        cutout: '75%', // Grosor de la dona
                        plugins: {
                            legend: { display: false },
                            tooltip: { // Tooltip personalizado para donas
                                enabled: true, displayColors: false,
                                backgroundColor: colors.tooltipBg, titleColor: colors.tooltipTitle, bodyColor: colors.tooltipBody,
                                padding: 8, cornerRadius: 6,
                                callbacks: {
                                    label: (tooltipItem) => ` ${tooltipItem.label}: ${tooltipItem.formattedValue}%`
                                }
                            }
                        }
                    }
                });
            }

// 4. Gráfico de LÍNEA
            const ctxLine = document.getElementById('sparkLineChart')?.getContext('2d');
            if (ctxLine) {
                sparkLineChart = new Chart(ctxLine, {
                    type: 'line',
                     data: {
                        labels: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7'],
                        datasets: [{
                            label: 'Tasa', data: [25, 22, 24, 20, 21, 19, 21.4],
                            borderColor: colors.line2,
                            borderWidth: 2,
                            fill: false, // Sin relleno
                            tension: 0.4,
                            pointRadius: 0, pointHoverRadius: 6,
                            pointHoverBackgroundColor: colors.line2, pointHoverBorderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true, maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: getTooltipConfig(colors) },
                        scales: { x: { display: false }, y: { display: false } }
                    }
                });
            }
        }

// --- Actualización de Colores (al cambiar de tema) ---
        function updateCharts() {
            const isDark = document.documentElement.classList.contains('dark');
            const colors = isDark ? chartColors.dark : chartColors.light;

// Actualizar Tooltip genérico
            const newTooltipConfig = getTooltipConfig(colors);
            
            if (sparkAreaChart) {
                const ds = sparkAreaChart.data.datasets[0];
                ds.borderColor = colors.line;
                ds.backgroundColor = colors.areaBg;
                ds.pointHoverBackgroundColor = colors.line;
                sparkAreaChart.options.plugins.tooltip = newTooltipConfig;
                sparkAreaChart.update('none');
            }
            if (sparkBarChart) {
                const ds = sparkBarChart.data.datasets[0];
                ds.backgroundColor = colors.bar;
                ds.hoverBackgroundColor = colors.barHover;
                sparkBarChart.options.plugins.tooltip = newTooltipConfig;
                sparkBarChart.update('none');
            }
            if (sparkDoughnutChart) {
                const ds = sparkDoughnutChart.data.datasets[0];
                ds.backgroundColor = [colors.doughnutPrimary, colors.doughnutBg];
                ds.borderColor = colors.doughnutBorder;
                sparkDoughnutChart.options.plugins.tooltip.backgroundColor = colors.tooltipBg;
                sparkDoughnutChart.options.plugins.tooltip.titleColor = colors.tooltipTitle;
                sparkDoughnutChart.options.plugins.tooltip.bodyColor = colors.tooltipBody;
                sparkDoughnutChart.update('none');
            }
            if (sparkLineChart) {
                const ds = sparkLineChart.data.datasets[0];
                ds.borderColor = colors.line2;
                ds.pointHoverBackgroundColor = colors.line2;
                sparkLineChart.options.plugins.tooltip = newTooltipConfig;
                sparkLineChart.update('none');
            }
        }
        document.addEventListener('DOMContentLoaded', initCharts);
    </script>

</body>
</html>

Related Examples