Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Week scale - enhance and add to auto-scaling #3549

Merged
merged 5 commits into from
Oct 20, 2017
Merged

Week scale - enhance and add to auto-scaling #3549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
acf5ea8
Move majorLables to 1st week in the month, for 'week' scale
knokit Oct 11, 2017
f053c6a
Add 'week' to auto-scale
knokit Oct 11, 2017
7714694
Update week scale example
knokit Oct 11, 2017
3f3ad88
Revert "Move majorLables to 1st week in the month, for 'week' scale"
knokit Oct 14, 2017
35ab69a
Correct value of week's minimumStep
knokit Oct 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 26 additions & 3 deletions examples/timeline/styling/weekStyling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,21 @@
of moment.js including locales.</p>
<p>To set a locale for the timeline, specify the option
<code>{locale: STRING}</code>.</p>
<p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p>
<p>
To set the scale to use week numbers, use the following options:
<code>
{
timeAxis: {
scale: 'week',
step: 1
},
format: {
minorLabels: {week: 'w'}
}
}
</code>
</p>

<p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
numbers will be calculated according to the US week calendar numbering scheme.</p>
Expand Down Expand Up @@ -93,7 +107,16 @@
}

// Configuration for the Timeline
var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'};
var options = {
locale: 'de',
timeAxis: {
scale: 'week',
step: 1
},
format: {
minorLabels: {week: 'w'}
}
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
Expand All @@ -108,4 +131,4 @@
select.onchange();
</script>
</body>
</html>
</html>
4 changes: 2 additions & 2 deletions lib/timeline/TimeStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ TimeStep.FORMAT = {
hour: 'HH:mm',
weekday: 'ddd D',
day: 'D',
week: 'w',
week: 'D',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't quite understand why to choose the "Day of Month" as default instead of "Locale week of year" when local-aware moment.js is defined as a requirement. Besides, it seems to be more safe to choose the local-aware moment.js week, you never know what happens within these locales.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason for that is to be consistent with the other formats, so when your zooming it doesn't jump from number of the week in the year to day of the month.
This can then be overridden to fit specific cases using format: { minorLabels: {week: 'w'} } as shown in this example: weekStyling

month: 'MMM',
year: 'YYYY'
},
Expand Down Expand Up @@ -340,7 +340,7 @@ TimeStep.prototype.setMinimumStep = function(minimumStep) {
if (stepYear > minimumStep) {this.scale = 'year'; this.step = 1;}
if (stepMonth*3 > minimumStep) {this.scale = 'month'; this.step = 3;}
if (stepMonth > minimumStep) {this.scale = 'month'; this.step = 1;}
if (stepDay*5 > minimumStep) {this.scale = 'day'; this.step = 5;}
if (stepDay*7 > minimumStep) {this.scale = 'week'; this.step = 1;}
if (stepDay*2 > minimumStep) {this.scale = 'day'; this.step = 2;}
if (stepDay > minimumStep) {this.scale = 'day'; this.step = 1;}
if (stepDay/2 > minimumStep) {this.scale = 'weekday'; this.step = 1;}
Expand Down