Revise grid neutrality energy dashboard card, modify energy dashboard presentation to match

[wtadler]

Proposed change

• Eliminate the (unreferenced and arbitrary) yellow range of the gauge per conversation in the Discord and Suggestions for grid neutrality gauge on energy dashboard #9976
• Change red/green ranges to blue/purple for consistency
• Lighten blue/purple throughout the energy dashboard
• Make bar chart opacity consistent through the energy dashboard

(Moved this to PR #10326 but preserving here because of the discussion.)

• Correct and revise the tooltip per Suggestions for grid neutrality gauge on energy dashboard #9976

Before

This card represents your energy dependency.

If it's green, it means you produced more energy than that you
consumed from the grid. If it's in the red, it means that you
relied on the grid for part of your home's energy consumption.

After

This card indicates your net energy usage.

If the needle is in the green, you returned
more energy to the grid than you consumed from it.
If it's in the red, you consumed more energy than you returned. 

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue:
• This PR is related to issue or discussion: partly addresses suggestions in Suggestions for grid neutrality gauge on energy dashboard #9976
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

I agree with the text update, not sure about the yellow 🤷‍♂️

[wtadler]

Thanks, @bramkragten. We've been messaging on the Discord, but I'll sum up here. Basically, the yellow range is completely arbitrary. In fact, even a hard boundary at 0 for net positive or net negative is not particularly relevant for a user. Users should not care whether they are at net -0.1 kWh or +0.1 kWh.

Accordingly, you put together this mockup, which I think is an improvement:

But I would take this a step further and go from red/green to blue/purple, because:

• Red/green implies bad/good, which is not necessarily true—someone might not have the goal of returning lots of energy to the grid. Users in areas without net metering, for instance, get no benefit from returning to the grid. And, unless they are altruistic, they might want to instead find a way to store excess production, as explained by the tooltip on the solar-consumed energy dashboard card.
• The red/green zones here represent exactly the same thing as blue/purple do on three other energy dashboard cards: grid energy consumption/return.

This is my mockup for how this could look:

This uses, as the endpoints, the existing colors energy-grid-consumption-color and energy-grid-return-color in ha-style.ts. (Though the difference between blue and purple becomes more apparent if you raise overall lightness a bit.) The 50% point is halfway between the two colors, with lightness increased.

[bramkragten]

@matthiasdebaat do you have an opinion about this?

[matthiasdebaat]

This is my mockup for how this could look:

This is a difficult one. I think using purple and blue is correct, but it is not appealing to the eye. They aren't contrasting colors and we don't use gradients in our interface. Without gradients it would look like this

For now I don't have a better solution. What do you think?

[wtadler]

I see what you're saying. I think lightening the colors helps a lot with visual appeal and distinguishability. These colors are from the blue and purple bars on the energy usage card when hovering with the mouse. (Not sure where they are stored in the project.)

(Now that I look at the energy distribution card, I also think the blue/purple dots could be better distinguished if they were lighter like this—though it's easy to tell what they represent by their direction of travel.)

[matthiasdebaat]

I see what you're saying. I think lightening the colors helps a lot with visual appeal and distinguishability. These colors are from the blue and purple bars on the energy usage card when hovering with the mouse. (Not sure where they are stored in the project.)

(Now that I look at the energy distribution card, I also think the blue/purple dots could be better distinguished if they were lighter like this—though it's easy to tell what they represent by their direction of travel.)

Good one! @bramkragten do you know where these colors are stored?

[bramkragten]

They are created, but it sounds like we want to change the default colors maybe?

[wtadler]

They are created, but it sounds like we want to change the default colors maybe?

Just to show how it looks if you lighten the default blue/purple for the energy distribution card too—old on left, new on right.

[matthiasdebaat]

How does that look in the Energy usage bar chart? My assumption is that its to bright.

[wtadler]

How does that look in the Energy usage bar chart? My assumption is that its to bright.

Here is the current build:

If you use the new colors at 100% opacity, they look a little too dark/bold, actually:

But the bars in the current build are not even using the existing energy-grid-consumption-color and energy-grid-return-color unaltered (@bramkragten noted that the colors are "created"), so it's not a straight comparison. If you use these new lightened colors at 100% opacity in the energy distribution card and in the grid neutrality gauge, but drop it to 75% opacity in the bar chart, you get this, which I think looks pretty nice:

Clearly there's already something going on with opacity if you look at the orange bars (which I didn't touch) in the energy usage and solar production cards. They are slightly different shades, and gridlines show through on the solar production card.

[matthiasdebaat]

But the bars in the current build are not even using the existing energy-grid-consumption-color and energy-grid-return-color unaltered (@bramkragten noted that the colors are "created"), so it's not a straight comparison. If you use these new lightened colors at 100% opacity in the energy distribution card and in the grid neutrality gauge, but drop it to 75% opacity in the bar chart, you get this, which I think looks pretty nice:

Nice edits! Yeah lets change it to this blue color (with the correct opacity and stroke.

[bramkragten]

Waiting for @matthiasdebaat to approve the colors

[matthiasdebaat]

Waiting for @matthiasdebaat to approve the colors

✅