Adding Gauge Card to Lovelace

[zsarnett]

Adds a new card type gauge to the available cards

Card uses the Previously made Custom Card located here

Configuration Variables

Name	Type	Default	Description
type	string	Required	gauge
entity	string	Required	sensor.my_temperature
title	string	optional	Name to display on card
unit_of_measurement	string	optional	If not set, uses the unit_of_measurement on the entity
min	number	0	Minimum value for graph
max	number	100	Maximum value for graph
severity	object	optional	Severity object. See below

Severity Variables

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

Example

- type: gauge
  title: Testing
  entity: input_number.slider1
  unit_of_measurement: '%'
  min: 0
  max: 100
  severity:
    red: 85
    green: 0
    amber: 45

Open to any advice on more efficient code and changes to the card. First pull request to any Repo.

[homeassistant]

Hi @zsarnett,

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[balloob]

• Please revert the change to yarn.lock
• Please add an entry to the gallery

[zsarnett]

@balloob
How would you suggest allowing an attribute of an Entity to be the data source for the Gauge?

Ex. climate.ecobee.attributes.current_temperature

Allowing that as the entity and in the card splitting the entity from the attribute?

- type: gauge
  entity: climate.ecobee.attributes.current_temperature

or
Creating a new variable to hold the attribute

- type: gauge
  entity: climate.ecobee
  attribute: current_temperature

[thomasloven]

I'd go for the second alternative, simply because climate.ecobee.attributes.current_temperature is not an entity. That's also much more easy to parse in a readable (read maintainable) way.

[jeradM]

I'd rather see the stateObj be a computed and observed property. Then you won't need to observe hass since _hassChanged() isn't doing anything else anyway:

_stateObj: {
  type: Object,
  computed: '_computeStateObj(hass.states, _config.entity)'
  observer: '_stateObjChanged'
}

then:

_computeStateObj(states, entityId) {
  if (!states || !entityId) return null;
  return states[entityId];
}

_stateObjChanged(stateObj) {
  # Check that stateObj exists an do all your updates to the gauge, etc...
}

Then you can also update the template to observe _stateObj to determine the state/title:

<div class="gauge-data">
  <div id="percent">[[_computeStateDisplay(_stateObj)]]</div>
  <div id="title">[[_computeTitle(_stateObj)]]</div>
</div>

Then in _computeStateDisplay/_computeTitle, you choose to either display state/title or some kind of error message

[zsarnett]

Then you can also update the template to observe _stateObj to determine the state/title:

<div class="gauge-data">
  <div id="percent">[[_computeStateDisplay(_stateObj)]]</div>
  <div id="title">[[_computeTitle(_stateObj)]]</div>
</div>

When using the above, the gauge data functions aren't getting called when the state obj changes.

[jeradM]

Did you define a computed _stateObj property? Is _computeStateObj() getting called and _stateObj getting set correctly?

[zsarnett]

Did you define a computed _stateObj property? Is _computeStateObj() getting called and _stateObj getting set correctly?

  static get properties() {
    return {
      hass: {
        type: Object
      },
      _config: Object,
      _stateObj: {
        type: Object,
        computed: '_computeStateObj(hass.states, _config.entity)',
        observer: '_stateObjChanged'
      },
    };
  }

The _computeStateObj is getting called and _stateObj assisgned Correctly

[zsarnett]

Disregard previous comments as it now functions properly. May have been a caching issue.

[balloob]

Demo page looks slick!

[balloob]

We should reset the className

[balloob]

btw it's kinda a hack to have a _computeFunction have side effects, should actually be done in _stateChanged, however it's good enough for initial merge.

[balloob]

we should add cursor: pointer because the card is interactive.

[balloob]

Please open a PR to add the docs to the website.