Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Disable graph resize animation for general resizing (#27816)

Browse Source
This commit is contained in:
Petar Petrov
2025-11-07 09:34:42 +02:00
committed by Bram Kragten
parent 89796e425a
commit ab4c6f80f4
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/chart/ha-chart-base.ts
View File

@@ -35,7 +35,6 @@ export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
const LEGEND_OVERFLOW_LIMIT = 10; const LEGEND_OVERFLOW_LIMIT = 10;
const LEGEND_OVERFLOW_LIMIT_MOBILE = 6; const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
const DOUBLE_TAP_TIME = 300; const DOUBLE_TAP_TIME = 300;
const RESIZE_ANIMATION_DURATION = 250;
export type CustomLegendOption = ECOption["legend"] & { export type CustomLegendOption = ECOption["legend"] & {
type: "custom"; type: "custom";
@@ -91,6 +90,8 @@ export class HaChartBase extends LitElement {
private _shouldResizeChart = false; private _shouldResizeChart = false;
private _resizeAnimationDuration?: number;
// @ts-ignore // @ts-ignore
private _resizeController = new ResizeController(this, { private _resizeController = new ResizeController(this, {
callback: () => { callback: () => {
@@ -214,6 +215,7 @@ export class HaChartBase extends LitElement {
) { ) {
// custom legend changes may require a resize to layout properly // custom legend changes may require a resize to layout properly
this._shouldResizeChart = true; this._shouldResizeChart = true;
this._resizeAnimationDuration = 250;
} }
} else if (this._isTouchDevice && changedProps.has("_isZoomed")) { } else if (this._isTouchDevice && changedProps.has("_isZoomed")) {
chartOptions.dataZoom = this._getDataZoomConfig(); chartOptions.dataZoom = this._getDataZoomConfig();
@@ -977,11 +979,14 @@ export class HaChartBase extends LitElement {
private _handleChartRenderFinished = () => { private _handleChartRenderFinished = () => {
if (this._shouldResizeChart) { if (this._shouldResizeChart) {
this.chart?.resize({ this.chart?.resize({
animation: this._reducedMotion animation:
this._reducedMotion ||
typeof this._resizeAnimationDuration !== "number"
? undefined ? undefined
: { duration: RESIZE_ANIMATION_DURATION }, : { duration: this._resizeAnimationDuration },
}); });
this._shouldResizeChart = false; this._shouldResizeChart = false;
this._resizeAnimationDuration = undefined;
} }
}; };