FIx device graph not rendering right when changing period (#9806)

This commit is contained in:
Bram Kragten 2021-08-16 05:44:12 +02:00 committed by GitHub
parent 3a112531cc
commit 4a4465efb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 3 deletions

View File

@ -243,9 +243,19 @@ export default class HaChartBase extends LitElement {
}; };
} }
public updateChart = (): void => { public updateChart = (
mode:
| "resize"
| "reset"
| "none"
| "hide"
| "show"
| "normal"
| "active"
| undefined
): void => {
if (this.chart) { if (this.chart) {
this.chart.update(); this.chart.update(mode);
} }
}; };

View File

@ -8,7 +8,7 @@ import { getRelativePosition } from "chart.js/helpers";
import { addHours } from "date-fns"; import { addHours } from "date-fns";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { getColorByIndex } from "../../../../common/color/colors"; import { getColorByIndex } from "../../../../common/color/colors";
@ -19,6 +19,7 @@ import {
numberFormatToLocale, numberFormatToLocale,
} from "../../../../common/string/format_number"; } from "../../../../common/string/format_number";
import "../../../../components/chart/ha-chart-base"; import "../../../../components/chart/ha-chart-base";
import type HaChartBase from "../../../../components/chart/ha-chart-base";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import { EnergyData, getEnergyDataCollection } from "../../../../data/energy"; import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
import { import {
@ -45,6 +46,8 @@ export class HuiEnergyDevicesGraphCard
@state() private _chartData: ChartData = { datasets: [] }; @state() private _chartData: ChartData = { datasets: [] };
@query("ha-chart-base") private _chart?: HaChartBase;
public hassSubscribe(): UnsubscribeFunc[] { public hassSubscribe(): UnsubscribeFunc[] {
return [ return [
getEnergyDataCollection(this.hass, { getEnergyDataCollection(this.hass, {
@ -207,6 +210,8 @@ export class HuiEnergyDevicesGraphCard
this._chartData = { this._chartData = {
datasets, datasets,
}; };
await this.updateComplete;
this._chart?.updateChart("none");
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {