Add timespans to history and energy (#23362)

* add Last 24h, 30d, 1y and overflow

* added Energy-Dashboard

* mobile style css

* added yesterday and min-height; changed overflow; new timespans to end;

* conflict resolve trial

* changed energy timespan order

* min for logbook

* seperated overflow calc for energy and logbook / history

* rename to header-position

* prettier format

* date-fns types

* added 1h, 12 h, 7d and removed 365d for history, added 7d to energy

* remove 7d for energy

* use calcdate and for energy whole hours / days / months

* fix calc

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

@@ -5,15 +5,16 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiCalendar } from "@mdi/js";
 import {
   addDays,
+  subHours,
   endOfDay,
   endOfMonth,
   endOfWeek,
   endOfYear,
-  isThisYear,
   startOfDay,
   startOfMonth,
   startOfWeek,
   startOfYear,
+  isThisYear,
 } from "date-fns";
 import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import type { PropertyValues, TemplateResult } from "lit";
@@ -178,6 +179,96 @@ export class HaDateRangePicker extends LitElement {
                   weekStartsOn,
                 }),
               ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-1h"
+              )]: [
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  1
+                ),
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  0
+                ),
+              ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-12h"
+              )]: [
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  12
+                ),
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  0
+                ),
+              ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-24h"
+              )]: [
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  24
+                ),
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  0
+                ),
+              ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-7d"
+              )]: [
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  24 * 7
+                ),
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  0
+                ),
+              ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-30d"
+              )]: [
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  24 * 30
+                ),
+                calcDate(
+                  today,
+                  subHours,
+                  this.hass.locale,
+                  this.hass.config,
+                  0
+                ),
+              ],
             }
           : {}),
       };
@@ -395,7 +486,6 @@ export class HaDateRangePicker extends LitElement {
   }
 
   static styles = css`
-
     ha-icon-button {
       direction: var(--direction);
     }
@@ -423,15 +513,27 @@ export class HaDateRangePicker extends LitElement {
     }
     @media only screen and (max-width: 460px) {
       ha-textarea {
-        width: 100%
+        width: 100%;
+      }
     }
-
     @media only screen and (max-width: 800px) {
       .date-range-ranges {
         border-right: none;
         border-bottom: 1px solid var(--divider-color);
       }
     }
+
+    @media only screen and (max-height: 940px) and (max-width: 800px) {
+      .date-range-ranges {
+        overflow: auto;
+        max-height: calc(70vh - 330px);
+        min-height: 160px;
+      }
+
+      :host([header-position]) .date-range-ranges {
+        max-height: calc(90vh - 430px);
+      }
+    }
   `;
 }
 

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

@@ -18,6 +18,7 @@ import {
   startOfWeek,
   startOfYear,
   subDays,
+  subMonths,
 } from "date-fns";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -179,6 +180,30 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
           calcDate(today, startOfYear, this.hass.locale, this.hass.config),
           calcDate(today, endOfYear, this.hass.locale, this.hass.config),
         ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-7d")]: [
+          calcDate(today, subDays, this.hass.locale, this.hass.config, 7),
+          calcDate(today, subDays, this.hass.locale, this.hass.config, 1),
+        ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-30d")]:
+          [
+            calcDate(today, subDays, this.hass.locale, this.hass.config, 30),
+            calcDate(today, subDays, this.hass.locale, this.hass.config, 1),
+          ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-12m")]:
+          [
+            calcDate(
+              subMonths(today, 12),
+              startOfMonth,
+              this.hass.locale,
+              this.hass.config
+            ),
+            calcDate(
+              subMonths(today, 1),
+              endOfMonth,
+              this.hass.locale,
+              this.hass.config
+            ),
+          ],
       };
     }
   }
@@ -248,6 +273,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             .ranges=${this._ranges}
             @value-changed=${this._dateRangeChanged}
             minimal
+            header-position
           ></ha-date-range-picker>
         </div>
 

src/translations/en.json

@@ -809,10 +809,16 @@
         "ranges": {
           "today": "Today",
           "yesterday": "Yesterday",
+          "now-1h": "Last hour",
+          "now-12h": "Last 12 hours",
+          "now-24h": "Last 24 hours",
           "this_week": "This week",
           "this_quarter": "This quarter",
           "this_month": "This month",
-          "this_year": "This year"
+          "now-7d": "Last 7 days",
+          "now-30d": "Last 30 days",
+          "this_year": "This year",
+          "now-12m": "Last 12 month"
         }
       },
       "grid-size-picker": {