Support use of entities in “max” and “min” properties

.gitignore

@@ -1,4 +1,3 @@
 /node_modules/
 /.rpt2_cache/
-package-lock.json
-/dist
+package-lock.json

README.md

@@ -35,8 +35,8 @@
 | height | string | 40px | Defines the height of the bar.
 | icon | string | icon | Defines the icon to be displayed.
 | limit_value | boolean | false | Limits value displayed to `min` and `max` value.
-| max | number | 100 | Defines maximum value of the bar.
-| min | number | 0 | Defines minimum value of the bar.
+| max | number or string | 100 | Defines maximum value of the bar using a number or a entity.
+| min | number or string | 0 | Defines minimum value of the bar using a number or a entity.
 | name | string | none | Defines custom entity name.
 | positions | object | none | Defines the positions of the card elements. See [Positions Options](#positions-options).
 | severity | object | none | A list of severity values. See [Severity Options](#severity-options).

hacs.json

@@ -1,5 +1,5 @@
 {
-    "name": "Bar Card",
+    "name": "Bar Card Fork",
     "render_readme": true,
     "filename": "bar-card.js"
 }

info.md

@@ -33,8 +33,8 @@
 | height | string | 40px | Defines the height of the bar.
 | icon | string | icon | Defines the icon to be displayed.
 | limit_value | boolean | false | Limits value displayed to `min` and `max` value.
-| max | number | 100 | Defines maximum value of the bar.
-| min | number | 0 | Defines minimum value of the bar.
+| max | number or string | 100 | Defines maximum value of the bar using a number or a entity.
+| min | number or string | 0 | Defines minimum value of the bar using a number or a entity.
 | name | string | none | Defines custom entity name.
 | positions | object | none | Defines the positions of the card elements. See [Positions Options](#positions-options).
 | severity | object | none | A list of severity values. See [Severity Options](#severity-options).

src/bar-card.ts

@@ -14,7 +14,7 @@ import { BarCardConfig } from './types';
 import { actionHandler } from './action-handler-directive';
 import { CARD_VERSION } from './const';
 import { localize } from './localize/localize';
-import { mergeDeep, hasConfigOrEntitiesChanged, createConfigArray } from './helpers';
+import { mergeDeep, hasConfigOrEntitiesChanged, createConfigArray, getMaxMinBasedOnType } from './helpers';
 import { styles } from './styles';
 
 /* eslint no-console: 0 */
@@ -148,9 +148,11 @@ export class BarCard extends LitElement {
         }
 
         // If limit_value is defined limit the displayed value to min and max.
+        const max = getMaxMinBasedOnType(this.hass, config.max);
+        const min = getMaxMinBasedOnType(this.hass, config.min);
         if (config.limit_value) {
-          entityState = Math.min(entityState, config.max);
-          entityState = Math.max(entityState, config.min);
+          entityState = Math.min(entityState, max);
+          entityState = Math.max(entityState, min);
         }
 
         // If decimal is defined check if NaN and apply number fix.
@@ -263,18 +265,18 @@ export class BarCard extends LitElement {
         switch (config.positions.minmax) {
           case 'outside':
             minMaxOutside = html`
-              <bar-card-min>${config.min}${unitOfMeasurement}</bar-card-min>
+              <bar-card-min>${max}${unitOfMeasurement}</bar-card-min>
               <bar-card-divider>/</bar-card-divider>
-              <bar-card-max>${config.max}${unitOfMeasurement}</bar-card-max>
+              <bar-card-max>${max}${unitOfMeasurement}</bar-card-max>
             `;
             break;
           case 'inside':
             minMaxInside = html`
               <bar-card-min class="${config.direction == 'up' ? 'min-direction-up' : 'min-direction-right'}"
-                >${config.min}${unitOfMeasurement}</bar-card-min
+                >${min}${unitOfMeasurement}</bar-card-min
               >
               <bar-card-divider>/</bar-card-divider>
-              <bar-card-max> ${config.max}${unitOfMeasurement}</bar-card-max>
+              <bar-card-max> ${max}${unitOfMeasurement}</bar-card-max>
             `;
             break;
           case 'off':
@@ -288,7 +290,7 @@ export class BarCard extends LitElement {
           case 'outside':
             valueOutside = html`
               <bar-card-value class="${config.direction == 'up' ? 'value-direction-up' : 'value-direction-right'}"
-                >${config.complementary ? config.max - entityState : entityState} ${unitOfMeasurement}</bar-card-value
+                >${config.complementary ? max - entityState : entityState} ${unitOfMeasurement}</bar-card-value
               >
             `;
             break;
@@ -300,7 +302,7 @@ export class BarCard extends LitElement {
                   : config.direction == 'up'
                   ? 'value-direction-up'
                   : 'value-direction-right'}"
-                >${config.complementary ? config.max - entityState : entityState} ${unitOfMeasurement}</bar-card-value
+                >${config.complementary ? max - entityState : entityState} ${unitOfMeasurement}</bar-card-value
               >
             `;
             break;
@@ -352,10 +354,10 @@ export class BarCard extends LitElement {
         }
 
         // Set bar percent and marker percent based on value difference.
-        const barPercent = this._computePercent(entityState, index);
-        const targetMarkerPercent = this._computePercent(config.target, index);
+        const barPercent = this._computePercent(entityState, index, max, min);
+        const targetMarkerPercent = this._computePercent(config.target, index, max, min);
         let targetStartPercent = barPercent;
-        let targetEndPercent = this._computePercent(config.target, index);
+        let targetEndPercent = this._computePercent(config.target, index, max, min);
         if (targetEndPercent < targetStartPercent) {
           targetStartPercent = targetEndPercent;
           targetEndPercent = barPercent;
@@ -535,7 +537,7 @@ export class BarCard extends LitElement {
     return icon;
   }
 
-  private _computePercent(value: string, index: number): number {
+  private _computePercent(value: string, index: number, max: number, min: number): number {
     const config = this._configArray[index];
     const numberValue = Number(value);
 
@@ -547,9 +549,9 @@ export class BarCard extends LitElement {
       case 'left-reverse':
       case 'up-reverse':
       case 'down-reverse':
-        return 100 - (100 * (numberValue - config.min)) / (config.max - config.min);
+        return 100 - (100 * (numberValue - min)) / (max - min);
       default:
-        return (100 * (numberValue - config.min)) / (config.max - config.min);
+        return (100 * (numberValue - min)) / (max - min);
     }
   }
 

src/editor.ts

@@ -2,7 +2,7 @@ import { LitElement, html, customElement, property, TemplateResult, CSSResult, c
 import { HomeAssistant, fireEvent, LovelaceCardEditor, ActionConfig } from 'custom-card-helpers';
 
 import { BarCardConfig } from './types';
-import { createEditorConfigArray, arrayMove, hasConfigOrEntitiesChanged } from './helpers';
+import { createEditorConfigArray, arrayMove, hasConfigOrEntitiesChanged, getMaxMinBasedOnType } from './helpers';
 
 @customElement('bar-card-editor')
 export class BarCardEditor extends LitElement implements LovelaceCardEditor {

src/helpers.ts

@@ -35,6 +35,23 @@ export function mapRange(num: number, in_min: number, in_max: number, out_min: n
   return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
 }
 
+export function getMaxMinBasedOnType(hass: HomeAssistant | undefined, value: number | string): number {
+  if (typeof value === "number") {
+    return value;
+  } 
+  if (hass === undefined) {
+    return 0;
+  }
+  if (hass.states[value]) {
+    const parsedValue = parseInt(hass.states[value].state);
+    if (isNaN(parsedValue)) {
+      return 0;
+    }
+    return parsedValue
+  } 
+  return 0;
+}
+
 // Check if config or Entity changed
 export function hasConfigOrEntitiesChanged(element: any, changedProps: PropertyValues, forceUpdate: boolean): boolean {
   if (changedProps.has('config') || forceUpdate) {

src/types.ts

@@ -17,8 +17,8 @@ export interface BarCardConfig {
   hold_action?: ActionConfig;
   icon: any;
   limit_value: boolean;
-  max: number;
-  min: number;
+  max: number | string;
+  min: number | string;
   name: string;
   positions: any;
   severity: any;