diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts index 57cb9dcf6d..b24df99a32 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts @@ -1,7 +1,14 @@ import { mdiInformation } from "@mdi/js"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import { round } from "../../../../common/number/round"; @@ -20,6 +27,7 @@ import { createEntityNotFoundWarning } from "../../components/hui-warning"; import type { LovelaceCard } from "../../types"; import { severityMap } from "../hui-gauge-card"; import type { EnergyCarbonGaugeCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; const FORMAT_OPTIONS = { maximumFractionDigits: 0, @@ -56,6 +64,17 @@ class HuiEnergyCarbonGaugeCard ]; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") || + (!!this._data?.co2SignalEntity && + this.hass.states[this._data.co2SignalEntity] !== + changedProps.get("hass").states[this._data.co2SignalEntity]) + ); + } + protected render() { if (!this._config || !this.hass) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts index 4c545668fe..f1357e713a 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts @@ -1,6 +1,13 @@ import { differenceInDays, endOfDay } from "date-fns"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatDate } from "../../../../common/datetime/format_date"; import { EnergyData, getEnergyDataCollection } from "../../../../data/energy"; @@ -8,6 +15,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyCardBaseConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-compare-card") export class HuiEnergyCompareCard @@ -46,6 +54,14 @@ export class HuiEnergyCompareCard ]; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this._startCompare || !this._endCompare) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts index 07bffd8b3b..3500d73a17 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts @@ -1,9 +1,17 @@ -import { html, LitElement, nothing, css, CSSResultGroup } from "lit"; +import { + html, + LitElement, + nothing, + css, + CSSResultGroup, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { HomeAssistant } from "../../../../types"; import "../../components/hui-energy-period-selector"; import { LovelaceCard } from "../../types"; import { EnergyCardBaseConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-date-selection-card") export class HuiEnergyDateSelectionCard @@ -22,6 +30,14 @@ export class HuiEnergyDateSelectionCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this.hass || !this._config) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts index a06032701b..64a6b5eb84 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts @@ -8,7 +8,14 @@ import { import { getRelativePosition } from "chart.js/helpers"; import { differenceInDays } from "date-fns/esm"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; @@ -34,6 +41,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyDevicesGraphCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-devices-graph-card") export class HuiEnergyDevicesGraphCard @@ -71,6 +79,14 @@ export class HuiEnergyDevicesGraphCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this.hass || !this._config) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts index 6fe0e0ba56..3a75287d23 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts @@ -13,7 +13,7 @@ import { mdiWater, } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, html, LitElement, svg, nothing } from "lit"; +import { css, html, LitElement, svg, nothing, PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { formatNumber } from "../../../../common/number/format_number"; @@ -31,6 +31,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyDistributionCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; const CIRCLE_CIRCUMFERENCE = 238.76104; @@ -65,6 +66,17 @@ class HuiEnergyDistrubutionCard return 3; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") || + (!!this._data?.co2SignalEntity && + this.hass.states[this._data.co2SignalEntity] !== + changedProps.get("hass").states[this._data.co2SignalEntity]) + ); + } + protected render() { if (!this._config) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index b6a2dc1c5c..1ae6d1f730 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts @@ -13,7 +13,14 @@ import { startOfToday, } from "date-fns"; import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; @@ -48,6 +55,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyGasGraphCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-gas-graph-card") export class HuiEnergyGasGraphCard @@ -90,6 +98,14 @@ export class HuiEnergyGasGraphCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this.hass || !this._config) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts index 6d49817e5d..1acb16fef7 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts @@ -1,7 +1,14 @@ import { mdiInformation } from "@mdi/js"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatNumber } from "../../../../common/number/format_number"; import "../../../../components/ha-card"; @@ -18,6 +25,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import type { HomeAssistant } from "../../../../types"; import type { LovelaceCard } from "../../types"; import type { EnergyGridGaugeCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; const LEVELS: LevelDefinition[] = [ { level: -1, stroke: "var(--energy-grid-consumption-color)" }, @@ -55,6 +63,14 @@ class HuiEnergyGridGaugeCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this._config || !this.hass) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts index 7ac4a11622..1f87f7167f 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts @@ -1,7 +1,14 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiInformation } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import "../../../../components/ha-card"; @@ -18,6 +25,7 @@ import type { HomeAssistant } from "../../../../types"; import type { LovelaceCard } from "../../types"; import { severityMap } from "../hui-gauge-card"; import type { EnergySelfSufficiencyGaugeCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; const FORMAT_OPTIONS = { maximumFractionDigits: 0, @@ -54,6 +62,14 @@ class HuiEnergySelfSufficiencyGaugeCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this._config || !this.hass) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts index 6f136b9a21..fb70fbcca4 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts @@ -1,7 +1,14 @@ import { mdiInformation } from "@mdi/js"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import "../../../../components/ha-card"; @@ -18,6 +25,7 @@ import type { HomeAssistant } from "../../../../types"; import type { LovelaceCard } from "../../types"; import { severityMap } from "../hui-gauge-card"; import type { EnergySolarGaugeCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; const FORMAT_OPTIONS = { maximumFractionDigits: 0, @@ -54,6 +62,14 @@ class HuiEnergySolarGaugeCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this._config || !this.hass) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 3f9956bfab..78916e4e33 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts @@ -13,7 +13,14 @@ import { startOfToday, } from "date-fns/esm"; import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; @@ -49,6 +56,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergySolarGraphCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-solar-graph-card") export class HuiEnergySolarGraphCard @@ -89,6 +97,14 @@ export class HuiEnergySolarGraphCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this.hass || !this._config) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts index 489dbfc4f8..2be70f203b 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts @@ -1,7 +1,15 @@ // @ts-ignore import dataTableStyles from "@material/data-table/dist/mdc.data-table.min.css"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, unsafeCSS, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + unsafeCSS, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import { @@ -28,6 +36,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergySourcesTableCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-sources-table-card") export class HuiEnergySourcesTableCard @@ -60,6 +69,14 @@ export class HuiEnergySourcesTableCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + private _getColor( computedStyles: CSSStyleDeclaration, propertyName: string, diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts index f904d837fa..402798d747 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts @@ -13,7 +13,14 @@ import { startOfToday, } from "date-fns/esm"; import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; @@ -43,6 +50,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyUsageGraphCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; interface ColorSet { base: string; @@ -88,6 +96,14 @@ export class HuiEnergyUsageGraphCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this.hass || !this._config) { return nothing; diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts index 546f8cf3bd..15942779f9 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts @@ -13,7 +13,14 @@ import { startOfToday, } from "date-fns"; import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; @@ -48,6 +55,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyWaterGraphCardConfig } from "../types"; +import { hasConfigChanged } from "../../common/has-changed"; @customElement("hui-energy-water-graph-card") export class HuiEnergyWaterGraphCard @@ -90,6 +98,14 @@ export class HuiEnergyWaterGraphCard this._config = config; } + protected shouldUpdate(changedProps: PropertyValues): boolean { + return ( + hasConfigChanged(this, changedProps) || + changedProps.size > 1 || + !changedProps.has("hass") + ); + } + protected render() { if (!this.hass || !this._config) { return nothing;