Energy Line Gauge

A line Gauge with a focus on Energy Usage

The main idea of this card is to show the energy consumption of your devices as a percentage of the main entity (your entity for tracking whole house consumption).

My electricity meter is a Sagemcom XT211, I made a custom ESPHome component to read data from it (or any other DLMS/COSEM PUSH meter using RS485).

The card is designed to resemble the Home Assistant Energy panel style. The auto color option will use the colors in the same order as the energy panel.

Table of Contents

• Installation
  • Installation via HACS
  • Manual installation
• Configuration
  • Visual Editor
  • YAML Only
  • Main Options
  • Types
  • Entities
• Examples
  • Icons in the legend
  • Only Line
  • Delta
  • Legend with all entities
  • Normal usage
  • Position (Text & Title Placement)
  • Legend (Layout & Alignment)
  • Theme (Corner Styles)
  • Style (Text Styling)
  • Overflow (Text Overflow Handling)
• State Content
  • Untracked State Content
• Offset
• Statistics
• Line Separators
• Templating
• Sorting
• Severity
• Issues
• Contribute

Installation

Installation via HACS

1. Make sure the HACS custom component is installed and working.
2. Search for energy-line-gauge
3. Click Download and then select the latest version.
4. Reload home-assistant.

Manual installation

1. Download the three files from the latest release
2. Create a energy-line-gauge folder inside your config/www folder and place the files in there
3. Include the card code in your ui-lovelace-card.yaml ```yaml resources:
   • url: /local/energy-line-gauge/energy-line-gauge.js type: module `` Or alternatively set it up via the UI:Configuration -> Lovelace Dashboards -> Resources (TAB)` For more guidance check out the docs.

Configuration

Version 2.0 added a Visual Editor to make the configuration easier. You can find the Card in your Card Selector or by scrolling down to the bottom of the Card Selector and selecting Manual Card. Then you can paste the following code into the Card Editor: type: 'custom:energy-line-gauge'

YAML Only

Some features are not yet available in the Visual Editor. For example the ability to set min and max to be an entity or color auto.

type: 'custom:energy-line-gauge'
entity: sensor.glow_power_consumption

title: Power Consumption
subtitle: Glow

title_position: top-left
title_text_size: 2
title_text_style: shadow-light

title_text_color: gray
subtitle_text_color: black

min: 0
max: sensor.glow_power_consumption

precision: 0
unit: W
cutoff: 5
offset: 1d
sorting: value-desc

position: left
text_size: 2.5
text_style: weight-bold
text_color: auto

line_height: 3
corner: 'square'
state_content_separator: '|'
line_separator: true
line_separator_width: 'each010'
line_text_color: auto

color: "#00aafa"
color_bg:
    - 40
    - 40
    - 40

line_text_position: 'bottom-right'
line_text_size: 1.5
line_text_style: shadow-medium
line_text_overflow: fade
overflow_direction: right

tap_action:
  action: more-info
  entity: sensor.glow_power_consumption
hold_action:
  action: none
double_tap_action:
  action: none

legend_hide: false
legend_all: false

legend_position: bottom-center
legend_alignment: center
legend_indicator: icon-fallback
legend_text_size: 1
legend_text_style: italic
legend_text_color: gray

show_delta: false
delta_position: bottom-center

untracked_legend: true
untracked_legend_label: Untracked
untracked_legend_icon: mdi:flash
untracked_legend_indicator: icon-fallback

untracked_state_content:
  - name
  - state
untracked_line_state_content:
  - percentage

suppress_warnings: false

statistics: false
statistics_day_offset: 1
statistics_period: 'hour'
statistics_function: 'mean'

severity: true 
severity_levels:
  - from: 50
    color: red
  - from: 100
    color: yellow
  - form: 200
    color: green
severity_blend: false

entities:
  - entity: sensor.plug_0_power
    name: Plug 0
    icon: mdi:flash
    color: "auto"
    cutoff: 5
    unit: W
    multiplier: 1
    precision: 0
    state_content:
      - name
      - state
      - percentage
    line_state_content:
      - percentage
    legend_indicator: '-'
  - entity: sensor.plug_1_power
    attribute: device_class
    name: Plug 1
    color:
      - 244
      - 189
      - 74

Main Options

There are a lot of settings you can customize your sensors with: