2026-04-15-2 dashboard convert to html without vite and react

2026-04-15 15:41:05 +03:00
parent 3802af0651
commit f1f1818501
13 changed files with 5126 additions and 220 deletions
@@ -0,0 +1,63 @@
+/**
+ * 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('');
+    }
+};