Refactor savings (#2226)

assets/js/components/Footer.stories.js

@@ -19,9 +19,9 @@ KeinUpdate.args = {
   version: { installed: "0.40" },
   savings: {
     since: 82800,
-    chargedTotal: 15231,
-    chargedSelfConsumption: 12231,
-    selfPercentage: 80.3,
+    totalCharged: 15231,
+    selfConsumptionCharged: 12231,
+    selfConsumptionPercent: 80.3,
   },
 };
 
@@ -32,9 +32,9 @@ Sponsor.args = {
   },
   savings: {
     since: 82800,
-    chargedTotal: 21000,
-    chargedSelfConsumption: 12000,
-    selfPercentage: 54,
+    totalCharged: 21000,
+    selfConsumptionCharged: 12000,
+    selfConsumptionPercent: 54,
   },
   sponsor: "naltatis",
 };
@@ -48,9 +48,9 @@ UpdateVerfuegbar.args = {
   },
   savings: {
     since: 82800,
-    chargedTotal: 15231,
-    chargedSelfConsumption: 15000,
-    selfPercentage: 74,
+    totalCharged: 15231,
+    selfConsumptionCharged: 15000,
+    selfConsumptionPercent: 74,
   },
 };
 
@@ -64,9 +64,9 @@ Updater.args = {
   },
   savings: {
     since: 82800,
-    chargedTotal: 0,
-    chargedSelfConsumption: 0,
-    selfPercentage: 0,
+    totalCharged: 0,
+    selfConsumptionCharged: 0,
+    selfConsumptionPercent: 0,
   },
 };
 
@@ -79,9 +79,9 @@ Upgrade.args = {
   },
   savings: {
     since: 82800,
-    chargedTotal: 0,
-    chargedSelfConsumption: 0,
-    selfPercentage: 0,
+    totalCharged: 0,
+    selfConsumptionCharged: 0,
+    selfConsumptionPercent: 0,
   },
 };
 
@@ -94,8 +94,8 @@ Savings.args = {
   },
   savings: {
     since: 82800,
-    chargedTotal: 15231,
-    chargedSelfConsumption: 12231,
-    selfPercentage: 80.3,
+    totalCharged: 15231,
+    selfConsumptionCharged: 12231,
+    selfConsumptionPercent: 80.3,
   },
 };

assets/js/components/Savings.vue

@@ -25,11 +25,22 @@
 				<div class="modal-content">
 					<div class="modal-header">
 						<h5 class="modal-title">
-							{{
-								$t("footer.savings.modalTitle", {
-									total: fmtKw(chargedTotal * 1000, true, false),
-								})
-							}}
+							<span class="d-block d-sm-none">
+								{{
+									$t("footer.savings.modalTitleShort", {
+										percent,
+										total: fmtKw(totalCharged * 1000, true, false),
+									})
+								}}
+							</span>
+							<span class="d-none d-sm-block">
+								{{
+									$t("footer.savings.modalTitleLong", {
+										percent,
+										total: fmtKw(totalCharged * 1000, true, false),
+									})
+								}}
+							</span>
 						</h5>
 						<button
 							type="button"
@@ -45,15 +56,15 @@
 									<fa-icon icon="square" class="text-evcc"></fa-icon>
 									{{
 										$t("footer.savings.modalChartSelf", {
-											self: fmtKw(chargedSelfConsumption * 1000, true, false),
+											self: fmtKw(selfConsumptionCharged * 1000, true, false),
 										})
 									}}
 								</div>
 								<div class="text-nowrap">
 									<fa-icon icon="square" class="text-grid"></fa-icon>
 									{{
 										$t("footer.savings.modalChartGrid", {
-											grid: fmtKw(chargedGrid * 1000, true, false),
+											grid: fmtKw(gridCharged * 1000, true, false),
 										})
 									}}
 								</div>
@@ -62,21 +73,21 @@
 								class="chart d-flex justify-content-stretch mb-1 rounded overflow-hidden"
 							>
 								<div
-									v-if="chargedTotal > 0"
+									v-if="totalCharged > 0"
 									class="chart-item chart-item--self d-flex justify-content-center text-white flex-shrink-1"
 									:style="{ width: `${percent}%` }"
 								>
 									<span class="text-truncate"> {{ percent }}% </span>
 								</div>
 								<div
-									v-if="chargedTotal > 0"
+									v-if="totalCharged > 0"
 									class="chart-item chart-item--grid d-flex justify-content-center text-white flex-shrink-1"
 									:style="{ width: `${100 - percent}%` }"
 								>
 									<span class="text-truncate"> {{ 100 - percent }}% </span>
 								</div>
 								<div
-									v-if="chargedTotal === 0"
+									v-if="totalCharged === 0"
 									class="chart-item chart-item--no-data d-flex justify-content-center text-white w-100"
 								>
 									<span>{{ $t("footer.savings.modalNoData") }}</span>
@@ -85,15 +96,15 @@
 						</div>
 						<p class="mb-3">
 							{{ $t("footer.savings.modalSavingsPrice") }}:
-							<strong>{{ pricePerKWh }}</strong>
+							<strong>{{ fmtPricePerKWh(effectivePrice, currency) }}</strong>
 							<br />
 							{{ $t("footer.savings.modalSavingsTotal") }}:
-							<strong>{{ savingAmount }}</strong>
+							<strong>{{ fmtMoney(amount, currency) }}</strong>
 						</p>
 
 						<p class="small text-muted mb-3">
 							<a
-								href="https://github.com/evcc-io/evcc/blob/master/README.md#energy-tariffs--savings-estimate"
+								href="https://docs.evcc.io/docs/guides/setup/#ersparnisberechnung"
 								target="_blank"
 								class="text-muted"
 							>
@@ -153,36 +164,21 @@ export default {
 	components: { Sponsor },
 	mixins: [formatter],
 	props: {
-		selfPercentage: Number,
+		selfConsumptionPercent: Number,
 		since: { type: Number, default: 0 },
 		sponsor: String,
-		chargedTotal: { type: Number, default: 0 },
-		chargedSelfConsumption: { type: Number, default: 0 },
-		gridPrice: { type: Number, default: 0.3 },
-		feedInPrice: { type: Number, default: 0.08 },
+		amount: { type: Number, default: 0 },
+		effectivePrice: { type: Number, default: 0 },
+		totalCharged: { type: Number, default: 0 },
+		gridCharged: { type: Number, default: 0 },
+		selfConsumptionCharged: { type: Number, default: 0 },
+		gridPrice: { type: Number },
+		feedInPrice: { type: Number },
 		currency: String,
 	},
 	computed: {
-		chargedGrid() {
-			return this.chargedTotal - this.chargedSelfConsumption;
-		},
-		defaultPrices() {
-			const { gridPrice, feedInPrice } = this.$options.propsData;
-			return gridPrice === undefined || feedInPrice === undefined;
-		},
-		savingAmount() {
-			const priceDiff = (this.gridPrice - this.feedInPrice) / 100;
-			const saving = this.chargedSelfConsumption * priceDiff;
-			return this.fmtMoney(saving, this.currency);
-		},
-		pricePerKWh() {
-			const total =
-				this.chargedGrid * this.gridPrice + this.chargedSelfConsumption * this.feedInPrice;
-			const perKWh = total / this.chargedTotal;
-			return this.fmtPricePerKWh(perKWh || this.gridPrice, this.currency);
-		},
 		percent() {
-			return Math.round(this.selfPercentage) || 0;
+			return Math.round(this.selfConsumptionPercent) || 0;
 		},
 	},
 };

assets/js/components/Sponsor.vue

@@ -12,12 +12,7 @@
 				<fa-icon :icon="['fas', 'heart']" class="icon me-1 solid"></fa-icon>
 				{{ $t("footer.sponsor.confetti") }}
 			</button>
-			<a
-				v-if="false"
-				href="https://evcc.io/sticker"
-				target="_blank"
-				class="small text-muted text-center"
-			>
+			<a href="https://evcc.io/sticker" target="_blank" class="small text-muted text-center">
 				{{ $t("footer.sponsor.sticker") }}
 			</a>
 		</div>

assets/js/i18n/de.js

@@ -20,27 +20,28 @@ export default {
     },
     savings: {
       footerShort: "{percent}% Sonne",
-      footerLong: "{percent}% Sonnenstrom ",
-      modalTitle: "{total} kWh Strom geladen",
-      modalChartGrid: "Netzstrom {grid} kWh",
-      modalChartSelf: "Sonnenstrom {self} kWh",
-      modalSavingsPrice: "Effektiver Strompreis",
+      footerLong: "{percent}% Sonnenenergie",
+      modalTitleShort: "{total} kWh geladen · {percent}% Sonne",
+      modalTitleLong: "{total} kWh geladen · {percent}% Sonnenenergie",
+      modalChartGrid: "Netz {grid} kWh",
+      modalChartSelf: "Sonne {self} kWh",
+      modalSavingsPrice: "Effektiver Energiepreis",
       modalSavingsTotal: "Ersparnis gegenüber Netzbezug",
       modalExplaination: "Berechnung",
-      modalExplainationGrid: "Netzstrom {gridPrice}",
+      modalExplainationGrid: "Netz {gridPrice}",
       modalExplainationFeedIn: "Einspeisung {feedInPrice}",
       modalServerStart: "Seit Serverstart {since}.",
       modalNoData: "noch nicht geladen",
       experimentalLabel: "experimentell",
       experimentalText: "Unplausible Werte? Fragen zur Ansicht? Meld dich gerne in den",
     },
     sponsor: {
-      thanks: "Danke für deine Unterstützung {sponsor}! Das hilft uns bei der Weiterentwicklung.",
+      thanks: "Danke für deine Unterstützung, {sponsor}! Das hilft uns bei der Weiterentwicklung.",
       confetti: "Lust auf etwas Sponsor-Konfetti?",
       supportUs:
         "Wir möchten effizientes Zuhause-Laden zum Standard für möglichst viele Menschen machen. Helfe uns indem du die Weiterentwicklung und Pflege des Projekts unterstützt.",
       sticker: "...oder evcc Sticker?",
-      confettiPromise: "Es gibt auch Konfetti ;)",
+      confettiPromise: "Es gibt auch Sticker und digitales Konfetti ;)",
       becomeSponsor: "Werde jetzt GitHub Sponsor",
     },
   },

assets/js/i18n/en.js

@@ -21,7 +21,8 @@ export default {
     savings: {
       footerShort: "{percent}% solar",
       footerLong: "{percent}% solar energy",
-      modalTitle: "{total} kWh solar energy charged",
+      modalTitleShort: "{total} kWh charged · {percent}% solar",
+      modalTitleLong: "{total} kWh charged · {percent}% solar energy",
       modalChartGrid: "Grid energy {grid} kWh",
       modalChartSelf: "Solar energy {self} kWh",
       modalSavingsPrice: "Effective energy price",
@@ -35,12 +36,12 @@ export default {
       experimentalText: "Implausible values? Questions about this view? Feel free to join our ",
     },
     sponsor: {
-      thanks: "Thanks for your support {sponsor}! It helps us with the further development.",
+      thanks: "Thanks for your support, {sponsor}! It helps us with the further development.",
       confetti: "Ready for some sponsor confetti?",
       supportUs:
         "We want to make efficient home charging the standard for as many people as possible. Help us by supporting the further development and maintenance of the project.",
       sticker: "...or evcc stickers?",
-      confettiPromise: "There will be confetti ;)",
+      confettiPromise: "There will be stickers and digital confetti ;)",
       becomeSponsor: "Become a GitHub Sponsor",
     },
   },

assets/js/mixins/formatter.js

@@ -101,11 +101,13 @@ export default {
     fmtPricePerKWh: function (amout = 0, currency = "EUR") {
       let unit = currency;
       let value = amout;
+      let maximumFractionDigits = 3;
       if (["EUR", "USD"].includes(currency)) {
         value *= 100;
         unit = "ct";
+        maximumFractionDigits = 1;
       }
-      return `${this.$n(value, { style: "decimal" })} ${unit}/kWh`;
+      return `${this.$n(value, { style: "decimal", maximumFractionDigits })} ${unit}/kWh`;
     },
     fmtTimeAgo: function (elapsed) {
       const units = {

assets/js/views/App.vue

@@ -103,9 +103,12 @@ export default {
 		savings: function () {
 			return {
 				since: this.store.state.savingsSince,
-				chargedTotal: this.store.state.savingsChargedTotal,
-				chargedSelfConsumption: this.store.state.savingsChargedSelfConsumption,
-				selfPercentage: this.store.state.savingsSelfPercentage,
+				totalCharged: this.store.state.savingsTotalCharged,
+				gridCharged: this.store.state.savingsGridCharged,
+				selfConsumptionCharged: this.store.state.savingsSelfConsumptionCharged,
+				amount: this.store.state.savingsAmount,
+				effectivePrice: this.store.state.savingsEffectivePrice,
+				selfConsumptionPercent: this.store.state.savingsSelfConsumptionPercent,
 				gridPrice: this.store.state.tariffGrid,
 				feedInPrice: this.store.state.tariffFeedIn,
 				currency: this.store.state.currency,