Merge pull request #103 from amaximus/master

Add support for displaying complementary value
custom-cards · Aug 12, 2020 · 63accb1 · 63accb1
2 parents a7a0760 + 49d1d26
commit 63accb1
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@
 | attribute | string | none | Displays a specific attribute instead of state value.
 | color | string | var(--custom-bar-card-color, var(--primary-color)) | Color of the bar.
 | columns | number | none | Defines the amount of bars to be displayed on a single row when multiple entities are defined.
+| complementary | boolean | false | Displays complementary value (max - state_value) instead state value.
 | decimal | number | none | The amount of decimals to be displayed for the value.
 | direction | string | right | Direction of the bar. `right`, `up`
 | entities | array | none | A list of entities. Accepts individual config options per defined entity.

diff --git a/info.md b/info.md
@@ -24,6 +24,7 @@
 | attribute | string | none | Displays a specific attribute instead of state value.
 | color | string | var(--custom-bar-card-color, var(--primary-color)) | Color of the bar.
 | columns | number | none | Defines the amount of bars to be displayed on a single row when multiple entities are defined.
+| complementary | boolean | false | Displays complementary value (max - state_value) instead state value.
 | decimal | number | none | The amount of decimals to be displayed for the value.
 | direction | string | right | Direction of the bar. `right`, `up`
 | entities | array | none | A list of entities. Accepts individual config options per defined entity.
@@ -97,4 +98,4 @@ See [example](#200-default-layout-requires-card-mod). (**requires** [card-mod](h
 | bar-card-animationbar | Animated part of the bar.
 | bar-card-targetbar | Target bar element.
 | bar-card-targetmarker | Target marker element.
-| bar-card-indicator | Indicator element.
+| bar-card-indicator | Indicator element.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bar-card",
-  "version": "3.1.7",
+  "version": "3.2.0",
   "description": "Lovelace bar-card",
   "keywords": [
     "home-assistant",

diff --git a/src/bar-card.ts b/src/bar-card.ts
@@ -288,7 +288,7 @@ export class BarCard extends LitElement {
           case 'outside':
             valueOutside = html`
               <bar-card-value class="${config.direction == 'up' ? 'value-direction-up' : 'value-direction-right'}"
-                >${entityState} ${unitOfMeasurement}</bar-card-value
+                >${config.complementary ? config.max - entityState : entityState} ${unitOfMeasurement}</bar-card-value
               >
             `;
             break;
@@ -300,7 +300,7 @@ export class BarCard extends LitElement {
                   : config.direction == 'up'
                   ? 'value-direction-up'
                   : 'value-direction-right'}"
-                >${entityState} ${unitOfMeasurement}</bar-card-value
+                >${config.complementary ? config.max - entityState : entityState} ${unitOfMeasurement}</bar-card-value
               >
             `;
             break;

diff --git a/src/editor.ts b/src/editor.ts
@@ -953,6 +953,27 @@ export class BarCardEditor extends LitElement implements LovelaceCardEditor {
                         >Limit Value</ha-switch
                       >
                     `}
+                ${config.complementary
+                  ? html`
+                      <ha-switch
+                        checked
+                        .configAttribute=${'complementary'}
+                        .configObject=${config}
+                        .value=${!config.complementary}
+                        @change=${this._valueChanged}
+                        >Complementary</ha-switch
+                      >
+                    `
+                  : html`
+                      <ha-switch
+                        unchecked
+                        .configObject=${config}
+                        .configAttribute=${'complementary'}
+                        .value=${!config.complementary}
+                        @change=${this._valueChanged}
+                        >Complementary</ha-switch
+                      >
+                    `}
                 <paper-input
                   class="value-number"
                   label="Decimal"

diff --git a/src/functions.ts b/src/functions.ts
@@ -818,7 +818,9 @@
 
       // Update value.
       if (config.positions.value !== 'off')
-        root.getElementById('value_' + id).textContent = `${entityState} ${measurement}`;
+        if (config.complementary)
+          root.getElementById('value_' + id).textContent = `${configMax - entityState} ${measurement}`;
+        else root.getElementById('value_' + id).textContent = `${entityState} ${measurement}`;
 
       // Update bar.
       root.getElementById('bar_' + id).style.setProperty('--bar-color', barColor);
@@ -922,4 +924,4 @@
         );
     }
     this._entityState[id] = entityState;
-  }
+  }
diff --git a/src/types.ts b/src/types.ts
@@ -6,6 +6,7 @@ export interface BarCardConfig {
   attribute: any;
   color: string;
   columns: number;
+  complementary: boolean;
   decimal: any;
   direction: string;
   double_tap_action?: ActionConfig;