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

Open
wants to merge 35 commits into
base: master
Choose a base branch
from

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 😉

@naltatis naltatis marked this pull request as ready for review October 18, 2024 15:36
@andig
Copy link
Member

andig commented Oct 19, 2024

Bzgl. Einheiten: könnten wir bei kWh bleiben, zumindest solange bis die Zahlen 5-stellig werden? Das ist die leichter zu greifende Einheit?

@andig
Copy link
Member

andig commented Oct 19, 2024

Hier passt die Bezeichnung irgendwie nicht:

Screenshot 2024-10-19 at 12 03 16

Das ist ja "Fahrzeuganteil", nichts pro Fahrzeug?

@andig
Copy link
Member

andig commented Oct 19, 2024

Hier hadere ich etwas mit dem Diagramm:

Screenshot 2024-10-19 at 12 04 10

Es ist schick- aber währe nicht ein Säulendiagramm intuitiver lesbar? Auch die Einheit scheint nicht korrekt- g/kWh?

@andig
Copy link
Member

andig commented Oct 20, 2024

…und sollen wir von Kosten statt Preis sprechen?

@naltatis
Copy link
Member Author

Es ist schick- aber währe nicht ein Säulendiagramm intuitiver lesbar? Auch die Einheit scheint nicht korrekt- g/kWh?

Die Einheit ist in der Listendarstellung bewusst verkürzt. Im Tooltip wird sie ganz ausgeschrieben:
Bildschirmfoto 2024-10-20 um 20 06 31

Das gleiche Muster nutzen wir bereits im Energieflussdiagram in der Main UI. Das wird sonst total schnell unübersichtlich bei mehreren Einträgen.

@naltatis
Copy link
Member Author

…und sollen wir von Kosten statt Preis sprechen?

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

Bildschirmfoto 2024-10-20 um 20 10 36

@naltatis
Copy link
Member Author

Hier hadere ich etwas mit dem Diagramm

Lass uns damit mal an den Start gehen. Um Gegensatz zum Balkendiagramm hat das den Vorteil, dass es sehr gut mit unterschiedlichen vielen Einträgen klarkommt. Das sieht mit 2 Einträgen gut aus, aber auch noch mit 8. Ein Balkendiagramm mit zwei Einträgen wirkt schnell komsich.

@naltatis
Copy link
Member Author

Das ist ja "Fahrzeuganteil", nichts pro Fahrzeug?

Ja hier war die Legende mit den Prozenten auch noch nicht optimal. Schau dir mal den Screenshot zwei weiter oben an. Mit der aktualisierten Legende (Prozente + Energie) passt die Überschrift auch besser.

@naltatis
Copy link
Member Author

Bzgl. Einheiten: könnten wir bei kWh bleiben, zumindest solange bis die Zahlen 5-stellig werden? Das ist die leichter zu greifende Einheit?

Wir haben inzwischen eine automatische Formatierung, die abhängig von der Energiemenge die korrekte Einheit wählt. Das würde ich hier nicht aushebeln und fest auf kWh setzen wollen. Gerade in den Jahresansichten (ich ja mit einigen realen Datensätzen getestet) werden die Werte in kWh schnell lang und unübersichtlich.

Einzige Ausnahme ist hier:
Bildschirmfoto 2024-10-20 um 20 20 21
Da gibt in der tabellarischen Ansicht der größte Wert die Einheit vor um hier nicht untereinander die Einheiten zu mischen.
Im Tooltip wird die Einheit wieder pro Eintrag formatiert damit man auch bei kleinen "Verbrauchern" noch genug Auflösung hat.

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

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.

9 participants