My simple custom power card

Share your Projects! Dashboards & Frontend
1

I’m not a fan of the default energy distribution card, I don’t like the layout or animation and I have a very basic setup with just electricity and gas coming in. I have a Hildebrand Glow sending my data and I just wanted a simple overview card showing current use along side a daily use and cost total.

IMG_6877.PNG
IMG_6877.PNG1170×2532 168 KB

There’s definitely changes I’d like to make to it, the ApexCharts current use graph isn’t the best and I’d like to improve the formatting of the numbers, but it broadly achieves what I want.

Does anyone else have any examples of simple energy cards they’ve done?

Code for this one:

type: custom:vertical-stack-in-card
cards:
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            update_interval: 30sec
            card_mod:
              style: |
                ha-card {
                  border: none;
                }
                #spinner-wrapper {
                  display: none;
                }
            chart_type: radialBar
            series:
              - entity: sensor.smart_meter_electricity_power
                color: '#46aa00'
                max: 4
                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: 200
          - type: custom:mushroom-entity-card
            entity: sensor.smart_meter_electricity_power
            primary_info: state
            secondary_info: none
            icon_color: grey
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  margin-left: auto;
                  margin-right: auto;
                  box-shadow: none;
                  border: none;
                  margin-top: -90px;
                  width: 140px;
                  transition: none;
                  background: transparent;
                }
      - square: false
        type: grid
        columns: 1
        cards:
          - type: custom:mushroom-template-card
            primary: '{{ states(''sensor.smart_meter_gas_import_today'') }} kWh'
            secondary: £{{ states('sensor.smart_meter_gas_cost_today') }}
            icon: mdi:fire
            icon_color: blue
            fill_container: true
            card_mod:
              style: |
                ha-card {
                  border: none;
                  box-shadow: none;
                }
          - type: custom:mushroom-template-card
            primary: '{{ states(''sensor.smart_meter_electricity_import_today'') }} kWh'
            secondary: £{{ states('sensor.smart_meter_electricity_cost_today') }}
            icon: mdi:flash
            icon_color: amber
            fill_container: true
            card_mod:
              style: |
                ha-card {
                  border: none;
                  box-shadow: none;
                }
1 Like