Feature: Allow negative offsets and show empty segments when no data is available

src/conditions.ts

@@ -13,7 +13,8 @@ export const LABELS = {
   'sunny': 'conditions.sunny',
   'windy': 'conditions.windy',
   'windy-variant': 'conditions.windy',
-  'exceptional': 'conditions.clear'
+  'exceptional': 'conditions.clear',
+  'empty': 'conditions.noData'
 };
 export const ICONS = {
   'clear-night': 'weather-night',

src/editor.ts

@@ -124,9 +124,6 @@ export class HourlyWeatherCardEditor extends ScopedRegistryHost(LitElement) impl
         .configValue=${'offset'}
         @input=${this._valueChanged}
         .type=${'number'}
-        .min=${0}
-        .autoValidate=${true}
-        validationMessage=${localize('errors.must_be_positive_int')}
       ></mwc-textfield>
       <mwc-textfield
       label=${localize('editor.label_spacing')}

src/hourly-weather.ts

@@ -238,22 +238,20 @@ export class HourlyWeatherCard extends LitElement {
     const precipitationUnit = state.attributes.precipitation_unit ?? '';
     const numSegments = parseInt(config.num_segments ?? config.num_hours ?? '12', 10);
     const offset = parseInt(config.offset ?? '0', 10);
+    const numEmptySegmentsLeading = Math.min(numSegments, Math.max(0, -offset));
     const labelSpacing = parseInt(config.label_spacing ?? '2', 10);
     const forecastNotAvailable = !forecast || !forecast.length;
 
+    // Adjust numSegments to only load the required number after the empty segments
+    const offsetAdjusted = Math.max(0, offset);
+    const numSegmentsAdjusted = Math.max(0,Math.min(numSegments - numEmptySegmentsLeading, forecast.length - offsetAdjusted));
+    const numEmptySegmentsTrailing = numSegments - (numSegmentsAdjusted + numEmptySegmentsLeading);
+
     if (numSegments < 1) {
       // REMARK: Ok, so I'm re-using a localized string here. Probably not the best, but it avoids repeating for no good reason
       return await this._showError(this.localize('errors.offset_must_be_positive_int', 'offset', 'num_segments'));
     }
 
-    if (offset < 0) {
-      return await this._showError(this.localize('errors.offset_must_be_positive_int'));
-    }
-
-    if (!forecastNotAvailable && numSegments > (forecast.length - offset)) {
-      return await this._showError(this.localize('errors.too_many_segments_requested'));
-    }
-
     if (labelSpacing < 1) {
       // REMARK: Ok, so I'm re-using a localized string here. Probably not the best, but it avoids repeating for no good reason
       return await this._showError(this.localize('errors.offset_must_be_positive_int', 'offset', 'label_spacing'));
@@ -283,10 +281,10 @@ export class HourlyWeatherCard extends LitElement {
     }
 
     const isForecastDaily = this.isForecastDaily(forecast);
-    const conditionList = this.getConditionListFromForecast(forecast, numSegments, offset);
-    const temperatures = this.getTemperatures(forecast, numSegments, offset);
-    const wind = this.getWind(forecast, numSegments, offset, windSpeedUnit);
-    const precipitation = this.getPrecipitation(forecast, numSegments, offset, precipitationUnit);
+    const conditionList = this.getConditionListFromForecast(forecast, numSegmentsAdjusted, offsetAdjusted);
+    const temperatures = this.getTemperatures(forecast, numSegmentsAdjusted, offsetAdjusted);
+    const wind = this.getWind(forecast, numSegmentsAdjusted, offsetAdjusted, windSpeedUnit);
+    const precipitation = this.getPrecipitation(forecast, numSegmentsAdjusted, offsetAdjusted, precipitationUnit);
 
     const colorSettings = this.getColorSettings(config.colors);
 
@@ -322,13 +320,18 @@ export class HourlyWeatherCard extends LitElement {
             .show_precipitation_probability=${!!config.show_precipitation_probability}
             .show_date=${config.show_date}
             .label_spacing=${labelSpacing}
+            .num_empty_segments_leading=${numEmptySegmentsLeading}
+            .num_empty_segments_trailing=${numEmptySegmentsTrailing}
             .labels=${this.labels}></weather-bar>
         </div>
       </ha-card>
     `;
   }
 
   private getConditionListFromForecast(forecast: ForecastSegment[], numSegments: number, offset: number): ConditionSpan[] {
+    if (numSegments < 1) {
+      return [];
+    }
     let lastCond: string = forecast[offset].condition;
     let j = 0;
     const res: ConditionSpan[] = [[lastCond, 1]];
@@ -346,6 +349,9 @@ export class HourlyWeatherCard extends LitElement {
   }
 
   private getTemperatures(forecast: ForecastSegment[], numSegments: number, offset: number): SegmentTemperature[] {
+    if (numSegments < 1) {
+      return [];
+    }
     const temperatures: SegmentTemperature[] = [];
     for (let i = offset; i < numSegments + offset; i++) {
       const fs = forecast[i];
@@ -360,6 +366,9 @@ export class HourlyWeatherCard extends LitElement {
   }
 
   private getPrecipitation(forecast: ForecastSegment[], numSegments: number, offset: number, unit: string): SegmentPrecipitation[] {
+    if (numSegments < 1) {
+      return [];
+    }
     const precipitation: SegmentPrecipitation[] = [];
     for (let i = offset; i < numSegments + offset; i++) {
       const fs = forecast[i];
@@ -384,6 +393,9 @@ export class HourlyWeatherCard extends LitElement {
   }
 
   private getWind(forecast: ForecastSegment[], numSegments: number, offset: number, speedUnit: string): SegmentWind[] {
+    if (numSegments < 1) {
+      return [];
+    }
     const wind: SegmentWind[] = [];
     for (let i = offset; i < numSegments + offset; i++) {
       const fs = forecast[i];

src/localize/languages/en.json

@@ -49,7 +49,8 @@
     "snow": "Snow",
     "mixedPrecip": "Mixed precip",
     "sunny": "Sunny",
-    "windy": "Windy"
+    "windy": "Windy",
+    "noData": "No data"
   },
   "direction": {
     "n": "N",

src/types.ts

@@ -58,6 +58,7 @@ export interface ColorConfig {
   'windy'?: ColorDefinition;
   'windy-variant'?: ColorDefinition;
   'exceptional'?: ColorDefinition;
+  'empty'?: ColorDefinition;
 }
 
 export interface ForecastSegment {

src/weather-bar.ts

@@ -51,15 +51,29 @@ export class WeatherBar extends LitElement {
   @property({ type: Number })
   label_spacing = 2;
 
+  @property({ type: Number })
+  num_empty_segments_leading = 0;
+
+  @property({ type: Number })
+  num_empty_segments_trailing = 0;
+
   @property({ type: Object })
   labels = LABELS;
 
   private tips: Instance[] = [];
 
   render() {
     const conditionBars: TemplateResult[] = [];
+    const emptyLabel = this.labels['empty'];
     let gridStart = 1;
     if (!this.hide_bar) {
+      if (this.num_empty_segments_leading > 0) {
+        const barStylesEmpty: Readonly<StyleInfo> = { gridColumnStart: String(gridStart), gridColumnEnd: String(gridStart += this.num_empty_segments_leading * 2) };
+        conditionBars.push(html`
+          <div class="empty" style=${styleMap(barStylesEmpty)} data-tippy-content=${emptyLabel}></div>
+        `);
+      }
+
       for (const cond of this.conditions) {
         const label = this.labels[cond[0]];
         let icon = ICONS[cond[0]];
@@ -74,11 +88,35 @@ export class WeatherBar extends LitElement {
           </div>
         `);
       }
+
+      if (this.num_empty_segments_trailing > 0) {
+        const barStylesEmpty: Readonly<StyleInfo> = { gridColumnStart: String(gridStart), gridColumnEnd: String(gridStart += this.num_empty_segments_trailing * 2) };
+        conditionBars.push(html`
+          <div class="empty" style=${styleMap(barStylesEmpty)} data-tippy-content=${emptyLabel}></div>
+        `);
+      }
     }
 
     const windCfg = this.show_wind ?? '';
     const barBlocks: TemplateResult[] = [];
     let lastDate: string | null = null;
+
+    for (let i = 0; i < this.num_empty_segments_leading; i += 1) {
+      barBlocks.push(html`
+        <div class="bar-block">
+          <div class="bar-block-left bar-block-empty"></div>
+          <div class="bar-block-right bar-block-empty"></div>
+          <div class="bar-block-bottom bar-block-empty">
+            <div class="date"></div>
+            <div class="hour"></div>
+            <div class="temperature"></div>
+            <div class="wind"></div>
+            <div class="precipitation"></div>
+          </div>
+        </div>
+      `);
+    }
+
     for (let i = 0; i < this.temperatures.length; i += 1) {
       const skipLabel = i % (this.label_spacing) !== 0;
       const hideHours = this.hide_hours || skipLabel;
@@ -136,6 +174,22 @@ export class WeatherBar extends LitElement {
       `);
     }
 
+    for (let i = 0; i < this.num_empty_segments_trailing; i += 1) {
+      barBlocks.push(html`
+        <div class="bar-block">
+          <div class="bar-block-left bar-block-empty"></div>
+          <div class="bar-block-right bar-block-empty"></div>
+          <div class="bar-block-bottom bar-block-empty">
+            <div class="date"></div>
+            <div class="hour"></div>
+            <div class="temperature"></div>
+            <div class="wind"></div>
+            <div class="precipitation"></div>
+          </div>
+        </div>
+      `);
+    }
+
     let colorStyles: TemplateResult | null = null;
     if (this.colors) {
       colorStyles = this.getColorStyles(this.colors);
@@ -203,6 +257,8 @@ export class WeatherBar extends LitElement {
       --color-windy: var(--color-sunny);
       --color-windy-variant: var(--color-sunny);
       --color-exceptional: #ff9d00;
+      --color-empty: #aaaaaa;
+      --color-empty-foreground: #dddddd;
     }
     .bar {
       height: 30px;
@@ -299,6 +355,11 @@ export class WeatherBar extends LitElement {
       background-color: var(--color-exceptional);
       color: var(--color-exceptional-foreground, var(--primary-text-color));
     }
+    .empty {
+      background-color: var(--color-empty);
+      background-image: repeating-linear-gradient(135deg, var(--color-empty) 0px, var(--color-empty) 2px, var(--color-empty-foreground, var(--color-empty)) 4px, var(--color-empty-foreground, var(--color-empty)) 6px, var(--color-empty) 8px);
+      color: var(--color-empty-foreground, var(--primary-text-color));
+    }
     .axes {
       display: grid;
       grid-auto-flow: column;
@@ -326,6 +387,9 @@ export class WeatherBar extends LitElement {
       grid-area: bottom;
       padding-top: 5px;
     }
+    .bar-block-empty {
+      border-width: 0px;
+    }
     .date, .hour {
       color: var(--secondary-text-color, gray);
       font-size: 0.9rem;