From b509ea847d3cdc5d9afd280d04a53eed975efb03 Mon Sep 17 00:00:00 2001 From: Regev Brody Date: Tue, 9 May 2023 10:43:05 +0300 Subject: [PATCH] feature: add custom styales to indicators values (#121) --- README.md | 24 +++++++++++++++++++++++- package.json | 2 +- release_notes/v2.6.0.md | 5 +++++ src/components/indicators.js | 10 +++++----- src/main.js | 7 +++++++ src/models/indicator.js | 8 ++++++++ 6 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 release_notes/v2.6.0.md diff --git a/README.md b/README.md index 360662b..7015fe5 100644 --- 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 index bc4e07f..edb56f5 100644 --- 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 new file mode 100644 index 0000000..32aa6f3 --- /dev/null +++ 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 index 8ed77fa..84cbb39 100644 --- a/src/components/indicators.js +++ b/src/components/indicators.js @@ -33,11 +33,11 @@ export default class ClimateIndicators extends ScopedRegistryHost(LitElement) { return html``; } - renderUnit(unit) { - if (!unit) + renderUnit(indicator) { + if (!indicator.unit) return ''; - return html`${unit}`; + return html`${indicator.unit}`; } renderIndicator(indicator) { @@ -50,8 +50,8 @@ export default class ClimateIndicators extends ScopedRegistryHost(LitElement) { return html`
this.handlePopup(e, indicator)}> ${this.renderIcon(indicator)} - ${indicator.value} - ${this.renderUnit(indicator.unit)} + ${indicator.value} + ${this.renderUnit(indicator)}
`; } diff --git a/src/main.js b/src/main.js index fd59107..5b5a7d6 100644 --- 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 index 934bd3d..94c1e0b 100644 --- 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,