From 2140d61fd4b2351fecade30e6e613f3e14de8701 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Sun, 1 Sep 2024 01:30:46 +0200
Subject: [PATCH] feat: Prevent first icon to be drawn outside of the canvas

---
 src/lib/open-meteo/api.ts         | 2 +-
 src/plugins/weatherIcons/index.ts | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/open-meteo/api.ts b/src/lib/open-meteo/api.ts
index 4f6764a..711967d 100644
--- a/src/lib/open-meteo/api.ts
+++ b/src/lib/open-meteo/api.ts
@@ -130,7 +130,7 @@ export async function searchLocation(query: string): Promise<City[]> {
 	searchRequest.searchParams.append('name', query)
 	searchRequest.searchParams.append('count', '10')
 
-	const response = await fetch(searchRequest )
+	const response = await fetch(searchRequest)
 	const { results } = await response.json()
 
 	return results.map((city: any) => {
diff --git a/src/plugins/weatherIcons/index.ts b/src/plugins/weatherIcons/index.ts
index fe52883..9327335 100644
--- a/src/plugins/weatherIcons/index.ts
+++ b/src/plugins/weatherIcons/index.ts
@@ -11,12 +11,18 @@ export const weatherIcons: Plugin = {
 	afterDraw(chart, args, options: WeatherIconsOptions) {
 		const ctx = chart.ctx
 		const iconWidth = 30
+		const firstPixel = chart.scales.x.getPixelForValue(options.forecast.hourly[0].time.getTime())
 		let lastPixelDraw: number | undefined = undefined
 
 		options.forecast.hourly.filter(({ time }) => {
 			const timestamp = time.getTime()
 			const pixel = chart.scales.x.getPixelForValue(timestamp)
 
+			// Prevent first icon to be partially drawn outside of the canvas.
+			if (pixel < firstPixel + iconWidth / 2) {
+				return false
+			}
+
 			// Prevent icon overlap.
 			if (lastPixelDraw !== undefined && Math.abs(pixel - lastPixelDraw) < iconWidth / 2) {
 				return false