Visualization: expose non-matching power sums (#16289)

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

@@ -96,7 +96,7 @@ import Energyflow from "./Energyflow.vue";
 				pvConfigured
 				batteryConfigured
 				:pvPower="300"
-				:gridPower="5500"
+				:gridPower="6500"
 				:homePower="1000"
 				:loadpointsCompact="[
 					{ power: 5000, icon: 'car', charging: true },
@@ -167,5 +167,32 @@ import Energyflow from "./Energyflow.vue";
 				:pv="[{ power: 5000 }, { power: 2300 }]"
 			/>
 		</Variant>
+		<Variant title="low input">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				:pvPower="2000"
+				:gridPower="-2000"
+				:loadpointsCompact="[{ power: 1000, icon: 'car', charging: true }]"
+			/>
+		</Variant>
+		<Variant title="low output">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				:pvPower="3000"
+				:gridPower="-1000"
+				:loadpointsCompact="[{ power: 1700, icon: 'car', charging: true }]"
+			/>
+		</Variant>
+		<Variant title="low output (&lt; 10%)">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				:pvPower="3000"
+				:gridPower="-1000"
+				:loadpointsCompact="[{ power: 1800, icon: 'car', charging: true }]"
+			/>
+		</Variant>
 	</Story>
 </template>

assets/js/components/Energyflow/Energyflow.vue

@@ -20,6 +20,8 @@
 				:batterySoc="batterySoc"
 				:powerUnit="powerUnit"
 				:vehicleIcons="vehicleIcons"
+				:inPower="inPower"
+				:outPower="outPower"
 			/>
 		</div>
 		<div

assets/js/components/Energyflow/Visualization.vue

@@ -15,6 +15,9 @@
 				<LabelBar v-bind="labelBarProps('top', 'gridImport')">
 					<shopicon-regular-powersupply></shopicon-regular-powersupply>
 				</LabelBar>
+				<LabelBar v-bind="labelBarProps('top', 'unknownImport')">
+					<QuestionIcon />
+				</LabelBar>
 			</div>
 			<div class="label-scale-name">In</div>
 		</div>
@@ -60,6 +63,17 @@
 					:format="fmtBarValue"
 				/>
 			</div>
+			<div
+				class="site-progress-bar unknown-output"
+				:style="{ width: widthTotal(unknownOutput) }"
+			>
+				<AnimatedNumber
+					v-if="unknownOutput && visualizationReady"
+					class="power"
+					:to="unknownOutput"
+					:format="fmtBarValue"
+				/>
+			</div>
 			<div v-if="totalAdjusted <= 0" class="site-progress-bar w-100 grid-import">
 				<span>{{ fmtW(0, POWER_UNIT.AUTO, true) }}</span>
 			</div>
@@ -82,6 +96,9 @@
 				<LabelBar v-bind="labelBarProps('bottom', 'gridExport')">
 					<shopicon-regular-powersupply></shopicon-regular-powersupply>
 				</LabelBar>
+				<LabelBar v-bind="labelBarProps('bottom', 'unknownOutput')">
+					<QuestionIcon />
+				</LabelBar>
 			</div>
 			<div class="label-scale-name">Out</div>
 		</div>
@@ -94,12 +111,13 @@ import BatteryIcon from "./BatteryIcon.vue";
 import LabelBar from "./LabelBar.vue";
 import AnimatedNumber from "../AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
+import QuestionIcon from "../MaterialIcon/Question.vue";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/home";
 
 export default {
 	name: "Visualization",
-	components: { BatteryIcon, LabelBar, AnimatedNumber, VehicleIcon },
+	components: { BatteryIcon, LabelBar, AnimatedNumber, VehicleIcon, QuestionIcon },
 	mixins: [formatter],
 	props: {
 		gridImport: { type: Number, default: 0 },
@@ -113,6 +131,8 @@ export default {
 		homePower: { type: Number, default: 0 },
 		batterySoc: { type: Number, default: 0 },
 		powerUnit: { type: String, default: POWER_UNIT.KW },
+		inPower: { type: Number, default: 0 },
+		outPower: { type: Number, default: 0 },
 	},
 	data: function () {
 		return { width: 0 };
@@ -144,6 +164,14 @@ export default {
 				this.pvExportAdjusted
 			);
 		},
+		unknownImport: function () {
+			// input/output mismatch > 10%
+			return this.applyThreshold(Math.max(0, this.outPower - this.inPower), 10);
+		},
+		unknownOutput: function () {
+			// input/output mismatch > 10%
+			return this.applyThreshold(Math.max(0, this.inPower - this.outPower), 10);
+		},
 		visualizationReady: function () {
 			return this.totalAdjusted > 0 && this.width > 0;
 		},
@@ -186,9 +214,9 @@ export default {
 			const percent = (100 / this.totalAdjusted) * power;
 			return (this.width / 100) * percent < minWidth;
 		},
-		applyThreshold(power) {
+		applyThreshold(power, threshold = 2) {
 			const percent = (100 / this.totalRaw) * power;
-			return percent < 2 ? 0 : power;
+			return percent < threshold ? 0 : power;
 		},
 		updateElementWidth() {
 			this.width = this.$refs.site_progress.getBoundingClientRect().width;
@@ -249,16 +277,18 @@ html.dark .grid-import {
 	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);
 }
+.unknown-output {
+	background-color: var(--evcc-gray);
+	color: var(--bs-dark);
+}
 .power {
 	display: block;
 	margin: 0 0.2rem;

assets/js/components/MaterialIcon/Question.vue

@@ -0,0 +1,17 @@
+<template>
+	<svg :style="svgStyle" viewBox="0 0 32 32">
+		<path
+			fill="currentColor"
+			d="M16,24c0.467,0 0.861,-0.161 1.184,-0.484c0.323,-0.323 0.484,-0.717 0.483,-1.183c-0.001,-0.465 -0.163,-0.86 -0.484,-1.184c-0.322,-0.323 -0.716,-0.484 -1.183,-0.482c-0.467,0.001 -0.861,0.163 -1.184,0.484c-0.323,0.321 -0.484,0.715 -0.483,1.182c0.001,0.468 0.163,0.863 0.484,1.184c0.322,0.322 0.716,0.483 1.183,0.483m0,-13.733c0.578,-0 1.084,0.177 1.517,0.533c0.434,0.356 0.651,0.811 0.65,1.367c-0,0.511 -0.162,0.966 -0.484,1.366c-0.323,0.4 -0.673,0.767 -1.05,1.1c-0.577,0.511 -1.016,0.995 -1.316,1.451c-0.299,0.456 -0.472,1.006 -0.517,1.649c-0.022,0.311 0.089,0.584 0.333,0.818c0.245,0.233 0.534,0.35 0.867,0.349c0.311,0 0.595,-0.111 0.851,-0.333c0.256,-0.223 0.405,-0.5 0.449,-0.834c0.044,-0.377 0.178,-0.711 0.4,-1c0.222,-0.289 0.544,-0.644 0.967,-1.066c0.777,-0.778 1.294,-1.406 1.55,-1.883c0.256,-0.477 0.384,-1.05 0.383,-1.717c0,-1.2 -0.433,-2.178 -1.3,-2.934c-0.867,-0.755 -1.967,-1.133 -3.3,-1.133c-0.911,0 -1.728,0.206 -2.449,0.617c-0.722,0.412 -1.272,0.995 -1.651,1.75c-0.133,0.266 -0.139,0.539 -0.016,0.817c0.123,0.278 0.328,0.472 0.616,0.583c0.288,0.11 0.583,0.11 0.884,-0c0.301,-0.111 0.54,-0.288 0.716,-0.534c0.244,-0.311 0.528,-0.549 0.851,-0.716c0.322,-0.166 0.672,-0.249 1.049,-0.25"
+		/>
+	</svg>
+</template>
+
+<script>
+import icon from "../../mixins/icon";
+
+export default {
+	name: "Question",
+	mixins: [icon],
+};
+</script>