Browse Source

svgTimeline v0.1

css_transitions
Alex de Mulder 10 years ago
parent
commit
92bf75d669
3 changed files with 117 additions and 37 deletions
  1. +8
    -7
      examples/svgTimeline/01_basic.html
  2. +32
    -22
      src/svgTimeline/Item.js
  3. +77
    -8
      src/svgTimeline/svgTimeline.js

+ 8
- 7
examples/svgTimeline/01_basic.html View File

@ -9,7 +9,7 @@
} }
#bars { #bars {
fill:#FF0000;
fill: #d2e2ff;
} }
</style> </style>
@ -18,6 +18,7 @@
<script src="../../src/svgTimeline/d3.v3.js" charset="utf-8"></script> <script src="../../src/svgTimeline/d3.v3.js" charset="utf-8"></script>
<script src="../../src/svgTimeline/hammer.min.js" charset="utf-8"></script> <script src="../../src/svgTimeline/hammer.min.js" charset="utf-8"></script>
<script src="../../src/svgTimeline/moment-with-langs.min.js"></script> <script src="../../src/svgTimeline/moment-with-langs.min.js"></script>
<script src="../../src/svgTimeline/Item.js"></script>
<script src="../../src/svgTimeline/svgTimeline.js"></script> <script src="../../src/svgTimeline/svgTimeline.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>
@ -27,12 +28,12 @@
<script type="text/javascript"> <script type="text/javascript">
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var items = [ var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
{id: 1, content: 'item 1', start: '2014-02-20'},
{id: 2, content: 'item 2', start: '2014-02-14'},
{id: 3, content: 'item 3', start: '2014-02-18'},
{id: 4, content: 'item 4', start: '2014-02-16', end: '2014-02-19'},
{id: 5, content: 'item 5', start: '2014-02-25'},
{id: 6, content: 'item 6', start: '2014-02-27'}
]; ];
var options = {}; var options = {};
var timeline = new SvgTimeline(container, items, options); var timeline = new SvgTimeline(container, items, options);

+ 32
- 22
src/svgTimeline/Item.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 2/27/14.
*/
/** /**
* @class Item * @class Item
* A node. A node can be connected to other nodes via one or multiple edges. * A node. A node can be connected to other nodes via one or multiple edges.
@ -18,10 +15,6 @@
* {string} image An image url * {string} image An image url
* {string} title An title text, can be HTML * {string} title An title text, can be HTML
* {anytype} group A group name or number * {anytype} group A group name or number
* @param {Graph.Images} imagelist A list with images. Only needed
* when the node has an image
* @param {Graph.Groups} grouplist A list with groups. Needed for
* retrieving group properties
* @param {Object} constants An object with default values for * @param {Object} constants An object with default values for
* example for the color * example for the color
* *
@ -30,12 +23,22 @@ function Item(properties, constants) {
this.id = null; this.id = null;
this.start = null; this.start = null;
this.end = null;
this.content = null;
this.duration = null;
this.end = 0;
this.content = "no content";
this.class = "";
this.active = false;
this.setProperties(properties, constants); this.setProperties(properties, constants);
this.convertDatesToUNIX();
this.duration = 0;
if (this.end != 0) {
this.duration = this.end - this.start;
}
this.svg = null;
this.svgLine = null;
} }
@ -49,15 +52,22 @@ Item.prototype.setProperties = function(properties, constants) {
return; return;
} }
this.originalLabel = undefined;
// basic properties // basic properties
if (properties.id !== undefined) {this.id = properties.id;}
if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = properties.label;}
if (properties.title !== undefined) {this.title = properties.title;}
if (properties.group !== undefined) {this.group = properties.group;}
if (properties.x !== undefined) {this.x = properties.x;}
if (properties.y !== undefined) {this.y = properties.y;}
if (properties.value !== undefined) {this.value = properties.value;}
if (properties.level !== undefined) {this.level = properties.level;}
};
if (properties.id !== undefined) {this.id = properties.id;}
else {throw("An ID is required.")}
if (properties.start !== undefined) {this.start = properties.start;}
else {throw("A start property is required. -->" + this.id)}
if (properties.end !== undefined) {this.end = properties.end;}
if (properties.class !== undefined) {this.class = properties.class;}
if (properties.content !== undefined) {this.content = properties.content;}
};
Item.prototype.convertDatesToUNIX = function() {
this.start = moment(this.start,"YYYY-MM-DD").valueOf();
if (this.end != null) {
this.end = moment(this.end,"YYYY-MM-DD").valueOf();
}
}

+ 77
- 8
src/svgTimeline/svgTimeline.js View File

@ -77,7 +77,7 @@ SvgAxis.prototype._update = function() {
var yearScale = [1,2,3,4,5,6,7,8,9,10,15,20,25,50,75,100,150,250,500,1000]; var yearScale = [1,2,3,4,5,6,7,8,9,10,15,20,25,50,75,100,150,250,500,1000];
var multipliers = [1,1000,60000,3600000,24*3600000,30*24*3600000,365*24*3600000]; var multipliers = [1,1000,60000,3600000,24*3600000,30*24*3600000,365*24*3600000];
var scales = [milliSecondScale,secondScale,minuteScale,hourScale,dayScale,monthScale,yearScale] var scales = [milliSecondScale,secondScale,minuteScale,hourScale,dayScale,monthScale,yearScale]
var formats = ["SSS","mm:ss","hh:mm:ss","DD HH:mm","MM-DD","MM","YYYY"]
var formats = ["SSS","mm:ss","hh:mm:ss","DD HH:mm","DD-MM","MM-YYYY","YYYY"]
var indices = this._getAppropriateScale(scales,multipliers); var indices = this._getAppropriateScale(scales,multipliers);
var scale = scales[indices[0]][indices[1]] * multipliers[indices[0]]; var scale = scales[indices[0]][indices[1]] * multipliers[indices[0]];
@ -135,16 +135,22 @@ SvgAxis.prototype._getAppropriateScale = function(scales,multipliers) {
* @param {Object} options Options * @param {Object} options Options
*/ */
function SvgTimeline (container, items, options) { function SvgTimeline (container, items, options) {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
this.range = {start:now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 4).valueOf()}
this.constants = { this.constants = {
width:1400, width:1400,
height:400, height:400,
barHeight: 60 barHeight: 60
} }
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
this.range = {
start:now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 4).valueOf()
}
this.items = {};
this.activeItems = {};
this._createItems(items);
this.container = container; this.container = container;
this._createSVG(); this._createSVG();
@ -179,7 +185,11 @@ SvgTimeline.prototype._createSVG = function() {
.attr("style","border:1px solid black") .attr("style","border:1px solid black")
}; };
SvgTimeline.prototype._createItems = function (items) {
for (var i = 0; i < items.length; i++) {
this.items[items[i].id] = new Item(items[i], this.constants);
}
}
/** /**
* Get the pointer location from a touch location * Get the pointer location from a touch location
@ -247,7 +257,66 @@ SvgTimeline.prototype._onMouseWheel = function(event) {
}; };
SvgTimeline.prototype._onMouseMoveTitle = function() {}; SvgTimeline.prototype._onMouseMoveTitle = function() {};
SvgTimeline.prototype._update = function() { SvgTimeline.prototype._update = function() {
this.axis._update(); this.axis._update();
}
this._getActiveItems();
};
SvgTimeline.prototype._getActiveItems = function() {
for (var itemId in this.activeItems) {
if (this.activeItems.hasOwnProperty(itemId)) {
this.activeItems[itemId].active = false;
}
}
for (var itemId in this.items) {
if (this.items.hasOwnProperty(itemId)) {
if (this.items[itemId].start >= this.range.start && this.items[itemId].start < this.range.end ||
this.items[itemId].end >= this.range.start && this.items[itemId].end < this.range.end
) {
if (this.items[itemId].active == false) {
this.activeItems[itemId] = this.items[itemId];
}
this.activeItems[itemId].active = true;
}
}
}
for (var itemId in this.activeItems) {
if (this.activeItems.hasOwnProperty(itemId)) {
if (this.activeItems[itemId].active == false) {
this.activeItems[itemId].svg.remove();
this.activeItems[itemId].svg = null;
this.activeItems[itemId].svgLine.remove();
this.activeItems[itemId].svgLine = null;
delete this.activeItems[itemId];
}
}
}
};
SvgTimeline.prototype._updateItems = function() {
for (var itemId in this.activeItems) {
if (this.activeItems.hasOwnProperty(itemId)) {
var item = this.activeItems[itemId];
if (item.svg == null) {
item.svg = d3.select("svg#main")
.append("rect")
.attr("x")
item.svgLine = d3.select("svg#main")
.append("line")
}
}
}
};
SvgTimeline.prototype._getXforTime = function(time) {
}
SvgTimeline.prototype._getLengthforDuration = function(time) {
}

Loading…
Cancel
Save