Additional font configurations, units and using attribute for display (…

…#7)

* Option to use unit_of_measurement or not

* Configuration to use an entities attribute instead of state

Also changed units configuration to be a custom string value rather than a boolean

* Handle commas

Remove commas from string representations of numbers when evaluating

* Config for font_family and text_shadow

* Addressed PR comments

* Remove replacing of commas

* Handle numeric strings better

* Remove attempt to parse sensor strings

* Minor fixes.

README.md

@@ -14,13 +14,14 @@ Custom component for lovelace which can be used as a card or an element on a pic
 | name | string | Name to display above sensor value | none
 | min | number | Minimum value | `0`
 | max | number | Maximum value | `100`
-| font_size | string | Base font size | `1em`
-| font_color | string | Font color | `#0D0D0D`
+| font_style | list | CSS style properities to apply to font | none
 | fill | string | Background color of circle | `rgba(255, 255, 255, .75)`
-| stroke_width | number | width of circle value indication ring | `6`
-| stroke_color | hex code | default stroke color | `#03a9f4`
-| color_stops | object | sensor value to color mapping (see below) | none
-| gradient | boolean | whether to smoothly transition between color stops | `false`
+| stroke_width | number | Width of circle value indication ring | `6`
+| stroke_color | hex code | Default stroke color | `#03a9f4`
+| color_stops | object | Sensor value to color mapping (see below) | none
+| gradient | boolean | Whether to smoothly transition between color stops | `false`
+| units | string | Custom units of measurement | none
+| attribute | string | Attribute element of an entity to use instead of its state | none
 
 ### Color stops
 A mapping from `value` to `color`. If `gradient` is set to true, mid-stop colors will be
@@ -66,8 +67,14 @@ Add a custom card or custom element in your `ui-lovelace.yaml` using `type: cust
   max: 120
   min: 30
   stroke_width: 10
-  font_size: 1.5em
   gradient: true
+  units: ' '
+  attribute: 'ambient'
+  font_style:
+    color: red
+    font-size: 1.5em
+    text-shadow: '2px 2px black'
+    font-family: 'Trebuchet MS'
   color_stops:
     50: '#55FF55'
     75: '#5555FF'

VERSION

@@ -1 +1 @@
-1.0.0
+1.1.0

circle-sensor-card.js

@@ -72,8 +72,12 @@ class CircleSensorCard extends LitElement {
         <span class="labelContainer">
           ${config.name != null ? html`<span id="name">${config.name}</span>` : ''}
           <span id="label" class$="${!!config.name ? 'bold' : ''}">
-            <span class="text">${state.state}</span>
-            <span class="unit">${state.attributes.unit_of_measurement}</span>
+            <span class="text">
+              ${config.attribute ? state.attributes[config.attribute] : state.state}
+            </span>
+            <span class="unit">
+              ${config.units ? config.units : state.attributes.unit_of_measurement}
+            </span>
           </span>
         </span>
       </div>
@@ -113,18 +117,34 @@ class CircleSensorCard extends LitElement {
 
   _updateConfig() {
     const container = this._root.querySelector('.labelContainer');
-    container.style.color = this.config.font_color || 'var(--primary-text-color)';
-    container.style.fontSize = this.config.font_size || '1em';
+    container.style.color = 'var(--primary-text-color)';
+
+    if (this.config.font_style) {
+      Object.keys(this.config.font_style).forEach((prop) => {
+        container.style.setProperty(prop, this.config.font_style[prop]);
+      });
+    }
   }
 
   set hass(hass) {
     this.state = hass.states[this.config.entity];
-    if (!this.state || isNaN(this.state.state)) {
-      console.error(`State is not a number: ${this.state.state}`);
-      return;
+
+    if (this.config.attribute) {
+      if (!this.state.attributes[this.config.attribute] ||
+          isNaN(this.state.attributes[this.config.attribute])) {
+        console.error(`Attribute [${this.config.attribute}] is not a number`);
+        return;
+      }
+    } else {
+      if (!this.state || isNaN(this.state.state)) {
+        console.error(`State is not a number`);
+        return;
+      }
     }
-    const state = this.state.state;
 
+    const state = this.config.attribute
+      ? this.state.attributes[this.config.attribute]
+      : this.state.state;
     const r = 200 * .45;
     const min = this.config.min || 0;
     const max = this.config.max || 100;