Alex de Mulder
10 years ago
16 changed files with 910 additions and 627 deletions
Split View
Diff Options
-
+1 -0Jakefile.js
-
+92 -10dist/vis.css
-
+343 -121dist/vis.js
-
+1 -1dist/vis.min.css
-
+12 -12dist/vis.min.js
-
+22 -6examples/Graph2d/01_basic.html
-
+1 -2src/DataSet.js
-
+1 -1src/graph/graphMixins/physics/BarnesHut.js
-
+36 -35src/timeline/DataStep.js
-
+1 -1src/timeline/Graph2d.js
-
+1 -1src/timeline/Timeline.js
-
+7 -1src/timeline/component/DataAxis.js
-
+294 -78src/timeline/component/Linegraph.js
-
+0 -340src/timeline/component/Linegraph2.js
-
+0 -18src/timeline/component/css/dataaxis.css
-
+98 -0src/timeline/component/css/pathStyles.css
+ 1
- 0
Jakefile.js
View File
+ 92
- 10
dist/vis.css
View File
+ 343
- 121
dist/vis.js
View File
+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File
+ 12
- 12
dist/vis.min.js
File diff suppressed because it is too large
View File
+ 22
- 6
examples/Graph2d/01_basic.html
View File
+ 1
- 2
src/DataSet.js
View File
+ 1
- 1
src/graph/graphMixins/physics/BarnesHut.js
View File
+ 36
- 35
src/timeline/DataStep.js
View File
+ 1
- 1
src/timeline/Graph2d.js
View File
+ 1
- 1
src/timeline/Timeline.js
View File
+ 7
- 1
src/timeline/component/DataAxis.js
View File
+ 294
- 78
src/timeline/component/Linegraph.js
View File
+ 0
- 340
src/timeline/component/Linegraph2.js
View File
| @ -1,340 +0,0 @@ | |||
| /** | |||
| * Created by Alex on 5/6/14. | |||
| */ | |||
| var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items | |||
| /** | |||
| * An ItemSet holds a set of items and ranges which can be displayed in a | |||
| * range. The width is determined by the parent of the ItemSet, and the height | |||
| * is determined by the size of the items. | |||
| * @param {Panel} backgroundPanel Panel which can be used to display the | |||
| * vertical lines of box items. | |||
| * @param {Panel} axisPanel Panel on the axis where the dots of box-items | |||
| * can be displayed. | |||
| * @param {Panel} sidePanel Left side panel holding labels | |||
| * @param {Object} [options] See ItemSet.setOptions for the available options. | |||
| * @constructor ItemSet | |||
| * @extends Panel | |||
| */ | |||
| function Linegraph(backgroundPanel, axisPanel, sidePanel, options, timeline, sidePanelParent) { | |||
| this.id = util.randomUUID(); | |||
| this.timeline = timeline; | |||
| // one options object is shared by this itemset and all its items | |||
| this.options = options || {}; | |||
| this.backgroundPanel = backgroundPanel; | |||
| this.axisPanel = axisPanel; | |||
| this.sidePanel = sidePanel; | |||
| this.sidePanelParent = sidePanelParent; | |||
| this.itemOptions = Object.create(this.options); | |||
| this.dom = {}; | |||
| this.hammer = null; | |||
| this.itemsData = null; // DataSet | |||
| this.groupsData = null; // DataSet | |||
| this.range = null; // Range or Object {start: number, end: number} | |||
| // listeners for the DataSet of the items | |||
| // this.itemListeners = { | |||
| // 'add': function(event, params, senderId) { | |||
| // if (senderId != me.id) me._onAdd(params.items); | |||
| // }, | |||
| // 'update': function(event, params, senderId) { | |||
| // if (senderId != me.id) me._onUpdate(params.items); | |||
| // }, | |||
| // 'remove': function(event, params, senderId) { | |||
| // if (senderId != me.id) me._onRemove(params.items); | |||
| // } | |||
| // }; | |||
| // | |||
| // // listeners for the DataSet of the groups | |||
| // this.groupListeners = { | |||
| // 'add': function(event, params, senderId) { | |||
| // if (senderId != me.id) me._onAddGroups(params.items); | |||
| // }, | |||
| // 'update': function(event, params, senderId) { | |||
| // if (senderId != me.id) me._onUpdateGroups(params.items); | |||
| // }, | |||
| // 'remove': function(event, params, senderId) { | |||
| // if (senderId != me.id) me._onRemoveGroups(params.items); | |||
| // } | |||
| // }; | |||
| this.items = {}; // object with an Item for every data item | |||
| this.groups = {}; // Group object for every group | |||
| this.groupIds = []; | |||
| this.selection = []; // list with the ids of all selected nodes | |||
| this.stackDirty = true; // if true, all items will be restacked on next repaint | |||
| this.touchParams = {}; // stores properties while dragging | |||
| // create the HTML DOM | |||
| this.lastStart = 0; | |||
| this._create(); | |||
| var me = this; | |||
| this.timeline.on("rangechange", function() { | |||
| if (me.lastStart != 0) { | |||
| var offset = me.range.start - me.lastStart; | |||
| var range = me.range.end - me.range.start; | |||
| if (me.width != 0) { | |||
| var rangePerPixelInv = me.width/range; | |||
| var xOffset = offset * rangePerPixelInv; | |||
| me.svg.style.left = util.option.asSize(-me.width - xOffset); | |||
| } | |||
| } | |||
| }) | |||
| this.timeline.on("rangechanged", function() { | |||
| me.lastStart = me.range.start; | |||
| me.svg.style.left = util.option.asSize(-me.width); | |||
| me.setData.apply(me); | |||
| }); | |||
| // this.data = new DataView(this.items) | |||
| } | |||
| //Linegraph.prototype = new Panel(); | |||
| /** | |||
| * Create the HTML DOM for the ItemSet | |||
| */ | |||
| Linegraph.prototype._create = function(){ | |||
| var frame = document.createElement('div'); | |||
| frame['timeline-linegraph'] = this; | |||
| this.frame = frame; | |||
| this.frame.className = 'itemset'; | |||
| // create background panel | |||
| var background = document.createElement('div'); | |||
| background.className = 'background'; | |||
| this.backgroundPanel.frame.appendChild(background); | |||
| this.dom.background = background; | |||
| // create foreground panel | |||
| var foreground = document.createElement('div'); | |||
| foreground.className = 'foreground'; | |||
| frame.appendChild(foreground); | |||
| this.dom.foreground = foreground; | |||
| // // create axis panel | |||
| // var axis = document.createElement('div'); | |||
| // axis.className = 'axis'; | |||
| // this.dom.axis = axis; | |||
| // this.axisPanel.frame.appendChild(axis); | |||
| // | |||
| // // create labelset | |||
| // var labelSet = document.createElement('div'); | |||
| // labelSet.className = 'labelset'; | |||
| // this.dom.labelSet = labelSet; | |||
| // this.sidePanel.frame.appendChild(labelSet); | |||
| // this.yAxisDiv = document.createElement('div'); | |||
| // this.yAxisDiv.style.backgroundColor = 'rgb(220,220,220)'; | |||
| // this.yAxisDiv.style.width = '100px'; | |||
| // this.yAxisDiv.style.height = this.svg.style.height; | |||
| this._createAxis(); | |||
| // this.dom.yAxisDiv = this.yAxisDiv; | |||
| // this.sidePanel.frame.appendChild(this.yAxisDiv); | |||
| this.sidePanel.showPanel.apply(this.sidePanel); | |||
| this.sidePanelParent.showPanel(); | |||
| }; | |||
| Linegraph.prototype._createAxis = function() { | |||
| } | |||
| Linegraph.prototype.setData = function() { | |||
| if (this.width != 0) { | |||
| var dataview = new DataView(this.timeline.itemsData, | |||
| {filter: function (item) {return (item.value);}}) | |||
| var datapoints = dataview.get(); | |||
| if (datapoints != null) { | |||
| if (datapoints.length > 0) { | |||
| var dataset = this._extractData(datapoints); | |||
| var data = dataset.data; | |||
| console.log("height",data,datapoints, dataset); | |||
| this.yAxis.setRange({start:dataset.range.low,end:dataset.range.high}); | |||
| this.yAxis.repaint(); | |||
| data = this.yAxis.convertValues(data); | |||
| var d, d2, d3; | |||
| d = this._catmullRom(data,0.5); | |||
| d3 = this._catmullRom(data,0); | |||
| d2 = this._catmullRom(data,1); | |||
| // var data2 = []; | |||
| // this.startTime = this.range.start; | |||
| // var min = Date.now() - 3600000 * 24 * 30; | |||
| // var max = Date.now() + 3600000 * 24 * 10; | |||
| // var count = 60; | |||
| // var step = (max-min) / count; | |||
| // | |||
| // var range = this.range.end - this.range.start; | |||
| // var rangePerPixel = range/this.width; | |||
| // var rangePerPixelInv = this.width/range; | |||
| // var xOffset = -this.range.start + this.width*rangePerPixel; | |||
| // | |||
| // for (var i = 0; i < count; i++) { | |||
| // data2.push({x:(min + i*step + xOffset) * rangePerPixelInv, y: 250*(i%2) + 25}) | |||
| // } | |||
| // | |||
| // var d2 = this._catmullRom(data2); | |||
| this.path.setAttributeNS(null, "d",d); | |||
| this.path2.setAttributeNS(null, "d",d2); | |||
| this.path3.setAttributeNS(null, "d",d3); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| /** | |||
| * Set options for the Linegraph. Existing options will be extended/overwritten. | |||
| * @param {Object} [options] The following options are available: | |||
| * {String | function} [className] | |||
| * class name for the itemset | |||
| * {String} [type] | |||
| * Default type for the items. Choose from 'box' | |||
| * (default), 'point', or 'range'. The default | |||
| * Style can be overwritten by individual items. | |||
| * {String} align | |||
| * Alignment for the items, only applicable for | |||
| * ItemBox. Choose 'center' (default), 'left', or | |||
| * 'right'. | |||
| * {String} orientation | |||
| * Orientation of the item set. Choose 'top' or | |||
| * 'bottom' (default). | |||
| * {Number} margin.axis | |||
| * Margin between the axis and the items in pixels. | |||
| * Default is 20. | |||
| * {Number} margin.item | |||
| * Margin between items in pixels. Default is 10. | |||
| * {Number} padding | |||
| * Padding of the contents of an item in pixels. | |||
| * Must correspond with the items css. Default is 5. | |||
| * {Function} snap | |||
| * Function to let items snap to nice dates when | |||
| * dragging items. | |||
| */ | |||
| Linegraph.prototype.setOptions = function(options) { | |||
| Component.prototype.setOptions.call(this, options); | |||
| }; | |||
| Linegraph.prototype._extractData = function(dataset) { | |||
| var extractedData = []; | |||
| var low = dataset[0].value; | |||
| var high = dataset[0].value; | |||
| var range = this.range.end - this.range.start; | |||
| var rangePerPixel = range/this.width; | |||
| var rangePerPixelInv = this.width/range; | |||
| var xOffset = -this.range.start + this.width*rangePerPixel; | |||
| for (var i = 0; i < dataset.length; i++) { | |||
| var val = new Date(dataset[i].start).getTime(); | |||
| val += xOffset; | |||
| val *= rangePerPixelInv; | |||
| extractedData.push({x:val, y:dataset[i].value}); | |||
| if (low > dataset[i].value) { | |||
| low = dataset[i].value; | |||
| } | |||
| if (high < dataset[i].value) { | |||
| high = dataset[i].value; | |||
| } | |||
| } | |||
| //extractedData.sort(function (a,b) {return a.x - b.x;}) | |||
| return {range:{low:low,high:high},data:extractedData}; | |||
| } | |||
| /** | |||
| * Set range (start and end). | |||
| * @param {Range | Object} range A Range or an object containing start and end. | |||
| */ | |||
| Linegraph.prototype.setRange = function(range) { | |||
| if (!(range instanceof Range) && (!range || !range.start || !range.end)) { | |||
| throw new TypeError('Range must be an instance of Range, ' + | |||
| 'or an object containing start and end.'); | |||
| } | |||
| this.range = range; | |||
| }; | |||
| Linegraph.prototype.repaint = function() { | |||
| var margin = this.options.margin, | |||
| range = this.range, | |||
| asSize = util.option.asSize, | |||
| asString = util.option.asString, | |||
| options = this.options, | |||
| orientation = this.getOption('orientation'), | |||
| resized = false, | |||
| frame = this.frame; | |||
| // TODO: document this feature to specify one margin for both item and axis distance | |||
| if (typeof margin === 'number') { | |||
| margin = { | |||
| item: margin, | |||
| axis: margin | |||
| }; | |||
| } | |||
| // update className | |||
| this.frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : ''); | |||
| // check whether zoomed (in that case we need to re-stack everything) | |||
| // TODO: would be nicer to get this as a trigger from Range | |||
| var visibleInterval = this.range.end - this.range.start; | |||
| var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth); | |||
| if (zoomed) this.stackDirty = true; | |||
| this.lastVisibleInterval = visibleInterval; | |||
| this.lastWidth = this.width; | |||
| // reposition frame | |||
| this.frame.style.left = asSize(options.left, ''); | |||
| this.frame.style.right = asSize(options.right, ''); | |||
| this.frame.style.top = asSize((orientation == 'top') ? '0' : ''); | |||
| this.frame.style.bottom = asSize((orientation == 'top') ? '' : '0'); | |||
| this.frame.style.width = asSize(options.width, '100%'); | |||
| // frame.style.height = asSize(height); | |||
| //frame.style.height = asSize('height' in options ? options.height : height); // TODO: reckon with height | |||
| // calculate actual size and position | |||
| this.top = this.frame.offsetTop; | |||
| this.left = this.frame.offsetLeft; | |||
| this.width = this.frame.offsetWidth; | |||
| // this.height = height; | |||
| // check if this component is resized | |||
| resized = this._isResized() || resized; | |||
| if (resized) { | |||
| this.svg.style.width = asSize(3*this.width); | |||
| this.svg.style.left = asSize(-this.width); | |||
| } | |||
| if (zoomed) { | |||
| this.setData(); | |||
| } | |||
| } | |||
+ 0
- 18
src/timeline/component/css/dataaxis.css
View File
+ 98
- 0
src/timeline/component/css/pathStyles.css
View File
| @ -0,0 +1,98 @@ | |||
| .vis.timeline .group0 { | |||
| fill:#4f81bd; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #4f81bd; | |||
| } | |||
| .vis.timeline .group1 { | |||
| fill:#f79646; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #f79646; | |||
| } | |||
| .vis.timeline .group2 { | |||
| fill: #8c51cf; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #8c51cf; | |||
| } | |||
| .vis.timeline .group3 { | |||
| fill: #75c841; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #75c841; | |||
| } | |||
| .vis.timeline .group4 { | |||
| fill: #ff0100; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #ff0100; | |||
| } | |||
| .vis.timeline .group5 { | |||
| fill: #37d8e6; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #37d8e6; | |||
| } | |||
| .vis.timeline .group6 { | |||
| fill: #042662; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #042662; | |||
| } | |||
| .vis.timeline .group7 { | |||
| fill:#00ff26; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #00ff26; | |||
| } | |||
| .vis.timeline .group8 { | |||
| fill:#ff00ff; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #ff00ff; | |||
| } | |||
| .vis.timeline .group9 { | |||
| fill: #8f3938; | |||
| fill-opacity:0; | |||
| stroke-width:2px; | |||
| stroke: #8f3938; | |||
| } | |||
| .vis.timeline .fill { | |||
| fill-opacity:0.1; | |||
| stroke: none; | |||
| } | |||
| .vis.timeline .point { | |||
| stroke-width:2px; | |||
| fill-opacity:1.0; | |||
| } | |||
| .vis.timeline .legendBackground { | |||
| stroke-width:1px; | |||
| fill-opacity:0.9; | |||
| fill: #ffffff; | |||
| stroke: #c2c2c2; | |||
| } | |||
| .vis.timeline .outline { | |||
| stroke-width:1px; | |||
| fill-opacity:1; | |||
| fill: #ffffff; | |||
| stroke: #e5e5e5; | |||
| } | |||