Skip to content

Instantly share code, notes, and snippets.

@Jcbertorello

Jcbertorello/dashboard.html

Created December 26, 2025 19:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jcbertorello/3347069fc65bb94585e31fa28bfbbd1a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jcbertorello/3347069fc65bb94585e31fa28bfbbd1a to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard Ajonjolí - 2025-12-26 19:02
Raw
dashboard.html
¡Excelente! He analizado los datos de taquilla de Cinexo para Julio 2025. Aquí tienes el dashboard HTML completo, diseñado para ofrecer una visión clara y detallada del rendimiento de espectadores.
---
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard de Espectadores Julio 2025 - Cinexo - Cinexo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
/* === RESET Y BASE === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 100vh;
color: #1e293b;
line-height: 1.6;
}
/* === HEADER === */
.header {
background: linear-gradient(135deg, #1F3B4D 0%, #2D5066 100%);
color: white;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 20px rgba(31, 59, 77, 0.3);
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2360B99A' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.header-content {
display: flex;
align-items: center;
gap: 1rem;
z-index: 1;
}
.logo {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #60B99A 0%, #4A9D80 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.5rem;
color: white;
box-shadow: 0 4px 15px rgba(96, 185, 154, 0.4);
}
.header-title h1 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.header-title p {
font-size: 0.875rem;
opacity: 0.9;
}
.header-actions {
display: flex;
gap: 0.75rem;
z-index: 1;
}
.btn {
padding: 0.625rem 1.25rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, #60B99A 0%, #4A9D80 100%);
color: white;
box-shadow: 0 2px 10px rgba(96, 185, 154, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(96, 185, 154, 0.4);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.15);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.25);
}
/* === CONTENEDOR PRINCIPAL === */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* === INFO BAR === */
.info-bar {
background: white;
border-radius: 12px;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-left: 4px solid #60B99A;
}
.info-bar-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #64748b;
}
.info-bar-item strong {
color: #1e293b;
}
/* === KPIs === */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem;
margin-bottom: 2rem;
}
.kpi-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.kpi-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #60B99A 0%, #4A9D80 100%);
}
.kpi-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.kpi-card.highlight::before {
background: linear-gradient(180deg, #FFB74D 0%, #FF9800 100%);
}
.kpi-card.success::before {
background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}
.kpi-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, rgba(96, 185, 154, 0.1) 0%, rgba(96, 185, 154, 0.2) 100%);
}
.kpi-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
margin-bottom: 0.5rem;
font-weight: 600;
}
.kpi-value {
font-size: 1.75rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.kpi-detail {
font-size: 0.8rem;
color: #64748b;
}
.kpi-trend {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 20px;
font-weight: 600;
}
.kpi-trend.up {
background: rgba(22, 163, 74, 0.1);
color: #16a34a;
}
.kpi-trend.down {
background: rgba(220, 38, 38, 0.1);
color: #dc2626;
}
/* === ALERTAS === */
.alert {
padding: 1rem 1.25rem;
border-radius: 10px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
}
.alert-success {
background: rgba(22, 163, 74, 0.1);
border: 1px solid rgba(22, 163, 74, 0.2);
color: #15803d;
}
.alert-warning {
background: rgba(255, 183, 77, 0.15);
border: 1px solid rgba(255, 183, 77, 0.3);
color: #b45309;
}
.alert-danger {
background: rgba(220, 38, 38, 0.1);
border: 1px solid rgba(220, 38, 38, 0.2);
color: #b91c1c;
}
.alert-info {
background: rgba(96, 185, 154, 0.1);
border: 1px solid rgba(96, 185, 154, 0.2);
color: #1F3B4D;
}
/* === GRID DE GRÁFICOS === */
.charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.chart-card.full-width {
grid-column: 1 / -1;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f5f9;
}
.chart-title {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
}
.chart-subtitle {
font-size: 0.75rem;
color: #64748b;
margin-top: 0.25rem;
}
.chart-container {
position: relative;
height: 300px;
}
.chart-card.full-width .chart-container {
height: 350px;
}
/* === TABLAS === */
.table-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem;
overflow: hidden;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.table-title {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
}
.table-wrapper {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
padding: 0.875rem 1rem;
text-align: left;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
font-weight: 600;
border-bottom: 2px solid #e2e8f0;
}
td {
padding: 0.875rem 1rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.875rem;
color: #334155;
}
tr:hover td {
background: rgba(96, 185, 154, 0.05);
}
tr:last-child td {
border-bottom: none;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.font-medium {
font-weight: 500;
}
.font-bold {
font-weight: 700;
}
/* === BADGES === */
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.badge-success {
background: rgba(22, 163, 74, 0.1);
color: #16a34a;
}
.badge-warning {
background: rgba(255, 183, 77, 0.15);
color: #b45309;
}
.badge-danger {
background: rgba(220, 38, 38, 0.1);
color: #dc2626;
}
.badge-info {
background: rgba(96, 185, 154, 0.1);
color: #1F3B4D;
}
/* === PROGRESS BARS === */
.progress-container {
display: flex;
align-items: center;
gap: 0.75rem;
}
.progress-bar {
flex: 1;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 4px;
transition: width 0.5s ease;
}
.progress-fill.high { background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%); }
.progress-fill.medium { background: linear-gradient(90deg, #FFB74D 0%, #FFA726 100%); }
.progress-fill.low { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
.progress-value {
min-width: 45px;
text-align: right;
font-weight: 600;
font-size: 0.8rem;
}
/* === FOOTER === */
.footer {
margin-top: 2rem;
padding: 1.5rem 2rem;
background: white;
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.mostachia-badge {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mostachia-badge .badge-logo {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #60B99A 0%, #4A9D80 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
color: white;
}
.mostachia-badge .badge-text {
font-size: 0.8rem;
color: #64748b;
}
.footer-info {
font-size: 0.75rem;
color: #94a3b8;
text-align: right;
}
/* === PRINT STYLES === */
@media print {
body {
background: white;
}
.btn, .header-actions {
display: none !important;
}
.chart-card, .kpi-card, .table-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #e2e8f0;
}
.container {
max-width: 100%;
padding: 1rem;
}
}
/* === RESPONSIVE === */
@media (max-width: 1024px) {
.charts-grid {
grid-template-columns: 1fr;
}
.kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.kpi-grid {
grid-template-columns: 1fr;
}
.info-bar {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.footer-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="header-content">
<div class="logo">C</div>
<div class="header-title">
<h1>Dashboard de Espectadores Julio 2025 - Cinexo</h1>
<p>Cinexo • Julio 2025</p>
</div>
</div>
<div class="header-actions">
<button class="btn btn-secondary" onclick="window.print()">
🖨️ Imprimir
</button>
<button class="btn btn-primary" onclick="exportarPDF()">
📥 Descargar PDF
</button>
</div>
</header>
<div class="container">
<!-- INFO BAR -->
<div class="info-bar">
<div class="info-bar-item">
📅 <strong>Período:</strong> 01/07/2025 al 31/07/2025
</div>
<div class="info-bar-item">
🕐 <strong>Generado:</strong> <span id="fecha-generacion-1"></span>
</div>
<div class="info-bar-item">
📊 <strong>Tipo:</strong> Análisis de Taquilla
</div>
</div>
<!-- KPIs -->
<div class="kpi-grid">
<div class="kpi-card success">
<div class="kpi-icon">🎬</div>
<div class="kpi-label">Total Espectadores (Julio)</div>
<div class="kpi-value">33.303</div>
<div class="kpi-detail">
<span class="kpi-trend up">↑ 37.72%</span> vs Junio
</div>
</div>
<div class="kpi-card">
<div class="kpi-icon">🗓️</div>
<div class="kpi-label">Espectadores (Junio)</div>
<div class="kpi-value">24.186</div>
<div class="kpi-detail">Mes anterior</div>
</div>
<div class="kpi-card">
<div class="kpi-icon">📈</div>
<div class="kpi-label">Variación Mensual</div>
<div class="kpi-value">+9.117</div>
<div class="kpi-detail">Espectadores adicionales</div>
</div>
<div class="kpi-card">
<div class="kpi-icon">🏆</div>
<div class="kpi-label">Película más vista</div>
<div class="kpi-value">F1 2D+4D</div>
<div class="kpi-detail">5.374 espectadores</div>
</div>
</div>
<!-- ALERTAS -->
<div class="alert alert-success">
<strong>🚀 ¡Excelente rendimiento!</strong> La cantidad de espectadores aumentó un <strong>37.72%</strong> en Julio, superando significativamente al mes anterior.
</div>
<!-- GRÁFICOS -->
<div class="charts-grid">
<div class="chart-card full-width">
<div class="chart-header">
<div>
<h3 class="chart-title">🏆 Top 10 Películas por Espectadores</h3>
<p class="chart-subtitle">Distribución de los espectadores entre las películas más populares del mes.</p>
</div>
</div>
<div class="chart-container">
<canvas id="chartTopPeliculas"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<div>
<h3 class="chart-title">📅 Distribución por Día de la Semana</h3>
<p class="chart-subtitle">Afluencia de espectadores a lo largo de la semana.</p>
</div>
</div>
<div class="chart-container">
<canvas id="chartDiasSemana"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<div>
<h3 class="chart-title">📊 Comparativa Mensual de Espectadores</h3>
<p class="chart-subtitle">Evolución de espectadores de Junio a Julio 2025.</p>
</div>
</div>
<div class="chart-container">
<canvas id="chartComparativaMensual"></canvas>
</div>
</div>
</div>
<!-- TABLAS -->
<div class="table-card">
<div class="table-header">
<h3 class="table-title">🎬 Ranking Detallado de Películas</h3>
<span class="badge badge-info">Julio 2025</span>
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>#</th>
<th>Película</th>
<th class="text-right">Espectadores</th>
<th class="text-right">% del Total</th>
</tr>
</thead>
<tbody>
<tr><td class="font-bold">1</td><td class="font-medium">F1 2D+4D</td><td class="text-right font-bold">5.374</td><td class="text-right">16,1%</td></tr>
<tr><td class="font-bold">2</td><td class="font-medium">Jurassic World: Renace 3D+4D</td><td class="text-right font-bold">3.930</td><td class="text-right">11,8%</td></tr>
<tr><td class="font-bold">3</td><td class="font-medium">Jurassic World: Renace 2D+4D</td><td class="text-right font-bold">3.087</td><td class="text-right">9,3%</td></tr>
<tr><td>4</td><td class="font-medium">Cómo entrenar a tu dragón 3D+4D</td><td class="text-right">2.728</td><td class="text-right">8,2%</td></tr>
<tr><td>5</td><td class="font-medium">Lilo y Stitch 3D</td><td class="text-right">1.596</td><td class="text-right">4,8%</td></tr>
<tr><td>6</td><td class="font-medium">Lilo y Stitch 2D</td><td class="text-right">1.126</td><td class="text-right">3,4%</td></tr>
<tr><td>7</td><td class="font-medium">Superman 2D+4D</td><td class="text-right">1.108</td><td class="text-right">3,3%</td></tr>
<tr><td>8</td><td class="font-medium">Jurassic World: Renace 3D ATMOS</td><td class="text-right">1.093</td><td class="text-right">3,3%</td></tr>
<tr><td>9</td><td class="font-medium">Jurassic World: Renace 2D ATMOS</td><td class="text-right">1.087</td><td class="text-right">3,3%</td></tr>
<tr><td>10</td><td class="font-medium">Jurassic World: Renace</td><td class="text-right">908</td><td class="text-right">2,7%</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-content">
<div class="mostachia-badge">
<span class="badge-logo">M</span>
<span class="badge-text">Powered by MostachIA<br><small>Procesos inteligentes, resultados superiores</small></span>
</div>
<div class="footer-info">
Dashboard generado automáticamente<br>
<span id="fecha-generacion-2"></span>
</div>
</div>
</footer>
<script>
// === FECHA DE GENERACIÓN ===
const fechaGeneracion = new Date().toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) + ' hs.';
document.getElementById('fecha-generacion-1').textContent = fechaGeneracion;
document.getElementById('fecha-generacion-2').textContent = fechaGeneracion;
// === UTILIDADES DE FORMATO ===
function formatearMoneda(valor) {
return new Intl.NumberFormat('es-AR', {
style: 'currency',
currency: 'ARS',
minimumFractionDigits: 2
}).format(valor);
}
function formatearNumero(valor) {
return new Intl.NumberFormat('es-AR').format(valor);
}
function formatearPorcentaje(valor) {
return valor.toFixed(1) + '%';
}
// === CONFIGURACIÓN GLOBAL DE CHART.JS ===
Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
Chart.defaults.color = '#64748b';
Chart.defaults.plugins.legend.labels.usePointStyle = true;
Chart.defaults.plugins.legend.labels.padding = 20;
const chartColors = {
primary: '#60B99A',
primaryLight: '#7FCDB2',
primaryDark: '#4A9D80',
secondary: '#1F3B4D',
secondaryLight: '#2D5066',
palette: ['#60B99A', '#1F3B4D', '#7FCDB2', '#2D5066', '#4A9D80', '#5A7A8A', '#8FA5B2', '#A8D5C2', '#FFB74D', '#E57373'],
boleteria: '#60B99A',
candy: '#FFB74D',
positivo: '#16a34a',
negativo: '#dc2626'
};
// === FUNCIÓN EXPORTAR PDF ===
function exportarPDF() {
const element = document.body;
const opt = {
margin: 10,
filename: 'cinexo-taquilla-2025-07-31.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => btn.style.display = 'none');
html2pdf().set(opt).from(element).save().then(() => {
buttons.forEach(btn => btn.style.display = 'flex');
});
}
// === GRÁFICOS ===
// 1. Gráfico Top 10 Películas
const ctxTopPeliculas = document.getElementById('chartTopPeliculas');
new Chart(ctxTopPeliculas, {
type: 'bar',
data: {
labels: ["F1 2D+4D", "Jurassic World: Renace 3D+4D", "Jurassic World: Renace 2D+4D", "Cómo entrenar a tu dragón 3D+4D", "Lilo y Stitch 3D", "Lilo y Stitch 2D", "Superman 2D+4D", "Jurassic World: Renace 3D ATMOS", "Jurassic World: Renace 2D ATMOS", "Jurassic World: Renace"],
datasets: [{
label: 'Espectadores',
data: [5374, 3930, 3087, 2728, 1596, 1126, 1108, 1093, 1087, 908],
backgroundColor: chartColors.palette,
borderRadius: 6,
borderSkipped: false
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function(context) {
return 'Espectadores: ' + formatearNumero(context.raw);
}
}
}
},
scales: {
x: {
beginAtZero: true,
ticks: {
callback: function(value) {
return (value/1000) + 'K';
}
}
}
}
}
});
// 2. Gráfico Distribución por Día de la Semana
const ctxDiasSemana = document.getElementById('chartDiasSemana');
new Chart(ctxDiasSemana, {
type: 'bar',
data: {
labels: ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
datasets: [{
label: 'Espectadores',
data: [2739, 3406, 4833, 4196, 4568, 6698, 6863],
backgroundColor: chartColors.primary,
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return (value/1000) + 'K';
}
}
}
}
}
});
// 3. Gráfico Comparativa Mensual
const ctxComparativa = document.getElementById('chartComparativaMensual');
new Chart(ctxComparativa, {
type: 'bar',
data: {
labels: ['Junio 2025', 'Julio 2025'],
datasets: [{
label: 'Espectadores',
data: [24186, 33303],
backgroundColor: [chartColors.secondaryLight, chartColors.primary],
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function(context) {
return 'Espectadores: ' + formatearNumero(context.raw);
}
}
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return formatearNumero(value);
}
}
}
}
}
});
</script>
</body>
</html>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment