Squashed 'lib/vis/' content from commit 1d029ca

git-subtree-dir: lib/vis git-subtree-split: 1d029cab7b527f3b292e95d550efbf784dac8699
2026-07-27 16:08:55 +02:00 · 2015-03-28 13:50:19 +00:00
commit 35db670c97
389 changed files with 124384 additions and 0 deletions
@@ -0,0 +1,166 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title></title>
+  <script src="../node_modules/moment/moment.js"></script>
+  <script src="../node_modules/moment/locale/nl.js"></script>
+  <script>
+    moment.locale('nl');
+  </script>
+  <script src="../dist/vis.js"></script>
+  <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+
+    #visualization .itemset {
+      /*background: rgba(255, 255, 0, 0.5);*/
+    }
+
+    #visualization .grid.vertical.odd {
+      background: #f5f5f5;
+    }
+
+    #visualization .grid.vertical.saturday,
+    #visualization .grid.vertical.sunday {
+      background: #ffef9f;
+    }
+
+    #visualization .text.saturday,
+    #visualization .text.sunday {
+      color: #ff7c02;
+    }
+  </style>
+
+</head>
+<body>
+
+<div>
+  <label for="orientation">Orientation</label>
+  <select id="orientation">
+    <option value="top">top</option>
+    <option value="bottom" selected>bottom</option>
+  </select>
+</div>
+<script>
+  var o = document.getElementById('orientation');
+  o.onchange = function () {
+    timeline.setOptions({
+      orientation: o.value
+    });
+  };
+</script>
+
+<div>
+  <label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label>
+</div>
+<script>
+  var currenttime = document.getElementById('currenttime');
+  currenttime.onchange = function () {
+    timeline.setOptions({
+      showCurrentTime: currenttime.checked
+    });
+  };
+</script>
+
+<br>
+
+<div id="visualization"></div>
+
+<script>
+  console.time('create dataset');
+
+  // create a dataset with items
+  var now = moment().minutes(0).seconds(0).milliseconds(0);
+  var items = new vis.DataSet({
+    type: {
+      start: 'ISODate',
+      end: 'ISODate'
+    },
+    fieldId: '_id'
+  });
+  items.add([
+    {_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
+    {_id: '1', content: 'item 1<br>start', start: now.clone().add(4, 'days').toDate()},
+    {_id: 2, content: '<a href="javascript: alert(\'you clicked an anchor\');">Click here! (anchor)</a><br><br>' +
+        '<div onclick="alert(\'you clicked a div\');   ">Click here! (div)</div>', start: now.clone().add(-2, 'days').toDate() },
+    {_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
+    {
+      _id: 4, content: 'item 4 foo bar foo bar foo bar foo bar foo bar',
+      start: now.clone().add(0, 'days').toDate(),
+      end: now.clone().add(7, 'days').toDate(),
+      title: 'hello title!'
+    },
+    {_id: 5, content: 'item 5', start: now.clone().add(9, 'days').toDate(), type:'point', title: 'hello title!'},
+    {_id: 6, content: 'item 6', start: now.clone().add(11, 'days').toDate()}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    editable: true,
+    //orientation: 'top',
+    orientation: 'both',
+    start: now.clone().add(-7, 'days'),
+    end: now.clone().add(7, 'days'),
+    //maxHeight: 200,
+    //height: 200,
+    showCurrentTime: true,
+    showCustomTime: true,
+    format: {
+      minorLabels: {
+        'weekday':    'dddd D',
+        'month': 'MMMM'
+      },
+      majorLabels: {
+        'minute':     'dddd D MMMM',
+        'hour':       'dddd D MMMM'
+      }
+    }
+//    timeAxis: {
+//      scale: 'hour',
+//      step: 2
+//    }
+    //clickToUse: true,
+    //min: moment('2013-01-01'),
+    //max: moment('2013-12-31'),
+    //zoomMin: 1000 * 60 * 60 * 24,            // 1 day
+    //zoomMax: 1000 * 60 * 60 * 24 * 30 * 6     // 6 months
+  };
+
+  console.timeEnd('create dataset');
+
+  console.time('create timeline');
+  var timeline = new vis.Timeline(container, items, options);
+  console.timeEnd('create timeline');
+
+  timeline.on('select', function (selection) {
+    console.log('select', selection);
+  });
+
+  timeline.on('click', function (props) {
+    console.log('click', props);
+  });
+
+  timeline.on('contextmenu', function (props) {
+    console.log('contextmenu', props);
+  });
+
+  /*
+   timeline.on('rangechange', function (range) {
+   console.log('rangechange', range);
+   });
+   timeline.on('rangechanged', function (range) {
+   console.log('rangechanged', range);
+   });
+   */
+
+  items.on('add',    console.log.bind(console));
+  items.on('update', console.log.bind(console));
+  items.on('remove', console.log.bind(console));
+
+</script>
+</body>
+</html>