Skip to content

Commit

Permalink
20250109.1 (#23858)
Browse files Browse the repository at this point in the history
  • Loading branch information
@piitaya
piitaya authored Jan 23, 2025
2 parents 3ffbd43 + bf1b0ac commit fd4c62a
Show file tree
Hide file tree
Showing 20 changed files with 129 additions and 243 deletions.
1 change: 0 additions & 1 deletion cast/src/html/receiver.html.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<%= renderTemplate("../../../src/html/_style_base.html.template") %>
<style>
body {
background-color: white;
font-size: initial;
}
</style>
Expand Down
3 changes: 2 additions & 1 deletion cast/src/receiver/layout/hc-lovelace.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
210 changes: 82 additions & 128 deletions src/components/chart/ha-chart-base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
`;
}
Expand Down Expand Up @@ -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: {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
9 changes: 1 addition & 8 deletions src/components/chart/state-history-chart-line.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -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
Expand Down
9 changes: 1 addition & 8 deletions src/components/chart/state-history-chart-timeline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ 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";
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";
Expand Down Expand Up @@ -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
Expand Down
Loading

0 comments on commit fd4c62a

Please sign in to comment.