Browse Source

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

* Move majorLables to 1st week in the month, for 'week' scale

* next() always adds 1 week to current date
* show 1st week in the month as majorLabel

* Add 'week' to auto-scale

* Update week scale example

* Revert "Move majorLables to 1st week in the month, for 'week' scale"

This reverts commit 52df3c3ac5.

* Correct value of week's minimumStep
mbroad/code-climate-coverage-develop
Ivo Silva 7 years ago
committed by Yotam Berkowitz
parent
commit
0a6f25737d
2 changed files with 28 additions and 5 deletions
  1. +26
    -3
      examples/timeline/styling/weekStyling.html
  2. +2
    -2
      lib/timeline/TimeStep.js

+ 26
- 3
examples/timeline/styling/weekStyling.html View File

@ -26,7 +26,21 @@
of moment.js including locales.</p> of moment.js including locales.</p>
<p>To set a locale for the timeline, specify the option <p>To set a locale for the timeline, specify the option
<code>{locale: STRING}</code>.</p> <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 <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 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> numbers will be calculated according to the US week calendar numbering scheme.</p>
@ -93,7 +107,16 @@
} }
// Configuration for the Timeline // 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 // Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options); var timeline = new vis.Timeline(container, items, groups, options);
@ -108,4 +131,4 @@
select.onchange(); select.onchange();
</script> </script>
</body> </body>
</html>
</html>

+ 2
- 2
lib/timeline/TimeStep.js View File

@ -73,7 +73,7 @@ TimeStep.FORMAT = {
hour: 'HH:mm', hour: 'HH:mm',
weekday: 'ddd D', weekday: 'ddd D',
day: 'D', day: 'D',
week: 'w',
week: 'D',
month: 'MMM', month: 'MMM',
year: 'YYYY' year: 'YYYY'
}, },
@ -340,7 +340,7 @@ TimeStep.prototype.setMinimumStep = function(minimumStep) {
if (stepYear > minimumStep) {this.scale = 'year'; this.step = 1;} if (stepYear > minimumStep) {this.scale = 'year'; this.step = 1;}
if (stepMonth*3 > minimumStep) {this.scale = 'month'; this.step = 3;} if (stepMonth*3 > minimumStep) {this.scale = 'month'; this.step = 3;}
if (stepMonth > minimumStep) {this.scale = 'month'; this.step = 1;} 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*2 > minimumStep) {this.scale = 'day'; this.step = 2;}
if (stepDay > minimumStep) {this.scale = 'day'; this.step = 1;} if (stepDay > minimumStep) {this.scale = 'day'; this.step = 1;}
if (stepDay/2 > minimumStep) {this.scale = 'weekday'; this.step = 1;} if (stepDay/2 > minimumStep) {this.scale = 'weekday'; this.step = 1;}

Loading…
Cancel
Save