Add messages when no data (#9700)

* Add messages when no data * 2 hours * comment
2025-07-21 16:26:43 +00:00 · 2021-08-03 23:22:32 +02:00 · 2021-08-03 23:22:32 +02:00 · 5ba24211e2
commit 5ba24211e2
parent d699647418
5 changed files with 100 additions and 47 deletions
--- 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}
      >
+        <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;
        }
      `,
    ];
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/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);
        }
      `,
    ];
--- 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<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,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;
      }
    `;
  }
--- 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"
          ></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;
+      }
    `;
  }
 }
--- 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);
      }
    `;
  }