From e258fe988c5d1c7b2d0b42309b424e51714acd70 Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 20 Dec 2024 13:21:41 +0000 Subject: [PATCH 1/3] add Last 24h, 30d, 1y and overflow --- src/components/ha-date-range-picker.ts | 40 +++++++++++--------------- src/translations/en.json | 6 ++-- 2 files changed, 21 insertions(+), 25 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 0a7a8eeefaa8..5204f942a0f4 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -4,11 +4,12 @@ import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiCalendar } from "@mdi/js"; import { - addDays, + subHours, endOfDay, endOfMonth, endOfWeek, endOfYear, + subYears, startOfDay, startOfMonth, startOfWeek, @@ -112,28 +113,8 @@ export class HaDateRangePicker extends LitElement { weekStartsOn, }), ], - [this.hass.localize( - "ui.components.date-range-picker.ranges.yesterday" - )]: [ - calcDate( - addDays(today, -1), - startOfDay, - this.hass.locale, - this.hass.config, - { - weekStartsOn, - } - ), - calcDate( - addDays(today, -1), - endOfDay, - this.hass.locale, - this.hass.config, - { - weekStartsOn, - } - ), - ], + [this.hass.localize("ui.components.date-range-picker.ranges.now-24h")]: + [subHours(today, 24), today], [this.hass.localize( "ui.components.date-range-picker.ranges.this_week" )]: [weekStart, weekEnd], @@ -161,6 +142,9 @@ export class HaDateRangePicker extends LitElement { } ), ], + [this.hass.localize( + "ui.components.date-range-picker.ranges.now-30d" + )]: [subHours(today, 24 * 30), today], [this.hass.localize( "ui.components.date-range-picker.ranges.this_year" )]: [ @@ -177,6 +161,9 @@ export class HaDateRangePicker extends LitElement { weekStartsOn, }), ], + [this.hass.localize( + "ui.components.date-range-picker.ranges.now-1y" + )]: [subYears(today, 1), today], } : {}), }; @@ -399,6 +386,13 @@ export class HaDateRangePicker extends LitElement { border-bottom: 1px solid var(--divider-color); } } + + @media only screen and (max-height: 900px) and (max-width: 800px) { + .date-range-ranges { + overflow: scroll; + max-height: 270px; + } + } `; } } diff --git a/src/translations/en.json b/src/translations/en.json index 3c837c68ca29..898f7dc06419 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -802,11 +802,13 @@ "select_date_range": "Select time period", "ranges": { "today": "Today", - "yesterday": "Yesterday", + "now-24h": "Last 24 hours", "this_week": "This week", "this_quarter": "This quarter", "this_month": "This month", - "this_year": "This year" + "now-30d": "Last 30 days", + "this_year": "This year", + "now-1y": "Last 1 year" } }, "grid-size-picker": { From 0e67e8faef33dfeacc90c44155da53f346803627 Mon Sep 17 00:00:00 2001 From: boern99 Date: Fri, 20 Dec 2024 14:36:03 +0000 Subject: [PATCH 2/3] added Energy-Dashboard --- src/components/ha-date-range-picker.ts | 6 +++--- .../lovelace/components/hui-energy-period-selector.ts | 7 +++++++ src/translations/en.json | 3 ++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 5204f942a0f4..d0f88a218a80 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -9,7 +9,7 @@ import { endOfMonth, endOfWeek, endOfYear, - subYears, + subDays, startOfDay, startOfMonth, startOfWeek, @@ -162,8 +162,8 @@ export class HaDateRangePicker extends LitElement { }), ], [this.hass.localize( - "ui.components.date-range-picker.ranges.now-1y" - )]: [subYears(today, 1), today], + "ui.components.date-range-picker.ranges.now-365d" + )]: [subDays(today, 365), today], } : {}), }; diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index d7419f7db888..3b4f43b31b83 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, + subHours, } from "date-fns"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues } from "lit"; @@ -129,6 +130,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { weekStartsOn, }), ], + [this.hass.localize("ui.components.date-range-picker.ranges.now-24h")]: + [subHours(today, 24), today], [this.hass.localize( "ui.components.date-range-picker.ranges.yesterday" )]: [ @@ -173,12 +176,16 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { calcDate(today, startOfQuarter, this.hass.locale, this.hass.config), calcDate(today, endOfQuarter, this.hass.locale, this.hass.config), ], + [this.hass.localize("ui.components.date-range-picker.ranges.now-30d")]: + [subHours(today, 24 * 30), today], [this.hass.localize( "ui.components.date-range-picker.ranges.this_year" )]: [ 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-365d")]: + [subDays(today, 365), today], }; } } diff --git a/src/translations/en.json b/src/translations/en.json index 898f7dc06419..4ee18772dbb4 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -802,13 +802,14 @@ "select_date_range": "Select time period", "ranges": { "today": "Today", + "yesterday": "Yesterday", "now-24h": "Last 24 hours", "this_week": "This week", "this_quarter": "This quarter", "this_month": "This month", "now-30d": "Last 30 days", "this_year": "This year", - "now-1y": "Last 1 year" + "now-365d": "Last 365 days" } }, "grid-size-picker": { From fd8557c84f81771e8946f3bffb176b1f95139195 Mon Sep 17 00:00:00 2001 From: boern99 Date: Sun, 22 Dec 2024 10:57:22 +0000 Subject: [PATCH 3/3] mobile style css --- src/components/ha-date-range-picker.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index d0f88a218a80..d058e8685e4d 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -349,7 +349,6 @@ export class HaDateRangePicker extends LitElement { static get styles(): CSSResultGroup { return css` - ha-icon-button { direction: var(--direction); } @@ -376,10 +375,10 @@ export class HaDateRangePicker extends LitElement { width: 340px; } @media only screen and (max-width: 460px) { - ha-textarea { - width: 100% + ha-textarea { + width: 100%; + } } - @media only screen and (max-width: 800px) { .date-range-ranges { border-right: none; @@ -387,10 +386,10 @@ export class HaDateRangePicker extends LitElement { } } - @media only screen and (max-height: 900px) and (max-width: 800px) { + @media only screen and (max-height: 920px) and (max-width: 800px) { .date-range-ranges { overflow: scroll; - max-height: 270px; + max-height: calc(70vh - 350px); } } `;