From 5ba24211e22ea7aa18bd9a83189ccc48da5483a5 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 3 Aug 2021 23:22:32 +0200 Subject: [PATCH] Add messages when no data (#9700) * Add messages when no data * 2 hours * comment --- src/panels/config/energy/ha-config-energy.ts | 8 +- src/panels/energy/ha-panel-energy.ts | 10 ++ .../energy/hui-energy-solar-graph-card.ts | 97 ++++++++++++------- .../energy/hui-energy-usage-graph-card.ts | 22 ++++- .../components/hui-energy-period-selector.ts | 10 +- 5 files changed, 100 insertions(+), 47 deletions(-) diff --git a/src/panels/config/energy/ha-config-energy.ts b/src/panels/config/energy/ha-config-energy.ts index a15a6c4179..fab928a23d 100644 --- a/src/panels/config/energy/ha-config-energy.ts +++ b/src/panels/config/energy/ha-config-energy.ts @@ -64,6 +64,12 @@ class HaConfigEnergy extends LitElement { .route=${this.route} .tabs=${configSections.experiences} > + +
+ After setting up a new device, it can take up to 2 hours for new + data to arrive in your energy dashboard. +
+
@@ -123,6 +132,7 @@ class PanelEnergy extends LitElement { hui-energy-period-selector { width: 100%; padding-left: 16px; + --disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5); } `, ]; 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 955988159e..875845f103 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 @@ -4,8 +4,13 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; import memoizeOne from "memoize-one"; import { classMap } from "lit/directives/class-map"; import "../../../../components/ha-card"; -import { ChartData, ChartDataset, ChartOptions } from "chart.js"; -import { endOfToday, startOfToday } from "date-fns"; +import { + ChartData, + ChartDataset, + ChartOptions, + ScatterDataPoint, +} from "chart.js"; +import { endOfToday, isToday, startOfToday } from "date-fns"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergySolarGraphCardConfig } from "../types"; @@ -28,8 +33,6 @@ import { } from "../../../../data/forecast_solar"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import "../../../../components/chart/ha-chart-base"; -import "../../../../components/ha-switch"; -import "../../../../components/ha-formfield"; import { formatNumber, numberFormatToLocale, @@ -50,8 +53,6 @@ export class HuiEnergySolarGraphCard datasets: [], }; - @state() private _forecasts?: Record; - @state() private _start = startOfToday(); @state() private _end = endOfToday(); @@ -96,6 +97,13 @@ export class HuiEnergySolarGraphCard )} chart-type="bar" > + ${!this._chartData.datasets.length + ? html`
+ ${isToday(this._start) + ? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard." + : "There is not data for this period."} +
` + : ""}
`; @@ -188,11 +196,12 @@ export class HuiEnergySolarGraphCard (source) => source.type === "solar" ) as SolarSourceTypeEnergyPreference[]; + let forecasts: Record; if ( isComponentLoaded(this.hass, "forecast_solar") && solarSources.some((source) => source.config_entry_solar_forecast) ) { - this._forecasts = await getForecastSolarForecasts(this.hass); + forecasts = await getForecastSolarForecasts(this.hass); } const statisticsData = Object.values(energyData.stats); @@ -225,18 +234,11 @@ export class HuiEnergySolarGraphCard ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))) : solarColor; - data.push({ - label: `Production ${ - entity ? computeStateName(entity) : source.stat_energy_from - }`, - borderColor, - backgroundColor: borderColor + "7F", - data: [], - }); - let prevValue: number | null = null; let prevStart: string | null = null; + const solarProductionData: ScatterDataPoint[] = []; + // Process solar production data. if (energyData.stats[source.stat_energy_from]) { for (const point of energyData.stats[source.stat_energy_from]) { @@ -252,7 +254,7 @@ export class HuiEnergySolarGraphCard } const value = point.sum - prevValue; const date = new Date(point.start); - data[0].data.push({ + solarProductionData.push({ x: date.getTime(), y: value, }); @@ -261,7 +263,16 @@ export class HuiEnergySolarGraphCard } } - const forecasts = this._forecasts; + if (solarProductionData.length) { + data.push({ + label: `Production ${ + entity ? computeStateName(entity) : source.stat_energy_from + }`, + borderColor, + backgroundColor: borderColor + "7F", + data: solarProductionData, + }); + } // Process solar forecast data. if (forecasts && source.config_entry_solar_forecast) { @@ -286,22 +297,7 @@ export class HuiEnergySolarGraphCard }); if (forecastsData) { - const forecast: ChartDataset<"line"> = { - type: "line", - label: `Forecast ${ - entity ? computeStateName(entity) : source.stat_energy_from - }`, - fill: false, - stepped: false, - borderColor: computedStyles.getPropertyValue( - "--primary-text-color" - ), - borderDash: [7, 5], - pointRadius: 0, - data: [], - }; - data.push(forecast); - + const solarForecastData: ScatterDataPoint[] = []; for (const [date, value] of Object.entries(forecastsData)) { const dateObj = new Date(date); if ( @@ -310,11 +306,28 @@ export class HuiEnergySolarGraphCard ) { continue; } - forecast.data.push({ + solarForecastData.push({ x: dateObj.getTime(), y: value / 1000, }); } + + if (solarForecastData.length) { + data.push({ + type: "line", + label: `Forecast ${ + entity ? computeStateName(entity) : source.stat_energy_from + }`, + fill: false, + stepped: false, + borderColor: computedStyles.getPropertyValue( + "--primary-text-color" + ), + borderDash: [7, 5], + pointRadius: 0, + data: solarForecastData, + }); + } } } @@ -344,8 +357,18 @@ export class HuiEnergySolarGraphCard .has-header { padding-top: 0; } - ha-formfield { - margin-bottom: 16px; + .no-data { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 20%; + margin-left: 32px; + box-sizing: border-box; } `; } 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 a87bfdc526..7452d36d2d 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 @@ -1,5 +1,5 @@ import { ChartData, ChartDataset, ChartOptions } from "chart.js"; -import { startOfToday, endOfToday } from "date-fns"; +import { startOfToday, endOfToday, isToday } from "date-fns"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -84,6 +84,13 @@ export class HuiEnergyUsageGraphCard )} chart-type="bar" > + ${!this._chartData.datasets.length + ? html`
+ ${isToday(this._start) + ? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard." + : "There is not data for this period."} +
` + : ""} `; @@ -394,6 +401,19 @@ export class HuiEnergyUsageGraphCard .has-header { padding-top: 0; } + .no-data { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 20%; + margin-left: 32px; + box-sizing: border-box; + } `; } } diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index ca587738b7..fa82e1d3ca 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -104,14 +104,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { --mdc-theme-primary: currentColor; --mdc-button-outline-color: currentColor; - --mdc-button-disabled-outline-color: rgba( - var(--rgb-text-primary-color), - 0.5 - ); - --mdc-button-disabled-ink-color: rgba( - var(--rgb-text-primary-color), - 0.5 - ); + --mdc-button-disabled-outline-color: var(--disabled-text-color); + --mdc-button-disabled-ink-color: var(--disabled-text-color); } `; }