How to use getTimeScales func?

[crisclacerda]

Hi there, thanks for the awesome project.
I am trying to customize the chart to only display business hours, from my understanding I can achieve that by passing a getTimeScales function to the timeline template, but I do not understand how the function work, can you elaborate on that, please?
Cheers

[w1301625107]

我的英语不是太好，可能变量名取得不是很准确。首先，开始时间和结束时间会被分割为按天的数组。比如开始时间 '2021-01-01 12:00'，解释时间是'2021-01-03 12:00'，会被分成[2021-01-01,2021-01-02,2021-01-03],这就是slot 中提供的day，提供的slot 就会被循环渲染3次。

因为一整天（如果scale = 60） 可以分成24格，但是开始时间的那一天可能只有半天，那只有12格了，所以getTimeScales就是告诉你这一天的长度可以分多少格。

My English is not very good, maybe the variable name is not very accurate. First, the start and end times will split into an array of days.For example, starttime is '2021-01-01 12:00',end time is '2021-01-03 12:00',will transform to an arry like [2021-01-01,2021-01-02,2021-01-03], this is the each day field provided in the slot, and the slot you provided will be render 3 times.

Since the whole day (if scale = 60) can be divided into 24 units, but the day of the start time may only half a day, can be divided into 12 units, so getTimeScales func tells you how many units of day can be divided.

[w1301625107]

https://github.com/w1301625107/Vue-Gantt-chart/blob/master/src/components/time-line/index.vue source code

[crisclacerda]

Great, thanks for the quick reply. I tried to find that function definition but failed, thanks for pointing that out.
So if I understand you correctly it's not possible to achieve that with this function?

If in the while in line 224 for example, of the source you showed if I change it to:

while (!a.isAfter(b)) {
  if (a.hour() < 22 && a.hour() > 7)
    totalblock.push(a);

It would not display those hours in the timeline but the chart and the timeline will become unaligned, right? An event for example that starts at 04:00 would appear under 09:00 (maybe, just an example...) is that correct?

How would you suggest implementing such a feature with necessary? By that I mean to only display certain hours in the chart itself and not only in the timeline...

[w1301625107]

很难实现。因为定位基于两个时间的差，但是每天的下班时间到第二天的上班时间的时间段被你删除了(2021-01-01 18:00 ---> 2021-01-02 10:00 16个小时消失了)，计算出的偏移量就偏长了。你还需要改计算偏移量的函数。改动量会很大。

Hard to achieve. Because the location is based on the difference between the two times, but you delete the time between two days(2021-01-01 18:00 ---> 2021-01-02 10:00 16hours is disappear ), the calculated offset will be longer. You may need to change the function that calculates the offset.There will be a lot of changes。

[crisclacerda]

Well, I really need this and I really like your component as opposed to other implementations that offer such functionality...
So I hope to get my hands dirty with this.
Can you point me to the function that computes the offset to start there?
Thanks again for the help so far.

[w1301625107]

offset
https://github.com/w1301625107/Vue-Gantt-chart/blob/master/src/utils/gtUtils.js

timeline
https://github.com/w1301625107/Vue-Gantt-chart/blob/master/src/utils/timeLineUtils.js

good luck~

[crisclacerda]

I manage to get something working...
Still very hackish and buggy for edge cases, but I could polish it and prepare a PR.
Do you have an interest in merging such a feature?
How do you think the API should look like?

[w1301625107]

你想合并什么功能？一个自定义的计算偏移的函数？

What features do you want to merge? A custom function to calculate the offset?

[crisclacerda]

Skipping a range of hours and/or days of the week.
My use case is to skip times past 22 and not before 07 and Sundays. But that should be flexible to anything the user wants. that's why I asked about the API..

[w1301625107]

你打算怎么跳过？
如果可以实现我这边很乐意去合并，但是你需要提供相应的测试用例。

How are you going to skip it?
if it can be achieved, I am happy to merge, but you need to provide corresponding test cases.