Sessions UI: improve titles, labels, units (evcc-io#16776)

assets/js/colors.js

@@ -23,14 +23,14 @@ const colors = reactive({
     "#03C1EFFF",
     "#FD6158FF",
     "#31AB4AFF",
-    "#0AAFBFFF",
+    "#41517AFF",
     "#FF922EFF",
     "#0F662DFF",
     "#0470D4FF",
     "#FFBD2FFF",
     "#77C93EFF",
-    "#41517AFF",
     "#4E1D10FF",
+    "#0AAFBFFF",
     "#813504FF",
   ],
 });

assets/js/components/Sessions/AvgCostGroupedChart.vue

@@ -133,8 +133,8 @@ export default {
 	methods: {
 		formatValue(value) {
 			return this.costType === TYPES.CO2
-				? this.fmtCo2Short(value)
-				: this.fmtPricePerKWh(value, this.currency, true);
+				? this.fmtCo2Medium(value)
+				: this.fmtPricePerKWh(value, this.currency);
 		},
 	},
 };

assets/js/components/Sessions/CostHistoryChart.vue

@@ -158,8 +158,8 @@ export default {
 				type: "line",
 				label:
 					this.costType === TYPES.PRICE
-						? this.pricePerKWhUnit(this.currency, false)
-						: "gCO₂e/kWh",
+						? this.$t("sessions.avgPrice")
+						: this.$t("sessions.co2"),
 				data: Object.values(result).map((index) => index.avgCost || null),
 				yAxisID: "y1",
 				tension: 0.25,
@@ -187,8 +187,10 @@ export default {
 					const max = Math.max(...items);
 					const format = (value, withUnit) => {
 						return this.costType === TYPES.PRICE
-							? this.fmtPricePerKWh(value, this.currency, true, withUnit)
-							: this.fmtGrams(value, withUnit);
+							? this.fmtPricePerKWh(value, this.currency, false, withUnit)
+							: withUnit
+								? this.fmtCo2Medium(value)
+								: this.fmtGrams(value, false);
 					};
 					value = `${format(min, false)} – ${format(max, true)}`;
 				} else {
@@ -255,7 +257,8 @@ export default {
 									}
 
 									return (
-										"⌀ " +
+										datasetLabel +
+										": " +
 										(this.costType === TYPES.PRICE
 											? this.fmtPricePerKWh(value, this.currency, false)
 											: this.fmtCo2Medium(value))

assets/js/views/Sessions.vue

@@ -72,9 +72,11 @@
 				</div>
 
 				<h3
-					class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden justify-content-between"
+					class="fw-normal my-0 d-flex gap-3 flex-wrap d-flex align-items-baseline overflow-hidden"
 				>
-					<span class="d-block no-wrap text-truncate">{{ historyTitle }}</span>
+					<span v-if="historyTitle" class="d-block no-wrap text-truncate">
+						{{ historyTitle }}
+					</span>
 					<small class="d-block no-wrap text-truncate">{{ historySubTitle }}</small>
 				</h3>
 				<EnergyHistoryChart
@@ -262,13 +264,10 @@ export default {
 			return store.state.currency || "EUR";
 		},
 		energyTitle() {
-			return this.$t("sessions.energyTitle", { percent: this.solarPercentageFmt });
+			return this.$t("sessions.chartTitle.energy");
 		},
 		historyTitle() {
-			if (this.activeType === TYPES.SOLAR) {
-				return this.energyTitle;
-			}
-			return this.costTitle;
+			return this.activeType === TYPES.SOLAR ? this.energyTitle : this.costTitle;
 		},
 		historySubTitle() {
 			if (this.activeType === TYPES.SOLAR) {
@@ -297,34 +296,46 @@ export default {
 			return this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO);
 		},
 		energySubTitle() {
-			return this.$t("sessions.energySubTitle", { energy: this.energySumFmt });
+			const total = this.$t("sessions.chartTitle.energySubTotal", {
+				value: this.energySumFmt,
+			});
+			const solar = this.$t("sessions.chartTitle.energySubSolar", {
+				value: this.solarPercentageFmt,
+			});
+			return `${total} ・ ${solar}`;
 		},
 		solarTitle() {
 			return this.selectedGroup === GROUPS.NONE
-				? this.$t("sessions.solarTitle")
-				: this.$t("sessions.solarTitleByGroup", { byGroup: this.byGroupTitle });
+				? this.$t("sessions.chartTitle.solar")
+				: this.$t("sessions.chartTitle.solarByGroup", { byGroup: this.byGroupTitle });
 		},
 		byGroupTitle() {
 			if (this.selectedGroup === GROUPS.LOADPOINT) {
-				return this.$t("sessions.byGroupLoadpoint");
+				return this.$t("sessions.chartTitle.byGroupLoadpoint");
 			} else if (this.selectedGroup === GROUPS.VEHICLE) {
-				return this.$t("sessions.byGroupVehicle");
+				return this.$t("sessions.chartTitle.byGroupVehicle");
 			}
 			return "";
 		},
 		energyGroupedTitle() {
 			if (this.selectedGroup === GROUPS.NONE) {
-				return this.$t("sessions.energyGroupedTitle", { energy: this.energySumFmt });
+				return this.$t("sessions.chartTitle.energyGrouped");
 			}
-			return this.$t("sessions.energyGroupedTitleByGroup", { byGroup: this.byGroupTitle });
+			return this.$t("sessions.chartTitle.energyGroupedByGroup", {
+				byGroup: this.byGroupTitle,
+			});
 		},
 		avgCostTitle() {
 			const type = this.activeType === TYPES.PRICE ? "Price" : "Co2";
-			return this.$t(`sessions.avg${type}TitleByGroup`, { byGroup: this.byGroupTitle });
+			return this.$t(`sessions.chartTitle.avg${type}ByGroup`, {
+				byGroup: this.byGroupTitle,
+			});
 		},
 		costGroupedTitle() {
 			const type = this.activeType === TYPES.PRICE ? "Price" : "Co2";
-			return this.$t(`sessions.grouped${type}TitleByGroup`, { byGroup: this.byGroupTitle });
+			return this.$t(`sessions.chartTitle.grouped${type}ByGroup`, {
+				byGroup: this.byGroupTitle,
+			});
 		},
 		periodOptions() {
 			return Object.entries(PERIODS).map(([key, value]) => ({
@@ -385,20 +396,22 @@ export default {
 			return energy ? this.totalCo2 / energy : null;
 		},
 		costTitle() {
-			const value =
-				this.activeType === TYPES.PRICE
-					? this.fmtPricePerKWh(this.pricePerKWh, this.currency)
-					: this.fmtCo2Medium(this.co2PerKWh);
 			const type = this.activeType === TYPES.PRICE ? "Price" : "Co2";
-			return this.$t(`sessions.history${type}Title`, { value });
+			return this.$t(`sessions.chartTitle.history${type}`);
+		},
+		avgCostFmt() {
+			return this.activeType === TYPES.PRICE
+				? this.fmtPricePerKWh(this.pricePerKWh, this.currency)
+				: this.fmtCo2Medium(this.co2PerKWh);
 		},
 		costSubTitle() {
 			const type = this.activeType === TYPES.PRICE ? "Price" : "Co2";
 			const value =
 				this.activeType === TYPES.PRICE
 					? this.fmtMoney(this.totalPrice, this.currency, true, true)
 					: this.fmtGrams(this.totalCo2);
-			return this.$t(`sessions.history${type}SubTitle`, { value });
+			const total = this.$t(`sessions.chartTitle.history${type}Sub`, { value });
+			return `${total} ・ ⌀ ${this.avgCostFmt}`;
 		},
 		activeType() {
 			if (this.selectedType === TYPES.PRICE && this.typePriceAvailable) {

i18n/de.toml

@@ -424,7 +424,7 @@ co2 = "⌀ CO₂"
 duration = "Ladedauer"
 fallbackName = "Ladepunkt"
 power = "Leistung"
-price = "Σ Preis"
+price = "Kosten"
 remaining = "Restzeit"
 remoteDisabledHard = "{source}: Deaktiviert"
 remoteDisabledSoft = "{source}: Adaptives PV-Laden deaktiviert"
@@ -611,41 +611,44 @@ started = "Startzeit"
 title = "Ladevorgang"
 
 [sessions]
-avgCo2TitleByGroup = "⌀ CO₂ {byGroup}"
 avgPower = "⌀ Leistung"
 avgPrice = "⌀ Preis"
-avgPriceTitleByGroup = "⌀ Ladepreis {byGroup}"
-byGroupLoadpoint = "je Ladepunkt"
-byGroupVehicle = "je Fahrzeug"
 chargeDuration = "Ladedauer"
 co2 = "⌀ CO₂"
 csvMonth = "Download {month} CSV"
 csvTotal = "Gesamte CSV herunterladen"
 date = "Anfang"
 downloadCsv = "Als CSV herunterladen"
 energy = "Geladen"
-energyGroupedTitle = "Energiemenge {energy}"
-energyGroupedTitleByGroup = "Energiemenge {byGroup}"
-energySubTitle = "{energy} gesamt"
-energyTitle = "{percent} Sonnenenergie"
-groupedCo2TitleByGroup = "CO₂-Menge {byGroup}"
-groupedPriceTitleByGroup = "Kosten {byGroup}"
-historyCo2SubTitle = "{value} gesamt"
-historyCo2Title = "⌀ {value} CO₂-Emission"
-historyPriceSubTitle = "{value} gesamt"
-historyPriceTitle = "⌀ {value} Ladepreis"
 loadpoint = "Ladepunkt"
 noData = "Noch keine Ladevorgänge in diesem Monat."
-price = "Σ Preis"
+price = "Kosten"
 reallyDelete = "Möchtest du diesen Ladevorgang wirklich löschen?"
 showIndividualEntries = "Einzelne Ladevorgänge anzeigen"
 solar = "Sonne"
-solarTitle = "Sonnenanteil über das Jahr"
-solarTitleByGroup = "Sonnenanteil {byGroup}"
 title = "Ladevorgänge"
 total = "Insgesamt"
 vehicle = "Fahrzeug"
 
+[sessions.chartTitle]
+avgCo2ByGroup = "⌀ CO₂ {byGroup}"
+avgPriceByGroup = "⌀ Preis {byGroup}"
+byGroupLoadpoint = "je Ladepunkt"
+byGroupVehicle = "je Fahrzeug"
+energy = "Geladene Energie"
+energyGrouped = "Sonnen- vs. Netzenergie"
+energyGroupedByGroup = "Energie {byGroup}"
+energySubSolar = "{value} Sonne"
+energySubTotal = "{value} gesamt"
+groupedCo2ByGroup = "CO₂-Menge {byGroup}"
+groupedPriceByGroup = "Kosten {byGroup}"
+historyCo2 = "CO₂-Emissionen"
+historyCo2Sub = "{value} gesamt"
+historyPrice = "Ladekosten"
+historyPriceSub = "{value} gesamt"
+solar = "Sonnenanteil über das Jahr"
+solarByGroup = "Sonnenanteil {byGroup}"
+
 [sessions.csv]
 chargedenergy = "Energie (kWh)"
 chargeduration = "Ladedauer"

i18n/en.toml

@@ -423,7 +423,7 @@ co2 = "⌀ CO₂"
 duration = "Duration"
 fallbackName = "Charging point"
 power = "Power"
-price = "Σ Price"
+price = "Cost"
 remaining = "Remaining"
 remoteDisabledHard = "{source}: turned off"
 remoteDisabledSoft = "{source}: turned off adaptive solar-charging"
@@ -610,41 +610,44 @@ started = "Started"
 title = "Charging Session"
 
 [sessions]
-avgCo2TitleByGroup = "⌀ CO₂ {byGroup}"
 avgPower = "⌀ Power"
 avgPrice = "⌀ Price"
-avgPriceTitleByGroup = "⌀ Price {byGroup}"
-byGroupLoadpoint = "by Charging Point"
-byGroupVehicle = "by Vehicle"
 chargeDuration = "Duration"
 co2 = "⌀ CO₂"
 csvMonth = "Download {month} CSV"
 csvTotal = "Download total CSV"
 date = "Start"
 downloadCsv = "Download as CSV"
 energy = "Charged"
-energyGroupedTitle = "Charged Energy {energy}"
-energyGroupedTitleByGroup = "Energy {byGroup}"
-energySubTitle = "{energy} total"
-energyTitle = "{percent} Solar Energy"
-groupedCo2TitleByGroup = "CO₂-Amount {byGroup}"
-groupedPriceTitleByGroup = "Total Cost {byGroup}"
-historyCo2SubTitle = "{value} total"
-historyCo2Title = "⌀ {value} CO₂-Emission"
-historyPriceSubTitle = "{value} total"
-historyPriceTitle = "⌀ {value} Charge Price"
 loadpoint = "Charging point"
 noData = "No charging sessions this month."
-price = "Σ Price"
+price = "Cost"
 reallyDelete = "Do you really want to delete this session?"
 showIndividualEntries = "Show individual sessions"
 solar = "Solar"
-solarTitle = "Solar Share Over Year"
-solarTitleByGroup = "Solar {byGroup}"
 title = "Charging Sessions"
 total = "Total"
 vehicle = "Vehicle"
 
+[sessions.chartTitle]
+avgCo2ByGroup = "⌀ CO₂ {byGroup}"
+avgPriceByGroup = "⌀ Price {byGroup}"
+byGroupLoadpoint = "by Charging Point"
+byGroupVehicle = "by Vehicle"
+energy = "Charged Energy"
+energyGrouped = "Solar vs. Grid Energy"
+energyGroupedByGroup = "Energy {byGroup}"
+energySubSolar = "{value} solar"
+energySubTotal = "{value} total"
+groupedCo2ByGroup = "CO₂-Amount {byGroup}"
+groupedPriceByGroup = "Total Cost {byGroup}"
+historyCo2 = "CO₂-Emissions"
+historyCo2Sub = "{value} total"
+historyPrice = "Charging Costs"
+historyPriceSub = "{value} total"
+solar = "Solar Share Over Year"
+solarByGroup = "Solar Share {byGroup}"
+
 [sessions.csv]
 chargedenergy = "Energy (kWh)"
 chargeduration = "Duration"

tests/sessions.spec.js

@@ -44,7 +44,7 @@ test.describe("basics", async () => {
     await expect(page.getByTestId("sessions-head-solar")).toContainText("Solar%");
     await expect(page.getByTestId("sessions-foot-solar")).toBeVisible("67.3");
 
-    await expect(page.getByTestId("sessions-head-price")).toContainText("Σ Price€");
+    await expect(page.getByTestId("sessions-head-price")).toContainText("Cost€");
     await expect(page.getByTestId("sessions-foot-price")).toBeVisible("5.50");
 
     await expect(page.getByTestId("sessions-head-avgPrice")).toContainText("⌀ Pricect/kWh");
@@ -78,8 +78,8 @@ test.describe("mobile basics", async () => {
     await expect(page.getByTestId("sessions-head-solar")).toContainText("Solar%");
     await expect(page.getByTestId("sessions-foot-solar")).toBeVisible("67.3");
 
-    await page.getByTestId("sessions-head-solar").getByRole("combobox").selectOption("Σ Price");
-    await expect(page.getByTestId("sessions-head-price")).toContainText("Σ Price€");
+    await page.getByTestId("sessions-head-solar").getByRole("combobox").selectOption("Cost");
+    await expect(page.getByTestId("sessions-head-price")).toContainText("Cost€");
     await expect(page.getByTestId("sessions-foot-price")).toBeVisible("5.50");
 
     await page.getByTestId("sessions-head-price").getByRole("combobox").selectOption("⌀ Price");