From bd86e04f112edbe0f6b4f8c2b6a8a5161ff11699 Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Wed, 27 May 2026 21:32:42 +0300 Subject: showcase: stretch SVG to fill browser window in both axes (non-uniform scale) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the uniform min(W/CHART_W, H/CHART_H) scale — which left blank bars along the shorter axis — with independent x/y scales: sx = W / CHART_W sy = H / CHART_H This maps the fixed CHART_W × CHART_H design coordinate space exactly onto the current window dimensions, filling every pixel with no letterboxing. The centering translate is no longer needed and is removed. chartEl.getScreenCTM().inverse() handles the two-component transform correctly, so tooltip hit-testing remains accurate at any window shape. Tooltip boundary clamping still uses CHART_W / CHART_H (chart coordinates). Co-Authored-By: Claude Sonnet 4.6 --- internal/showcase/rank_history_svg.go | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/internal/showcase/rank_history_svg.go b/internal/showcase/rank_history_svg.go index c030086..fd77c83 100644 --- a/internal/showcase/rank_history_svg.go +++ b/internal/showcase/rank_history_svg.go @@ -394,20 +394,21 @@ var allPG=chartEl.querySelectorAll('.pg'); var allLG=chartEl.querySelectorAll('.lg'); var activeIdx=-1; -// rescale keeps the chart group centered and fully visible at any window size. -// Sets explicit pixel width/height (bypassing the body-margin trap that -// makes percentage-relative sizes fall short in standalone SVG files) and a -// matching viewBox, then applies a uniform scale+translate to #chart so the -// CHART_W x CHART_H design fills the window exactly along the limiting axis. +// rescale stretches the chart to fill the full browser window in both axes. +// Sets explicit pixel width/height (bypassing the body-margin trap that makes +// percentage-relative sizes fall short in standalone SVG files) and a matching +// viewBox, then applies independent x/y scales so the chart always occupies +// every pixel — width tracks window width, height tracks window height. +// chartEl.getScreenCTM().inverse() accounts for both scale factors, keeping +// tooltip hit-testing correct regardless of the window aspect ratio. function rescale(){ var W=window.innerWidth||document.documentElement.clientWidth; var H=window.innerHeight||document.documentElement.clientHeight; svgEl.setAttribute('width',W); svgEl.setAttribute('height',H); svgEl.setAttribute('viewBox','0 0 '+W+' '+H); - var s=Math.min(W/CHART_W,H/CHART_H); - var tx=(W-CHART_W*s)/2, ty=(H-CHART_H*s)/2; - chartEl.setAttribute('transform','translate('+tx+','+ty+') scale('+s+')'); + var sx=W/CHART_W, sy=H/CHART_H; + chartEl.setAttribute('transform','scale('+sx+','+sy+')'); } window.addEventListener('resize',rescale); rescale(); -- cgit v1.2.3