#19 show_units option

README.md

@@ -27,6 +27,7 @@ This card is intended to display connections between entities with numeric state
 | show_icons        | boolean | **Optional** | false               | Display entity icons
 | show_names        | boolean | **Optional** | false               | Display entity names
 | show_states       | boolean | **Optional** | true                | Display entity states
+| show_units        | boolean | **Optional** | true                | Display unit of measurement
 | min_box_height    | number  | **Optional** | 3                   | Minimum size of an entity box
 | min_box_distance  | number  | **Optional** | 5                   | Minimum space between entity boxes
 

src/ha-sankey-chart.ts

@@ -86,6 +86,7 @@ export class SankeyChart extends LitElement {
       min_box_height: 3,
       min_box_distance: 5,
       show_states: true,
+      show_units: true,
       ...config,
     };
 
@@ -157,7 +158,7 @@ export class SankeyChart extends LitElement {
   }
 
   protected renderSection(index: number): TemplateResult {
-    const {show_names, show_icons, show_states} = this.config;
+    const {show_names, show_icons, show_states, show_units} = this.config;
     const section = this.sections[index];
     const {boxes, spacerH} = section;
     const hasChildren = index < this.sections.length - 1 && boxes.some(b => b.children.length > 0);
@@ -189,7 +190,7 @@ export class SankeyChart extends LitElement {
                   ${show_icons ? html`<ha-icon .icon=${stateIcon(box.entity)}></ha-icon>` : null}
                 </div>
                 <div class="label" style=${styleMap(labelStyle)}>
-                  ${show_states ? html`<span class="state">${formattedState}</span><span class="unit">${box.unit_of_measurement}</span>` : null}
+                  ${show_states ? html`<span class="state">${formattedState}</span>${show_units ? html`<span class="unit">${box.unit_of_measurement}</span>` : null}` : null}
                   ${show_names ? html`<span class="name">&nbsp;${name}</span>` : null}
                 </div>
               </div>

src/types.ts

@@ -45,9 +45,10 @@ export interface SankeyChartConfig extends LovelaceCardConfig {
   wide?: boolean;
   show_icons?: boolean;
   show_names?: boolean;
+  show_states?: boolean;
+  show_units?: boolean;
   min_box_height?: number,
   min_box_distance?: number,
-  show_states?: boolean;
 }
 
 export interface Config extends SankeyChartConfig {