Skip to content

Commit

Permalink
Functional, not bug-free version which works with locale aware week n…
Browse files Browse the repository at this point in the history 
…umbers.
  • Loading branch information
@marcortw
marcortw committed Mar 23, 2017
1 parent 8613e07 commit e9d82df
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 65 deletions.
105 changes: 59 additions & 46 deletions examples/timeline/styling/weekStyling.html
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,70 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Grid styling</title>

<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body, html {
font-family: sans-serif;
}

/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}

/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white;
}
</style>

<title>Timeline | Grid styling</title>

<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
body, html {
font-family: sans-serif;
}

/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}

/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}

.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white;
}
</style>

</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'ISO week 10 in 2017', start: '2017-03-06', end: '2017-03-12'},
{id: 2, content: 'ISO week 11 in 2017', start: '2017-03-13', end: '2017-03-19'},
{id: 3, content: 'ISO week 12 in 2017', start: '2017-03-20', end: '2017-03-26'},
{id: 4, content: 'ISO week 13 in 2017', start: '2017-03-27', end: '2017-04-02'},
{id: 5, content: 'US week 10 in 2017', start: '2017-03-05', end: '2017-03-11'},
{id: 6, content: 'US week 11 in 2017', start: '2017-03-12', end: '2017-03-18'},
{id: 7, content: 'US week 12 in 2017', start: '2017-03-19', end: '2017-03-25'},
{id: 8, content: 'US week 13 in 2017', start: '2017-03-26', end: '2017-04-02'}
]);

// Configuration for the Timeline
var options = {timeAxis: {scale: 'week', step: 1}};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');

// just a group for the effects
var groups = new vis.DataSet();
groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]);

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, group: 1, content: 'ISO week 51 in 2016', start: '2016-12-19 00:00:00', end: '2016-12-25 23:59:59'},
{id: 2, group: 1, content: 'ISO week 52 in 2016', start: '2016-12-26 00:00:00', end: '2017-01-01 23:59:59'},
{id: 3, group: 1, content: 'ISO week 01 in 2017', start: '2017-01-02 00:00:00', end: '2017-01-08 23:59:59'},
{id: 4, group: 1, content: 'ISO week 02 in 2017', start: '2017-01-09 00:00:00', end: '2017-01-15 23:59:59'},
{id: 5, group: 2, content: 'US week 52 in 2017', start: '2016-12-18 00:00:00', end: '2016-12-24 23:59:59'},
{id: 6, group: 2, content: 'US week 53 in 2017', start: '2016-12-25 00:00:00', end: '2016-12-31 23:59:59'},
{id: 7, group: 2, content: 'US week 01 in 2017', start: '2017-01-01 00:00:00', end: '2017-01-07 23:59:59'},
{id: 8, group: 2, content: 'US week 02 in 2017', start: '2017-01-08 00:00:00', end: '2017-01-14 23:59:59'},
{id: 9, group: 1, content: 'ISO week 10 in 2017', start: '2017-03-06 00:00:00', end: '2017-03-12 23:59:59'},
{id: 10, group: 1, content: 'ISO week 11 in 2017', start: '2017-03-13 00:00:00', end: '2017-03-19 23:59:59'},
{id: 11, group: 1, content: 'ISO week 12 in 2017', start: '2017-03-20 00:00:00', end: '2017-03-26 23:59:59'},
{id: 12, group: 1, content: 'ISO week 13 in 2017', start: '2017-03-27 00:00:00', end: '2017-04-02 23:59:59'},
{id: 13, group: 2, content: 'US week 10 in 2017', start: '2017-03-05 00:00:00', end: '2017-03-11 23:59:59'},
{id: 14, group: 2, content: 'US week 11 in 2017', start: '2017-03-12 00:00:00', end: '2017-03-18 23:59:59'},
{id: 15, group: 2, content: 'US week 12 in 2017', start: '2017-03-19 00:00:00', end: '2017-03-25 23:59:59'},
{id: 16, group: 2, content: 'US week 13 in 2017', start: '2017-03-26 00:00:00', end: '2017-04-01 23:59:59'}
]);

// Configuration for the Timeline
var options = {timeAxis: {scale: 'week', step: 1}};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
38 changes: 20 additions & 18 deletions lib/timeline/TimeStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,9 @@ TimeStep.FORMAT = {
hour: 'ddd D MMMM',
weekday: 'MMMM YYYY',
day: 'MMMM YYYY',
week: 'W YYYY',
week: 'w YYYY', // TODO BUG 'w' should be the locale aware week number,
// but shows a wrong/different number sometimes, not sure
// if i misinterpret the momentjs docs
month: 'YYYY',
year: ''
}
Expand Down Expand Up @@ -155,7 +157,7 @@ TimeStep.prototype.roundToMinor = function() {
this.current.year(this.step * Math.floor(this.current.year() / this.step));
this.current.month(0);
case 'month': this.current.date(1);
case 'week': this.current.date(0); //TODO
case 'week': this.current.day(0);
case 'day': // intentional fall through
case 'weekday': this.current.hours(0);
case 'hour': this.current.minutes(0);
Expand All @@ -173,7 +175,7 @@ TimeStep.prototype.roundToMinor = function() {
case 'hour': this.current.subtract(this.current.hours() % this.step, 'hours'); break;
case 'weekday': // intentional fall through
case 'day': this.current.subtract((this.current.date() - 1) % this.step, 'day'); break;
case 'week': this.current.subtract((this.current.date() - 1) % this.step, 'week'); break; // TODO
case 'week': this.current.subtract(this.current.week() % this.step, 'week'); break;
case 'month': this.current.subtract(this.current.month() % this.step, 'month'); break;
case 'year': this.current.subtract(this.current.year() % this.step, 'year'); break;
default: break;
Expand Down Expand Up @@ -214,7 +216,7 @@ TimeStep.prototype.next = function() {
break;
case 'weekday': // intentional fall through
case 'day': this.current.add(this.step, 'day'); break;
case 'week': this.current.add(this.step, 'week'); break; //TODO
case 'week': this.current.add(this.step, 'week'); break;
case 'month': this.current.add(this.step, 'month'); break;
case 'year': this.current.add(this.step, 'year'); break;
default: break;
Expand All @@ -229,7 +231,7 @@ TimeStep.prototype.next = function() {
case 'hour': if(this.current.hours() > 0 && this.current.hours() < this.step) this.current.hours(0); break;
case 'weekday': // intentional fall through
case 'day': if(this.current.date() < this.step+1) this.current.date(1); break;
case 'week': if(this.current.date() < this.step+1) this.current.date(1); break; //TODO
case 'week': if(this.current.week() < this.step) this.current.week(1); break; // week numbering starts at 1, not 0
case 'month': if(this.current.month() < this.step) this.current.month(0); break;
case 'year': break; // nothing to do for year
default: break;
Expand Down Expand Up @@ -300,7 +302,7 @@ TimeStep.prototype.setMinimumStep = function(minimumStep) {

var stepYear = (1000 * 60 * 60 * 24 * 30 * 12);
var stepMonth = (1000 * 60 * 60 * 24 * 30);
var stepWeek = (1000 * 60 * 60 * 24 * 7); //TODO
var stepWeek = (1000 * 60 * 60 * 24 * 7);
var stepDay = (1000 * 60 * 60 * 24);
var stepHour = (1000 * 60 * 60);
var stepMinute = (1000 * 60);
Expand All @@ -317,7 +319,8 @@ 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 (stepWeek > minimumStep) {this.scale = 'week'; this.step = 1;} //TODO
if (stepWeek*4 > minimumStep) {this.scale = 'week'; this.step = 4;} // TODO Check, not sure what this does
if (stepWeek > minimumStep) {this.scale = 'week'; this.step = 1;}
if (stepDay*5 > minimumStep) {this.scale = 'day'; this.step = 5;}
if (stepDay*2 > minimumStep) {this.scale = 'day'; this.step = 2;}
if (stepDay > minimumStep) {this.scale = 'day'; this.step = 1;}
Expand Down Expand Up @@ -378,14 +381,13 @@ TimeStep.snap = function(date, scale, step) {
clone.seconds(0);
clone.milliseconds(0);
}
else if (scale == 'week') { //TODO
if (clone.date() > 15) {
clone.date(1);
else if (scale == 'week') {
if (clone.weekday() > 2) { // doing it the momentjs locale aware way
clone.weekday(0);
clone.add(1, 'week');
// important: first set Date to 1, after that change the month.
}
else {
clone.date(1);
clone.weekday(0);
}

clone.hours(0);
Expand Down Expand Up @@ -527,7 +529,7 @@ TimeStep.prototype.isMajor = function() {
case 'day':
return (date.date() == 1);
case 'week':
return (date.week() == 0); //TODO
return (date.week() % 4 == 0); // let's assume every 4th week is major
case 'month':
return (date.month() == 0);
case 'year':
Expand Down Expand Up @@ -650,11 +652,11 @@ TimeStep.prototype.getClassName = function() {
(this.step <= 2 ? today(current) : '') +
(this.step <= 2 ? ' vis-' + current.format('dddd').toLowerCase() : '' + even(current.date() - 1));

case 'week': //TODO
return 'vis-' + current.format('W').toLowerCase() +
currentMonth(current) +
even(current.month());
case 'week':
return 'vis-week' + current.format('w') +
currentWeek(current) +
even(current.week());

This comment has been minimized.

Sign in to view

Copy link
@knokit

knokit Apr 6, 2017

There's maybe a small problem here, with vis-even/vis-odd classes, or maybe not. :)
In the last/first week of the year, you might end up with 2 columns one after another with the same class.. not exactly sure how to solve it though.

case 'month':
return 'vis-' + current.format('MMMM').toLowerCase() +
currentMonth(current) +
Expand Down
6 changes: 5 additions & 1 deletion lib/timeline/optionsTimeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ let allOptions = {
hour: {string,'undefined': 'undefined'},
weekday: {string,'undefined': 'undefined'},
day: {string,'undefined': 'undefined'},
week: {string,'undefined': 'undefined'},
month: {string,'undefined': 'undefined'},
year: {string,'undefined': 'undefined'},
__type__: {object, 'function': 'function'}
Expand All @@ -61,6 +62,7 @@ let allOptions = {
hour: {string,'undefined': 'undefined'},
weekday: {string,'undefined': 'undefined'},
day: {string,'undefined': 'undefined'},
week: {string,'undefined': 'undefined'},
month: {string,'undefined': 'undefined'},
year: {string,'undefined': 'undefined'},
__type__: {object, 'function': 'function'}
Expand Down Expand Up @@ -177,6 +179,7 @@ let configureOptions = {
hour: 'HH:mm',
weekday: 'ddd D',
day: 'D',
week: 'w',
month: 'MMM',
year: 'YYYY'
},
Expand All @@ -187,6 +190,7 @@ let configureOptions = {
hour: 'ddd D MMMM',
weekday: 'MMMM YYYY',
day: 'MMMM YYYY',
week: 'w YYYY',
month: 'YYYY',
year: ''
}
Expand Down Expand Up @@ -232,7 +236,7 @@ let configureOptions = {
start: '',
//template: {'function': 'function'},
//timeAxis: {
// scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'],
// scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'],
// step: [1, 1, 10, 1]
//},
tooltip: {
Expand Down

0 comments on commit e9d82df

Please sign in to comment.