Separate loadpoints in visualization (#9730)

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

@@ -11,8 +11,11 @@ import Energyflow from "./Energyflow.vue";
 				:pvPower="7300"
 				:gridPower="-2300"
 				:homePower="800"
-				:loadpointsPower="4200"
-				:activeLoadpointsCount="3"
+				:loadpointsCompact="[
+					{ power: 1000, icon: 'car', charging: true },
+					{ power: 1000, icon: 'bike', charging: true },
+					{ power: 2200, icon: 'car', charging: true },
+				]"
 				:tariffGrid="0.25"
 				:tariffFeedIn="0.08"
 				:tariffEffectivePrice="0.08"
@@ -52,8 +55,7 @@ import Energyflow from "./Energyflow.vue";
 				:pvPower="5000"
 				:gridPower="-1300"
 				:homePower="800"
-				:loadpointsPower="1400"
-				:activeLoadpointsCount="1"
+				:loadpointsCompact="[{ power: 1400, icon: 'car', charging: true }]"
 				:batteryPower="-1500"
 				:batterySoc="75"
 				siteTitle="Home"
@@ -79,8 +81,10 @@ import Energyflow from "./Energyflow.vue";
 				batteryConfigured
 				:pvPower="8700"
 				:gridPower="-500"
-				:loadpointsPower="7500"
-				:activeLoadpointsCount="2"
+				:loadpointsCompact="[
+					{ power: 5000, icon: 'car', charging: true },
+					{ power: 2500, icon: 'bus', charging: true },
+				]"
 				:batteryPower="-700"
 				:batterySoc="95"
 				siteTitle="Home"
@@ -94,8 +98,10 @@ import Energyflow from "./Energyflow.vue";
 				:pvPower="300"
 				:gridPower="5500"
 				:homePower="1000"
-				:loadpointsPower="5600"
-				:activeLoadpointsCount="2"
+				:loadpointsCompact="[
+					{ power: 5000, icon: 'car', charging: true },
+					{ power: 1600, icon: 'car', charging: true },
+				]"
 				:batteryPower="800"
 				:batterySoc="76"
 				siteTitle="Home"
@@ -109,8 +115,7 @@ import Energyflow from "./Energyflow.vue";
 				:pvPower="0"
 				:gridPower="6500"
 				:homePower="1000"
-				:loadpointsPower="5500"
-				:activeLoadpointsCount="1"
+				:loadpointsCompact="[{ power: 5500, icon: 'car', charging: true }]"
 				:batteryPower="0"
 				:batterySoc="0"
 				siteTitle="Home"
@@ -140,8 +145,11 @@ import Energyflow from "./Energyflow.vue";
 				:pvPower="7300"
 				:gridPower="-2300"
 				:homePower="800"
-				:loadpointsPower="4200"
-				:activeLoadpointsCount="3"
+				:loadpointsCompact="[
+					{ power: 1000, icon: 'car', charging: true },
+					{ power: 1000, icon: 'car', charging: true },
+					{ power: 2200, icon: 'car', charging: true },
+				]"
 				:tariffGrid="0.25"
 				:tariffFeedIn="0.08"
 				:tariffEffectivePrice="0.08"

assets/js/components/Energyflow/Energyflow.vue

@@ -9,7 +9,7 @@
 				class="col-12 mb-3 mb-md-4"
 				:gridImport="gridImport"
 				:selfConsumption="selfConsumption"
-				:loadpoints="loadpointsPower"
+				:loadpoints="loadpointsCompact"
 				:pvExport="pvExport"
 				:batteryCharge="batteryCharge"
 				:batteryDischarge="batteryDischarge"
@@ -194,13 +194,11 @@ export default {
 		pvConfigured: Boolean,
 		pv: { type: Array },
 		pvPower: { type: Number, default: 0 },
-		loadpointsPower: { type: Number, default: 0 },
-		activeLoadpointsCount: { type: Number, default: 0 },
+		loadpointsCompact: { type: Array, default: () => [] },
 		batteryConfigured: { type: Boolean },
 		battery: { type: Array },
 		batteryPower: { type: Number, default: 0 },
 		batterySoc: { type: Number, default: 0 },
-		vehicleIcons: { type: Array },
 		tariffGrid: { type: Number },
 		tariffFeedIn: { type: Number },
 		tariffEffectivePrice: { type: Number },
@@ -237,6 +235,24 @@ export default {
 			const consumption = this.homePower + this.batteryCharge + this.loadpointsPower;
 			return Math.min(ownPower, consumption);
 		},
+		activeLoadpoints: function () {
+			return this.loadpointsCompact.filter((lp) => lp.charging);
+		},
+		activeLoadpointsCount: function () {
+			return this.activeLoadpoints.length;
+		},
+		vehicleIcons: function () {
+			if (this.activeLoadpointsCount > 0) {
+				return this.activeLoadpoints.map((lp) => lp.icon);
+			}
+			return ["car"];
+		},
+		loadpointsPower: function () {
+			return this.loadpointsCompact.reduce((sum, lp) => {
+				sum += lp.power || 0;
+				return sum;
+			}, 0);
+		},
 		pvExport: function () {
 			return Math.max(0, this.gridPower * -1);
 		},

assets/js/components/Energyflow/Visualization.vue

@@ -64,8 +64,12 @@
 				<LabelBar v-bind="labelBarProps('bottom', 'homePower')">
 					<shopicon-regular-home></shopicon-regular-home>
 				</LabelBar>
-				<LabelBar v-bind="labelBarProps('bottom', 'loadpoints')">
-					<VehicleIcon :names="vehicleIcons" />
+				<LabelBar
+					v-for="(lp, index) in loadpoints"
+					:key="index"
+					v-bind="labelBarProps('bottom', 'loadpoints', lp.power)"
+				>
+					<VehicleIcon :names="[lp.icon]" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'batteryCharge')">
 					<BatteryIcon :soc="batterySoc" />
@@ -96,14 +100,13 @@ export default {
 		gridImport: { type: Number, default: 0 },
 		selfConsumption: { type: Number, default: 0 },
 		pvExport: { type: Number, default: 0 },
-		loadpoints: { type: Number, default: 0 },
+		loadpoints: { type: Array, default: () => [] },
 		batteryCharge: { type: Number, default: 0 },
 		batteryDischarge: { type: Number, default: 0 },
 		pvProduction: { type: Number, default: 0 },
 		homePower: { type: Number, default: 0 },
 		batterySoc: { type: Number, default: 0 },
 		powerInKw: { type: Boolean, default: false },
-		vehicleIcons: { type: Array },
 	},
 	data: function () {
 		return { width: 0 };
@@ -170,8 +173,8 @@ export default {
 		updateElementWidth() {
 			this.width = this.$refs.site_progress.getBoundingClientRect().width;
 		},
-		labelBarProps(position, name) {
-			const value = this[name];
+		labelBarProps(position, name, val) {
+			const value = val === undefined ? this[name] : val;
 			const minWidth = 40;
 			return {
 				value,

assets/js/components/Site.vue

@@ -103,23 +103,13 @@ export default {
 		energyflow: function () {
 			return this.collectProps(Energyflow);
 		},
-		activeLoadpoints: function () {
-			return this.loadpoints.filter((lp) => lp.charging);
-		},
-		activeLoadpointsCount: function () {
-			return this.activeLoadpoints.length;
-		},
-		vehicleIcons: function () {
-			if (this.activeLoadpointsCount) {
-				return this.activeLoadpoints.map((lp) => lp.chargerIcon || lp.vehicleIcon || "car");
-			}
-			return ["car"];
-		},
-		loadpointsPower: function () {
-			return this.loadpoints.reduce((sum, lp) => {
-				sum += lp.chargePower || 0;
-				return sum;
-			}, 0);
+		loadpointsCompact: function () {
+			return this.loadpoints.map((lp) => {
+				const icon = lp.chargerIcon || lp.vehicleIcon || "car";
+				const charging = lp.charging;
+				const power = lp.chargePower || 0;
+				return { icon, charging, power };
+			});
 		},
 		topNavigation: function () {
 			const vehicleLogins = this.auth ? this.auth.vehicles : {};