Improved graph colour shades
This commit is contained in:
fraxle
2026-06-16 23:18:51 +01:00
parent b83aed2dbc
commit c0578bd32f
2 changed files with 21 additions and 5 deletions
+15 -5
View File
@@ -388,7 +388,7 @@ export function UTCIForecast() {
[ 40, [185, 30, 30]], [ 40, [185, 30, 30]],
[ 50, [130, 0, 20]], [ 50, [130, 0, 20]],
]; ];
const airTempRgb = (t) => { const airTempRgb = (t, whiteMix = 0.58) => {
if (t == null) return null; if (t == null) return null;
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
let i = TEMP_STOPS.findIndex(s => t < s[0]); let i = TEMP_STOPS.findIndex(s => t < s[0]);
@@ -402,8 +402,9 @@ export function UTCIForecast() {
const lerp = (a, b) => Math.round(a + (b - a) * x); const lerp = (a, b) => Math.round(a + (b - a) * x);
return [lerp(c0[0],c1[0]), lerp(c0[1],c1[1]), lerp(c0[2],c1[2])]; return [lerp(c0[0],c1[0]), lerp(c0[1],c1[1]), lerp(c0[2],c1[2])];
})(); })();
return raw.map(c => Math.min(255, Math.round(c + (255 - c) * 0.66))); return raw.map(c => Math.min(255, Math.round(c + (255 - c) * whiteMix)));
}; };
const airTempRgbStrong = (t) => airTempRgb(t, 0.42);
// ─── 3b. PANEL COMPUTATIONS ────────────────────────────────────────── // ─── 3b. PANEL COMPUTATIONS ──────────────────────────────────────────
// Derived from currentRow and the active day - no side effects. // Derived from currentRow and the active day - no side effects.
@@ -1137,8 +1138,16 @@ export function UTCIForecast() {
<defs> <defs>
<linearGradient id="fsc-grad" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox"> <linearGradient id="fsc-grad" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
${fscSrc.map((r, j) => { ${fscSrc.map((r, j) => {
const fc = utciCategory(getT(r)); const rgb = airTempRgb(getT(r)) || [200, 200, 200];
return html`<stop key=${j} offset=${`${((j + 0.5) / fscSrc.length * 100).toFixed(1)}%`} stop-color=${fc.bg} />`; const fc = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
return html`<stop key=${j} offset=${`${((j + 0.5) / fscSrc.length * 100).toFixed(1)}%`} stop-color=${fc} />`;
})}
</linearGradient>
<linearGradient id="fsc-grad-strong" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
${fscSrc.map((r, j) => {
const rgb = airTempRgbStrong(getT(r)) || [200, 200, 200];
const fc = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
return html`<stop key=${`s${j}`} offset=${`${((j + 0.5) / fscSrc.length * 100).toFixed(1)}%`} stop-color=${fc} />`;
})} })}
</linearGradient> </linearGradient>
</defs> </defs>
@@ -1162,6 +1171,7 @@ export function UTCIForecast() {
`; `;
})} })}
<path d=${fscFill} fill="url(#fsc-grad)" opacity="0.45" /> <path d=${fscFill} fill="url(#fsc-grad)" opacity="0.45" />
<path d=${fscFill} fill="none" stroke="url(#fsc-grad-strong)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg> </svg>
`; `;
})()} })()}
@@ -1727,4 +1737,4 @@ export function UTCIForecast() {
</footer> </footer>
</main> </main>
</div>`; </div>`;
} }
+6
View File
@@ -62,5 +62,11 @@
"alltemps": 2, "alltemps": 2,
"showall": 1 "showall": 1
} }
},
"2026-06-16": {
"visits": 7,
"profiles": {
"vehicle": 1
}
} }
} }