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]],
[ 50, [130, 0, 20]],
];
const airTempRgb = (t) => {
const airTempRgb = (t, whiteMix = 0.58) => {
if (t == null) return null;
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
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);
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 ──────────────────────────────────────────
// Derived from currentRow and the active day - no side effects.
@@ -1137,8 +1138,16 @@ export function UTCIForecast() {
<defs>
<linearGradient id="fsc-grad" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
${fscSrc.map((r, j) => {
const fc = utciCategory(getT(r));
return html`<stop key=${j} offset=${`${((j + 0.5) / fscSrc.length * 100).toFixed(1)}%`} stop-color=${fc.bg} />`;
const rgb = airTempRgb(getT(r)) || [200, 200, 200];
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>
</defs>
@@ -1162,6 +1171,7 @@ export function UTCIForecast() {
`;
})}
<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>
`;
})()}
@@ -1727,4 +1737,4 @@ export function UTCIForecast() {
</footer>
</main>
</div>`;
}
}