Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 00:27:49 +01:00
Code Activity

Migrate Energy date selector to new footer (#29867)

Browse Source
This commit is contained in:
Petar Petrov
2026-03-02 17:00:34 +01:00
committed by Bram Kragten
parent 29ede122a1
commit fdbeb12622
7 changed files with 145 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/panels/energy/ha-panel-energy.ts
View File

@@ -1,7 +1,6 @@
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { navigate } from "../../common/navigate";
import type { LocalizeKeys } from "../../common/translations/localize";
import "../../components/ha-alert";
@@ -11,13 +10,9 @@ import "../../components/ha-top-app-bar-fixed";
import type { EnergyPreferences } from "../../data/energy";
import { getEnergyDataCollection } from "../../data/energy";
import type { LovelaceConfig } from "../../data/lovelace/config/types";
import {
isStrategyView,
type LovelaceViewConfig,
} from "../../data/lovelace/config/view";
import type { LovelaceViewConfig } from "../../data/lovelace/config/view";
import { haStyle } from "../../resources/styles";
import type { HomeAssistant, PanelInfo } from "../../types";
import "../lovelace/components/hui-energy-period-selector";
import "../lovelace/hui-root";
import type { Lovelace } from "../lovelace/types";
import "../lovelace/views/hui-view";
@@ -37,7 +32,6 @@ const OVERVIEW_VIEW = {
strategy: {
type: "energy-overview",
collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
show_period_selector: true,
},
} as LovelaceViewConfig;
@@ -46,7 +40,6 @@ const ENERGY_VIEW = {
strategy: {
type: "energy",
collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
show_period_selector: true,
},
} as LovelaceViewConfig;
@@ -55,7 +48,6 @@ const WATER_VIEW = {
strategy: {
type: "water",
collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
show_period_selector: true,
},
} as LovelaceViewConfig;
@@ -64,7 +56,6 @@ const GAS_VIEW = {
strategy: {
type: "gas",
collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
show_period_selector: true,
},
} as LovelaceViewConfig;
@@ -208,16 +199,6 @@ class PanelEnergy extends LitElement {
return nothing;
}
const routePath = this.route?.path?.split("/")[1] || "";
const currentView = this._lovelace.config.views.find(
(view) => view.path === routePath
);
const showEnergySelector =
currentView &&
isStrategyView(currentView) &&
currentView.strategy?.show_period_selector;
return html`
<hui-root
.hass=${this.hass}
@@ -228,22 +209,8 @@ class PanelEnergy extends LitElement {
.backButton=${this._searchParms.has("historyBack")}
.backPath=${this._searchParms.get("backPath") || "/"}
@reload-energy-panel=${this._reloadConfig}
class=${classMap({ "has-period-selector": showEnergySelector })}
>
</hui-root>
${showEnergySelector
? html`
<ha-card class="period-selector">
<hui-energy-period-selector
.hass=${this.hass}
.collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
opening-direction="right"
vertical-opening-direction="up"
fixed
></hui-energy-period-selector>
</ha-card>
`
: nothing}
`;
}
@@ -354,50 +321,6 @@ class PanelEnergy extends LitElement {
align-items: center;
justify-content: center;
}
hui-root.has-period-selector {
--view-container-padding-bottom: var(--ha-space-18);
}
.period-selector {
position: fixed;
z-index: 4;
bottom: max(var(--ha-space-4), var(--safe-area-inset-bottom, 0px));
left: max(
var(--mdc-drawer-width, 0px),
var(--safe-area-inset-left, 0px)
);
right: var(--safe-area-inset-right, 0);
inset-inline-start: max(
var(--mdc-drawer-width, 0px),
var(--safe-area-inset-left, 0px)
);
inset-inline-end: var(--safe-area-inset-right, 0);
transition:
left var(--ha-animation-duration-normal) ease,
right var(--ha-animation-duration-normal) ease,
inset-inline-start var(--ha-animation-duration-normal) ease,
inset-inline-end var(--ha-animation-duration-normal) ease;
margin: 0 auto;
max-width: calc(min(470px, 100% - var(--ha-space-4)));
box-sizing: border-box;
padding-left: var(--ha-space-2);
padding-right: 0;
padding-inline-start: var(--ha-space-4);
padding-inline-end: 0;
--ha-card-box-shadow:
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--ha-card-border-color: var(--divider-color);
--ha-card-border-width: var(--ha-card-border-width, 1px);
}
@media all and (max-width: 450px), all and (max-height: 500px) {
hui-root.has-period-selector {
--view-container-padding-bottom: var(--ha-space-14);
}
.period-selector {
bottom: max(var(--ha-space-2), var(--safe-area-inset-bottom, 0px));
}
}
`,
];
}

15
src/panels/energy/strategies/energy-overview-view-strategy.ts
View File

@@ -13,16 +13,23 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
_config: LovelaceStrategyConfig,
hass: HomeAssistant
): Promise<LovelaceViewConfig> {
const collectionKey =
_config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
const view: LovelaceViewConfig = {
type: "sections",
sections: [],
dense_section_placement: true,
max_columns: 2,
max_columns: 3,
footer: {
column_span: 1.1,
card: {
type: "energy-date-selection",
collection_key: collectionKey,
},
},
};
const collectionKey =
_config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
const energyCollection = getEnergyDataCollection(hass, {
key: collectionKey,
});

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

@@ -2,6 +2,7 @@ import { ReactiveElement } from "lit";
import { customElement } from "lit/decorators";
import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
import { getEnergyDataCollection } from "../../../data/energy";
import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
import type { HomeAssistant } from "../../../types";
@@ -14,11 +15,22 @@ export class EnergyViewStrategy extends ReactiveElement {
_config: LovelaceStrategyConfig,
hass: HomeAssistant
): Promise<LovelaceViewConfig> {
const view: LovelaceViewConfig = { cards: [] };
const collectionKey =
_config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
const view: LovelaceViewConfig = {
type: "sections",
max_columns: 3,
sections: [],
footer: {
column_span: 1.1,
card: {
type: "energy-date-selection",
collection_key: collectionKey,
},
},
};
const energyCollection = getEnergyDataCollection(hass, {
key: collectionKey,
});
@@ -36,8 +48,6 @@ export class EnergyViewStrategy extends ReactiveElement {
return view;
}
view.type = "sidebar";
const hasGrid = prefs.energy_sources.find(
(source): source is GridSourceTypeEnergyPreference =>
source.type === "grid" &&
@@ -50,83 +60,95 @@ export class EnergyViewStrategy extends ReactiveElement {
const hasBattery = prefs.energy_sources.some(
(source) => source.type === "battery"
);
view.cards!.push({
const mainCards: LovelaceCardConfig[] = [];
const gaugeCards: LovelaceCardConfig[] = [];
// Only include if we have a grid source & return.
if (hasReturn) {
const card = {
type: "energy-grid-neutrality-gauge",
collection_key: collectionKey,
};
gaugeCards.push(card);
}
// Only include if we have a solar source.
if (hasSolar) {
if (hasReturn) {
const card = {
type: "energy-solar-consumed-gauge",
collection_key: collectionKey,
};
gaugeCards.push(card);
}
if (hasGrid) {
const card = {
type: "energy-self-sufficiency-gauge",
collection_key: collectionKey,
};
gaugeCards.push(card);
}
}
// Only include if we have a grid
if (hasGrid) {
const card = {
type: "energy-carbon-consumed-gauge",
collection_key: collectionKey,
};
gaugeCards.push(card);
}
if (gaugeCards.length) {
view.sections!.push({
type: "grid",
column_span: 3,
cards:
gaugeCards.length === 1
? [gaugeCards[0]]
: gaugeCards.map((card) => ({
...card,
grid_options: { columns: 6 },
})),
});
}
mainCards.push({
type: "energy-compare",
collection_key: collectionKey,
grid_options: { columns: 36 },
});
// Only include if we have a grid or battery.
if (hasGrid || hasBattery) {
view.cards!.push({
mainCards.push({
title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
type: "energy-usage-graph",
collection_key: collectionKey,
grid_options: { columns: 36 },
});
}
// Only include if we have a solar source.
if (hasSolar) {
view.cards!.push({
mainCards.push({
title: hass.localize("ui.panel.energy.cards.energy_solar_graph_title"),
type: "energy-solar-graph",
collection_key: collectionKey,
});
}
// Only include if we have a grid or battery.
if (hasGrid || hasBattery) {
view.cards!.push({
title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
type: "energy-distribution",
view_layout: { position: "sidebar" },
collection_key: collectionKey,
grid_options: { columns: 36 },
});
}
if (hasGrid || hasSolar || hasBattery) {
view.cards!.push({
mainCards.push({
title: hass.localize(
"ui.panel.energy.cards.energy_sources_table_title"
),
type: "energy-sources-table",
collection_key: collectionKey,
types: ["grid", "solar", "battery"],
});
}
// Only include if we have a grid source & return.
if (hasReturn) {
view.cards!.push({
type: "energy-grid-neutrality-gauge",
view_layout: { position: "sidebar" },
collection_key: collectionKey,
});
}
// Only include if we have a solar source.
if (hasSolar) {
if (hasReturn) {
view.cards!.push({
type: "energy-solar-consumed-gauge",
view_layout: { position: "sidebar" },
collection_key: collectionKey,
});
}
if (hasGrid) {
view.cards!.push({
type: "energy-self-sufficiency-gauge",
view_layout: { position: "sidebar" },
collection_key: collectionKey,
});
}
}
// Only include if we have a grid
if (hasGrid) {
view.cards!.push({
type: "energy-carbon-consumed-gauge",
view_layout: { position: "sidebar" },
collection_key: collectionKey,
grid_options: { columns: 36 },
});
}
@@ -137,29 +159,38 @@ export class EnergyViewStrategy extends ReactiveElement {
hass,
(d) => d.stat_consumption
);
view.cards!.push({
mainCards.push({
title: hass.localize(
"ui.panel.energy.cards.energy_devices_detail_graph_title"
),
type: "energy-devices-detail-graph",
collection_key: collectionKey,
grid_options: { columns: 36 },
});
view.cards!.push({
mainCards.push({
title: hass.localize(
"ui.panel.energy.cards.energy_devices_graph_title"
),
type: "energy-devices-graph",
collection_key: collectionKey,
grid_options: { columns: 36 },
});
view.cards!.push({
mainCards.push({
title: hass.localize("ui.panel.energy.cards.energy_sankey_title"),
type: "energy-sankey",
collection_key: collectionKey,
group_by_floor: showFloorsAndAreas,
group_by_area: showFloorsAndAreas,
grid_options: { columns: 36 },
});
}
view.sections!.push({
type: "grid",
column_span: 3,
cards: mainCards,
});
return view;
}
}

24
src/panels/energy/strategies/gas-view-strategy.ts
View File

@@ -13,14 +13,22 @@ export class GasViewStrategy extends ReactiveElement {
_config: LovelaceStrategyConfig,
hass: HomeAssistant
): Promise<LovelaceViewConfig> {
const view: LovelaceViewConfig = {
type: "sections",
sections: [{ type: "grid", cards: [] }],
};
const collectionKey =
_config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
const view: LovelaceViewConfig = {
type: "sections",
max_columns: 3,
sections: [{ type: "grid", cards: [], column_span: 3 }],
footer: {
column_span: 1.1,
card: {
type: "energy-date-selection",
collection_key: collectionKey,
},
},
};
const energyCollection = getEnergyDataCollection(hass, {
key: collectionKey,
});
@@ -49,6 +57,9 @@ export class GasViewStrategy extends ReactiveElement {
title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
type: "energy-gas-graph",
collection_key: collectionKey,
grid_options: {
columns: 24,
},
});
section.cards!.push({
@@ -56,6 +67,9 @@ export class GasViewStrategy extends ReactiveElement {
type: "energy-sources-table",
collection_key: collectionKey,
types: ["gas"],
grid_options: {
columns: 12,
},
});
return view;

27
src/panels/energy/strategies/water-view-strategy.ts
View File

@@ -14,14 +14,22 @@ export class WaterViewStrategy extends ReactiveElement {
_config: LovelaceStrategyConfig,
hass: HomeAssistant
): Promise<LovelaceViewConfig> {
const view: LovelaceViewConfig = {
type: "sections",
sections: [{ type: "grid", cards: [] }],
};
const collectionKey =
_config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
const view: LovelaceViewConfig = {
type: "sections",
max_columns: 3,
sections: [{ type: "grid", cards: [], column_span: 3 }],
footer: {
column_span: 1.1,
card: {
type: "energy-date-selection",
collection_key: collectionKey,
},
},
};
const energyCollection = getEnergyDataCollection(hass, {
key: collectionKey,
});
@@ -52,6 +60,9 @@ export class WaterViewStrategy extends ReactiveElement {
title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
type: "energy-water-graph",
collection_key: collectionKey,
grid_options: {
columns: 24,
},
});
section.cards!.push({
title: hass.localize(
@@ -60,6 +71,9 @@ export class WaterViewStrategy extends ReactiveElement {
type: "energy-sources-table",
collection_key: collectionKey,
types: ["water"],
grid_options: {
columns: 12,
},
});
}
@@ -76,6 +90,9 @@ export class WaterViewStrategy extends ReactiveElement {
collection_key: collectionKey,
group_by_floor: showFloorsAndAreas,
group_by_area: showFloorsAndAreas,
grid_options: {
columns: 24,
},
});
}

2
src/panels/lovelace/components/hui-energy-period-selector.ts
View File

@@ -125,7 +125,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
}
private _measure() {
this.narrow = this.offsetWidth < 450;
this.narrow = this.offsetWidth < 425;
this._collapseButtons = this.offsetWidth < 320;
}

5
src/panels/lovelace/views/hui-view-footer.ts
View File

@@ -241,8 +241,9 @@ export class HuiViewFooter extends LitElement {
box-sizing: content-box;
margin: 0 auto;
max-width: calc(
var(--footer-column-span, 1) * var(--column-max-width, 500px) +
(var(--footer-column-span, 1) - 1) * var(--column-gap, 32px)
var(--footer-column-span, 1) / var(--column-count, 1) * 100% +
(var(--footer-column-span, 1) - var(--column-count, 1)) /
var(--column-count, 1) * var(--column-gap, 32px)
);
}