Add advanced diagram showing flow of electrical energy/power

[davet2001]

Proposed change

This PR adds something I've been working on for a while - a Sankey diagram showing flow of electricity. e.g.:

There are two main cards:

• a card for the energy dashboard which picks up the current user configuration, and shows the total energy flow based on the selected time range.
• a user configurable card showing the power flow for a set of sensors. This represents the live power flow at the current moment.

Both are live and automatically updating. The cards try to display a coherent representation even if the data set is incomplete or physically impossible (e.g. exporting more than the total generated). This means it is ok for asynchronous updates to be made to any of the entities it is listening for.

The width of the flows represents the amount, and the overall size of everything is automatically scaled so that no one part of the diagram becomes too wide.

The diagram dynamically scales to fit the size of the window it is in (mostly, see below).

I put the main guts of the sankey creation logic into it's own npm library. This is my first proper attempt at adding a component to the frontend, so I would hugely value any feedback/suggestions!

I've added the energy card to the energy dashboard strategy, meaning it is automatically displayed if you have a solar energy source configured, but that's really just to make it easier to experiment with and try it out. Maybe it should be added as an available (but not automatically enabled) card until enough people have put it through its paces.

Outstanding issues to solve:

• Sometimes there are thin dark lines between the blocks that make up the shapes, I believe this is caused by antialiasing, but I don't see an easy way of reducing/eliminating it, especially where the shapes are across two divs.

• I am not sure how to set the minimum width of the card, or what is the standard practice here. If I shrink the window horizontally, eventually the svg elements start to spill off the card. I'm sure that this is not the desired behaviour, but I don't know how to fix it (suggestions welcome!).

• If you stretch the card really wide, it sort of looks a bit silly. Perhaps that's not a major issue though.

• There are probably more edge cases to experiment with, such as multiple generation sources, grid configured with only input or output, and either of those being negative to represent flow in the opposite direction.

• Battery storage is not supported yet. That could be added in the future.

At this stage I'd like some general feedback/suggestions to see if I'm heading in the right direction.

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

type: panel
title: Power Flow
cards:
  - type: power-flow
    power_from_grid_entity: input_number.grid_power_in
    power_to_grid_entity: input_number.grid_out_power_override
    generation_entities:
      - input_number.pv_generation
    consumer_entities:
      - input_number.sample1_input_number
      - input_number.sample2_input_number
      - input_number.sample_3_input_number
      - input_number.sample4_input_number

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• 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

[piitaya]

Hi 👋
Thank you for your contribution. Unfortunately, we have not plan to add a new built-in energy card. The energy dashboard needs some love but the UX team needs to do some research first before introducing some modification because it's already cluttered with many cards.
I can suggest you to release it as a custom card for now and share it using HACS.