evcc-io · naltatis · Apr 30, 2024 · Apr 30, 2024
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
@@ -18,8 +18,7 @@
 				:pvProduction="pvProduction"
 				:homePower="homePower"
 				:batterySoc="batterySoc"
-				:powerInKw="visualizationFormat.kw"
-				:powerDigits="visualizationFormat.digits"
+				:powerInKw="powerInKw"
 				:vehicleIcons="vehicleIcons"
 			/>
 		</div>
@@ -75,16 +74,14 @@
 							icon="sun"
 							:power="pvProduction"
 							:powerTooltip="pvTooltip"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 						/>
 						<EnergyflowEntry
 							v-if="batteryConfigured"
 							:name="batteryDischargeLabel"
 							icon="battery"
 							:power="batteryDischarge"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 							:soc="batterySoc"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
@@ -96,8 +93,7 @@
 							:name="$t('main.energyflow.gridImport')"
 							icon="powersupply"
 							:power="gridImport"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 							:details="detailsValue(tariffGrid, tariffCo2)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffGrid, tariffCo2)"
@@ -119,8 +115,7 @@
 							:name="$t('main.energyflow.homePower')"
 							icon="home"
 							:power="homePower"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 							:details="detailsValue(tariffPriceHome, tariffCo2Home)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(tariffPriceHome, tariffCo2Home)"
@@ -134,8 +129,7 @@
 							icon="vehicle"
 							:vehicleIcons="vehicleIcons"
 							:power="loadpointsPower"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 							:details="
 								activeLoadpointsCount
 									? detailsValue(tariffPriceLoadpoints, tariffCo2Loadpoints)
@@ -151,8 +145,7 @@
 							:name="batteryChargeLabel"
 							icon="battery"
 							:power="batteryCharge"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 							:soc="batterySoc"
 							:details="batterySoc"
 							:detailsFmt="batteryFmt"
@@ -163,8 +156,7 @@
 							:name="$t('main.energyflow.pvExport')"
 							icon="powersupply"
 							:power="pvExport"
-							:powerInKw="entryFormat.kw"
-							:powerDigits="entryFormat.digits"
+							:powerInKw="powerInKw"
 							:details="detailsValue(-tariffFeedIn)"
 							:detailsFmt="detailsFmt"
 							:detailsTooltip="detailsTooltip(-tariffFeedIn)"
@@ -277,25 +269,8 @@ export default {
 		pvExport: function () {
 			return Math.max(0, this.gridPower * -1);
 		},
-		visualizationFormat: function () {
-			const max = Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport);
-			const kw = this.inKw(max);
-			const digits = kw ? this.digitsKw(max) : 0;
-			return { kw, digits };
-		},
-		entryFormat: function () {
-			const max = Math.max(
-				this.gridImport,
-				this.pvProduction,
-				this.batteryDischarge,
-				this.homePower,
-				this.loadpointsPower,
-				this.pvExport,
-				this.batteryCharge
-			);
-			const kw = this.inKw(max);
-			const digits = kw ? this.digitsKw(max) : 0;
-			return { kw, digits };
+		powerInKw: function () {
+			return Math.max(this.gridImport, this.selfPv, this.selfBattery, this.pvExport) >= 1000;
 		},
 		inPower: function () {
 			return this.gridImport + this.pvProduction + this.batteryDischarge;
@@ -310,9 +285,7 @@ export default {
 			if (!Array.isArray(this.pv) || this.pv.length <= 1) {
 				return;
 			}
-			return this.pv.map(({ power }) =>
-				this.fmtKw(power, this.entryFormat.kw, true, this.entryFormat.digits)
-			);
+			return this.pv.map(({ power }) => this.fmtKw(power, this.powerInKw));
 		},
 		batteryFmt() {
 			return (soc) => `${Math.round(soc)}%`;
@@ -355,7 +328,7 @@ export default {
 			return this.fmtPricePerKWh(value, this.currency, true);
 		},
 		kw: function (watt) {
-			return this.fmtKw(watt, this.entryFormat.kw, true, this.entryFormat.digits);
+			return this.fmtKw(watt, this.powerInKw);
 		},
 		toggleDetails: function () {
 			this.updateHeight();

diff --git a/assets/js/components/Energyflow/EnergyflowEntry.vue b/assets/js/components/Energyflow/EnergyflowEntry.vue
@@ -48,7 +48,6 @@ export default {
 		power: { type: Number },
 		powerTooltip: { type: Array },
 		powerInKw: { type: Boolean },
-		powerDigits: { type: Number },
 		soc: { type: Number },
 		details: { type: Number },
 		detailsFmt: { type: Function },
@@ -87,20 +86,14 @@ export default {
 				this.$refs.powerNumber.forceUpdate();
 			}
 		},
-		powerDigits(newVal, oldVal) {
-			// force update if digits change but not the value
-			if (newVal !== oldVal) {
-				this.$refs.powerNumber.forceUpdate();
-			}
-		},
 	},
 	mounted: function () {
 		this.updatePowerTooltip();
 		this.updateDetailsTooltip();
 	},
 	methods: {
 		kw: function (watt) {
-			return this.fmtKw(watt, this.powerInKw, true, this.powerDigits);
+			return this.fmtKw(watt, this.powerInKw);
 		},
 		updatePowerTooltip() {
 			this.powerTooltipInstance = this.updateTooltip(

diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
@@ -116,7 +116,6 @@ export default {
 		homePower: { type: Number, default: 0 },
 		batterySoc: { type: Number, default: 0 },
 		powerInKw: { type: Boolean, default: false },
-		powerDigits: { type: Number, default: 0 },
 	},
 	data: function () {
 		return { width: 0 };
@@ -172,7 +171,7 @@ export default {
 				return "";
 			}
 			const withUnit = this.enoughSpaceForUnit(watt);
-			return this.fmtKw(watt, this.powerInKw, withUnit, this.powerDigits);
+			return this.fmtKw(watt, this.powerInKw, withUnit);
 		},
 		powerLabelAvailableSpace(power) {
 			if (this.totalAdjusted === 0) return 0;
@@ -183,7 +182,7 @@ export default {
 			return this.powerLabelAvailableSpace(power) > 40;
 		},
 		enoughSpaceForUnit(power) {
-			return this.powerLabelAvailableSpace(power) > 80;
+			return this.powerLabelAvailableSpace(power) > 60;
 		},
 		hideLabelIcon(power, minWidth = 32) {
 			if (this.totalAdjusted === 0) return true;

diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue
@@ -315,10 +315,12 @@ export default {
 			api.delete(this.apiPath("vehicle"));
 		},
 		fmtPower(value) {
-			return this.fmtKw(value, this.inKw(value));
+			const inKw = value == 0 || value >= 1000;
+			return this.fmtKw(value, inKw);
 		},
 		fmtEnergy(value) {
-			return this.fmtKWh(value, this.inKw(value));
+			const inKw = value == 0 || value >= 1000;
+			return this.fmtKWh(value, inKw);
 		},
 	},
 };

diff --git a/assets/js/components/LoadpointSettingsModal.vue b/assets/js/components/LoadpointSettingsModal.vue
@@ -220,7 +220,7 @@ export default {
 					return this.maxPowerPhases(this.phasesConfigured);
 				}
 			}
-			return this.fmtKw(this.maxCurrent * V * this.phasesActive, true, true, 1);
+			return this.fmtKw(this.maxCurrent * V * this.phasesActive);
 		},
 		minPower: function () {
 			if (this.chargerPhases1p3p) {
@@ -231,7 +231,7 @@ export default {
 					return this.minPowerPhases(this.phasesConfigured);
 				}
 			}
-			return this.fmtKw(this.minCurrent * V * this.phasesActive, true, true, 1);
+			return this.fmtKw(this.minCurrent * V * this.phasesActive);
 		},
 		minCurrentOptions: function () {
 			const opt1 = [...range(Math.floor(this.maxCurrent), 1), 0.5, 0.25, 0.125];
@@ -279,10 +279,10 @@ export default {
 	},
 	methods: {
 		maxPowerPhases: function (phases) {
-			return this.fmtKw(this.maxCurrent * V * phases, true, true, 1);
+			return this.fmtKw(this.maxCurrent * V * phases);
 		},
 		minPowerPhases: function (phases) {
-			return this.fmtKw(this.minCurrent * V * phases, true, true, 1);
+			return this.fmtKw(this.minCurrent * V * phases);
 		},
 		formId: function (name) {
 			return `loadpoint_${this.id}_${name}`;

diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
@@ -33,15 +33,9 @@ export default {
       val = Math.abs(val);
       return val >= this.fmtLimit ? this.round(val / 1e3, this.fmtDigits) : this.round(val, 0);
     },
-    inKw: function (watt) {
-      return watt === 0 || watt >= 1000;
-    },
-    digitsKw: function (watt) {
-      return watt < 10000 ? 2 : 1;
-    },
     fmtKw: function (watt = 0, kw = true, withUnit = true, digits) {
       if (digits === undefined) {
-        digits = kw ? this.digitsKw(watt) : 0;
+        digits = kw ? 1 : 0;
       }
       const value = kw ? watt / 1000 : watt;
       let unit = "";

diff --git a/assets/js/mixins/formatter.test.js b/assets/js/mixins/formatter.test.js
@@ -12,14 +12,14 @@ const fmt = mount({
 
 describe("fmtkW", () => {
   test("should format kW and W", () => {
-    expect(fmt.fmtKw(0, true)).eq("0,00 kW");
-    expect(fmt.fmtKw(1200, true)).eq("1,20 kW");
+    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,00");
-    expect(fmt.fmtKw(1200, true, false)).eq("1,20");
+    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");
   });
@@ -32,8 +32,8 @@ describe("fmtkW", () => {
 
 describe("fmtKWh", () => {
   test("should format with units", () => {
-    expect(fmt.fmtKWh(1200)).eq("1,20 kWh");
-    expect(fmt.fmtKWh(1200, true)).eq("1,20 kWh");
+    expect(fmt.fmtKWh(1200)).eq("1,2 kWh");
+    expect(fmt.fmtKWh(1200, true)).eq("1,2 kWh");
     expect(fmt.fmtKWh(1200, false)).eq("1.200 Wh");
     expect(fmt.fmtKWh(1200, false, false)).eq("1.200");
   });

diff --git a/assets/js/views/ChargingSessions.vue b/assets/js/views/ChargingSessions.vue
@@ -299,7 +299,7 @@ export default {
 					unit: "kWh",
 					total: this.chargedEnergy,
 					value: (session) => session.chargedEnergy,
-					format: (value) => this.fmtKWh(value * 1e3, true, false, 2),
+					format: (value) => this.fmtKWh(value * 1e3, true, false),
 				},
 				{
 					name: "solar",

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.00 kW");
+    await expect(locator).toContainText("1.0 kW");
   });
 
   test("one loadpoint", async ({ page }) => {

diff --git a/tests/config.spec.js b/tests/config.spec.js
@@ -177,7 +177,7 @@ test.describe("meters", async () => {
     await expect(meterModal.getByRole("button", { name: "Validate & save" })).toBeVisible();
     await meterModal.getByRole("link", { name: "validate" }).click();
     await expect(meterModal.getByText("SoC: 75.0%")).toBeVisible();
-    await expect(meterModal.getByText("Power: -2.50 kW")).toBeVisible();
+    await expect(meterModal.getByText("Power: -2.5 kW")).toBeVisible();
     await meterModal.getByRole("button", { name: "Save" }).click();
     await expect(page.getByTestId("battery")).toBeVisible(1);
     await expect(page.getByTestId("battery")).toContainText("openems");
@@ -190,14 +190,14 @@ test.describe("meters", async () => {
     await expect(page.getByTestId("battery")).toBeVisible(1);
     await expect(page.getByTestId("battery")).toContainText("openems");
     await expect(page.getByTestId("battery").getByText("SoC: 75.0%")).toBeVisible();
-    await expect(page.getByTestId("battery").getByText("Power: -2.50 kW")).toBeVisible();
+    await expect(page.getByTestId("battery").getByText("Power: -2.5 kW")).toBeVisible();
     await expect(page.getByTestId("battery").getByText("Capacity: 20.0 kWh")).toBeVisible();
 
     // restart and check in main ui
     await restart(CONFIG_EMPTY);
     await page.goto("/");
     await page.getByTestId("visualization").click();
-    await expect(page.getByTestId("energyflow")).toContainText("Battery charging75%2.50 kW");
+    await expect(page.getByTestId("energyflow")).toContainText("Battery charging75%2.5 kW");
 
     // delete #1
     await page.goto("/#/config");