Lovelace: Bar Card

mooselinf · June 26, 2022, 4:50pm

Hi all.

I’m trying to get something working. I have 6 entities for different elements of my PV array. I’m using bar cards but I want to get the bottom three bar cards to butt up against each other. I have changed the size of the bar but they just stay in the same place.

I’ve played with card-mod but cannot figure it out. I’m sure that this is a really simple thing as I’ve seen examples in some of the comments in this thread.

Any ideas? I would post code but I don’t have much in place, yet.

Cheers

Ildar_Gabdullin · July 21, 2022, 10:24pm

Using bar-card as a chart

Suppose there is a sensor with attributes representing some forecast or historical data.
Here is a bar chart for these data:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_bar_graph_1
      - input_number.test_bar_graph_2
      - input_number.test_bar_graph_3
      - input_number.test_bar_graph_4
      - input_number.test_bar_graph_5
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      direction: up
      columns: 5
      height: 100px
      width: 100%
      positions:
        icon: off
        name: outside
        indicator: off
      card_mod:
        style: |
          bar-card-backgroundbar {
            background-color: transparent;
          }
    filter:
      template: |-
        {% set SENSOR = 'sensor.test_bar_graph' -%}
        {%- for attr in states[SENSOR].attributes -%}
          {%- set ATTR_VALUE = states[SENSOR].attributes[attr] -%}
          {%- if is_number(ATTR_VALUE) -%}
          {{
            {
              'entity': SENSOR,
              'attribute': attr,
              'name': attr
            }
          }},
          {%- endif -%}
        {%- endfor %}

input_number:
  test_bar_graph_1: &ref_test_bar_graph
    min: 0
    max: 100
    step: 1
    mode: slider
  test_bar_graph_2: *ref_test_bar_graph
  test_bar_graph_3: *ref_test_bar_graph
  test_bar_graph_4: *ref_test_bar_graph
  test_bar_graph_5: *ref_test_bar_graph

#############################################################################

template:
  - sensor:
      - name: test_bar_graph
        state: xyz
        attributes:
          attr_1: >-
            {{states("input_number.test_bar_graph_1")}}
          attr_2: >-
            {{states("input_number.test_bar_graph_2")}}
          attr_3: >-
            {{states("input_number.test_bar_graph_3")}}
          attr_4: >-
            {{states("input_number.test_bar_graph_4")}}
          attr_5: >-
            {{states("input_number.test_bar_graph_5")}}

Silvrav · August 18, 2022, 11:26pm

Hi All

got a bit of a funny one - i cant seem to make this card not transparent.

and code:

title: Windows Server 2016
type: custom:bar-card
columns: 2
entity_row: true
entities:
  - entity: sensor.win_atalrhao5tb_cpu_usage
    name: CPU
    icon: mdi:cpu-64-bit
    height: 30px
  - entity: sensor.win_atalrhao5tb_memory_usage
    name: RAM
    icon: mdi:brain
    height: 30px
  - entity: sensor.win_atalrhao5tb_storage_c_usage
    name: Drive C
    icon: mdi:harddisk
    height: 30px
  - entity: sensor.win_atalrhao5tb_storage_d_usage
    name: Drive D
    icon: mdi:harddisk
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_1
    name: Core 1
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_2
    name: Core 2
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_3
    name: Core 3
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_4
    name: Core 4
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_5
    name: Core 5
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_6
    name: Core 6
    icon: mdi:temperature-celsius
    height: 30px
severity:
  - to: '60'
    color: rgb(26,204,147,0.33)
    from: '0'
  - from: '61'
    to: '80'
    color: rgb(255,140,0,0.60)
  - from: '81'
    to: '100'
    color: rgb(163,0,0,0.60)
positions:
  indicator: 'off'
  style: |-
    bar-card-title {
      text-shadow: 1px 1px 5px black;
     }

Gluwc · August 19, 2022, 7:41am

Try removing entity_row.

Silvrav · August 19, 2022, 7:58am

That did it! thank you

finipini · August 19, 2022, 2:12pm

Hello.

I was wondering if it there,s a way to use a template or an entity attribute in the target option?

My use would be this simple: I have an sensor from bodymiscale component that the state is my weight and the attribute is my ideal weight. I use the state for a horizontal bar and i want to use the attribute ideal weight for the target.

update: i read older posts and used the custom:config-template-card ( great help for use templates in the dashboard) to achieve this.

vinny74man · August 28, 2022, 5:41pm

Hi everyone would it be possible to install the component without HACS?
Thank you

PS sorry this is an online translation

duittenb · September 9, 2022, 12:01pm

For some reason, the previous code doesn’t seem to work anymore (since a month or 2?)

type: custom:bar-card
entities:
  - entity: sensor.temp_a
    name: Garage
  - entity: sensor.temp_b
    name: Outside
  - entity: sensor.temp_c
    name: Living
direction: up
height: 200px
stack: horizontal
card_mod:
  style: |
    bar-card-row bar-card-card:nth-of-type(2) {
      --bar-card-color:
        {% if states('sensor.temp_a') | float < states('sensor.temp_b') | float %}
          #03a9f4;
        {% else %}
          red;
        {% endif %}
    }

It feels like something in the structure or CSS has changed causing the bar-card-color not to be applied.
Any idea how I can (now) change the color of a bar, based on entity states (value)?

The test below doesn’t work but could be a great feature?

  - entity: sensor.temp_a
    name: Living
    severity:
      - color: red
        from: {% state('sensor.temp_b') | float %} 
        to: 99

(result: if the temperature of temp_a if higher than temp_b, the bar would turn red)

Ildar_Gabdullin · September 9, 2022, 12:56pm

It was NEVER supposed to work since you got a wrong path.
Compare with my original example.

duittenb · September 9, 2022, 3:43pm

Hello @Ildar_Gabdullin ,

It was NEVER supposed to work since you got a wrong path.

This worked fine for quite a while.
What do you mean by wrong path?
Keep in mind that I’m using vertical bars, not horizontal. In the CSS it looks like this:

Horizontal bars:
_bar-card-ROW
___bar-card-card
_bar-card-ROW
___bar-card-card
Multiple rows, each with 1 card:

bar-card-row:nth-of-type(1) {

Vertical bars:
_bar-card-ROW
___bar-card-card
___bar-card-card
___bar-card-card
1 row, multiple cards:

bar-card-row bar-card-card:nth-of-type(1) {

Unfortunately, right now it looks like I can’t get any CSS change to work

Ildar_Gabdullin · September 9, 2022, 3:50pm

You are absolutely right!
That was a hasty conclusion from my side.
A bit later will check what could be wrong in your code.

Ildar_Gabdullin · September 9, 2022, 4:06pm

This color in my default dark theme looks same as a standard bar color.
Replaced it by another color for test.

Seems to work, check this:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
      - input_number.test_level_1
  - type: custom:bar-card
    <<: &ref_settings
      entities:
        - entity: input_number.test_level_1
          name: Garage
        - entity: input_number.test_level_1
          name: Outside
      direction: up
      height: 200px
      stack: horizontal
    card_mod:
      style: |
        bar-card-row bar-card-card:nth-of-type(1) {
          --bar-card-color: green;
        }
        bar-card-row bar-card-card:nth-of-type(2) {
          --bar-card-color: red;
        }
  - type: custom:bar-card
    <<: *ref_settings
    card_mod:
      style: |
        bar-card-row bar-card-card:nth-of-type(2) {
          --bar-card-color:
            {%- if is_state('input_boolean.test_boolean','on') -%}
            #ffff00;
            {%- else -%}
            red;
            {%- endif %}
        }
  - type: custom:bar-card
    <<: *ref_settings
    card_mod:
      style: |
        bar-card-row {
          --bar-card-color: #ffff00;
        }

stevo92 · September 12, 2022, 11:48am

Hi mate.

One of my battery sensors reports back as low middle and high, how can I colour severity this please if possible ?

Thanks

duittenb · September 12, 2022, 7:00pm

Thank you @Ildar_Gabdullin for your sample code. It works perfectly.

GUESS WHAT…

IF, in my sample code, sensor.temp_a in the IF statement does not exist,
the entire card-mod style section is skipped.
All tests would fail as long as this if statement contained an invalid entity

Learned a lot and it’s working!

Ildar_Gabdullin · September 13, 2022, 11:42pm

Then you probably should add some more checks like "if states.sensor.my_non_existing_sensor is defined"

itsboo · September 19, 2022, 1:22am

looks classy …can you share your ui code?

stigvi · November 6, 2022, 1:43pm

This card seems to be unmaintained for a long time now. Does anyone know of any alternatives?

Ghafla · November 18, 2022, 11:07am

How can I fit the bar-card in a custom:button-card?

I try to incorporate some bars into the button template but they get styled very off:
(first bar is within the button-card, second bar is within an entities card)
BarCard-in-ButtonCard

The code of the bar-card within the button-card:

...
  custom_fields:
    cub:
      card:
        type: custom:bar-card
        entity: '[[[ return variables.cpu_use ]]]'
        name: CPU
        unit_of_measurement: ' %'
        decimal: 0
        entity_row: true
        height: 25px
        positions:
          name: inside
          value: inside
          indicator: 'off'
          icon: inside
        severity:
        - color: rgb(26,204,147,0.33)
          from: 0
          to: 30
          icon: mdi:speedometer-slow
        - color: rgb(206,133,0,0.60)
          from: 31
          to: 75
          icon: mdi:speedometer-medium
        - color: rgb(163,0,0,0.60)
          from: 76
          to: 100
          icon: mdi:speedometer

and the code of the bar-card within the entities card:

- type: entities
      entities:
      - type: custom:bar-card # CPU Load
        entity: sensor.processor_use
        name: CPU #'<ha-icon icon="mdi:home-assistant"></ha-icon>' won't work
        unit_of_measurement: ' %'
        decimal: 0
        entity_row: true
        height: 25px
        positions:
          name: inside
          value: inside
          indicator: 'off'
          icon: inside
        severity:
        - color: rgb(26,204,147,0.33)
          from: 0
          to: 30
          icon: mdi:speedometer-slow
        - color: rgb(206,133,0,0.60)
          from: 31
          to: 75
          icon: mdi:speedometer-medium
        - color: rgb(163,0,0,0.60)
          from: 76
          to: 100
          icon: mdi:speedometer
      card_mod:
        style: |
          .card-content { padding: 0px; }

What’s wrong?

QbaF · November 20, 2022, 12:03pm

Does it?
For me only target does work.
max gives NaN

keorangar · November 22, 2022, 3:47pm

I have a counter that I’m trying to use with Bar Card. However, I’m unable to have the entity name outside of the bar. Also reducing the width of the bar doesn’t have any affect either. Is this because the entity is a Counter?

position:
name: outside
width: 50%