#376-SMHI-forecast-view-design

a21jonfa commented

2026-04-21 12:41:01 +00:00

Collaborator

proof of concept for forecast design, thinking was to make it easier to see all the relevant data by hiding the individual hours from the rest of the day to give a better overview. Highly inspired by how smhi does their 10 day forcast https://www.smhi.se/vader/prognoser-och-varningar/vaderprognos/q/Sk%C3%B6vde/2677234

Capture.PNG

33 KiB

Capture2.PNG

29 KiB

a21jonfa added 3 commits

2026-04-21 12:41:02 +00:00

Reworked Display, design heavily inspired by the 10-day view from smhi.se. Moved most css to separate file. 7e3ec5cd91

slight refactor, removing excess code, moving last css to .css file 532d4c576f

Added Option to hide and display tempratures for each day more akin to smhi.se 29519e599a

a21jonfa was assigned by c24elipe

2026-04-21 13:13:35 +00:00

c24elipe requested review from a24nedka

2026-04-21 13:14:04 +00:00

a24nedka commented

2026-04-21 19:26:20 +00:00

Collaborator

Review on #456

Whats done:

-Tested the solution on windows on firefox.

Verified that the forecast data displays correctly
Verified that data is grouped by date and shown in a structured way.
Tested the function with toggle functionality with show and hide, which worked.

### Inspected files:

frontend/src/features/smhi/SMHIForecastView.js

frontend/src/features/smhi/SMHIForecastView.module.css

### Code review:

-The implemented component follows the React patterns good, the use of hooks works as expected and the UI behaves good.

-The feature implemented with grouping forecast data is implemented in a clear and understandable way.

-Follows our code standard well.

What can be improved:

-Missing key props in mapped elements.

-CSS file contains values with quotes which should be removed.

None of this suggestions are blocking but they can be cleaned up.

### ### Design feedback:
The UI could be improved by using different font sizes, spacing, and colors to create a clearer visual hierarchy. For example, the day name and daily high/low temperatures could be more emphasized to make the information easier to scan for a user.

**Apart from that the design is clear. **

### **Review on #456** ### **Whats done:** -Tested the solution on windows on firefox. - Verified that the forecast data displays correctly - Verified that data is grouped by date and shown in a structured way. - Tested the function with toggle functionality with show and hide, which worked. **### Inspected files:** frontend/src/features/smhi/SMHIForecastView.js frontend/src/features/smhi/SMHIForecastView.module.css **### Code review:** -The implemented component follows the React patterns good, the use of hooks works as expected and the UI behaves good. -The feature implemented with grouping forecast data is implemented in a clear and understandable way. -Follows our code standard well. **What can be improved:** -Missing key props in mapped elements. -CSS file contains values with quotes which should be removed. None of this suggestions are blocking but they can be cleaned up. **### **### Design feedback:**** The UI could be improved by using different font sizes, spacing, and colors to create a clearer visual hierarchy. For example, the day name and daily high/low temperatures could be more emphasized to make the information easier to scan for a user. **Apart from that the design is clear. **