@zumito-team/analytics-module 0.6.0 → 0.8.0

package/dist/views/admin-analytics-commands.ejs

@@ -0,0 +1,55 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground">Comandos</h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Comandos por Dia</h3>
+            <canvas id="chartCommands" width="400" height="200"></canvas>
+        </div>
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Top Comandos</h3>
+            <canvas id="chartTop" width="400" height="200"></canvas>
+        </div>
+    </div>
+    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
+    <div class="card mt-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Comandos Mas Lentos (ms)</h3>
+        <canvas id="chartSlow" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartCommands'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(commandsPerDay.map(v => v.date)) %>,
+        datasets: [{ label: 'Comandos', data: <%- JSON.stringify(commandsPerDay.map(v => v.count)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+new Chart(document.getElementById('chartTop'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(topCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: 'Usos', data: <%- JSON.stringify(topCommands.map(v => v.usage_count)) %>, backgroundColor: topCommands.map((_, i) => 'rgba(88,101,242,' + Math.max(0.3, 1 - i * 0.08) + ')'), borderRadius: 4 }]
+    },
+    options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
+new Chart(document.getElementById('chartSlow'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(slowestCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: 'ms', data: <%- JSON.stringify(slowestCommands.map(v => v.avgExecutionTimeMs)) %>, backgroundColor: '#fee75c', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { title: { display: true, text: 'ms' } } } }
+});
+<% } %>
+</script>

package/dist/views/admin-analytics-growth.ejs

@@ -0,0 +1,46 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground">Crecimiento</h1>
+        <div class="flex gap-2">
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">30d</a>
+            <a href="?days=60" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">60d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="grid grid-cols-3 gap-4 mb-6">
+        <div class="card text-center">
+            <div class="text-3xl font-bold text-discord-foreground"><%= totalGuilds %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Servidores Totales</div>
+        </div>
+        <div class="card text-center">
+            <div class="text-3xl font-bold text-discord-foreground"><%= summary.totalMessages %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Mensajes</div>
+        </div>
+        <div class="card text-center">
+            <div class="text-3xl font-bold text-discord-foreground"><%= summary.totalCommands %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Comandos</div>
+        </div>
+    </div>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Servidores Activos por Dia</h3>
+        <canvas id="chartGrowth" width="700" height="300"></canvas>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartGrowth'), {
+    type: 'line',
+    data: {
+        labels: <%- JSON.stringify(guildGrowth.map(v => v.date)) %>,
+        datasets: [{
+            label: 'Servidores',
+            data: <%- JSON.stringify(guildGrowth.map(v => v.guildCount)) %>,
+            borderColor: '#57f287',
+            backgroundColor: 'rgba(87,242,135,0.1)',
+            fill: true,
+            tension: 0.3,
+        }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+</script>

package/dist/views/admin-analytics-messages.ejs

@@ -0,0 +1,30 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground">Mensajes</h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Mensajes por Dia (<%= daysBack %> dias)</h3>
+        <canvas id="chartMessages" width="700" height="300"></canvas>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartMessages'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(messagesPerDay.map(v => v.date)) %>,
+        datasets: [{
+            label: 'Mensajes',
+            data: <%- JSON.stringify(messagesPerDay.map(v => v.count)) %>,
+            backgroundColor: '#5865f2',
+            borderRadius: 4,
+        }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+</script>

package/dist/views/admin-analytics.ejs

@@ -1,170 +1,76 @@
 <div class="p-4">
     <div class="flex items-center justify-between mb-6">
-        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.botStats') %></h1>
-        <div class="flex gap-2">
-            <button data-days="7" class="date-btn btn-primary text-sm px-3 py-1 rounded"><%= t('analytics.last7days') %></button>
-            <button data-days="30" class="date-btn text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground"><%= t('analytics.last30days') %></button>
-            <button data-days="90" class="date-btn text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground"><%= t('analytics.last90days') %></button>
-        </div>
+        <h1 class="text-2xl font-bold text-discord-foreground">Analiticas</h1>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
-        <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalGuilds %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.totalGuilds') %></div>
-        </div>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalMessages %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.messages') %></div>
+            <div class="text-2xl font-bold text-discord-primary"><%= summary.totalGuilds %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Servidores</div>
         </div>
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalCommands %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.commands') %></div>
+            <div class="text-2xl font-bold text-discord-success"><%= summary.totalMessages %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Mensajes</div>
         </div>
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalJoins %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.joins') %></div>
+            <div class="text-2xl font-bold text-discord-warning"><%= summary.totalCommands %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Comandos</div>
         </div>
         <div class="card text-center">
             <div class="text-2xl font-bold text-discord-foreground"><%= Math.round(summary.totalVoiceMinutes) %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.voice') %> (min)</div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Min. Voz</div>
         </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.guildGrowth') %></h3>
-            <canvas id="chartGuildGrowth" width="400" height="200"></canvas>
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Crecimiento de Servidores</h3>
+            <canvas id="chartGrowth" width="400" height="200"></canvas>
         </div>
         <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.messagesPerDay') %></h3>
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Mensajes por Dia</h3>
             <canvas id="chartMessages" width="400" height="200"></canvas>
         </div>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.commandsPerDay') %></h3>
-            <canvas id="chartCommands" width="400" height="200"></canvas>
-        </div>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.topCommands') %></h3>
-            <canvas id="chartTopCommands" width="400" height="200"></canvas>
-        </div>
     </div>
-
-    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
-    <div class="card mb-6">
-        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.slowestCommands') %></h3>
-        <canvas id="chartSlowestCommands" width="600" height="200"></canvas>
-    </div>
-    <% } %>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 <script>
 (function() {
-    const colors = {
-        primary: '#5865f2',
-        success: '#57f287',
-        warning: '#fee75c',
-        danger: '#ed4245',
-        foreground: '#ffffff',
-        foreground60: 'rgba(255,255,255,0.6)',
-        dark100: '#36393f',
-        dark200: '#2f3136',
-    };
-
-    Chart.defaults.color = colors.foreground60;
-    Chart.defaults.borderColor = colors.dark100;
-    Chart.defaults.plugins.legend.labels.color = colors.foreground60;
+    Chart.defaults.color = 'rgba(255,255,255,0.6)';
+    Chart.defaults.borderColor = '#36393f';
 
-    const data = <%- JSON.stringify(chartData) %>;
+    const guildGrowth = <%- JSON.stringify(guildGrowth) %>;
+    const messages = <%- JSON.stringify(messagesPerDay) %>;
 
-    function createLineChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'line',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    borderColor: colors.primary,
-                    backgroundColor: 'rgba(88,101,242,0.1)',
-                    fill: true,
-                    tension: 0.3,
-                }]
-            },
-            options: { responsive: true, plugins: { legend: { display: false } } }
-        });
-    }
-
-    function createBarChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'bar',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    backgroundColor: colors.primary,
-                    borderRadius: 4,
-                }]
-            },
-            options: { responsive: true, plugins: { legend: { display: false } } }
-        });
-    }
-
-    function createHorizontalBarChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'bar',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    backgroundColor: values.map((_, i) => {
-                        const alpha = 1 - (i * 0.08);
-                        return `rgba(88,101,242,${Math.max(0.3, alpha)})`;
-                    }),
-                    borderRadius: 4,
-                }]
-            },
-            options: {
-                indexAxis: 'y',
-                responsive: true,
-                plugins: { legend: { display: false } }
-            }
-        });
-    }
-
-    createLineChart('chartGuildGrowth', '<%= t("analytics.guildGrowth") %>', data.guildGrowth, 'date', 'guildCount');
-    createBarChart('chartMessages', '<%= t("analytics.messagesPerDay") %>', data.messagesPerDay, 'date', 'count');
-    createBarChart('chartCommands', '<%= t("analytics.commandsPerDay") %>', data.commandsPerDay, 'date', 'count');
-    createHorizontalBarChart('chartTopCommands', '<%= t("analytics.topCommands") %>', data.topCommands, 'command_name', 'usage_count');
+    new Chart(document.getElementById('chartGrowth'), {
+        type: 'line',
+        data: {
+            labels: guildGrowth.map(v => v.date),
+            datasets: [{
+                label: 'Servidores',
+                data: guildGrowth.map(v => v.guildCount),
+                borderColor: '#57f287',
+                backgroundColor: 'rgba(87,242,135,0.1)',
+                fill: true,
+                tension: 0.3,
+            }]
+        },
+        options: { responsive: true, plugins: { legend: { display: false } } }
+    });
 
-    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
-    new Chart(document.getElementById('chartSlowestCommands'), {
+    new Chart(document.getElementById('chartMessages'), {
         type: 'bar',
         data: {
-            labels: data.slowestCommands.map(v => v.command_name),
+            labels: messages.map(v => v.date),
             datasets: [{
-                label: '<%= t("analytics.avgExecutionTime") %> (ms)',
-                data: data.slowestCommands.map(v => v.avgExecutionTimeMs),
-                backgroundColor: colors.warning,
+                label: 'Mensajes',
+                data: messages.map(v => v.count),
+                backgroundColor: '#5865f2',
                 borderRadius: 4,
             }]
         },
-        options: {
-            responsive: true,
-            plugins: { legend: { display: false } },
-            scales: { y: { title: { display: true, text: 'ms' } } }
-        }
-    });
-    <% } %>
-
-    document.querySelectorAll('.date-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const days = btn.dataset.days;
-            window.location.href = '/admin/analytics?days=' + days;
-        });
+        options: { responsive: true, plugins: { legend: { display: false } } }
     });
 })();
 </script>

package/dist/views/user-analytics-commands.ejs

@@ -0,0 +1,55 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.commands') %></h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.commandsPerDay') %></h3>
+            <canvas id="chartCommands" width="400" height="200"></canvas>
+        </div>
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.topCommands') %></h3>
+            <canvas id="chartTop" width="400" height="200"></canvas>
+        </div>
+    </div>
+    <% if (slowestCommands && slowestCommands.length > 0) { %>
+    <div class="card mt-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.slowestCommands') %></h3>
+        <canvas id="chartSlow" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartCommands'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(commandsPerDay.map(v => v.date)) %>,
+        datasets: [{ label: '<%= t("analytics.commands") %>', data: <%- JSON.stringify(commandsPerDay.map(v => v.count)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+new Chart(document.getElementById('chartTop'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(topCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: '<%= t("analytics.usageCount") %>', data: <%- JSON.stringify(topCommands.map(v => v.usage_count)) %>, backgroundColor: topCommands.map((_, i) => 'rgba(88,101,242,' + Math.max(0.3, 1 - i * 0.08) + ')'), borderRadius: 4 }]
+    },
+    options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (slowestCommands && slowestCommands.length > 0) { %>
+new Chart(document.getElementById('chartSlow'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(slowestCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: 'ms', data: <%- JSON.stringify(slowestCommands.map(v => v.avgExecutionTimeMs)) %>, backgroundColor: '#fee75c', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { title: { display: true, text: 'ms' } } } }
+});
+<% } %>
+</script>

package/dist/views/user-analytics-messages.ejs

@@ -0,0 +1,47 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.messages') %></h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <div class="text-center py-4">
+            <div class="text-4xl font-bold text-discord-primary"><%= totalMessages %></div>
+            <div class="text-sm text-discord-foreground/60"><%= t('analytics.messages') %> (<%= daysBack %> dias)</div>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.messagesPerDay') %></h3>
+        <canvas id="chartMessages" width="700" height="300"></canvas>
+    </div>
+    <% if (typeof channelMessages !== 'undefined' && channelMessages.length > 0) { %>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Mensajes por Canal</h3>
+        <canvas id="chartChannels" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartMessages'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(messagesPerDay.map(v => v.date)) %>,
+        datasets: [{ label: '<%= t("analytics.messages") %>', data: <%- JSON.stringify(messagesPerDay.map(v => v.count)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (typeof channelMessages !== 'undefined' && channelMessages.length > 0) { %>
+new Chart(document.getElementById('chartChannels'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(channelMessages.map(v => v.channel_id)) %>,
+        datasets: [{ label: '<%= t("analytics.messages") %>', data: <%- JSON.stringify(channelMessages.map(v => v.message_count)) %>, backgroundColor: '#57f287', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+<% } %>
+</script>

package/dist/views/user-analytics-voice.ejs

@@ -0,0 +1,47 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.voice') %></h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <div class="text-center py-4">
+            <div class="text-4xl font-bold text-discord-primary"><%= Math.round(totalVoice) %> min</div>
+            <div class="text-sm text-discord-foreground/60"><%= t('analytics.voiceActivity') %></div>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.voiceActivity') %> (<%= daysBack %> dias)</h3>
+        <canvas id="chartVoice" width="700" height="300"></canvas>
+    </div>
+    <% if (channelVoice && channelVoice.length > 0) { %>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.perChannelVoice') %></h3>
+        <canvas id="chartChannels" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartVoice'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(voicePerDay.map(v => v.date)) %>,
+        datasets: [{ label: 'min', data: <%- JSON.stringify(voicePerDay.map(v => v.count)) %>, backgroundColor: '#57f287', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (channelVoice && channelVoice.length > 0) { %>
+new Chart(document.getElementById('chartChannels'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(channelVoice.map(v => v.channel_id)) %>,
+        datasets: [{ label: 'min', data: <%- JSON.stringify(channelVoice.map(v => v.total_minutes)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+<% } %>
+</script>