diff --git a/assets/js/components/Energyflow/Energyflow.story.vue b/assets/js/components/Energyflow/Energyflow.story.vue
index 794ed82bb4..e341f71678 100644
--- a/assets/js/components/Energyflow/Energyflow.story.vue
+++ b/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 }]"
/>
+
+
+
+
+
+
+
+
+
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index 52c69a0387..001e218ac7 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -20,6 +20,8 @@
:batterySoc="batterySoc"
:powerUnit="powerUnit"
:vehicleIcons="vehicleIcons"
+ :inPower="inPower"
+ :outPower="outPower"
/>
+
+
+
In
@@ -60,6 +63,17 @@
:format="fmtBarValue"
/>
+
{{ fmtW(0, POWER_UNIT.AUTO, true) }}
@@ -82,6 +96,9 @@
+
+
+
Out
@@ -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;
diff --git a/assets/js/components/MaterialIcon/Question.vue b/assets/js/components/MaterialIcon/Question.vue
new file mode 100644
index 0000000000..8c94bd1bc1
--- /dev/null
+++ b/assets/js/components/MaterialIcon/Question.vue
@@ -0,0 +1,17 @@
+
+
+
+
+