Fix missing temp indicator when out of range

pkissling · Oct 22, 2022 · 61b6e5e · 61b6e5e
1 parent 284001f
commit 61b6e5e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 33 deletions.
diff --git a/src/clock-weather-card.ts b/src/clock-weather-card.ts
@@ -25,6 +25,7 @@ import { HassEntityBase } from 'home-assistant-js-websocket';
 import { extractMostOccuring, max, min, round, roundDown, roundUp } from './utils';
 import { svg, png } from './images';
 import { version } from '../package.json';
+import { safeRender } from './helpers';
 
 console.info(
 `%c  CLOCK-WEATHER-CARD \n%c Version: ${version}`,
@@ -120,11 +121,11 @@ export class ClockWeatherCard extends LitElement {
       >
         ${showToday ? html`
           <clock-weather-card-today>
-            ${this.safeRender(() => this.renderToday())}
+            ${safeRender(() => this.renderToday())}
           </clock-weather-card-today>` : ''}
         ${showForecast ? html`
           <clock-weather-card-forecast>
-            ${this.safeRender(() => this.renderForecast())}
+            ${safeRender(() => this.renderForecast())}
           </clock-weather-card-forecast>` : ''}
       </ha-card>
     `;
@@ -161,32 +162,34 @@ export class ClockWeatherCard extends LitElement {
 
   private renderForecast(): TemplateResult[] {
     const weather = this.getWeather();
+    const currentTemp = weather.attributes.temperature;
     const days = this.config.forecast_days;
 
     const dailyForecasts = this.extractDailyForecasts(weather.attributes.forecast, days);
 
-    const minTemps = dailyForecasts.map((f) => f.templow);
-    const maxTemps = dailyForecasts.map((f) => f.temperature);
+    const minTemps = [...dailyForecasts.map((f) => f.templow), currentTemp];
+    const maxTemps = [...dailyForecasts.map((f) => f.temperature), currentTemp];
     const minTemp = Math.round(min(minTemps));
     const maxTemp = Math.round(max(maxTemps));
     const temperatueUnit = weather.attributes.temperature_unit;
     const gradientRange = this.gradientRange(minTemp, maxTemp, temperatueUnit);
-    return dailyForecasts.map((forecast) => this.safeRender(() => this.renderForecastDay(forecast, gradientRange, minTemp, maxTemp)));
+    return dailyForecasts.map((forecast) => safeRender(() => this.renderForecastDay(forecast, gradientRange, minTemp, maxTemp, currentTemp)));
   }
 
-  private renderForecastDay(forecast: MergedWeatherForecast, gradientRange: Rgb[], minTemp: number, maxTemp: number): TemplateResult {
+  private renderForecastDay(forecast: MergedWeatherForecast, gradientRange: Rgb[], minTemp: number, maxTemp: number, currentTemp: number): TemplateResult {
     const dayText = this.localize(`day.${new Date(forecast.datetime).getDay()}`);
     const weatherState = forecast.condition === 'pouring' ? 'raindrops' : forecast.condition === 'rainy' ? 'raindrop' : forecast.condition;
     const weatherIcon = this.toIcon(weatherState, 'fill', true, 'static');
     const tempUnit = this.getWeather().attributes.temperature_unit;
-    const minTempDay = Math.round(forecast.templow);
-    const maxTempDay = Math.round(forecast.temperature);
+    const isToday = new Date().getDate() === new Date(forecast.datetime).getDate();
+    const minTempDay = Math.round(isToday ? Math.min(currentTemp, forecast.templow) : forecast.templow);
+    const maxTempDay = Math.round(isToday ? Math.max(currentTemp, forecast.temperature) : forecast.temperature);
     return html`
       <clock-weather-card-forecast-row>
         ${this.renderText(dayText)}
         ${this.renderIcon(weatherIcon)}
         ${this.renderText(this.toConfiguredTempUnit(tempUnit, minTempDay), 'right')}
-        ${this.renderForecastTemperatureBar(forecast, gradientRange, minTemp, maxTemp, minTempDay, maxTempDay)}
+        ${this.renderForecastTemperatureBar(gradientRange, minTemp, maxTemp, minTempDay, maxTempDay, currentTemp, isToday)}
         ${this.renderText(this.toConfiguredTempUnit(tempUnit, maxTempDay))}
       </clock-weather-card-forecast-row>
     `;
@@ -208,8 +211,8 @@ export class ClockWeatherCard extends LitElement {
     `;
   }
 
-  private renderForecastTemperatureBar(forecast: MergedWeatherForecast, gradientRange: Rgb[], minTemp: number, maxTemp: number, minTempDay: number, maxTempDay: number): TemplateResult {
-    const { startPercent, endPercent } = this.calculateBarRangePercents(minTemp, maxTemp, minTempDay, maxTempDay);
+  private renderForecastTemperatureBar(gradientRange: Rgb[], minTemp: number, maxTemp: number, minTempDay: number, maxTempDay: number, currentTemp: number, isToday: boolean): TemplateResult {
+    const { startPercent, endPercent } = this.calculateBarRangePercents(minTemp, maxTemp, minTempDay, maxTempDay)
     return html`
       <forecast-temperature-bar>
         <forecast-temperature-bar-background> </forecast-temperature-bar-background>
@@ -220,24 +223,14 @@ export class ClockWeatherCard extends LitElement {
             endPercent,
           )};"
         >
-          ${this.renderForecastCurrentTemp(forecast, minTempDay, maxTempDay)}
+          ${isToday ? this.renderForecastCurrentTemp(minTempDay, maxTempDay, currentTemp) : ''}
         </forecast-temperature-bar-range>
       </forecast-temperature-bar>
     `;
   }
 
-  private renderForecastCurrentTemp(forecast: MergedWeatherForecast, minTempDay: number, maxTempDay: number): TemplateResult {
-    const isToday = new Date().getDay() === new Date(forecast.datetime).getDay();
-    if (!isToday) {
-      return html``;
-    }
-    const weather = this.getWeather();
-    const currentTemp = Math.round(weather.attributes.temperature);
-    const indicatorPosition = isToday ? (100 / (maxTempDay - minTempDay)) * (currentTemp - minTempDay) : null;
-    if (indicatorPosition === null) {
-      return html``;
-    }
-
+  private renderForecastCurrentTemp(minTempDay: number, maxTempDay: number, currentTemp: number): TemplateResult {
+    const indicatorPosition = minTempDay === maxTempDay ? 0 : (100 / (maxTempDay - minTempDay)) * (currentTemp - minTempDay)
     return html`
       <forecast-temperature-bar-current-indicator style="--position: ${indicatorPosition}%;">
         <forecast-temperature-bar-current-indicator-dot style="--move-left: ${indicatorPosition > 50 ? '1' : '0'}">
@@ -467,14 +460,5 @@ export class ClockWeatherCard extends LitElement {
       precipitation: precipitation,
     }
   }
-
-  private safeRender<T>(renderFn: () => T): T | TemplateResult {
-    try {
-      return renderFn()
-    } catch (e) {
-      console.error('Error while rendering clock-weather-card component:', e)
-      return html``
-    }
-  }
 }
 
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -0,0 +1,10 @@
+import { html, TemplateResult } from "lit";
+
+export function safeRender<T>(renderFn: () => T): T | TemplateResult {
+  try {
+    return renderFn()
+  } catch (e) {
+    console.error('Error while rendering clock-weather-card component:', e)
+    return html``
+  }
+}