Add Target Charge Plan Visualisation

[naltatis]

Introduces a new UI to give users an insights what the target charge algorithm is doing. I opted for a reduced and simple visualisation. Its quite easy to create information overflow here and display every but our algorithm produces 😆.

• End/start of charging sessions are in hour granularity (not min/secs).
• A legend for the y axis is omitted but you can mouseover or touch a slot to find out the exact price/co2 value.

I think these are reasonable tradeoffs that shouldn't affect day to day usage. But feel free do comment.

plan.mp4

You can play around with the UI at https://demo-next.evcc.io/
Please use the second loadpoint with the Model 3 for testing. The demo config seems to have planning issues with the first loadpoint.

Todos:

• proper translation
• test visual edge cases (more histoire examples)
• optimise scrolling (maybe autoscroll to active slots)
• deal with tariffs that don't start/end on full hours => something for a separate PR
• optimize for larger screens
• fix ui unit tests in pipeline (dates)

Thanks @markusrem for the design sparring.

[RTTTC]

Very nicely thought out!! ❤️
I know it would not be consistent with EVCC theme, but would be so cool if on large screens there would be no need to scroll left-right, and UI would just show it all instead. 😎 (larger / wider pop up?)

[naltatis]

be so cool if on large screens there would be no need to scroll left-right, and UI would just show it all instead. 😎 (larger / wider pop up?)

@RTTTC Good idea. One reason why did not expand the modal is, that the chart is currently not shown if there's an error (e.g. target in the past). Then we show a modal with a lot of whitespace. But maybe we can always show the chart, even in error cases. I'll play with that.

[naltatis]

@RTTTC a large screen view could look like this. 42 hour forecast, no scrolling.

[RTTTC]

I would love this look! ❤️

[StevieC121176]

Gefällt mir auch sehr gut. Ich könnte mir dies Art Anzeige auch als Auswertung im Ladelog vorstellen

[DerAndereAndi]

Does it need two buttons? Isn't always only one button clickable ?

[naltatis]

Does it need two buttons? Isn't always only one button clickable ?

The left one is disabled if no target time exists. If you open the dialog with an existing time you can remove the target or set a new one. So both are needed.

[andig]

Vielleicht wäre es noch nett, falls der Plan zu sofortigem Start führen würde, den aktuellen Timeslot nochmal in anderem Grün zu machen analog der Ladeanzeige? Ggf noch eine Miniaturansicht des aktuellen Planes irgendwo im Haupt-UI?

[naltatis]

Die Idee einer Miniaturansicht, vielleicht beim Statustext, find ich spannend. Ich schau mal ob wir da was schlankes machen können:

Zielladen aktiv ▂▁▄▃▆▅▇▂▁  << plus Farbe

[andig]

In der Planneransicht selbst wäre es- neben aktivem aktuellen Slot- vllt auch schön, zu signalisieren wo der Plan endet. Dann könnte man sich sparen, weiter nach rechts zu scrollen. Also z.B. alle Slots die zwischen Plan Start/Ende liegen in dunklerem Grau oder hellem Grün?

[andig]

In der Planneransicht selbst wäre es- neben aktivem aktuellen Slot- vllt auch schön, zu signalisieren wo der Plan endet. Dann könnte man sich sparen, weiter nach rechts zu scrollen. Also z.B. alle Slots die zwischen Plan Start/Ende liegen in dunklerem Grau oder hellem Grün?

Das ist ja schon so :)

[andig]

Die Idee einer Miniaturansicht, vielleicht beim Statustext, find ich spannend. Ich schau mal ob wir da was schlankes machen können:

Zielladen aktiv ▂▁▄▃▆▅▇▂▁  << plus Farbe

Nächste Iteration- erstmal rein damit?

[naltatis]