20250109.1 (#23858)

This commit is contained in:
Paul Bottein 2025-01-23 14:26:04 +01:00 committed by GitHub
commit fd4c62a852
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 129 additions and 243 deletions

View File

@ -7,7 +7,6 @@
<%= renderTemplate("../../../src/html/_style_base.html.template") %>
<style>
body {
background-color: white;
font-size: initial;
}
</style>

View File

@ -59,7 +59,8 @@ class HcLovelace extends LitElement {
return html`
<hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
<hui-view-background .background=${background}> </hui-view-background>
<hui-view-background .hass=${this.hass} .background=${background}>
</hui-view-background>
<hui-view
.hass=${this.hass}
.lovelace=${lovelace}

View File

@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
[project]
name = "home-assistant-frontend"
version = "20250109.0"
version = "20250109.1"
license = {text = "Apache-2.0"}
description = "The Home Assistant frontend"
readme = "README.md"

View File

@ -4,6 +4,7 @@ import type {
ChartData,
ChartOptions,
TooltipModel,
UpdateMode,
} from "chart.js";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, nothing, LitElement } from "lit";
@ -20,12 +21,6 @@ import "../ha-icon-button";
export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
export interface ChartResizeOptions {
aspectRatio?: number;
height?: number;
width?: number;
}
interface Tooltip
extends Omit<TooltipModel<any>, "tooltipPosition" | "hasValue" | "getProps"> {
top: string;
@ -61,8 +56,6 @@ export class HaChartBase extends LitElement {
@property({ attribute: "external-hidden", type: Boolean })
public externalHidden = false;
@state() private _chartHeight?: number;
@state() private _legendHeight?: number;
@state() private _tooltip?: Tooltip;
@ -96,36 +89,10 @@ export class HaChartBase extends LitElement {
}
}
public updateChart = (
mode:
| "resize"
| "reset"
| "none"
| "hide"
| "show"
| "default"
| "active"
| undefined
): void => {
public updateChart = (mode?: UpdateMode): void => {
this.chart?.update(mode);
};
public resize = (options?: ChartResizeOptions): void => {
if (options?.aspectRatio && !options.height) {
options.height = Math.round(
(options.width ?? this.clientWidth) / options.aspectRatio
);
} else if (options?.aspectRatio && !options.width) {
options.width = Math.round(
(options.height ?? this.clientHeight) * options.aspectRatio
);
}
this.chart?.resize(
options?.width ?? this.clientWidth,
options?.height ?? this.clientHeight
);
};
protected firstUpdated() {
this._setupChart();
this.data.datasets.forEach((dataset, index) => {
@ -267,96 +234,84 @@ export class HaChartBase extends LitElement {
</div>`
: ""}
<div
class="animation-container"
class="chart-container"
style=${styleMap({
height: `${this.height || this._chartHeight || 0}px`,
overflow: this._chartHeight ? "initial" : "hidden",
height: `${this.height ?? this._getDefaultHeight()}px`,
"padding-left": `${this._paddingYAxisInternal}px`,
"padding-right": 0,
"padding-inline-start": `${this._paddingYAxisInternal}px`,
"padding-inline-end": 0,
})}
@wheel=${this._handleChartScroll}
>
<div
class="chart-container"
style=${styleMap({
height: `${
this.height ?? this._chartHeight ?? this.clientWidth / 2
}px`,
"padding-left": `${this._paddingYAxisInternal}px`,
"padding-right": 0,
"padding-inline-start": `${this._paddingYAxisInternal}px`,
"padding-inline-end": 0,
<canvas
class=${classMap({
"not-zoomed": !this._isZoomed,
})}
@wheel=${this._handleChartScroll}
></canvas>
<div
class="zoom-hint ${classMap({
visible: this._showZoomHint,
})}"
>
<canvas
class=${classMap({
"not-zoomed": !this._isZoomed,
})}
></canvas>
<div
class="zoom-hint ${classMap({
visible: this._showZoomHint,
})}"
>
<div>
${isMac
? this.hass.localize(
"ui.components.history_charts.zoom_hint_mac"
)
: this.hass.localize("ui.components.history_charts.zoom_hint")}
</div>
<div>
${isMac
? this.hass.localize("ui.components.history_charts.zoom_hint_mac")
: this.hass.localize("ui.components.history_charts.zoom_hint")}
</div>
${this._isZoomed && this.chartType !== "timeline"
? html`<ha-icon-button
class="zoom-reset"
.path=${mdiRestart}
@click=${this._handleZoomReset}
title=${this.hass.localize(
"ui.components.history_charts.zoom_reset"
)}
></ha-icon-button>`
: nothing}
${this._tooltip
? html`<div
class="chart-tooltip ${classMap({
[this._tooltip.yAlign]: true,
})}"
style=${styleMap({
top: this._tooltip.top,
left: this._tooltip.left,
})}
>
<div class="title">${this._tooltip.title}</div>
${this._tooltip.beforeBody
? html`<div class="before-body">
${this._tooltip.beforeBody}
</div>`
: ""}
<div>
<ul>
${this._tooltip.body.map(
(item, i) =>
html`<li>
<div
class="bullet"
style=${styleMap({
backgroundColor: this._tooltip!.labelColors[i]
.backgroundColor as string,
borderColor: this._tooltip!.labelColors[i]
.borderColor as string,
})}
></div>
${item.lines.join("\n")}
</li>`
)}
</ul>
</div>
${this._tooltip.footer.length
? html`<div class="footer">
${this._tooltip.footer.map((item) => html`${item}<br />`)}
</div>`
: ""}
</div>`
: ""}
</div>
${this._isZoomed && this.chartType !== "timeline"
? html`<ha-icon-button
class="zoom-reset"
.path=${mdiRestart}
@click=${this._handleZoomReset}
title=${this.hass.localize(
"ui.components.history_charts.zoom_reset"
)}
></ha-icon-button>`
: nothing}
${this._tooltip
? html`<div
class="chart-tooltip ${classMap({
[this._tooltip.yAlign]: true,
})}"
style=${styleMap({
top: this._tooltip.top,
left: this._tooltip.left,
})}
>
<div class="title">${this._tooltip.title}</div>
${this._tooltip.beforeBody
? html`<div class="before-body">
${this._tooltip.beforeBody}
</div>`
: ""}
<div>
<ul>
${this._tooltip.body.map(
(item, i) =>
html`<li>
<div
class="bullet"
style=${styleMap({
backgroundColor: this._tooltip!.labelColors[i]
.backgroundColor as string,
borderColor: this._tooltip!.labelColors[i]
.borderColor as string,
})}
></div>
${item.lines.join("\n")}
</li>`
)}
</ul>
</div>
${this._tooltip.footer.length
? html`<div class="footer">
${this._tooltip.footer.map((item) => html`${item}<br />`)}
</div>`
: ""}
</div>`
: ""}
</div>
`;
}
@ -471,11 +426,11 @@ export class HaChartBase extends LitElement {
...(this.plugins || []),
{
id: "resizeHook",
resize: (chart) => {
const change = chart.height - (this._chartHeight ?? 0);
if (!this._chartHeight || change > 12 || change < -12) {
// hysteresis to prevent infinite render loops
this._chartHeight = chart.height;
resize: (chart: Chart) => {
if (!this.height) {
// lock the height
// this removes empty space below the chart
this.height = chart.height;
}
},
legend: {
@ -486,6 +441,10 @@ export class HaChartBase extends LitElement {
];
}
private _getDefaultHeight() {
return this.clientWidth / 2;
}
private _handleChartScroll(ev: MouseEvent) {
const modifier = isMac ? "metaKey" : "ctrlKey";
this._tooltip = undefined;
@ -573,11 +532,6 @@ export class HaChartBase extends LitElement {
display: block;
position: relative;
}
.animation-container {
overflow: hidden;
height: 0;
transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chart-container {
position: relative;
}

View File

@ -1,7 +1,7 @@
import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
import type { PropertyValues } from "lit";
import { html, LitElement } from "lit";
import { property, query, state } from "lit/decorators";
import { property, state } from "lit/decorators";
import { getGraphColorByIndex } from "../../common/color/colors";
import { fireEvent } from "../../common/dom/fire_event";
import { computeRTL } from "../../common/util/compute_rtl";
@ -12,7 +12,6 @@ import {
} from "../../common/number/format_number";
import type { LineChartEntity, LineChartState } from "../../data/history";
import type { HomeAssistant } from "../../types";
import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
import { clickIsTouch } from "./click_is_touch";
@ -67,12 +66,6 @@ export class StateHistoryChartLine extends LitElement {
private _chartTime: Date = new Date();
@query("ha-chart-base") private _chart?: HaChartBase;
public resize = (options?: ChartResizeOptions): void => {
this._chart?.resize(options);
};
protected render() {
return html`
<ha-chart-base

View File

@ -2,7 +2,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
import { getRelativePosition } from "chart.js/helpers";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
import { fireEvent } from "../../common/dom/fire_event";
@ -10,7 +10,6 @@ import { numberFormatToLocale } from "../../common/number/format_number";
import { computeRTL } from "../../common/util/compute_rtl";
import type { TimelineEntity } from "../../data/history";
import type { HomeAssistant } from "../../types";
import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
import type { TimeLineData } from "./timeline-chart/const";
import { computeTimelineColor } from "./timeline-chart/timeline-color";
@ -53,12 +52,6 @@ export class StateHistoryChartTimeline extends LitElement {
private _chartTime: Date = new Date();
@query("ha-chart-base") private _chart?: HaChartBase;
public resize = (options?: ChartResizeOptions): void => {
this._chart?.resize(options);
};
protected render() {
return html`
<ha-chart-base

View File

@ -1,12 +1,6 @@
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import {
customElement,
eventOptions,
property,
queryAll,
state,
} from "lit/decorators";
import { customElement, eventOptions, property, state } from "lit/decorators";
import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { restoreScroll } from "../../common/decorators/restore-scroll";
@ -19,9 +13,6 @@ import { loadVirtualizer } from "../../resources/virtualizer";
import type { HomeAssistant } from "../../types";
import "./state-history-chart-line";
import "./state-history-chart-timeline";
import type { StateHistoryChartLine } from "./state-history-chart-line";
import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
import type { ChartResizeOptions } from "./ha-chart-base";
const CANVAS_TIMELINE_ROWS_CHUNK = 10; // Split up the canvases to avoid hitting the render limit
@ -91,16 +82,6 @@ export class StateHistoryCharts extends LitElement {
// @ts-ignore
@restoreScroll(".container") private _savedScrollPos?: number;
@queryAll("state-history-chart-line")
private _charts?: StateHistoryChartLine[];
public resize = (options?: ChartResizeOptions): void => {
this._charts?.forEach(
(chart: StateHistoryChartLine | StateHistoryChartTimeline) =>
chart.resize(options)
);
};
protected render() {
if (!isComponentLoaded(this.hass, "history")) {
return html`<div class="info">

View File

@ -6,7 +6,7 @@ import type {
} from "chart.js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { getGraphColorByIndex } from "../../common/color/colors";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
@ -30,11 +30,7 @@ import {
} from "../../data/recorder";
import type { HomeAssistant } from "../../types";
import "./ha-chart-base";
import type {
ChartResizeOptions,
ChartDatasetExtra,
HaChartBase,
} from "./ha-chart-base";
import type { ChartDatasetExtra } from "./ha-chart-base";
import { clickIsTouch } from "./click_is_touch";
export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
@ -98,14 +94,8 @@ export class StatisticsChart extends LitElement {
@state() private _hiddenStats = new Set<string>();
@query("ha-chart-base") private _chart?: HaChartBase;
private _computedStyle?: CSSStyleDeclaration;
public resize = (options?: ChartResizeOptions): void => {
this._chart?.resize(options);
};
protected shouldUpdate(changedProps: PropertyValues): boolean {
return changedProps.size > 1 || !changedProps.has("hass");
}

View File

@ -27,7 +27,14 @@ class DialogBox extends LitElement {
@query("ha-md-dialog") private _dialog?: HaMdDialog;
private _closePromise?: Promise<void>;
private _closeResolve?: () => void;
public async showDialog(params: DialogBoxParams): Promise<void> {
if (this._closePromise) {
await this._closePromise;
}
this._params = params;
}
@ -132,21 +139,24 @@ class DialogBox extends LitElement {
private _dismiss(): void {
this._closeState = "canceled";
this._closeDialog();
this._cancel();
this._closeDialog();
}
private _confirm(): void {
this._closeState = "confirmed";
this._closeDialog();
if (this._params!.confirm) {
this._params!.confirm(this._textField?.value);
}
this._closeDialog();
}
private _closeDialog() {
fireEvent(this, "dialog-closed", { dialog: this.localName });
this._dialog?.close();
this._closePromise = new Promise((resolve) => {
this._closeResolve = resolve;
});
}
private _dialogClosed() {
@ -156,6 +166,8 @@ class DialogBox extends LitElement {
}
this._closeState = undefined;
this._params = undefined;
this._closeResolve?.();
this._closeResolve = undefined;
}
static get styles(): CSSResultGroup {

View File

@ -104,6 +104,12 @@ export const showDialog = async (
addHistory
);
}
const dialogIndex = OPEN_DIALOG_STACK.findIndex(
(state) => state.dialogTag === dialogTag
);
if (dialogIndex !== -1) {
OPEN_DIALOG_STACK.splice(dialogIndex, 1);
}
OPEN_DIALOG_STACK.push({
element,
root,
@ -173,8 +179,10 @@ export const closeLastDialog = async () => {
export const closeAllDialogs = async () => {
for (let i = OPEN_DIALOG_STACK.length - 1; i >= 0; i--) {
// eslint-disable-next-line no-await-in-loop
const closed = await closeDialog(OPEN_DIALOG_STACK[i].dialogTag);
const closed =
!OPEN_DIALOG_STACK[i] ||
// eslint-disable-next-line no-await-in-loop
(await closeDialog(OPEN_DIALOG_STACK[i].dialogTag));
if (!closed) {
return false;
}

View File

@ -12,7 +12,7 @@ import {
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache";
import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
@ -47,9 +47,7 @@ import {
} from "./const";
import "./controls/more-info-default";
import "./ha-more-info-history-and-logbook";
import type { MoreInfoHistoryAndLogbook } from "./ha-more-info-history-and-logbook";
import "./ha-more-info-info";
import type { MoreInfoInfo } from "./ha-more-info-info";
import "./ha-more-info-settings";
import "./more-info-content";
@ -98,9 +96,6 @@ export class MoreInfoDialog extends LitElement {
@state() private _infoEditMode = false;
@query("ha-more-info-info, ha-more-info-history-and-logbook")
private _history?: MoreInfoInfo | MoreInfoHistoryAndLogbook;
public showDialog(params: MoreInfoDialogParams) {
this._entityId = params.entityId;
if (!this._entityId) {
@ -283,7 +278,6 @@ export class MoreInfoDialog extends LitElement {
<ha-dialog
open
@closed=${this.closeDialog}
@opened=${this._handleOpened}
.heading=${title}
hideActions
flexContent
@ -533,10 +527,6 @@ export class MoreInfoDialog extends LitElement {
this.large = !this.large;
}
private _handleOpened() {
this._history?.resize({ aspectRatio: 2 });
}
static get styles() {
return [
haStyleDialog,

View File

@ -1,14 +1,12 @@
import type { CSSResultGroup } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import {
computeShowHistoryComponent,
computeShowLogBookComponent,
} from "./const";
import "./ha-more-info-history";
import type { MoreInfoHistory } from "./ha-more-info-history";
import "./ha-more-info-logbook";
@customElement("ha-more-info-history-and-logbook")
@ -17,13 +15,6 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
@property({ attribute: false }) public entityId!: string;
@query("ha-more-info-history")
private _history?: MoreInfoHistory;
public resize(options?: ChartResizeOptions) {
this._history?.resize(options);
}
protected render() {
return html`
${computeShowHistoryComponent(this.hass, this.entityId)

View File

@ -1,15 +1,12 @@
import { startOfYesterday, subHours } from "date-fns";
import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { computeDomain } from "../../common/entity/compute_domain";
import { createSearchParam } from "../../common/url/search-params";
import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
import "../../components/chart/state-history-charts";
import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
import "../../components/chart/statistics-chart";
import type { StatisticsChart } from "../../components/chart/statistics-chart";
import type { HistoryResult } from "../../data/history";
import {
computeHistory,
@ -54,16 +51,6 @@ export class MoreInfoHistory extends LitElement {
private _metadata?: Record<string, StatisticsMetaData>;
@query("statistics-chart, state-history-charts") private _chart?:
| StateHistoryCharts
| StatisticsChart;
public resize = (options?: ChartResizeOptions): void => {
if (this._chart) {
this._chart.resize(options);
}
};
protected render() {
if (!this.entityId) {
return nothing;

View File

@ -1,8 +1,7 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query } from "lit/decorators";
import { customElement, property } from "lit/decorators";
import { computeDomain } from "../../common/entity/compute_domain";
import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
import type { ExtEntityRegistryEntry } from "../../data/entity_registry";
import type { HomeAssistant } from "../../types";
import {
@ -14,7 +13,6 @@ import {
DOMAINS_WITH_MORE_INFO,
} from "./const";
import "./ha-more-info-history";
import type { MoreInfoHistory } from "./ha-more-info-history";
import "./ha-more-info-logbook";
import "./more-info-content";
@ -28,13 +26,6 @@ export class MoreInfoInfo extends LitElement {
@property({ attribute: false }) public editMode?: boolean;
@query("ha-more-info-history")
private _history?: MoreInfoHistory;
public resize(options?: ChartResizeOptions) {
this._history?.resize(options);
}
protected render() {
const entityId = this.entityId;
const stateObj = this.hass.states[entityId] as HassEntity | undefined;

View File

@ -209,7 +209,7 @@ class HaBackupConfigData extends LitElement {
</span>
<span slot="supporting-text">
${this.hass.localize(
"ui.panel.config.backup.data.history_description"
"ui.panel.config.backup.data.media_description"
)}
</span>
<ha-switch

View File

@ -86,12 +86,6 @@ export class HaBackupDataPicker extends LitElement {
version: data.homeassistant_version,
});
}
if (data.database_included) {
items.push({
label: "History",
id: "database",
});
}
items.push(
...data.folders.map<CheckBoxItem>((folder) => ({
label: this._localizeFolder(folder),
@ -145,9 +139,6 @@ export class HaBackupDataPicker extends LitElement {
if (value.homeassistant_included) {
homeassistant.push("config");
}
if (value.database_included) {
homeassistant.push("database");
}
const folders = value.folders;
homeassistant.push(...folders);
@ -164,7 +155,9 @@ export class HaBackupDataPicker extends LitElement {
(selectedItems: SelectedItems, data: BackupData): BackupData => ({
homeassistant_version: data.homeassistant_version,
homeassistant_included: selectedItems.homeassistant.includes("config"),
database_included: selectedItems.homeassistant.includes("database"),
database_included:
data.database_included &&
selectedItems.homeassistant.includes("config"),
addons: data.addons.filter((addon) =>
selectedItems.addons.includes(addon.slug)
),

View File

@ -109,7 +109,9 @@ export class DialogUploadBackup
></ha-file-upload>
</div>
<div slot="actions">
<ha-button @click=${this.closeDialog}>Cancel</ha-button>
<ha-button @click=${this.closeDialog}
>${this.hass.localize("ui.common.cancel")}</ha-button
>
<ha-button @click=${this._upload} .disabled=${!this._formValid()}>
${this.hass.localize(
"ui.panel.config.backup.dialogs.upload.action"

View File

@ -474,7 +474,8 @@ class HUIRoot extends LitElement {
id="view"
@ll-rebuild=${this._debouncedConfigChanged}
>
<hui-view-background .background=${background}> </hui-view-background>
<hui-view-background .hass=${this.hass} .background=${background}>
</hui-view-background>
</hui-view-container>
</div>
`;

View File

@ -55,7 +55,7 @@ export class HUIViewBackground extends LitElement {
const alignment = background.alignment ?? "center";
const size = background.size ?? "cover";
const repeat = background.repeat ?? "no-repeat";
return `${alignment} / ${size} ${repeat} url('${background.image}')`;
return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(background.image)}')`;
}
if (typeof background === "string") {
return background;

View File

@ -2605,7 +2605,7 @@
"protected_not_encrypted": "Not encrypted"
},
"restore": {
"title": "Selected what to restore",
"title": "Select what to restore",
"action": "Restore"
},
"locations": {