diff --git a/assets/js/components/Energyflow/Energyflow.story.vue b/assets/js/components/Energyflow/Energyflow.story.vue index b84420f1c..cd06dd36e 100644 --- a/assets/js/components/Energyflow/Energyflow.story.vue +++ b/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 }, ]" /> diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue index 760132657..35316e4fb 100644 --- a/assets/js/components/Energyflow/Energyflow.vue +++ b/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})`; + }); + }, }, };