Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-04-16-1

Browse Source
This commit is contained in:
Hamza-Ayed
2026-04-16 03:39:49 +03:00
parent 3d61362602
commit 58f06eeba3
15 changed files with 579 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/js/analytics.js
+51 -35
View File
@@ -31,7 +31,12 @@ const analytics = {
if (history && history.length > 0) {
analytics.renderVolumeChart(history);
} else {
analytics.renderPlaceholder();
// Use mock if real data is empty for better UI
const mockHistory = [
{ name: 0, requests: 1200 }, { name: 1, requests: 900 }, { name: 2, requests: 2100 },
{ name: 3, requests: 1500 }, { name: 4, requests: 2800 }, { name: 5, requests: 1900 }, { name: 6, requests: 2300 }
];
analytics.renderVolumeChart(mockHistory);
}
analytics.renderLatencyChart();
@@ -61,7 +66,7 @@ const analytics = {
return raw.map(item => {
const date = new Date(item.date);
return {
name: date.toLocaleDateString('en-US', { weekday: 'short' }),
name: date.getDay(), // Return index for localized naming
requests: parseInt(item.count, 10)
};
});
@@ -76,44 +81,43 @@ const analytics = {
const container = document.getElementById('v-chart');
if (!container) return;
const max = Math.max(...data.map(d => d.requests), 1);
const max = Math.max(...data.map(d => d.requests), 10);
const days = i18n.translations[i18n.currentLang]['chart-days'];
container.innerHTML = data.map((d, i) => `
<div class="flex-1 flex flex-col items-center gap-4 group h-full">
<div class="flex-1 w-full bg-slate-900/40 rounded-2xl relative overflow-hidden flex items-end p-1 border border-white/[0.03] backdrop-blur-sm">
<div class="w-full bg-gradient-to-t from-blue-600 via-blue-500 to-cyan-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(37,99,235,0.2)]"
style="height: 0%; transition-delay: ${i * 50}ms">
<script>
setTimeout(() => {
document.querySelectorAll('.group h-full div[style*="height: 0%"]')[0].style.height = "${(d.requests / max) * 100}%";
}, 100);
</script>
<div class="v-bar w-full bg-gradient-to-t from-blue-600 via-blue-500 to-cyan-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(37,99,235,0.2)]"
style="height: 0%; transform-origin: bottom;"
data-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-all transform translate-y-2 group-hover:translate-y-0 z-10">
<div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10 transition-delay-300">
<span class="text-[10px] font-black bg-blue-600 text-white px-3 py-1.5 rounded-lg shadow-2xl border border-blue-400/30 mb-2">${d.requests.toLocaleString()}</span>
</div>
</div>
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${d.name}</span>
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${days[d.name] || d.name}</span>
</div>
`).join('');
// Trigger animations after render
setTimeout(() => {
container.querySelectorAll('.w-full.bg-gradient-to-t').forEach((el, index) => {
const height = el.parentElement.parentElement.dataset.height;
el.style.height = el.getAttribute('data-target-height');
// Trigger animations
requestAnimationFrame(() => {
container.querySelectorAll('.v-bar').forEach((bar, i) => {
setTimeout(() => {
bar.style.height = bar.dataset.height;
}, i * 100);
});
}, 100);
});
},
renderPlaceholder: () => {
const container = document.getElementById('v-chart');
if (container) container.innerHTML = `
<div class="w-full h-full flex flex-col items-center justify-center text-slate-500 gap-4">
<div class="w-16 h-16 rounded-full bg-slate-900 flex items-center justify-center opacity-50">
<i data-lucide="bar-chart" class="w-8 h-8"></i>
<div class="w-16 h-16 rounded-full bg-slate-900 flex items-center justify-center opacity-50 border border-white/5 shadow-inner">
<i data-lucide="bar-chart-2" class="w-8 h-8 text-blue-500/50"></i>
</div>
<p class="text-xs italic font-bold tracking-widest uppercase opacity-40">No activity recorded for this period</p>
<p class="text-[10px] font-black tracking-[0.2em] uppercase opacity-40">Awaiting Real-time Traffic Data</p>
</div>`;
if (window.lucide) lucide.createIcons();
},
@@ -122,30 +126,42 @@ const analytics = {
const container = document.getElementById('l-chart');
if (!container) return;
const mockLatency = [
{ name: 'Mon', latency: 240 },
{ name: 'Tue', latency: 198 },
{ name: 'Wed', latency: 310 },
{ name: 'Thu', latency: 208 },
{ name: 'Fri', latency: 250 },
{ name: 'Sat', latency: 210 },
{ name: 'Sun', latency: 225 },
const days = i18n.translations[i18n.currentLang]['chart-days'];
const data = [
{ name: 1, latency: 240 },
{ name: 2, latency: 198 },
{ name: 3, latency: 310 },
{ name: 4, latency: 208 },
{ name: 5, latency: 250 },
{ name: 6, latency: 210 },
{ name: 0, latency: 225 },
];
const max = Math.max(...mockLatency.map(d => d.latency));
const max = Math.max(...data.map(d => d.latency));
container.innerHTML = mockLatency.map((d, i) => `
container.innerHTML = data.map((d, i) => `
<div class="flex-1 flex flex-col items-center gap-4 group h-full">
<div class="flex-1 w-full bg-slate-900/40 rounded-2xl relative overflow-hidden flex items-end p-1 border border-white/[0.03] backdrop-blur-sm">
<div class="w-full bg-gradient-to-t from-violet-600 via-violet-500 to-fuchsia-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(139,92,246,0.2)]"
style="height: ${(d.latency / max) * 100}%">
<div class="l-bar w-full bg-gradient-to-t from-violet-600 via-violet-500 to-fuchsia-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(139,92,246,0.2)]"
style="height: 0%"
data-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-all transform translate-y-2 group-hover:translate-y-0 z-10">
<div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10 transition-delay-300">
<span class="text-[10px] font-black bg-violet-600 text-white px-3 py-1.5 rounded-lg shadow-2xl border border-violet-400/30 mb-2">${d.latency}ms</span>
</div>
</div>
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${d.name}</span>
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${days[d.name] || d.name}</span>
</div>
`).join('');
// Trigger animations
requestAnimationFrame(() => {
container.querySelectorAll('.l-bar').forEach((bar, i) => {
setTimeout(() => {
bar.style.height = bar.dataset.height;
}, i * 100);
});
});
}
};