fix: card height in grid

[akloeckner]

This is my take on the sections/grid issue. :-)

This changes the card height to occupy the assigned height in grid/sections view. The Graph will be stretched to fill this space! That means, its aspect ration will change. Change the height option to make it look better. See this example:

I consider this better than simply fixing the card height, because the card remains with lots of empty space in this case. If we fill the space, the default look will be nicer. Here's how it looks, if only the card height is fixed:

Here's how it is done technically:

• :host.height = 100%
  => fixes height of entire card to fill space, if there is a defined space
• graph.flex = auto
  => assigns remaining space in card to the graph itself
• graph_container.height = 100%
  => makes the container fill the entire space
• graph__container__svg:
  .position=relative
  .width=100%
  .height=100%
  => makes the container use the entire space. Not only in flex width.
• The relative positioning changes the z-order of the graph and the labels. So, this is fixed in the main source code.
• The SVG also is freed aspect-ratio-wise, otherwise it could not fill the entire space.

[ildar170975]

Check these examples:

1st card - default
2nd - added height: 100% for :host
3rd - my PR

type: horizontal-stack
title: stack
cards:
  - type: custom:mini-graph-card
    name: default
    entities:
      - entity: sensor.xiaomi_cg_1_co2
  - type: custom:mini-graph-card
    name: height:100% for :host
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    card_mod:
      style: |
        :host {
          height: 100%;
        }
  - type: custom:mini-graph-card
    name: my PR
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    card_mod:
      style: |
        :host {
          display: unset !important;
          flex-direction: unset !important;
        }
        ha-card {
          height: 100%;
        }
  - type: calendar
    entities:
      - calendar.calendar_1

type: grid
columns: 4
cards:
  - type: custom:mini-graph-card
    name: default
    entities:
      - entity: sensor.xiaomi_cg_1_co2
  - type: custom:mini-graph-card
    name: height:100% for :host
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    card_mod:
      style: |
        :host {
          height: 100%;
        }
  - type: custom:mini-graph-card
    name: my PR
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    card_mod:
      style: |
        :host {
          display: unset !important;
          flex-direction: unset !important;
        }
        ha-card {
          height: 100%;
        }
  - type: calendar
    entities:
      - calendar.calendar_1
title: grid

[akloeckner]

Yes, the 100% on host were not enough. But maybe the first 100% needs to go where you put it in your PR... I'll check this. This is what a horizontal stack looks like with a scaled graph:

[ildar170975]

Looks nice imho. Better than a tiny one. I will continue a review soon.
Also, we should check how a height option affects...

[ildar170975]

FYI: by default any card inside horiz stack gets display: block; inside grid - display: inline (automatically) - unless it is changed by a card's creator.

[akloeckner]

The height option sets the graph height in masonry. But if the height is already fixed by the view (grid, sections, horizontal stack), then the height option only affects the squishing of the stroke.

Wherever we continue with this, we should have selvalt in the loop. They had some idea to counter the squishing and started the discussion on this feature. I am afraid, I diluted the discussion a bit now...

[ildar170975]

this does not make our life much easier

The thing is that we should not change display like it was done long time ago (that time grid card was not invented yet).
To keep a proper behaviour - we need to use default values (i.e. not overwrite them).

[ildar170975]

What I see is

because of preserveAspectRatio='none'.
SVG is elongated.
We need to think more...

[ildar170975]

We probably need to set this "0 0 500 100" thing dynamically dependently on an available height:

[ildar170975]

Note that if the height option is set (to 1000 for example) - it is accounted in that SVG size:

Means - we may LEAVE to a user to define how the card will look if stretched))))
Anyway, assume we found a way to stretch a graph properly. Then a user comes and asks "WTH 'height' option is not accounted?"
The funniest part: seems that in this case your PR will be same as my PR ))) and it will be 3rd concurrent PR with same code for "height")

[akloeckner]

(Tagging @selvalt7 to have them in this discussion on the desired looks of the stretched card in grid/sections view.)

because of preserveAspectRatio='none'.
SVG is elongated.

Yes. It can be fixed for the lines, as selvalt pointed out. Points are more difficult. But there is a suggestion in #1139, at which I couldn't look closer yet.

We probably need to set this "0 0 500 100" thing dynamically

That is what selvalt proposed. But it recalculates the entire graph each time the window is resized. (Basically, because the number of rows is only available after the Graph is initialized.) I think it will be more natural and efficient to leave such resizing to CSS.

we may LEAVE to a user to define how the card will look if stretched

That might make sense, actually... It would also make the change much easier. It will just not look pretty by default. :-/

WTH 'height' option is not accounted?

It is not accounted correctly currently either: the width is set to 500 and the height to whatever is in the option. Then, the graph is scaled (preserving aspect ratio) to fit the card's width. This changes the height. By the way, this also changes line widths, which can be set in the options, but are thus not respected correctly either. So, these dimensions are a sensible first guess, in the best case. And completely useless in the worst case. :-P Based on this observation, I would even consider to remove this option... Then again, there would be no way to set a height in default masonry view.

seems that in this case your PR will be same as my PR ))

I have no problem to close mine. I just wanted to create something focused and testable to discuss the stretched approach.

In summary, I think, we should

• for default masonry view
  • at least have a way to set height in default view, so the option must stay.
  • But maybe we should treat the height option differently: use it as actual height and only scale the graph in width.
  • This would require some de-squishing of the graph anyway. Which would, as a side-effect, ideally make the line width match what is set by the user.
• For sections view,
  • we should disregard the height option and use available space. Because we have another height option (the number of rows) to respect, there is no need to respect contradicting options.
  • Alternatively, if this de-squishing becomes too hard, we should leave the height of the graph in section view up to the user and accept an initial ugly space in the card...
  • We should decide on the way to handle height in sections before we introduce the support for them. Otherwise people will start using it and the later fix becomes actually a breaking change...

So, I think, the questions are:

1. Do we prefer to scale graphs in section view? From a simplicity perspective, I would say: yes. And I take @ildar170975's comment and @selvalt7's PR as a yes, too.
2. Do we succeed to make that happen? If we cannot, we have to fall back to the manual height setting.

I will thus have a look at the de-squishing of points @selvalt7 proposed and see how far I get with question no. 2.

But, please, let me know, if you think differently on the preferred way of sizing the card! That could save me some work. ;-)