Lovelace: Bar Card

[Ildar_Gabdullin]

Some tricks with the card - displaying TWO text lines:

This is implemented by the decl_bar_additional_info decluttering card with the aid of card-mod.
How to use:

      - type: custom:decluttering-card
        template: decl_bar_additional_info
        variables:
          - SENSOR_USAGE: sensor.iiyama_ohm_ssd_corsair_load_used_space
          - VALUE_TEXT_1: 968 GB
          - VALUE_TEXT_2: Samsung HD204UI

decl_bar_additional_info:
  default:
    - VALUE_TEXT_2: ''
  card:
    type: custom:mod-card
    card:
      type: custom:decluttering-card
      template: decl_bar_usage
      variables:
        - SENSOR_USAGE: '[[SENSOR_USAGE]]'
        - VALUE_NAME: '[[VALUE_TEXT_1]]'
    card_mod:
      style:
        decluttering-card $ bar-card $: |
          bar-card-name {
            line-height: 1.1rem;
          }
          bar-card-name::after {
            content: "{% set CONTENT = '\A ' + '[[VALUE_TEXT_2]]' -%}
                      {{ CONTENT }}";
            white-space: pre;
            font-size: 0.8rem;
          }

Internally using the decl_bar_usage template:

decl_bar_usage:
  default: &ref_default
    - VALUE_NAME: ''
    - VALUE_SHOW_NAME: inside
    - VALUE_SHOW_STATE: inside
    - VALUE_COLOR_1: green
    - VALUE_COLOR_2: orange
    - VALUE_COLOR_3: red
    - VALUE_LIMIT_1: 33
    - VALUE_LIMIT_1_1: 34
    - VALUE_LIMIT_2: 66
    - VALUE_LIMIT_2_1: 67
  card:
    type: custom:bar-card
    entity: '[[SENSOR_USAGE]]'
    name: '[[VALUE_NAME]]'
    icon: ''
    unit_of_measurement: ''
    direction: right
    entity_row: true
    height: 40px
    width: 100%
    color: ''
    complementary: false
    decimal: 0
    target: 0
    limit_value: false
    min: '0'
    max: '100'
    severity:
      - color: '[[VALUE_COLOR_1]]'
        from: 0
        to: '[[VALUE_LIMIT_1]]'
        icon: ''
        hide: false
      - color: '[[VALUE_COLOR_2]]'
        from: '[[VALUE_LIMIT_1_1]]'
        to: '[[VALUE_LIMIT_2]]'
        icon: ''
        hide: false
      - color: '[[VALUE_COLOR_3]]'
        from: '[[VALUE_LIMIT_2_1]]'
        to: 100
        icon: ''
        hide: false
    positions:
      icon: 'off'
      indicator: 'off'
      name: '[[VALUE_SHOW_NAME]]'
      minmax: 'off'
      value: '[[VALUE_SHOW_STATE]]'
    animation:
      state: 'off'
      speed: 3

Surely the same technics may be used to display last-changed for the sensor:

decl_bar_additional_info__last_changed:
  card:
    type: custom:mod-card
    card:
      type: custom:decluttering-card
      template: decl_bar_usage
      variables:
        - SENSOR_USAGE: '[[SENSOR_USAGE]]'
        - VALUE_NAME: '[[VALUE_TEXT_1]]'
    card_mod:
      style:
        decluttering-card $ bar-card $: |
          bar-card-name {
            line-height: 1.1rem;
          }
          bar-card-name::after {
            content: "{% set SENSOR_NAME = '[[SENSOR_USAGE]]' -%}
                      {%- if not states(SENSOR_NAME) in ['unavailable','unknown'] -%}
                        {%- set DOMAIN = SENSOR_NAME.split('.')[0] -%}
                        {%- set SENSOR_NAME = SENSOR_NAME.split('.')[1] -%}
                        {%- set LAST_CHANGED = states[DOMAIN][SENSOR_NAME].last_changed -%}
                        {%- set LAST_CHANGED_FORMATTED = relative_time(LAST_CHANGED) -%}
                        {%- set LAST_CHANGED_FORMATTED = '\A '+LAST_CHANGED_FORMATTED+' ago' -%}
                      {%- else -%}
                        {%- set LAST_CHANGED_FORMATTED = '' -%}
                      {%- endif -%}
                      {{ LAST_CHANGED_FORMATTED }}";
            white-space: pre;
            font-size: 0.8rem;
          }

Update 26.05.22: changed a code for decl_bar_usage - removed mod-card.