Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Michael Geers 2024-10-22 09:12:07 +02:00 • committed by GitHub
parent a14da6ccad
commit 7046442b3a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 92 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/js/colors.js
View file

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

4
assets/js/components/Sessions/AvgCostGroupedChart.vue
View file

@ -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);
},
},
};

13
assets/js/components/Sessions/CostHistoryChart.vue
View file

@ -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))

57
assets/js/views/Sessions.vue
View file

@ -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,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) {

39
i18n/de.toml
View file

@ -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"

39
i18n/en.toml
View file

@ -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"

6
tests/sessions.spec.js
View file

@ -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");