gauge_card may use an attribute of the entity, instead of its state (ciotlosm#127)

* gauge_card may use an attribute of the entity, instead of its state

* gauge_card attribute option in README

* gauge_card added dot notation for attribute

* gauge_card reworked dot.notation for attribute

* gauge_card version bump to 0.1.0

Author: Rocka84

gauge-card/README.md

@@ -14,6 +14,7 @@ A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CS
 | type | string | **Required** | `custom:gauge-card`
 | title | string | optional | Name to display on card
 | entity | string | **Required** | `sensor.my_temperature`
+| attribute | string | optional | If set, this attribute of the entity is used, instead of its state
 | min | number | 0 | Minimum value for graph
 | max | number | 100 | Maximum value for graph
 | scale | string | '50px' | Base value for graph visual size
@@ -52,4 +53,18 @@ Simple one
 - type: custom:gauge-card
   entity: sensor.my_oil_sensor
   scale: 100px
-```
+```
+
+Using an attribute
+```yaml
+- type: custom:gauge-card
+  entity: climate.living_room
+  attribute: current_temperature
+```
+
+Using an attribute with dot notation
+```yaml
+- type: custom:gauge-card
+  entity: climate.living_room.current_temperature
+```
+

gauge-card/VERSION

@@ -1 +1 @@
-0.0.1
+0.1.0

gauge-card/changelog.md

@@ -1,2 +1,5 @@
+## 0.1.0
+- support attributes
+
 ## 0.0.1
-Initial release that supports versioning
+Initial release that supports versioning

gauge-card/gauge-card.js

@@ -16,6 +16,10 @@ class GaugeCard extends HTMLElement {
     if (!cardConfig.min) cardConfig.min = 0;
     if (!cardConfig.max) cardConfig.max = 100;
 
+    const entityParts = this._splitEntityAndAttribute(cardConfig.entity);
+    cardConfig.entity = entityParts.entity;
+    if (entityParts.attribute) cardConfig.attribute = entityParts.attribute;
+
     const card = document.createElement('ha-card');
     const shadow = card.attachShadow({ mode: 'open' });
     const content = document.createElement('div');
@@ -106,6 +110,15 @@ class GaugeCard extends HTMLElement {
     this._config = cardConfig;
   }
 
+  _splitEntityAndAttribute(entity) {
+      let parts = entity.split('.');
+      if (parts.length < 3) {
+          return { entity: entity };
+      }
+
+      return { attribute: parts.pop(), entity: parts.join('.') };
+  }
+
   _fire(type, detail, options) {
     const node = this.shadowRoot;
     options = options || {};
@@ -151,9 +164,17 @@ class GaugeCard extends HTMLElement {
     return severityMap["normal"];
   }
 
+  _getEntityStateValue(entity, attribute) {
+    if (!attribute) {
+      return entity.state;
+    }
+
+    return entity.attributes[attribute];
+  }
+
   set hass(hass) {
     const config = this._config;
-    const entityState = hass.states[config.entity].state;
+    const entityState = this._getEntityStateValue(hass.states[config.entity], config.attribute);
     const measurement = hass.states[config.entity].attributes.unit_of_measurement;
     const root = this.shadowRoot;
     if (entityState !== this._entityState) {
@@ -172,4 +193,4 @@ class GaugeCard extends HTMLElement {
   }
 }
 
-customElements.define('gauge-card', GaugeCard);
+customElements.define('gauge-card', GaugeCard);