feat: add grid lines

[JulienDeveaux]

Implements #837

This is a grid_line_type of day for an hours_to_show of 730

[ildar170975]

@akloeckner
Please have a look at this PR.

Guys, I am away from PC, hope will be back in a week. Meanwhile please test this PR.

[ildar170975]

Let's change it to:

grid_lines_type | hour | false / 5minute / hour / day / week | Show grid lines dependently on hours_to_show value (set to false or omit this option if grid lines should not be displayed).

I hope this code:

const grid_lines_type = show.grid_lines_type ? show.grid_lines_type : false;

does process the show.grid_lines_type = false case properly.

[akloeckner]

It should. However, it could be simplified. ;-)

Also, I think, we should consider to have an option of grid_lines_per_hour, rather than grid_lines_type. It would allow for more flexibility with much simpler code. But I haven't thought this to the end yet.

[ildar170975]

grid_lines_per_hour, rather than grid_lines_type

The initial idea was:
-- "main" (thick) lines are shown every 5 minutes / hourly / daily / ... ;
-- "secondary" (thin) lines are shown more frequently ("ratio" option) or not shown at all.
I honestly cannot see how grid_lines_per_hour may be used along with some "show secondary lines" option (or I am still far away from HA & normal life, need more time)

[akloeckner]

Just from the top of my head, I was thinking:

• Gridlines per hour is basically the same as proposed now. We could simply use fractions to yield days or weeks. But we'd be able to also have a gridline each second if need be.
• (It would also be consistent with the default points_per_hour setting. And reduce repeated code to actually convert days or weeks into multiples of hours.)
• We could also omit the secondary grid lines as different "class". And use nth-of-type in css instead. Again it reduces code and is more customizable by the user.

[ildar170975]

Please let me think a bit.

[ildar170975]

@akloeckner
Was thinking about using grid_lines_per_hour:

1. Currently we got new proposed options - grid_lines_type (false / 5minute / hour / day / week) & grid_lines_ratio (integer, >=0).
   Alternatively, we could get smth like grid_lines_per_hour (for thick lines) and same grid_lines_ratio (for thin lines).
   And in this case this grid_lines_per_hour is numerical (could be fractional < 1).
   Let's consider the "<1" case - it is needed to show thick lines, for example, every 2 hours, every day etc.
   For the "every day" case a user will have to use a 0.041667value.
   Does not look nice, a 1/24 value seems to be more user-friendly - but in this case we need to process these 1/x values and convert them to valid floats.

2. If we choose the current implementation with grid_lines_type - we will have a minimal granularity for thick lines = 5 minutes.
   A smaller granularity then could be achieved by grid_lines_ratio:
   5 - thin lines every 1 minute,
   10 - every 30 seconds, and so on.
   Probably this would be sufficient for most scenarios.

We could also omit the secondary grid lines as different "class". And use nth-of-type in css instead. Again it reduces code and is more customizable by the user.

Sorry, I think using nth-of-type will make thing more difficult.
Assume we got a set of thick & thin lines WITHOUT classes.
To style them, we could use nth-of-type or similar - but a formula could be complex.
We draw these lines from a right side (now -> past). So, we will have to process these nth from the end as well. Not easy I think.
Using a separate class for thick & thin lines will allow users to quickly show/hide them by card-mod.

[JulienDeveaux]

@ildar170975 @akloeckner
Do you guys think this is ready, or it's still missing something ?

[ildar170975]

I think it is good. But @akloeckner shared some thoughts, waiting for his feedback.

Guys, I am far from PC these days. Cannot test anything.

[ildar170975]

@JulienDeveaux
@akloeckner
BTW, a useful remark: #1210 (comment)