jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

updated and improved API for hidden dates with the repeat argument

v3_develop
Alex de Mulder 10 years ago
parent
808c979e25
commit
704755a29e
4 changed files with 4282 additions and 4278 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4133
    -4118
      dist/vis.js
  2. +4
    -33
      docs/timeline.html
  3. +15
    -12
      examples/timeline/29_hiding_times.html
  4. +130
    -115
      lib/timeline/DateUtil.js

+ 4133
- 4118
dist/vis.js
File diff suppressed because it is too large
View File


+ 4
- 33
docs/timeline.html View File

@ -483,41 +483,12 @@ var options = {
<td>hiddenDates</td> <td>hiddenDates</td>
<td>Object</td> <td>Object</td>
<td>none</td> <td>none</td>
<td>This option allows you to hide specific timespans from the time axis. For usage, look at the object definitions below.
<td>This option allows you to hide specific timespans from the time axis. The dates can be supplied as an object:
<code>{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']}</code> or as an Array of these objects. The repeat argument is optional.
The possible values are (case-sensitive): <code>daily, weekly, monthly, yearly</code>. To hide a weekend, pick any Saturday as start and the following Monday as end
and set repeat to weekly.
</td> </td>
</tr> </tr>
<tr>
<td>hiddenDates.specific</td>
<td>Array | Object</td>
<td>none</td>
<td>The specific hiddenDates are manually, fully defined dates that will be hidden from the timeline. The dates can be supplied as an object:
<code>{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'}</code> or as an Array of these objects.
</td>
</tr>
<tr>
<td>hiddenDates.periodic</td>
<td>Object</td>
<td>none</td>
<td>This option can be used to specify recurring days and times that have to be hidden from view (weekends, working hours etc.).
</td>
</tr>
<tr>
<td>hiddenDates.periodic.times</td>
<td>Array | Object</td>
<td>none</td>
<td>You can manually specify times which will then be hidden every day on the timeline. These are defined as an object: <code>{start:'20:00:00', end:'09:00:00'}</code>
or as an Array of these objects.
</td>
</tr>
<tr>
<td>hiddenDates.periodic.days</td>
<td>Array | Object</td>
<td>none</td>
<td>You can manually specify days which will then be hidden every week on the timeline. These are defined as an object: <code>{start:6, end:1}</code>
or as an Array of these objects. 1 stands for Monday and 7 stands for Sunday. So: <code>{start:6, end:1}</code> means hide Saturday and Sunday.
</td>
</tr>
<tr> <tr>
<td>locale</td> <td>locale</td>
<td>String</td> <td>String</td>

+ 15
- 12
examples/timeline/29_hiding_times.html View File

@ -14,8 +14,6 @@
</head> </head>
<body> <body>
<div id="visualization"></div> <div id="visualization"></div>
<div id="debug"></div>
<div id="debug2"></div>
<script type="text/javascript"> <script type="text/javascript">
// DOM element where the Timeline will be attached // DOM element where the Timeline will be attached
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
@ -32,16 +30,21 @@
// Configuration for the Timeline // Configuration for the Timeline
var options = { var options = {
hiddenDates: {
specific:[
{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
{start: '2014-03-05 00:00:00', end: '2014-03-10 00:00:00'}
],
periodic: {
times: [{start:'20:00:00', end:'09:00:00'}],
days: [{start: 6, end:1}] // 1 - 7 : Monday - Sunday
}
},
// hiddenDates: {
// specific:[
// {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
// {start: '2014-03-05 00:00:00', end: '2014-03-10 00:00:00'}
// ],
// periodic: {
// times: [{start:'20:00:00', end:'09:00:00'}],
// days: [{start: 6, end:1}] // 1 - 7 : Monday - Sunday
// }
// },
hiddenDates: [
{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
{start: '2013-03-29 00:00:00', end: '2013-03-31 00:00:00', repeat: "weekly"}, // daily weekly monthly yearly
{start: '2013-03-29 20:00:00', end: '2013-03-31 9:00:00', repeat: "daily"}, // daily weekly monthly yearly
],
start: '2014-04-17', start: '2014-04-17',
end: '2014-05-01', end: '2014-05-01',
height: '200px', height: '200px',

+ 130
- 115
lib/timeline/DateUtil.js View File

@ -10,146 +10,161 @@ var moment = require('../module/moment');
* @param Core * @param Core
*/ */
exports.convertHiddenOptions = function(body, hiddenDates) { exports.convertHiddenOptions = function(body, hiddenDates) {
var specificHiddenDates = hiddenDates.specific;
if (specificHiddenDates) {
if (Array.isArray(specificHiddenDates) == true) {
for (var i = 0; i < specificHiddenDates.length; i++) {
var dateItem = {};
dateItem.start = moment(specificHiddenDates[i].start).toDate().valueOf();
dateItem.end = moment(specificHiddenDates[i].end).toDate().valueOf();
body.hiddenDates.push(dateItem);
//var specificHiddenDates = hiddenDates.specific;
//if (specificHiddenDates) {
// if (Array.isArray(specificHiddenDates) == true) {
// for (var i = 0; i < specificHiddenDates.length; i++) {
// var dateItem = {};
// dateItem.start = moment(specificHiddenDates[i].start).toDate().valueOf();
// dateItem.end = moment(specificHiddenDates[i].end).toDate().valueOf();
// body.hiddenDates.push(dateItem);
// }
// body.hiddenDates.sort(function (a, b) {
// return a.start - b.start;
// }); // sort by start time
// }
// else {
// body.hiddenDates = [{
// start: moment(specificHiddenDates.start).toDate().valueOf(),
// end: moment(specificHiddenDates.end).toDate().valueOf()
// }
// ];
// }
//}
//
//// allowing multiple input formats
//var periodicHiddenDates = hiddenDates.periodic;
//if (periodicHiddenDates) {
// if (periodicHiddenDates.times) {
// if (Array.isArray(periodicHiddenDates.times) != true) {
// periodicHiddenDates.times = [periodicHiddenDates.times];
// }
// }
// if (periodicHiddenDates.days) {
// if (Array.isArray(periodicHiddenDates.days) != true) {
// periodicHiddenDates.days = [periodicHiddenDates.days];
// }
// }
//}
body.hiddenDates = [];
if (hiddenDates) {
if (Array.isArray(hiddenDates) == true) {
for (var i = 0; i < hiddenDates.length; i++) {
if (hiddenDates[i].repeat === undefined) {
var dateItem = {};
dateItem.start = moment(hiddenDates[i].start).toDate().valueOf();
dateItem.end = moment(hiddenDates[i].end).toDate().valueOf();
body.hiddenDates.push(dateItem);
}
} }
body.hiddenDates.sort(function (a, b) { body.hiddenDates.sort(function (a, b) {
return a.start - b.start; return a.start - b.start;
}); // sort by start time }); // sort by start time
} }
else {
body.hiddenDates = [{
start: moment(specificHiddenDates.start).toDate().valueOf(),
end: moment(specificHiddenDates.end).toDate().valueOf()
}
];
}
}
// allowing multiple input formats
var periodicHiddenDates = hiddenDates.periodic;
if (periodicHiddenDates) {
if (periodicHiddenDates.times) {
if (Array.isArray(periodicHiddenDates.times) != true) {
periodicHiddenDates.times = [periodicHiddenDates.times];
}
}
if (periodicHiddenDates.days) {
if (Array.isArray(periodicHiddenDates.days) != true) {
periodicHiddenDates.days = [periodicHiddenDates.days];
}
}
} }
}; };
/** /**
* create new entrees for the periodic hidden dates
* create new entrees for the repeating hidden dates
* @param body * @param body
* @param hiddenDates * @param hiddenDates
*/ */
exports.updateHiddenDates = function (body, hiddenDates) { exports.updateHiddenDates = function (body, hiddenDates) {
if (hiddenDates && hiddenDates.periodic && body.domProps.centerContainer.width !== undefined) {
body.hiddenDates = [];
if (hiddenDates && body.domProps.centerContainer.width !== undefined) {
exports.convertHiddenOptions(body, hiddenDates); exports.convertHiddenOptions(body, hiddenDates);
var start = moment(body.range.start); var start = moment(body.range.start);
var end = moment(body.range.end); var end = moment(body.range.end);
var totalRange = (body.range.end - body.range.start); var totalRange = (body.range.end - body.range.start);
var pixelTime = totalRange/body.domProps.centerContainer.width;
if (hiddenDates.periodic.days) {
var nextStartDay = moment(body.range.start);
var nextEndDay = moment(body.range.start);
for (var i = 0; i < hiddenDates.periodic.days.length; i++) {
var startDay = hiddenDates.periodic.days[i].start;
var endDay = hiddenDates.periodic.days[i].end;
nextStartDay.isoWeekday(startDay);
nextEndDay.isoWeekday(endDay);
if (start < nextStartDay) {
nextStartDay.isoWeekday(startDay - 7);
}
if (start < nextEndDay) {
nextEndDay.isoWeekday(endDay - 7);
}
nextStartDay.milliseconds(0);
nextStartDay.seconds(0);
nextStartDay.minutes(0);
nextStartDay.hours(0);
nextEndDay.milliseconds(0);
nextEndDay.seconds(0);
nextEndDay.minutes(0);
nextEndDay.hours(0);
if (nextEndDay < nextStartDay) {
nextEndDay.isoWeekday(endDay + 7);
}
var duration = nextEndDay - nextStartDay;
if (duration < 4 * pixelTime) {
break;
}
else {
while (nextStartDay < end) {
body.hiddenDates.push({start: nextStartDay.valueOf(), end: nextEndDay.valueOf()});
nextStartDay.isoWeekday(startDay + 7);
nextEndDay.isoWeekday(endDay + 7);
var pixelTime = totalRange / body.domProps.centerContainer.width;
for (var i = 0; i < hiddenDates.length; i++) {
if (hiddenDates[i].repeat !== undefined) {
var startDate = moment(hiddenDates[i].start);
var endDate = moment(hiddenDates[i].end);
var duration = endDate - startDate;
if (duration >= 4 * pixelTime) {
var offset = 0;
switch (hiddenDates[i].repeat) {
case "daily": // case of time
if (startDate.day() != endDate.day()) {
offset = 1;
}
startDate.day(start.day);
startDate.subtract(7,'days');
startDate.month(start.month());
startDate.year(start.year());
endDate.day(start.day);
endDate.subtract(7 + offset,'days');
endDate.month(start.month());
endDate.year(start.year());
break;
case "weekly":
if (startDate.week() != endDate.week()) {
offset = 1;
}
startDate.week(start.week() - 1)
startDate.year(start.year());
endDate.week(start.week() - 1 + offset)
endDate.year(start.year());
break
case "monthly":
if (startDate.month() != endDate.month()) {
offset = 1;
}
startDate.month(start.month() - 1)
startDate.year(start.year());
endDate.month(start.month() - 1 + offset)
endDate.year(start.year());
break;
case "yearly":
if (startDate.year() != endDate.year()) {
offset = 1;
}
startDate.year(start.year() - 1);
endDate.year(start.year() - 1 + offset);
break;
default:
console.log("Wrong repeat format, allowed are: daily, weekly, monthly, yearly. Given:", hiddenDates[i].repeat);
return;
} }
body.hiddenDates.push({start: nextStartDay.valueOf(), end: nextEndDay.valueOf()});
}
}
}
if (hiddenDates.periodic.times) {
var nextStartDay = moment(body.range.start);
var nextEndDay = moment(body.range.start);
end = end.valueOf();
for (var i = 0; i < hiddenDates.periodic.times.length; i++) {
var startTime = hiddenDates.periodic.times[i].start.split(":");
var endTime = hiddenDates.periodic.times[i].end.split(":");
nextStartDay.milliseconds(0);
nextStartDay.seconds(startTime[2]);
nextStartDay.minutes(startTime[1]);
nextStartDay.hours(startTime[0]);
nextEndDay.milliseconds(0);
nextEndDay.seconds(endTime[2]);
nextEndDay.minutes(endTime[1]);
nextEndDay.hours(endTime[0]);
nextStartDay = nextStartDay.valueOf();
nextEndDay = nextEndDay.valueOf();
if (endTime[0] < startTime[0]) {
nextEndDay += 3600000*24;
}
var duration = nextEndDay - nextStartDay;
if (duration < 4 * pixelTime) {
break;
}
else {
nextStartDay -= 7*3600000*24;
nextEndDay -= 7*3600000*24;
while (nextStartDay < (end + 7*3600000*24)) {
body.hiddenDates.push({start: nextStartDay.valueOf(), end: nextEndDay.valueOf()});
nextStartDay += 3600000*24;
nextEndDay += 3600000*24;
while (startDate < end) {
body.hiddenDates.push({start: startDate.valueOf(), end: endDate.valueOf()});
switch (hiddenDates[i].repeat) {
case "daily":
startDate.add(1, 'days');
endDate.add(1, 'days');
break;
case "weekly":
startDate.add(7, 'days');
endDate.add(7, 'days');
break
case "monthly":
startDate.add(1, 'months');
endDate.add(1, 'months');
break;
case "yearly":
startDate.add(1, 'y');
endDate.add(1, 'y');
break;
default:
console.log("Wrong repeat format, allowed are: daily, weekly, monthly, yearly. Given:", hiddenDates[i].repeat);
return;
}
} }
body.hiddenDates.push({start: startDate.valueOf(), end: endDate.valueOf()});
} }
} }
} }
// remove duplicates, merge where possible // remove duplicates, merge where possible
exports.removeDuplicates(body); exports.removeDuplicates(body);

Write Preview
Loading…
Cancel
Save