From f53ac41eeea2e0de1116d7fb1ba911a5d2d20cdd Mon Sep 17 00:00:00 2001 From: "libe.net" <36338790+boern99@users.noreply.github.com> Date: Sat, 15 Feb 2025 09:52:32 +0100 Subject: [PATCH] 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 | 168 ++++++++++++++---- .../components/hui-energy-period-selector.ts | 26 +++ src/translations/en.json | 8 +- 3 files changed, 168 insertions(+), 34 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 7dfd0c7383..40c59a3144 100644 --- a/src/components/ha-date-range-picker.ts +++ b/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,44 +486,55 @@ export class HaDateRangePicker extends LitElement { } static styles = css` + ha-icon-button { + direction: var(--direction); + } - ha-icon-button { - direction: var(--direction); + .date-range-inputs { + display: flex; + align-items: center; + gap: 8px; + } + + .date-range-ranges { + border-right: 1px solid var(--divider-color); + } + + .date-range-footer { + display: flex; + justify-content: flex-end; + padding: 8px; + border-top: 1px solid var(--divider-color); + } + + ha-textarea { + display: inline-block; + width: 340px; + } + @media only screen and (max-width: 460px) { + ha-textarea { + width: 100%; } - - .date-range-inputs { - display: flex; - align-items: center; - gap: 8px; - } - + } + @media only screen and (max-width: 800px) { .date-range-ranges { - border-right: 1px solid var(--divider-color); + 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; } - .date-range-footer { - display: flex; - justify-content: flex-end; - padding: 8px; - border-top: 1px solid var(--divider-color); + :host([header-position]) .date-range-ranges { + max-height: calc(90vh - 430px); } - - ha-textarea { - display: inline-block; - width: 340px; - } - @media only screen and (max-width: 460px) { - ha-textarea { - width: 100% - } - - @media only screen and (max-width: 800px) { - .date-range-ranges { - border-right: none; - border-bottom: 1px solid var(--divider-color); - } - } - `; + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index 86add3acdd..5aacb90a6d 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/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 > diff --git a/src/translations/en.json b/src/translations/en.json index 311c040cc8..e9e9e9a55c 100644 --- a/src/translations/en.json +++ b/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": {