Gauge card

Please read ISSUE.md for the change i made to the code

ISSUE.md

A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CSS.

Options

Name	Type	Default	Description
type	string	Required	custom:gauge-card
title	string	optional	Name to display on card
measurement	string	optional	If not set, uses the unit_of_measurement on the entity
entity	string	Required	sensor.my_temperature
attribute	string	optional	If set, this attribute of the entity is used, instead of its state
min	number	0	Minimum value for graph
max	number	100	Maximum value for graph
scale	string	'50px'	Base value for graph visual size
severity	object	optional	Severity object. See below

Severity object

Name	Type	Default	Description
red	number	Required	Value from which to start red color
green	number	Required	Value from which to start green color
amber	number	Required	Value from which to start amber color

Example

Using two with stack

- type: horizontal-stack
  cards:
    - type: custom:gauge-card
      title: Temperature
      entity: sensor.random_temperature
      min: -20
      max: 35
    - type: custom:gauge-card
      title: Oil
      entity: sensor.my_oil_sensor
      severity:
        red: 50
        green: 0
        amber: 40

Simple one

- type: custom:gauge-card
  entity: sensor.my_oil_sensor
  scale: 100px

Using an attribute

- type: custom:gauge-card
  entity: climate.living_room
  attribute: current_temperature

Using an attribute with dot notation

- type: custom:gauge-card
  entity: climate.living_room.current_temperature

Credits

• @ciotlosm
• @isabellaalstrom