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

Added support for Moment in the DataSet. Neatened the examples.

css_transitions
josdejong 11 years ago
parent
58a6831619
commit
f3d1a63f17
9 changed files with 105 additions and 39 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      examples/timeline/01_basic.html
  2. +12
    -14
      examples/timeline/02_dataset.html
  3. +7
    -13
      examples/timeline/03_much_data.html
  4. +0
    -0
      examples/timeline/requirejs/requirejs_example.html
  5. +0
    -0
      examples/timeline/requirejs/scripts/main.js
  6. +0
    -0
      examples/timeline/requirejs/scripts/require.js
  7. +41
    -4
      src/util.js
  8. +41
    -4
      vis.js
  9. +3
    -3
      vis.min.js

+ 1
- 1
examples/timeline/01_basic.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Timeline basic demo</title>
<title>Timeline | Basic demo</title>
<style type="text/css"> <style type="text/css">
body, html { body, html {

+ 12
- 14
examples/timeline/02_dataset.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Timeline demo</title>
<title>Timeline | Dataset example</title>
<style> <style>
body, html { body, html {
@ -14,10 +14,6 @@
width: 100%; width: 100%;
height: 300px; height: 300px;
} }
#visualization .itemset {
/*background: rgba(255, 255, 0, 0.5);*/
}
</style> </style>
<script src="../../vis.js"></script> <script src="../../vis.js"></script>
@ -26,8 +22,9 @@
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0); var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items
var data = new vis.DataSet({ var data = new vis.DataSet({
fieldTypes: { fieldTypes: {
start: 'Date', start: 'Date',
@ -35,18 +32,19 @@
} }
}); });
data.add([ data.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
{id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
{id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
{id: 4, content: 'item 4', start: now.clone().add('days', 0).toDate(), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
{id: 2, content: 'item 2', start: now.clone().add('days', -2)},
{id: 3, content: 'item 3', start: now.clone().add('days', 2)},
{id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11)}
]); ]);
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
start: now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 7).valueOf()
start: now.clone().add('days', -3),
end: now.clone().add('days', 7),
height: '100%'
}; };
var timeline = new vis.Timeline(container, data, options); var timeline = new vis.Timeline(container, data, options);

examples/timeline/04_a_lot_of_data.html → examples/timeline/03_much_data.html View File

@ -1,28 +1,21 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Timeline demo - a lot of data</title>
<title>Timeline | a lot of data</title>
<style> <style>
body, html { body, html {
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 11pt; font-size: 11pt;
} }
#visualization {
}
#visualization .itemset {
/*background: rgba(255, 255, 0, 0.5);*/
}
</style> </style>
<script src="../../vis.js"></script> <script src="../../vis.js"></script>
</head> </head>
<body> <body>
<p>
<h1>
Test with a lot of data Test with a lot of data
</p>
</h1>
<p> <p>
<label for="count">Number of items</label> <label for="count">Number of items</label>
<input id="count" value="100"> <input id="count" value="100">
@ -45,7 +38,7 @@
var count = parseInt(document.getElementById('count').value) || 100; var count = parseInt(document.getElementById('count').value) || 100;
var newData = []; var newData = [];
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i).toDate()});
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
} }
data.clear(); data.clear();
data.add(newData); data.add(newData);
@ -56,8 +49,9 @@
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
start: now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 11).valueOf()
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300, //maxHeight: 300,
//height: '300px', //height: '300px',
//orientation: 'top' //orientation: 'top'

examples/timeline/03_requirejs/03_requirejs.html → examples/timeline/requirejs/requirejs_example.html View File


examples/timeline/03_requirejs/scripts/main.js → examples/timeline/requirejs/scripts/main.js View File


examples/timeline/03_requirejs/scripts/require.js → examples/timeline/requirejs/scripts/require.js View File


+ 41
- 4
src/util.js View File

@ -94,15 +94,18 @@ util.extend = function (a, b) {
/** /**
* Cast an object to another type * Cast an object to another type
* @param {Boolean | Number | String | Date | Null | undefined} object
* @param {Boolean | Number | String | Date | Moment | Null | undefined} object
* @param {String | function | undefined} type Name of the type or a cast * @param {String | function | undefined} type Name of the type or a cast
* function. Available types: * function. Available types:
* 'Boolean', 'Number', 'String', * 'Boolean', 'Number', 'String',
* 'Date', ISODate', 'ASPDate'.
* 'Date', 'Moment', ISODate',
* 'ASPDate'.
* @return {*} object * @return {*} object
* @throws Error * @throws Error
*/ */
util.cast = function cast(object, type) { util.cast = function cast(object, type) {
var match;
if (object === undefined) { if (object === undefined) {
return undefined; return undefined;
} }
@ -138,13 +141,16 @@ util.cast = function cast(object, type) {
if (object instanceof Date) { if (object instanceof Date) {
return new Date(object.valueOf()); return new Date(object.valueOf());
} }
else if (moment.isMoment(object)) {
return new Date(object.valueOf());
}
if (util.isString(object)) { if (util.isString(object)) {
// parse ASP.Net Date pattern, // parse ASP.Net Date pattern,
// for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/' // for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/'
// code from http://momentjs.com/ // code from http://momentjs.com/
var match = ASPDateRegex.exec(object);
match = ASPDateRegex.exec(object);
if (match) { if (match) {
return new Date(Number(match[1]));
return new Date(Number(match[1])); // parse number
} }
else { else {
return moment(object).toDate(); // parse string return moment(object).toDate(); // parse string
@ -156,10 +162,41 @@ util.cast = function cast(object, type) {
' to type Date'); ' to type Date');
} }
case 'Moment':
if (util.isNumber(object)) {
return moment(object);
}
if (object instanceof Date) {
return moment(object.valueOf());
}
else if (moment.isMoment(object)) {
return moment.clone();
}
if (util.isString(object)) {
// parse ASP.Net Date pattern,
// for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/'
// code from http://momentjs.com/
match = ASPDateRegex.exec(object);
if (match) {
return moment(Number(match[1])); // parse number
}
else {
return moment(object); // parse string
}
}
else {
throw new Error(
'Cannot cast object of type ' + util.getType(object) +
' to type Date');
}
case 'ISODate': case 'ISODate':
if (object instanceof Date) { if (object instanceof Date) {
return object.toISOString(); return object.toISOString();
} }
else if (moment.isMoment(object)) {
return object.toDate().toISOString();
}
else if (util.isNumber(object) || util.isString(object)) { else if (util.isNumber(object) || util.isString(object)) {
return moment(object).toDate().toISOString(); return moment(object).toDate().toISOString();
} }

+ 41
- 4
vis.js View File

@ -125,15 +125,18 @@ util.extend = function (a, b) {
/** /**
* Cast an object to another type * Cast an object to another type
* @param {Boolean | Number | String | Date | Null | undefined} object
* @param {Boolean | Number | String | Date | Moment | Null | undefined} object
* @param {String | function | undefined} type Name of the type or a cast * @param {String | function | undefined} type Name of the type or a cast
* function. Available types: * function. Available types:
* 'Boolean', 'Number', 'String', * 'Boolean', 'Number', 'String',
* 'Date', ISODate', 'ASPDate'.
* 'Date', 'Moment', ISODate',
* 'ASPDate'.
* @return {*} object * @return {*} object
* @throws Error * @throws Error
*/ */
util.cast = function cast(object, type) { util.cast = function cast(object, type) {
var match;
if (object === undefined) { if (object === undefined) {
return undefined; return undefined;
} }
@ -169,13 +172,16 @@ util.cast = function cast(object, type) {
if (object instanceof Date) { if (object instanceof Date) {
return new Date(object.valueOf()); return new Date(object.valueOf());
} }
else if (moment.isMoment(object)) {
return new Date(object.valueOf());
}
if (util.isString(object)) { if (util.isString(object)) {
// parse ASP.Net Date pattern, // parse ASP.Net Date pattern,
// for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/' // for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/'
// code from http://momentjs.com/ // code from http://momentjs.com/
var match = ASPDateRegex.exec(object);
match = ASPDateRegex.exec(object);
if (match) { if (match) {
return new Date(Number(match[1]));
return new Date(Number(match[1])); // parse number
} }
else { else {
return moment(object).toDate(); // parse string return moment(object).toDate(); // parse string
@ -187,10 +193,41 @@ util.cast = function cast(object, type) {
' to type Date'); ' to type Date');
} }
case 'Moment':
if (util.isNumber(object)) {
return moment(object);
}
if (object instanceof Date) {
return moment(object.valueOf());
}
else if (moment.isMoment(object)) {
return moment.clone();
}
if (util.isString(object)) {
// parse ASP.Net Date pattern,
// for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/'
// code from http://momentjs.com/
match = ASPDateRegex.exec(object);
if (match) {
return moment(Number(match[1])); // parse number
}
else {
return moment(object); // parse string
}
}
else {
throw new Error(
'Cannot cast object of type ' + util.getType(object) +
' to type Date');
}
case 'ISODate': case 'ISODate':
if (object instanceof Date) { if (object instanceof Date) {
return object.toISOString(); return object.toISOString();
} }
else if (moment.isMoment(object)) {
return object.toDate().toISOString();
}
else if (util.isNumber(object) || util.isString(object)) { else if (util.isNumber(object) || util.isString(object)) {
return moment(object).toDate().toISOString(); return moment(object).toDate().toISOString();
} }

+ 3
- 3
vis.min.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save