Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Latency Monitoring Candlestick Chart</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lightweight-charts@3.8.0/dist/lightweight-charts.standalone.production.js"></script> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| height: 500px; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| z-index: 1000; | |
| pointer-events: none; | |
| background: rgba(30, 41, 59, 0.9); | |
| border: 1px solid rgba(255, 165, 0, 0.5); | |
| border-radius: 4px; | |
| padding: 8px; | |
| font-size: 12px; | |
| color: white; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .crosshair-line { | |
| position: absolute; | |
| width: 1px; | |
| background-color: rgba(255, 165, 0, 0.7); | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| .volume-chart { | |
| height: 120px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-slate-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-3xl font-bold mb-6 text-orange-400">Latency Monitoring Dashboard</h1> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h3 class="text-teal-400 font-semibold mb-2">Current Latency</h3> | |
| <p class="text-2xl font-bold">142.5 <span class="text-sm">ns</span></p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h3 class="text-teal-400 font-semibold mb-2">24h High</h3> | |
| <p class="text-2xl font-bold">256.8 <span class="text-sm">ns</span></p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h3 class="text-teal-400 font-semibold mb-2">24h Low</h3> | |
| <p class="text-2xl font-bold">98.3 <span class="text-sm">ns</span></p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h3 class="text-teal-400 font-semibold mb-2">Avg Volume</h3> | |
| <p class="text-2xl font-bold">1.24M</p> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-orange-400">Latency Candlestick Chart</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1D</button> | |
| <button class="bg-orange-500 hover:bg-orange-600 px-3 py-1 rounded text-sm">1H</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">15M</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1M</button> | |
| </div> | |
| </div> | |
| <div class="chart-container" id="latencyChart"></div> | |
| <div class="volume-chart" id="volumeChart"></div> | |
| <div id="tooltip" class="tooltip"></div> | |
| <div id="crosshair-line" class="crosshair-line"></div> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h2 class="text-xl font-semibold text-orange-400 mb-4">Latency Statistics</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <h3 class="text-teal-400 font-semibold mb-2">Percentiles</h3> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between"> | |
| <span>P99:</span> | |
| <span class="font-mono">245.7 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>P95:</span> | |
| <span class="font-mono">198.3 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>P90:</span> | |
| <span class="font-mono">175.2 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>P50:</span> | |
| <span class="font-mono">142.1 ns</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-teal-400 font-semibold mb-2">Thresholds</h3> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between"> | |
| <span class="text-green-400">Optimal:</span> | |
| <span class="font-mono">< 150 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-yellow-400">Warning:</span> | |
| <span class="font-mono">150-200 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-red-400">Critical:</span> | |
| <span class="font-mono">> 200 ns</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-teal-400 font-semibold mb-2">Recent Events</h3> | |
| <div class="space-y-1 text-sm"> | |
| <div class="flex justify-between"> | |
| <span>12:45:23</span> | |
| <span class="text-red-400">Spike: 256.8 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>11:22:10</span> | |
| <span class="text-yellow-400">Warning: 198.5 ns</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>09:15:47</span> | |
| <span class="text-green-400">Optimal: 132.7 ns</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Generate mock data for 24 hours (1-second intervals) | |
| const now = new Date(); | |
| const startTime = new Date(now); | |
| startTime.setHours(now.getHours() - 24); | |
| const latencyData = []; | |
| const volumeData = []; | |
| for (let i = 0; i < 500; i++) { // 86400 seconds in 24 hours | |
| const time = new Date(startTime); | |
| time.setSeconds(time.getSeconds() + i); | |
| // Base latency with some randomness | |
| let baseLatency = 100 + Math.random() * 50; | |
| // Add some spikes | |
| if (i % 1000 === 0) baseLatency += Math.random() * 100; | |
| if (i % 5000 === 0) baseLatency += Math.random() * 150; | |
| // Generate OHLC values | |
| const open = baseLatency + (Math.random() * 20 - 10); | |
| const high = open + Math.random() * 15; | |
| const low = open - Math.random() * 15; | |
| const close = open + (Math.random() * 10 - 5); | |
| // Generate volume | |
| const volume = 500000 + Math.random() * 1500000; | |
| latencyData.push({ | |
| time: Math.floor(time.getTime() / 1000), | |
| open: open, | |
| high: high, | |
| low: low, | |
| close: close | |
| }); | |
| volumeData.push({ | |
| time: Math.floor(time.getTime() / 1000), | |
| value: volume, | |
| color: close > open ? 'rgba(16, 185, 129, 0.8)' : 'rgba(239, 68, 68, 0.8)' | |
| }); | |
| } | |
| // Create charts | |
| const latencyChart = LightweightCharts.createChart(document.getElementById('latencyChart'), { | |
| layout: { | |
| backgroundColor: '#1E293B', | |
| textColor: '#E2E8F0', | |
| }, | |
| grid: { | |
| vertLines: { | |
| color: '#334155', | |
| }, | |
| horzLines: { | |
| color: '#334155', | |
| }, | |
| }, | |
| crosshair: { | |
| mode: LightweightCharts.CrosshairMode.Normal, | |
| }, | |
| rightPriceScale: { | |
| borderColor: '#334155', | |
| scaleMargins: { | |
| top: 0.1, | |
| bottom: 0.1, | |
| }, | |
| }, | |
| leftPriceScale: { | |
| visible: true, | |
| borderColor: '#334155', | |
| scaleMargins: { | |
| top: 0.1, | |
| bottom: 0.1, | |
| }, | |
| }, | |
| timeScale: { | |
| borderColor: '#334155', | |
| timeVisible: true, | |
| secondsVisible: true, | |
| }, | |
| }); | |
| const volumeChart = LightweightCharts.createChart(document.getElementById('volumeChart'), { | |
| layout: { | |
| backgroundColor: '#1E293B', | |
| textColor: '#E2E8F0', | |
| }, | |
| grid: { | |
| vertLines: { | |
| color: '#334155', | |
| }, | |
| horzLines: { | |
| color: '#334155', | |
| }, | |
| }, | |
| rightPriceScale: { | |
| visible: false, | |
| }, | |
| leftPriceScale: { | |
| visible: false, | |
| }, | |
| timeScale: { | |
| borderColor: '#334155', | |
| }, | |
| height: 120, | |
| }); | |
| // Add series to charts | |
| const candleSeries = latencyChart.addCandlestickSeries({ | |
| upColor: '#10B981', | |
| downColor: '#EF4444', | |
| borderDownColor: '#EF4444', | |
| borderUpColor: '#10B981', | |
| wickDownColor: '#EF4444', | |
| wickUpColor: '#10B981', | |
| priceScaleId: 'left', | |
| }); | |
| const volumeSeries = volumeChart.addHistogramSeries({ | |
| color: '#3B82F6', | |
| priceFormat: { | |
| type: 'volume', | |
| }, | |
| priceScaleId: 'left', | |
| }); | |
| // Set data | |
| candleSeries.setData(latencyData); | |
| volumeSeries.setData(volumeData); | |
| // Synchronize time scales | |
| latencyChart.timeScale().subscribeVisibleTimeRangeChange((timeRange) => { | |
| volumeChart.timeScale().setVisibleRange(timeRange); | |
| }); | |
| // Crosshair and tooltip handling | |
| const tooltip = document.getElementById('tooltip'); | |
| const crosshairLine = document.getElementById('crosshair-line'); | |
| latencyChart.subscribeCrosshairMove((param) => { | |
| if (!param.time || param.point.x < 0 || param.point.x > latencyChart.clientWidth) { | |
| tooltip.style.opacity = '0'; | |
| crosshairLine.style.opacity = '0'; | |
| return; | |
| } | |
| const candleData = param.seriesData.get(candleSeries); | |
| const volumeData = param.seriesData.get(volumeSeries); | |
| if (!candleData || !volumeData) { | |
| tooltip.style.opacity = '0'; | |
| crosshairLine.style.opacity = '0'; | |
| return; | |
| } | |
| // Update crosshair line | |
| crosshairLine.style.left = param.point.x + 'px'; | |
| crosshairLine.style.top = '0'; | |
| crosshairLine.style.height = latencyChart.clientHeight + 'px'; | |
| crosshairLine.style.opacity = '1'; | |
| // Update tooltip | |
| const date = new Date(param.time * 1000); | |
| const timeStr = date.toLocaleTimeString(); | |
| let color = '#10B981'; | |
| if (candleData.close < candleData.open) { | |
| color = '#EF4444'; | |
| } | |
| tooltip.innerHTML = ` | |
| <div class="text-xs text-slate-300">${timeStr}</div> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-3 h-3 rounded-full mr-2" style="background-color: ${color}"></div> | |
| <div> | |
| <div>O: <span class="font-mono">${candleData.open.toFixed(2)} ns</span></div> | |
| <div>H: <span class="font-mono">${candleData.high.toFixed(2)} ns</span></div> | |
| <div>L: <span class="font-mono">${candleData.low.toFixed(2)} ns</span></div> | |
| <div>C: <span class="font-mono">${candleData.close.toFixed(2)} ns</span></div> | |
| <div class="mt-1">Volume: <span class="font-mono">${(volumeData.value / 1000000).toFixed(2)}M</span></div> | |
| </div> | |
| </div> | |
| `; | |
| tooltip.style.opacity = '1'; | |
| tooltip.style.left = param.point.x + 10 + 'px'; | |
| tooltip.style.top = '20px'; | |
| }); | |
| // Add some threshold lines | |
| const optimalLine = latencyChart.addLineSeries({ | |
| color: '#10B981', | |
| lineWidth: 1, | |
| lineStyle: 2, // dashed | |
| priceScaleId: 'left', | |
| }); | |
| optimalLine.setData([{ time: latencyData[0].time, value: 150 }, { time: latencyData[latencyData.length - 1].time, value: 150 }]); | |
| const warningLine = latencyChart.addLineSeries({ | |
| color: '#F59E0B', | |
| lineWidth: 1, | |
| lineStyle: 2, // dashed | |
| priceScaleId: 'left', | |
| }); | |
| warningLine.setData([{ time: latencyData[0].time, value: 200 }, { time: latencyData[latencyData.length - 1].time, value: 200 }]); | |
| // Fit content | |
| latencyChart.timeScale().fitContent(); | |
| volumeChart.timeScale().fitContent(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shadadaab/latency-chart" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |