Fix mini-graph card sizes?

Mariusthvdb · June 20, 2019, 9:16am

Hi
@tom_l
since I didn’t want to hijack your thread What does your deafult page look like? any longer, please let me ask in a separate topic here:

How do you prevent the cards from resizing depending on the content? Would that be a setting in the monograph configs, the card modder, or maybe even in the entity configs?
I have 2 that are out of the rest, which I copied from your setup:

The pressure card is too long, probably because the UoM doesn’t fit, and the Winddirection is too short, think it is also the case in your setup.

How could I change that?
for others, this is the code:

  - type: 'custom:vertical-stack-in-card'
    title: Weer
    cards:

      - type: horizontal-stack
        cards:

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.br_temperature
              color_thresholds:
                - color: '#039BE5'
                  value: -10
                - color: '#0da035'
                  value: 0
                - color: '#e0b400'
                  value: 20
                - color: '#e45e65'
                  value: 30
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.dark_sky_apparent_temperature
              color_thresholds:
                - color: '#039BE5'
                  value: -10
                - color: '#0da035'
                  value: 0
                - color: '#e0b400'
                  value: 20
                - color: '#e45e65'
                  value: 30
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.dark_sky_dew_point
              color_thresholds:
                - color: '#039BE5'
                  value: -10
                - color: '#0da035'
                  value: 0
                - color: '#e0b400'
                  value: 10
                - color: '#e45e65'
                  value: 20
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

      - type: horizontal-stack
        cards:

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.br_humidity
              color_thresholds:
                - color: '#039BE5'
                  value: 20
                - color: '#0da035'
                  value: 50
                - color: '#e0b400'
                  value: 65
                - color: '#e45e65'
                  value: 80
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.br_pressure
              color_thresholds:
                - color: '#039BE5'
                  value: 0
                - color: '#0da035'
                  value: 1000
                - color: '#e0b400'
                  value: 1020
                - color: '#e45e65'
                  value: 1030
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.br_precipitation
              color_thresholds:
                - color: '#039BE5'
                  value: -50
                - color: '#0da035'
                  value: 2
                - color: '#e0b400'
                  value: 4
                - color: '#e45e65'
                  value: 8
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

      - type: horizontal-stack
        cards:

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.br_wind_speed
              color_thresholds:
                - color: '#039BE5'
                  value: 0
                - color: '#0da035'
                  value: 10
                - color: '#e0b400'
                  value: 20
                - color: '#e45e65'
                  value: 30
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: 'custom:mini-graph-card'
              entities:
                - sensor.br_wind_gust
              color_thresholds:
                - color: '#039BE5'
                  value: 0
                - color: '#0da035'
                  value: 10
                - color: '#e0b400'
                  value: 20
                - color: '#e45e65'
                  value: 30
              color_thresholds_transition: hard
              group: false
              hour24: true
              line_width: 3
              points_per_hour: 12
              show:
                icon: true
                labels: false
                name: true
                state: true

          - type: 'custom:card-modder'
            style:
              border: solid 2px var(--primary-color)
              border-radius: 6px
              transform: scale(0.925)
            card:
              type: glance
              entities:
                - entity: sensor.br_wind_direction
              columns: 1
              show_name: true
              show_state: true

thanks for having a look

tom_l · June 20, 2019, 9:26am

I dont. e.g.

You can specify a height for the mini graph card but that won’t scale well to mobile displays.

Mariusthvdb · June 20, 2019, 9:46am

O I see, hadn’t checked my mobile devices yet, thanks, good tip…

fwiw, I have tried setting the font-size (which is a % of the original size, which ever that may be btw), but that doesn’t really help:

size 94:

size 93, which is just too small all of a sudden:

I think I am looking for a way to adjust the size of the state and the UoM individually…or maybe set the padding, which seems rather wide. I’ll ask dev @kalkih about it. Would be a nice addition if not yet possible.

tom_l · June 20, 2019, 9:51am

You could hide the units.

Mariusthvdb · June 20, 2019, 10:02am

Really? Been looking for that option but it isn’t listed: https://github.com/kalkih/mini-graph-card/blob/master/README.md#available-show-options

did find the unit: option to override the default, and changing that to a 1 character Unit helps:

makes the wish for a wider, and thus smaller padding all the more relevant

tom_l · June 20, 2019, 10:09am

Hmm. You’re right you can’t hide the units. For some reason I thought you could.

petro · June 20, 2019, 11:55am

Have you guys tried using card modder to adjust the height?

Mariusthvdb · June 20, 2019, 12:13pm

not yet, I am not yet familiar with all possibilities of that card. Would love to also set the padding, and font-size of the State and Unit. Can that be done with the card-modder also?

petro · June 20, 2019, 12:31pm

maybe, it depends on the card. Some cards allow overriding for styles some don’t

kalkih · June 20, 2019, 6:33pm

If you put each row of graphs in a horizontal-stack the cards will automatically adjust to fill the whole stack height.

See https://github.com/kalkih/mini-graph-card/issues/105

font-size of state and unit can be adjusted with the font_size option. Default state font-size is 2.4em, 1em equals 14px I think, so should be around 33px.

If you want to set custom paddings, use the option group: true and set the paddings through card-modder, should work afaik.

If you want to hide the unit you can use unit: ' '

Mariusthvdb · June 20, 2019, 7:04pm

thanks @kalkih,

I’ll give all this a try and report back if needed. If not needed, many more thanks!

tom_l · June 20, 2019, 10:57pm

Not if the unit word wraps due to lack of width. This is a horizontal stack:

cards:
  - cards:
      - card:
          color_thresholds:
            - color: '#e45e65'
              value: 0
            - color: '#e0b400'
              value: 60
            - color: '#0da035'
              value: 80
          color_thresholds_transition: hard
          entities:
            - sensor.speedtest_download
          group: false
          hour24: true
          line_width: 3
          lower_bound: 0
          name: Down
          points_per_hour: 4
          show:
            extrema: true
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.925)
        type: 'custom:card-modder'
      - card:
          color_thresholds:
            - color: '#e45e65'
              value: 0
            - color: '#e0b400'
              value: 24
            - color: '#0da035'
              value: 32
          color_thresholds_transition: hard
          entities:
            - sensor.speedtest_upload
          group: false
          hour24: true
          line_width: 3
          lower_bound: 0
          name: Up
          points_per_hour: 4
          show:
            extrema: true
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.925)
        type: 'custom:card-modder'
      - card:
          color_thresholds:
            - color: '#e45e65'
              value: 40
            - color: '#e0b400'
              value: 30
            - color: '#0da035'
              value: 0
          color_thresholds_transition: hard
          entities:
            - sensor.ping
          group: false
          hour24: true
          line_width: 3
          lower_bound: 0
          name: Ping
          points_per_hour: 12
          show:
            extrema: true
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.925)
        type: 'custom:card-modder'
    type: horizontal-stack
  - card: null
    entities:
      - entity: script.speedtest_update
    show_header_toggle: false
    type: entities
title: Speedtest
type: 'custom:vertical-stack-in-card'

Ha. I wonder how long my ping icon has been a thermometer (unrelated to issue at hand).

kalkih · June 20, 2019, 11:57pm

Yes it does.

It’s most likely because you’re using card-modder, card modder basically wraps the card inside another element and that element doesn’t have the same auto height behaviour as mini-graph-card.

tom_l · June 21, 2019, 12:02am

Oh damn. I don’t suppose you would consider including border and scaling attributes for the mini-graph card?

kalkih · June 21, 2019, 12:12am

Nah, don’t think so, sorry, but if you know the height of the tallest card, you should be able to simply hard code the height of the cards with card-modder. This might not work well if height changes or you have a responsive setup, you could add a buffer to the height but that would result in extra white space and might look weird.

Or if you can apply styles to the card-modder element, you could apply the auto height css styles as I have them in mini-graph-card, not sure if this is possible though, doesn’t seem like it?

tom_l · June 21, 2019, 12:15am

I tried setting fixed heights but it messes up the display even worse when viewing on a mobile device.

Worth a try. Thanks.

Mariusthvdb · June 22, 2019, 12:35pm

on the Buttons card the hardcoding is available in the button cards itself (height, width in px), but most of all, aspect_ratio: can be used, creating responsive stacks on all devices beautifully .

It would reply be cool to have that functionality built in the graph card as well, especially because, as you suggested yourself, we need to use card modder to set the paddings, and because of using card-modder, the behavior of the auto-height gets changed…

hope you would consider having a look what that could mean for mini-graph-card

petro · June 23, 2019, 3:57pm

That functionality is built in though. The height is all the same size if they are all mini-graph cards. It’s when you add card-modder when it screws up. And if you didn’t know, button card has this flaw too. So using that card as an example won’t get you anywhere.

MIIB1 · March 30, 2021, 11:42pm

Hi

I want ask how make this card i try the code but not working, can you help ?

RobertoCravallo · February 17, 2024, 4:18pm

Really like this design, have you adjusted it for card_mod (can’t figure it out!) and are again willing to share?

Regards from Germany,

Robert