Add legend to electricity graph, fix text color in table (#9629)

src/panels/energy/strategies/energy-strategy.ts

@@ -49,7 +49,7 @@ export class EnergyStrategy {
     // Only include if we have a grid source.
     if (hasGrid) {
       view.cards!.push({
-        title: "Electricity",
+        title: "Energy usage",
         type: "energy-summary-graph",
         prefs: energyPrefs,
       });

src/panels/lovelace/cards/energy/hui-energy-costs-table-card.ts

@@ -238,10 +238,20 @@ export class HuiEnergyCostsTableCard
         width: 100%;
         border: 0;
       }
+      .mdc-data-table__header-cell,
+      .mdc-data-table__cell {
+        color: var(--primary-text-color);
+        border-bottom-color: var(--divider-color);
+      }
+      .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
+        background-color: rgba(var(--rgb-primary-text-color), 0.04);
+      }
       .total {
-        background-color: var(--primary-background-color);
         --mdc-typography-body2-font-weight: 500;
       }
+      .total .mdc-data-table__cell {
+        border-top: 1px solid var(--divider-color);
+      }
       ha-card {
         height: 100%;
       }

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -45,7 +45,9 @@ export class HuiEnergySolarGraphCard
 
   @state() private _data?: Statistics;
 
-  @state() private _chartData?: ChartData;
+  @state() private _chartData: ChartData = {
+    datasets: [],
+  };
 
   @state() private _forecasts?: Record<string, ForecastSolarForecast>;
 
@@ -123,13 +125,11 @@ export class HuiEnergySolarGraphCard
             "has-header": !!this._config.title,
           })}"
         >
-          ${this._chartData
+          <ha-chart-base
-            ? html`<ha-chart-base
             .data=${this._chartData}
             .options=${this._chartOptions}
             chart-type="bar"
-              ></ha-chart-base>`
+          ></ha-chart-base>
-            : ""}
         </div>
       </ha-card>
     `;

src/panels/lovelace/cards/energy/hui-energy-summary-graph-card.ts

@@ -1,3 +1,4 @@
+import { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import {
   css,
   CSSResultGroup,
@@ -8,12 +9,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import "../../../../components/ha-card";
+import { styleMap } from "lit/directives/style-map";
-import { ChartData, ChartDataset, ChartOptions } from "chart.js";
-import { HomeAssistant } from "../../../../types";
-import { LovelaceCard } from "../../types";
-import { EnergySummaryGraphCardConfig } from "../types";
-import { fetchStatistics, Statistics } from "../../../../data/history";
 import {
   hex2rgb,
   lab2rgb,
@@ -22,8 +18,14 @@ import {
 } from "../../../../common/color/convert-color";
 import { labDarken } from "../../../../common/color/lab";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
-import "../../../../components/chart/ha-chart-base";
 import { round } from "../../../../common/number/round";
+import { formatNumber } from "../../../../common/string/format_number";
+import "../../../../components/chart/ha-chart-base";
+import "../../../../components/ha-card";
+import { fetchStatistics, Statistics } from "../../../../data/history";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCard } from "../../types";
+import { EnergySummaryGraphCardConfig } from "../types";
 
 const NEGATIVE = ["to_grid"];
 const COLORS = {
@@ -43,7 +45,9 @@ export class HuiEnergySummaryGraphCard
 
   @state() private _data?: Statistics;
 
-  @state() private _chartData?: ChartData;
+  @state() private _chartData: ChartData = {
+    datasets: [],
+  };
 
   @state() private _chartOptions?: ChartOptions;
 
@@ -111,19 +115,48 @@ export class HuiEnergySummaryGraphCard
     }
 
     return html`
-      <ha-card .header="${this._config.title}">
+      <ha-card>
+        <h1 class="card-header">${this._config.title}</h1>
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
           })}"
         >
-          ${this._chartData
+          <div class="chartLegend">
-            ? html`<ha-chart-base
+            <ul>
+              ${this._chartData.datasets.map(
+                (dataset) => html`<li>
+                  <div>
+                    <div
+                      class="bullet"
+                      style=${styleMap({
+                        backgroundColor: dataset.backgroundColor as string,
+                        borderColor: dataset.borderColor as string,
+                      })}
+                    ></div>
+                    <span class="label">${dataset.label}</span>
+                  </div>
+                  <span class="value"
+                    >${formatNumber(
+                      Math.abs(
+                        dataset.data.reduce(
+                          (total, point) => total + (point as any).y,
+                          0
+                        ) as number
+                      ),
+                      this.hass.locale
+                    )}
+                    kWh</span
+                  >
+                </li>`
+              )}
+            </ul>
+          </div>
+          <ha-chart-base
             .data=${this._chartData}
             .options=${this._chartOptions}
             chart-type="bar"
-              ></ha-chart-base>`
+          ></ha-chart-base>
-            : ""}
         </div>
       </ha-card>
     `;
@@ -337,7 +370,7 @@ export class HuiEnergySummaryGraphCard
             totalStats[stat.start] =
               stat.start in totalStats ? totalStats[stat.start] + val : val;
           }
-          if (add) {
+          if (add && !(stat.start in set)) {
             set[stat.start] = val;
           }
           prevValue = stat.sum;
@@ -428,12 +461,46 @@ export class HuiEnergySummaryGraphCard
       ha-card {
         height: 100%;
       }
+      .card-header {
+        padding-bottom: 0;
+      }
       .content {
         padding: 16px;
       }
       .has-header {
         padding-top: 0;
       }
+      .chartLegend ul {
+        padding-left: 20px;
+      }
+      .chartLegend li {
+        padding: 2px 8px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        box-sizing: border-box;
+        color: var(--secondary-text-color);
+      }
+      .chartLegend li > div {
+        display: flex;
+        align-items: center;
+      }
+      .chartLegend .bullet {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        display: inline-block;
+        height: 16px;
+        margin-right: 6px;
+        width: 32px;
+        box-sizing: border-box;
+      }
+      .value {
+        font-weight: 300;
+      }
     `;
   }
 }