add no data note / reformatting

Syrex-o · Sep 8, 2023 · 495e9fd · 495e9fd
1 parent 017327c
commit 495e9fd
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 83 deletions.
diff --git a/libs/fhem-components/src/lib/fhem-weather/fhem-weather.component.html b/libs/fhem-components/src/lib/fhem-weather/fhem-weather.component.html
@@ -13,18 +13,20 @@
 					<ng-template swiperSlide let-data>
 						<div class="data-page">
 							<!-- temp data -->
-							<ngx-charts-area-chart class="weather-chart"
-								*ngIf="(displayCharts$ | async) && forecastDay.hourData.temp[0].series.length"
-								[scheme]="tempColorScheme"
-								[gradient]="true"
-								[curve]="curve"
-								[xAxis]="true"
-								[yAxis]="true"
-								[showGridLines]="false"
-								[yAxisTickFormatting]="tempyAxisTickFormatting"
-								[xAxisTickFormatting]="formatAreaXAxis"
-								[results]="forecastDay.hourData.temp">
-							</ngx-charts-area-chart>
+							<ng-container *ngIf="forecastDay.hourData.temp[0].series.length; else NO_DATA">
+								<ngx-charts-area-chart class="weather-chart"
+									*ngIf="(displayCharts$ | async)"
+									[scheme]="tempColorScheme"
+									[gradient]="true"
+									[curve]="curve"
+									[xAxis]="true"
+									[yAxis]="true"
+									[showGridLines]="false"
+									[yAxisTickFormatting]="tempyAxisTickFormatting"
+									[xAxisTickFormatting]="formatAreaXAxis"
+									[results]="forecastDay.hourData.temp">
+								</ngx-charts-area-chart>
+							</ng-container>
 						</div>
 					</ng-template>
 				</ng-container>
@@ -48,4 +50,13 @@
 			</ng-container>
 		</div>
 	</div>
+
+	<ng-template #NO_DATA>
+		<div class="no-data-container">
+			<fhem-native-text-block
+				[label]="('COMPONENTS.Weather.ERRORS.NO_DATA.name' | translate)"
+				[info]="('COMPONENTS.Weather.ERRORS.NO_DATA.info' | translate)">
+			</fhem-native-text-block>
+		</div>
+	</ng-template>
 </fhem-native-component>
diff --git a/libs/fhem-components/src/lib/fhem-weather/fhem-weather.component.scss b/libs/fhem-components/src/lib/fhem-weather/fhem-weather.component.scss
@@ -2,77 +2,85 @@
 @import 'swiper/scss';
 
 .fhem-native-weather{
-    --chart-gap: 10px;
-    --day-height: 120px;
+	--chart-gap: 10px;
+	--day-height: 120px;
 
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 
-    .charts-container{
-        position: relative;
-        width: 100%;
-        height: calc( calc(100% - var(--day-height)) - var(--chart-gap) );
-        .data-swiper{
-            position: relative;
-            pointer-events: all;
-            width: 100%;
-            height: 100%;
-        }
-        .data-page{
-            position: absolute;
-            width: 100%;
-            height: 100%;
-        }
-    }
-    .days-container{
-        width: 100%;
-        height: var(--day-height);
-        display: flex;
-        gap: 10px;
-        overflow-x: auto;
-        .day-container{
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            min-width: 80px;
-            height: 100px;
-            flex-grow: 1;
-            flex-shrink: 0;
-            user-select: none;
-            pointer-events: all;
-            border-radius: 16px;
-            padding: 7px;
-            gap: 5px;
-            cursor: pointer;
-            overflow: hidden;
-            align-items: center;
-            justify-content: center;
-            &.active{
-                background-color: var(--secondary);
-            }
-            .icon-container{
-                img{
-                    height: 35px;
-                    width: auto;
-                }
-            }
-            .temp-container{
-                display: flex;
-                gap: 5px;
-                flex-direction: row;
-            }
-        }
-    }
+	.charts-container{
+		position: relative;
+		width: 100%;
+		height: calc( calc(100% - var(--day-height)) - var(--chart-gap) );
+		.data-swiper{
+			position: relative;
+			pointer-events: all;
+			width: 100%;
+			height: 100%;
+		}
+		.data-page{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.days-container{
+		width: 100%;
+		height: var(--day-height);
+		display: flex;
+		gap: 10px;
+		overflow-x: auto;
+		.day-container{
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			min-width: 80px;
+			height: 100px;
+			flex-grow: 1;
+			flex-shrink: 0;
+			user-select: none;
+			pointer-events: all;
+			border-radius: 16px;
+			padding: 7px;
+			gap: 5px;
+			cursor: pointer;
+			overflow: hidden;
+			align-items: center;
+			justify-content: center;
+			&.active{
+				background-color: var(--secondary);
+			}
+			.icon-container{
+				img{
+					height: 35px;
+					width: auto;
+				}
+			}
+			.temp-container{
+				display: flex;
+				gap: 5px;
+				flex-direction: row;
+			}
+		}
+	}
+
+	.no-data-container{
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
 }
 
 ngx-charts-area-chart.weather-chart {
-    .axis text {
-        fill: var(--text-a);
-    }
+	.axis text {
+		fill: var(--text-a);
+	}
 }
diff --git a/libs/fhem-components/src/lib/fhem-weather/fhem-weather.component.ts b/libs/fhem-components/src/lib/fhem-weather/fhem-weather.component.ts
@@ -66,13 +66,10 @@ export class FhemTimepickerComponent{
 	fhemDevice = new Subject<FhemDevice>();
 
 	curve = curveMonotoneX;
+	formatAreaXAxis = (date: Date)=> { return timeFormat("%H:%M")(date); }
 	tempColorScheme = {domain: ['#f7c703']} as Color;
 	tempyAxisTickFormatting(d: number){ return d + '°'; }
 
-	formatAreaXAxis = (date: Date)=> {
-		return timeFormat("%H")(date);
-	}
-
 	// ngx charts do not detect resize in container --> manually trigger
 	private displayCharts = new BehaviorSubject(false);
 	displayCharts$ = this.displayCharts.pipe(

diff --git a/libs/ui/assets/i18n/app/de.json b/libs/ui/assets/i18n/app/de.json
@@ -2531,6 +2531,12 @@
 						"info": "Typ des Fhem Wetter Moduls"
 					}
 				}
+			},
+			"ERRORS": {
+				"NO_DATA":{
+					"name": "Keine Daten",
+					"info": "Es sind keine Daten für den ausgewählten Zeitraum verfügbar."
+				}
 			}
 		}
 	}