Energyflow: kW/W switch for non-changing values (#9206)

* Energyflow: fix kW/W switch for non-changing values * Energyflow: fix kW/W switch for non-changing values * fix test
evcc-io · Aug 1, 2023 · e6b88f7 · e6b88f7
1 parent eb60a4a
commit e6b88f7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/assets/js/components/AnimatedNumber.vue b/assets/js/components/AnimatedNumber.vue
@@ -40,7 +40,11 @@ export default {
 	unmounted() {
 		this.instance = null;
 	},
+	methods: {
+		forceUpdate() {
+			this.instance?.reset();
+			this.instance?.update(this.to);
+		},
+	},
 };
 </script>
-
-<style lang="less" scoped></style>
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
@@ -241,7 +241,7 @@ export default {
 			return Math.max(0, this.gridPower * -1);
 		},
 		powerInKw: function () {
-			return this.gridImport + this.selfConsumption + this.pvExport > 1000;
+			return Math.max(this.gridImport, this.selfConsumption, this.pvExport) >= 1000;
 		},
 		inPower: function () {
 			return this.gridImport + this.pvProduction + this.batteryDischarge;

diff --git a/assets/js/components/Energyflow/EnergyflowEntry.vue b/assets/js/components/Energyflow/EnergyflowEntry.vue
@@ -20,7 +20,7 @@
 				<AnimatedNumber v-if="!isNaN(details)" :to="details" :format="detailsFmt" />
 			</div>
 			<div ref="power" class="power" data-bs-toggle="tooltip" @click="powerClicked">
-				<AnimatedNumber :to="power" :format="kw" />
+				<AnimatedNumber ref="powerNumber" :to="power" :format="kw" />
 			</div>
 		</span>
 	</div>
@@ -79,6 +79,12 @@ export default {
 				this.updateDetailsTooltip();
 			}
 		},
+		powerInKw(newVal, oldVal) {
+			// force update if unit changes but not the value
+			if (newVal !== oldVal) {
+				this.$refs.powerNumber.forceUpdate();
+			}
+		},
 	},
 	mounted: function () {
 		this.updatePowerTooltip();

diff --git a/assets/js/mixins/formatter.test.js b/assets/js/mixins/formatter.test.js
@@ -10,6 +10,26 @@ const fmt = mount({
   mixins: [formatter],
 }).componentVM;
 
+describe("fmtkW", () => {
+  test("should format kW and W", () => {
+    expect(fmt.fmtKw(0, true)).eq("0,0 kW");
+    expect(fmt.fmtKw(1200, true)).eq("1,2 kW");
+    expect(fmt.fmtKw(0, false)).eq("0 W");
+    expect(fmt.fmtKw(1200, false)).eq("1.200 W");
+  });
+  test("should format without unit", () => {
+    expect(fmt.fmtKw(0, true, false)).eq("0,0");
+    expect(fmt.fmtKw(1200, true, false)).eq("1,2");
+    expect(fmt.fmtKw(0, false, false)).eq("0");
+    expect(fmt.fmtKw(1200, false, false)).eq("1.200");
+  });
+  test("should format a given number of digits", () => {
+    expect(fmt.fmtKw(12345, true, true, 0)).eq("12 kW");
+    expect(fmt.fmtKw(12345, true, true, 1)).eq("12,3 kW");
+    expect(fmt.fmtKw(12345, true, true, 2)).eq("12,35 kW");
+  });
+});
+
 describe("fmtKWh", () => {
   test("should format with units", () => {
     expect(fmt.fmtKWh(1200)).eq("1,2 kWh");

diff --git a/tests/basics.spec.js b/tests/basics.spec.js
@@ -20,7 +20,7 @@ test.describe("main screen", async () => {
   test("visualization", async ({ page }) => {
     const locator = page.getByTestId("visualization");
     await expect(locator).toBeVisible();
-    await expect(locator).toContainText("1,000 W");
+    await expect(locator).toContainText("1.0 kW");
   });
 
   test("one loadpoint", async ({ page }) => {