[Feature]: bar position

[NfxGT]

Requirements

• I checked the README.
• I have updated entity-progress-card to the latest available version.
• I did a search to see if there is a similar issue.

Is your feature request related to a problem?

no

Describe the solution you'd like

Thank for the new card.

I started swapping my old bar-cards for yours. But in order to have the same aesthetic, I would need to be able to orient the bars vertically.

Describe alternatives you've considered

No response

Additional context

No response

[WarC0zes]

Hi,
an example I made with entity-progress-card.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:compass-card
        indicator_sensors:
          - sensor: sensor.blitzortung_lightning_azimuth
            indicator:
              type: arrow_outward
              color: orange
              show: false
              dynamic_style:
                sensor: sensor.blitzortung_lightning_distance
                bands:
                  - from_value: 1
                    show: true
        value_sensors:
          - sensor: sensor.blitzortung_lightning_distance
          - sensor: sensor.blitzortung_lightning_counter
        header:
          title:
            value: Éclair
            color: "#44739e"
          icon:
            color: green
            dynamic_style:
              sensor: sensor.blitzortung_lightning_counter
              bands:
                - from_value: 30
                  color: yellow
                - from_value: 100
                  color: orange
                - from_value: 200
                  color: red
                - from_value: 400
                  color: purple
        compass:
          circle:
            background_image: \local\images\maison2.png
            background_opacity: 0.6
          north:
            show: true
          east:
            show: true
          west:
            show: true
          south:
            show: true
        language: fr
        card_mod:
          style: |
            .sensor-1 {
              line-height: 18px;
            }    
            .sensor-1 .value {
              font-size: 18px !important; 
            }
            .sensor-0 .value {
              {% if is_state('sensor.blitzortung_lightning_distance', 'unknown') %}
                display: none;
              {% else %}
                font-size: 26px !important;
              {% endif %}
            }
            ha-card > div.content > div.indicator-sensors > div > span.abbr {
              font-size: 18px;
              font-weight: bold;
            }       
      - type: vertical-stack
        cards:
          - type: custom:entity-progress-card
            entity: sensor.blitzortung_lightning_counter
            name: Compteur d'éclair
            max_value: 2000
            height: 90px
            force_circular_background: true
            decimal: 0
            bar_size: xlarge
            bar_effect: radius
            custom_theme:
              - min: 0
                max: 50
                color: green
                icon: fas:bolt-lightning
              - min: 50
                max: 100
                color: yellow
                icon: fas:bolt-lightning
              - min: 100
                max: 250
                color: orange
                icon: fas:bolt-lightning
              - min: 250
                max: 500
                color: red
                icon: fas:bolt-lightning
              - min: 500
                max: 5000
                color: purple
                icon: fas:bolt-lightning
            card_mod:
              style: |
                ha-card {
                  margin-top: 16px;
                }
          - type: custom:entity-progress-card
            entity: sensor.compteur_eclair_mensuel
            name: Compteur d'éclair Mois
            max_value: 2000
            height: 90px
            force_circular_background: true
            decimal: 0
            bar_size: xlarge
            bar_effect: radius
            custom_theme:
              - min: 0
                max: 50
                color: green
                icon: fas:bolt-lightning
              - min: 50
                max: 100
                color: yellow
                icon: fas:bolt-lightning
              - min: 100
                max: 250
                color: orange
                icon: fas:bolt-lightning
              - min: 250
                max: 500
                color: red
                icon: fas:bolt-lightning
              - min: 500
                max: 5000
                color: purple
                icon: fas:bolt-lightning

[francois-le-ko4la]

To be honest I prefer horizontal orient ^^
@WarC0zes, your example is perfect.
@NfxGT: dont worry the vertical progress is coming (1.5) ^^

[francois-le-ko4la]

Hello,

I manage this issue #73 in my dev env.
I’m not saying your request is a duplicate, but it can be managed using the same parameter to keep things simple.

bar_position: overlay #vertical mode

[francois-le-ko4la]

Hello @NfxGT,

1.5.0 has been released.
Unfortunately, not enough bandwith to cover everything. I included a "beta" version :

• layout: vertical
• bar_position: overlay
• bar_orientation: up

zero_center, watermark, bar effect are not ok now. Everything will be fully ok in 1.5.1.

Feel free to test and provide feedback on the look&feel.

TY.