Add messages when no data (#9700)

* Add messages when no data

* 2 hours

* comment

src/panels/config/energy/ha-config-energy.ts

@@ -64,6 +64,12 @@ class HaConfigEnergy extends LitElement {
         .route=${this.route}
         .tabs=${configSections.experiences}
       >
+        <ha-card>
+          <div class="card-content">
+            After setting up a new device, it can take up to 2 hours for new
+            data to arrive in your energy dashboard.
+          </div>
+        </ha-card>
         <div class="container">
           <ha-energy-grid-settings
             .hass=${this.hass}
@@ -112,7 +118,7 @@ class HaConfigEnergy extends LitElement {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
           grid-gap: 8px 8px;
-          padding: 8px;
+          margin: 8px;
         }
       `,
     ];

src/panels/energy/ha-panel-energy.ts

@@ -54,6 +54,15 @@ class PanelEnergy extends LitElement {
     }
   }
 
+  protected updated(changedProps: PropertyValues) {
+    if (
+      changedProps.has("narrow") &&
+      changedProps.get("narrow") !== undefined
+    ) {
+      this._reloadView();
+    }
+  }
+
   protected render(): TemplateResult {
     return html`
       <ha-app-layout>
@@ -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);
         }
       `,
     ];

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 {
-import { endOfToday, startOfToday } from "date-fns";
+  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<string, ForecastSolarForecast>;
-
   @state() private _start = startOfToday();
 
   @state() private _end = endOfToday();
@@ -96,6 +97,13 @@ export class HuiEnergySolarGraphCard
             )}
             chart-type="bar"
           ></ha-chart-base>
+          ${!this._chartData.datasets.length
+            ? html`<div class="no-data">
+                ${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."}
+              </div>`
+            : ""}
         </div>
       </ha-card>
     `;
@@ -188,11 +196,12 @@ export class HuiEnergySolarGraphCard
         (source) => source.type === "solar"
       ) as SolarSourceTypeEnergyPreference[];
 
+    let forecasts: Record<string, ForecastSolarForecast>;
     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,7 +297,23 @@ export class HuiEnergySolarGraphCard
         });
 
         if (forecastsData) {
-          const forecast: ChartDataset<"line"> = {
+          const solarForecastData: ScatterDataPoint[] = [];
+          for (const [date, value] of Object.entries(forecastsData)) {
+            const dateObj = new Date(date);
+            if (
+              dateObj < energyData.start ||
+              (energyData.end && dateObj > energyData.end)
+            ) {
+              continue;
+            }
+            solarForecastData.push({
+              x: dateObj.getTime(),
+              y: value / 1000,
+            });
+          }
+
+          if (solarForecastData.length) {
+            data.push({
               type: "line",
               label: `Forecast ${
                 entity ? computeStateName(entity) : source.stat_energy_from
@@ -298,21 +325,7 @@ export class HuiEnergySolarGraphCard
               ),
               borderDash: [7, 5],
               pointRadius: 0,
-            data: [],
+              data: solarForecastData,
-          };
-          data.push(forecast);
-
-          for (const [date, value] of Object.entries(forecastsData)) {
-            const dateObj = new Date(date);
-            if (
-              dateObj < energyData.start ||
-              (energyData.end && dateObj > energyData.end)
-            ) {
-              continue;
-            }
-            forecast.data.push({
-              x: dateObj.getTime(),
-              y: value / 1000,
             });
           }
         }
@@ -344,8 +357,18 @@ export class HuiEnergySolarGraphCard
       .has-header {
         padding-top: 0;
       }
-      ha-formfield {
+      .no-data {
-        margin-bottom: 16px;
+        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;
       }
     `;
   }

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"
           ></ha-chart-base>
+          ${!this._chartData.datasets.length
+            ? html`<div class="no-data">
+                ${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."}
+              </div>`
+            : ""}
         </div>
       </ha-card>
     `;
@@ -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;
+      }
     `;
   }
 }

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(
+        --mdc-button-disabled-outline-color: var(--disabled-text-color);
-          var(--rgb-text-primary-color),
+        --mdc-button-disabled-ink-color: var(--disabled-text-color);
-          0.5
-        );
-        --mdc-button-disabled-ink-color: rgba(
-          var(--rgb-text-primary-color),
-          0.5
-        );
       }
     `;
   }