Energy Dashboard: expand the energy-devices-graph-card in energy-dashboard to have the option of displaying the PV-energy-ratio of a device

Description:
The current energy-devices-graph card in the Energy Dashboard provides a great overview of individual energy consumption per device using bar charts with different colors. However, I would like to extend this functionality by introducing segments within each bar to show a breakdown of the energy sources contributing to each device’s total consumption.

Proposed Functionality:

For each device in the energy-devices-graph, the bar should be segmented to represent the following categories:

  • Direct PV Consumption: The amount of energy consumed directly from solar production. (e.g. with green color)

  • Battery Discharge Contribution: The energy provided from the battery. (e.g. with yellow color)

  • Grid Consumption: The energy drawn from the grid. (e.g. with red color)

Each segment should be color-coded within the existing bar, while the device-specific color (currently used) could remain as a border or background for consistency.

Benefits:

  • Provides deeper insights into energy usage patterns.
  • Highlights the efficiency of self-consumption and battery usage.
  • Enhances decision-making for optimizing energy utilization.

Example Use Case:

A user with PV panels, a battery storage system, and multiple energy-consuming devices wants to visualize how much energy each device draws from the PV system, battery, or the grid. For example to show in Graph:

  • Device A: 30 kWh PV, 20 kWh Battery, 50 kWh Grid
  • Device B: …

Additional Considerations:

  • The segmentation logic would rely on existing energy sensors in Home Assistant.
  • Support for tooltips or legends to clarify segment details.

I believe this feature would significantly enhance the usability and analytical capabilities of the Energy Dashboard in Home Assistant.