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);
}
`;
}