Energy Devices Graph "nach bauen"?

Dashboard/Cards/Frontend
1

Hallo

Ich würde gerne die Karte energy-devices-graph vom Energy Dashboard nach bauen.
Grund dafür ist, dass die HA Karten in meinem Tablet nicht korrekt aktualisieren.

Ich nutze die HA App mit Kiosk Mode auf einem Android Tablet.

20240320_185152
20240320_1851521920×1081 199 KB

Diesen Fehler, das die HA Karten nicht richtig aktualisieren, gibt es mehrfach auf github. Allerdings gibt es dazu keine Lösung die in meinem Fall funktioniert, daher mein anliegen diese Karte nach zu bauen.
Hatte das gleiche Problem mit der Wasser Karte, diese konnte ich allerdings mit apexcharts recht einfach selbst erstellen.

Ich finde aber keine möglichkeit den energy-devices-graph selbst zu erstellen.

Ich habe es mit der Bar Card probiert, das Ergebnis war aber nicht zufrieden stellend.

Mit der History Card von HA geht es auch nicht wirklich, da ich zwar 24 Stunden angeben kann, aber nicht nur für den Tag, so dass ich auch die Stunden vom letzten Tag angezeigt bekomme. Außerdem Sind die Bars senkrecht, bräuchte sie aber waagerecht.

Hat von euch jemand einen Vorschlag?

2

Ich habe jetzt etwas rum probiert, bin mit dem Ergebnis aber nicht zufrieden.

Screenshot 2024-03-23 111304
Screenshot 2024-03-23 111304719×739 33.6 KB

Ich bekomme mit den verschiedenen Methoden die ich im Netz finde einfach den abstand der Balken nicht kleiner, dieser ist zu groß.

Die Methode Sort funktioniert auch leider nicht nicht.

Und ich hätte gerne das der Balken bzw. der Schatten des Balkens durchsichtig ist, aber mit dem befehl shaddow, funktioniert das irgendwie nicht.

type: custom:bar-card
positions:
  icon: 'off'
  indicator: inside
  name: outside
sort:
  method: state
  numeric: true
  reverse: true
decimal: 2
width: 65%
title: Stromverbrauch
entities:
  - entity: sensor.backofen_oben_taglich
    name: Backofen (oben)
    height: 20px
    color: green
  - entity: sensor.gaming_pc_monitore_taglich
    name: Gaming PC
    height: 20px
    color: blue
  - entity: sensor.heizkorper_garage_kwh_taglich
    name: Heizkörper Garage
    height: 20px
    color: red
  - entity: sensor.home_assistant_taglich
    name: Home Assistant
    height: 20px
    color: yellow
  - entity: sensor.kuhlschrank_oben_taglich
    name: Kühlschrank oben
    height: 20px
    color: yellow
  - entity: sensor.kuhlschrank_unten
    name: Kühlschrank unten
    height: 20px
    color: yellow
  - entity: sensor.microwelle_oben_kwh_taglich
    name: Microwelle
    height: 20px
    color: yellow
  - entity: sensor.pool_pumpe_taglich
    name: Pool Pumpe
    height: 20px
    color: yellow
  - entity: sensor.sicker_pumpe_kwh_taglich
    name: Sickerpumpe
    height: 20px
    color: yellow
  - entity: sensor.spulmaschine_oben_taglich
    name: Spülmaschine
    height: 20px
    color: yellow
  - entity: sensor.waschetrockner_taglich
    name: Wäschetrockner
    height: 20px
    color: yellow
  - entity: sensor.waschmaschine_taglich
    name: Waschmaschine
    height: 20px
    color: yellow
3

Versuche es mal so.

type: custom:config-template-card
variables:
  - entity: sensor.tagesverbrauch_kuche_kwh
    name: Tagesverbrauch Küche
  - entity: sensor.tagesverbrauch_vorzimmer_kwh
    name: Tagesverbrauch Vorzimmer
  - entity: sensor.tagesverbrauch_wohnzimmer_kwh
    name: Tagesverbrauch Wohnzimmer
  - entity: sensor.tagesverbrauch_badezimmer_kwh
    name: Tagesverbrauch Badezimmer
  - entity: sensor.tagesverbrauch_werkstatt_kwh
    name: Tagesverbrauch Werkstatt
  - entity: sensor.tagesverbrauch_abstellraum_kwh
    name: Tagesverbrauch Abstellraum
  - entity: sensor.tagesverbrauch_wc_kwh
    name: Tagesverbrauch Klo
  - entity: sensor.tagesverbrauch_schlafzimmer_kwh
    name: Tagesverbrauch Schlafzimmer
entities:
  - sensor.tagesverbrauch_kuche_kwh
  - sensor.tagesverbrauch_vorzimmer_kwh
  - sensor.tagesverbrauch_wohnzimmer_kwh
  - sensor.tagesverbrauch_badezimmer_kwh
  - sensor.tagesverbrauch_werkstatt_kwh
  - sensor.tagesverbrauch_abstellraum_kwh
  - sensor.tagesverbrauch_wc_kwh
  - sensor.tagesverbrauch_schlafzimmer_kwh
element:
  type: custom:bar-card
  entities: >-
    ${vars.filter(v => states[v.entity].state ).sort((v1,v2) =>
    states[v2.entity].state-states[v1.entity].state)}
  direction: right
  entity_row: true
  min: 0
  max: ${ Math.max(...vars.map(v => states[v.entity].state))}
  height: 30px
  stack: vertical
  decimal: 2
  icon: mdi:flash
  positions:
    icon: 'off'
    indicator: outside
    name: inside
    value: inside
  severity:
    - color: '#11b00e'
      from: 0
      to: 1
    - color: '#6b347d'
      from: 1
      to: 3
    - color: '#ad1320'
      from: 3
      to: 100
  style: "#states > * {\n  margin: 2px;\n}\nbar-card-name,\nbar-card-value {\n  font-size: 1rem;\n  color: #ffffffaa;\n  font-weight: bold;\n}\nbar-card-value\t{\n  font-weight: bolder;\n}\nbar-card-indicator {\n  margin-top: 4px;\n  transform: scaleY(-1);\n}"
4

Vielen dank für ihre Antwort, das geht schonmal in die richtige Richtung

Screenshot 2024-03-23 222706
Screenshot 2024-03-23 222706475×522 14.7 KB

Allerdings ist mir der abstand der Balken auch hier zu groß. Wenn ich die Werte in ihrem Code am Ende verändere passiert aber leider nichts?

Ich würde auch hier gerne nur den Balken anzeigen, ohne den Balken Hintergrund.

type: custom:config-template-card
variables:
  - entity: sensor.backofen_oben_taglich
    name: Backofen (oben)
  - entity: sensor.gaming_pc_monitore_taglich
    name: Gaming PC
    color: '#106c8e'
  - entity: sensor.heizkorper_garage_kwh_taglich
    name: Heizkörper Garage
  - entity: sensor.home_assistant_taglich
    name: Home Assistant
    color: '#96be53'
  - entity: sensor.kuhlschrank_oben_taglich
    name: Kühlschrank (oben)
    color: '#7F388B'
  - entity: sensor.kuhlschrank_unten
    name: Kühlschrank (unten)
    color: '#c5a100'
  - entity: sensor.microwelle_oben_kwh_taglich
    name: Microwelle
  - entity: sensor.pool_pumpe_taglich
    name: Pool-Pumpe
  - entity: sensor.sicker_pumpe_kwh_taglich
    name: Sickerpumpe
    color: yellow
  - entity: sensor.spulmaschine_oben_taglich
    name: Spülmaschine
    color: '#20b2aa'
  - entity: sensor.waschetrockner_taglich
    name: Wäschetrockner
    color: '#ee9a49'
  - entity: sensor.waschmaschine_taglich
    name: Waschmaschine
    color: yellow
entities:
  - sensor.backofen_oben_taglich
  - sensor.gaming_pc_monitore_taglich
  - sensor.heizkorper_garage_kwh_taglich
  - sensor.home_assistant_taglich
  - sensor.kuhlschrank_oben_taglich
  - sensor.kuhlschrank_unten
  - sensor.microwelle_oben_kwh_taglich
  - sensor.pool_pumpe_taglich
  - sensor.sicker_pumpe_kwh_taglich
  - sensor.spulmaschine_oben_taglich
  - sensor.waschetrockner_taglich
  - sensor.waschmaschine_taglich
element:
  type: custom:bar-card
  entities: >-
    ${vars.filter(v => states[v.entity].state ).sort((v1,v2) =>
    states[v2.entity].state-states[v1.entity].state)}
  direction: right
  entity_row: false
  min: 0
  max: ${ Math.max(...vars.map(v => states[v.entity].state))}
  height: 20px
  width: 65%
  stack: vertical
  decimal: 2
  icon: mdi:flash
  positions:
    icon: 'off'
    indicator: outside
    name: outside
    value: 'off'