Alex de Mulder
10 years ago
10 changed files with 6335 additions and 3847 deletions
Split View
Diff Options
-
+7 -0Jakefile.js
-
+115 -34dist/vis.css
-
+4963 -3532dist/vis.js
-
+1 -1dist/vis.min.css
-
+12 -11dist/vis.min.js
-
+32 -0examples/Graph2d/01_basic.html
-
+2 -1src/module/exports.js
-
+659 -0src/timeline/Graph2d.js
-
+204 -268src/timeline/component/Linegraph.js
-
+340 -0src/timeline/component/Linegraph2.js
+ 7
- 0
Jakefile.js
View File
+ 115
- 34
dist/vis.css
View File
+ 4963
- 3532
dist/vis.js
File diff suppressed because it is too large
View File
+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File
+ 12
- 11
dist/vis.min.js
File diff suppressed because it is too large
View File
+ 32
- 0
examples/Graph2d/01_basic.html
View File
| @ -0,0 +1,32 @@ | |||
| <!DOCTYPE HTML> | |||
| <html> | |||
| <head> | |||
| <title>Graph2d | Basic demo</title> | |||
| <style type="text/css"> | |||
| body, html { | |||
| font-family: sans-serif; | |||
| } | |||
| </style> | |||
| <script src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <div id="visualization"></div> | |||
| <script type="text/javascript"> | |||
| var container = document.getElementById('visualization'); | |||
| var items = [ | |||
| {id: 1, content: 'item 1', x: '2014-04-01', y: 10}, | |||
| {id: 2, content: 'item 2', x: '2014-04-02', y: 20}, | |||
| {id: 3, content: 'item 3', x: '2014-04-03', y: 30}, | |||
| {id: 4, content: 'item 4', x: '2014-04-04', y: 10}, | |||
| {id: 5, content: 'item 5', x: '2014-04-05', y: 20}, | |||
| {id: 6, content: 'item 6', x: '2014-04-06', y: 30} | |||
| ]; | |||
| var options = {}; | |||
| var graph2d = new vis.Graph2d(container, items, options); | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 2
- 1
src/module/exports.js
View File
+ 659
- 0
src/timeline/Graph2d.js
View File
| @ -0,0 +1,659 @@ | |||
| /** | |||
| * Create a timeline visualization | |||
| * @param {HTMLElement} container | |||
| * @param {vis.DataSet | Array | google.visualization.DataTable} [items] | |||
| * @param {Object} [options] See Graph2d.setOptions for the available options. | |||
| * @constructor | |||
| */ | |||
| function Graph2d (container, items, options) { | |||
| var me = this; | |||
| this.defaultOptions = { | |||
| start: null, | |||
| end: null, | |||
| autoResize: true, | |||
| width: null, | |||
| height: null, | |||
| maxHeight: null, | |||
| minHeight: null | |||
| // TODO: implement options moveable and zoomable | |||
| }; | |||
| this.options = util.deepExtend({}, this.defaultOptions); | |||
| // Create the DOM, props, and emitter | |||
| this._create(container); | |||
| // all components listed here will be repainted automatically | |||
| this.components = []; | |||
| this.body = { | |||
| dom: this.dom, | |||
| domProps: this.props, | |||
| emitter: { | |||
| on: this.on.bind(this), | |||
| off: this.off.bind(this), | |||
| emit: this.emit.bind(this) | |||
| }, | |||
| util: { | |||
| snap: null, // will be specified after TimeAxis is created | |||
| toScreen: me._toScreen.bind(me), | |||
| toTime: me._toTime.bind(me) | |||
| } | |||
| }; | |||
| // range | |||
| this.range = new Range(this.body); | |||
| this.components.push(this.range); | |||
| this.body.range = this.range; | |||
| // time axis | |||
| this.timeAxis = new TimeAxis(this.body); | |||
| this.components.push(this.timeAxis); | |||
| this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis); | |||
| // current time bar | |||
| this.currentTime = new CurrentTime(this.body); | |||
| this.components.push(this.currentTime); | |||
| // custom time bar | |||
| // Note: time bar will be attached in this.setOptions when selected | |||
| this.customTime = new CustomTime(this.body); | |||
| this.components.push(this.customTime); | |||
| // item set | |||
| this.linegraph = new Linegraph(this.body); | |||
| this.components.push(this.linegraph); | |||
| this.itemsData = null; // DataSet | |||
| this.groupsData = null; // DataSet | |||
| // apply options | |||
| if (options) { | |||
| this.setOptions(options); | |||
| } | |||
| // create itemset | |||
| if (items) { | |||
| this.setItems(items); | |||
| } | |||
| else { | |||
| this.redraw(); | |||
| } | |||
| } | |||
| // turn Timeline into an event emitter | |||
| Emitter(Graph2d.prototype); | |||
| /** | |||
| * Create the main DOM for the Timeline: a root panel containing left, right, | |||
| * top, bottom, content, and background panel. | |||
| * @param {Element} container The container element where the Timeline will | |||
| * be attached. | |||
| * @private | |||
| */ | |||
| Graph2d.prototype._create = function (container) { | |||
| this.dom = {}; | |||
| this.dom.root = document.createElement('div'); | |||
| this.dom.background = document.createElement('div'); | |||
| this.dom.backgroundVertical = document.createElement('div'); | |||
| this.dom.backgroundHorizontal = document.createElement('div'); | |||
| this.dom.centerContainer = document.createElement('div'); | |||
| this.dom.leftContainer = document.createElement('div'); | |||
| this.dom.rightContainer = document.createElement('div'); | |||
| this.dom.center = document.createElement('div'); | |||
| this.dom.left = document.createElement('div'); | |||
| this.dom.right = document.createElement('div'); | |||
| this.dom.top = document.createElement('div'); | |||
| this.dom.bottom = document.createElement('div'); | |||
| this.dom.background.className = 'vispanel background'; | |||
| this.dom.backgroundVertical.className = 'vispanel background vertical'; | |||
| this.dom.backgroundHorizontal.className = 'vispanel background horizontal'; | |||
| this.dom.centerContainer.className = 'vispanel center'; | |||
| this.dom.leftContainer.className = 'vispanel left'; | |||
| this.dom.rightContainer.className = 'vispanel right'; | |||
| this.dom.top.className = 'vispanel top'; | |||
| this.dom.bottom.className = 'vispanel bottom'; | |||
| this.dom.left.className = 'content'; | |||
| this.dom.center.className = 'content'; | |||
| this.dom.right.className = 'content'; | |||
| this.dom.root.appendChild(this.dom.background); | |||
| this.dom.root.appendChild(this.dom.backgroundVertical); | |||
| this.dom.root.appendChild(this.dom.backgroundHorizontal); | |||
| this.dom.root.appendChild(this.dom.centerContainer); | |||
| this.dom.root.appendChild(this.dom.leftContainer); | |||
| this.dom.root.appendChild(this.dom.rightContainer); | |||
| this.dom.root.appendChild(this.dom.top); | |||
| this.dom.root.appendChild(this.dom.bottom); | |||
| this.dom.centerContainer.appendChild(this.dom.center); | |||
| this.dom.leftContainer.appendChild(this.dom.left); | |||
| this.dom.rightContainer.appendChild(this.dom.right); | |||
| this.on('rangechange', this.redraw.bind(this)); | |||
| this.on('change', this.redraw.bind(this)); | |||
| // create event listeners for all interesting events, these events will be | |||
| // emitted via emitter | |||
| this.hammer = Hammer(this.dom.root, { | |||
| prevent_default: true | |||
| }); | |||
| this.listeners = {}; | |||
| var me = this; | |||
| var events = [ | |||
| 'pinch', | |||
| //'tap', 'doubletap', 'hold', // TODO: catching the events here disables selecting an item | |||
| 'dragstart', 'drag', 'dragend', | |||
| 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox | |||
| ]; | |||
| events.forEach(function (event) { | |||
| var listener = function () { | |||
| var args = [event].concat(Array.prototype.slice.call(arguments, 0)); | |||
| me.emit.apply(me, args); | |||
| }; | |||
| me.hammer.on(event, listener); | |||
| me.listeners[event] = listener; | |||
| }); | |||
| // size properties of each of the panels | |||
| this.props = { | |||
| root: {}, | |||
| background: {}, | |||
| centerContainer: {}, | |||
| leftContainer: {}, | |||
| rightContainer: {}, | |||
| center: {}, | |||
| left: {}, | |||
| right: {}, | |||
| top: {}, | |||
| bottom: {}, | |||
| border: {} | |||
| }; | |||
| // attach the root panel to the provided container | |||
| if (!container) throw new Error('No container provided'); | |||
| container.appendChild(this.dom.root); | |||
| }; | |||
| /** | |||
| * Set options. Options will be passed to all components loaded in the Graph2d. | |||
| * @param {Object} [options] | |||
| * {String | Number} width | |||
| * Width for the timeline, a number in pixels or | |||
| * a css string like '1000px' or '75%'. '100%' by default. | |||
| * {String | Number} height | |||
| * Fixed height for the Timeline, a number in pixels or | |||
| * a css string like '400px' or '75%'. If undefined, | |||
| * The Timeline will automatically size such that | |||
| * its contents fit. | |||
| * {String | Number} minHeight | |||
| * Minimum height for the Timeline, a number in pixels or | |||
| * a css string like '400px' or '75%'. | |||
| * {String | Number} maxHeight | |||
| * Maximum height for the Timeline, a number in pixels or | |||
| * a css string like '400px' or '75%'. | |||
| * {Number | Date | String} start | |||
| * Start date for the visible window | |||
| * {Number | Date | String} end | |||
| * End date for the visible window | |||
| */ | |||
| Graph2d.prototype.setOptions = function (options) { | |||
| if (options) { | |||
| // copy the known options | |||
| var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end']; | |||
| util.selectiveExtend(fields, this.options, options); | |||
| // enable/disable autoResize | |||
| this._initAutoResize(); | |||
| } | |||
| // propagate options to all components | |||
| this.components.forEach(function (component) { | |||
| component.setOptions(options); | |||
| }); | |||
| // TODO: remove deprecation error one day (deprecated since version 0.8.0) | |||
| if (options && options.order) { | |||
| throw new Error('Option order is deprecated. There is no replacement for this feature.'); | |||
| } | |||
| // redraw everything | |||
| this.redraw(); | |||
| }; | |||
| /** | |||
| * Set a custom time bar | |||
| * @param {Date} time | |||
| */ | |||
| Graph2d.prototype.setCustomTime = function (time) { | |||
| if (!this.customTime) { | |||
| throw new Error('Cannot get custom time: Custom time bar is not enabled'); | |||
| } | |||
| this.customTime.setCustomTime(time); | |||
| }; | |||
| /** | |||
| * Retrieve the current custom time. | |||
| * @return {Date} customTime | |||
| */ | |||
| Graph2d.prototype.getCustomTime = function() { | |||
| if (!this.customTime) { | |||
| throw new Error('Cannot get custom time: Custom time bar is not enabled'); | |||
| } | |||
| return this.customTime.getCustomTime(); | |||
| }; | |||
| /** | |||
| * Set items | |||
| * @param {vis.DataSet | Array | google.visualization.DataTable | null} items | |||
| */ | |||
| Graph2d.prototype.setItems = function(items) { | |||
| var initialLoad = (this.itemsData == null); | |||
| // convert to type DataSet when needed | |||
| var newDataSet; | |||
| if (!items) { | |||
| newDataSet = null; | |||
| } | |||
| else if (items instanceof DataSet || items instanceof DataView) { | |||
| newDataSet = items; | |||
| } | |||
| else { | |||
| // turn an array into a dataset | |||
| newDataSet = new DataSet(items, { | |||
| convert: { | |||
| start: 'Date', | |||
| end: 'Date' | |||
| } | |||
| }); | |||
| } | |||
| // set items | |||
| this.itemsData = newDataSet; | |||
| this.linegraph && this.linegraph.setItems(newDataSet); | |||
| if (initialLoad && ('start' in this.options || 'end' in this.options)) { | |||
| this.fit(); | |||
| var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null; | |||
| var end = ('end' in this.options) ? util.convert(this.options.end, 'Date') : null; | |||
| this.setWindow(start, end); | |||
| } | |||
| }; | |||
| /** | |||
| * Clear the Graph2d. By Default, items, groups and options are cleared. | |||
| * Example usage: | |||
| * | |||
| * timeline.clear(); // clear items, groups, and options | |||
| * timeline.clear({options: true}); // clear options only | |||
| * | |||
| * @param {Object} [what] Optionally specify what to clear. By default: | |||
| * {items: true, groups: true, options: true} | |||
| */ | |||
| Graph2d.prototype.clear = function(what) { | |||
| // clear items | |||
| if (!what || what.items) { | |||
| this.setItems(null); | |||
| } | |||
| // clear groups | |||
| if (!what || what.groups) { | |||
| this.setGroups(null); | |||
| } | |||
| // clear options of timeline and of each of the components | |||
| if (!what || what.options) { | |||
| this.components.forEach(function (component) { | |||
| component.setOptions(component.defaultOptions); | |||
| }); | |||
| this.setOptions(this.defaultOptions); // this will also do a redraw | |||
| } | |||
| }; | |||
| /** | |||
| * Set Timeline window such that it fits all items | |||
| */ | |||
| Graph2d.prototype.fit = function() { | |||
| // apply the data range as range | |||
| var dataRange = this.getItemRange(); | |||
| // add 5% space on both sides | |||
| var start = dataRange.min; | |||
| var end = dataRange.max; | |||
| if (start != null && end != null) { | |||
| var interval = (end.valueOf() - start.valueOf()); | |||
| if (interval <= 0) { | |||
| // prevent an empty interval | |||
| interval = 24 * 60 * 60 * 1000; // 1 day | |||
| } | |||
| start = new Date(start.valueOf() - interval * 0.05); | |||
| end = new Date(end.valueOf() + interval * 0.05); | |||
| } | |||
| // skip range set if there is no start and end date | |||
| if (start === null && end === null) { | |||
| return; | |||
| } | |||
| this.range.setRange(start, end); | |||
| }; | |||
| /** | |||
| * Get the data range of the item set. | |||
| * @returns {{min: Date, max: Date}} range A range with a start and end Date. | |||
| * When no minimum is found, min==null | |||
| * When no maximum is found, max==null | |||
| */ | |||
| Graph2d.prototype.getItemRange = function() { | |||
| // calculate min from start filed | |||
| var itemsData = this.itemsData, | |||
| min = null, | |||
| max = null; | |||
| if (itemsData) { | |||
| // calculate the minimum value of the field 'start' | |||
| var minItem = itemsData.min('start'); | |||
| min = minItem ? minItem.start.valueOf() : null; | |||
| // calculate maximum value of fields 'start' and 'end' | |||
| var maxStartItem = itemsData.max('start'); | |||
| if (maxStartItem) { | |||
| max = maxStartItem.start.valueOf(); | |||
| } | |||
| var maxEndItem = itemsData.max('end'); | |||
| if (maxEndItem) { | |||
| if (max == null) { | |||
| max = maxEndItem.end.valueOf(); | |||
| } | |||
| else { | |||
| max = Math.max(max, maxEndItem.end.valueOf()); | |||
| } | |||
| } | |||
| } | |||
| return { | |||
| min: (min != null) ? new Date(min) : null, | |||
| max: (max != null) ? new Date(max) : null | |||
| }; | |||
| }; | |||
| /** | |||
| * Set selected items by their id. Replaces the current selection | |||
| * Unknown id's are silently ignored. | |||
| * @param {Array} [ids] An array with zero or more id's of the items to be | |||
| * selected. If ids is an empty array, all items will be | |||
| * unselected. | |||
| */ | |||
| Graph2d.prototype.setSelection = function(ids) { | |||
| this.itemSet && this.itemSet.setSelection(ids); | |||
| }; | |||
| /** | |||
| * Get the selected items by their id | |||
| * @return {Array} ids The ids of the selected items | |||
| */ | |||
| Graph2d.prototype.getSelection = function() { | |||
| return this.itemSet && this.itemSet.getSelection() || []; | |||
| }; | |||
| /** | |||
| * Set the visible window. Both parameters are optional, you can change only | |||
| * start or only end. Syntax: | |||
| * | |||
| * TimeLine.setWindow(start, end) | |||
| * TimeLine.setWindow(range) | |||
| * | |||
| * Where start and end can be a Date, number, or string, and range is an | |||
| * object with properties start and end. | |||
| * | |||
| * @param {Date | Number | String | Object} [start] Start date of visible window | |||
| * @param {Date | Number | String} [end] End date of visible window | |||
| */ | |||
| Graph2d.prototype.setWindow = function(start, end) { | |||
| if (arguments.length == 1) { | |||
| var range = arguments[0]; | |||
| this.range.setRange(range.start, range.end); | |||
| } | |||
| else { | |||
| this.range.setRange(start, end); | |||
| } | |||
| }; | |||
| /** | |||
| * Get the visible window | |||
| * @return {{start: Date, end: Date}} Visible range | |||
| */ | |||
| Graph2d.prototype.getWindow = function() { | |||
| var range = this.range.getRange(); | |||
| return { | |||
| start: new Date(range.start), | |||
| end: new Date(range.end) | |||
| }; | |||
| }; | |||
| /** | |||
| * Force a redraw of the Graph2d. Can be useful to manually redraw when | |||
| * option autoResize=false | |||
| */ | |||
| Graph2d.prototype.redraw = function() { | |||
| var resized = false, | |||
| options = this.options, | |||
| props = this.props, | |||
| dom = this.dom; | |||
| // update class names | |||
| dom.root.className = 'vis timeline root ' + options.orientation; | |||
| // update root width and height options | |||
| dom.root.style.maxHeight = util.option.asSize(options.maxHeight, ''); | |||
| dom.root.style.minHeight = util.option.asSize(options.minHeight, ''); | |||
| dom.root.style.width = util.option.asSize(options.width, ''); | |||
| // calculate border widths | |||
| props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2; | |||
| props.border.right = props.border.left; | |||
| props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2; | |||
| props.border.bottom = props.border.top; | |||
| var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight; | |||
| var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth; | |||
| // calculate the heights. If any of the side panels is empty, we set the height to | |||
| // minus the border width, such that the border will be invisible | |||
| props.center.height = dom.center.offsetHeight; | |||
| props.left.height = dom.left.offsetHeight; | |||
| props.right.height = dom.right.offsetHeight; | |||
| props.top.height = dom.top.clientHeight || -props.border.top; | |||
| props.bottom.height = dom.bottom.clientHeight || -props.border.bottom; | |||
| // TODO: compensate borders when any of the panels is empty. | |||
| // apply auto height | |||
| // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM) | |||
| var contentHeight = Math.max(props.left.height, props.center.height, props.right.height); | |||
| var autoHeight = props.top.height + contentHeight + props.bottom.height + | |||
| borderRootHeight + props.border.top + props.border.bottom; | |||
| dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px'); | |||
| // calculate heights of the content panels | |||
| props.root.height = dom.root.offsetHeight; | |||
| props.background.height = props.root.height - borderRootHeight; | |||
| var containerHeight = props.root.height - props.top.height - props.bottom.height - | |||
| borderRootHeight; | |||
| props.centerContainer.height = containerHeight; | |||
| props.leftContainer.height = containerHeight; | |||
| props.rightContainer.height = props.leftContainer.height; | |||
| // calculate the widths of the panels | |||
| props.root.width = dom.root.offsetWidth; | |||
| props.background.width = props.root.width - borderRootWidth; | |||
| props.left.width = dom.leftContainer.clientWidth || -props.border.left; | |||
| props.leftContainer.width = props.left.width; | |||
| props.right.width = dom.rightContainer.clientWidth || -props.border.right; | |||
| props.rightContainer.width = props.right.width; | |||
| var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth; | |||
| props.center.width = centerWidth; | |||
| props.centerContainer.width = centerWidth; | |||
| props.top.width = centerWidth; | |||
| props.bottom.width = centerWidth; | |||
| // resize the panels | |||
| dom.background.style.height = props.background.height + 'px'; | |||
| dom.backgroundVertical.style.height = props.background.height + 'px'; | |||
| dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px'; | |||
| dom.centerContainer.style.height = props.centerContainer.height + 'px'; | |||
| dom.leftContainer.style.height = props.leftContainer.height + 'px'; | |||
| dom.rightContainer.style.height = props.rightContainer.height + 'px'; | |||
| dom.background.style.width = props.background.width + 'px'; | |||
| dom.backgroundVertical.style.width = props.centerContainer.width + 'px'; | |||
| dom.backgroundHorizontal.style.width = props.background.width + 'px'; | |||
| dom.centerContainer.style.width = props.center.width + 'px'; | |||
| dom.top.style.width = props.top.width + 'px'; | |||
| dom.bottom.style.width = props.bottom.width + 'px'; | |||
| // reposition the panels | |||
| dom.background.style.left = '0'; | |||
| dom.background.style.top = '0'; | |||
| dom.backgroundVertical.style.left = props.left.width + 'px'; | |||
| dom.backgroundVertical.style.top = '0'; | |||
| dom.backgroundHorizontal.style.left = '0'; | |||
| dom.backgroundHorizontal.style.top = props.top.height + 'px'; | |||
| dom.centerContainer.style.left = props.left.width + 'px'; | |||
| dom.centerContainer.style.top = props.top.height + 'px'; | |||
| dom.leftContainer.style.left = '0'; | |||
| dom.leftContainer.style.top = props.top.height + 'px'; | |||
| dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px'; | |||
| dom.rightContainer.style.top = props.top.height + 'px'; | |||
| dom.top.style.left = props.left.width + 'px'; | |||
| dom.top.style.top = '0'; | |||
| dom.bottom.style.left = props.left.width + 'px'; | |||
| dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px'; | |||
| // reposition the scrollable contents | |||
| var offset; | |||
| if (options.orientation == 'top') { | |||
| offset = 0; | |||
| } | |||
| else { // orientation == 'bottom' | |||
| // keep the items aligned to the axis at the bottom | |||
| offset = props.centerContainer.height - props.center.height; | |||
| } | |||
| dom.center.style.left = '0'; | |||
| dom.center.style.top = offset+ 'px'; | |||
| dom.left.style.left = '0'; | |||
| dom.left.style.top = offset+ 'px'; | |||
| dom.right.style.left = '0'; | |||
| dom.right.style.top = offset+ 'px'; | |||
| // redraw all components | |||
| this.components.forEach(function (component) { | |||
| resized = component.redraw() || resized; | |||
| }); | |||
| if (resized) { | |||
| // keep repainting until all sizes are settled | |||
| this.redraw(); | |||
| } | |||
| }; | |||
| // TODO: deprecated since version 1.1.0, remove some day | |||
| Graph2d.prototype.repaint = function () { | |||
| throw new Error('Function repaint is deprecated. Use redraw instead.'); | |||
| }; | |||
| /** | |||
| * Convert a position on screen (pixels) to a datetime | |||
| * @param {int} x Position on the screen in pixels | |||
| * @return {Date} time The datetime the corresponds with given position x | |||
| * @private | |||
| */ | |||
| // TODO: move this function to Range | |||
| Graph2d.prototype._toTime = function(x) { | |||
| var conversion = this.range.conversion(this.props.center.width); | |||
| return new Date(x / conversion.scale + conversion.offset); | |||
| }; | |||
| /** | |||
| * Convert a datetime (Date object) into a position on the screen | |||
| * @param {Date} time A date | |||
| * @return {int} x The position on the screen in pixels which corresponds | |||
| * with the given date. | |||
| * @private | |||
| */ | |||
| // TODO: move this function to Range | |||
| Graph2d.prototype._toScreen = function(time) { | |||
| var conversion = this.range.conversion(this.props.center.width); | |||
| return (time.valueOf() - conversion.offset) * conversion.scale; | |||
| }; | |||
| /** | |||
| * Initialize watching when option autoResize is true | |||
| * @private | |||
| */ | |||
| Graph2d.prototype._initAutoResize = function () { | |||
| if (this.options.autoResize == true) { | |||
| this._startAutoResize(); | |||
| } | |||
| else { | |||
| this._stopAutoResize(); | |||
| } | |||
| }; | |||
| /** | |||
| * Watch for changes in the size of the container. On resize, the Panel will | |||
| * automatically redraw itself. | |||
| * @private | |||
| */ | |||
| Graph2d.prototype._startAutoResize = function () { | |||
| var me = this; | |||
| this._stopAutoResize(); | |||
| function checkSize() { | |||
| if (me.options.autoResize != true) { | |||
| // stop watching when the option autoResize is changed to false | |||
| me._stopAutoResize(); | |||
| return; | |||
| } | |||
| if (me.dom.root) { | |||
| // check whether the frame is resized | |||
| if ((me.dom.root.clientWidth != me.props.lastWidth) || | |||
| (me.dom.root.clientHeight != me.props.lastHeight)) { | |||
| me.props.lastWidth = me.dom.root.clientWidth; | |||
| me.props.lastHeight = me.dom.root.clientHeight; | |||
| me.emit('change'); | |||
| } | |||
| } | |||
| } | |||
| // TODO: automatically cleanup the event listener when the frame is deleted | |||
| util.addEventListener(window, 'resize', checkSize); | |||
| this.watchTimer = setInterval(checkSize, 1000); | |||
| }; | |||
| /** | |||
| * Stop watching for a resize of the frame. | |||
| * @private | |||
| */ | |||
| Graph2d.prototype._stopAutoResize = function () { | |||
| if (this.watchTimer) { | |||
| clearInterval(this.watchTimer); | |||
| this.watchTimer = undefined; | |||
| } | |||
| // TODO: remove event listener on window.resize | |||
| }; | |||
+ 204
- 268
src/timeline/component/Linegraph.js
View File
+ 340
- 0
src/timeline/component/Linegraph2.js
View File
| @ -0,0 +1,340 @@ | |||
| /** | |||
| * 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(); | |||
| } | |||
| } | |||