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

Css is now packages in the js file.

css_transitions
josdejong 11 years ago
parent
145e2c827e
commit
8a67a9f172
15 changed files with 196 additions and 210 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -0
      HISTORY.md
  2. +17
    -12
      Jakefile.js
  3. +1
    -3
      README.md
  4. +0
    -1
      examples/timeline/01_basic.html
  5. +1
    -7
      examples/timeline/02_dataset.html
  6. +1
    -2
      src/component/item/itembox.js
  7. +1
    -1
      src/component/item/itempoint.js
  8. +2
    -1
      src/component/itemset.js
  9. +9
    -6
      src/component/timeaxis.js
  10. +25
    -0
      src/module.js
  11. +39
    -8
      src/util.js
  12. +2
    -2
      test/timeline.html
  13. +0
    -142
      vis.css
  14. +81
    -20
      vis.js
  15. +5
    -5
      vis.min.js

+ 12
- 0
HISTORY.md View File

@ -0,0 +1,12 @@
vis.js history
http://visjs.org
##
- Css is now packaged in the javascript file, and automatically loaded.
## 2012-04-16, version 0.0.5
- First working version of the Timeline
- Website created.

+ 17
- 12
Jakefile.js View File

@ -22,7 +22,18 @@ desc('Build the visualization library vis.js');
task('vis', function () {
var VIS = './vis.js';
var VIS_MIN = './vis.min.js';
var VIS_CSS = './vis.css';
// concatenate and stringify css files
var result = concat({
src: [
'./src/component/css/panel.css',
'./src/component/css/item.css',
'./src/component/css/timeaxis.css'
],
header: '/* vis.js stylesheet */',
separator: '\n'
});
var cssText = JSON.stringify(result.code);
// concatenate the script files
concat({
@ -36,6 +47,7 @@ task('vis', function () {
'./src/stack.js',
'./src/range.js',
'./src/controller.js',
'./src/module.js',
'./src/component/component.js',
'./src/component/panel.js',
@ -48,18 +60,11 @@ task('vis', function () {
'./lib/moment.js'
],
separator: '\n'
});
separator: '\n',
// concatenate the css files
concat({
dest: VIS_CSS,
src: [
'./src/component/css/panel.css',
'./src/component/css/item.css',
'./src/component/css/timeaxis.css'
],
separator: '\n'
// Note: we insert the css as a string in the javascript code here
// the css will be injected on load of the javascript library
footer: 'loadCss(' + cssText + ');'
});
// minify javascript

+ 1
- 3
README.md View File

@ -23,11 +23,10 @@ Or download the library from the github project:
## Load
To use a component, include the javascript and css file of vis in your webpage.
To use a component, include the javascript file of vis in your webpage.
```html
<script src="components/vis/vis.js"></script>
<link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
```
A timeline can be instantiated as:
@ -53,7 +52,6 @@ of the project.
<head>
<title>Timeline basic demo</title>
<script src="components/vis/vis.js"></script>
<link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {

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

@ -3,7 +3,6 @@
<head>
<title>Timeline basic demo</title>
<script src="../../vis.js"></script>
<link href="../../vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {

+ 1
- 7
examples/timeline/02_dataset.html View File

@ -2,22 +2,16 @@
<html>
<head>
<title>Timeline demo</title>
<script src="../timeline.js"></script>
<link href="../timeline.css" rel="stylesheet" type="text/css" />
<script src="../../vis.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: arial, sans-serif;
font-size: 12pt;
}
#visualization {
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 300px;
}

+ 1
- 2
src/component/item/itembox.js View File

@ -164,7 +164,6 @@ ItemBox.prototype.reflow = function () {
changed += update(props.line, 'width', dom.line.offsetWidth);
changed += update(this, 'width', dom.box.offsetWidth);
changed += update(this, 'height', dom.box.offsetHeight);
if (align == 'right') {
left = start - this.width;
}
@ -260,7 +259,7 @@ ItemBox.prototype.reposition = function () {
// orientation 'bottom'
line.style.top = props.line.top + 'px';
line.style.top = (this.top + this.height) + 'px';
line.style.height = (props.dot.top - this.top - this.height) + 'px';
line.style.height = Math.max(props.dot.top - this.top - this.height, 0) + 'px';
}

+ 1
- 1
src/component/item/itempoint.js View File

@ -147,7 +147,7 @@ ItemPoint.prototype.reflow = function () {
else {
// default or 'bottom'
var parentHeight = this.parent.height;
top = parentHeight - this.height - options.margin.axis;
top = Math.max(parentHeight - this.height - options.margin.axis, 0);
}
changed += update(this, 'top', top);
changed += update(this, 'left', start - props.dot.width / 2);

+ 2
- 1
src/component/itemset.js View File

@ -412,5 +412,6 @@ ItemSet.prototype.toTime = function(x) {
*/
ItemSet.prototype.toScreen = function(time) {
var conversion = this.conversion;
return (time.valueOf() - conversion.offset) * conversion.factor;
var s = (time.valueOf() - conversion.offset) * conversion.factor;
return s;
};

+ 9
- 6
src/component/timeaxis.js View File

@ -30,7 +30,8 @@ function TimeAxis (parent, depends, options) {
start: 0,
end: 0,
minimumStep: 0
}
},
lineTop: 0
};
this.options = {
@ -127,7 +128,9 @@ TimeAxis.prototype.repaint = function () {
parent.removeChild(frame); // take frame offline while updating (is almost twice as fast)
var orientation = options.orientation;
var defaultTop = (orientation == 'bottom') ? (this.props.parentHeight - this.height) + 'px' : '0px';
var defaultTop = (orientation == 'bottom' && this.props.parentHeight && this.height) ?
(this.props.parentHeight - this.height) + 'px' :
'0px';
changed += update(frame.style, 'top', asSize(options.top, defaultTop));
changed += update(frame.style, 'left', asSize(options.left, '0px'));
changed += update(frame.style, 'width', asSize(options.width, '100%'));
@ -446,11 +449,11 @@ TimeAxis.prototype.reflow = function () {
props.majorLabelTop = props.minorLabelTop + props.minorLabelHeight;
props.minorLineTop = -this.top;
props.minorLineHeight = this.top + props.majorLabelHeight;
props.minorLineHeight = Math.max(this.top + props.majorLabelHeight, 0);
props.minorLineWidth = 1; // TODO: really calculate width
props.majorLineTop = -this.top;
props.majorLineHeight = this.top + props.minorLabelHeight + props.majorLabelHeight;
props.majorLineHeight = Math.max(this.top + props.minorLabelHeight + props.majorLabelHeight, 0);
props.majorLineWidth = 1; // TODO: really calculate width
props.lineTop = 0;
@ -465,11 +468,11 @@ TimeAxis.prototype.reflow = function () {
props.minorLabelTop = props.majorLabelTop + props.majorLabelHeight;
props.minorLineTop = props.minorLabelTop;
props.minorLineHeight = parentHeight - props.majorLabelHeight - this.top;
props.minorLineHeight = Math.max(parentHeight - props.majorLabelHeight - this.top);
props.minorLineWidth = 1; // TODO: really calculate width
props.majorLineTop = 0;
props.majorLineHeight = parentHeight - this.top;
props.majorLineHeight = Math.max(parentHeight - this.top);
props.majorLineWidth = 1; // TODO: really calculate width
props.lineTop = props.majorLabelHeight + props.minorLabelHeight;

+ 25
- 0
src/module.js View File

@ -0,0 +1,25 @@
/**
* load css from contents
* @param {String} css
*/
var loadCss = function (css) {
// get the script location, and built the css file name from the js file name
// http://stackoverflow.com/a/2161748/1262753
var scripts = document.getElementsByTagName('script');
var jsFile = scripts[scripts.length-1].src.split('?')[0];
// var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
// inject css
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
};

+ 39
- 8
src/util.js View File

@ -146,7 +146,7 @@ util.cast = function cast(object, type) {
return new Date(Number(match[1]));
}
else {
return new Date(object);
return moment(object).toDate(); // parse string
}
}
else {
@ -159,8 +159,8 @@ util.cast = function cast(object, type) {
if (object instanceof Date) {
return object.toISOString();
}
else if (util.isNumber(object) || util.isString(Object)) {
return (new Date(object)).toISOString()
else if (util.isNumber(object) || util.isString(object)) {
return moment(object).toDate().toISOString();
}
else {
throw new Error(
@ -172,8 +172,8 @@ util.cast = function cast(object, type) {
if (object instanceof Date) {
return '/Date(' + object.valueOf() + ')/';
}
else if (util.isNumber(object) || util.isString(Object)) {
return '/Date(' + (new Date(object)).valueOf() + ')/';
else if (util.isNumber(object) || util.isString(object)) {
return '/Date(' + moment(object).valueOf() + ')/';
}
else {
throw new Error(
@ -190,7 +190,7 @@ util.cast = function cast(object, type) {
var ASPDateRegex = /^\/?Date\((\-?\d+)/i;
/**
* Get the type of an object
* Get the type of an object, for example util.getType([]) returns 'Array'
* @param {*} object
* @return {String} type
*/
@ -201,9 +201,31 @@ util.getType = function getType(object) {
if (object == null) {
return 'null';
}
if (object && object.constructor && object.constructor.name) {
return object.constructor.name;
if (object instanceof Boolean) {
return 'Boolean';
}
if (object instanceof Number) {
return 'Number';
}
if (object instanceof String) {
return 'String';
}
if (object instanceof Array) {
return 'Array';
}
if (object instanceof Date) {
return 'Date';
}
return 'Object';
}
else if (type == 'number') {
return 'Number';
}
else if (type == 'boolean') {
return 'Boolean';
}
else if (type == 'string') {
return 'String';
}
return type;
@ -730,3 +752,12 @@ if (!Object.keys) {
}
})()
}
// Internet Explorer 8 and older does not support Array.isArray,
// so we define it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/isArray
if(!Array.isArray) {
Array.isArray = function (vArg) {
return Object.prototype.toString.call(vArg) === "[object Array]";
};
}

+ 2
- 2
test/timeline.html View File

@ -19,13 +19,13 @@
<script src="../src/component/item/itembox.js"></script>
<script src="../src/component/item/itemrange.js"></script>
<script src="../src/component/item/itempoint.js"></script>
<script src="../src/visualization/timeline/timeline.js"></script>
<script src="../src/visualization/timeline.js"></script>
<link href="../src/component/css/panel.css" rel="stylesheet" type="text/css" />
<link href="../src/component/css/timeaxis.css" rel="stylesheet" type="text/css" />
<link href="../src/component/css/item.css" rel="stylesheet" type="text/css" />
<style>
<style type="text/css">
body, html {
width: 100%;
height: 100%;

+ 0
- 142
vis.css View File

@ -1,142 +0,0 @@
.graph {
position: relative;
border: 1px solid #bfbfbf;
}
.graph .panel {
position: absolute;
}
.graph .itemset {
position: absolute;
}
.graph .item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
background-color: #D5DDF6;
display: inline-block;
}
.graph .item.selected {
border-color: #FFC200;
background-color: #FFF785;
z-index: 999;
}
.graph .item.cluster {
/* TODO: use another color or pattern? */
background: #97B0F8 url('img/cluster_bg.png');
color: white;
}
.graph .item.cluster.point {
border-color: #D5DDF6;
}
.graph .item.box {
text-align: center;
border-style: solid;
border-width: 1px;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
}
.graph .item.point {
background: none;
}
.graph .dot {
border: 5px solid #97B0F8;
position: absolute;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
}
.graph .item.range {
overflow: hidden;
border-style: solid;
border-width: 1px;
border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
}
.graph .item.range .drag-left {
cursor: w-resize;
z-index: 1000;
}
.graph .item.range .drag-right {
cursor: e-resize;
z-index: 1000;
}
.graph .item.range .content {
position: relative;
display: inline-block;
}
.graph .item.line {
position: absolute;
width: 0;
border-left-width: 1px;
border-left-style: solid;
z-index: -1;
}
.graph .item .content {
margin: 5px;
white-space: nowrap;
overflow: hidden;
}
/* TODO: better css name, 'graph' is way to generic */
.graph {
overflow: hidden;
}
.graph .axis {
position: relative;
}
.graph .axis .text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.graph .axis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.graph .axis .grid.vertical {
position: absolute;
width: 0;
border-right: 1px solid;
}
.graph .axis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.graph .axis .grid.minor {
border-color: #e5e5e5;
}
.graph .axis .grid.major {
border-color: #bfbfbf;
}

+ 81
- 20
vis.js View File

@ -4,8 +4,8 @@
*
* A dynamic, browser-based visualization library.
*
* @version 0.0.1
* @date 2013-04-16
* @version 0.0.5
* @date 2013-04-18
*
* @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -171,7 +171,7 @@ util.cast = function cast(object, type) {
return new Date(Number(match[1]));
}
else {
return new Date(object);
return moment(object).toDate(); // parse string
}
}
else {
@ -184,8 +184,8 @@ util.cast = function cast(object, type) {
if (object instanceof Date) {
return object.toISOString();
}
else if (util.isNumber(object) || util.isString(Object)) {
return (new Date(object)).toISOString()
else if (util.isNumber(object) || util.isString(object)) {
return moment(object).toDate().toISOString();
}
else {
throw new Error(
@ -197,8 +197,8 @@ util.cast = function cast(object, type) {
if (object instanceof Date) {
return '/Date(' + object.valueOf() + ')/';
}
else if (util.isNumber(object) || util.isString(Object)) {
return '/Date(' + (new Date(object)).valueOf() + ')/';
else if (util.isNumber(object) || util.isString(object)) {
return '/Date(' + moment(object).valueOf() + ')/';
}
else {
throw new Error(
@ -215,7 +215,7 @@ util.cast = function cast(object, type) {
var ASPDateRegex = /^\/?Date\((\-?\d+)/i;
/**
* Get the type of an object
* Get the type of an object, for example util.getType([]) returns 'Array'
* @param {*} object
* @return {String} type
*/
@ -226,9 +226,31 @@ util.getType = function getType(object) {
if (object == null) {
return 'null';
}
if (object && object.constructor && object.constructor.name) {
return object.constructor.name;
if (object instanceof Boolean) {
return 'Boolean';
}
if (object instanceof Number) {
return 'Number';
}
if (object instanceof String) {
return 'String';
}
if (object instanceof Array) {
return 'Array';
}
if (object instanceof Date) {
return 'Date';
}
return 'Object';
}
else if (type == 'number') {
return 'Number';
}
else if (type == 'boolean') {
return 'Boolean';
}
else if (type == 'string') {
return 'String';
}
return type;
@ -756,6 +778,15 @@ if (!Object.keys) {
})()
}
// Internet Explorer 8 and older does not support Array.isArray,
// so we define it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/isArray
if(!Array.isArray) {
Array.isArray = function (vArg) {
return Object.prototype.toString.call(vArg) === "[object Array]";
};
}
/**
* Event listener (singleton)
@ -2650,6 +2681,32 @@ Controller.prototype.reflow = function () {
// TODO: limit the number of nested reflows/repaints, prevent loop
};
/**
* load css from contents
* @param {String} css
*/
var loadCss = function (css) {
// get the script location, and built the css file name from the js file name
// http://stackoverflow.com/a/2161748/1262753
var scripts = document.getElementsByTagName('script');
var jsFile = scripts[scripts.length-1].src.split('?')[0];
// var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
// inject css
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
};
/**
* Prototype for visual components
*/
@ -3101,7 +3158,8 @@ function TimeAxis (parent, depends, options) {
start: 0,
end: 0,
minimumStep: 0
}
},
lineTop: 0
};
this.options = {
@ -3198,7 +3256,9 @@ TimeAxis.prototype.repaint = function () {
parent.removeChild(frame); // take frame offline while updating (is almost twice as fast)
var orientation = options.orientation;
var defaultTop = (orientation == 'bottom') ? (this.props.parentHeight - this.height) + 'px' : '0px';
var defaultTop = (orientation == 'bottom' && this.props.parentHeight && this.height) ?
(this.props.parentHeight - this.height) + 'px' :
'0px';
changed += update(frame.style, 'top', asSize(options.top, defaultTop));
changed += update(frame.style, 'left', asSize(options.left, '0px'));
changed += update(frame.style, 'width', asSize(options.width, '100%'));
@ -3517,11 +3577,11 @@ TimeAxis.prototype.reflow = function () {
props.majorLabelTop = props.minorLabelTop + props.minorLabelHeight;
props.minorLineTop = -this.top;
props.minorLineHeight = this.top + props.majorLabelHeight;
props.minorLineHeight = Math.max(this.top + props.majorLabelHeight, 0);
props.minorLineWidth = 1; // TODO: really calculate width
props.majorLineTop = -this.top;
props.majorLineHeight = this.top + props.minorLabelHeight + props.majorLabelHeight;
props.majorLineHeight = Math.max(this.top + props.minorLabelHeight + props.majorLabelHeight, 0);
props.majorLineWidth = 1; // TODO: really calculate width
props.lineTop = 0;
@ -3536,11 +3596,11 @@ TimeAxis.prototype.reflow = function () {
props.minorLabelTop = props.majorLabelTop + props.majorLabelHeight;
props.minorLineTop = props.minorLabelTop;
props.minorLineHeight = parentHeight - props.majorLabelHeight - this.top;
props.minorLineHeight = Math.max(parentHeight - props.majorLabelHeight - this.top);
props.minorLineWidth = 1; // TODO: really calculate width
props.majorLineTop = 0;
props.majorLineHeight = parentHeight - this.top;
props.majorLineHeight = Math.max(parentHeight - this.top);
props.majorLineWidth = 1; // TODO: really calculate width
props.lineTop = props.majorLabelHeight + props.minorLabelHeight;
@ -4005,7 +4065,8 @@ ItemSet.prototype.toTime = function(x) {
*/
ItemSet.prototype.toScreen = function(time) {
var conversion = this.conversion;
return (time.valueOf() - conversion.offset) * conversion.factor;
var s = (time.valueOf() - conversion.offset) * conversion.factor;
return s;
};
@ -4210,7 +4271,6 @@ ItemBox.prototype.reflow = function () {
changed += update(props.line, 'width', dom.line.offsetWidth);
changed += update(this, 'width', dom.box.offsetWidth);
changed += update(this, 'height', dom.box.offsetHeight);
if (align == 'right') {
left = start - this.width;
}
@ -4306,7 +4366,7 @@ ItemBox.prototype.reposition = function () {
// orientation 'bottom'
line.style.top = props.line.top + 'px';
line.style.top = (this.top + this.height) + 'px';
line.style.height = (props.dot.top - this.top - this.height) + 'px';
line.style.height = Math.max(props.dot.top - this.top - this.height, 0) + 'px';
}
@ -4464,7 +4524,7 @@ ItemPoint.prototype.reflow = function () {
else {
// default or 'bottom'
var parentHeight = this.parent.height;
top = parentHeight - this.height - options.margin.axis;
top = Math.max(parentHeight - this.height - options.margin.axis, 0);
}
changed += update(this, 'top', top);
changed += update(this, 'left', start - props.dot.width / 2);
@ -6265,3 +6325,4 @@ Timeline.prototype.setData = function(data) {
}
}).call(this);
loadCss("/* vis.js stylesheet */\n\n.graph {\n position: relative;\n border: 1px solid #bfbfbf;\n}\n\n.graph .panel {\n position: absolute;\n}\n\n.graph .itemset {\n position: absolute;\n}\n\n\n.graph .item {\n position: absolute;\n color: #1A1A1A;\n border-color: #97B0F8;\n background-color: #D5DDF6;\n display: inline-block;\n}\n\n.graph .item.selected {\n border-color: #FFC200;\n background-color: #FFF785;\n z-index: 999;\n}\n\n.graph .item.cluster {\n /* TODO: use another color or pattern? */\n background: #97B0F8 url('img/cluster_bg.png');\n color: white;\n}\n.graph .item.cluster.point {\n border-color: #D5DDF6;\n}\n\n.graph .item.box {\n text-align: center;\n border-style: solid;\n border-width: 1px;\n border-radius: 5px;\n -moz-border-radius: 5px; /* For Firefox 3.6 and older */\n}\n\n.graph .item.point {\n background: none;\n}\n\n.graph .dot {\n border: 5px solid #97B0F8;\n position: absolute;\n border-radius: 5px;\n -moz-border-radius: 5px; /* For Firefox 3.6 and older */\n}\n\n.graph .item.range {\n overflow: hidden;\n border-style: solid;\n border-width: 1px;\n border-radius: 2px;\n -moz-border-radius: 2px; /* For Firefox 3.6 and older */\n}\n\n.graph .item.range .drag-left {\n cursor: w-resize;\n z-index: 1000;\n}\n\n.graph .item.range .drag-right {\n cursor: e-resize;\n z-index: 1000;\n}\n\n.graph .item.range .content {\n position: relative;\n display: inline-block;\n}\n\n.graph .item.line {\n position: absolute;\n width: 0;\n border-left-width: 1px;\n border-left-style: solid;\n z-index: -1;\n}\n\n.graph .item .content {\n margin: 5px;\n white-space: nowrap;\n overflow: hidden;\n}\n\n/* TODO: better css name, 'graph' is way to generic */\n\n.graph {\n overflow: hidden;\n}\n\n.graph .axis {\n position: relative;\n}\n\n.graph .axis .text {\n position: absolute;\n color: #4d4d4d;\n padding: 3px;\n white-space: nowrap;\n}\n\n.graph .axis .text.measure {\n position: absolute;\n padding-left: 0;\n padding-right: 0;\n margin-left: 0;\n margin-right: 0;\n visibility: hidden;\n}\n\n.graph .axis .grid.vertical {\n position: absolute;\n width: 0;\n border-right: 1px solid;\n}\n\n.graph .axis .grid.horizontal {\n position: absolute;\n left: 0;\n width: 100%;\n height: 0;\n border-bottom: 1px solid;\n}\n\n.graph .axis .grid.minor {\n border-color: #e5e5e5;\n}\n\n.graph .axis .grid.major {\n border-color: #bfbfbf;\n}\n\n");

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


Write Preview
Loading…
Cancel
Save