Anyone using the Sankey Chart Card?

not sure it’s that tbh, the chart is simply not very transparent when it comes to showing several connections concerning the same number. anyways, I’ve decided to split this bigger chart up in 2 smaller sections:

note the odd swirl I the middle…

also note the top right entity: 3.9kWh Saldo. I’ve added a template sensor there to always give me a positive value (|abs), and change name when changing polarity.

      - unique_id: saldo_totaal_dag_energie_afname_of_levering
        name: >
          {% set saldo = this.attributes.get('saldo',0) %}
          {% set phrase = 'levering' if saldo < 0 else 'afname' %}
          Saldo: {{phrase}} vandaag
        state: >
          {% set saldo = this.attributes.get('saldo',0) %}
          {{saldo if saldo > 0 else saldo|abs}}
        attributes:
          saldo: >
            {% set saldo = expand('sensor.grid_energy_teller_1','sensor.grid_energy_teller_2')
                      |selectattr('state','is_number')
                      |map(attribute='state')
                      |map('float')|sum %}
            {{saldo}}
        icon: mdi:counter
        <<: *energy_total

also, I now change the color of that entity using another template:

      - unique_id: grid_energy_total_color
        name: Grid energy total color
        state: >
          {% set saldo = expand('sensor.grid_energy_teller_1','sensor.grid_energy_teller_2')
            |selectattr('state','is_number')
            |map(attribute='state')
            |map('float')|sum %}
          {{'green' if saldo < 0 else 'crimson'}}

and use that by means of the custom:config-template-card embedding the sankey-chart config:

  - type: custom:config-template-card
    entities:
      - input_select.sankey_min_state
      - sensor.grid_energy_total_color
    variables:
      min_state: states['input_select.sankey_min_state'].state
      saldo_color : states['sensor.grid_energy_total_color'].state
    card:
      type: custom:sankey-chart
      title: Energie verbruik
      min_state: ${min_state}
##snip

        - entities:
            - entity_id: sensor.saldo_totaal_dag_energie_afname_of_levering
  #             name: Saldo # now set in the template sensor name
              color: ${saldo_color}

and the detailed consumption

the bottom pics shows another ‘issue’. the heights of the last column are not adjusted to remain readable… Even though there is plenty space (these are ordered on value, so that might interfere here)

Maybe it’s also caused by the fact this is now inside a vertical-stack.
Still I would feel there is room for improvement considering the line heights…

Fixed my previous issue using remaining child state
.
Browsing through this topic, I noticed some things on ‘ordering’ are still open, nevertheless I’d like to check if I’m doing anything wrong here:

type: custom:stack-in-card
mode: vertical
cards:
  - type: energy-date-selection
    card_mod:
      style: |
        ha-card {
        border: none;
        background: none;
  - type: custom:sankey-chart
    show_names: true
    energy_date_selection: true
    height: 350
    sections:
      - entities:
          - entity_id: sensor.house_energy
            name: House
            color: rgb(0,0,65)
            type: remaining_child_state
            children:
              - sensor.shellyplugmasterbedroommultimedia_energy
              - Living_energy
              - sensor.shelly_plug_network_energy
              - sensor.office_gear_power_plug_energy
      - entities:
          - entity_id: sensor.shellyplugmasterbedroommultimedia_energy
            name: Master Bedroom
            color: darkgreen
            children:
              - sensor.shellyplugmasterbedroommultimedia_energy
          - entity_id: Living_energy
            type: remaining_child_state
            name: Living Room
            color: rgb(0,0,75)
            children:
              - sensor.shellypluglivingmultimedia_energy
              - Kitchen_energy
              - sensor.living_room_hue_energy
              - Smart_energy
          - entity_id: sensor.shelly_plug_network_energy
            name: Network
            color: rgb(35,0,65)
            children:
              - Smart_energy
          - entity_id: sensor.office_gear_power_plug_energy
            name: Office
            color: rgb(55,0,0)
            children:
              - sensor.office_gear_power_plug_energy
      - entities:
          - entity_id: sensor.shellyplugmasterbedroommultimedia_energy
            name: Master Bedroom
            type: passthrough
            color: rgb(0,35,55)
            children:
              - sensor.shellyplugmasterbedroommultimedia_energy
          - entity_id: sensor.shellypluglivingmultimedia_energy
            name: Living Room Multimedia
            type: passthrough
            color: rgb(0,35,55)
            children:
              - sensor.shellypluglivingmultimedia_energy
          - entity_id: Kitchen_energy
            type: remaining_child_state
            name: Kitchen
            color: midnightblue
            children:
              - sensor.shellyplug_s_7c87ceba3008_energy
              - sensor.freezer_energy
              - sensor.wine_fridge_energy
          - entity_id: sensor.living_room_hue_energy
            name: Hue
            color: darkorange
            children:
              - sensor.rear_energy
              - sensor.left_front_energy
              - sensor.right_front_energy
              - sensor.rear_table_energy
              - sensor.dining_energy
              - sensor.reading_energy
          - entity_id: Smart_energy
            type: remaining_child_state
            name: Smart Devices
            color: indigo
            children:
              - sensor.smart_display_energy_energy
              - sensor.shelly_plug_network_energy
          - entity_id: sensor.office_gear_power_plug_energy
            name: Office Gear
            type: passthrough
            color: rgb(195,0,0)
            children:
              - sensor.office_gear_power_plug_energy
      - entities:
          - entity_id: sensor.shellyplugmasterbedroommultimedia_energy
            name: Master Bedroom Multimedia
            color: green
          - entity_id: sensor.shellypluglivingmultimedia_energy
            name: Living Room Multimedia
            color: green
          - entity_id: sensor.shellyplug_s_7c87ceba3008_energy
            name: Fridge
          - entity_id: sensor.freezer_energy
            name: Freezer
          - entity_id: sensor.wine_fridge_energy
            name: Wine Fridge
          - entity_id: sensor.rear_energy
            color: var(--warning-color)
            name: Rear
          - entity_id: sensor.left_front_energy
            color: var(--warning-color)
            name: Left Front
          - entity_id: sensor.right_front_energy
            color: var(--warning-color)
            name: Right Front
          - entity_id: sensor.rear_table_energy
            color: var(--warning-color)
            name: Rear Table
          - entity_id: sensor.dining_energy
            color: var(--warning-color)
            name: Dining
          - entity_id: sensor.reading_energy
            color: var(--warning-color)
            name: Reading
          - entity_id: sensor.smart_display_energy_energy
            name: Smart Display
            color: purple
          - entity_id: sensor.shelly_plug_network_energy
            name: Network
            color: purple
          - entity_id: sensor.office_gear_power_plug_energy
            color: red
            name: Office Gear
    card_mod:
      style: |
        ha-card {
        border: none;

The smallest of the purple flows ( sensor.smart_display_energy_energy ) seems to go at the bottom from Living, where I would like to have it on top from the left as well.
Anything I can do about it?

2 Likes

maybe a typo, but you are missing a closing }

this was new to me so I immediately tried it. would be a great feature indeed. However, my fully configured yaml config, with all entities, only shows a single entity when this is used.
Ive made sure recorder includes these entities, but other than that, what could be wrong?

( I take it this has nothing to do with the actual HA energy dashboard? and relies solely on the config of this chart in the card at hand)

regular (without energy_date_selection: true) :

with date selection…:

unless:

Use this only for accumulated data sensors (energy/water/gas)

would mean we need ‘lifetime’ sensors here, and can not use the daily energy sensors… would make sense ofc, and have the date selector do its jib. Otoh, I dont understand why this single entity would display, as that too is a day counter.

1 Like

I use the date selection directly with the energy sensors of the relevant elements (e.g. energy sensors are created when Shelly Plugs are integrated), so no specific ‘daily’ sensors.
Also, the date selection covers the entire card as you can see.

So for now, it works for the sensors themselves. Any helpers I’ve made to group sensor data for instance have not been successful. I understood from @MindFreeze that indeed historical data is needed, but haven’t figured out which sensors do collect that and which don’t.
Hence, the use of remaining child state as that seems to work with the data selection.

The only thing (as mentioned before) that I seemingly haven’t gotten control of, is the order there :slight_smile:

yah, thanks, Ive updated to all lifetime sensors, either directly form my smart meter, or templated those, and that is much better :wink:

you can use swipe card to fluently swipable sankey card.
try like this:

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    card_width: 200%
    parameters:
      grabCursor: false
      allowTouchMove: true
      slidesPerView: auto
      freeMode: true
      preventInteractionOnTransition: false
    spaceBetween: 0
    scrollbar:
      hide: false
      draggable: false
      snapOnRelease: false
    cards:
      - type: custom:sankey-chart

sure, thx.
why would this solve the orientation issue? I mean, we can swipe, but the portrait orientation of the snaky chart still does not make any sense on a phone…

besides, I am a bit careful implementing the swiper card, as it is no longer maintained, and has been in that state for some time (even while being created by one of the frontend devs…)

it’s the best solution i have found for a mobile view of sankey chart. it’s not perfect but it works.
so far i have no issues at all with the swiper card and i use it for other energy charts and stats as well.

1 Like

trying ti make that device orientation dependent, I used the state-switch, but that simply refuses to show the swiper…

      type: custom:state-switch
      entity: mediaquery
      states:
        "(min-width: 1000px)":
          !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml
        all:
          type: custom:swipe-card
          card_width: 200%
          cards:
            - !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml

(I’ve reduced the swiper config to a minimum to rule out any setting)
guess this is one of those situation swiper creates trouble in combination with the embracing config-template-card… there are a few of those in the repo.

  - type: entities
    entities:
      - input_select.sankey_min_state
  - type: custom:config-template-card
    entities:
      - input_select.sankey_min_state
      - sensor.grid_energy_total_color
    variables:
      min_state: states['input_select.sankey_min_state'].state
      saldo_color : states['sensor.grid_energy_total_color'].state
    card:
      type: custom:state-switch
      entity: mediaquery
      states:
        "(min-width: 1000px)":
          !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml
        all:
          type: custom:swipe-card
          card_width: 200%
          cards:
            - !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml

___edit—

this seems to work ok-ish (I took out the config-template-card)

  - type: entities
    entities:
      - input_select.sankey_min_state
  - type: custom:state-switch
    entity: mediaquery
    states:
      "(min-width: 1000px)":
        !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml
      all:
        type: custom:swipe-card
        card_width: 200%
        parameters:
          grabCursor: false
          allowTouchMove: true
          slidesPerView: auto
          freeMode: true
          preventInteractionOnTransition: false
        spaceBetween: 0
        scrollbar:
          hide: false
          draggable: false
          snapOnRelease: false

        cards:
          - !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml

However, there’s a huge issue with the complete view becoming unstable, as it moves left and right in the app. The Frontend has an issue there, I reported it before, when cards scroll outside the fixed width.

So, though initially this might seem a nice solution, I feel its not a long term one.
probly should change that to show a markdown with

  - type: entities
    entities:
      - input_select.sankey_min_state
  - type: custom:state-switch
    entity: mediaquery
    states:
      "(min-width: 800px)":
        !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml
      all:
        type: markdown
        content: >
           ## Change screen

           To display the Energie Verbruik Sankey that should be here, change to
           landscape orientation or widen the screen

right, after a bit of extra editing, re-ordering of includes, this indeed seems to work correctly now:

title: Energie Sankey
path: energie_sankey
icon: mdi:chart-sankey-variant

panel: true

cards:

  - type: custom:state-switch
    entity: mediaquery
    states:
      "(min-width: 800px)":
        !include /config/dashboard/includes/include_sankey_energie.yaml
      all:
        type: custom:swipe-card
        card_width: 200%
        parameters:
          grabCursor: false
          allowTouchMove: true
          slidesPerView: auto
          freeMode: true
          preventInteractionOnTransition: false
        spaceBetween: 0
        scrollbar:
          hide: false
          draggable: false
          snapOnRelease: false
        cards:
          - !include /config/dashboard/includes/include_sankey_energie.yaml

#   - type: entities
#     entities:
#       - input_select.sankey_min_state
#
#       - !include /config/dashboard/includes/include_sankey_energie_verbruik.yaml
#
#       - !include /config/dashboard/includes/include_sankey_energie_onderverdeling.yaml

the !include inside the state-switch, is the full entities card I commented below it, (and can thus easily be amended for future changes)
anything bigger than the landscape phone will show the regular card, below that the swiper kicks in

Hi,

I like your graphs on the bottom of your layout. which card do you use therfore?

Hi,
can you tell us how you solved this with mqtt?
can you post the config?

It’s not easy to get the hang of this, I had a lot of missed connections in the process, but here is my first live energy flow dashboard:

Going to figure out how to deal with historical data next :slight_smile:

- type: custom:sankey-chart
  show_names: true
  sections:
    - entities:
      - entity_id: sensor.total_power_house
        children:
          - sensor.tapo_p115_1_current_power
    - entities:
      - sensor.tapo_p115_1_current_power

No matter what I try, I always get:

Configuration errors detected:

  • No type provided

sensor.total_power_house is a template sensor

        - name: Total Power House                                                       
          device_class: power                                                             
          state_class: measurement                                                        
          unit_of_measurement: W                                                        
          state: >                                                                  
            {{ states('sensor.grid_to_house') | int(default=0) + states('sensor.solar_to_house') | int(default=0) + states('sensor.battery_to_house') | int(default=0) }} 

should be:

    - entities:
      - entity_id: sensor.tapo_p115_1_current_power

I guess…

Unfortunately I get always the same error …

- type: custom:sankey-chart
  show_names: true
  sections:
    - entities:
      - entity_id: sensor.total_power_house
        children:
          - sensor.tapo_p115_1_current_power
    - entities:
       - entity_id: sensor.tapo_p115_1_current_power

image

Are you sure that ‘sensor.total_power_house’ exists?
If not, add a line below:

type: remaining_child_state

and sensor.total_power_house will add up its children.

1 Like

It’s likely a formatting error - Remove the dash from

- type:

on the first line - adjust indent of everything two characters to the left.

‘no type defined’ is saying it can’t find a card type - this is almost always because you have a dash when you shouldnt or need one where you dont

2 Likes

You’re right!!! Thanks! It was right in front of me :weary:

Can anyone help me arrange the text?

He was cut and I can’t arrange him to be presented correctly.