Bar Graph with relative energy consumption (network, sold, and solar consumed)

[luissimoes]

Perhaps this is interesting to someone else.
There are 3 entities:

• energy consumed from the network
• energy sold (surplus - this is the solar energy produced and not consumed)
• solar energy produced and consumed
  (I clearly should have a battery to store the extra solar... it will come soon ;-) )

This is the end result.

Details:

• the energy consumed ("from netz") is a sensor (comes from the meter)
• the energy sold is also a sensor (comes form the meter)
• the solar energy consumed is a template; its the difference between the solar produced and the "sold"

The graph is stapled and relative. I plotted the sold energy as negative.

Yaml for the graph

type: custom:plotly-graph
entities:
  - entity: sensor.from_netz_daily
    texttemplate: '%{y:.2f}'
    textfont:
      size: 13
      color: '#ffffff'
    name: from netz
    type: bar
    statistic: state
    period: day
    marker:
      color: '#cd0797'
      opacity: 1
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.from_netz_daily'].state],
          })
  - entity: sensor.to_netz_daily
    texttemplate: '%{y:.2f}'
    textfont:
      size: 12
    name: sold
    type: bar
    statistic: state
    period: day
    marker:
      color: '#0797cd'
      opacity: 0.9
    filters:
      - map_y_numbers: y *(-1)
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.to_netz_daily'].state * (-1)],
          })
  - entity: sensor.solar_energy_consumed
    texttemplate: '%{y:.2f}'
    textposition: outside
    textfont:
      size: 12
    name: solar consumed
    type: bar
    statistic: state
    period: day
    marker:
      color: '#97cd07'
      opacity: 0.9
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.solar_energy_consumed'].state],
          })
  - entity: sensor.from_netz_daily
    type: indicator
    mode: number
    value: $ex ys.at(-1)
    bgcolor: black
    title:
      text: From Netz
      font:
        size: 8
    number:
      suffix: ' kWh'
      valueformat: '0.11'
      font:
        size: 14
        color: '#cd0797'
    domain:
      x:
        - 0.9
        - 1
      'y':
        - 0.9999
        - 1
  - entity: sensor.to_netz_daily
    type: indicator
    mode: number
    value: $ex ys.at(-1)
    bgcolor: black
    title:
      text: To Netz
      font:
        size: 8
    number:
      suffix: ' kWh'
      valueformat: '0.11'
      font:
        size: 14
        color: '#0797cd'
    domain:
      x:
        - 0
        - 0.2
      'y':
        - 0.9999
        - 1
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  barmode: relative
  bargap: 0.2
  uniformtext:
    minsize: 12
    mode: show
  modebar:
    orientation: h
    remove: pan
  margin:
    t: 25
    l: 30
    r: 30
  height: 500
  legend:
    'y': -0.25
    x: 0.02
  xaxis:
    gridcolor: rgba(238,235,235,0.3)
    showgrid: true
    linewidth: 0
    linecolor: null
    nticks: 6
    tickformat: |-
      %d %b
      %Y
  yaxis:
    visible: false
hours_to_show: 5d
refresh_interval: auto
title: Consumed all - daily
card_mod:
  style: |
    ha-card {
        border-width: 0px;
       }
view_layout:
  grid-area: detail5

Template

{% set solar_prod = (states('sensor.solar_daily_energy') |float(0)/1000) %}
{% set energy_sold = states('sensor.to_netz_daily')|float(0) %}
{% set solar_consumed = (solar_prod - energy_sold) | float(0) %}

{% if solar_consumed <= 0 %}
  {{ 0 }}
{% else %}
  {{ solar_consumed }}
{% endif %}