Add option to show hourly forecast in increments

CHANGELOG.md

@@ -11,6 +11,8 @@ _This release is scheduled to be released on 2023-04-01._
 
 ### Added
 
+- Added increments for hourly forecasts in weather module (#2996)
+
 ### Removed
 
 - Removed darksky weather provider

modules/default/weather/weather.js

@@ -12,23 +12,25 @@ Module.register("weather", {
 		weatherProvider: "openweathermap",
 		roundTemp: false,
 		type: "current", // current, forecast, daily (equivalent to forecast), hourly (only with OpenWeatherMap /onecall endpoint)
+		lang: config.language,
 		units: config.units,
 		tempUnits: config.units,
 		windUnits: config.units,
+		timeFormat: config.timeFormat,
 		updateInterval: 10 * 60 * 1000, // every 10 minutes
 		animationSpeed: 1000,
-		timeFormat: config.timeFormat,
+		showFeelsLike: true,
+		showHumidity: false,
+		showIndoorHumidity: false,
+		showIndoorTemperature: false,
 		showPeriod: true,
 		showPeriodUpper: false,
+		showPrecipitationAmount: false,
+		showSun: true,
 		showWindDirection: true,
 		showWindDirectionAsArrow: false,
-		lang: config.language,
-		showHumidity: false,
-		showSun: true,
 		degreeLabel: false,
 		decimalSymbol: ".",
-		showIndoorTemperature: false,
-		showIndoorHumidity: false,
 		maxNumberOfDays: 5,
 		maxEntries: 5,
 		ignoreToday: false,
@@ -39,10 +41,9 @@ Module.register("weather", {
 		calendarClass: "calendar",
 		tableClass: "small",
 		onlyTemp: false,
-		showPrecipitationAmount: false,
 		colored: false,
-		showFeelsLike: true,
-		absoluteDates: false
+		absoluteDates: false,
+		hourlyForecastIncrements: 1
 	},
 
 	// Module properties.
@@ -137,13 +138,17 @@ Module.register("weather", {
 
 	// Add all the data to the template.
 	getTemplateData: function () {
-		const forecast = this.weatherProvider.weatherForecast();
+		const currentData = this.weatherProvider.currentWeather();
+		const forecastData = this.weatherProvider.weatherForecast();
+
+		// Skip some hourly forecast entries if configured
+		const hourlyData = this.weatherProvider.weatherHourly()?.filter((e, i) => (i + 1) % this.config.hourlyForecastIncrements === this.config.hourlyForecastIncrements - 1);
 
 		return {
 			config: this.config,
-			current: this.weatherProvider.currentWeather(),
-			forecast: forecast,
-			hourly: this.weatherProvider.weatherHourly(),
+			current: currentData,
+			forecast: forecastData,
+			hourly: hourlyData,
 			indoor: {
 				humidity: this.indoorHumidity,
 				temperature: this.indoorTemperature

tests/configs/modules/weather/hourlyweather_default.js

@@ -0,0 +1,25 @@
+/* MagicMirror² Test config hourly weather
+ *
+ * By rejas https://github.com/rejas
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "weather",
+			position: "bottom_bar",
+			config: {
+				type: "hourly",
+				location: "Berlin",
+				mockData: '"#####WEATHERDATA#####"'
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/weather/hourlyweather_options.js

@@ -0,0 +1,26 @@
+/* MagicMirror² Test config hourly weather options
+ *
+ * By rejas https://github.com/rejas
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "weather",
+			position: "bottom_bar",
+			config: {
+				type: "hourly",
+				location: "Berlin",
+				mockData: '"#####WEATHERDATA#####"',
+				hourlyForecastIncrements: 2
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/e2e/helpers/weather-functions.js

@@ -1,7 +1,7 @@
 const helpers = require("./global-setup");
 const path = require("path");
 const fs = require("fs");
-const { generateWeather, generateWeatherForecast } = require("../../mocks/weather_test");
+const { generateWeather, generateWeatherForecast, generateWeatherHourly } = require("../../mocks/weather_test");
 
 exports.getText = async (element, result) => {
 	const elem = await helpers.waitForElement(element);
@@ -18,6 +18,8 @@ exports.startApp = async (configFile, additionalMockData) => {
 	let mockWeather;
 	if (configFile.includes("forecast")) {
 		mockWeather = generateWeatherForecast(additionalMockData);
+	} else if (configFile.includes("hourly")) {
+		mockWeather = generateWeatherHourly(additionalMockData);
 	} else {
 		mockWeather = generateWeather(additionalMockData);
 	}

tests/e2e/modules/weather_hourly_spec.js

@@ -0,0 +1,36 @@
+const helpers = require("../helpers/global-setup");
+const weatherFunc = require("../helpers/weather-functions");
+
+describe("Weather module: Weather Hourly Forecast", () => {
+	afterAll(async () => {
+		await helpers.stopApplication();
+	});
+
+	describe("Default configuration", () => {
+		beforeAll(async () => {
+			await weatherFunc.startApp("tests/configs/modules/weather/hourlyweather_default.js", {});
+		});
+
+		const minTemps = ["7:00 pm", "8:00 pm", "9:00 pm", "10:00 pm", "11:00 pm"];
+		for (const [index, hour] of minTemps.entries()) {
+			it(`should render forecast for hour ${hour}`, async () => {
+				await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.day`, hour);
+			});
+		}
+	});
+
+	describe("Hourly weather options", () => {
+		beforeAll(async () => {
+			await weatherFunc.startApp("tests/configs/modules/weather/hourlyweather_options.js", {});
+		});
+
+		describe("Hourly increments of 2", () => {
+			const minTemps = ["7:00 pm", "9:00 pm", "11:00 pm", "1:00 am", "3:00 am"];
+			for (const [index, hour] of minTemps.entries()) {
+				it(`should render forecast for hour ${hour}`, async () => {
+					await weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.day`, hour);
+				});
+			}
+		});
+	});
+});

tests/electron/helpers/weather-setup.js

@@ -1,7 +1,7 @@
 const helpers = require("./global-setup");
 const path = require("path");
 const fs = require("fs");
-const { generateWeather, generateWeatherForecast } = require("../../mocks/weather_test");
+const { generateWeather, generateWeatherForecast, generateWeatherHourly } = require("../../mocks/weather_test");
 
 exports.getText = async (element, result) => {
 	const elem = await helpers.getElement(element);
@@ -19,6 +19,8 @@ exports.startApp = async (configFile, systemDate) => {
 	let mockWeather;
 	if (configFile.includes("forecast")) {
 		mockWeather = generateWeatherForecast();
+	} else if (configFile.includes("hourly")) {
+		mockWeather = generateWeatherHourly();
 	} else {
 		mockWeather = generateWeather();
 	}