Refresh stats at 20 minutes past the hour every hour (#9667)

src/data/energy.ts

@@ -1,3 +1,10 @@
+import {
+  addHours,
+  endOfToday,
+  endOfYesterday,
+  startOfToday,
+  startOfYesterday,
+} from "date-fns";
 import { Collection, getCollection } from "home-assistant-js-websocket";
 import { subscribeOne } from "../common/util/subscribe-one";
 import { HomeAssistant } from "../types";
@@ -108,14 +115,21 @@ export const getEnergyPreferences = (hass: HomeAssistant) =>
     type: "energy/get_prefs",
   });
 
-export const saveEnergyPreferences = (
+export const saveEnergyPreferences = async (
   hass: HomeAssistant,
   prefs: Partial<EnergyPreferences>
-) =>
+) => {
-  hass.callWS<EnergyPreferences>({
+  const newPrefs = hass.callWS<EnergyPreferences>({
     type: "energy/save_prefs",
     ...prefs,
   });
+  const energyCollection = getEnergyDataCollection(hass);
+  energyCollection.clearPrefs();
+  if (energyCollection._active) {
+    energyCollection.refresh();
+  }
+  return newPrefs;
+};
 
 interface EnergySourceByType {
   grid?: GridSourceTypeEnergyPreference[];
@@ -200,7 +214,7 @@ const getEnergyData = async (
     }
   }
 
-  const stats = await fetchStatistics(hass!, start, end, statIDs);
+  const stats = await fetchStatistics(hass!, addHours(start, -1), end, statIDs); // Subtract 1 hour from start to get starting point data
 
   return {
     start,
@@ -219,6 +233,9 @@ export interface EnergyCollection extends Collection<EnergyData> {
   prefs?: EnergyPreferences;
   clearPrefs(): void;
   setPeriod(newStart: Date, newEnd?: Date): void;
+  _refreshTimeout?: number;
+  _updatePeriodTimeout?: number;
+  _active: number;
 }
 
 export const getEnergyDataCollection = (
@@ -239,6 +256,29 @@ export const getEnergyDataCollection = (
         collection.prefs = await getEnergyPreferences(hass);
       }
 
+      if (collection._refreshTimeout) {
+        clearTimeout(collection._refreshTimeout);
+      }
+
+      if (
+        collection._active &&
+        (!collection.end || collection.end > new Date())
+      ) {
+        // The stats are created every hour
+        // Schedule a refresh for 20 minutes past the hour
+        // If the end is larger than the current time.
+        const nextFetch = new Date();
+        if (nextFetch.getMinutes() > 20) {
+          nextFetch.setHours(nextFetch.getHours() + 1);
+        }
+        nextFetch.setMinutes(20);
+
+        collection._refreshTimeout = window.setTimeout(
+          () => collection.refresh(),
+          nextFetch.getTime() - Date.now()
+        );
+      }
+
       return getEnergyData(
         hass,
         collection.prefs,
@@ -248,10 +288,39 @@ export const getEnergyDataCollection = (
     }
   ) as EnergyCollection;
 
+  const origSubscribe = collection.subscribe;
+
+  collection.subscribe = (subscriber: (data: EnergyData) => void) => {
+    const unsub = origSubscribe(subscriber);
+    collection._active++;
+    return () => {
+      collection._active--;
+      if (collection._active < 1) {
+        clearTimeout(collection._refreshTimeout);
+        collection._refreshTimeout = undefined;
+      }
+      unsub();
+    };
+  };
+
+  collection._active = 0;
   collection.prefs = prefs;
-  collection.start = new Date();
+  const now = new Date();
-  collection.start.setHours(0, 0, 0, 0);
+  // Set start to start of today if we have data for today, otherwise yesterday
-  collection.start.setTime(collection.start.getTime() - 1000 * 60 * 60); // subtract 1 hour to get a startpoint
+  collection.start = now.getHours() > 0 ? startOfToday() : startOfYesterday();
+  collection.end = now.getHours() > 0 ? endOfToday() : endOfYesterday();
+
+  const scheduleUpdatePeriod = () => {
+    collection._updatePeriodTimeout = window.setTimeout(
+      () => {
+        collection.start = startOfToday();
+        collection.end = endOfToday();
+        scheduleUpdatePeriod();
+      },
+      addHours(endOfToday(), 1).getTime() - Date.now() // Switch to next day an hour after the day changed
+    );
+  };
+  scheduleUpdatePeriod();
 
   collection.clearPrefs = () => {
     collection.prefs = undefined;
@@ -259,6 +328,16 @@ export const getEnergyDataCollection = (
   collection.setPeriod = (newStart: Date, newEnd?: Date) => {
     collection.start = newStart;
     collection.end = newEnd;
+    if (collection._updatePeriodTimeout) {
+      clearTimeout(collection._updatePeriodTimeout);
+      collection._updatePeriodTimeout = undefined;
+    }
+    if (
+      collection.start.getTime() === startOfToday().getTime() &&
+      collection.end?.getTime() === endOfToday().getTime()
+    ) {
+      scheduleUpdatePeriod();
+    }
   };
   return collection;
 };

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

@@ -14,6 +14,7 @@ import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-menu-button";
 import "../../layouts/ha-app-layout";
 import { mdiCog } from "@mdi/js";
+
 import { haStyle } from "../../resources/styles";
 import "../lovelace/views/hui-view";
 import { HomeAssistant } from "../../types";

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

@@ -54,6 +54,10 @@ export class EnergyStrategy {
 
     getEnergyDataCollection(hass, prefs);
 
+    view.cards!.push({
+      type: "energy-date-selection",
+    });
+
     // Only include if we have a grid source.
     if (hasGrid) {
       view.cards!.push({

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

@@ -2,6 +2,15 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
+import {
+  startOfWeek,
+  endOfWeek,
+  startOfToday,
+  endOfToday,
+  startOfYesterday,
+  endOfYesterday,
+  addDays,
+} from "date-fns";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-circular-progress";
@@ -37,15 +46,11 @@ class HaPanelHistory extends LitElement {
     super();
 
     const start = new Date();
-    start.setHours(start.getHours() - 2);
+    start.setHours(start.getHours() - 2, 0, 0, 0);
-    start.setMinutes(0);
-    start.setSeconds(0);
     this._startDate = start;
 
     const end = new Date();
-    end.setHours(end.getHours() + 1);
+    end.setHours(end.getHours() + 1, 0, 0, 0);
-    end.setMinutes(0);
-    end.setSeconds(0);
     this._endDate = end;
   }
 
@@ -108,42 +113,20 @@ class HaPanelHistory extends LitElement {
     super.firstUpdated(changedProps);
 
     const today = new Date();
-    today.setHours(0, 0, 0, 0);
+    const weekStart = startOfWeek(today);
-    const todayEnd = new Date(today);
+    const weekEnd = endOfWeek(today);
-    todayEnd.setDate(todayEnd.getDate() + 1);
-    todayEnd.setMilliseconds(todayEnd.getMilliseconds() - 1);
-
-    const yesterday = new Date(today);
-    yesterday.setDate(today.getDate() - 1);
-    const yesterdayEnd = new Date(today);
-    yesterdayEnd.setMilliseconds(yesterdayEnd.getMilliseconds() - 1);
-
-    const thisWeekStart = new Date(today);
-    thisWeekStart.setDate(today.getDate() - today.getDay());
-    const thisWeekEnd = new Date(thisWeekStart);
-    thisWeekEnd.setDate(thisWeekStart.getDate() + 7);
-    thisWeekEnd.setMilliseconds(thisWeekEnd.getMilliseconds() - 1);
-
-    const lastWeekStart = new Date(today);
-    lastWeekStart.setDate(today.getDate() - today.getDay() - 7);
-    const lastWeekEnd = new Date(lastWeekStart);
-    lastWeekEnd.setDate(lastWeekStart.getDate() + 7);
-    lastWeekEnd.setMilliseconds(lastWeekEnd.getMilliseconds() - 1);
 
     this._ranges = {
-      [this.hass.localize("ui.panel.history.ranges.today")]: [today, todayEnd],
+      [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [
-      [this.hass.localize("ui.panel.history.ranges.yesterday")]: [
+        startOfToday(),
-        yesterday,
+        endOfToday(),
-        yesterdayEnd,
-      ],
-      [this.hass.localize("ui.panel.history.ranges.this_week")]: [
-        thisWeekStart,
-        thisWeekEnd,
-      ],
-      [this.hass.localize("ui.panel.history.ranges.last_week")]: [
-        lastWeekStart,
-        lastWeekEnd,
       ],
+      [this.hass.localize("ui.components.date-range-picker.ranges.yesterday")]:
+        [startOfYesterday(), endOfYesterday()],
+      [this.hass.localize("ui.components.date-range-picker.ranges.this_week")]:
+        [weekStart, weekEnd],
+      [this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
+        [addDays(weekStart, -7), addDays(weekEnd, -7)],
     };
   }
 

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

@@ -4,6 +4,15 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import {
+  addDays,
+  endOfToday,
+  endOfWeek,
+  endOfYesterday,
+  startOfToday,
+  startOfWeek,
+  startOfYesterday,
+} from "date-fns";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -55,17 +64,11 @@ export class HaPanelLogbook extends LitElement {
     super();
 
     const start = new Date();
-    start.setHours(start.getHours() - 2);
+    start.setHours(start.getHours() - 2, 0, 0, 0);
-    start.setMinutes(0);
-    start.setSeconds(0);
-    start.setMilliseconds(0);
     this._startDate = start;
 
     const end = new Date();
-    end.setHours(end.getHours() + 1);
+    end.setHours(end.getHours() + 1, 0, 0, 0);
-    end.setMinutes(0);
-    end.setSeconds(0);
-    end.setMilliseconds(0);
     this._endDate = end;
   }
 
@@ -140,42 +143,20 @@ export class HaPanelLogbook extends LitElement {
     this._fetchUserPromise = this._fetchUserNames();
 
     const today = new Date();
-    today.setHours(0, 0, 0, 0);
+    const weekStart = startOfWeek(today);
-    const todayEnd = new Date(today);
+    const weekEnd = endOfWeek(today);
-    todayEnd.setDate(todayEnd.getDate() + 1);
-    todayEnd.setMilliseconds(todayEnd.getMilliseconds() - 1);
-
-    const yesterday = new Date(today);
-    yesterday.setDate(today.getDate() - 1);
-    const yesterdayEnd = new Date(today);
-    yesterdayEnd.setMilliseconds(yesterdayEnd.getMilliseconds() - 1);
-
-    const thisWeekStart = new Date(today);
-    thisWeekStart.setDate(today.getDate() - today.getDay());
-    const thisWeekEnd = new Date(thisWeekStart);
-    thisWeekEnd.setDate(thisWeekStart.getDate() + 7);
-    thisWeekEnd.setMilliseconds(thisWeekEnd.getMilliseconds() - 1);
-
-    const lastWeekStart = new Date(today);
-    lastWeekStart.setDate(today.getDate() - today.getDay() - 7);
-    const lastWeekEnd = new Date(lastWeekStart);
-    lastWeekEnd.setDate(lastWeekStart.getDate() + 7);
-    lastWeekEnd.setMilliseconds(lastWeekEnd.getMilliseconds() - 1);
 
     this._ranges = {
-      [this.hass.localize("ui.panel.logbook.ranges.today")]: [today, todayEnd],
+      [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [
-      [this.hass.localize("ui.panel.logbook.ranges.yesterday")]: [
+        startOfToday(),
-        yesterday,
+        endOfToday(),
-        yesterdayEnd,
-      ],
-      [this.hass.localize("ui.panel.logbook.ranges.this_week")]: [
-        thisWeekStart,
-        thisWeekEnd,
-      ],
-      [this.hass.localize("ui.panel.logbook.ranges.last_week")]: [
-        lastWeekStart,
-        lastWeekEnd,
       ],
+      [this.hass.localize("ui.components.date-range-picker.ranges.yesterday")]:
+        [startOfYesterday(), endOfYesterday()],
+      [this.hass.localize("ui.components.date-range-picker.ranges.this_week")]:
+        [weekStart, weekEnd],
+      [this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
+        [addDays(weekStart, -7), addDays(weekEnd, -7)],
     };
   }
 

src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts

@@ -0,0 +1,120 @@
+import {
+  startOfWeek,
+  endOfWeek,
+  startOfToday,
+  endOfToday,
+  startOfYesterday,
+  endOfYesterday,
+  addDays,
+} from "date-fns";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../../components/chart/ha-chart-base";
+import "../../../../components/ha-card";
+import "../../../../components/ha-date-range-picker";
+import type { DateRangePickerRanges } from "../../../../components/ha-date-range-picker";
+import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCard } from "../../types";
+import { EnergyDevicesGraphCardConfig } from "../types";
+
+@customElement("hui-energy-date-selection-card")
+export class HuiEnergyDateSelectionCard
+  extends SubscribeMixin(LitElement)
+  implements LovelaceCard
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _config?: EnergyDevicesGraphCardConfig;
+
+  @state() private _ranges?: DateRangePickerRanges;
+
+  @state() _startDate?: Date;
+
+  @state() _endDate?: Date;
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      getEnergyDataCollection(this.hass).subscribe((data) =>
+        this._updateDates(data)
+      ),
+    ];
+  }
+
+  public willUpdate() {
+    if (!this.hasUpdated) {
+      const today = new Date();
+      const weekStart = startOfWeek(today);
+      const weekEnd = endOfWeek(today);
+
+      this._ranges = {
+        [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [
+          startOfToday(),
+          endOfToday(),
+        ],
+        [this.hass.localize(
+          "ui.components.date-range-picker.ranges.yesterday"
+        )]: [startOfYesterday(), endOfYesterday()],
+        [this.hass.localize(
+          "ui.components.date-range-picker.ranges.this_week"
+        )]: [weekStart, weekEnd],
+        [this.hass.localize(
+          "ui.components.date-range-picker.ranges.last_week"
+        )]: [addDays(weekStart, -7), addDays(weekEnd, -7)],
+      };
+    }
+  }
+
+  public getCardSize(): Promise<number> | number {
+    return 1;
+  }
+
+  public setConfig(config: EnergyDevicesGraphCardConfig): void {
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config || !this._startDate) {
+      return html``;
+    }
+
+    return html`
+      <ha-date-range-picker
+        .hass=${this.hass}
+        .startDate=${this._startDate}
+        .endDate=${this._endDate!}
+        .ranges=${this._ranges}
+        @change=${this._dateRangeChanged}
+      ></ha-date-range-picker>
+    `;
+  }
+
+  private _updateDates(energyData: EnergyData): void {
+    this._startDate = energyData.start;
+    this._endDate = energyData.end || endOfToday();
+  }
+
+  private _dateRangeChanged(ev: CustomEvent): void {
+    if (
+      ev.detail.startDate.getTime() === this._startDate!.getTime() &&
+      ev.detail.endDate.getTime() === this._endDate!.getTime()
+    ) {
+      return;
+    }
+    const energyCollection = getEnergyDataCollection(this.hass);
+    energyCollection.setPeriod(ev.detail.startDate, ev.detail.endDate);
+    energyCollection.refresh();
+  }
+
+  static get styles(): CSSResultGroup {
+    return css``;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-energy-date-selection-card": HuiEnergyDateSelectionCard;
+  }
+}

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -4,6 +4,7 @@ import {
   ChartOptions,
   ParsedDataType,
 } from "chart.js";
+import { addHours } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -125,7 +126,7 @@ export class HuiEnergyDevicesGraphCard
   private async _getStatistics(energyData: EnergyData): Promise<void> {
     this._data = await fetchStatistics(
       this.hass,
-      energyData.start,
+      addHours(energyData.start, -1),
       energyData.end,
       energyData.prefs.device_consumption.map(
         (device) => device.stat_consumption

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -55,9 +55,13 @@ class HuiEnergySolarGaugeCard
     const prefs = this._data.prefs;
     const types = energySourcesByType(prefs);
 
+    if (!types.solar) {
+      return html``;
+    }
+
     const totalSolarProduction = calculateStatisticsSumGrowth(
       this._data.stats,
-      types.solar!.map((source) => source.stat_energy_from)
+      types.solar.map((source) => source.stat_energy_from)
     );
 
     const productionReturnedToGrid = calculateStatisticsSumGrowth(

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -5,6 +5,7 @@ import memoizeOne from "memoize-one";
 import { classMap } from "lit/directives/class-map";
 import "../../../../components/ha-card";
 import { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import { endOfToday, startOfToday } from "date-fns";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCard } from "../../types";
 import { EnergySolarGraphCardConfig } from "../types";
@@ -16,7 +17,6 @@ import {
 } from "../../../../common/color/convert-color";
 import { labDarken } from "../../../../common/color/lab";
 import {
-  EnergyCollection,
   EnergyData,
   getEnergyDataCollection,
   SolarSourceTypeEnergyPreference,
@@ -52,7 +52,9 @@ export class HuiEnergySolarGraphCard
 
   @state() private _forecasts?: Record<string, ForecastSolarForecast>;
 
-  @state() private _showAllForecastData = false;
+  @state() private _start = startOfToday();
+
+  @state() private _end = endOfToday();
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -88,7 +90,8 @@ export class HuiEnergySolarGraphCard
           <ha-chart-base
             .data=${this._chartData}
             .options=${this._createOptions(
-              getEnergyDataCollection(this.hass),
+              this._start,
+              this._end,
               this.hass.locale
             )}
             chart-type="bar"
@@ -99,91 +102,84 @@ export class HuiEnergySolarGraphCard
   }
 
   private _createOptions = memoizeOne(
-    (
+    (start: Date, end: Date, locale: FrontendLocaleData): ChartOptions => ({
-      energyCollection: EnergyCollection,
+      parsing: false,
-      locale: FrontendLocaleData
+      animation: false,
-    ): ChartOptions => {
+      scales: {
-      const startTime = energyCollection.start.getTime();
+        x: {
-
+          type: "time",
-      return {
+          suggestedMin: start.getTime(),
-        parsing: false,
+          suggestedMax: end.getTime(),
-        animation: false,
+          adapters: {
-        scales: {
+            date: {
-          x: {
+              locale: locale,
-            type: "time",
-            suggestedMin: startTime,
-            suggestedMax: startTime + 24 * 60 * 60 * 1000,
-            adapters: {
-              date: {
-                locale: locale,
-              },
             },
-            ticks: {
-              maxRotation: 0,
-              sampleSize: 5,
-              autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
-              font: (context) =>
-                context.tick && context.tick.major
-                  ? ({ weight: "bold" } as any)
-                  : {},
-            },
-            time: {
-              tooltipFormat: "datetime",
-            },
-            offset: true,
           },
-          y: {
+          ticks: {
-            type: "linear",
+            maxRotation: 0,
-            title: {
+            sampleSize: 5,
-              display: true,
+            autoSkipPadding: 20,
-              text: "kWh",
+            major: {
-            },
+              enabled: true,
-            ticks: {
-              beginAtZero: true,
             },
+            font: (context) =>
+              context.tick && context.tick.major
+                ? ({ weight: "bold" } as any)
+                : {},
+          },
+          time: {
+            tooltipFormat: "datetime",
+          },
+          offset: true,
+        },
+        y: {
+          type: "linear",
+          title: {
+            display: true,
+            text: "kWh",
+          },
+          ticks: {
+            beginAtZero: true,
           },
         },
-        plugins: {
+      },
-          tooltip: {
+      plugins: {
-            mode: "nearest",
+        tooltip: {
-            callbacks: {
-              label: (context) =>
-                `${context.dataset.label}: ${formatNumber(
-                  context.parsed.y,
-                  locale
-                )} kWh`,
-            },
-          },
-          filler: {
-            propagate: false,
-          },
-          legend: {
-            display: false,
-            labels: {
-              usePointStyle: true,
-            },
-          },
-        },
-        hover: {
           mode: "nearest",
-        },
+          callbacks: {
-        elements: {
+            label: (context) =>
-          line: {
+              `${context.dataset.label}: ${formatNumber(
-            tension: 0.3,
+                context.parsed.y,
-            borderWidth: 1.5,
+                locale
-          },
+              )} kWh`,
-          bar: { borderWidth: 1.5, borderRadius: 4 },
-          point: {
-            hitRadius: 5,
           },
         },
-        // @ts-expect-error
+        filler: {
-        locale: numberFormatToLocale(locale),
+          propagate: false,
-      };
+        },
-    }
+        legend: {
+          display: false,
+          labels: {
+            usePointStyle: true,
+          },
+        },
+      },
+      hover: {
+        mode: "nearest",
+      },
+      elements: {
+        line: {
+          tension: 0.3,
+          borderWidth: 1.5,
+        },
+        bar: { borderWidth: 1.5, borderRadius: 4 },
+        point: {
+          hitRadius: 5,
+        },
+      },
+      // @ts-expect-error
+      locale: numberFormatToLocale(locale),
+    })
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
@@ -303,14 +299,12 @@ export class HuiEnergySolarGraphCard
           };
           data.push(forecast);
 
-          const today = new Date();
-          const tomorrow = new Date(today);
-          tomorrow.setDate(tomorrow.getDate() + 1);
-          tomorrow.setHours(0, 0, 0, 0);
-
           for (const [date, value] of Object.entries(forecastsData)) {
             const dateObj = new Date(date);
-            if (dateObj > tomorrow && !this._showAllForecastData) {
+            if (
+              dateObj < energyData.start ||
+              (energyData.end && dateObj > energyData.end)
+            ) {
               continue;
             }
             forecast.data.push({
@@ -325,6 +319,9 @@ export class HuiEnergySolarGraphCard
       Array.prototype.push.apply(datasets, data);
     });
 
+    this._start = energyData.start;
+    this._end = energyData.end || endOfToday();
+
     this._chartData = {
       datasets,
     };

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -1,4 +1,5 @@
 import { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import { startOfToday, endOfToday } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -19,11 +20,7 @@ import {
 } from "../../../../common/string/format_number";
 import "../../../../components/chart/ha-chart-base";
 import "../../../../components/ha-card";
-import {
+import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
-  EnergyCollection,
-  EnergyData,
-  getEnergyDataCollection,
-} from "../../../../data/energy";
 import { FrontendLocaleData } from "../../../../data/translation";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
@@ -43,6 +40,10 @@ export class HuiEnergyUsageGraphCard
     datasets: [],
   };
 
+  @state() private _start = startOfToday();
+
+  @state() private _end = endOfToday();
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass).subscribe((data) =>
@@ -77,7 +78,8 @@ export class HuiEnergyUsageGraphCard
           <ha-chart-base
             .data=${this._chartData}
             .options=${this._createOptions(
-              getEnergyDataCollection(this.hass),
+              this._start,
+              this._end,
               this.hass.locale
             )}
             chart-type="bar"
@@ -88,119 +90,106 @@ export class HuiEnergyUsageGraphCard
   }
 
   private _createOptions = memoizeOne(
-    (
+    (start: Date, end: Date, locale: FrontendLocaleData): ChartOptions => ({
-      energyCollection: EnergyCollection,
+      parsing: false,
-      locale: FrontendLocaleData
+      animation: false,
-    ): ChartOptions => {
+      scales: {
-      const startTime = energyCollection.start.getTime();
+        x: {
-
+          type: "time",
-      return {
+          suggestedMin: start.getTime(),
-        parsing: false,
+          suggestedMax: end.getTime(),
-        animation: false,
+          adapters: {
-        scales: {
+            date: {
-          x: {
+              locale: locale,
-            type: "time",
-            suggestedMin: startTime,
-            suggestedMax: startTime + 24 * 60 * 60 * 1000,
-            adapters: {
-              date: {
-                locale: locale,
-              },
             },
-            ticks: {
-              maxRotation: 0,
-              sampleSize: 5,
-              autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
-              font: (context) =>
-                context.tick && context.tick.major
-                  ? ({ weight: "bold" } as any)
-                  : {},
-            },
-            time: {
-              tooltipFormat: "datetime",
-            },
-            offset: true,
           },
-          y: {
+          ticks: {
-            stacked: true,
+            maxRotation: 0,
-            type: "linear",
+            sampleSize: 5,
-            title: {
+            autoSkipPadding: 20,
-              display: true,
+            major: {
-              text: "kWh",
+              enabled: true,
-            },
-            ticks: {
-              beginAtZero: true,
-              callback: (value) => formatNumber(Math.abs(value), locale),
             },
+            font: (context) =>
+              context.tick && context.tick.major
+                ? ({ weight: "bold" } as any)
+                : {},
+          },
+          time: {
+            tooltipFormat: "datetime",
+          },
+          offset: true,
+        },
+        y: {
+          stacked: true,
+          type: "linear",
+          title: {
+            display: true,
+            text: "kWh",
+          },
+          ticks: {
+            beginAtZero: true,
+            callback: (value) => formatNumber(Math.abs(value), locale),
           },
         },
-        plugins: {
+      },
-          tooltip: {
+      plugins: {
-            mode: "x",
+        tooltip: {
-            intersect: true,
+          mode: "x",
-            position: "nearest",
+          intersect: true,
-            filter: (val) => val.formattedValue !== "0",
+          position: "nearest",
-            callbacks: {
+          filter: (val) => val.formattedValue !== "0",
-              label: (context) =>
+          callbacks: {
-                `${context.dataset.label}: ${formatNumber(
+            label: (context) =>
-                  Math.abs(context.parsed.y),
+              `${context.dataset.label}: ${formatNumber(
-                  locale
+                Math.abs(context.parsed.y),
-                )} kWh`,
+                locale
-              footer: (contexts) => {
+              )} kWh`,
-                let totalConsumed = 0;
+            footer: (contexts) => {
-                let totalReturned = 0;
+              let totalConsumed = 0;
-                for (const context of contexts) {
+              let totalReturned = 0;
-                  const value = (context.dataset.data[context.dataIndex] as any)
+              for (const context of contexts) {
-                    .y;
+                const value = (context.dataset.data[context.dataIndex] as any)
-                  if (value > 0) {
+                  .y;
-                    totalConsumed += value;
+                if (value > 0) {
-                  } else {
+                  totalConsumed += value;
-                    totalReturned += Math.abs(value);
+                } else {
-                  }
+                  totalReturned += Math.abs(value);
                 }
-                return [
+              }
-                  totalConsumed
+              return [
-                    ? `Total consumed: ${formatNumber(
+                totalConsumed
-                        totalConsumed,
+                  ? `Total consumed: ${formatNumber(totalConsumed, locale)} kWh`
-                        locale
+                  : "",
-                      )} kWh`
+                totalReturned
-                    : "",
+                  ? `Total returned: ${formatNumber(totalReturned, locale)} kWh`
-                  totalReturned
+                  : "",
-                    ? `Total returned: ${formatNumber(
+              ].filter(Boolean);
-                        totalReturned,
-                        locale
-                      )} kWh`
-                    : "",
-                ].filter(Boolean);
-              },
-            },
-          },
-          filler: {
-            propagate: false,
-          },
-          legend: {
-            display: false,
-            labels: {
-              usePointStyle: true,
             },
           },
         },
-        hover: {
+        filler: {
-          mode: "nearest",
+          propagate: false,
         },
-        elements: {
+        legend: {
-          bar: { borderWidth: 1.5, borderRadius: 4 },
+          display: false,
-          point: {
+          labels: {
-            hitRadius: 5,
+            usePointStyle: true,
           },
         },
-        // @ts-expect-error
+      },
-        locale: numberFormatToLocale(locale),
+      hover: {
-      };
+        mode: "nearest",
-    }
+      },
+      elements: {
+        bar: { borderWidth: 1.5, borderRadius: 4 },
+        point: {
+          hitRadius: 5,
+        },
+      },
+      // @ts-expect-error
+      locale: numberFormatToLocale(locale),
+    })
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
@@ -241,7 +230,13 @@ export class HuiEnergyUsageGraphCard
     const datasets: ChartDataset<"bar">[] = [];
     let endTime: Date;
 
+    this._start = energyData.start;
+    this._end = energyData.end || endOfToday();
+
     if (statisticsData.length === 0) {
+      this._chartData = {
+        datasets,
+      };
       return;
     }
 

src/panels/lovelace/create-element/create-card-element.ts

@@ -51,6 +51,8 @@ const LAZY_LOAD_TYPES = {
     import("../cards/energy/hui-energy-grid-neutrality-gauge-card"),
   "energy-carbon-consumed-gauge": () =>
     import("../cards/energy/hui-energy-carbon-consumed-gauge-card"),
+  "energy-date-selection": () =>
+    import("../cards/energy/hui-energy-date-selection-card"),
   grid: () => import("../cards/hui-grid-card"),
   starting: () => import("../cards/hui-starting-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),

src/translations/en.json

@@ -425,7 +425,13 @@
       "date-range-picker": {
         "start_date": "Start date",
         "end_date": "End date",
-        "select": "Select"
+        "select": "Select",
+        "ranges": {
+          "today": "Today",
+          "yesterday": "Yesterday",
+          "this_week": "This week",
+          "last_week": "Last week"
+        }
       },
       "relative_time": {
         "never": "Never",
@@ -2807,22 +2813,6 @@
           }
         }
       },
-      "history": {
-        "ranges": {
-          "today": "Today",
-          "yesterday": "Yesterday",
-          "this_week": "This week",
-          "last_week": "Last week"
-        }
-      },
-      "logbook": {
-        "ranges": {
-          "today": "Today",
-          "yesterday": "Yesterday",
-          "this_week": "This week",
-          "last_week": "Last week"
-        }
-      },
       "lovelace": {
         "cards": {
           "confirm_delete": "Are you sure you want to delete this card?",