Support hiding entities based on specific value(s) or criteria (#218)

Author: benct

README.md

@@ -81,6 +81,7 @@ attribute value instead of the state value. `icon` lets you display an icon inst
 | icon             | string/bool | `false`                     | Display default or custom icon instead of state or attribute value |
 | state_color      | bool        | `false`                     | Enable colored icon when entity is active                          |
 | hide_unavailable | bool        | `false`                     | Hide entity if unavailable or not found                            |
+| hide_if          | object/any  | _[Hiding](#hiding)_         | Hide entity if its value matches specified value or criteria       |
 | styles           | object      |                             | Add custom CSS styles to the entity element                        |
 | format           | string      | _[Formatting](#formatting)_ | Format entity value                                                |
 | tap_action       | object      | _[Actions](#actions)_       | Custom entity tap action                                           |
@@ -109,6 +110,7 @@ an object containing configuration options listed below, or any of the default s
 | name             | string/bool | `friendly_name`             | Override entity friendly name (or `false` to hide)       |
 | unit             | string/bool | `unit_of_measurement`       | Override entity unit of measurement (or `false` to hide) |
 | hide_unavailable | bool        | `false`                     | Hide secondary info if unavailable or not found          |
+| hide_if          | object/any  | _[Hiding](#hiding)_         | Hide secondary info if value matches specified criteria  |
 | format           | string      | _[Formatting](#formatting)_ | Format secondary info value                              |
 
 ### Actions
@@ -146,6 +148,18 @@ The `format` option supports the following values:
 | position       | `number`    | Reverses a position percentage (ex. `70%` open -> `30%` closed)  |
 | precision<0-9> | `number`    | Set decimal precision of number value (`precision3` -> `18.123`) |
 
+### Hiding
+
+The `hide_if` option can be used to hide an entity if its state or attribute value matches the specified criteria.
+It can be used directly with a string, number or boolean value (i.e. `hide_if: 'off'`), as a list with several values,
+or as an object with one or more of the options listed below.
+
+| Name    | Type     | Description                                                     |
+| ------- | -------- | --------------------------------------------------------------- |
+| above   | number   | Hidden if entity _number_ value is above the specified value    |
+| below   | number   | Hidden if entity _number_ value is below the specified value    |
+| value   | list/any | Hidden if value matches specified value or any value in a list  |
+
 ## Examples
 
 ![multiple-entity-row](https://raw.githubusercontent.com/benct/lovelace-multiple-entity-row/master/example.png)

src/index.js

@@ -3,7 +3,7 @@ import { handleClick } from 'custom-card-helpers';
 
 import { LAST_CHANGED, LAST_UPDATED, TIMESTAMP_FORMATS } from './lib/constants';
 import { checkEntity, entityName, entityStateDisplay, entityStyles } from './entity';
-import { getEntityIds, hasConfigOrEntitiesChanged, hasGenericSecondaryInfo, hideUnavailable, isObject } from './util';
+import { getEntityIds, hasConfigOrEntitiesChanged, hasGenericSecondaryInfo, hideIf, isObject } from './util';
 import { style } from './styles';
 
 console.info(
@@ -84,7 +84,7 @@ class MultipleEntityRow extends LitElement {
         if (
             !this.config.secondary_info ||
             hasGenericSecondaryInfo(this.config.secondary_info) ||
-            hideUnavailable(this.info, this.config.secondary_info)
+            hideIf(this.info, this.config.secondary_info)
         ) {
             return null;
         }
@@ -106,7 +106,7 @@ class MultipleEntityRow extends LitElement {
     }
 
     renderEntity(stateObj, config) {
-        if (!stateObj || hideUnavailable(stateObj, config)) {
+        if (!stateObj || hideIf(stateObj, config)) {
             return null;
         }
         const onClick = this.clickHandler(stateObj.entity_id, config.tap_action);

src/util.js

@@ -8,6 +8,33 @@ export const hideUnavailable = (stateObj, config) =>
     config.hide_unavailable &&
     (isUnavailable(stateObj) || (config.attribute && stateObj.attributes[config.attribute] === undefined));
 
+export const hideIf = (stateObj, config) => {
+    if (hideUnavailable(stateObj, config)) {
+        return true;
+    }
+    if (config.hide_if === undefined) {
+        return false;
+    }
+
+    const value = config.attribute ? stateObj.attributes[config.attribute] : stateObj.state;
+    let hideValues = [];
+
+    if (isObject(config.hide_if)) {
+        if (config.hide_if.below && value < config.hide_if.below) {
+            return true;
+        }
+        if (config.hide_if.above && value > config.hide_if.above) {
+            return true;
+        }
+        if (config.hide_if.value) {
+            hideValues = hideValues.concat(config.hide_if.value);
+        }
+    } else {
+        hideValues = hideValues.concat(config.hide_if);
+    }
+    return hideValues.some((hideValue) => (typeof hideValue === 'number' ? hideValue === +value : hideValue === value));
+};
+
 export const hasGenericSecondaryInfo = (config) => typeof config === 'string' && SECONDARY_INFO_VALUES.includes(config);
 
 export const getEntityIds = (config) =>