bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Outline text for station map

Browse Source
This commit is contained in:
Guntis Smaukstelis
2024-01-19 21:57:34 +02:00
parent 16ed47c661
commit 6b0df1b8d5
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/chart/CityChart.tsx
-2
View File
@@ -13,8 +13,6 @@ export const CityChart: Component<{
const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>(); const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
const [getIsLarge, setIsLarge] = createSignal(false); const [getIsLarge, setIsLarge] = createSignal(false);
console.log("props.data()", props.data());
let chart: Chart | undefined; let chart: Chart | undefined;
const data: [string, number | null][] = props.data().map(([dateStr, value]) => [ const data: [string, number | null][] = props.data().map(([dateStr, value]) => [
formatDateString(dateStr), formatDateString(dateStr),
web/src/station/MapResult.tsx
+6 -2
View File
@@ -96,8 +96,10 @@ function drawOnMap(
cityValues: [string, number | undefined][], cityValues: [string, number | undefined][],
): void { ): void {
ctx.drawImage(imgArr[0], 0, 0); ctx.drawImage(imgArr[0], 0, 0);
ctx.fillStyle = "red"; ctx.fillStyle = "white";
ctx.font = "18px serif"; ctx.font = "18px Arial";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
cityValues.forEach(([city, optionalValue]) => { cityValues.forEach(([city, optionalValue]) => {
const coord = cityCoords[city]; const coord = cityCoords[city];
if (!coord) return; if (!coord) return;
@@ -107,8 +109,10 @@ function drawOnMap(
ctx.beginPath(); ctx.beginPath();
// ctx.arc(coord.x, coord.y, 4, 0, 2 * Math.PI); // ctx.arc(coord.x, coord.y, 4, 0, 2 * Math.PI);
const cityTextSize = ctx.measureText(city); const cityTextSize = ctx.measureText(city);
ctx.strokeText(city, coord.x - cityTextSize.width/2, coord.y - 4);
ctx.fillText(city, coord.x - cityTextSize.width/2, coord.y - 4); ctx.fillText(city, coord.x - cityTextSize.width/2, coord.y - 4);
const valueTextSize = ctx.measureText(value); const valueTextSize = ctx.measureText(value);
ctx.strokeText(value, coord.x - valueTextSize.width/2, coord.y + 14);
ctx.fillText(value, coord.x - valueTextSize.width/2, coord.y + 14); ctx.fillText(value, coord.x - valueTextSize.width/2, coord.y + 14);
ctx.fill(); ctx.fill();
// const boxWidth = 60; // const boxWidth = 60;