New card configuration option: show_line

README.md

@@ -46,3 +46,4 @@ but you can use it to customize the card.
 | --- | --- | --- |
 | **left_icon** | `mdi:electron-framework` | Left icon in the card |
 | **right_icon** | `mdi:ceiling-light` | Right icon in the card |
+| **show_line** | `false` | Showing a line between icons |

animated-consumption-card.js

@@ -44,6 +44,11 @@ class AnimatedConsumptionCard extends HTMLElement {
       this.rightIcon = config.right_icon;
     }
 
+    this.showLine = false;
+    if (config.show_line) {
+      this.showLine = true;
+    }
+
     this.contentIsCreated = false;
 
     this.speed = 0;
@@ -64,6 +69,11 @@ class AnimatedConsumptionCard extends HTMLElement {
     card.appendChild(content);
     this.appendChild(card);
 
+    var maybeALine = '';
+    if (this.showLine) {
+      maybeALine = `<line x1="0" y1="20" x2="500" y2="20" style="stroke:var(--primary-text-color);" />`;
+    }
+
     content.innerHTML = `
 <style>
 
@@ -109,6 +119,7 @@ class AnimatedConsumptionCard extends HTMLElement {
         viewBox="0 0 500 40"
         preserveAspectRatio="xMinYMax slice"
       >
+        ${maybeALine}
       </svg>
     </td>
 

development/ui.yaml

@@ -13,6 +13,7 @@ views:
         entity: input_number.input_number_1
         left_icon: mdi:flash
         right_icon: mdi:ceiling-light
+        show_line: true
 
       - type: entities
         entities: