Rework Overview Dashboard

[andi-blafasl]

I'm making some tests for a nice visual overview Dashboard. Feedback would be nice. Maybe gauges and badges:

and / or diagram and glances:

It is a bit difficult to get a nice looking layout without any custom cards and layout mods. But I'm very new to it and climbing the learning curve ;-)

[Louisbertelsmann]

I think that those gauges look very cluttered. The power import/export gauges is pretty good though. A custom card would be the better solution. For the normal dashboard some normal elements or entities look better in my opinion. But I think changing some of the gauges, that change color depending on the status would be better looking if changed to normal ones without color.

[Louisbertelsmann]

Mine looks something like this.

[mkaiser]

I really like the compressed status at the top. How did you do this?

For me, only the lower gauges are most valueable for "a quick peek"

I made a similar graph (just commited also)

How did you span the graph over the full width?

[mkaiser]

It would be great, if you would share your dashboards among some screenshots.

Could you create a PR with an added folder here /dashboard examples/YOURNAME

including a screenshot and some code? Then I can just merge it and will help others :)

[andi-blafasl]

I'm far away from a working dashboard example. Just experimenting with different visualization components. The status at top is called "badges". Can be found here:

Here's my YAML for the Screenshots above:

  - theme: Backend-selected
    title: test
    path: test
    type: panel
    subview: false
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                show_state: false
                type: glance
                entities:
                  - entity: sun.sun
                  - entity: binary_sensor.pv_generating
                  - entity: binary_sensor.battery_charging
                  - entity: binary_sensor.battery_discharging
                  - entity: binary_sensor.exporting_power
                  - entity: binary_sensor.importing_power
                title: Status
                columns: 3
              - type: gauge
                entity: sensor.battery_level
                needle: true
                severity:
                  green: 40
                  yellow: 20
                  red: 0
                min: 0
                max: 100
          - type: horizontal-stack
            cards:
              - chart_type: line
                period: 5minute
                days_to_show: 1
                type: statistics-graph
                entities:
                  - sensor.load_power
                  - sensor.signed_battery_power
                  - sensor.export_power_raw
                  - sensor.total_dc_power
                stat_types:
                  - mean
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: false
                show_state: true
                type: glance
                entities:
                  - entity: sensor.daily_pv_generation
                  - entity: sensor.daily_exported_energy_from_pv
                  - entity: sensor.daily_pv_generation_battery_discharge
                  - entity: sensor.daily_battery_charge
                  - entity: sensor.daily_battery_charge_from_pv
                  - entity: sensor.daily_battery_discharge
                  - entity: sensor.daily_exported_energy
                  - entity: sensor.daily_imported_energy
                  - entity: sensor.daily_direct_energy_consumption
                state_color: false
          - type: horizontal-stack
            cards: []
  - theme: Backend-selected
    title: test2
    path: test2
    badges:
      - entity: sun.sun
      - entity: binary_sensor.pv_generating
      - entity: binary_sensor.battery_charging
      - entity: binary_sensor.battery_discharging
      - entity: binary_sensor.exporting_power
      - entity: binary_sensor.importing_power
    cards:
      - type: gauge
        entity: sensor.total_dc_power
        needle: true
        severity:
          green: 5000
          yellow: 2000
          red: 0
        max: 7000
        min: 0
      - type: gauge
        entity: sensor.load_power
        needle: true
        max: 10500
        min: 0
        severity:
          green: 0
          yellow: 3500
          red: 7000
      - type: gauge
        entity: sensor.import_power
        needle: true
        max: 10500
        min: 0
        severity:
          green: 0
          yellow: 3500
          red: 7000
      - type: gauge
        entity: sensor.export_power
        min: 0
        max: 7000
        needle: true
        severity:
          green: 5000
          yellow: 2000
          red: 0
      - type: gauge
        entity: sensor.battery_charging_power
        needle: true
        severity:
          green: 5000
          yellow: 2000
          red: 0
        max: 7000
        min: 0
      - type: gauge
        entity: sensor.battery_discharging_power
        needle: true
        severity:
          green: 5000
          yellow: 2000
          red: 0
        max: 7000
        min: 0
      - type: gauge
        entity: sensor.signed_battery_power
        min: -7000
        max: 7000
        needle: true
        severity:
          green: 0
          yellow: 7000
          red: -7000
        name: 'Battery: discharge - / + charge'
      - type: gauge
        entity: sensor.export_power_raw
        needle: true
        severity:
          green: 0
          yellow: 7000
          red: -7000
        min: -7000
        max: 7000
        name: 'Power: import - / + export'

How did you span the graph over the full width?

As you can see I stacked horizontal and vertical stacks together. Not very easy to maintain, but the only thing I found so far without third party addons like layout-card or card-mod

[GrandAmmor]

and / or diagram and glances:

I like that clean style a lot! A wide dashboard to get an '16:9'- overview would be nice.

Also the Tesla-Style-Power-Card made by Louis712 looks lovely! I would prefer this to the power-flow-card (which looks nice too) because of the possibility to add a heater/heat pump and an EV and visualize their power flow.

You guys are doing great stuff all the time! :)

[andi-blafasl]

I like the pover-flow-card, but I use the energy dashboard for this kind of info. For me the PV Overview is more focused on "what's happening with my PV now". Thats why I'm curios about the history diagram and the daily values... still trying different thins... so many possibilities 😁

[andi-blafasl]

ok, you got me hooked -> #63

Idea 1 "mobile" with badges

Idea 2 "tablet" without badges, because you can not have badged if the view is set everything else then GRID...

[GrandAmmor]

Mine looks something like this.

Would you like to share your Tesla-Style-Power-Card in the dashboard folder also? There is no proper sungrow configuration for that card anywhere in the www. And I guess a lot more people than just me would love to see your config online here 😉

[Louisbertelsmann]

Will Do this afternoon.

[mkaiser]

Closing this issue, because I am loosing the overview ;)

If you want to provide any dashboards, please use the discussions or make a PR :)