Add summations to gas/solar/water energy graph tooltips (#17084)

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

@@ -240,6 +240,24 @@ export class HuiEnergyGasGraphCard
                   context.parsed.y,
                   locale
                 )} ${unit}`,
+              footer: (contexts) => {
+                if (contexts.length < 2) {
+                  return [];
+                }
+                let total = 0;
+                for (const context of contexts) {
+                  total += (context.dataset.data[context.dataIndex] as any).y;
+                }
+                if (total === 0) {
+                  return [];
+                }
+                return [
+                  this.hass.localize(
+                    "ui.panel.lovelace.cards.energy.energy_gas_graph.total_consumed",
+                    { num: formatNumber(total, locale), unit }
+                  ),
+                ];
+              },
             },
           },
           filler: {

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

@@ -236,6 +236,27 @@ export class HuiEnergySolarGraphCard
                   context.parsed.y,
                   locale
                 )} kWh`,
+              footer: (contexts) => {
+                const production_contexts = contexts.filter(
+                  (c) => c.dataset?.stack === "solar"
+                );
+                if (production_contexts.length < 2) {
+                  return [];
+                }
+                let total = 0;
+                for (const context of production_contexts) {
+                  total += (context.dataset.data[context.dataIndex] as any).y;
+                }
+                if (total === 0) {
+                  return [];
+                }
+                return [
+                  this.hass.localize(
+                    "ui.panel.lovelace.cards.energy.energy_solar_graph.total_produced",
+                    { num: formatNumber(total, locale) }
+                  ),
+                ];
+              },
             },
           },
           filler: {

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

@@ -240,6 +240,24 @@ export class HuiEnergyWaterGraphCard
                   context.parsed.y,
                   locale
                 )} ${unit}`,
+              footer: (contexts) => {
+                if (contexts.length < 2) {
+                  return [];
+                }
+                let total = 0;
+                for (const context of contexts) {
+                  total += (context.dataset.data[context.dataIndex] as any).y;
+                }
+                if (total === 0) {
+                  return [];
+                }
+                return [
+                  this.hass.localize(
+                    "ui.panel.lovelace.cards.energy.energy_water_graph.total_consumed",
+                    { num: formatNumber(total, locale), unit }
+                  ),
+                ];
+              },
             },
           },
           filler: {

src/translations/en.json

@@ -4312,7 +4312,14 @@
             },
             "energy_solar_graph": {
               "production": "Production {name}",
-              "forecast": "Forecast {name}"
+              "forecast": "Forecast {name}",
+              "total_produced": "Total produced {num} kWh"
+            },
+            "energy_gas_graph": {
+              "total_consumed": "Total consumed {num} {unit}"
+            },
+            "energy_water_graph": {
+              "total_consumed": "[%key:ui::panel::lovelace::cards::energy::energy_gas_graph::total_consumed%]"
             },
             "solar_consumed_gauge": {
               "card_indicates_solar_energy_used": "This card indicates how much of the solar energy you produced was used by your home instead of being returned to the grid.",