svgTimeline v0.1

examples/svgTimeline/01_basic.html

@@ -9,7 +9,7 @@
         }
 
         #bars {
-            fill:#FF0000;
+            fill: #d2e2ff;
         }
     </style>
 
@@ -18,6 +18,7 @@
     <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/moment-with-langs.min.js"></script>
+    <script src="../../src/svgTimeline/Item.js"></script>
     <script src="../../src/svgTimeline/svgTimeline.js"></script>
     <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
@@ -27,12 +28,12 @@
 <script type="text/javascript">
     var container = document.getElementById('visualization');
     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 timeline = new SvgTimeline(container, items, options);

src/svgTimeline/Item.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 2/27/14.
- */
 /**
  * @class Item
  * 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} title  An title text, can be HTML
  *                              {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
  *                                            example for the color
  *
@@ -30,12 +23,22 @@ function Item(properties, constants) {
 
   this.id = 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.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;
   }
 
-  this.originalLabel = undefined;
   // 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();
+  }
+}

src/svgTimeline/svgTimeline.js

@@ -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 multipliers = [1,1000,60000,3600000,24*3600000,30*24*3600000,365*24*3600000];
   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 scale = scales[indices[0]][indices[1]] * multipliers[indices[0]];
 
@@ -135,16 +135,22 @@ SvgAxis.prototype._getAppropriateScale = function(scales,multipliers) {
  * @param {Object} options      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 = {
     width:1400,
     height:400,
     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._createSVG();
 
@@ -179,7 +185,11 @@ SvgTimeline.prototype._createSVG = function() {
     .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
@@ -247,7 +257,66 @@ SvgTimeline.prototype._onMouseWheel = function(event) {
 };
 SvgTimeline.prototype._onMouseMoveTitle = function() {};
 
-
 SvgTimeline.prototype._update = function() {
   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) {
+
+}
+