From 7046442b3a44876f57bd0a0fdcf5f59303046fcf Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Tue, 22 Oct 2024 09:12:07 +0200 Subject: [PATCH] Sessions UI: improve titles, labels, units (#16776) --- assets/js/colors.js | 4 +- .../Sessions/AvgCostGroupedChart.vue | 4 +- .../components/Sessions/CostHistoryChart.vue | 13 +++-- assets/js/views/Sessions.vue | 57 ++++++++++++------- i18n/de.toml | 39 +++++++------ i18n/en.toml | 39 +++++++------ tests/sessions.spec.js | 6 +- 7 files changed, 92 insertions(+), 70 deletions(-) diff --git a/assets/js/colors.js b/assets/js/colors.js index 8963f35c2..fb0d8e9a2 100644 --- a/assets/js/colors.js +++ b/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", ], }); diff --git a/assets/js/components/Sessions/AvgCostGroupedChart.vue b/assets/js/components/Sessions/AvgCostGroupedChart.vue index 8c1d2dfea..91f96f6c7 100644 --- a/assets/js/components/Sessions/AvgCostGroupedChart.vue +++ b/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); }, }, }; diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue index defb0d2af..166555561 100644 --- a/assets/js/components/Sessions/CostHistoryChart.vue +++ b/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)) diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue index aa54f11cc..2d92c760a 100644 --- a/assets/js/views/Sessions.vue +++ b/assets/js/views/Sessions.vue @@ -72,9 +72,11 @@

- {{ historyTitle }} + + {{ historyTitle }} + {{ historySubTitle }}

({ @@ -385,12 +396,13 @@ 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"; @@ -398,7 +410,8 @@ export default { 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) { diff --git a/i18n/de.toml b/i18n/de.toml index 9cf5fbc46..09107ba6d 100644 --- a/i18n/de.toml +++ b/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,12 +611,8 @@ 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" @@ -624,28 +620,35 @@ 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" diff --git a/i18n/en.toml b/i18n/en.toml index d0aa9634e..2e5c0adda 100644 --- a/i18n/en.toml +++ b/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,12 +610,8 @@ 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" @@ -623,28 +619,35 @@ 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" diff --git a/tests/sessions.spec.js b/tests/sessions.spec.js index c43ba25c3..12227ef69 100644 --- a/tests/sessions.spec.js +++ b/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");