Session UI: add absolute CO2 emissions (#27460)

assets/js/components/Loadpoints/SessionInfo.vue

@@ -50,6 +50,7 @@ export default defineComponent({
 		sessionSolarPercentage: { type: Number, default: 0 },
 		chargeRemainingDurationInterpolated: { type: Number, default: 0 },
 		chargeDurationInterpolated: Number,
+		sessionEnergy: { type: Number, default: 0 },
 		tariffCo2: Number,
 		tariffGrid: Number,
 	},
@@ -101,6 +102,11 @@ export default defineComponent({
 					valueSm: this.fmtCo2Short(this.sessionCo2PerKWh),
 					available: this.tariffCo2 !== undefined,
 				},
+				{
+					key: "emission" as const,
+					value: this.emissionFormatted,
+					available: this.tariffCo2 !== undefined,
+				},
 			];
 			// only show options that are available
 			return result.filter(({ available }) => available === undefined || available);
@@ -142,6 +148,10 @@ export default defineComponent({
 		solarFormatted() {
 			return this.fmtPercentage(this.sessionSolarPercentage, 1);
 		},
+		emissionFormatted() {
+			const kWh = this.sessionEnergy / 1000;
+			return this.fmtGrams(this.sessionCo2PerKWh * kWh);
+		},
 		priceFormatted() {
 			return `${this.fmtMoney(this.sessionPrice, this.currency)} ${this.fmtCurrencySymbol(
 				this.currency

assets/js/components/Sessions/SessionDetailsModal.vue

@@ -105,10 +105,11 @@
 						</td>
 					</tr>
 					<tr v-if="session.co2PerKWh != null" data-testid="session-details-co2">
-						<th>
+						<th class="align-baseline">
 							{{ $t("session.co2") }}
 						</th>
 						<td>
+							{{ totalCo2Formatted }}<br />
 							{{ fmtCo2Medium(session.co2PerKWh) }}
 						</td>
 					</tr>
@@ -193,6 +194,10 @@ export default defineComponent({
 		chargedEnergy() {
 			return this.session.chargedEnergy * 1e3;
 		},
+		totalCo2Formatted(): string {
+			const grams = (this.session.co2PerKWh ?? 0) * (this.session.chargedEnergy ?? 0);
+			return this.fmtGrams(grams);
+		},
 		avgPower() {
 			const hours = this.session.chargeDuration / 1e9 / 3600;
 			return this.chargedEnergy / hours;

assets/js/types/evcc.ts

@@ -390,6 +390,7 @@ export type SessionInfoKey =
   | "solar"
   | "avgPrice"
   | "price"
+  | "emission"
   | "co2";
 
 export interface SponsorStatus {

i18n/de.json

@@ -1022,6 +1022,7 @@
       "charged": "Geladen",
       "co2": "⌀ CO₂",
       "duration": "Ladedauer",
+      "emission": "Emission",
       "fallbackName": "Ladepunkt",
       "finished": "Ladeende",
       "power": "Leistung",

i18n/en.json

@@ -1022,6 +1022,7 @@
       "charged": "Charged",
       "co2": "⌀ CO₂",
       "duration": "Duration",
+      "emission": "Emission",
       "fallbackName": "Charging point",
       "finished": "Finish time",
       "power": "Power",

tests/sessions.spec.ts

@@ -343,6 +343,7 @@ test.describe("session details", async () => {
     await expect(modal.getByTestId("session-details-energy")).toContainText("1:00");
     await expect(modal.getByTestId("session-details-solar")).toContainText("100.0% (10.0 kWh)");
     await expect(modal.getByTestId("session-details-price")).toContainText("2.00 € 20.0 ct/kWh");
+    await expect(modal.getByTestId("session-details-co2")).toContainText("3 kg");
     await expect(modal.getByTestId("session-details-co2")).toContainText("300 g/kWh");
   });