Sticky period selector for energy dashboard

src/components/date-range-picker.ts

@@ -101,6 +101,10 @@ const Component = Vue.extend({
       type: String,
       default: "en",
     },
+    opensVertical: {
+      type: String,
+      default: undefined,
+    },
   },
   render(createElement) {
     // @ts-expect-error
@@ -309,6 +313,10 @@ class DateRangePickerElement extends WrappedElement {
             min-width: unset !important;
             display: block !important;
           }
+          :host([opens-vertical="up"]) .daterangepicker {
+            bottom: 100%;
+            top: auto !important;
+          }
         `;
     if (mainWindow.document.dir === "rtl") {
       style.innerHTML += `

src/components/ha-date-range-picker.ts

@@ -74,6 +74,9 @@ export class HaDateRangePicker extends LitElement {
   @property({ attribute: "extended-presets", type: Boolean })
   public extendedPresets = false;
 
+  @property({ attribute: "vertical-opening-direction" })
+  public verticalOpeningDirection?: "up" | "down";
+
   @property({ attribute: false }) public openingDirection?:
     | "right"
     | "left"
@@ -127,6 +130,7 @@ export class HaDateRangePicker extends LitElement {
         opening-direction=${ifDefined(
           this.openingDirection || this._calcedOpeningDirection
         )}
+        opens-vertical=${ifDefined(this.verticalOpeningDirection)}
         first-day=${firstWeekdayIndex(this.hass.locale)}
         language=${this.hass.locale.language}
         @change=${this._handleChange}

src/panels/energy/ha-panel-energy.ts

@@ -22,7 +22,10 @@ import {
   getSummedData,
 } from "../../data/energy";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
-import type { LovelaceViewConfig } from "../../data/lovelace/config/view";
+import {
+  isStrategyView,
+  type LovelaceViewConfig,
+} from "../../data/lovelace/config/view";
 import type { StatisticValue } from "../../data/recorder";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
@@ -48,6 +51,7 @@ const OVERVIEW_VIEW = {
   strategy: {
     type: "energy-overview",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -56,6 +60,7 @@ const ENERGY_VIEW = {
   strategy: {
     type: "energy",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -64,6 +69,7 @@ const WATER_VIEW = {
   strategy: {
     type: "water",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -72,6 +78,7 @@ const GAS_VIEW = {
   strategy: {
     type: "gas",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -223,6 +230,11 @@ class PanelEnergy extends LitElement {
       return nothing;
     }
 
+    const routePath = this.route?.path?.split("/")[1] || "";
+    const currentView = this._lovelace.config.views.find(
+      (view) => view.path === routePath
+    );
+
     return html`
       <hui-root
         .hass=${this.hass}
@@ -233,6 +245,17 @@ class PanelEnergy extends LitElement {
         .extraActionItems=${this._extraActionItems}
         @reload-energy-panel=${this._reloadConfig}
       ></hui-root>
+      ${currentView &&
+      isStrategyView(currentView) &&
+      currentView.strategy?.show_period_selector
+        ? html`<ha-card raised class="period-selector">
+            <hui-energy-period-selector
+              .hass=${this.hass}
+              .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
+              vertical-opening-direction="up"
+            ></hui-energy-period-selector>
+          </ha-card>`
+        : nothing}
     `;
   }
 
@@ -656,6 +679,12 @@ class PanelEnergy extends LitElement {
           align-items: center;
           justify-content: center;
         }
+        .period-selector {
+          position: sticky;
+          bottom: var(--ha-space-2);
+          margin: 0 auto;
+          max-width: calc(min(450px, 100% - var(--ha-space-4)));
+        }
       `,
     ];
   }

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -5,7 +5,6 @@ import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
-import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
 @customElement("energy-overview-view-strategy")
@@ -64,24 +63,20 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
         (source.type === "grid" && source.power?.length)
     );
 
-    const overviewSection: LovelaceSectionConfig = {
-      type: "grid",
-      cards: [
-        {
-          type: "energy-date-selection",
-          collection_key: collectionKey,
-          allow_compare: false,
-        },
-      ],
-    };
     if (hasGrid || hasBattery || hasSolar) {
-      overviewSection.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
-        type: "energy-distribution",
-        collection_key: collectionKey,
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_distribution_title"
+            ),
+            type: "energy-distribution",
+            collection_key: collectionKey,
+          },
+        ],
       });
     }
-    view.sections!.push(overviewSection);
 
     if (prefs.energy_sources.length) {
       view.sections!.push({

src/panels/energy/strategies/energy-view-strategy.ts

@@ -53,10 +53,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       (d) => d.included_in_stat
     );
 
-    view.cards!.push({
-      type: "energy-date-selection",
-      collection_key: collectionKey,
-    });
     view.cards!.push({
       type: "energy-compare",
       collection_key: "energy_dashboard",

src/panels/energy/strategies/gas-view-strategy.ts

@@ -40,10 +40,6 @@ export class GasViewStrategy extends ReactiveElement {
 
     const section = view.sections![0] as LovelaceSectionConfig;
 
-    section.cards!.push({
-      type: "energy-date-selection",
-      collection_key: collectionKey,
-    });
     section.cards!.push({
       type: "energy-compare",
       collection_key: collectionKey,

src/panels/energy/strategies/water-view-strategy.ts

@@ -41,10 +41,6 @@ export class WaterViewStrategy extends ReactiveElement {
 
     const section = view.sections![0] as LovelaceSectionConfig;
 
-    section.cards!.push({
-      type: "energy-date-selection",
-      collection_key: collectionKey,
-    });
     section.cards!.push({
       type: "energy-compare",
       collection_key: collectionKey,

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

@@ -69,6 +69,9 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   @property({ type: Boolean, attribute: "allow-compare" }) public allowCompare =
     true;
 
+  @property({ attribute: "vertical-opening-direction" })
+  public verticalOpeningDirection?: "up" | "down";
+
   @state() _startDate?: Date;
 
   @state() _endDate?: Date;
@@ -204,6 +207,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             @preset-selected=${this._presetSelected}
             minimal
             header-position
+            .verticalOpeningDirection=${this.verticalOpeningDirection}
           ></ha-date-range-picker>
         </div>