3.0.2.1
Improved graph colour shades
This commit is contained in:
+15
-5
@@ -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>`;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -62,5 +62,11 @@
|
|||||||
"alltemps": 2,
|
"alltemps": 2,
|
||||||
"showall": 1
|
"showall": 1
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"2026-06-16": {
|
||||||
|
"visits": 7,
|
||||||
|
"profiles": {
|
||||||
|
"vehicle": 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user