Major gridlines and week display behaviour

[marcortw]

I'm working on something which preferably displays data on week level rather than day/exact planning level. I have the following defined in my timeline:

[...]
format: {
            minorLabels: {
                millisecond: 'w',
                second: 'w',
                minute: 'w',
                hour: 'w',
                weekday: 'w',
                day: 'w',
                month: 'w',
                year: 'w'
            },
            majorLabels: {
                millisecond: 'MMM-YY',
                second: 'MMM-YY',
                minute: 'MMM-YY',
                hour: 'MMM-YY',
                weekday: 'MMM-YY',
                day: 'MMM-YY',
                month: 'MMM-YY',
                year: 'MMM-YY'
            }
        },

timeAxis: {scale: 'weekday', step: 7},
[...]

I also have a snap function which snaps new elements to the beginning of the week (which is Sunday in my case). This results in the following picture:

As I see it, the vertical grid lines seem to be influenced by the beginning of the month, i.e. a new major grid line is calculated at every first of the month, and as it seems, influence the grid lines of that respective month. Take December as an example: I assume that because I defined step to be 7 and the major grid line at each month's beginning can't be ignored, a major grid line is drawn at the 1st + 7 = 8th of December which is a Tuesday. Is my assumption/understanding of the behavior correct?

What I'd like to have is a major grid line starting with every start of the week, ignoring the new grid line at every first day of the month. Incidentally, this year's November is a good example how i'd like to have it: the major grid lines neatly align with the position of my Sunday-snapped items.

Is there a possibility to change this behavior, for example to turn off the major grid line at the 1st of each month?

Best regards
Marco

[josdejong]

How the grid is displayed depends on your zoom level. If you zoom in a bit, you will see week days (Mon - Sun). There are options to fix the scale, maybe you can use these?

[marcortw]

Hi Jos

I created a little fiddle: http://jsfiddle.net/sczcmozx/ - but because this is all dependent on the resolution of the screen and the zoom level, that probably doesn't help a lot :-) The three items are week-long tasks whose start and end date each indicate where I'd like to have the gridlines and the week number be aligned to.

I tried fixing the scale, which would partially solve the problem if I fix it at a zoom level close enough so that all week days are displayed:

But the zoom level where the week is properly formatted as seen above is way too detailed for my use case - I need to present a lot more information on a lower zoom level. For example if I zoom out a bit using the mouse scrolling wheel, the gridlines and the whole formatting with the weekdays blows up my desired level of accuracy:

If you add timeAxis: {scale: 'weekday', step: 7}, to the options, you can again see the 'breaking' major gridline at the month's begin. Besides that, it gets very close to what I want. I could fix the scale at that level - if that ugly beginning-of-month vertical gridline wouldn't be there:

To phrase it a bit different, I think I need the following:

• Gridlines which lay themselves out along the week (probably only useful if scale: 'weekday'), completely ignoring the month

Any other ideas? Thanks a lot for your help

[josdejong]

How about not showing the major grids?

{
  showMajorLabels: false
}

[marcortw]

I don't see any effect on the grid when playing with these options. But that's kind of expected, isn't it? The showMajorLabels and showMinorLabels options should only affect the time axis according to the documentation. How about adding the following configuration options to the timeline?

gridLines: 'auto' (default), 'day', 'week', 'month'

Whereas 'auto' would behave exactly like the current implementation and the other (mutually exclusive) options would always just add a gridline at the corresponding start of the chosen option, e.g. at the start of either the week, the month or each day. In the case of 'week', no gridline would be added at the start of a month (and the time axis should then behave identically, e.g. not again show the number of the week on the time axis).

Another option could be to have something like 'showMajorGridlines'. If this is set to false, both the major grid line at the month break as well as the major label in the time axis at a month start should not be visible. IMHO, the grid lines and labels could also just follow the scale, e.g. in my case timeAxis: {scale: 'weekday', step: 7}. In fact, you made an interesting comment in cac743a - I don't think the thing I want to achieve is possible without influencing the behaviour of how the major grid is drawn...

If I knew where to start, I'd happily like to contribute.

[josdejong]

Thanks for your suggestions. I think the most important thing missing is a "week" scale which shows grids every 7 days. Would be cool if you could give this a try and see if you can improve it. It would require to extend the TimeStep.js prototype.

[marcortw]

Hey @yotamberk thanks for considering working on this issue :) Are you going to work on it anytime soon? I was thinking of working on it, but i'm rather inexperienced with js, git and the library code.

[yotamberk]

If you want to have a go at it, please go a head! I promise to help you with it if you need advise. I will review your work too. It can be a good oppertunity for you to practice. What do you day? Want to have a shot at it? I will only be able to work on it in two weeks if not

[marcortw]

Thank you very much for offer to help, @yotamberk ! I'm just a bit too busy currently, maybe if i'll find the time around christmas...

[yotamberk]

@marcortw What's the status for this issue. Are you planning to work on this during Christmas?

[marcortw]

@yotamberk Seems like I have to do some work for my regular job. I probably won't find the time to work on this issue, but if I'll find it, I'll ask here first if you already started working on it.

[yotamberk]

No worries. I'll probably get to it this week/next weekend I hope.

[marcortw]

@yotamberk I was recently thinking of this again. Do you think it would make sense and be possible to let the library user provide/inject a custom function for the major/minor gridline calculation rather than just providing this specific feature (week-based gridlines)? Something similar to how a custom snap function can be given as a configuration option.

[yotamberk]

@marcortw sorry for the delay... I just saw this now...
Yeah that would be a cool feature request. But I think we should first implement week-based gridlines.

[marcortw]

@yotamberk I think I know enough now about Timestep.js to implement the weeks feature. I'd go for a new scale 'week' along with a new timeline configuration option called 'weekNumberAlgo' which could be ISO-8601, North american or later additional algorithms (e.g. Islamic). What do you think?

[yotamberk]

Sure. As long as it's well documented and simple, it sounds good to me

[inchr]

@marcortw any news ? I would love to help with this feature. There is a branch/fork ?

[yotamberk]

No progress on this. Please feel free to take this

[inchr]

@yotamberk Ok, it's ok if then I ask here for help ? (I will try to work on this today/tomorrow)

[inchr]

Where is the creation of the vertical grid system ?

[yotamberk]

Of course בתאריך 21 במרץ 2017 9:29 לפנה״צ,‏ "inchr" <notifications@github.com> כתב:

…

@yotamberk <https://github.com/yotamberk> Ok, it's ok if then I ask here for help ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1405 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEHquD3vqydYgKuXTaOWGxUYcsk6whY0ks5rn3w_gaJpZM4GaQq5> .

[inchr]

Ok, a question @yotamberk :

If we do a step 'week' then we don't have the problem that the majorLabel is repeat 4 times for the same month ? any idea/solution for this ?

[marcortw]

@inchr and @yotamberk I already work on this on an unsynced local branch of my vis fork

[inchr]

@marcortw you can push somewhere and give a list of what is missing for a relase ? I want/could help with it, if you're ok with it!

[inchr]

@marcortw ?

[marcortw]

Give me a few days, maybe tonight if i find the time

[marcortw]

@inchr , have a look at marcortw@e9d82df . It looks like it's almost working, at least for me. It's displaying US week numbers (I expected ISO), but maybe that's fine because my locale might be confused because of locale <> timezone <> keyboard <> region.

There are a few things for which I'd appreciate your help:

• override locale awareness (just a matter of testing? using the given overriding method from the library)
• odd things happen when scale set to 4
• two todos in TimeStep.js, one regarding minimumStep and one regarding major label display of the week number
• css styling
• documentation
• hunting for bugs

And as you can see in my profile, i'm not very experienced with git(hub). For example, I currently have no clue why my local branch called "week-scale" doesn't show up in my fork https://github.com/marcortw/vis. So if you or @yotamberk could advise, that would be great :-) How do you @inchr think you can help?

[yotamberk]

@marcortw try git push --set-upstream origin week-scale

[inchr]

@marcortw I will look in the code tomorrow! For sure I can help with css/documentation/hunting bugs and I think with other stuff too(time to understand what and how you've done it)!

I will post a update soon(tomorrow likely)

[inchr]

For the git push, you can try git push origin week-scale:week-scale (if your local branch is called week-scale or anyway git push origin : ... should works)

[inchr]

@marcortw You don't have pushed the week-scale branch...try with @yotamberk command or use mine. Let me know if you have any problem in pushing it!

[marcortw]

It's there now: https://github.com/marcortw/vis/tree/week-scale

[marcortw]

@inchr I just added locale-aware week number calculations in marcortw@751ea07. Pretty neat and easy with momentjs! The weekStyling example looks quite good to me, and I think I could bring it to an end to make a PR in a few days. However, if you could take a closer look at it or contribute somehow, that would be great!

[inchr]

@marcortw Ok, I've saw what has been done in your branch(and I was doing exactly the same thing in the same way), but I wonder if have a list of weeks with YYYY in majorLabels makes sense.

In real world use case people doesn't remember what week number belongs to last week of March for example.

What are your thought on this ? A very simple workaround is to edit the minorLabels, but I wonder if it's the best way.
Any thoughts ? cc @yotamberk

There is a way for have majorLabels in months or in quarter and then have the minorLabels with the week number based on the total year ? It's this easily achievable ? (I will test by myself this evening or tomorrow morning) maybe is enough play with majorLabels format.

[marcortw]

I think the intention of the minorLabels is to show the actual scale's value, which should be the week number per default. The user can override both the minorLabels and majorLabels displayed value by applying custom options.format (using the moment.js format). What he cannot override is when a major label is drawn.

However, I agree with you that having just the calendar week number is too little information. The problem with the majorLabels code seems to be that you only get back the start date from the current week's step from this.current, which doesn't necessarily represent a meaningful value to determine if a major Label is needed. I guess the question is 'what is a reasonable higher order value for a week' - I initially thought a quarter of a year could be one, but they don't necessarily align with the start or end of a week and are calculated differently depending on the business domain. Other things such as 'every 4th week' seem to be a bit random as well. I will check to see if I can promote the month start as the default value for the majorLabel. What do you think about this?

P.S. Maybe it's better to not waste both our resources coding the same stuff - i'm almost there, just give me a few days time then I will make a PR.

[inchr]

@marcortw sure! let me know if you need any help!

[marcortw]

@inchr I am struggling with the display of the major labels. See marcortw@782dee4. As discussed, I tried to implement the display of the start date of the week as a major label, but interestingly the start date of the next week is displayed. As far as I can see, getLabelMajor works as expected. Would you have the time to take a look at it? I'm not sure if there might be a bug in TimeAxis.js, calling next too early.

I initially wanted to have the start of the month as a major label, similarly to how it works with the 'weekday' scale. The problem is that with the selection of the step in https://github.com/marcortw/vis/blob/week-scale/lib/timeline/TimeStep.js#L217 this also limits the selection of possible candidates for a major label to these week steps which don't (necessarily) align with the month's begin (opposite to weekday, where every day of the year is iterated). If you have any ideas in that regard, let me know.

[inchr]

I will try tomorrow(my sunday)!

[inchr]

But maybe @yotamberk has some suggestions/know better the lib. Any help/suggestion ?

[bradh]

@inchr Please remember that @yotamberk has a lot of other things to do (on vis, but also a full time job). So you should definitely try first before asking for help.

[inchr]

@bradh of course ! I was just asking if he had any idea on the reason, no that he should work on this 😄

[nothor]

OMG! You are very close to achieve the "Week Step" Feature! :_)
I had opened a Ticket a long time ago, but as far as this feature will be implemented I will close it too.
Good Job!

[inchr]

Not luck here yet :( I'm loosing my hope...The problem is that the majorLabel are directly correlated to the minorLabel.

Right now we're playing with format but the problem is that should be totally changed how the majorLabel works imho(but i totally understand that is a huge work)

[marcortw]

@inchr I totally agree with you, it's rather confusing how it works now. Maybe an 'easy' fix would be to inject steps when next is called based on a custom function. But I don't have the time for this now and I will just go with a PR using the first week of the year as a majorLabel iterator for the time being. We could then move forward and extend or refactor TimeStep.js and maybe TimeAxis.js after discussing this with the maintainers, e.g. @yotamberk or @mojoaxel