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 @@ + + +