feature: add custom styales to indicators values (#121)

artem-sedykh · May 9, 2023 · b509ea8 · b509ea8
1 parent fd5e186
commit b509ea8
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -149,6 +149,9 @@ v2 is only compatible from version 2022.11 onwards
 | indicators: `name:icon`                   | object                              | optional     | v1.0.1 | Icon object                                                                                                   |
 | indicators: `name:icon:template`          | function                            | optional     | v1.0.1 | Icon template function                                                                                        |
 | indicators: `name:icon:style`             | function                            | optional     | v1.0.1 | Styles                                                                                                        |
+| indicators: `name:value`                  | object                              | optional     | v1.0.1 | Value object                                                                                                  |
+| indicators: `name:value:style`            | function                            | optional     | v1.0.1 | Styles                                                                                                        |
+| indicators: `name:unit`                   | string                              | optional     | v1.0.1 | Display unit                                                                                                  |
 | indicators: `name:unit`                   | string                              | optional     | v1.0.1 | Display unit                                                                                                  |
 | indicators: `name:round`                  | number                              | optional     | v1.0.1 | Rounding number value                                                                                         |
 | indicators: `name:hide`                   | boolean                             | optional     | v2.5.0 | Hide indicator, default value `False`                                                                         |
@@ -377,6 +380,7 @@ indicators:
 | `source:mapper` | function | indicator config  | value, entity, climate_entity, hvac_mode | any         |
 | `icon:template` | function | indicator config  | value, entity, climate_entity, hvac_mode | string      |
 | `icon:style`    | function | indicator config  | value, entity, climate_entity, hvac_mode | object      |
+| `value:style`   | function | indicator config  | value, entity, climate_entity, hvac_mode | object      |
 | `hide`          | function | indicator config  | value, entity, climate_entity, hvac_mode | boolean     |
 
 `value` - current indicator value  
@@ -430,7 +434,7 @@ indicators:
       entity: sensor.humidity
 ```
 
-##### icon template
+##### icon style
 
 > You can also set custom styles.
   for example:
@@ -449,6 +453,24 @@ indicators:
       entity: sensor.humidity
 ```
 
+##### value style
+
+> You can also set custom styles.
+  for example:
+```yaml
+type: custom:mini-climate
+entity: climate.my_ac
+indicators:
+  humidity:
+    value:
+      style: >
+        (value) => (value > 30 ? { color: 'red'} : {})
+    unit: '%'
+    round: 1
+    source:
+      entity: sensor.humidity
+```
+
 ##### Hide
 
 > You can also hide based on state.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-climate-card",
-  "version": "v2.5.0",
+  "version": "v2.6.0",
   "description": "a/c card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

diff --git a/release_notes/v2.6.0.md b/release_notes/v2.6.0.md
@@ -0,0 +1,5 @@
+## v2.6.0
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-climate-card/v2.6.0/total.svg)](/~https://github.com/artem-sedykh/mini-climate-card/releases/tag/v2.6.0)
+
+### Added
+- feature: add custom style functionality to indicators value by @regevbr
diff --git a/src/components/indicators.js b/src/components/indicators.js
@@ -33,11 +33,11 @@ export default class ClimateIndicators extends ScopedRegistryHost(LitElement) {
     return html`<ha-icon style=${styleMap(indicator.iconStyle)} class='state__value_icon' .icon=${icon}></ha-icon>`;
   }
 
-  renderUnit(unit) {
-    if (!unit)
+  renderUnit(indicator) {
+    if (!indicator.unit)
       return '';
 
-    return html`<span class='state__uom'>${unit}</span>`;
+    return html`<span class='state__uom' style=${styleMap(indicator.valueStyle)}>${indicator.unit}</span>`;
   }
 
   renderIndicator(indicator) {
@@ -50,8 +50,8 @@ export default class ClimateIndicators extends ScopedRegistryHost(LitElement) {
     return html`
        <div class='state ${cls}' @click=${e => this.handlePopup(e, indicator)}>
          ${this.renderIcon(indicator)}
-         <span class='state__value'>${indicator.value}</span>
-         ${this.renderUnit(indicator.unit)}
+         <span class='state__value' style=${styleMap(indicator.valueStyle)}>${indicator.value}</span>
+         ${this.renderUnit(indicator)}
        </div>
     `;
   }

diff --git a/src/main.js b/src/main.js
@@ -337,6 +337,13 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
         item.functions.icon.style = compileTemplate(item.icon.style, context);
     }
 
+    if (typeof item.value === 'object') {
+      item.functions.value = {};
+
+      if (item.value.style)
+        item.functions.value.style = compileTemplate(item.value.style, context);
+    }
+
     if (item.hide) {
       if (typeof item.hide === 'boolean') {
         item.functions.hide = () => true;

diff --git a/src/models/indicator.js b/src/models/indicator.js
@@ -57,6 +57,14 @@ export default class IndicatorObject {
     return {};
   }
 
+  get valueStyle() {
+    if (this.config.functions.value && this.config.functions.value.style)
+      return this.config.functions.value.style(this.value, this.entity,
+        this.climate.entity, this.climate.mode) || {};
+
+    return {};
+  }
+
   get hide() {
     if (this.config.functions.hide) {
       return this.config.functions.hide(this.value, this.entity,