Custom-card "Power details"

The custom_card_damix48_power_details is an extension of the standard graph card and can show a detailed graphs of power consumption. If hover (or tap in mobile) the points of the line show the average power in that time interval.

Credits

Author: Damix48 Version: 0.1.1

Changelog

0.1.0

Initial release.

0.1.1

Fix for UI Minimalist v1.0.1.

Breaking Change

Since v1.0.2 you also need to specify the entity outside the variables section.

Usage

- type: "custom:button-card"
  template: custom_card_damix48_power_details
  entity: sensor.shellyem_id_channel_1_power
  variables:
    ulm_card_power_details_name: Power
    ulm_card_power_details_entity: sensor.shellyem_id_channel_1_power
    ulm_card_power_details_hours: 2
    ulm_card_power_details_24hour: true
    ulm_card_power_details_thresholds:
      - value: 0
        color: "#43A047"
      - value: 2500
        color: "#FFA600"
      - value: 3000
        color: "#DB4437"

Requirements

Need mini-graph-card

Variables

Variable	Example	Required	Explanation
ulm_card_power_details_entity	sensor.shellyem_id_channel_1_power	yes	Power sensor entity
ulm_card_power_details_name	"Power"	no	Name to show on card.
ulm_card_power_details_hours	2	no	Number of hour to show in the graph (2 is the default value)
ulm_card_power_details_24hour	true	no	Switch from AM/PM (default) to 24h format
ulm_card_power_details_thresholds	- value: 0 color: "#43A047" - value: 2500 color: "#FFA600" - value: 3000 color: "#DB4437"	no	Thresholds to change color in the graph according to power value (default is only one color)
ulm_card_power_details_height	180	no	Height of the graph (180 is the default value)

Template Code

custom_card_damix48_power_details.yaml

---
custom_card_damix48_power_details:
  template:
    - "ulm_custom_card_damix48_power_details_language_variables"
  variables:
    ulm_card_power_details_name: "n/a"
    ulm_card_power_details_hours: 2
    ulm_card_power_details_24hour: false
    ulm_card_power_details_height: 180
  show_icon: false
  show_name: false
  show_label: false
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "0px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_info"
          - "card_generic_swap"
        entity: "[[[ return entity.entity_id ]]]"
        variables:
          ulm_card_generic_swap_name: "[[[ return variables.ulm_card_power_details_name ]]]"
        styles:
          card:
            - box-shadow: "none"
            - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
            - padding: "12px"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template:
                - "icon_more_info"
              custom_fields:
                item1:
                  card:
                    type: "custom:button-card"
                    entity: "[[[ return entity.entity_id ]]]"
                item2:
                  card:
                    type: "custom:button-card"
                    entity: "[[[ return entity.entity_id ]]]"
                    label: |
                      [[[
                        if (variables.ulm_card_power_details_hours == 1) {
                          return variables.ulm_custom_card_damix48_power_details_in_the_last + " " + variables.ulm_custom_card_damix48_power_details_hour;
                        } else {
                          return variables.ulm_custom_card_damix48_power_details_in_the_lasts + " " + variables.ulm_card_power_details_hours + " " + variables.ulm_custom_card_damix48_power_details_hours;
                        }
                      ]]]
    item2:
      card:
        type: "custom:mini-graph-card"
        template:
          - "icon_info"
          - "card_generic"
        entities:
          - entity: "[[[ return variables.ulm_card_power_details_entity ]]]"
        color_thresholds: |
          [[[
            if (variables.ulm_card_power_details_thresholds) {
              return variables.ulm_card_power_details_thresholds;
            } else {
              return [{
                value: 0,
                color: "var(--info-color)"
              }];
            }
          ]]]
        hours_to_show: "[[[ return variables.ulm_card_power_details_hours ]]]"
        points_per_hour: "[[[ return Math.floor(120 / variables.ulm_card_power_details_hours) ]]]"
        name: "[[[ return variables.ulm_card_power_details_name ]]]"
        hour24: "[[[ return variables.ulm_card_power_details_24hour ]]]"
        decimals: 1
        show:
          name: false
          icon: false
          legend: false
          state: true
        align_state: "center"
        height: "[[[ return variables.ulm_card_power_details_height ]]]"
        style: |
          ha-card {
            box-shadow: none;
            border-radius: var(--border-radius);
          }
          ha-card .state {
            font-weight: bold;
            font-size: 14px;
          }
          ha-card .graph__labels > span {
            background: var(--card-background-color);
            color: var(--secondary-text-color)
          }