feat: add grid lines

[JulienDeveaux]

Implements #837

This is a grid_line_type of day for an hours_to_show of 730

[ildar170975]

Probably next "layers" will "overlay" the grid & make it less visible. I am thinking about drawing the grid AFTER these layers. But let's leave it this way & test...

[JulienDeveaux]

I tried to move it around, but I don't see any visual changes to that

[ildar170975]

don't see any visual changes to that

OK, we'll test it together

[ildar170975]

Assume we have hours_to_show=2 & grid_line_type=hour.
Then numLines = 2 & xRatio = 250.
Then we will have 2 lines - for 125 & 375, i.e. for hour=0.5 & hour=1.5.
And the 1st line will be "thin" (0 % 2 === 0), the 2nd line will be "thick" (1 % 2 = 1).
Not nice.
ALternatively we can make "thin" lines for "hour=0.5" & "hour=1.5", and "thick" line for "hour=1".
What do you think?
Also, can we turn a "frequency" - that "2" value - into an option like grid_line_????? to define which lines should be "thin"?

[JulienDeveaux]

done

[ildar170975]

We still have an issue here.
If hours_to_show = 2, we will get the left picture (thick line on 125, thin on 375), but we need to get the right picture (thick line on 250):

[JulienDeveaux]

yeah that's the 0.5 in this line const x = xRatio * (i + 0.5);
If I remove it the first line is kinda hidden in the border and I find it wierd, that's why there is an offset

[ildar170975]

I am trying now to adapt the algorithm to a fractional hours_to_show. For int values already made it, but for fractional more difficult story.

[ildar170975]

Please check my addition below (currently last comment in the thread).

[JulienDeveaux]

refactored

[ildar170975]

@JulienDeveaux
The most difficult part is left - the algorithm itself.
Need some more time for thinking.
Thanks a lot for your work!

[ildar170975]

@JulienDeveaux
Please take this C-like code and refactor to JS:

    float spanInHours;
    
    switch (grid_lines_type) {
      case "5minute":
        spanInHours = float(1/12);
        break;
      case "hour":
        spanInHours = 1;
        break;
      case "day":
        spanInHours = 24;
        break;
      case "week":
        spanInHours = 168;
        break;
      default:
        spanInHours = 1;
    }

    float numLines = hours_to_show / spanInHours;
    float spanFactor = ceil(hours_to_show / spanInHours) / (hours_to_show / spanInHours);
    float thickPart = containerWidth * spanFactor / ceil(numLines);
    float thinPart = thickPart / float(grid_lines_ratio + 1);
    numLines = numLines * (grid_lines_ratio + 1);

    for (int i = 0; i < numLines - 1; i++) {
      float x = containerWidth - thinPart * (i + 1);
      //float timeLabel = hours_to_show / numLines * (i + 1);
	
      if ((i + 1) % (grid_lines_ratio + 1) > 0) {
        // draw thin
      } else {
        // draw thick
      }
    }

The code was tested locally.
Leave the "float timeLabel" line commented - we may need it in future if decide to draw labels on X-axis.

The code should be placed after this line:

    const containerWidth = 500;

till this last line:

return lines;