3.0.0

This update completely overhauls the layout and CSS code to more closely match the default lovelace interface.

While these changes are somewhat of a departure from the old default layout of the card, they should give a better out of the box experience to Home Assistant users.

Fortunately it's still possible to achieve many of the old layouts because of the way the card now uses the Flexbox CSS layout. This does take some more CSS coding, but at the same time should allow for more flexiblity.

Updates

• Added positions config option.

entities:
  - entity: sensor.example
    positions:
      icon: outside
      indicator: outside
      title: outside
      value: outside
      minmax: outside
    width: 60%
  - entity: sensor.example
    positions:
      icon: inside
      indicator: inside
      title: inside
      value: inside
      minmax: inside
type: 'custom:bar-card'
title: Positions

• Added stack config option.

entities:
  - sensor.example
  - sensor.example
title: Stack
stack: horizontal
type: 'custom:bar-card'

• Added entity_row config option. This disables the background card for use inside and entity card.

entities:
  - sensor.example
  - entity: sensor.example
    positions:
      minmax: inside
    entity_row: true
    target: 50
    type: 'custom:bar-card'
  - entity: light.group_bedroom
    name: Example
title: Entity Row
type: entities

entity: sensor.example
title: Default
type: 'custom:bar-card'
entity_row: true

• Added name config option.

entity: sensor.example
title: Name
type: 'custom:bar-card'
name: Bar Card

Breaking Changes

• severity object now uses from and to to define the value range.

entity: sensor.example
title: Severity
type: 'custom:bar-card'
severity:
  - color: Red
    from: 0
    to: 25
  - color: Orange
    from: 26
    to: 50
  - color: Green
    from: 51
    to: 100

• animation config option converted to object.

• title config option now adds a header to the card instead of defining the bar title.

• Removed align config option.

This has been removed in favor of card-mod. Using the new flexbox layout most of the old align options can be recreated using CSS.

• Removed columns config option.
• Removed icon_position config option.

Has been added to positions config option.

• Removed saturation config option.

No longer used since colors are now defined directly.

• Removed show_minmax config option.

Has been added to positions config option.

• Removed show_value config option.

Has been added to positions config option.

• Removed attribute config option.

This has been removed in favor of using a template sensor.

• Removed charge_entity config option.
• Removed delay config option.

Has been added to animation config option.

• Removed speed config option.

Has been added to animation config option.

• Sensors can no longer be used as values for min, max and target config options.

This has been removed in favor of config-template-card.

3.0.0b0

Release Notes (WIP)

This update completely overhauls the layout and CSS code to more closely match the default lovelace interface layout and now works best as an entity card row.

While these changes are somewhat of a departure from the old default layout of the card, they should give a better out of the box experience to Home Assistant users.

Fortunately it's still possible to achieve many of the old layouts because of the way the card now uses Flexbox layout. This does take some more CSS coding, but at the same time should allow for more flexiblity.

Updates

• Added positions config option.
• Added stack config option.

Fixes

Breaking Changes

• Removed align config option.
• Removed icon_position config option.
• Removed saturation config option.
• Removed show_minmax config option.
• Removed show_value config option.

2.0.2

Fixes

• Fixed CSS style assignment. Now defined by element type instead of id.

Example using card-mod.

type: 'custom:bar-card'
entity: sensor.debug
style: |-
  bar-card-bar {
    border-radius: 3px;
  }

2.0.1

Updates

• Added custom border-radius theme variable bar-card-border-radius.

2.0.0

This update unifies some of the card style to work better with the default lovelace layout.

Updates

• Converted to TypeScript.
• Code cleanup.
• Updated undefined entity warning to ha-warning element.

Fixes

• Added deepcopy function.
• Moved individual cards into a single ha-card element.
• Removed default card padding.
• Set default border-radius to use theme variable.

Breaking Changes

• severity array no longer requires definition of first color.

The severity array was always a bit confusing since you had to define the start color with a value that didn't do anything. It will now fall back to the color config value whenever it is above the highest value.
The order of your array entries now also does not matter anymore as they are automatically sorted by value.

color: Green
severity:
  - value: 50
    color: Yellow
  - value: 25
    color: Red

• Removed *_style config options.

Styles config options have been removed in favor of card-mod, which allows restyling of many more elements than this card should support.

style: |
  bar-card-value {
    font-size: 20px;
    color: Red;
  }

• Removed padding config option.
• Removed rounding config option.

1.7.1

Fixes

• Fixed card config injecting entries into the lovelace config.

1.7.0

Updates

• Severity object now accepts text as well as numerical values.

1.6.2

Fixes

• Added removal of lastChild when it is empty.

1.6.1

Fixes

• Correctly sets entityState to decimal when using decimal config option.

1.6.0

Updates

• Added icon option to the severity config option. Allows different icons on each severity section.