decompil3d · decompil3d · Oct 18, 2022 · Oct 17, 2022 · Oct 18, 2022 · Oct 18, 2022
diff --git a/README.md b/README.md
@@ -56,24 +56,25 @@ Otherwise, the integration may complain of a duplicate unique ID.
 
 ## Options
 
-| Name              | Type   | Requirement  | Description                                               | Default             |
-| ----------------- | ------ | ------------ | --------------------------------------------------------- | ------------------- |
-| type              | string | **Required** | `custom:hourly-weather`                                   |                     |
-| entity            | string | **Required** | Home Assistant weather entity ID.                         |                     |
-| name              | string | **Optional** | Card name (set to `null` to hide)                         | `Hourly Weather`    |
-| icons             | bool   | **Optional** | Whether to show icons instead of text labels              | `false`             |
-| num_segments      | number | **Optional** | Number of forecast segments to show (even integer >= 2)   | `12`                |
-| ~~num_hours~~     | number | **Optional** | _Deprecated:_ Use `num_segments` instead                  | `12`                |
-| offset            | number | **Optional** | Number of forecast segments to offset from start          | `0`                 |
-| label_spacing     | number | **Optional** | Space between time/temperature labels (even integer >= 2) | `2`                 |
-| colors            | object | **Optional** | Set colors for all or some conditions                     |                     |
-| hide_hours        | bool   | **Optional** | Whether to hide hour labels under the bar                 | `false`             |
-| hide_temperatures | bool   | **Optional** | Whether to hide temeratures under the bar                 | `false`             |
-| show_wind         | bool   | **Optional** | Whether to show wind speed and direction under the bar    | `false`             |
-| tap_action        | object | **Optional** | Action to take on tap                                     | `action: more-info` |
-| hold_action       | object | **Optional** | Action to take on hold                                    | `none`              |
-| double_tap_action | object | **Optional** | Action to take on double tap                              | `none`              |
-| language          | string | **Optional** | Language to use for card (overrides HA & user settings)   |                     |
+| Name                       | Type   | Requirement  | Description                                               | Default             |
+| -------------------------- | ------ | ------------ | --------------------------------------------------------- | ------------------- |
+| type                       | string | **Required** | `custom:hourly-weather`                                   |                     |
+| entity                     | string | **Required** | Home Assistant weather entity ID.                         |                     |
+| name                       | string | **Optional** | Card name (set to `null` to hide)                         | `Hourly Weather`    |
+| icons                      | bool   | **Optional** | Whether to show icons instead of text labels              | `false`             |
+| num_segments               | number | **Optional** | Number of forecast segments to show (even integer >= 2)   | `12`                |
+| ~~num_hours~~              | number | **Optional** | _Deprecated:_ Use `num_segments` instead                  | `12`                |
+| offset                     | number | **Optional** | Number of forecast segments to offset from start          | `0`                 |
+| label_spacing              | number | **Optional** | Space between time/temperature labels (even integer >= 2) | `2`                 |
+| colors                     | object | **Optional** | Set colors for all or some conditions                     |                     |
+| hide_hours                 | bool   | **Optional** | Whether to hide hour labels under the bar                 | `false`             |
+| hide_temperatures          | bool   | **Optional** | Whether to hide temeratures under the bar                 | `false`             |
+| show_wind                  | bool   | **Optional** | Whether to show wind speed and direction under the bar    | `false`             |
+| show_precipitation_amounts | bool   | **Optional** | Whether to show precipitation (rain) amount under the bar | `false`             |
+| tap_action                 | object | **Optional** | Action to take on tap                                     | `action: more-info` |
+| hold_action                | object | **Optional** | Action to take on hold                                    | `none`              |
+| double_tap_action          | object | **Optional** | Action to take on double tap                              | `none`              |
+| language                   | string | **Optional** | Language to use for card (overrides HA & user settings)   |                     |
 
 ### Templating
 

diff --git a/cypress/e2e/weather-bar.cy.ts b/cypress/e2e/weather-bar.cy.ts
@@ -305,5 +305,41 @@ describe('Weather bar', () => {
           cy.wrap(el).should('have.text', `${expectedWindSpeeds[i]} mph${expectedWindDirections[i]}`);
         });
     });
+
+    it('does not show precipitation by default', () => {
+      cy.get('weather-bar')
+        .shadow()
+        .find('div.axes > div.bar-block div.precipitation')
+        .should('have.length', 6)
+        .each((el) => {
+          cy.wrap(el).should('be.empty');
+        });
+    });
+
+    const expectedPrecipitation = [
+      0.35,
+      1.3,
+      0,
+      0,
+      0,
+      0,
+    ];
+
+    it('shows precipitation if specified in config', () => {
+      cy.configure({
+        show_precipitation_amounts: true
+      });
+      cy.get('weather-bar')
+        .shadow()
+        .find('div.axes > div.bar-block div.precipitation')
+        .should('have.length', 6)
+        .each((el, i) => {
+          if (expectedPrecipitation[i] === 0) {
+            cy.wrap(el).should('be.empty');
+          } else {
+            cy.wrap(el).should('have.text', `${expectedPrecipitation[i]} in`);
+          }
+        });
+    });
   });
 });
diff --git a/cypress/fixtures/harness.html b/cypress/fixtures/harness.html
@@ -35,6 +35,7 @@
         'weather.mock': {
           attributes: {
             wind_speed_unit: "mph",
+            precipitation_unit: "in",
             forecast: [
             {
               "datetime": "2022-07-21T17:00:00+00:00",
@@ -49,7 +50,7 @@
             },
             {
               "datetime": "2022-07-21T18:00:00+00:00",
-              "precipitation": 0,
+              "precipitation": 0.35,
               "precipitation_probability": 0,
               "pressure": 1007,
               "wind_speed": 6.07,
@@ -71,7 +72,7 @@
             },
             {
               "datetime": "2022-07-21T20:00:00+00:00",
-              "precipitation": 0,
+              "precipitation": 1.3,
               "precipitation_probability": 1,
               "pressure": 1007,
               "wind_speed": 5.9,

diff --git a/src/editor.ts b/src/editor.ts
@@ -62,6 +62,10 @@ export class HourlyWeatherCardEditor extends ScopedRegistryHost(LitElement) impl
     return this._config?.show_wind ?? false;
   }
 
+  get _show_precipitation_amounts(): boolean {
+    return this._config?.show_precipitation_amounts ?? false;
+  }
+
   get _offset(): string {
     return this._config?.offset ?? '0';
   }
@@ -146,6 +150,13 @@ export class HourlyWeatherCardEditor extends ScopedRegistryHost(LitElement) impl
           @change=${this._valueChanged}
         ></mwc-switch>
       </mwc-formfield>
+      <mwc-formfield .label=${localize('editor.show_precipitation_amounts')}>
+        <mwc-switch
+          .checked=${this._show_precipitation_amounts === true}
+          .configValue=${'show_precipitation_amounts'}
+          @change=${this._valueChanged}
+        ></mwc-switch>
+      </mwc-formfield>
     `;
   }
 

diff --git a/src/hourly-weather.ts b/src/hourly-weather.ts
@@ -27,6 +27,7 @@ import type {
   RenderTemplateResult,
   SegmentTemperature,
   SegmentWind,
+  SegmentPrecipitation,
 } from './types';
 import { actionHandler } from './action-handler-directive';
 import { version } from '../package.json';
@@ -229,6 +230,7 @@ export class HourlyWeatherCard extends LitElement {
     const state = this.hass.states[entityId];
     const { forecast } = state.attributes as { forecast: ForecastSegment[] };
     const windSpeedUnit = state.attributes.wind_speed_unit ?? '';
+    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 labelSpacing = parseInt(config.label_spacing ?? '2', 10);
@@ -274,6 +276,7 @@ export class HourlyWeatherCard extends LitElement {
     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 colorSettings = this.getColorSettings(config.colors);
 
@@ -298,11 +301,13 @@ export class HourlyWeatherCard extends LitElement {
             .conditions=${conditionList}
             .temperatures=${temperatures}
             .wind=${wind}
+            .precipitation=${precipitation}
             .icons=${!!config.icons}
             .colors=${colorSettings.validColors}
             .hide_hours=${!!config.hide_hours}
             .hide_temperatures=${!!config.hide_temperatures}
             .show_wind=${!!config.show_wind}
+            .show_precipitation_amounts=${!!config.show_precipitation_amounts}
             .label_spacing=${labelSpacing}
             .labels=${this.labels}></weather-bar>
         </div>
@@ -339,6 +344,22 @@ export class HourlyWeatherCard extends LitElement {
     return temperatures;
   }
 
+  private getPrecipitation(forecast: ForecastSegment[], numSegments: number, offset: number, unit: string): SegmentPrecipitation[] {
+    const precipitation: SegmentPrecipitation[] = [];
+    for (let i = offset; i < numSegments + offset; i++) {
+      const fs = forecast[i];
+      let amount = '';
+      if (fs.precipitation > 0) {
+        amount = `${formatNumber(fs.precipitation, this.hass.locale)} ${unit}`.trim();
+      }
+      precipitation.push({
+        hour: this.formatHour(new Date(fs.datetime), this.hass.locale),
+        precipitationAmount: amount
+      })
+    }
+    return precipitation;
+  }
+
   private getWind(forecast: ForecastSegment[], numSegments: number, offset: number, speedUnit: string): SegmentWind[] {
     const wind: SegmentWind[] = [];
     for (let i = offset; i < numSegments + offset; i++) {

diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -13,7 +13,8 @@
     "offset": "Number of forecast segments to offset start by (Optional)",
     "icons": "Show icons instead of text labels",
     "label_spacing": "Number of forecast segments to space time and temperature labels by (Optional)",
-    "show_wind": "Show wind speed and direction"
+    "show_wind": "Show wind speed and direction",
+    "show_precipitation_amounts": "Show precipitation (rain) amount"
   },
   "errors": {
     "missing_entity": "entity is missing in configuration",

diff --git a/src/types.ts b/src/types.ts
@@ -20,6 +20,7 @@ export interface HourlyWeatherCardConfig extends LovelaceCardConfig {
   hide_hours?: boolean;
   hide_temperatures?: boolean;
   show_wind?: boolean;
+  show_precipitation_amounts?: boolean;
   label_spacing?: string; // number
   test_gui?: boolean;
   tap_action?: ActionConfig;
@@ -74,6 +75,11 @@ export interface SegmentWind {
   windDirection: string
 }
 
+export interface SegmentPrecipitation {
+  hour: string,
+  precipitationAmount: string
+}
+
 export type ColorMap = Map<keyof ColorConfig, string>
 
 export interface ColorSettings {

diff --git a/src/weather-bar.ts b/src/weather-bar.ts
@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js";
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import tippy, { Instance } from 'tippy.js';
 import { LABELS, ICONS } from "./conditions";
-import type { ColorMap, ConditionSpan, SegmentTemperature, SegmentWind } from "./types";
+import type { ColorMap, ConditionSpan, SegmentTemperature, SegmentWind, SegmentPrecipitation } from "./types";
 
 const tippyStyles: string = process.env.TIPPY_CSS || '';
 
@@ -17,6 +17,9 @@ export class WeatherBar extends LitElement {
   @property({ type: Array })
   wind: SegmentWind[] = [];
 
+  @property({ type: Array })
+  precipitation: SegmentPrecipitation[] = [];
+
   @property({ type: Boolean })
   icons = false;
 
@@ -32,6 +35,9 @@ export class WeatherBar extends LitElement {
   @property({ type: Boolean })
   show_wind = false;
 
+  @property({ type: Boolean })
+  show_precipitation_amounts = false;
+
   @property({ type: Number })
   label_spacing = 2;
 
@@ -64,8 +70,10 @@ export class WeatherBar extends LitElement {
       const hideHours = this.hide_hours || skipLabel;
       const hideTemperature = this.hide_temperatures || skipLabel;
       const showWind = this.show_wind && !skipLabel;
+      const showPrecipitationAmounts = this.show_precipitation_amounts && !skipLabel;
       const { hour, temperature } = this.temperatures[i];
       const { windSpeed, windDirection } = this.wind[i];
+      const { precipitationAmount } = this.precipitation[i];
       barBlocks.push(html`
         <div class="bar-block">
           <div class="bar-block-left"></div>
@@ -74,6 +82,7 @@ export class WeatherBar extends LitElement {
             <div class="hour">${hideHours ? null : hour}</div>
             <div class="temperature">${hideTemperature ? null : html`${temperature}&deg;`}</div>
             <div class="wind">${showWind ? html`${windSpeed}<br>${windDirection}` : null }</div>
+            <div class="precipitation">${showPrecipitationAmounts ? html`${precipitationAmount}` : null }</div>
           </div>
         </div>
       `);
@@ -253,7 +262,8 @@ export class WeatherBar extends LitElement {
     .temperature {
       font-size: 1.1rem;
     }
-    .wind {
+    .wind,
+    .precipitation {
       font-size: 0.9rem;
       line-height: 1.1rem;
       padding-top: 0.1rem;