Card for HAOS system monitor

Share your Projects! Dashboards & Frontend
1

A simple card to monitor HAOS with system monitor

HAOS
HAOS455×457 16.9 KB

Made with custom:apexcharts-card, custom:plotly-graph

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:button-card
    name: HAOS
    label: null
    template: card_title
  - type: custom:stack-in-card
    mode: vertical
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              border: none;
              font-weight: 500;
              margin: 0px;
              height: 130px;
            }
        mode: horizontal
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:apexcharts-card
                chart_type: radialBar
                series:
                  - entity: sensor.system_monitor_utilisation_du_processeur
                    color: rgb(76, 175, 80)
                    max: 100
                    show:
                      legend_value: false
                apex_config:
                  plotOptions:
                    radialBar:
                      offsetY: 0
                      startAngle: -108
                      endAngle: 108
                      hollow:
                        size: 70%
                      dataLabels:
                        name:
                          show: false
                        value:
                          show: false
                      track:
                        strokeWidth: 80%
                        margin: 0
                  legend:
                    show: false
                  chart:
                    height: 140px
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                    }
              - type: custom:mushroom-entity-card
                entity: sensor.system_monitor_utilisation_du_processeur
                primary_info: name
                secondary_info: state
                name: CPU
                icon_color: green
                layout: vertical
                card_mod:
                  style: |
                    ha-card {
                      top: -63px;
                      border: none;
                    }
            card_mod:
              style: |
                ha-card {
                  border: none;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:apexcharts-card
                chart_type: radialBar
                series:
                  - entity: sensor.system_monitor_utilisation_de_la_memoire
                    color: rgb(33, 150, 243)
                    max: 100
                    show:
                      legend_value: false
                apex_config:
                  plotOptions:
                    radialBar:
                      offsetY: 0
                      startAngle: -108
                      endAngle: 108
                      hollow:
                        size: 70%
                      dataLabels:
                        name:
                          show: false
                        value:
                          show: false
                      track:
                        strokeWidth: 80%
                        margin: 0
                  legend:
                    show: false
                  chart:
                    height: 140px
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                    }
              - type: custom:mushroom-entity-card
                entity: sensor.system_monitor_utilisation_de_la_memoire
                primary_info: name
                secondary_info: state
                name: Mémoire
                icon_color: blue
                layout: vertical
                card_mod:
                  style: |
                    ha-card {
                      top: -63px;
                      border: none;
                    }
            card_mod:
              style: |
                ha-card {
                  border: none;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:apexcharts-card
                chart_type: radialBar
                series:
                  - entity: sensor.system_monitor_utilisation_du_disque
                    color: rgb(255, 87, 34)
                    max: 100
                    show:
                      legend_value: false
                apex_config:
                  plotOptions:
                    radialBar:
                      offsetY: 0
                      startAngle: -108
                      endAngle: 108
                      hollow:
                        size: 70%
                      dataLabels:
                        name:
                          show: false
                        value:
                          show: false
                      track:
                        strokeWidth: 80%
                        margin: 0
                  legend:
                    show: false
                  chart:
                    height: 140px
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                    }
              - type: custom:mushroom-entity-card
                entity: sensor.system_monitor_utilisation_du_disque
                primary_info: name
                secondary_info: state
                name: Disque
                icon_color: deep-orange
                layout: vertical
                card_mod:
                  style: |
                    ha-card {
                      top: -63px;
                      border: none;
                    }
            card_mod:
              style: |
                ha-card {
                  border: none;
                }
      - type: custom:plotly-graph
        entities:
          - entity: sensor.system_monitor_utilisation_du_processeur
            name: CPU
            yaxes: y1
            show_value: true
            line:
              color: rgb(76, 175, 80)
            showlegend: false
          - entity: sensor.system_monitor_memoire_utilisee
            name: Mémoire
            filters:
              - map_y_numbers: y/1000
            unit_of_measurement: GB
            yaxes: y2
            show_value: true
            line:
              color: rgb(33, 150, 243)
            showlegend: false
          - entity: sensor.system_monitor_espace_libre
            name: Disque
            unit_of_measurement: free
            yaxes: y3
            show_value: true
            line:
              color: rgb(255, 87, 34)
            showlegend: false
        hours_to_show: 24
        refresh_interval: 10
        defaults:
          yaxes:
            fixedrange: true
            autorange: true
            side: left
            overlaying: "y"
            visible: true
            showgrid: true
        layout:
          margin:
            r: 75
          plot_bgcolor: white
          dragmode: pan
          showlegend: true
          height: 300
          grid:
            columns: 1
            rows: 3
            ygap: 0.2
            pattern: coupled
            roworder: top to bottom
            shared_xaxes: true
          yaxis:
            title: CPU %
            gridcolor: whitesmoke
            minallowed: 0
            maxallowed: 100
            rangemode: tozero
          yaxis2:
            title: Mémoire GB
            visible: true
            side: left
            gridcolor: whitesmoke
            zeroline: false
            rangemode: tozero
            minallowed: 0
            maxallowed: >-
              {{ ( states('sensor.system_monitor_memoire_utilisee') | float +
              states('sensor.system_monitor_memoire_libre') | float ) / 1000 }}
          yaxis3:
            title: Disque GB
            visible: true
            side: left
            gridcolor: whitesmoke
            zeroline: false
            rangemode: tozero
        card_mod:
          style: |
            ha-card {
              border: none;
            }
2 Likes
2

thanks for sharing

3

It looks nice, but there was a lot of additional information (esp. custom cards) for me to get before I got it to work.

image
image549×431 19.4 KB

And, unfortunately, my carefully crafted layout didn’t stick when the view changed to more than one column :frowning:

image
image296×107 4.61 KB

4

oh, the good old times, as entity names was plain old english. Then this could be copied without need to change names :slight_smile:

5

Sorry, i could not test with english since sensor names have to be in french.

6

Did you mean that the column was too narrow to display the gaphics ?

7

Not sure, if it’s a ‘too narrow’ issue - the displayed gauges run into their own icons on a narrower column.

image
image296×107 4.61 KB

8

Due to this instability, j have tried a new presentation based on plotly graph, but it was not convincing and j went back to gauge card. It is much simpler.

image
image468×510 20.8 KB

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:button-card
    name: HAOS
    label: null
    template: card_title
  - type: custom:stack-in-card
    mode: vertical
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              border: none;
              font-weight: 500;
              margin: 0px;
              height: 130px;
            }
        mode: horizontal
        cards:
          - type: gauge
            entity: sensor.system_monitor_utilisation_du_processeur
            name: CPU
            needle: true
            segments:
              - from: 0
                color: rgb(76, 175, 80)
              - from: 80
                color: red
            card_mod:
              style: |
                ha-card {
                  border: none;
                  margin: 0px;
                } 
          - type: gauge
            entity: sensor.system_monitor_utilisation_de_la_memoire
            name: Mémoire
            needle: true
            segments:
              - from: 0
                color: rgb(33, 150, 243)
              - from: 80
                color: red
            card_mod:
              style: |
                ha-card {
                  border: none;
                  margin: 0px;
                } 
          - type: gauge
            entity: sensor.system_monitor_utilisation_du_disque
            name: Disque
            needle: true
            segments:
              - from: 0
                color: DarkGoldenRod
              - from: 85
                color: red
            card_mod:
              style: |
                ha-card {
                  border: none;
                  margin: 0px;
                } 
      - type: custom:plotly-graph
        entities:
          - entity: sensor.system_monitor_utilisation_du_processeur
            name: CPU
            yaxes: y1
            show_value: true
            line:
              color: rgb(76, 175, 80)
            showlegend: false
          - entity: sensor.system_monitor_memoire_utilisee
            name: Mémoire
            filters:
              - map_y_numbers: y/1000
            unit_of_measurement: GB
            yaxes: y2
            show_value: true
            line:
              color: rgb(33, 150, 243)
            showlegend: false
          - entity: sensor.system_monitor_espace_libre
            name: Disque
            unit_of_measurement: free
            yaxes: y3
            show_value: true
            line:
              color: rgb(255, 87, 34)
            showlegend: false
        hours_to_show: 24
        refresh_interval: 10
        defaults:
          yaxes:
            fixedrange: true
            autorange: true
            side: left
            overlaying: "y"
            visible: true
            showgrid: true
        layout:
          margin:
            r: 75
          plot_bgcolor: white
          dragmode: pan
          showlegend: true
          height: 300
          grid:
            columns: 1
            rows: 3
            ygap: 0.2
            pattern: coupled
            roworder: top to bottom
            shared_xaxes: true
          yaxis:
            title: CPU
            gridcolor: whitesmoke
            minallowed: 0
            maxallowed: 100
            rangemode: tozero
          yaxis2:
            title: Mémoire GB
            visible: true
            side: left
            gridcolor: whitesmoke
            zeroline: false
            rangemode: tozero
            minallowed: 0
            maxallowed: >-
              {{ ( states('sensor.system_monitor_memoire_utilisee') | float +
              states('sensor.system_monitor_memoire_libre') | float ) / 1000 }}
          yaxis3:
            title: Disque GB
            visible: true
            side: left
            gridcolor: whitesmoke
            zeroline: false
            rangemode: tozero
        card_mod:
          style: |
            ha-card {
              border: none;
              margin: 0px;
            }