diff --git a/web/src/components/chart/CityChart.tsx b/web/src/components/chart/CityChart.tsx index 447c2a4..293d33b 100644 --- a/web/src/components/chart/CityChart.tsx +++ b/web/src/components/chart/CityChart.tsx @@ -13,8 +13,6 @@ export const CityChart: Component<{ const [getCanvas, setCanvas] = createSignal(); const [getIsLarge, setIsLarge] = createSignal(false); - console.log("props.data()", props.data()); - let chart: Chart | undefined; const data: [string, number | null][] = props.data().map(([dateStr, value]) => [ formatDateString(dateStr), diff --git a/web/src/station/MapResult.tsx b/web/src/station/MapResult.tsx index e1fb580..76ff81a 100644 --- a/web/src/station/MapResult.tsx +++ b/web/src/station/MapResult.tsx @@ -96,8 +96,10 @@ function drawOnMap( cityValues: [string, number | undefined][], ): void { ctx.drawImage(imgArr[0], 0, 0); - ctx.fillStyle = "red"; - ctx.font = "18px serif"; + ctx.fillStyle = "white"; + ctx.font = "18px Arial"; + ctx.strokeStyle = "black"; + ctx.lineWidth = 4; cityValues.forEach(([city, optionalValue]) => { const coord = cityCoords[city]; if (!coord) return; @@ -107,8 +109,10 @@ function drawOnMap( ctx.beginPath(); // ctx.arc(coord.x, coord.y, 4, 0, 2 * Math.PI); 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); 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.fill(); // const boxWidth = 60;