added optional fill drop colour

README.md

@@ -63,6 +63,7 @@ entity: sensor.rain_daily
 | type              | string  | **Required** | `custom:rain-gauge-card`                                                 |                     |
 | name              | string  | **Optional** | Card name                                                                | `Rain Gauge`        |
 | border_colour     | string  | **Optional** | Change the border colour                                                 | `#000000`           |
+| fill_drop_colour  | string  | **Optional** | Change the drop colour                                                   | `#04ACFF`           |
 | show_error        | boolean | **Optional** | Show what an error looks like for the card                               | `false`             |
 | show_warning      | boolean | **Optional** | Show what a warning looks like for the card                              | `false`             |
 | entity            | string  | **Required** | Home Assistant entity ID.                                                | `none`              |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rain-gauge-card",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A Lovelace card that shows the rain gauge for Home Assistant",
   "keywords": [
     "home-assistant",

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.3.1';
+export const CARD_VERSION = '1.4.0';

src/editor.ts

@@ -70,6 +70,10 @@ export class RainGaugeCardEditor extends ScopedRegistryHost(LitElement) implemen
     return this._config?.border_colour || '';
   }
 
+  get _fill_drop_colour(): string {
+    return this._config?.fill_drop_colour || '';
+  }
+
   get _show_warning(): boolean {
     return this._config?.show_warning || false;
   }
@@ -107,6 +111,12 @@ export class RainGaugeCardEditor extends ScopedRegistryHost(LitElement) implemen
         .configValue=${'name'}
         @input=${this._valueChanged}
       ></mwc-textfield>
+      <mwc-textfield
+        label="Fill drop colour (Optional)"
+        .value=${this._fill_drop_colour}
+        .configValue=${'fill_drop_colour'}
+        @input=${this._valueChanged}
+      ></mwc-textfield>
       <mwc-formfield .label=${`Is imperial?`}>
         <mwc-switch
           .checked=${this._is_imperial !== false}

src/rain-gauge-card.ts

@@ -102,7 +102,7 @@ export class RainGaugeCard extends LitElement {
       }
     }
 
-    if (maxLevelOverride && maxLevelOverride > maxLevel) {
+    if (maxLevelOverride) {
       maxLevel = maxLevelOverride
     }
 
@@ -120,6 +120,11 @@ export class RainGaugeCard extends LitElement {
       borderColour = this.config.border_colour
     }
 
+    let fillDropColour = '#04ACFF'
+    if (this.config.fill_drop_colour) {
+      fillDropColour = this.config.fill_drop_colour
+    }
+
     const hourlyRateEntityId = this.config.hourly_rate_entity;
     const hourlyRateEntityState = hourlyRateEntityId ? this.hass.states[hourlyRateEntityId] : undefined;
     const hourlyRateStateValue:number = hourlyRateEntityState ? parseFloat(hourlyRateEntityState.state) : 0;
@@ -148,7 +153,7 @@ export class RainGaugeCard extends LitElement {
 
                   <g clip-path="url(#drop)">
                     <g class="fill2">
-                      <rect width="130" height="190" style="fill:#04ACFF;" transform="translate(0, ${rainLevel})"/>
+                      <rect width="130" height="190" style="fill:${fillDropColour};" transform="translate(0, ${rainLevel})"/>
                     </g>
                   </g>
                   <g>

src/types.ts

@@ -19,6 +19,7 @@ export interface RainGaugeCardConfig extends LovelaceCardConfig {
   is_imperial?: boolean;
   max_level?: number;
   hourly_rate_entity?: string;
+  fill_drop_colour?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;