Add battery color to visualization (#11733)

evcc-io · Mar 8, 2024 · 8f4b3bf · 8f4b3bf
1 parent a692a84
commit 8f4b3bf
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 26 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -39,6 +39,8 @@
 
 	--evcc-grid: var(--bs-gray-dark);
 	--evcc-self: var(--evcc-dark-green);
+	--evcc-pv: var(--evcc-dark-green);
+	--evcc-battery: var(--evcc-darker-green);
 	--evcc-export: var(--evcc-yellow);
 	--evcc-background: var(--bs-gray-bright);
 	--evcc-box: var(--bs-white);

diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
@@ -9,7 +9,8 @@
 			<Visualization
 				class="col-12 mb-3 mb-md-4"
 				:gridImport="gridImport"
-				:selfConsumption="selfConsumption"
+				:selfPv="selfPv"
+				:selfBattery="selfBattery"
 				:loadpoints="loadpointsCompact"
 				:pvExport="pvExport"
 				:batteryCharge="batteryCharge"
@@ -25,8 +26,14 @@
 			<div ref="detailsInner" class="details-inner row">
 				<div class="col-12 d-flex justify-content-between pt-2 mb-4">
 					<div class="d-flex flex-nowrap align-items-center text-truncate">
-						<span class="color-self me-2"
-							><shopicon-filled-square></shopicon-filled-square
+						<span class="me-2 legend-self"
+							><shopicon-filled-square
+								class="color-pv legend-pv"
+							></shopicon-filled-square>
+							<shopicon-filled-square
+								v-if="selfBattery > 0"
+								:class="`color-battery legend-battery legend-battery--${selfPv > 0 ? 'mixed' : 'only'}`"
+							></shopicon-filled-square
 						></span>
 						<span class="text-nowrap text-truncate">
 							{{ $t("main.energyflow.selfConsumption") }}
@@ -39,16 +46,16 @@
 						<span class="text-nowrap text-truncate">
 							{{ $t("main.energyflow.gridImport") }}
 						</span>
-						<span class="color-grid ms-2"
-							><shopicon-filled-square></shopicon-filled-square
+						<span class="ms-2"
+							><shopicon-filled-square class="legend-grid"></shopicon-filled-square
 						></span>
 					</div>
 					<div v-else class="d-flex flex-nowrap align-items-center text-truncate">
 						<span class="text-nowrap text-truncate">
 							{{ $t("main.energyflow.pvExport") }}
 						</span>
-						<span class="color-export ms-2"
-							><shopicon-filled-square></shopicon-filled-square
+						<span class="ms-2"
+							><shopicon-filled-square class="legend-export"></shopicon-filled-square
 						></span>
 					</div>
 				</div>
@@ -232,10 +239,14 @@ export default {
 		batteryHold: function () {
 			return this.batteryMode === "hold";
 		},
-		selfConsumption: function () {
-			const ownPower = this.batteryDischarge + this.pvProduction;
-			const consumption = this.homePower + this.batteryCharge + this.loadpointsPower;
-			return Math.min(ownPower, consumption);
+		consumption: function () {
+			return this.homePower + this.batteryCharge + this.loadpointsPower;
+		},
+		selfPv: function () {
+			return Math.min(this.pvProduction, this.consumption);
+		},
+		selfBattery: function () {
+			return Math.min(this.batteryDischarge, this.consumption - this.selfPv);
 		},
 		activeLoadpoints: function () {
 			return this.loadpointsCompact.filter((lp) => lp.charging);
@@ -259,7 +270,7 @@ export default {
 			return Math.max(0, this.gridPower * -1);
 		},
 		powerInKw: function () {
-			return Math.max(this.gridImport, this.selfConsumption, this.pvExport) >= 1000;
+			return Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport) >= 1000;
 		},
 		inPower: function () {
 			return this.gridImport + this.pvProduction + this.batteryDischarge;
@@ -353,10 +364,28 @@ export default {
 .color-grid {
 	color: var(--evcc-grid);
 }
-.color-self {
-	color: var(--evcc-self);
-}
 .color-export {
 	color: var(--evcc-export);
 }
+.legend-grid {
+	color: var(--evcc-grid);
+}
+.legend-export {
+	color: var(--evcc-export);
+}
+.legend-pv {
+	color: var(--evcc-pv);
+}
+.legend-self {
+	position: relative;
+}
+.legend-battery {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--evcc-battery);
+}
+.legend-battery--mixed {
+	clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
 </style>
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
@@ -19,14 +19,22 @@
 			<div class="label-scale-name">In</div>
 		</div>
 		<div ref="site_progress" class="site-progress">
+			<div class="site-progress-bar self-pv" :style="{ width: widthTotal(selfPvAdjusted) }">
+				<AnimatedNumber
+					v-if="selfPv && visualizationReady"
+					class="power"
+					:to="selfPv"
+					:format="fmtBarValue"
+				/>
+			</div>
 			<div
-				class="site-progress-bar self-consumption"
-				:style="{ width: widthTotal(selfConsumptionAdjusted) }"
+				class="site-progress-bar self-battery"
+				:style="{ width: widthTotal(selfBatteryAdjusted) }"
 			>
 				<AnimatedNumber
-					v-if="selfConsumption && visualizationReady"
+					v-if="selfBattery && visualizationReady"
 					class="power"
-					:to="selfConsumption"
+					:to="selfBattery"
 					:format="fmtBarValue"
 				/>
 			</div>
@@ -98,7 +106,8 @@ export default {
 	mixins: [formatter],
 	props: {
 		gridImport: { type: Number, default: 0 },
-		selfConsumption: { type: Number, default: 0 },
+		selfPv: { type: Number, default: 0 },
+		selfBattery: { type: Number, default: 0 },
 		pvExport: { type: Number, default: 0 },
 		loadpoints: { type: Array, default: () => [] },
 		batteryCharge: { type: Number, default: 0 },
@@ -116,19 +125,27 @@ export default {
 			return this.applyThreshold(this.pvExport);
 		},
 		totalRaw: function () {
-			return this.gridImport + this.selfConsumption + this.pvExport;
+			return this.gridImport + this.selfPv + this.selfBattery + this.pvExport;
 		},
 		gridImportAdjusted: function () {
 			return this.applyThreshold(this.gridImport);
 		},
-		selfConsumptionAdjusted: function () {
-			return this.applyThreshold(this.selfConsumption);
+		selfPvAdjusted: function () {
+			return this.applyThreshold(this.selfPv);
+		},
+		selfBatteryAdjusted: function () {
+			return this.applyThreshold(this.selfBattery);
 		},
 		pvExportAdjusted: function () {
 			return this.applyThreshold(this.pvExport);
 		},
 		totalAdjusted: function () {
-			return this.gridImportAdjusted + this.selfConsumptionAdjusted + this.pvExportAdjusted;
+			return (
+				this.gridImportAdjusted +
+				this.selfPvAdjusted +
+				this.selfBatteryAdjusted +
+				this.pvExportAdjusted
+			);
 		},
 		visualizationReady: function () {
 			return this.totalAdjusted > 0 && this.width > 0;
@@ -231,10 +248,16 @@ html.dark .grid-import {
 	color: var(--bs-dark);
 }
 
-.self-consumption {
-	background-color: var(--evcc-self);
+.self-pv {
+	background-color: var(--evcc-pv);
 	color: var(--bs-dark);
 }
+
+.self-battery {
+	background-color: var(--evcc-battery);
+	color: var(--bs-dark);
+}
+
 .pv-export {
 	background-color: var(--evcc-export);
 	color: var(--bs-dark);