git.admin/roi-apu-search
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(analytics): Convertir Distribución de Clicks a tabla

Browse Source 
- Convertir visualización de barras de progreso a tabla estructurada
- Columnas: Posición, Clicks (badge), Porcentaje, Distribución (barra)
- Agregar badge con total de clicks en header
- Expandir colores para posiciones 1-10 individuales

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-03 21:57:49 -06:00
parent 3367f06ee8
commit e92d2018b1
1 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
admin/class-analytics-dashboard.php
View File

@@ -606,40 +606,65 @@ final class ROI_APU_Analytics_Dashboard
<!-- 📊 Click Distribution --> <!-- 📊 Click Distribution -->
<?php if (!empty($click_distribution)) : ?> <?php if (!empty($click_distribution)) : ?>
<div class="card mb-4 shadow-sm"> <div class="card mb-4 shadow-sm">
<div class="card-header" style="background-color: #0E2337; color: white;"> <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #0E2337; color: white;">
<h6 class="mb-0 d-flex align-items-center gap-2"> <h6 class="mb-0 d-flex align-items-center gap-2">
<i class="bi bi-bar-chart-fill"></i> <i class="bi bi-bar-chart-fill"></i>
<?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?> <?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?>
</h6> </h6>
<span class="badge bg-light text-dark"><?php echo esc_html(array_sum(array_column($click_distribution, 'clicks'))); ?> <?php esc_html_e('clicks totales', 'roi-apu-search'); ?></span>
</div> </div>
<div class="card-body"> <div class="card-body p-0">
<?php <div class="table-responsive">
$position_colors = [ <table class="table table-striped table-hover mb-0">
'Pos 1' => '#FF8600', <thead class="table-light">
'Pos 2' => '#1e3a5f', <tr>
'Pos 3' => '#2c5282', <th style="width: 15%;"><?php esc_html_e('Posición', 'roi-apu-search'); ?></th>
'Pos 4' => '#3d6894', <th class="text-center" style="width: 20%;"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
'Pos 5' => '#0E2337', <th class="text-center" style="width: 15%;"><?php esc_html_e('Porcentaje', 'roi-apu-search'); ?></th>
'Pos 6+' => '#6b7280', <th style="width: 50%;"><?php esc_html_e('Distribución', 'roi-apu-search'); ?></th>
]; </tr>
foreach ($click_distribution as $dist) : </thead>
$color = $position_colors[$dist['posicion']] ?? '#6b7280'; <tbody>
?> <?php
<div class="mb-2"> $position_colors = [
<div class="d-flex justify-content-between mb-1"> 'Pos 1' => '#FF8600',
<small><strong><?php echo esc_html($dist['posicion']); ?></strong></small> 'Pos 2' => '#1e3a5f',
<small><?php echo esc_html($dist['clicks']); ?> clicks (<?php echo esc_html($dist['porcentaje']); ?>%)</small> 'Pos 3' => '#2c5282',
</div> 'Pos 4' => '#3d6894',
<div class="progress" style="height: 20px;"> 'Pos 5' => '#4a7eb0',
<div class="progress-bar" role="progressbar" 'Pos 6' => '#5a8ec0',
style="width: <?php echo esc_attr($dist['porcentaje']); ?>%; background-color: <?php echo esc_attr($color); ?>;" 'Pos 7' => '#6a9ed0',
aria-valuenow="<?php echo esc_attr($dist['porcentaje']); ?>" 'Pos 8' => '#7aaee0',
aria-valuemin="0" 'Pos 9' => '#8abef0',
aria-valuemax="100"> 'Pos 10' => '#9aceff',
</div> 'Pos 11+' => '#6b7280',
</div> ];
foreach ($click_distribution as $dist) :
$color = $position_colors[$dist['posicion']] ?? '#6b7280';
?>
<tr>
<td><strong><?php echo esc_html($dist['posicion']); ?></strong></td>
<td class="text-center">
<span class="badge" style="background-color: <?php echo esc_attr($color); ?>;">
<?php echo esc_html(number_format((int)$dist['clicks'])); ?>
</span>
</td>
<td class="text-center"><?php echo esc_html($dist['porcentaje']); ?>%</td>
<td>
<div class="progress" style="height: 18px;">
<div class="progress-bar" role="progressbar"
style="width: <?php echo esc_attr($dist['porcentaje']); ?>%; background-color: <?php echo esc_attr($color); ?>;"
aria-valuenow="<?php echo esc_attr($dist['porcentaje']); ?>"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div> </div>
<?php endforeach; ?>
</div> </div>
</div> </div>
<?php endif; ?> <?php endif; ?>