Skip to content

Commit

Permalink
Revert "UI: adaptive power digits (#13619)" (#13653)
Browse files Browse the repository at this point in the history 
This reverts commit a6056e2.
  • Loading branch information
@naltatis
naltatis committed Apr 30, 2024
1 parent 4ed241e commit 4b6ff7e
Show file tree
Hide file tree
Showing 10 changed files with 35 additions and 74 deletions.
51 changes: 12 additions & 39 deletions assets/js/components/Energyflow/Energyflow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
:pvProduction="pvProduction"
:homePower="homePower"
:batterySoc="batterySoc"
:powerInKw="visualizationFormat.kw"
:powerDigits="visualizationFormat.digits"
:powerInKw="powerInKw"
:vehicleIcons="vehicleIcons"
/>
</div>
Expand Down Expand Up @@ -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"
Expand All @@ -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)"
Expand All @@ -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)"
Expand All @@ -134,8 +129,7 @@
icon="vehicle"
:vehicleIcons="vehicleIcons"
:power="loadpointsPower"
:powerInKw="entryFormat.kw"
:powerDigits="entryFormat.digits"
:powerInKw="powerInKw"
:details="
activeLoadpointsCount
? detailsValue(tariffPriceLoadpoints, tariffCo2Loadpoints)
Expand All @@ -151,8 +145,7 @@
:name="batteryChargeLabel"
icon="battery"
:power="batteryCharge"
:powerInKw="entryFormat.kw"
:powerDigits="entryFormat.digits"
:powerInKw="powerInKw"
:soc="batterySoc"
:details="batterySoc"
:detailsFmt="batteryFmt"
Expand All @@ -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)"
Expand Down Expand Up @@ -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;
Expand All @@ -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)}%`;
Expand Down Expand Up @@ -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();
Expand Down
9 changes: 1 addition & 8 deletions assets/js/components/Energyflow/EnergyflowEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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(
Expand Down
5 changes: 2 additions & 3 deletions assets/js/components/Energyflow/Visualization.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
6 changes: 4 additions & 2 deletions assets/js/components/Loadpoint.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
},
};
Expand Down
8 changes: 4 additions & 4 deletions assets/js/components/LoadpointSettingsModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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];
Expand Down Expand Up @@ -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}`;
Expand Down
8 changes: 1 addition & 7 deletions assets/js/mixins/formatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
Expand Down
12 changes: 6 additions & 6 deletions assets/js/mixins/formatter.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
Expand All @@ -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");
});
Expand Down
2 changes: 1 addition & 1 deletion assets/js/views/ChargingSessions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion tests/basics.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down
6 changes: 3 additions & 3 deletions tests/config.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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");
Expand Down

0 comments on commit 4b6ff7e

Please sign in to comment.