Add Segmented Bar Graph for Energy Devices in the Energy Dashboard (energy-devices-graph - card)

[thoath2]

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:

1. Direct PV Consumption: The amount of energy consumed directly from solar production.
   

2. Battery Discharge Contribution: The energy provided from the battery.
   

3. Grid Consumption: The energy drawn from the grid.
   

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 (heat pump ...) wants to visualize how much energy each device draws from the PV system, battery, or the grid. For example:

Device A: 50% PV, 30% Battery, 20% Grid
Device B: ...

Additional Considerations:

• 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. It would avoid the need to build the own dashboards with Influxdb/grafane (goal: "keep it simple").