Energyflow: add multi battery tooltip (#18332)

assets/js/components/Energyflow/Energyflow.story.vue

@@ -42,8 +42,8 @@ import Energyflow from "./Energyflow.vue";
 				currency="EUR"
 				siteTitle="Home"
 				:battery="[
-					{ soc: 44.999, capacity: 13.3 },
-					{ soc: 82.3331, capacity: 21 },
+					{ soc: 44.999, capacity: 13.3, power: 350 },
+					{ soc: 82.3331, capacity: 21, power: 450 },
 				]"
 			/>
 		</Variant>

assets/js/components/Energyflow/Energyflow.vue

@@ -91,6 +91,7 @@
 							:name="batteryDischargeLabel"
 							icon="battery"
 							:power="batteryDischarge"
+							:powerTooltip="batteryDischargeTooltip"
 							:powerUnit="powerUnit"
 							:iconProps="{
 								hold: batteryHold,
@@ -166,6 +167,7 @@
 							:name="batteryChargeLabel"
 							icon="battery"
 							:power="batteryCharge"
+							:powerTooltip="batteryChargeTooltip"
 							:powerUnit="powerUnit"
 							:iconProps="{
 								hold: batteryHold,
@@ -276,10 +278,10 @@ export default {
 			return Math.abs(this.pvPower);
 		},
 		batteryDischarge: function () {
-			return Math.abs(Math.max(0, this.batteryPower));
+			return this.dischargePower(this.batteryPower);
 		},
 		batteryCharge: function () {
-			return Math.abs(Math.min(0, this.batteryPower) * -1);
+			return this.chargePower(this.batteryPower);
 		},
 		batteryChargeLabel: function () {
 			return this.$t(`main.energyflow.battery${this.batteryHold ? "Hold" : "Charge"}`);
@@ -344,6 +346,12 @@ export default {
 			}
 			return this.pv.map(({ power }) => this.fmtW(power, this.powerUnit));
 		},
+		batteryDischargeTooltip() {
+			return this.batteryTooltip(true);
+		},
+		batteryChargeTooltip() {
+			return this.batteryTooltip(false);
+		},
 		batteryFmt() {
 			return (soc) => this.fmtPercentage(soc, 0);
 		},
@@ -360,7 +368,9 @@ export default {
 			return this.fmtPricePerKWh(this.tariffGrid, this.currency, true);
 		},
 		batteryGridChargeLimitSet() {
-			return this.batteryGridChargeLimit !== null;
+			return (
+				this.batteryGridChargeLimit !== null && this.batteryGridChargeLimit !== undefined
+			);
 		},
 		batteryGridChargeLimitFmt() {
 			if (!this.batteryGridChargeLimitSet) {
@@ -437,6 +447,23 @@ export default {
 			);
 			modal.show();
 		},
+		dischargePower(power) {
+			return Math.abs(Math.max(0, power));
+		},
+		chargePower(power) {
+			return Math.abs(Math.min(0, power) * -1);
+		},
+		batteryTooltip(discharge = false) {
+			if (!Array.isArray(this.battery) || this.battery.length <= 1) {
+				return;
+			}
+			return this.battery.map(({ power, soc }) => {
+				const value = discharge ? this.dischargePower(power) : this.chargePower(power);
+				const powerFmt = this.fmtW(value, this.powerUnit);
+				const socFmt = this.fmtPercentage(soc, 0);
+				return `${powerFmt} (${socFmt})`;
+			});
+		},
 	},
 };
 </script>