Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-17 15:45:43 +01:00
Code Activity

Convert Energy Now tiles to badges (#29845)

Browse Source
This commit is contained in:
Petar Petrov
2026-02-26 11:38:01 +01:00
committed by Bram Kragten
parent 17d9cd192f
commit e07194027a
8 changed files with 98 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/panels/energy/strategies/power-view-strategy.ts
View File

@@ -7,11 +7,7 @@ import type { HomeAssistant } from "../../../types";
import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
import { shouldShowFloorsAndAreas } from "./show-floors-and-areas";
import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
import {
LARGE_SCREEN_CONDITION,
SMALL_SCREEN_CONDITION,
} from "../../lovelace/strategies/helpers/screen-conditions";
import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
@customElement("power-view-strategy")
export class PowerViewStrategy extends ReactiveElement {
@@ -49,22 +45,15 @@ export class PowerViewStrategy extends ReactiveElement {
(source) => source.type === "gas" && source.stat_rate
);
const tileSection: LovelaceSectionConfig = {
type: "grid",
cards: [],
column_span: 2,
};
const chartsSection: LovelaceSectionConfig = {
type: "grid",
cards: [],
column_span: 2,
};
const tiles: LovelaceCardConfig[] = [];
const badges: LovelaceBadgeConfig[] = [];
const view: LovelaceViewConfig = {
type: "sections",
sections: [tileSection, chartsSection],
max_columns: 2,
sections: [chartsSection],
};
// No sources configured
@@ -80,11 +69,10 @@ export class PowerViewStrategy extends ReactiveElement {
}
if (hasPowerSources) {
const card = {
badges.push({
type: "power-total",
collection_key: collectionKey,
};
tiles.push(card);
});
chartsSection.cards!.push({
title: hass.localize("ui.panel.energy.cards.power_sources_graph_title"),
@@ -97,19 +85,17 @@ export class PowerViewStrategy extends ReactiveElement {
}
if (hasGasSources) {
const card = {
badges.push({
type: "gas-total",
collection_key: collectionKey,
};
tiles.push({ ...card });
});
}
if (hasWaterSources) {
const card = {
badges.push({
type: "water-total",
collection_key: collectionKey,
};
tiles.push({ ...card });
});
}
if (hasPowerDevices) {
@@ -148,21 +134,8 @@ export class PowerViewStrategy extends ReactiveElement {
});
}
tiles.forEach((card) => {
tileSection.cards!.push({
...card,
grid_options: { columns: 24 / tiles.length },
});
});
if (tiles.length > 2) {
// On small screens with 3 tiles, show them in 1 column
tileSection.visibility = [LARGE_SCREEN_CONDITION];
view.sections!.unshift({
type: "grid",
cards: tiles,
visibility: [SMALL_SCREEN_CONDITION],
});
if (badges.length) {
view.badges = badges;
}
return view;

67
src/panels/lovelace/cards/energy/hui-gas-total-card.ts → src/panels/lovelace/badges/energy/hui-gas-total-badge.ts
View File

@@ -3,11 +3,8 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../components/ha-card";
import "../../../../components/ha-badge";
import "../../../../components/ha-svg-icon";
import "../../../../components/tile/ha-tile-container";
import "../../../../components/tile/ha-tile-icon";
import "../../../../components/tile/ha-tile-info";
import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
import {
formatFlowRateShort,
@@ -16,18 +13,17 @@ import {
} from "../../../../data/energy";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import type { HomeAssistant } from "../../../../types";
import type { LovelaceCard, LovelaceGridOptions } from "../../types";
import { tileCardStyle } from "../tile/tile-card-style";
import type { GasTotalCardConfig } from "../types";
import type { LovelaceBadge } from "../../types";
import type { GasTotalBadgeConfig } from "../types";
@customElement("hui-gas-total-card")
export class HuiGasTotalCard
@customElement("hui-gas-total-badge")
export class HuiGasTotalBadge
extends SubscribeMixin(LitElement)
implements LovelaceCard
implements LovelaceBadge
{
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _config?: GasTotalCardConfig;
@state() private _config?: GasTotalBadgeConfig;
@state() private _data?: EnergyData;
@@ -35,7 +31,7 @@ export class HuiGasTotalCard
protected hassSubscribeRequiredHostProps = ["_config"];
public setConfig(config: GasTotalCardConfig): void {
public setConfig(config: GasTotalBadgeConfig): void {
this._config = config;
}
@@ -49,34 +45,19 @@ export class HuiGasTotalCard
];
}
public getCardSize(): Promise<number> | number {
return 1;
}
getGridOptions(): LovelaceGridOptions {
return {
columns: 12,
min_columns: 6,
rows: 1,
min_rows: 1,
};
}
protected shouldUpdate(changedProps: PropertyValues): boolean {
if (changedProps.has("_config") || changedProps.has("_data")) {
return true;
}
// Check if any of the tracked entity states have changed
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || !this._entities.size) {
return true;
}
// Only update if one of our tracked entities changed
for (const entityId of this._entities) {
if (oldHass.states[entityId] !== this.hass.states[entityId]) {
if (oldHass.states[entityId] !== this.hass?.states[entityId]) {
return true;
}
}
@@ -122,32 +103,22 @@ export class HuiGasTotalCard
this.hass.localize("ui.panel.lovelace.cards.energy.gas_total_title");
return html`
<ha-card>
<ha-tile-container .interactive=${false}>
<ha-tile-icon slot="icon" data-domain="sensor" data-state="active">
<ha-svg-icon slot="icon" .path=${mdiFire}></ha-svg-icon>
</ha-tile-icon>
<ha-tile-info slot="info">
<span slot="primary" class="primary">${name}</span>
<span slot="secondary" class="secondary">${displayValue}</span>
</ha-tile-info>
</ha-tile-container>
</ha-card>
<ha-badge .label=${name}>
<ha-svg-icon slot="icon" .path=${mdiFire}></ha-svg-icon>
${displayValue}
</ha-badge>
`;
}
static styles = [
tileCardStyle,
css`
:host {
--tile-color: var(--energy-gas-color);
}
`,
];
static styles = css`
ha-badge {
--badge-color: var(--energy-gas-color);
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"hui-gas-total-card": HuiGasTotalCard;
"hui-gas-total-badge": HuiGasTotalBadge;
}
}

90
src/panels/lovelace/cards/energy/hui-power-total-card.ts → src/panels/lovelace/badges/energy/hui-power-total-badge.ts
View File

@@ -4,11 +4,8 @@ import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { formatNumber } from "../../../../common/number/format_number";
import "../../../../components/ha-card";
import "../../../../components/ha-badge";
import "../../../../components/ha-svg-icon";
import "../../../../components/tile/ha-tile-container";
import "../../../../components/tile/ha-tile-icon";
import "../../../../components/tile/ha-tile-info";
import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
import {
getEnergyDataCollection,
@@ -16,18 +13,17 @@ import {
} from "../../../../data/energy";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import type { HomeAssistant } from "../../../../types";
import type { LovelaceCard, LovelaceGridOptions } from "../../types";
import { tileCardStyle } from "../tile/tile-card-style";
import type { PowerTotalCardConfig } from "../types";
import type { LovelaceBadge } from "../../types";
import type { PowerTotalBadgeConfig } from "../types";
@customElement("hui-power-total-card")
export class HuiPowerTotalCard
@customElement("hui-power-total-badge")
export class HuiPowerTotalBadge
extends SubscribeMixin(LitElement)
implements LovelaceCard
implements LovelaceBadge
{
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _config?: PowerTotalCardConfig;
@state() private _config?: PowerTotalBadgeConfig;
@state() private _data?: EnergyData;
@@ -35,7 +31,7 @@ export class HuiPowerTotalCard
protected hassSubscribeRequiredHostProps = ["_config"];
public setConfig(config: PowerTotalCardConfig): void {
public setConfig(config: PowerTotalBadgeConfig): void {
this._config = config;
}
@@ -49,34 +45,19 @@ export class HuiPowerTotalCard
];
}
public getCardSize(): Promise<number> | number {
return 1;
}
getGridOptions(): LovelaceGridOptions {
return {
columns: 12,
min_columns: 6,
rows: 1,
min_rows: 1,
};
}
protected shouldUpdate(changedProps: PropertyValues): boolean {
if (changedProps.has("_config") || changedProps.has("_data")) {
return true;
}
// Check if any of the tracked entity states have changed
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || !this._entities.size) {
return true;
}
// Only update if one of our tracked entities changed
for (const entityId of this._entities) {
if (oldHass.states[entityId] !== this.hass.states[entityId]) {
if (oldHass.states[entityId] !== this.hass?.states[entityId]) {
return true;
}
}
@@ -94,10 +75,10 @@ export class HuiPowerTotalCard
this._entities.clear();
let solar = 0;
let from_grid = 0;
let to_grid = 0;
let from_battery = 0;
let to_battery = 0;
let fromGrid = 0;
let toGrid = 0;
let fromBattery = 0;
let toBattery = 0;
prefs.energy_sources.forEach((source) => {
if (source.type === "solar" && source.stat_rate) {
@@ -105,17 +86,17 @@ export class HuiPowerTotalCard
if (value > 0) solar += value;
} else if (source.type === "grid" && source.stat_rate) {
const value = this._getCurrentPower(source.stat_rate);
if (value > 0) from_grid += value;
else if (value < 0) to_grid += Math.abs(value);
if (value > 0) fromGrid += value;
else if (value < 0) toGrid += Math.abs(value);
} else if (source.type === "battery" && source.stat_rate) {
const value = this._getCurrentPower(source.stat_rate);
if (value > 0) from_battery += value;
else if (value < 0) to_battery += Math.abs(value);
if (value > 0) fromBattery += value;
else if (value < 0) toBattery += Math.abs(value);
}
});
const used_total = from_grid + solar + from_battery - to_grid - to_battery;
return Math.max(0, used_total);
const usedTotal = fromGrid + solar + fromBattery - toGrid - toBattery;
return Math.max(0, usedTotal);
}
protected render() {
@@ -141,35 +122,22 @@ export class HuiPowerTotalCard
this.hass.localize("ui.panel.lovelace.cards.energy.power_total_title");
return html`
<ha-card>
<ha-tile-container .interactive=${false}>
<ha-tile-icon slot="icon" data-domain="sensor" data-state="active">
<ha-svg-icon
slot="icon"
.path=${mdiHomeLightningBolt}
></ha-svg-icon>
</ha-tile-icon>
<ha-tile-info slot="info">
<span slot="primary" class="primary">${name}</span>
<span slot="secondary" class="secondary">${displayValue}</span>
</ha-tile-info>
</ha-tile-container>
</ha-card>
<ha-badge .label=${name}>
<ha-svg-icon slot="icon" .path=${mdiHomeLightningBolt}></ha-svg-icon>
${displayValue}
</ha-badge>
`;
}
static styles = [
tileCardStyle,
css`
:host {
--tile-color: var(--primary-color);
}
`,
];
static styles = css`
ha-badge {
--badge-color: var(--primary-color);
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"hui-power-total-card": HuiPowerTotalCard;
"hui-power-total-badge": HuiPowerTotalBadge;
}
}

67
src/panels/lovelace/cards/energy/hui-water-total-card.ts → src/panels/lovelace/badges/energy/hui-water-total-badge.ts
View File

@@ -3,11 +3,8 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../components/ha-card";
import "../../../../components/ha-badge";
import "../../../../components/ha-svg-icon";
import "../../../../components/tile/ha-tile-container";
import "../../../../components/tile/ha-tile-icon";
import "../../../../components/tile/ha-tile-info";
import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
import {
formatFlowRateShort,
@@ -16,18 +13,17 @@ import {
} from "../../../../data/energy";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import type { HomeAssistant } from "../../../../types";
import type { LovelaceCard, LovelaceGridOptions } from "../../types";
import { tileCardStyle } from "../tile/tile-card-style";
import type { WaterTotalCardConfig } from "../types";
import type { LovelaceBadge } from "../../types";
import type { WaterTotalBadgeConfig } from "../types";
@customElement("hui-water-total-card")
export class HuiWaterTotalCard
@customElement("hui-water-total-badge")
export class HuiWaterTotalBadge
extends SubscribeMixin(LitElement)
implements LovelaceCard
implements LovelaceBadge
{
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _config?: WaterTotalCardConfig;
@state() private _config?: WaterTotalBadgeConfig;
@state() private _data?: EnergyData;
@@ -35,7 +31,7 @@ export class HuiWaterTotalCard
protected hassSubscribeRequiredHostProps = ["_config"];
public setConfig(config: WaterTotalCardConfig): void {
public setConfig(config: WaterTotalBadgeConfig): void {
this._config = config;
}
@@ -49,34 +45,19 @@ export class HuiWaterTotalCard
];
}
public getCardSize(): Promise<number> | number {
return 1;
}
getGridOptions(): LovelaceGridOptions {
return {
columns: 12,
min_columns: 6,
rows: 1,
min_rows: 1,
};
}
protected shouldUpdate(changedProps: PropertyValues): boolean {
if (changedProps.has("_config") || changedProps.has("_data")) {
return true;
}
// Check if any of the tracked entity states have changed
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || !this._entities.size) {
return true;
}
// Only update if one of our tracked entities changed
for (const entityId of this._entities) {
if (oldHass.states[entityId] !== this.hass.states[entityId]) {
if (oldHass.states[entityId] !== this.hass?.states[entityId]) {
return true;
}
}
@@ -122,32 +103,22 @@ export class HuiWaterTotalCard
this.hass.localize("ui.panel.lovelace.cards.energy.water_total_title");
return html`
<ha-card>
<ha-tile-container .interactive=${false}>
<ha-tile-icon slot="icon" data-domain="sensor" data-state="active">
<ha-svg-icon slot="icon" .path=${mdiWater}></ha-svg-icon>
</ha-tile-icon>
<ha-tile-info slot="info">
<span slot="primary" class="primary">${name}</span>
<span slot="secondary" class="secondary">${displayValue}</span>
</ha-tile-info>
</ha-tile-container>
</ha-card>
<ha-badge .label=${name}>
<ha-svg-icon slot="icon" .path=${mdiWater}></ha-svg-icon>
${displayValue}
</ha-badge>
`;
}
static styles = [
tileCardStyle,
css`
:host {
--tile-color: var(--energy-water-color);
}
`,
];
static styles = css`
ha-badge {
--badge-color: var(--energy-water-color);
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"hui-water-total-card": HuiWaterTotalCard;
"hui-water-total-badge": HuiWaterTotalBadge;
}
}

17
src/panels/lovelace/badges/types.ts
View File

@@ -48,3 +48,20 @@ export interface EntityBadgeConfig extends LovelaceBadgeConfig {
*/
display_type?: DisplayType;
}
interface EnergyTotalBadgeConfig extends LovelaceBadgeConfig {
title?: string;
collection_key?: string;
}
export interface PowerTotalBadgeConfig extends EnergyTotalBadgeConfig {
type: "power-total";
}
export interface WaterTotalBadgeConfig extends EnergyTotalBadgeConfig {
type: "water-total";
}
export interface GasTotalBadgeConfig extends EnergyTotalBadgeConfig {
type: "gas-total";
}

15
src/panels/lovelace/cards/types.ts
View File

@@ -265,21 +265,6 @@ export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
show_legend?: boolean;
}
export interface PowerTotalCardConfig extends EnergyCardBaseConfig {
type: "power-total";
title?: string;
}
export interface WaterTotalCardConfig extends EnergyCardBaseConfig {
type: "water-total";
title?: string;
}
export interface GasTotalCardConfig extends EnergyCardBaseConfig {
type: "gas-total";
title?: string;
}
export interface PowerSankeyCardConfig extends EnergyCardBaseConfig {
type: "power-sankey";
title?: string;

3
src/panels/lovelace/create-element/create-badge-element.ts
View File

@@ -10,6 +10,9 @@ const ALWAYS_LOADED_TYPES = new Set(["error", "entity"]);
const LAZY_LOAD_TYPES = {
"entity-filter": () => import("../badges/hui-entity-filter-badge"),
"state-label": () => import("../badges/hui-state-label-badge"),
"power-total": () => import("../badges/energy/hui-power-total-badge"),
"gas-total": () => import("../badges/energy/hui-gas-total-badge"),
"water-total": () => import("../badges/energy/hui-water-total-badge"),
};
// This will not return an error card but will throw the error

3
src/panels/lovelace/create-element/create-card-element.ts
View File

@@ -71,9 +71,6 @@ const LAZY_LOAD_TYPES = {
import("../cards/water/hui-water-flow-sankey-card"),
"power-sources-graph": () =>
import("../cards/energy/hui-power-sources-graph-card"),
"power-total": () => import("../cards/energy/hui-power-total-card"),
"water-total": () => import("../cards/energy/hui-water-total-card"),
"gas-total": () => import("../cards/energy/hui-gas-total-card"),
"power-sankey": () => import("../cards/energy/hui-power-sankey-card"),
"entity-filter": () => import("../cards/hui-entity-filter-card"),
error: () => import("../cards/hui-error-card"),