jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add timespans to history and energy (#23362)

Browse Source 
* 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
This commit is contained in:
libe.net 2025-02-15 09:52:32 +01:00 committed by GitHub
parent b9acd40b0f
commit f53ac41eee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 168 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/ha-date-range-picker.ts
View File

@ -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 {

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

@ -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>

8
src/translations/en.json
View File

@ -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": {