diff --git a/assets/js/components/BatterySettingsModal.vue b/assets/js/components/BatterySettingsModal.vue
index 2140db998..9fa382ba6 100644
--- a/assets/js/components/BatterySettingsModal.vue
+++ b/assets/js/components/BatterySettingsModal.vue
@@ -436,7 +436,7 @@ export default {
return { transform: `scale(${scale})` };
},
fmtSoc(soc) {
- return `${Math.round(soc)}%`;
+ return this.fmtPercentage(soc);
},
async changeDischargeControl(e) {
try {
diff --git a/assets/js/components/ChargingPlan.vue b/assets/js/components/ChargingPlan.vue
index 7fb993577..3e4060a3b 100644
--- a/assets/js/components/ChargingPlan.vue
+++ b/assets/js/components/ChargingPlan.vue
@@ -176,7 +176,7 @@ export default {
return this.targetChargeEnabled || this.minSocEnabled;
},
minSocLabel: function () {
- return `${Math.round(this.minSoc)}%`;
+ return this.fmtPercentage(this.minSoc);
},
modalId: function () {
return `chargingPlanModal_${this.id}`;
@@ -204,7 +204,7 @@ export default {
},
targetSocLabel: function () {
if (this.socBasedPlanning) {
- return `${Math.round(this.effectivePlanSoc)}%`;
+ return this.fmtPercentage(this.effectivePlanSoc);
}
return fmtEnergy(
this.planEnergy,
diff --git a/assets/js/components/ChargingPlanArrival.vue b/assets/js/components/ChargingPlanArrival.vue
index a42f09e5c..a94270a99 100644
--- a/assets/js/components/ChargingPlanArrival.vue
+++ b/assets/js/components/ChargingPlanArrival.vue
@@ -20,7 +20,11 @@
- {{ $t("main.loadpointSettings.minSoc.description", [selectedMinSoc || "x"]) }}
+ {{
+ $t("main.loadpointSettings.minSoc.description", [
+ selectedMinSoc ? fmtPercentage(selectedMinSoc) : "x",
+ ])
+ }}
diff --git a/assets/js/components/ChargingPlanSettingsEntry.vue b/assets/js/components/ChargingPlanSettingsEntry.vue
index df877066a..50bfd04de 100644
--- a/assets/js/components/ChargingPlanSettingsEntry.vue
+++ b/assets/js/components/ChargingPlanSettingsEntry.vue
@@ -176,6 +176,7 @@ export default {
this.capacity || 100,
this.socPerKwh,
this.fmtKWh,
+ this.fmtPercentage,
"-"
);
// remove the first entry (0)
diff --git a/assets/js/components/ChargingPlanWarnings.vue b/assets/js/components/ChargingPlanWarnings.vue
index bdb0cbc9f..48899ba24 100644
--- a/assets/js/components/ChargingPlanWarnings.vue
+++ b/assets/js/components/ChargingPlanWarnings.vue
@@ -129,7 +129,7 @@ export default {
},
methods: {
fmtSoc(soc) {
- return `${Math.round(soc)}%`;
+ return this.fmtPercentage(soc);
},
},
};
diff --git a/assets/js/components/ChargingSessionModal.vue b/assets/js/components/ChargingSessionModal.vue
index 6721878ac..d5f8c2d46 100644
--- a/assets/js/components/ChargingSessionModal.vue
+++ b/assets/js/components/ChargingSessionModal.vue
@@ -79,9 +79,8 @@
{{ $t("sessions.solar") }}
- {{ fmtNumber(session.solarPercentage, 1) }}% ({{
- fmtKWh(solarEnergy, solarEnergy >= 1e3)
- }})
+ {{ fmtPercentage(session.solarPercentage, 1) }}
+ ({{ fmtKWh(solarEnergy, solarEnergy >= 1e3) }})
|
diff --git a/assets/js/components/Config/DeviceTags.vue b/assets/js/components/Config/DeviceTags.vue
index bc1ea7584..594621eca 100644
--- a/assets/js/components/Config/DeviceTags.vue
+++ b/assets/js/components/Config/DeviceTags.vue
@@ -41,7 +41,8 @@ export default {
case "chargedEnergy":
return this.fmtKWh(value * 1e3);
case "soc":
- return `${this.fmtNumber(value, 1)}%`;
+ case "socLimit":
+ return this.fmtPercentage(value, 1);
case "odometer":
case "range":
return `${this.fmtNumber(value, 0)} km`;
@@ -53,8 +54,6 @@ export default {
return value.map((v) => this.fmtKw(v)).join(", ");
case "chargeStatus":
return value;
- case "socLimit":
- return `${this.fmtNumber(value)}%`;
}
return value;
},
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index 857044bf9..5d7ef22cf 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -288,7 +288,7 @@ export default {
return this.pv.map(({ power }) => this.fmtKw(power, this.powerInKw));
},
batteryFmt() {
- return (soc) => `${Math.round(soc)}%`;
+ return (soc) => this.fmtPercentage(soc, 0);
},
co2Available() {
return this.smartCostType === CO2_TYPE;
diff --git a/assets/js/components/LimitEnergySelect.vue b/assets/js/components/LimitEnergySelect.vue
index 27a1a3d8a..1cad71da2 100644
--- a/assets/js/components/LimitEnergySelect.vue
+++ b/assets/js/components/LimitEnergySelect.vue
@@ -57,6 +57,7 @@ export default {
this.capacity || 100,
this.socPerKwh,
this.fmtKWh,
+ this.fmtPercentage,
this.$t("main.targetEnergy.noLimit")
);
},
@@ -75,7 +76,7 @@ export default {
return fmtEnergy(value, this.step, this.fmtKWh, this.$t("main.targetEnergy.noLimit"));
},
fmtSoc: function (value) {
- return `+${Math.round(value)}%`;
+ return `+${this.fmtPercentage(value)}`;
},
},
};
diff --git a/assets/js/components/LimitSocSelect.vue b/assets/js/components/LimitSocSelect.vue
index 753bf111a..8ce4183af 100644
--- a/assets/js/components/LimitSocSelect.vue
+++ b/assets/js/components/LimitSocSelect.vue
@@ -67,7 +67,7 @@ export default {
return null;
},
formatSoc: function (value) {
- return this.heating ? this.fmtTemperature(value) : `${Math.round(value)}%`;
+ return this.heating ? this.fmtTemperature(value) : this.fmtPercentage(value);
},
formatKm: function (value) {
return `${this.fmtNumber(value, 0)} ${distanceUnit()}`;
diff --git a/assets/js/components/LoadpointSessionInfo.vue b/assets/js/components/LoadpointSessionInfo.vue
index 7c904e3ea..46d6448e9 100644
--- a/assets/js/components/LoadpointSessionInfo.vue
+++ b/assets/js/components/LoadpointSessionInfo.vue
@@ -117,7 +117,7 @@ export default {
return this.valueSm !== undefined;
},
solarFormatted() {
- return `${this.fmtNumber(this.sessionSolarPercentage, 1)}%`;
+ return this.fmtPercentage(this.sessionSolarPercentage, 1);
},
priceFormatted() {
return `${this.fmtMoney(this.sessionPrice, this.currency)} ${this.fmtCurrencySymbol(
diff --git a/assets/js/components/Savings.vue b/assets/js/components/Savings.vue
index 324cd3b95..210658abc 100644
--- a/assets/js/components/Savings.vue
+++ b/assets/js/components/Savings.vue
@@ -228,7 +228,7 @@ export default {
return `${docsPrefix()}/docs/reference/configuration/tariffs`;
},
percent() {
- return Math.round(this.solarPercentage) || 0;
+ return this.fmtPercentage(this.solarPercentage || 0);
},
regionOptions() {
return co2Reference.regions.map((r) => ({
diff --git a/assets/js/components/SavingsTile.vue b/assets/js/components/SavingsTile.vue
index c01c6a303..36972b3c3 100644
--- a/assets/js/components/SavingsTile.vue
+++ b/assets/js/components/SavingsTile.vue
@@ -15,11 +15,13 @@
{{ title }}
-
+
{{ value }}
- {{ unit }}
+
+ {{ unit }}
+
@@ -37,10 +39,12 @@ import "@h2d2/shopicons/es/regular/receivepayment";
import "@h2d2/shopicons/es/regular/car3";
import "@h2d2/shopicons/es/regular/eco1";
import AnimatedNumber from "./AnimatedNumber.vue";
+import formatter from "../mixins/formatter";
export default {
name: "SavingsTile",
components: { AnimatedNumber },
+ mixins: [formatter],
props: {
title: String,
icon: String,
@@ -50,6 +54,11 @@ export default {
sub1: String,
sub2: String,
},
+ computed: {
+ leadingUnit() {
+ return this.unit === "%" && this.hasLeadingPercentageSign();
+ },
+ },
};