From 2b8fa4b58e45ce13b01a0b68c0eeac83ca009e83 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sun, 10 May 2015 15:01:19 +0100 Subject: [PATCH] Update examples to remove old foundation library --- angular-vis.js | 6 +- app-graph2d.js | 6 +- app.js | 563 +++++++++------------------------------------ index-graph2d.html | 125 +--------- index.html | 344 +-------------------------- 5 files changed, 119 insertions(+), 925 deletions(-) diff --git a/angular-vis.js b/angular-vis.js index 4d594a0..11cb2bb 100644 --- a/angular-vis.js +++ b/angular-vis.js @@ -20,7 +20,7 @@ angular.module('ngVis', []) data: '=', options: '=', events: '=', - component: '=' + component: '=?' }, link: function (scope, element, attr) { var timelineEvents = [ @@ -95,7 +95,7 @@ angular.module('ngVis', []) data: '=', options: '=', events: '=', - component: '=' + component: '=?' }, link: function (scope, element, attr) { var networkEvents = [ @@ -172,7 +172,7 @@ angular.module('ngVis', []) data: '=', options: '=', events: '=', - component: '=' + component: '=?' }, link: function (scope, element, attr) { var graphEvents = [ diff --git a/app-graph2d.js b/app-graph2d.js index 6d7c97c..05c6753 100644 --- a/app-graph2d.js +++ b/app-graph2d.js @@ -2,14 +2,13 @@ var ngVisApp = angular.module('ngVisApp', ['ngVis']); -ngVisApp.controller('appController', function ($scope, $location, $timeout, visDataSet) { +ngVisApp.controller('appController', function ($scope, $location, $timeout, VisDataSet) { var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded']; var groups = new vis.DataSet(); groups.add({ id: 0, content: names[0], - className: 'customStyle1', options: { drawPoints: { style: 'square' // square, circle @@ -22,7 +21,6 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, visD groups.add({ id: 1, content: names[1], - className: 'customStyle2', options: { style:'bar', drawPoints: {style: 'circle', @@ -42,7 +40,6 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, visD groups.add({ id: 3, content: names[3], - className: 'customStyle3', options: { yAxisOrientation: 'right', // right, left drawPoints: { @@ -53,7 +50,6 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, visD } }}); - var container = document.getElementById('visualization'); var items = [ {x: '2014-06-12', y: 0 , group: 0}, {x: '2014-06-13', y: 30, group: 0}, diff --git a/app.js b/app.js index 5c717d8..befc449 100644 --- a/app.js +++ b/app.js @@ -1,478 +1,135 @@ 'use strict'; -// TODO -// Use grunt or gulp for minimizing and distribution -// Documentation var ngVisApp = angular.module('ngVisApp', ['ngVis']); -ngVisApp.controller('appController', function ($scope, $location, $timeout, visDataSet) { +ngVisApp.controller('appController', function ($scope, $location, $timeout, VisDataSet) { - $scope.logs = {}; + $scope.logs = {}; - $scope.defaults = { - orientation: ['top', 'bottom'], - autoResize: [true, false], - showCurrentTime: [true, false], - showCustomTime: [true, false], - showMajorLabels: [true, false], - showMinorLabels: [true, false], - align: ['left', 'center', 'right'], - stack: [true, false], + $scope.defaults = { + orientation: ['top', 'bottom'], + autoResize: [true, false], + showCurrentTime: [true, false], + showCustomTime: [true, false], + showMajorLabels: [true, false], + showMinorLabels: [true, false], + align: ['left', 'center', 'right'], + stack: [true, false], - moveable: [true, false], - zoomable: [true, false], - selectable: [true, false], - editable: [true, false] - }; - - var options = { - align: 'center', // left | right (String) - autoResize: true, // false (Boolean) - editable: true, - selectable: true, - // start: null, - // end: null, - // height: null, - // width: '100%', - // margin: { - // axis: 20, - // item: 10 - // }, - // min: null, - // max: null, - // maxHeight: null, - orientation: 'bottom', - // padding: 5, - showCurrentTime: true, - showCustomTime: true, - showMajorLabels: true, - showMinorLabels: true - // type: 'box', // dot | point - // zoomMin: 1000, - // zoomMax: 1000 * 60 * 60 * 24 * 30 * 12 * 10, - // groupOrder: 'content' - }; - - var now = moment().minutes(0).seconds(0).milliseconds(0); - - var sampleData = function () { - return visDataSet([ - { id: 1, - content: ' item 1', - start: moment().add('days', 1), - className: 'magenta' }, - { id: 2, - content: 'visjs.org', - start: moment().add('days', 2) }, - { id: 3, - content: 'item 3', - start: moment().add('days', -2) }, - { id: 4, - content: 'item 4', - start: moment().add('days', 1), - end: moment().add('days', 3), - type: 'range' }, - { id: 7, - content: ' item 7', - start: moment().add('days', -3), - end: moment().add('days', -2), - type: 'range', - className: 'orange' }, - { id: 5, - content: 'item 5', - start: moment().add('days', -1), - type: 'point' }, - { id: 6, - content: 'item 6', - start: moment().add('days', 4), - type: 'point' } - ]); - }; - - $scope.setExample = function (example) { - $scope.example = example; - - $timeout(function () { $scope.timeline.clear({options: true}) }); - - switch (example) { + moveable: [true, false], + zoomable: [true, false], + selectable: [true, false], + editable: [true, false] + }; - case 'basicUsage': - $scope.data = sampleData(); + var options = { + align: 'center', // left | right (String) + autoResize: true, // false (Boolean) + editable: true, + selectable: true, + // start: null, + // end: null, + // height: null, + // width: '100%', + // margin: { + // axis: 20, + // item: 10 + // }, + // min: null, + // max: null, + // maxHeight: null, + orientation: 'bottom', + // padding: 5, + showCurrentTime: true, + showCustomTime: true, + showMajorLabels: true, + showMinorLabels: true + // type: 'box', // dot | point + // zoomMin: 1000, + // zoomMax: 1000 * 60 * 60 * 24 * 30 * 12 * 10, + // groupOrder: 'content' + }; - $scope.options = angular.extend(options, {}); - break; + var now = moment().minutes(0).seconds(0).milliseconds(0); + + var sampleData = function () { + return VisDataSet([ + { + id: 1, + content: ' item 1', + start: moment().add('days', 1), + className: 'magenta' + }, + { + id: 2, + content: 'visjs.org', + start: moment().add('days', 2) + }, + { + id: 3, + content: 'item 3', + start: moment().add('days', -2) + }, + { + id: 4, + content: 'item 4', + start: moment().add('days', 1), + end: moment().add('days', 3), + type: 'range' + }, + { + id: 7, + content: ' item 7', + start: moment().add('days', -3), + end: moment().add('days', -2), + type: 'range', + className: 'orange' + }, + { + id: 5, + content: 'item 5', + start: moment().add('days', -1), + type: 'point' + }, + { + id: 6, + content: 'item 6', + start: moment().add('days', 4), + type: 'point' + } + ]); + }; - case 'groups': - $scope.data = visDataSet({ - groups: [ + var groups = VisDataSet([ {id: 0, content: 'First', value: 1}, {id: 1, content: 'Third', value: 3}, {id: 2, content: 'Second', value: 2} - ], - items: [ + ]); + var items = VisDataSet([ {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)}, {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)}, {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)}, {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)}, {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)}, {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)} - ] - }); - - var orderedContent = 'content'; - var orderedSorting = function (a, b) { - // option groupOrder can be a property name or a sort function - // the sort function must compare two groups and return a value - // > 0 when a > b - // < 0 when a < b - // 0 when a == b - return a.value - b.value; - }; - - $scope.options = angular.extend(options, { - groupOrder: orderedContent, - editable: true - }); - break; - - - case 'points': - $scope.data = visDataSet([ - {start: new Date(1939, 8, 1), content: 'German Invasion of Poland'}, - {start: new Date(1940, 4, 10), content: 'Battle of France and the Low Countries'}, - {start: new Date(1940, 7, 13), content: 'Battle of Britain - RAF vs. Luftwaffe'}, - {start: new Date(1941, 1, 14), content: 'German Afrika Korps arrives in North Africa'}, - {start: new Date(1941, 5, 22), content: 'Third Reich Invades the USSR'}, - {start: new Date(1941, 11, 7), content: 'Japanese Attack Pearl Harbor'}, - {start: new Date(1942, 5, 4), content: 'Battle of Midway in the Pacific'}, - {start: new Date(1942, 10, 8), content: 'Americans open Second Front in North Africa'}, - {start: new Date(1942, 10, 19), content: 'Battle of Stalingrad in Russia'}, - {start: new Date(1943, 6, 5), content: 'Battle of Kursk - Last German Offensive on Eastern Front'}, - {start: new Date(1943, 6, 10), content: 'Anglo-American Landings in Sicily'}, - {start: new Date(1944, 2, 8), content: 'Japanese Attack British India'}, - {start: new Date(1944, 5, 6), content: 'D-Day - Allied Invasion of Normandy'}, - {start: new Date(1944, 5, 22), content: 'Destruction of Army Group Center in Byelorussia'}, - {start: new Date(1944, 7, 1), content: 'The Warsaw Uprising in Occupied Poland'}, - {start: new Date(1944, 9, 20), content: 'American Liberation of the Philippines'}, - {start: new Date(1944, 11, 16), content: 'Battle of the Bulge in the Ardennes'}, - {start: new Date(1944, 1, 19), content: 'American Landings on Iwo Jima'}, - {start: new Date(1945, 3, 1), content: 'US Invasion of Okinawa'}, - {start: new Date(1945, 3, 16), content: 'Battle of Berlin - End of the Third Reich'} ]); - $scope.options = angular.extend(options, { - // Set global item type. Type can also be specified for items individually - // Available types: 'box' (default), 'point', 'range', 'rangeoverflow' - type: 'point', - showMajorLabels: false - }); - break; - - - case 'aLotOfGroupedData': - $scope.groupCountValue = $scope.groupCountValue || 100; - - $scope.groupCount = function (count) { - var data = { - groups: [ - {id: 1, content: 'Truck 1'}, - {id: 2, content: 'Truck 2'}, - {id: 3, content: 'Truck 3'}, - {id: 4, content: 'Truck 4'} - ], - items: [] - }; - - var order = 1; - var truck = 1; - - for (var j = 0; j < 4; j++) { - var date = new Date(); - - for (var i = 0; i < count / 4; i++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4)); - var end = new Date(date); - - data.items.push({ - id: order, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - - order++; - } - - truck++; - } - - $scope.data = visDataSet(data); - }; - - $scope.groupCount($scope.groupCountValue); - - $scope.options = angular.extend(options, { - stack: false, - start: new Date(), - end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()), - editable: true, - margin: { - item: 10, // minimal margin between items - axis: 5 // minimal margin between items and the axis - }, - orientation: 'top' - }); - break; - - - case 'dataSerialization': - $scope.data = visDataSet([ - {"id": 1, "content": "item 1
start", "start": "2014-01-23"} -// , -// {"id": 2, "content": "item 2", "start": "2014-01-18"}, -// {"id": 3, "content": "item 3", "start": "2014-01-21"}, -// {"id": 4, "content": "item 4", "start": "2014-01-19", "end": "2014-01-24"}, -// {"id": 5, "content": "item 5", "start": "2014-01-28", "type": "point"}, -// {"id": 6, "content": "item 6", "start": "2014-01-26"} - ]); - - $scope.options = angular.extend(options, { - editable: true - }); - - $scope.loadData = function () { - var data = $scope.data.load.get({ - type: { - start: 'ISODate', - end: 'ISODate' - } - }); - - $timeout(function () { - $scope.serialized = JSON.stringify(data, null, 2); - }); - }; - - $scope.saveData = function () { - var txtData = document.getElementById('data'); - var data = JSON.parse(txtData.value); - - $scope.data.load.clear(); - $scope.data.load.update(data); - - $scope.timeline.fit(); - }; - - $scope.loadData(); - break; - } - - $timeout(function () { $scope.timeline.fit() }); - }; - - $scope.setView = function (view) { - $scope.page = { - introduction: false, - options: false, - events: false, - navigation: false - }; - - $scope.page[view] = true; - - switch (view) { - case 'introduction': - $scope.setExample('basicUsage'); - break; - case 'options': - $scope.setExample('basicUsage'); - break; - case 'events': - $scope.data = sampleData(); - - $scope.options = angular.extend(options, { - editable: true, - - onAdd: function (item, callback) { - item.content = prompt('Enter text content for new item:', item.content); - - if (item.content != null) { - callback(item); // send back adjusted new item - } - else { - callback(null); // cancel item creation - } - }, - - onMove: function (item, callback) { - if (confirm('Do you really want to move the item to\n' + - 'start: ' + item.start + '\n' + - 'end: ' + item.end + '?')) { - callback(item); // send back item as confirmation (can be changed - } - else { - callback(null); // cancel editing item - } - }, - - onUpdate: function (item, callback) { - item.content = prompt('Edit items text:', item.content); - - if (item.content != null) { - callback(item); // send back adjusted item - } - else { - callback(null); // cancel updating the item - } - }, - - onRemove: function (item, callback) { - if (confirm('Remove item ' + item.content + '?')) { - callback(item); // confirm deletion - } - else { - callback(null); // cancel deletion - } - } - }); - break; - case 'navigation': - $scope.setExample('basicUsage'); - break; - } - - $location.hash(view); - }; - - $scope.setView($location.hash() || 'introduction'); - - $timeout(function () { - $scope.events = { - rangechange: function (properties) { - $timeout(function () { - $scope.logs.rangechange = properties; - }); - }, - rangechanged: function (properties) { - $timeout(function () { - $scope.logs.rangechanged = properties; - }); - }, - timechange: function (properties) { - $timeout(function () { - $scope.logs.timechange = properties; - }); - }, - timechanged: function (properties) { - $timeout(function () { - $scope.logs.timechanged = properties; - }); - }, - select: function (properties) { - $timeout(function () { - $scope.logs.select = properties; - }); - } + $scope.data = {groups: groups, items: items}; + var orderedContent = 'content'; + var orderedSorting = function (a, b) { + // option groupOrder can be a property name or a sort function + // the sort function must compare two groups and return a value + // > 0 when a > b + // < 0 when a < b + // 0 when a == b + return a.value - b.value; }; - $scope.data.load.on('*', function (event, properties) { - $timeout(function () { - $scope.logs.items = { - event: event, - properties: properties - }; - }); - }); - }); -}); - - - - - - - -//case 'customTimeBar': -//$scope.customTime = moment().year() + '-' + -// parseInt(moment().month() + 1) + '-' + -// parseInt(moment().date() + 2); -// -//$scope.getCustomTime = function () { -// $scope.logs.customTime = $scope.timeline.getCustomTime(); -//}; -// -//$scope.data = visDataSet([]); -// -//$scope.options = angular.extend(options, { -// showCurrentTime: true, -// showCustomTime: true, -// start: new Date(Date.now() - 1000 * 60 * 60 * 24), -// end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6) -//}); -//break; - - - - - - - + $scope.options = angular.extend(options, { + groupOrder: orderedContent, + editable: true + }) -//case 'pastAndFuture': -//$scope.data = visDataSet([ -// { -// id: 1, -// start: new Date((new Date()).getTime() - 60 * 1000), -// end: new Date(), -// content: 'Dynamic event' -// } -//]); -// -//$scope.options = angular.extend(options, { -// showCurrentTime: true, -// showCustomTime: true -//}); -// -//$scope.events = { -// timechange: function (event) { -// $timeout(function () { -// $scope.logs.timechange = event.time; -// -// var item = $scope.data.load.get(1); -// -// if (moment(event.time).unix() > moment(item.start).unix()) { -// item.end = new Date(event.time); -// -// var now = new Date(); -// -// if (event.time < now) { -// item.content = "Dynamic event (past)"; -// item.className = 'past'; -// } -// else if (event.time > now) { -// item.content = "Dynamic event (future)"; -// item.className = 'future'; -// } -// else { -// item.content = "Dynamic event (now)"; -// item.className = 'now'; -// } -// -// $scope.data.load.update(item); -// } -// }); -// } -//}; -// -//$timeout(function () { -// // set a custom range from -2 minute to +3 minutes current time -// $scope.timeline.setWindow({ -// start: new Date((new Date()).getTime() - 2 * 60 * 1000), -// end: new Date((new Date()).getTime() + 3 * 60 * 1000) -// }); -//}); -//break; \ No newline at end of file +}) +; diff --git a/index-graph2d.html b/index-graph2d.html index f1f72bc..ccec3ff 100644 --- a/index-graph2d.html +++ b/index-graph2d.html @@ -5,134 +5,15 @@ AngularVis - - - - - - - - - - - - - \ No newline at end of file + + diff --git a/index.html b/index.html index ffb4a4a..1282d92 100644 --- a/index.html +++ b/index.html @@ -72,355 +72,15 @@ - + - -
-
-
- -

{{info.first}}

-
{{info.second}}
-
{{info.third}}
- -
-
-
- - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- -
-
-
-
- -
- - -
-
-
-

Configuration

-
    -
  • -
    Orientation
    - -
    • -
  • -
    Auto resize
    - -
    - - -
    -
    • -
  • -
    Current time
    - -
    - - -
    -
    • -
  • -
    Custom time
    - -
    - - -
    -
    • -
  • -
    Major labels
    - -
    - - -
    -
    • -
  • -
    Minor labels
    - -
    - - -
    -
    • -
  • -
    Align
    - -
    • -
  • -
    Stack
    - -
    - - -
    -
    • -

  • |
    • -
  • -
    Moveable
    - -
    - - -
    -
    • -
  • -
    Zoomable
    - -
    - - -
    -
    • -
  • -
    Selectable
    - -
    - - -
    -
    • -
  • -
    Editable
    - -
    - - -
    -
    • -
-
-
-
- -
- -
-
-
-
- -
-
-
- -
-
-
-

Basic Usage (Interactive)

- -

Drag items around, create new items, and remove items.

- -
-
-
-

Data

- 
{{data.load._data | json}}
 -
-
-
-
-

Options

- 
{{options | json}}
 -
-
-
- -
-
-

Groups

-
- -
-

Timeline grouping performance

- -

- Choose a number of items: - 10, - 100, - 1000, - 10000 - -

- -

Current number of items: {{groupCountValue}}

-
-
-

Serialization and de-serialization

- -
- - -
- -
-
-
- -
- -
-
-
-
-

Custom time bar

- -
-
-
-
-
- -
-
- Set custom time -
-
-
-
-
- -
-
- -
-
- {{logs.customTime | json}} -
-
-
-
-
-
-
-
Range change
-
- 
{{logs.rangechange}}
-
-
Range changed
-
- 
{{logs.rangechanged}}
-
-
Time change
-
- 
{{logs.timechange}}
-
-
Time changed
-
- 
{{logs.timechanged}}
-
-
Select
-
- 
{{logs.select}}
-
-
Items *
-
- 
{{logs.items}}
-
-
-
-
-
-
- -
-
- - - + \ No newline at end of file