64 lines
2.9 KiB
JavaScript
64 lines
2.9 KiB
JavaScript
/**
|
|
* Analytics Logic (Simple CSS Charts)
|
|
*/
|
|
|
|
const analytics = {
|
|
mockData: [
|
|
{ name: 'Mon', requests: 4000, latency: 240 },
|
|
{ name: 'Tue', requests: 3000, latency: 198 },
|
|
{ name: 'Wed', requests: 2000, latency: 310 },
|
|
{ name: 'Thu', requests: 2780, latency: 208 },
|
|
{ name: 'Fri', requests: 1890, latency: 250 },
|
|
{ name: 'Sat', requests: 2390, latency: 210 },
|
|
{ name: 'Sun', requests: 3490, latency: 225 },
|
|
],
|
|
|
|
init: () => {
|
|
console.log('📈 Initializing Analytics...');
|
|
analytics.renderVolumeChart();
|
|
analytics.renderLatencyChart();
|
|
},
|
|
|
|
renderVolumeChart: () => {
|
|
const container = document.getElementById('v-chart');
|
|
if (!container) return;
|
|
|
|
const max = Math.max(...analytics.mockData.map(d => d.requests));
|
|
|
|
container.innerHTML = analytics.mockData.map(d => `
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<div class="w-full bg-blue-600/20 rounded-t-lg relative overflow-hidden flex items-end" style="height: 100%">
|
|
<div class="w-full bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg transition-all duration-700 hover:brightness-125"
|
|
style="height: ${(d.requests / max) * 100}%">
|
|
</div>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="text-[10px] font-bold bg-slate-900 px-2 py-1 rounded border border-slate-800">${d.requests}</span>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-slate-500">${d.name}</span>
|
|
</div>
|
|
`).join('');
|
|
},
|
|
|
|
renderLatencyChart: () => {
|
|
const container = document.getElementById('l-chart');
|
|
if (!container) return;
|
|
|
|
const max = Math.max(...analytics.mockData.map(d => d.latency));
|
|
|
|
container.innerHTML = analytics.mockData.map(d => `
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<div class="w-full bg-violet-600/10 rounded-t-lg relative overflow-hidden flex items-end" style="height: 100%">
|
|
<div class="w-full bg-gradient-to-t from-violet-600 to-violet-400 rounded-t-lg transition-all duration-700 hover:brightness-125"
|
|
style="height: ${(d.latency / max) * 100}%">
|
|
</div>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="text-[10px] font-bold bg-slate-900 px-2 py-1 rounded border border-slate-800">${d.latency}ms</span>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-slate-500">${d.name}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
};
|