From 2159a5419a003a82a35766bb520001527443f35d Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Sun, 1 Aug 2021 22:59:34 +0200 Subject: [PATCH] Fix device energy graph height (#9666) * Fix device energy graph height * Update state-history-chart-timeline.ts * Update hui-energy-devices-graph-card.ts --- src/components/chart/ha-chart-base.ts | 19 ++++---- .../chart/state-history-chart-timeline.ts | 11 ++++- src/data/energy.ts | 5 --- .../hui-energy-carbon-consumed-gauge-card.ts | 19 +++++--- .../energy/hui-energy-devices-graph-card.ts | 43 +++++++++++-------- 5 files changed, 57 insertions(+), 40 deletions(-) diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 2ff0550efa..36970c31a3 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -29,9 +29,11 @@ export default class HaChartBase extends LitElement { @property({ attribute: false }) public plugins?: any[]; - @state() private _tooltip?: Tooltip; + @property({ type: Number }) public height?: number; - @state() private _height?: string; + @state() private _chartHeight?: number; + + @state() private _tooltip?: Tooltip; @state() private _hiddenDatasets: Set = new Set(); @@ -96,11 +98,8 @@ export default class HaChartBase extends LitElement {
@@ -194,7 +193,7 @@ export default class HaChartBase extends LitElement { { id: "afterRenderHook", afterRender: (chart) => { - this._height = `${chart.height}px`; + this._chartHeight = chart.height; }, legend: { ...this.options?.plugins?.legend, @@ -255,8 +254,8 @@ export default class HaChartBase extends LitElement { height: 0; transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1); } - :host(:not([chart-type="timeline"])) canvas { - max-height: 400px; + canvas { + max-height: var(--chart-max-height, 400px); } .chartLegend { text-align: center; diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts index db81411b6a..500e90a342 100644 --- a/src/components/chart/state-history-chart-timeline.ts +++ b/src/components/chart/state-history-chart-timeline.ts @@ -1,6 +1,6 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js"; import { HassEntity } from "home-assistant-js-websocket"; -import { html, LitElement, PropertyValues } from "lit"; +import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators"; import { getColorByIndex } from "../../common/color/colors"; import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time"; @@ -99,6 +99,7 @@ export class StateHistoryChartTimeline extends LitElement { `; @@ -304,6 +305,14 @@ export class StateHistoryChartTimeline extends LitElement { datasets: datasets, }; } + + static get styles(): CSSResultGroup { + return css` + ha-chart-base { + --chart-max-height: none; + } + `; + } } declare global { diff --git a/src/data/energy.ts b/src/data/energy.ts index ac1ccb622a..e31a729105 100644 --- a/src/data/energy.ts +++ b/src/data/energy.ts @@ -219,7 +219,6 @@ export interface EnergyCollection extends Collection { prefs?: EnergyPreferences; clearPrefs(): void; setPeriod(newStart: Date, newEnd?: Date): void; - getDeviceStatIds(): string[]; } export const getEnergyDataCollection = ( @@ -261,9 +260,5 @@ export const getEnergyDataCollection = ( collection.start = newStart; collection.end = newEnd; }; - collection.getDeviceStatIds = () => - collection.state.prefs.device_consumption.map( - (device) => device.stat_consumption - ); return collection; }; 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 b1a7504fa3..3812e75059 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 @@ -79,6 +79,10 @@ class HuiEnergyCarbonGaugeCard let value: number | undefined; + if (totalGridConsumption === 0) { + value = 100; + } + if ( this._data.co2SignalEntity in this._data.stats && totalGridConsumption @@ -97,17 +101,18 @@ class HuiEnergyCarbonGaugeCard ? calculateStatisticsSumGrowth( this._data.stats, types.solar.map((source) => source.stat_energy_from) - ) - : undefined; + ) || 0 + : 0; - const totalGridReturned = calculateStatisticsSumGrowth( - this._data.stats, - types.grid![0].flow_to.map((flow) => flow.stat_energy_to) - ); + const totalGridReturned = + calculateStatisticsSumGrowth( + this._data.stats, + types.grid![0].flow_to.map((flow) => flow.stat_energy_to) + ) || 0; const totalEnergyConsumed = totalGridConsumption + - Math.max(0, (totalSolarProduction || 0) - (totalGridReturned || 0)); + Math.max(0, totalSolarProduction - totalGridReturned); value = round((1 - highCarbonEnergy / totalEnergyConsumed) * 100); } 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 bb7a1004b4..54217602ff 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 @@ -40,7 +40,7 @@ export class HuiEnergyDevicesGraphCard @state() private _data?: Statistics; - @state() private _chartData?: ChartData; + @state() private _chartData: ChartData = { datasets: [] }; public hassSubscribe(): UnsubscribeFunc[] { return [ @@ -73,13 +73,13 @@ export class HuiEnergyDevicesGraphCard "has-header": !!this._config.title, })}" > - ${this._chartData - ? html`` - : ""} +
`; @@ -90,8 +90,13 @@ export class HuiEnergyDevicesGraphCard parsing: false, animation: false, responsive: true, + maintainAspectRatio: false, indexAxis: "y", scales: { + y: { + type: "category", + ticks: { autoSkip: false }, + }, x: { title: { display: true, @@ -118,12 +123,13 @@ export class HuiEnergyDevicesGraphCard ); private async _getStatistics(energyData: EnergyData): Promise { - const energyCollection = getEnergyDataCollection(this.hass); this._data = await fetchStatistics( this.hass, - energyCollection.start, - energyCollection.end, - energyCollection.getDeviceStatIds() + energyData.start, + energyData.end, + energyData.prefs.device_consumption.map( + (device) => device.stat_consumption + ) ); const statisticsData = Object.values(this._data!); @@ -151,6 +157,7 @@ export class HuiEnergyDevicesGraphCard borderColor, backgroundColor, data, + barThickness: 20, }, ]; @@ -166,12 +173,14 @@ export class HuiEnergyDevicesGraphCard const value = device.stat_consumption in this._data - ? calculateStatisticSumGrowth(this._data[device.stat_consumption]) + ? calculateStatisticSumGrowth(this._data[device.stat_consumption]) || + 0 : 0; + data.push({ // @ts-expect-error y: label, - x: value || 0, + x: value, }); } @@ -184,9 +193,6 @@ export class HuiEnergyDevicesGraphCard static get styles(): CSSResultGroup { return css` - ha-card { - height: 100%; - } .card-header { padding-bottom: 0; } @@ -196,6 +202,9 @@ export class HuiEnergyDevicesGraphCard .has-header { padding-top: 0; } + ha-chart-base { + --chart-max-height: none; + } `; } }