Linia i obszar: rytm sezonu

<main><header><div><h1>Linia i obszar: rytm sezonu</h1><p>Przykładowe dane</p></div><label for="view">Scenariusz<select id="view"><option value="base">Widok bazowy</option><option value="compare">Porównanie</option></select></label></header><figure aria-label="Linia i obszar: rytm sezonu"><svg id="chart" viewBox="0 0 700 310" role="img" aria-labelledby="chart-title"><title id="chart-title">Linia i obszar: rytm sezonu</title></svg><figcaption class="legend"><span>Indeks sezonowy</span></figcaption></figure><p id="status" class="status" aria-live="polite">Aktualny widok: Widok bazowy</p><details><summary>Dane i opis wykresu</summary><table><caption>Wykres liniowy z wypełnieniem pokazuje sezonowe zmiany wartości.</caption><thead><tr><th scope="col">Element</th><th scope="col">Wartość</th><th scope="col">Porównanie</th></tr></thead><tbody id="values"></tbody></table></details></main>

:root{--paper:#f5f1e8;--ink:#183e39;--accent:#167567}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.45 system-ui,sans-serif}main{max-width:900px;margin:auto;padding:26px}header{display:flex;justify-content:space-between;gap:20px;align-items:start}h1{font-size:clamp(24px,4vw,34px);margin:0 0 4px;font-weight:750;letter-spacing:-.03em}p{margin:0}header p{font-size:14px}label{font-weight:600;display:grid;gap:5px;font-size:13px}select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--ink);padding:10px;min-height:44px;border-radius:0}select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}figure{margin:20px 0 10px}svg{display:block;width:100%;height:auto;max-height:315px}svg text{font-family:inherit;fill:var(--ink);font-size:17px}.legend{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px}.legend i{width:12px;height:12px;display:inline-block;margin-right:5px}.status{font-size:13px;margin-top:12px}details{margin-top:12px;font-size:13px}summary{cursor:pointer;min-height:36px}table{border-collapse:collapse;width:100%;margin-top:10px}td,th{text-align:left;border-bottom:1px solid var(--ink);padding:7px}caption{text-align:left;padding-bottom:10px}svg [data-point]:hover{opacity:.7}@media(max-width:520px){main{padding:18px}header{display:block}label{margin-top:14px;max-width:240px}figure{margin-top:24px}svg{min-height:190px}svg text:not([style]){font-size:22px}.legend{gap:8px 14px}h1{line-height:1.15}}@media(prefers-reduced-motion:no-preference){svg [data-point]{transition:opacity .2s}}

const labels=["Sty", "Lut", "Mar", "Kwi", "Maj", "Cze"],first=[35, 57, 46, 78, 60, 90],second=[82, 65, 72, 42, 50, 27];
const chart=document.querySelector('#chart'),select=document.querySelector('#view');
function grid(){return [0,25,50,75,100].map(v=>`<path d="M45,${260-v*2} H675" stroke="var(--ink)" opacity=".15"/><text x="35" y="${266-v*2}" text-anchor="end">${v}</text>`).join('')}
function textColor(hex,alpha=1){if(hex==='var(--accent)')hex=getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();const paper=getComputedStyle(document.documentElement).getPropertyValue('--paper').trim();const rgb=h=>[1,3,5].map(i=>parseInt(h.slice(i,i+2),16));const bg=rgb(paper);const linear=rgb(hex).map((c,i)=>(c*alpha+bg[i]*(1-alpha))/255).map(c=>c<=.04045?c/12.92:((c+.055)/1.055)**2.4);const l=linear.reduce((v,c,i)=>v+c*[.2126,.7152,.0722][i],0);return l>.179?'#000':'#fff'}
function draw(a,b){const pts=a.map((v,i)=>[65+i*115,265-v*2.2]);const path=pts.map((p,i)=>(i?'L':'M')+p.join(',')).join(' ');return grid()+`<path d="${path} L640,265 L65,265Z" fill="var(--accent)" opacity=".13"/><path d="${path}" fill="none" stroke="var(--accent)" stroke-width="4"/>`+pts.map((p,i)=>`<g data-point><circle cx="${p[0]}" cy="${p[1]}" r="6" fill="var(--accent)"><title>${labels[i]}: ${a[i]}</title></circle><text x="${p[0]}" y="${p[1]-14}" text-anchor="middle">${a[i]}</text><text x="${p[0]}" y="293" text-anchor="middle">${labels[i]}</text></g>`).join('');}
function update(){const compare=select.value==='compare',a=compare?second:first,b=compare?first:second;chart.innerHTML='<title id="chart-title">'+"Linia i obszar: rytm sezonu"+'</title>'+draw(a,b);document.querySelector('#values').innerHTML=labels.map((l,i)=>`<tr><th scope="row">${l}</th><td>${a[i]}</td><td>${b[i]}</td></tr>`).join('');document.querySelector('#status').textContent='Aktualny widok: '+select.selectedOptions[0].textContent}
select.addEventListener('change',update);update();