feat: Add option to display frequency

Sese-Schneider · Mar 2, 2023 · e08c6f4 · e08c6f4
1 parent e63e3f7
commit e08c6f4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ A simple card that shows your current energy usage.
 | power          | state entity    | **Required** | State entity for power             |                                        |
 | current        | state entity    | *Optional*   | State entity for current           |                                        |
 | voltage        | state entity    | *Optional*   | State entity for voltage           |                                        |
+| frequency      | state entity    | *Optional*   | State entity for frequency         |                                        |
 | power_factor   | state entity    | *Optional*   | State entity for power_factor      |                                        |
 | label_leading  | string          | *Optional*   | Leading label                      |                                        |
 | label_trailing | string          | *Optional*   | Trailing label                     |                                        |
@@ -82,6 +83,7 @@ entities:
   - power: sensor.c_p
     current: sensor.c_c
     voltage: sensor.c_v
+    frequency: sensor.c_fq
     power_factor: sensor.c_pf
     label_leading: 'P'
     label_trailing: 'C'

diff --git a/src/energy-overview-card.ts b/src/energy-overview-card.ts
@@ -2,9 +2,10 @@
 
 import {css, CSSResultGroup, html, LitElement, TemplateResult} from "lit";
 import {customElement, property} from "lit/decorators";
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {HomeAssistant} from "custom-card-helpers";
 import {EnergyOverviewConfig, EnergyOverviewEntity} from "./types";
-import clamp from "./util";
+import clamp, {intersperse} from "./util";
 
 @customElement("energy-overview-card")
 class EnergyOverviewCard extends LitElement {
@@ -126,6 +127,7 @@ class EnergyOverviewCard extends LitElement {
         power: states[entity.power].state,
         current: entity.current ? states[entity.current].state : undefined,
         voltage: entity.voltage ? states[entity.voltage].state : undefined,
+        frequency: entity.frequency ? states[entity.frequency].state : undefined,
         power_factor: entity.power_factor ? states[entity.power_factor].state : undefined,
         color: entity.color ? entity.color : 'var(--energy-grid-consumption-color)',
         label_trailing: entity.label_trailing ? entity.label_trailing : '',
@@ -157,26 +159,36 @@ class EnergyOverviewCard extends LitElement {
 					<div class="entity entity-${i}"
 					     style="--energy-line-color: ${entity.color};">
 						<div class="metadata">
-							${entity.current || entity.voltage ? html`
+							${entity.current || entity.voltage || entity.frequency ? html`
 									<div class="metadata-left">
-										${entity.voltage ? html`<span class="secondary voltage">${entity.voltage}</span>
-										<span class="secondary voltage-unit">V</span>` : ``}
-										${entity.current && entity.voltage ? html`
-											<div class="divider"></div>` : ``}
-										${entity.current ? html`<span class="secondary current">${entity.current}</span>
-										<span class="secondary current-unit">A</span>` : ``}
+										${unsafeHTML((() => {
+											const elements: Array<String> = [];
+											if (entity.voltage) {
+												elements.push(`<span class="secondary voltage">${entity.voltage}</span>&nbsp;<span class="secondary voltage-unit">V</span>`);
+											}
+											if (entity.current) {
+												elements.push(`<span class="secondary current">${entity.current}</span>&nbsp;<span class="secondary current-unit">A</span>`);
+											}
+											if (entity.frequency) {
+												elements.push(`<span class="secondary frequency">${entity.frequency}</span>&nbsp;<span class="secondary frequency-unit">Hz</span>`);
+											}
+
+											return intersperse(
+												elements,
+												`<div class="divider"></div>`,
+											);
+										})().join(''))}
 									</div>`
 								: ``}
 							<div class="metadata-center">
-								<span class="secondary power">${entity.power}</span>
-								<span class="secondary power-unit">W</span>
+								<span class="secondary power">${entity.power}</span>&nbsp;<span
+								class="secondary power-unit">W</span>
 							</div>
 							${entity.power_factor ? html`
 								<div class="metadata-right">
 									<span
-					  class="secondary power-factor">${Math.round(parseFloat(entity.power_factor))}</span>
-									<span class="secondary power-factor-unit">%</span>
-								</div>` : ``}
+					  class="secondary power-factor">${Math.round(parseFloat(entity.power_factor))}</span>&nbsp;<span
+									class="secondary power-factor-unit">%</span></div>` : ``}
 						</div>
 						<div class="main">
 							<div class="primary label label-leading">${entity.label_leading}</div>

diff --git a/src/types.ts b/src/types.ts
@@ -8,6 +8,7 @@ export interface EnergyOverviewEntity {
   power: string;
   current?: string;
   voltage?: string;
+  frequency?: string;
   power_factor?: string;
   label_trailing?: string;
   label_leading?: string;

diff --git a/src/util.ts b/src/util.ts
@@ -1,3 +1,5 @@
 export default function clamp(number, min, max) {
   return Math.max(min, Math.min(number, max));
 }
+
+export const intersperse = (arr, sep) => arr.reduce((a, v) => [...a, v, sep], []).slice(0, -1);