test: ssr graphs

This commit is contained in:
nate 2026-03-19 11:14:30 +04:00
parent 164b7f65f8
commit d62f776f7b
1 changed files with 7 additions and 1 deletions

View File

@ -65,7 +65,9 @@
<div id="chart-legend" class="flex gap-3 text-xs text-gray-500"></div> <div id="chart-legend" class="flex gap-3 text-xs text-gray-500"></div>
</div> </div>
<div id="latency-chart" class="relative h-48 w-full" style="cursor:crosshair"> <div id="latency-chart" class="relative h-48 w-full" style="cursor:crosshair">
<canvas id="chart-canvas" class="w-full h-full"></canvas> <!-- SSR SVG chart (works without JS, replaced by canvas when JS loads) -->
<div id="chart-ssr" class="w-full h-full"><%~ it.latencyChartSSR(chartPings) %></div>
<canvas id="chart-canvas" class="w-full h-full hidden"></canvas>
<div id="chart-tooltip" class="absolute hidden bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-xs pointer-events-none z-10 shadow-lg" style="min-width:140px"></div> <div id="chart-tooltip" class="absolute hidden bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-xs pointer-events-none z-10 shadow-lg" style="min-width:140px"></div>
<div id="chart-crosshair" class="absolute top-0 bottom-0 w-px bg-gray-600/50 pointer-events-none hidden"></div> <div id="chart-crosshair" class="absolute top-0 bottom-0 w-px bg-gray-600/50 pointer-events-none hidden"></div>
<span id="chart-ymax" class="absolute top-1 left-2 text-gray-600 text-xs pointer-events-none"></span> <span id="chart-ymax" class="absolute top-1 left-2 text-gray-600 text-xs pointer-events-none"></span>
@ -214,6 +216,10 @@
function renderChart() { function renderChart() {
const canvas = document.getElementById('chart-canvas'); const canvas = document.getElementById('chart-canvas');
// Replace SSR chart with interactive canvas
const ssrChart = document.getElementById('chart-ssr');
if (ssrChart) ssrChart.classList.add('hidden');
canvas.classList.remove('hidden');
const container = canvas.parentElement; const container = canvas.parentElement;
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
const rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();