2021.7 History graph color changes

Configuration Frontend
34

look through the window. software world doesnā€™t end on HA, OH and Demoticz. Iā€™m not comparing to those ones. There are thousands of areas which incorporate requirement of analyzying value changes in the function of time. And HA simply doesnā€™t provide satisfying built-in solution for that.

Indeed, everyone can install Grafana. But do you still remember? Obviously users would like to see more satisfying built-in solution. Claiming ā€œother home automation systems are not any betterā€ is far from progressive thinking.

3 Likes
35

I understand it doesnā€™t. But comparing home assistant to packages dedicated to graphing is unrealistic and unfair. Youā€™ve been nothing but hyper critical about this software while not even lifting a single finger for a single development contribution. You continuously think that it can be done better, claim you are a developer, and trash the software left and right. Iā€™m just fed up with your attitude to be honest. How about you contribute with your development skills to help instead of being an armchair developer?

3 Likes
36

How about to not attack everyone who says there is room for improvement?

Again you read something else than itā€™s written. Iā€™m comparing to other software systems which provides built-in solution as tool for debugging. All what I suggest is to consider replacing current library being used for history with something more flexible.
Donā€™t get why it hurts you so much? Because it could work?

1 Like
37

I never said that it couldnā€™t be improved. In fact, I said that someone should write up a feature request. That wasnā€™t good enough for you, do you remember that? That conversation wasnā€™t too long ago.

I will continue to respond to your petty remarks because they are largely not true. You can try to take the highroad here but your post history (and admin history) shows that all you do is complain about HA, badger volunteer developers to make changes you want, and trash talk the main developers. So no, Iā€™m not attacking everyone. Iā€™m just responding to you.

Let me quote myself from above:

If you googling the package, youā€™d see that it has all sorts of functionality and could be updated to incorporate changes. Thereā€™s no reason to change the package because it can be done with ChartJS. So circling back to my original comment: Create a feature request, get the word out and get people to vote for it. If the feature request gets enough attention, changes will happen.

1 Like
38

Iā€™d love to hear what other home automation packages offer for graphing, seeing that home assistant isnā€™t up to todayā€™s standards.

I came from homeseer and the graphing was inferior to HA (IMHO). I ended up writing perl scripts to process data and gnuplot to create the image. The data was written to a .csv which the perl script processed and cleaned data (duration and remove duplicates). I controlled through cron to update the graphs for display.

1 Like
39

IMHO, focusing on graphing capabilities while the history management of the DB is rather inflexible, to say the least, is probably premature.

Go Vote! :slight_smile:

2 Likes
40

Iā€™d almost call it a bug at this pointā€¦while it was annoying before, there was usually good contrast. Now its pastel colors with low contrast at least in the appā€¦the light-purple on light-teal it picked is AWFUL.

image
image1280Ɨ640 141 KB

2 Likes
41

Then write up an issue to have it return to the original colors. I never said that wouldnā€™t get changed. Itā€™s a feature request in regards to users configuring the colors to what they want. Thereā€™s a difference.

Secondly, my post was about how unreasonable people were acting over it ā€˜Not being in the change logsā€™ and 'why would they change this, no one wanted it" when they didnā€™t have the full story.

TLDR:
Write up an issue to have it go back to the original colors. Or wait for the feature request to be implemented to configure your own colors.

43

Anybody noticed that sometimes two different states are drawn with the same color by history-graph (2021.8.1), like here:

image

ā€œidleā€ and ā€œcoolingā€ are both drawn in light blue. Could this be a configuration issue? any pointer on ways to influence color selection for history-graph would be awesome

2 Likes
44

So, for everyone complaining about the colors (I am not one of them), it appears that they were not ā€œchangedā€, so much that chartjs was not using them before, but it is now.

I found out from the dom where the colors were being loaded from, which does not appear to be chartjs at all, then I went looking for those specific combinations of colors on github. It looks like the search is broken, becauseā€¦

0 results I get. BUT it was trivial to actually find the constants being loaded, and they appear to have not been changed since they were added in may 2020 as part of this PR for the calendar panel:

So now with the new chartjs, this is the color list, looks like it starts pulling at index 2 instead of 0 for some reason. Though I have not tried changing the constants file, or finding for the frontend code that pulls it (since that search didnt work), I would assume that one can modify it to their liking for custom colors.

If I could find were it is read, a configuration may be able to be added to the user prefs

1 Like
45

It looks like that constant file is perhaps the ā€œoriginalā€ file, and with cjs3 it is now pulling from src/common/color/colors.ts

That means simply that the first 2 colors were deleted from the list, resulting in charts now starting with the third. I am going to change some files and see if I can get not just a return to the original colors, but a better order

46

Would it be then possible to change the library so it is pointing not to specific palette inside its own code (src/common/color/colors.ts) and specific colours within the palette but to use palette defined in HA themes?

1 Like
47

So that worked great. Though in doing so I can absolutely see WHY it was changed. I did not use the history graphs page muchā€¦ mostly because it is disorganized and not easily readable, but for different reasons than the colors.

The original was red green blue etc, I changed it to blue red green etc, so the blue was the first selected color just like the new color palette. It made it easier to compare the same HA instance in another browser that was not cache invalidated.

The first 2 colors of the original palette are red and green, which look to be now used exclusively for on/off states of the various binary sensor device classes. Now the looped (is it?) color palette for other states will not include those 2 colors at all. That can make it easier to see what entities have binary states.

HOWEVER, that is not the real takeaway, both the alphanumeric state history graph as well as line graphs for numeric states use the same palette, which is why all the single entity numeric line graphs changed from red to blue. After a visual comparison of the history graphs, including the line graphs, I do not think they should have the same palette, and it would also be optimal if the palette for light and dark themes are different. The medium grey is also used for unavailable states, and thus is not used for line graphs at all.

That means 4 palettes instead of 1, which honestly would not be nearly as much work as making the palette user customizable, but should make a noticeable improvement to the user experience. Having really bright pastel colors like #ffed6f on a line graph with a white background sucks. Then you have #fecddf and #fccde5 which look almost identical, and #cbe8ff and #c4eaff too. None of those should exist on a white background line graph from a usability standpoint, and having colors that are almost identical does not help much on the state graph (not a big deal though), but are abysmal on a line graph if they overlap or have similar values.

The list is long, something like 60 colors. I do not think combined line graphs will need that many, but the state graphs might. If there are any UX people in the thread that can go through the list of 60 or so colors and figure out which ones should be eliminated from both light and dark themes that would be a good start. Filtering the line graph colors will be far easier.

Does anybody have an opinion on whether this is a good intermediate step towards full customization? I know if it was customizable, I would want the line graphs and the state graphs to have different palettes, and having the backend work for them to be different in advance would make it easier to implement.

2 Likes
48

The frontend code is compiled, so that change would need to be made in the source code before compilation

49

Hi @richieframe, I apologise for the n00bishness of this request, but I am a bear of very little brain.

Would you mind writing up a step-by-step guide for how you achieved this? Iā€™m partially colourblind, and at the moment I am trying to use the History Graph card to map solar power produced against total power usage, and my eyes canā€™t see the difference between the used colours, making it hard to parse the data being displayed.

If you have time, Iā€™d really appreciate the help.

1 Like
50

Pretty sure you wonā€™t be able to perform these changes if youā€™re running hassos. It would require you to use a custom version of the front end and that would require CLI to get running, which you donā€™t have access to.

51

I am using a docker install so I can do stuff like shell into docker, install a text editor, and manually edit the specific file I found loading the color array in the DOM inspector. And that is what I did, a restart of HA and the colors are live.

I could have also copied the file to my config dir, then bound that file in place of the original, but this was a test so I did not do that. If I update HA the file and its name are likely to change and revert to my unedited state, but I am ok with that. Either way this is the file I modified:

/usr/local/lib/python3.9/site-packages/hass_frontend/frontend_latest/f1bda580.js

The array is right there on the first line, const i. I know this really isnt a step by step guide, but there are multiple installation methods, and they all use a different set of steps, the only thing consistent is that in 2021.8.6, in the python packages folder, the latest hass frontend file f1bda580.js needs to be modified.

The colors are used sequentially, but I do not know quite how. In line graphs, each graph starts at the first entity/color then continues, the first is drawn over the second, and so on, so a ā€œnoisyā€ line should be under a smooth line or the smooth line can be invisible if they mostly overlap. In other graphs, I think there must be some list of text states, and the colors loop through, since different graphs seem to have the same color for the same text state.

52

It should be in the same place for hassos but heā€™d need portainer to get to that loc.

53

Hi @richieframe, thanks for writing all of that out. I actually might have been able to follow it, but unfortunately @petro is quite right: I canā€™t access that location because Iā€™m running HassOS. I appreciate your help nonetheless.

54

I could log in into the container and this is the color array (first part)

["#377eb8","#984ea3","#00d2d5","#ff7f00","#af8d00","#7f80cd","#b3e900","#c42e60","#a65628","#f781bf","#8dd3c7","#bebada","#fb8072","#80b1d3","#fdb462","#fccde5","#bc80bd","#ffed6f","#c4eaff","

I have one history graph that is using the SAME color, #377eb8, for two states, as can be seen here:

image

I confirmed this using a color picker, both idle and cooling are using #377eb8.
I checked the entire array and there is no repetition of the first #377eb8 entry, so I am guessing this could be a bug in HA. Has anybody ran into this issue? This wasnā€™t a problem with prior 2021.6 and older versions, as far as I recall. I could clearly see idle and cooling states in the graph, with different colors