Titles/labels and the graphs in Charging stats does not match

[petariga]

Describe the bug
It is just a nuance. When you look at the “Charging stats” in Grafana the pie chart of the AC/DC split has the AC value on the right (green) and DC value on the left (yellow), however the title of the chart states “AC/DC - kWh”, so from the first look you expect the AC on the left and DC on the right. The same vice versa expectation is for the “AC/DC - Duration”.

Expected behavior
If the pie chart title states AC/DC, then the circle chart should have AC charges on the left and DC charges on the right (regardless of the color chosen).

Screenshots

Environment

• TeslaMate version: 1.19.3
• Type of installation: Docker
• OS TeslaMate is installed on: Linux
• User OS & Browser: any
• Others:

[petariga]

I don't want to be too picky, but I have just seen the result in the version 1.20.1 and I think that there is still a way to improve @roadrash2108 @adriankumpf .

Previously, AC was green and DC was yellow, which was correct in my opinion (AC is better for the battery life, then I would expect it to use the green color). Now the colors are vice versa. The title and the order in the pie graph match, this is correct (left AC, right DC), however when you look under the pie graphs, the two rows with description are now vice versa - the first row is DC, the second is AC. The previous order was correct - first AC and then DC (the same is in the title of the graph and in the pie graph), now it has changed to the exact opposite.

So one problem was solved and another two were introduced...

[roadrash2108]

I will look into it.

@petariga in case you have a docker-installation of your TeslaMate consider changing the grafana-part to "edge", so that you get the latest changes before the release and can give early feedback.

UPDATE: I've found and fixed the color-problem. Regarding the sorting there seems the fixed order, that pie-charts always are filled clockwise - you can test this when sorting by clicking on the headers in the leged (e.g. "total" or "percentage"). I will look into it if I can find more.

[roadrash2108]

So, here the summary of my investigation:

• Grafana uses the plugin piechart-panel for the pie-chart
• the piechart-panel plugin embeds flot (a jQuery library) for drawing the pie-chart
• within Flot the direction of the Pie-chart is hardcoded to be clockwise

So having AC on the left would mean:

1. making the direction of drawing pie-charts in Flot parameterize-able
2. embed the new version of Flot into the piechart-plugin
3. include the new version of piechart-plugin into Grafana used by TeslaMate
4. change the dashboard of TeslaMate to use the new parameter

Seems to be a lengthy process, therefore I'm starting a PR for the colors and leave the "workaround" with the "ORDER BY ... DESC", which has the only drawback, that DC then comes before AC in the legend...

[roadrash2108]

FYI: I also created an issue here: flot/flot#1769 - let's see where this leads to...

[petariga]

Well done research @roadrash2108 , so the best would be to have an anticlockwise option for drawing the pie chart. I understand that this is going to take a longer while...