jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 20:26:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disable chart animations if prefers-reduced-motion is enabled

Browse Source
This commit is contained in:
Petar Petrov 2025-01-17 18:54:40 +02:00
parent 8efaf2b031
commit 196df65980
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,7 @@ import type { HomeAssistant } from "../../types";
import { debounce } from "../../common/util/debounce";
import { isMac } from "../../util/is_mac";
import "../ha-icon-button";
import { listenMediaQuery } from "../../common/dom/media_query";
export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
@ -74,10 +75,17 @@ export class HaChartBase extends LitElement {
private _datasetOrder: number[] = [];
private _reducedMotion = false;
private _listeners: (() => void)[] = [];
public disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener("scroll", this._handleScroll, true);
this._releaseCanvas();
while (this._listeners.length) {
this._listeners.pop()!();
}
}
public connectedCallback() {
@ -87,6 +95,12 @@ export class HaChartBase extends LitElement {
this._releaseCanvas();
this._setupChart();
}
this._listeners.push(
listenMediaQuery("(prefers-reduced-motion)", (matches) => {
this._reducedMotion = matches;
})
);
}
public updateChart = (mode?: UpdateMode): void => {
@ -355,9 +369,11 @@ export class HaChartBase extends LitElement {
const modifierKey = isMac ? "meta" : "ctrl";
return {
maintainAspectRatio: false,
animation: {
duration: 500,
},
animation: this._reducedMotion
? false
: {
duration: 500,
},
...this.options,
plugins: {
...this.options?.plugins,