ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: move min/max labels out of SVG into HTML overlays, no more text stretch

This commit is contained in:
M1 2026-03-17 07:30:28 +04:00
parent 5eb463a03a
commit 1e90b5f3c2
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/routes/dashboard.ts
View File

@ -39,14 +39,16 @@ function latencyChartSSR(pings: any[]): string {
const dots = points.map((p: number[], i: number) => const dots = points.map((p: number[], i: number) =>
!ups[i] ? `<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="#f87171"/>` : '' !ups[i] ? `<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="#f87171"/>` : ''
).join(''); ).join('');
return `<svg viewBox="0 0 ${w} ${h}" class="w-full h-full" preserveAspectRatio="none"> return `<div class="relative w-full h-full">
<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/><stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/></linearGradient></defs> <svg viewBox="0 0 ${w} ${h}" class="w-full h-full" preserveAspectRatio="none">
<path d="${areaD}" fill="url(#areaGrad)"/> <defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/><stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/></linearGradient></defs>
<path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="${areaD}" fill="url(#areaGrad)"/>
${dots} <path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<text x="4" y="12" fill="#6b7280" font-size="10">${max}ms</text> ${dots}
<text x="4" y="${h - 2}" fill="#6b7280" font-size="10">${min}ms</text> </svg>
</svg>`; <span class="absolute top-0 left-1 text-gray-500 text-xs leading-none pointer-events-none">${max}ms</span>
<span class="absolute bottom-0 left-1 text-gray-500 text-xs leading-none pointer-events-none">${min}ms</span>
</div>`;
} }
function escapeHtmlSSR(str: string): string { function escapeHtmlSSR(str: string): string {