Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sessions UI: visualization, month/year charts #15902

Merged
merged 35 commits into from
Oct 21, 2024
Merged

Conversation

naltatis
Copy link
Member

@naltatis naltatis commented Sep 4, 2024

wip

TODOs

  • header and year navigation
  • add cost, price and co2 chart
  • optimize for mobile
  • add solar percentage month radar chart (in year and total)
  • improve charge history title
  • en/de translation
  • add e2e tests
mobile.stats.webm

@naltatis naltatis added enhancement New feature or request ux User experience/ interface labels Sep 4, 2024
@naltatis naltatis changed the title Ladevorgänge UI: Grafische Auswertung nach Monat und Jahr Sessions UI: visualization, month/year charts Sep 4, 2024
@github-actions github-actions bot added the stale Outdated and ready to close label Sep 11, 2024
@github-actions github-actions bot closed this Sep 16, 2024
@naltatis naltatis removed the stale Outdated and ready to close label Sep 16, 2024
@naltatis naltatis reopened this Sep 16, 2024
@naltatis
Copy link
Member Author

sneak preview

Bildschirmfoto 2024-09-18 um 20 24 10
Bildschirmfoto 2024-09-18 um 20 24 03
Bildschirmfoto 2024-09-18 um 20 16 37
Bildschirmfoto 2024-09-18 um 20 13 28

@andig
Copy link
Member

andig commented Sep 21, 2024

Das sieht richtig genial aus. Bei kurzem Test ist es mir allerdings nicht gelungen, in diesem Branch die "Charging Sessions" zu öffnen- Menüclick tut gar nichts mehr. Console:

TypeError: undefined is not an object (evaluating 'G.overrides.pie.plugins') — 

@VolkerK62
Copy link
Contributor

Vorsichtshalber die Frage:
CSV Download bleibt aber hoffentlich weiterhin erhalten?

@andig
Copy link
Member

andig commented Sep 21, 2024

@VolkerK62 was hat das mit Grafiken zu tun? Nix...

@VolkerK62
Copy link
Contributor

ok, ok. bitte nicht schlagen 😄

@naltatis
Copy link
Member Author

@VolkerK62 klar, CSV gleibt weiterhin da
@andig Ok, da brauch ich mehr Infos. Hast du npm install gemacht?

@andig
Copy link
Member

andig commented Sep 23, 2024

Hast du npm install gemacht?

npm ci

@andig
Copy link
Member

andig commented Sep 23, 2024

Geht weder Safari noch Chrome:

TypeError: Cannot read properties of undefined (reading 'plugins')
    at Sessions-Dy-EagzX.js:16:147609

@martin8310
Copy link

Wunderschön ;-)

@naltatis
Copy link
Member Author

Geht weder Safari noch Chrome:

Merkwürdig. Ich schau mal ob ich das irgendwie reproduziert bekommen.

@StevieC121176
Copy link

Bin begeistert, super gelungen. 👍🤗 ist echt Hammer geworden

@naltatis
Copy link
Member Author

@StevieC121176 das ist ja noch nicht fertig 😄. Da geht noch was.

@naltatis
Copy link
Member Author

Monat/Jahr Navigation

phone month phone month select phone month solar phone year phone total tablet month select tablet year select total vehicles

@StevieC121176
Copy link

Ich würde sagen, da bleiben keine Wünsche offen.

@blenni
Copy link
Contributor

blenni commented Sep 23, 2024

Sieht super aus 👍
Werden die Farben für die Fahrzeuge automatisch vergeben oder kann man das manuell beeinflussen? Wenn manuell, könnte man z.B. das rote Auto in rot und das blaue Auto in blau darstellen, was es noch intuitiver machen würde 😉

@andig
Copy link
Member

andig commented Oct 20, 2024

Die Einheiten wären alle 2.000kWh. Was spricht hier gegen kWh?

@naltatis
Copy link
Member Author

Die Einheiten wären alle 2.000kWh. Was spricht hier gegen kWh?

Konsistenz (und Platz). Wenn wir das ändern sollten wir das global ändern und nicht nur hier.

@andig
Copy link
Member

andig commented Oct 20, 2024

Ich hab jetzt "Ladepreis" und "Kosten" im Deutschen gemacht.

Links steht noch Preis

i18n/en.toml Show resolved Hide resolved
energySubTitle = "{energy} total"
energyTitle = "{percent} Solar Energy"
groupedCo2TitleByGroup = "CO₂-Amount {byGroup}"
groupedPriceTitleByGroup = "Total Cost {byGroup}"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cost im Key

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope. Technisch ist bei uns "Cost" der Oberbegriff für "Co2" und "Preis" (siehe auch Smart Cost Limit). Wie wir das dann konkrete in der UI betiteln ist ein anderes Thema.

i18n/en.toml Show resolved Hide resolved
i18n/en.toml Show resolved Hide resolved
i18n/en.toml Show resolved Hide resolved
i18n/en.toml Show resolved Hide resolved
@naltatis
Copy link
Member Author

Links steht noch Preis

Ich verstehe nicht genau was du damit meinst. Den Ladepreis (ct/kWh) würde ich so lassen. Im Sprachgebrauch ist "Preis pro Kilowattstunde" deutlich gebräuchlicher als "Kosten pro Kilowattstunde".

@naltatis
Copy link
Member Author

Automatische Energie- und Leistungsformatierung ist nun angepasst. MWh und MW erst ab 10 MW(h).

Bildschirmfoto 2024-10-20 um 20 55 12

@andig
Copy link
Member

andig commented Oct 20, 2024

Ich kenne Fahrtkosten, keine Preise? Auch Spritkosten. Auf jeden Fall ist es in #15902 (comment) jetzt gemischt. Entweder oder?

@andig
Copy link
Member

andig commented Oct 20, 2024

s/nach/je/ ? Beides möglich? Soll die Autoformatierung bei 4 Stellen auf das Nachkomma verzichten?

@naltatis
Copy link
Member Author

s/nach/je/ ?

da bin ich leidenschaftslos. Ist geändert

@naltatis
Copy link
Member Author

Soll die Autoformatierung bei 4 Stellen auf das Nachkomma verzichten?

Ich sehen deinen Punkt. Technisch machen wir damit aber ein größeres Fass auf. Dann müssen wir irgenwie sicherstellen, dass bei tabellarischen Ansichten (Übersicht Ladevorgänge, Energieflussdiagramm, und hier) nicht nur die Einheiten synchron sind sondern sich auch die Anzahl der Nachkommastellen immer synchron sind. Da seh ich gerade keinen Weg der nicht messy ist. Lass uns das Thema hier rausziehen. Wenns kurz und übersichtlich sein soll können wir sonst wieder auf MWh zurück.

@naltatis
Copy link
Member Author

Ich kenne Fahrtkosten, keine Preise? Auch Spritkosten.

Wir reden hier doch über zwei unterschiedliche Dinge: Der errechente "Preis pro kWh" (Vergleichbar mit Preisen an Ladesäule oder Stromtarif / Arbeitspreis / Strompreis) und deine angefallenen "Kosten" für einen bestimmten Verbrauch.

@andig andig merged commit cfa35f2 into master Oct 21, 2024
7 checks passed
@andig andig deleted the feature/sessions_stats branch October 21, 2024 10:13
@andig
Copy link
Member

andig commented Oct 21, 2024

Bei Preis und CO2 verschwindet bei mir das obere Chart im nightly, unabhängig vom gewählten Zeitraum:

Screenshot 2024-10-21 at 13 16 01

@naltatis
Copy link
Member Author

@andig das ist schlecht. Magst du mir mal nen Dump deiner Sessions-Tabelle (oder komplett CSV) schicken?

@maatinh
Copy link
Contributor

maatinh commented Oct 21, 2024

Ist bei mir auch so bei Preis. CO2 ist ausgegraut und inaktiv.

@StevieC121176
Copy link

@andig das ist schlecht. Magst du mir mal nen Dump deiner Sessions-Tabelle (oder komplett CSV) schicken?

ist bei mir auch so.

session.csv

@TobiasHuber1980
Copy link
Contributor

Same here
session.csv

chargingsession

@StevieC121176
Copy link

StevieC121176 commented Oct 22, 2024

ich habe noch ein paar kleinere Fehler in den Tooltips. Aufgefallen ist mir das bei dem Torten- und Kreisdiagramm.
Das betrifft mobile und auch Desktop Ansicht gleichermaßen.
Fährt man über einen bestimmten Bereich im Diagramm ändert sich der Tooltip teilweise Falsch.
Hier mal ein Beispiel. Fahre ich über den Grünen Bereich, wird der Tooltip falsch angezeigt, beim Blauen korrekt.

IMG_4118

Hier noch zwei andere Beispiel mit fehlerhaftem Tooltip
im ersten Bild ist das rote Stück markiert, er zeigt aber den Tooltip vom Türkisen an.

IMG_4116

hier ist orange markiert, zeigt aber im Tooltip den Türkisen Wert an

IMG_4117

@cschlipf
Copy link
Contributor

cschlipf commented Oct 23, 2024

Ich finde die linke Visualisierung richtig schick. Tolle Arbeit. Allerdings ist der Kreis ja immer konstant durch Anzahl der Fahrzeuge unterteilt. Man könnte die doch mit dem Donut daneben zusammenfassen.

image

Also
Winkel der Sektion = Energiemenge.
Größe der Sektion nach außen = Solaranteil.

Etwa so wie hier: https://www.chartjs.org/docs/latest/charts/polar.html

@naltatis
Copy link
Member Author

@cschlipf Ja, wolle ich ursprünglich genau so machen. Aber die Winkelgröße ist bei Polar Area Charts in chart.js leider immer gleich unter allen Einträgen aufgeteilt.

@martin8310
Copy link

Ab welcher Version wird denn das "visualization, month/year charts" ca. verfügbar sein?

@TobiasHuber1980
Copy link
Contributor

Ab welcher Version wird denn das "visualization, month/year charts" ca. verfügbar sein?

#16919
wenn der hier ins master gewandert ist....

@martin8310
Copy link

Ist echt gut geworden, danke ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ux User experience/ interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.