search

kalkih / mini-graph-card

Minimalistic graph card for Home Assistant Lovelace UI
MIT License
3.06k stars 237 forks source link

Labels are truncated when graph height is under 100 #1151

Open Nickduino opened 1 month ago

Nickduino commented 1 month ago

image (There is enough space to mode them up a bit)

They're slightly truncated at 100, mind you:

image

Good at 120:

image

ildar170975 commented 1 month ago

How is it shown with default options for font and height? Adapting a picture for a particular size can be done by card-mod. The mini-graph-card provides a basic set of options to style a card.

In a few days I may post a screenshot with default settings from Chrome, no clipping will be there. Probably it depends on a particular client (screen settings etc).

Nickduino commented 1 month ago

with default options for font

image

As for the height, I showed it in the first post: the text is ok but the border is truncated.

ildar170975 commented 1 month ago

Here is my default look: image No clipping is here.

Height = 100: image

Height = 80: image

Height = 63: a clipping is about to happen: image

Conclusion: depends on a particular client. Clipping of a bottom label occurs if a graph height < height of a .graph__labels element (which in my case is ~58px). If you observe a clipping - either increase a graph height or play with fonts for labels.

Nickduino commented 1 month ago

In your examples, all graphs seem pretty wide. Can you try with a different width?

Clipping of a bottom label occurs if a graph height < height of a .graph__labels element (which in my case is ~58px)

I don't know about that, my first example was with a height of 78 and you see some clipping with my height at 100.

ildar170975 commented 1 month ago

my first example was with a height of 78 and you see some clipping with my height at 100.

A height of .graph__labels element depends on a font-size used (calc(0.15em + 8.5px);).

seem pretty wide

Because this is a STANDARD width. Placing cards into stacks/grid makes them narrow. In case of a mini-graph-card it will affect a graph's height: height 130 - causes a height ~130px: image

But when the same card is placed into a horiz stack - the height becomes more than 2 times smaller: image because the svg is scaled down - like a stock history-graph: image

You should either avoid using graphs in a stack/grid, or card-mod them additionally.

ildar170975 commented 1 month ago

I am going to close this issue since there is nothing buggy here. When not scaled down (i.e. when not placed into a stack) the card shows labels not clipped (if a height is not smaller than needed). All additional alterations may be done by card-mod.

The issue is closed - but the discussion may continue of course.

Nickduino commented 1 month ago

I am going to close this issue since there is nothing buggy here.

But it is. You can't say it's normal to not be able to use Sections with a card.

ildar170975 commented 1 month ago

Sections is still an experimental dashboard. I am afraid very little of experienced users use sections since it is still in beta. Check this: image The left button takes only a part of available area; the history-graph takes a whole width, not a half of it.

ildar170975 commented 1 month ago

What is really present - a behaviour in a Grid card: image Currently this can be solved by smth like

    card_mod:
      style: |
        :host {height: 100%}

and this could be implemented natively...

Nickduino commented 1 month ago

very little of experienced users use sections

Don't reserve the card to experienced users. How are we supposed to build experience if we can't use the cards?

since it is still in beta

In that case, don't close the issue: put it on the back burner until sections is out of beta if you wish.

ildar170975 commented 1 month ago

How are we supposed to build experience if we can't use the cards?

The normal "not-sections" view is fully operational. Sections is a merely an ADDITIONAL way to build a view.

In that case, don't close the issue: put it on the back burner until sections is out of beta if you wish.

Not a problem, can reopen, it will not change a thing; but the issue is not related to sections actually, it is about SCALING down a card when a user tries to paste it into a narrow grid cell. Note that even stock cards may look ugly when placed into Grid.

Nickduino commented 1 month ago

The normal "not-sections" view is fully operational. Sections is a merely an ADDITIONAL way to build a view.

I was refering to your point about "experienced users"

the issue is not related to sections actually, it is about SCALING down a card

Alright. It's still an issue. A Mini-graph-card should be able to offer a compact view. Here is your default card vs a default graph: line:

image