Skip to content

Commit 364daa5

Browse files
author
lvargas
committed
changes:
* add dependencies to `package.json` * add requirejs sample * make `angular-vis.js` UMD * add `node_modules` to `.gitignore`
1 parent e8d2a6e commit 364daa5

File tree

8 files changed

+320
-21
lines changed

8 files changed

+320
-21
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
.idea
22
bower_components/
3+
node_modules
4+
/yarn.lock

‎.npmignore

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1+
.idea
12
bower_components
3+
node_modules
4+
/yarn.lock
5+
/bower.json
6+
/index-graph2d.html
7+
/app-graph2d.js
8+
/index.html
9+
/app.js
10+
/app_requirejs.js
11+
/index_requirejs.html

‎angular-vis.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1-
angular.module('ngVis', [])
1+
(function (root, factory) {
2+
if (typeof define === 'function' && define.amd) {
3+
// AMD. Register as an anonymous module.
4+
define('angular-visjs', ['angular', 'vis'], factory);
5+
} else if (typeof module === 'object' && module.exports) {
6+
// Node. Does not work with strict CommonJS, but
7+
// only CommonJS-like environments that support module.exports,
8+
// like Node.
9+
module.exports = factory(require('angular'), require('vis'));
10+
} else {
11+
// Browser globals (root is window)
12+
root.returnExports = factory(root.angular, root.vis);
13+
}
14+
}(this, function (angular, vis) {
15+
16+
return angular.module('ngVis', [])
217

318
.factory('VisDataSet', function () {
419
'use strict';
@@ -224,4 +239,5 @@ angular.module('ngVis', [])
224239
}
225240
};
226241
})
227-
;
242+
.name;
243+
}));

‎app.js

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
1111
orientation: ['top', 'bottom'],
1212
autoResize: [true, false],
1313
showCurrentTime: [true, false],
14-
showCustomTime: [true, false],
14+
// showCustomTime: [true, false],
1515
showMajorLabels: [true, false],
1616
showMinorLabels: [true, false],
1717
align: ['left', 'center', 'right'],
@@ -42,7 +42,7 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
4242
orientation: 'bottom',
4343
// padding: 5,
4444
showCurrentTime: true,
45-
showCustomTime: true,
45+
// showCustomTime: true,
4646
showMajorLabels: true,
4747
showMinorLabels: true
4848
// type: 'box', // dot | point
@@ -102,18 +102,18 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
102102
};
103103

104104
var groups = VisDataSet([
105-
{id: 0, content: 'First', value: 1},
106-
{id: 1, content: 'Third', value: 3},
107-
{id: 2, content: 'Second', value: 2}
108-
]);
105+
{id: 0, content: 'First', value: 1},
106+
{id: 1, content: 'Third', value: 3},
107+
{id: 2, content: 'Second', value: 2}
108+
]);
109109
var items = VisDataSet([
110-
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
111-
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
112-
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
113-
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
114-
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
115-
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
116-
]);
110+
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
111+
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
112+
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
113+
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
114+
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
115+
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
116+
]);
117117

118118
$scope.data = {groups: groups, items: items};
119119
var orderedContent = 'content';
@@ -129,7 +129,7 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
129129
$scope.options = angular.extend(options, {
130130
groupOrder: orderedContent,
131131
editable: true
132-
})
132+
});
133133

134134
$scope.onSelect = function (items) {
135135
// debugger;
@@ -152,14 +152,13 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
152152
};
153153

154154
$scope.events = {
155-
rangechange: $scope.onRangeChange,
156-
rangechanged: $scope.onRangeChanged,
155+
// rangechange: $scope.onRangeChange,
156+
// rangechanged: $scope.onRangeChanged,
157157
onload: $scope.onLoaded,
158158
select: $scope.onSelect,
159159
click: $scope.onClick,
160160
doubleClick: $scope.onDoubleClick,
161161
contextmenu: $scope.rightClick
162162
};
163163

164-
})
165-
;
164+
});

‎app_requirejs.js

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
require.config({
2+
paths: {
3+
angular: 'node_modules/angular/angular',
4+
'angular-visjs': 'angular-vis',
5+
vis: 'node_modules/vis/dist/vis',
6+
moment: 'node_modules/moment/moment'
7+
},
8+
shim: {
9+
angular: {exports: 'angular'}
10+
}
11+
});
12+
13+
require(['angular', 'angular-visjs', 'moment'], (angular, ngVis, moment) => {
14+
15+
'use strict';
16+
17+
18+
var ngVisApp = angular.module('ngVisApp', [ngVis]);
19+
20+
ngVisApp.controller('appController', function ($scope, $location, $timeout, VisDataSet) {
21+
22+
$scope.logs = {};
23+
24+
$scope.defaults = {
25+
orientation: ['top', 'bottom'],
26+
autoResize: [true, false],
27+
showCurrentTime: [true, false],
28+
// showCustomTime: [true, false],
29+
showMajorLabels: [true, false],
30+
showMinorLabels: [true, false],
31+
align: ['left', 'center', 'right'],
32+
stack: [true, false],
33+
34+
moveable: [true, false],
35+
zoomable: [true, false],
36+
selectable: [true, false],
37+
editable: [true, false]
38+
};
39+
40+
var options = {
41+
align: 'center', // left | right (String)
42+
autoResize: true, // false (Boolean)
43+
editable: true,
44+
selectable: true,
45+
// start: null,
46+
// end: null,
47+
// height: null,
48+
// width: '100%',
49+
// margin: {
50+
// axis: 20,
51+
// item: 10
52+
// },
53+
// min: null,
54+
// max: null,
55+
// maxHeight: null,
56+
orientation: 'bottom',
57+
// padding: 5,
58+
showCurrentTime: true,
59+
// showCustomTime: true,
60+
showMajorLabels: true,
61+
showMinorLabels: true
62+
// type: 'box', // dot | point
63+
// zoomMin: 1000,
64+
// zoomMax: 1000 * 60 * 60 * 24 * 30 * 12 * 10,
65+
// groupOrder: 'content'
66+
};
67+
68+
var now = moment().minutes(0).seconds(0).milliseconds(0);
69+
70+
var sampleData = function () {
71+
return VisDataSet([
72+
{
73+
id: 1,
74+
content: '<i class="fi-flag"></i> item 1',
75+
start: moment().add('days', 1),
76+
className: 'magenta'
77+
},
78+
{
79+
id: 2,
80+
content: '<a href="http://visjs.org" target="_blank">visjs.org</a>',
81+
start: moment().add('days', 2)
82+
},
83+
{
84+
id: 3,
85+
content: 'item 3',
86+
start: moment().add('days', -2)
87+
},
88+
{
89+
id: 4,
90+
content: 'item 4',
91+
start: moment().add('days', 1),
92+
end: moment().add('days', 3),
93+
type: 'range'
94+
},
95+
{
96+
id: 7,
97+
content: '<i class="fi-anchor"></i> item 7',
98+
start: moment().add('days', -3),
99+
end: moment().add('days', -2),
100+
type: 'range',
101+
className: 'orange'
102+
},
103+
{
104+
id: 5,
105+
content: 'item 5',
106+
start: moment().add('days', -1),
107+
type: 'point'
108+
},
109+
{
110+
id: 6,
111+
content: 'item 6',
112+
start: moment().add('days', 4),
113+
type: 'point'
114+
}
115+
]);
116+
};
117+
118+
var groups = VisDataSet([
119+
{id: 0, content: 'First', value: 1},
120+
{id: 1, content: 'Third', value: 3},
121+
{id: 2, content: 'Second', value: 2}
122+
]);
123+
var items = VisDataSet([
124+
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
125+
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
126+
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
127+
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
128+
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
129+
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
130+
]);
131+
132+
$scope.data = {groups: groups, items: items};
133+
var orderedContent = 'content';
134+
var orderedSorting = function (a, b) {
135+
// option groupOrder can be a property name or a sort function
136+
// the sort function must compare two groups and return a value
137+
// > 0 when a > b
138+
// < 0 when a < b
139+
// 0 when a == b
140+
return a.value - b.value;
141+
};
142+
143+
$scope.options = angular.extend(options, {
144+
groupOrder: orderedContent,
145+
editable: true
146+
});
147+
148+
$scope.onSelect = function (items) {
149+
// debugger;
150+
alert('select');
151+
};
152+
153+
$scope.onClick = function (props) {
154+
//debugger;
155+
alert('Click');
156+
};
157+
158+
$scope.onDoubleClick = function (props) {
159+
// debugger;
160+
alert('DoubleClick');
161+
};
162+
163+
$scope.rightClick = function (props) {
164+
alert('Right click!');
165+
props.event.preventDefault();
166+
};
167+
168+
$scope.events = {
169+
// rangechange: $scope.onRangeChange,
170+
// rangechanged: $scope.onRangeChanged,
171+
onload: $scope.onLoaded,
172+
select: $scope.onSelect,
173+
click: $scope.onClick,
174+
doubleClick: $scope.onDoubleClick,
175+
contextmenu: $scope.rightClick
176+
};
177+
178+
});
179+
180+
angular.bootstrap(document, [ngVisApp.name]);
181+
182+
});

‎bower.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,8 @@
2323
"angular": "~1.5.0",
2424
"vis": "~4.16.0",
2525
"moment": "^2.15.1"
26+
},
27+
"devDependencies": {
28+
"requirejs": "^2.3.2"
2629
}
2730
}

‎index_requirejs.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!doctype html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>AngularVis</title>
7+
<link rel="stylesheet" href="node_modules/vis/dist/vis.min.css"/>
8+
<style>
9+
#showcase {
10+
padding: 30px;
11+
background-color: #fbfbfb;
12+
}
13+
14+
.fluid {
15+
width: 100%;
16+
max-width: 100%;
17+
}
18+
19+
.vis.timeline {
20+
background-color: #ffffff;
21+
}
22+
23+
.vis.timeline .item {
24+
/*background-color: #008CBA;*/
25+
/*border-color: #008CBA;*/
26+
/*color: #ffffff;*/
27+
/*font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;*/
28+
/*font-kerning: auto;*/
29+
/*font-size: 13px;*/
30+
/*font-style: normal;*/
31+
/*font-variant: normal;*/
32+
/*font-variant-ligatures: normal;*/
33+
/*font-weight: normal;*/
34+
}
35+
36+
.vis.timeline .item.green {
37+
background-color: green;
38+
border-color: green;
39+
color: #ffffff;
40+
}
41+
42+
.vis.timeline .item.red {
43+
background-color: red;
44+
border-color: red;
45+
color: #ffffff;
46+
}
47+
48+
.vis.timeline .item.orange {
49+
background-color: orange;
50+
border-color: orange;
51+
}
52+
53+
.vis.timeline .item.magenta {
54+
background-color: magenta;
55+
border-color: magenta;
56+
color: #ffffff;
57+
}
58+
59+
.vis.timeline .item.past {
60+
filter: alpha(opacity=50);
61+
opacity: 0.5;
62+
}
63+
64+
h6 {
65+
font-size: 0.75rem;
66+
}
67+
68+
pre {
69+
font-size: 0.9rem;
70+
}
71+
</style>
72+
<script data-main="app_requirejs.js" src="node_modules/requirejs/require.js"></script>
73+
</head>
74+
<body ng-controller="appController">
75+
76+
<vis-timeline data="data" options="options" events="events"></vis-timeline>
77+
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)