feat: sections support #1139

selvalt7 · 2024-09-12T15:29:57Z

This adds support for sections dashboard and addresses #1111.
Which means it fixes card size and also add card size restrictions based on the card configuration.
This "shouldn't" affect other types of dashboards.

Nickduino · 2024-09-25T15:29:30Z

Please merge this into the base branch, guys, we need it :-)

akloeckner · 2024-09-25T15:56:55Z

Please feel free to give a first peer review. This one will take some time on my side, as I don't have too much spare time and #1128 is first in line. @selvalt7 is very productive. 😄 Thanks!

ildar170975 · 2024-10-02T15:07:22Z

Honestly I made a quick look at this PR.
What I noticed that all changes affect only on a "sections" view (hope I am not wrong) - i.e. will not break traditional views.
Cannot test it in full scale myself - not using sections.

IMHO we can give this PR a go & test with participation of users who is using sections.
Hopefully will find more bugs)))

akloeckner

As the discussion came here before I could look at the UI PR again, I used some travel time to review. I must admit, I don't use sections, so this is from a pure code review perspective now.

Forgive me if I didn't get some parts of the code completely. All suggestions are open to discussion.

akloeckner · 2024-10-02T18:45:41Z

src/main.js

@@ -127,6 +135,68 @@ class MiniGraphCard extends LitElement {
    }
  }

+  checkSections() {
+    let root = document.querySelector('home-assistant');


Is this really the best way to check for the view layout? The main frontend suggests, there might be this.layout?

See here: https://github.com/home-assistant/frontend/blob/67217b9dd0f5ad43aafb3bba2fe2821407b25243/src/panels/lovelace/cards/hui-entity-card.ts#L139

Also, maybe this.options.layout_options will only defined in sections view?

this.layout does not seem to be defined when the graphs are created in getConfig. I could try to modify graphs height in render as it seems that this.layout is defined there.

As for the this.options.layout_options there could be a situation where user copies card to a different dashboard that is not necessarily a sections but maybe I am overthinking.

src/main.js

akloeckner · 2024-10-02T19:11:31Z

src/main.js

+  }
+
+  getLayoutSize(layout) {
+    if (!this.sections) {


Reduce?

return this.sections && layout.grid_rows === 2 ? 'small' : '';

And if that is enough, maybe remove the function and do the logic in the render directly... (Because it seems used only once.)

src/style.js

akloeckner · 2024-10-02T19:18:06Z

src/style.js

@@ -49,6 +53,9 @@ const style = css`
    order: -1;
    padding: 0 16px 8px 16px;
  }
+  ha-card[fill].sections .graph__legend {


Why do the margins and paddings need tweaking? If it's kind of a refactor but yields the same layout, let's consider to change this also in non-section view to keep consistency.

akloeckner · 2024-10-02T19:21:14Z

src/style.js

@@ -238,6 +254,10 @@ const style = css`
    margin-top: auto;
    width: 100%;
  }
+  .sections .graph {


Here, too: if this is useful also in non-section views, let's consider to just add it to the regular styles.

I think this is only useful for section view. It makes graph position itself so that it's not clipping out of bounds.

akloeckner · 2024-10-02T19:27:39Z

src/main.js

+    return false;
+  }
+
+  getCurrentLayout() {


I wonder: isn't this taken care of by home assistant? If we report a minimum row count via getLayoutOptions, shouldn't this be reflected in this.config.layout_options?

See also here, maybe: https://github.com/home-assistant/frontend/blob/67217b9dd0f5ad43aafb3bba2fe2821407b25243/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts#L68

No, it only clamps the values for setting the card size and for the visual editor, values set by user in this.config.layout_options stays untouched even when they're lower than minimum set in getLayoutOptions.

src/main.js

Card is considered small when its row size is 3 or less Simpler sections checking Simpler card height style

jnnck · 2024-10-08T13:14:53Z

Hi Guys! Thanks for your work, just wanted to let you guys know that as a sections user, i tried out this PR and it did fix my dashboards

Before:

After:

Personally i did like the thinner lines, but thats just preference and i can just add line_width to my yaml ofcourse

Nickduino · 2024-10-08T14:03:03Z

@jnnck Awesome. Could you show us how the labels look like on your humidity graph with the PR?

selvalt7 · 2024-10-08T14:19:05Z

I haven't touched the labels, but I think it could be solved by changing flex-direction in the labels container to column-reverse and changing their arrangement in HTML so they appear correctly.

This would introduce some overlaps, of course.

Before:

After:

ildar170975 · 2024-10-08T14:26:16Z

Hope this PR will only touch sections and will not affect other layouts.
I would suggest to reduce it to as minimal as possible to simplify testing and probably to review necessary changes.

As for labels and similar: consider more playing with fonts than with placement.

Nickduino · 2024-10-08T14:28:45Z

After:

If you want to go that route, I think you shouldn't leave such an important gap at the bottom and the state should remain on top of the labels

jnnck · 2024-10-08T16:57:08Z

@jnnck Awesome. Could you show us how the labels look like on your humidity graph with the PR?

Labels before:

Labels after:

akloeckner · 2024-11-22T12:37:29Z

Just to let you know: I plan to get this feature released. However, I am currently overloaded and I would prefer to do this properly (rather than iterating the structure over multiple releases). So, I might still need some time. Thanks for bearing with me!

ildar170975 · 2024-12-26T22:31:10Z

src/style.js

@@ -4,6 +4,7 @@ const style = css`
  :host {
    display: flex;
    flex-direction: column;
+    height: 100%;


suggest to check this in a stock horiz stack with another card.

ildar170975 · 2025-01-02T20:39:02Z

@selvalt7
I suggest to divide this PR to 2 parts:

Simply adapting a height to an available area.
Style elements dependently on number of rows & columns.

Reasons are that this PR is very large & touches many things. And I have a feeling that still we can together improve styling (my fault also - I was not able to dedicate enough time for this).

I prepared a super short PR (#1155) to fix a height (there are similar changes in your PR).
Let's merge it first - at least users will not have issues like "my card does not occupy a whole area", "my card overlaps another card".
Then we spend more time for THIS PR (it really needs more attention).
What do you think?

@akloeckner
What do you think?

selvalt7 · 2025-01-02T22:34:05Z

getLayoutOptions indeed could be moved to the separate PR as its not affecting the card that much. It's only limiting size of the card based on the configuration only affecting sections dashboard.

akloeckner · 2025-01-02T23:18:56Z

I am really sorry to take so long to review your PR properly, @selvalt7! The same goes for the UI configuration PR, unfortunately.

I think, it is a good idea to try and go step by step. It will also help me to dive into the individual chunks.

For what it's worth, I have been working on the sections feature, based on your PR:

https://github.com/akloeckner/mini-graph-card/tree/feat/sections

@ildar170975, I think, simpliy fixing the height to 100% did break the masonry layout, because the svg does not have a default height. Here's a diff to the dev branch of what I changed and tested locally in all view types:

dev...akloeckner:mini-graph-card:feat/sections#diff-10d28e2613270db220e1a250cde735ca7d59741ce26c5dbce7e492909e243cb2

It does not actually need the .sections nor the .small classes. (Although they are still there from @selvalt7's original code.)

The next thing, I was trying to get my head around was the graph sizing. I do not like changing its size with every re-render. Actually, its appearance also changes depending on the view, if we do this. I began to get the impression that the 500px were originally just chosen as a reasonable starting point and then everything was resized using CSS. I think, we should stick to that philosophy. (Or change it for all views.)

So: Yes, let's try and make chunks.

CSS changes to enable proper layout in all (!) common view types. Hopefully without any JS changes.
Either with @ildar170975's very simple fix or something more comprehensive like my work-in-progress.
Maybe include the getLayoutOptions already, even if its only usable in UI configuration.
But let's apply static values there for now. And I also think, we should respect, if a user sets too small a height in yaml configuration.
Think about the .small feature separately. I really like it, but I feel it is a bit too mixed up in the sections-only view.

selvalt7 · 2025-01-03T01:30:54Z

@akloeckner
I am checking your branch and I think the squishing effect can be solved for graph line with vector-effect="non-scaling-stroke".
Points are not so straight forward as vector-effect is not sufficient.

So I thought about the solution and I came up with one:
Instead of circle we use line with stroke-linecap='round' and vector-effect='non-scaling-stroke'.
To make the points look the same, we need to use two line elements for every data point.

With that I think changing graph size won't be necessary at all.

Removed graph aspect ratio Removed setting graph size

selvalt7 added 3 commits September 12, 2024 17:16

feat: sections support

ab2e546

fix: invisible graph in non sections type dashboards

b1653e8

fix: hide state time label when card is considered small

295554c

akloeckner mentioned this pull request Oct 2, 2024

fix: height in grid #1155

Open

akloeckner reviewed Oct 2, 2024

View reviewed changes

Cleaner minimum row calculation

2c9a8b7

Card is considered small when its row size is 3 or less Simpler sections checking Simpler card height style

This comment was marked as off-topic.

Sign in to view

tr05t approved these changes Nov 8, 2024

View reviewed changes

This comment was marked as off-topic.

Sign in to view

akloeckner mentioned this pull request Dec 19, 2024

feat: Add loader #1180

Merged

ildar170975 reviewed Dec 26, 2024

View reviewed changes

selvalt7 added 2 commits December 27, 2024 15:42

Fixed incorrect card height in horizontal stack

a74057c

Merge remote-tracking branch 'upstream/dev' into sections-support

031836f

Alternate points rendering

2346028

Removed graph aspect ratio Removed setting graph size

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: sections support #1139

feat: sections support #1139

selvalt7 commented Sep 12, 2024 •

edited

Loading

Nickduino commented Sep 25, 2024

akloeckner commented Sep 25, 2024

ildar170975 commented Oct 2, 2024

akloeckner left a comment

akloeckner Oct 2, 2024

selvalt7 Oct 5, 2024

akloeckner Oct 2, 2024

akloeckner Oct 2, 2024

akloeckner Oct 2, 2024

selvalt7 Oct 8, 2024

akloeckner Oct 2, 2024

selvalt7 Oct 5, 2024

jnnck commented Oct 8, 2024 •

edited

Loading

Nickduino commented Oct 8, 2024 •

edited

Loading

selvalt7 commented Oct 8, 2024

ildar170975 commented Oct 8, 2024 •

edited

Loading

Nickduino commented Oct 8, 2024

jnnck commented Oct 8, 2024 •

edited

Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

akloeckner commented Nov 22, 2024

ildar170975 Dec 26, 2024

ildar170975 commented Jan 2, 2025

selvalt7 commented Jan 2, 2025

akloeckner commented Jan 2, 2025

selvalt7 commented Jan 3, 2025 •

edited

Loading

feat: sections support #1139

Are you sure you want to change the base?

feat: sections support #1139

Conversation

selvalt7 commented Sep 12, 2024 • edited Loading

Nickduino commented Sep 25, 2024

akloeckner commented Sep 25, 2024

ildar170975 commented Oct 2, 2024

akloeckner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jnnck commented Oct 8, 2024 • edited Loading

Nickduino commented Oct 8, 2024 • edited Loading

selvalt7 commented Oct 8, 2024

ildar170975 commented Oct 8, 2024 • edited Loading

Nickduino commented Oct 8, 2024

jnnck commented Oct 8, 2024 • edited Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

akloeckner commented Nov 22, 2024

Choose a reason for hiding this comment

ildar170975 commented Jan 2, 2025

selvalt7 commented Jan 2, 2025

akloeckner commented Jan 2, 2025

selvalt7 commented Jan 3, 2025 • edited Loading

selvalt7 commented Sep 12, 2024 •

edited

Loading

jnnck commented Oct 8, 2024 •

edited

Loading

Nickduino commented Oct 8, 2024 •

edited

Loading

ildar170975 commented Oct 8, 2024 •

edited

Loading

jnnck commented Oct 8, 2024 •

edited

Loading

selvalt7 commented Jan 3, 2025 •

edited

Loading