diff --git a/dist/vis.js b/dist/vis.js
index 5d27fc6b..e6806800 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -100,33 +100,33 @@ return /******/ (function(modules) { // webpackBootstrap
// Timeline
exports.Timeline = __webpack_require__(17);
- exports.Graph2d = __webpack_require__(41);
+ exports.Graph2d = __webpack_require__(33);
exports.timeline = {
DateUtil: __webpack_require__(23),
- DataStep: __webpack_require__(44),
+ DataStep: __webpack_require__(36),
Range: __webpack_require__(20),
- stack: __webpack_require__(32),
+ stack: __webpack_require__(39),
TimeStep: __webpack_require__(26),
components: {
items: {
- Item: __webpack_require__(34),
- BackgroundItem: __webpack_require__(38),
- BoxItem: __webpack_require__(36),
- PointItem: __webpack_require__(37),
- RangeItem: __webpack_require__(33)
+ Item: __webpack_require__(40),
+ BackgroundItem: __webpack_require__(41),
+ BoxItem: __webpack_require__(45),
+ PointItem: __webpack_require__(46),
+ RangeItem: __webpack_require__(44)
},
Component: __webpack_require__(22),
CurrentTime: __webpack_require__(27),
CustomTime: __webpack_require__(29),
- DataAxis: __webpack_require__(43),
- GraphGroup: __webpack_require__(45),
- Group: __webpack_require__(31),
- BackgroundGroup: __webpack_require__(35),
+ DataAxis: __webpack_require__(35),
+ GraphGroup: __webpack_require__(37),
+ Group: __webpack_require__(43),
+ BackgroundGroup: __webpack_require__(42),
ItemSet: __webpack_require__(30),
- Legend: __webpack_require__(46),
- LineGraph: __webpack_require__(42),
+ Legend: __webpack_require__(38),
+ LineGraph: __webpack_require__(34),
TimeAxis: __webpack_require__(25)
}
};
@@ -13057,7 +13057,7 @@ return /******/ (function(modules) { // webpackBootstrap
var CurrentTime = __webpack_require__(27);
var CustomTime = __webpack_require__(29);
var ItemSet = __webpack_require__(30);
- var Activator = __webpack_require__(39);
+ var Activator = __webpack_require__(31);
var DateUtil = __webpack_require__(23);
/**
@@ -15231,12 +15231,12 @@ return /******/ (function(modules) { // webpackBootstrap
var DataSet = __webpack_require__(7);
var DataView = __webpack_require__(8);
var Component = __webpack_require__(22);
- var Group = __webpack_require__(31);
- var BackgroundGroup = __webpack_require__(35);
- var BoxItem = __webpack_require__(36);
- var PointItem = __webpack_require__(37);
- var RangeItem = __webpack_require__(33);
- var BackgroundItem = __webpack_require__(38);
+ var Group = __webpack_require__(43);
+ var BackgroundGroup = __webpack_require__(42);
+ var BoxItem = __webpack_require__(45);
+ var PointItem = __webpack_require__(46);
+ var RangeItem = __webpack_require__(44);
+ var BackgroundItem = __webpack_require__(41);
var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
@@ -15806,15 +15806,15 @@ return /******/ (function(modules) { // webpackBootstrap
ungrouped.hide();
delete this.groups[UNGROUPED];
- // var background = this.groups[BACKGROUND];
- // for (itemId in this.items) {
- // if (this.items.hasOwnProperty(itemId)) {
- // item = this.items[itemId];
- // if ((item instanceof BackgroundItem)) {
- // background.add(item);
- // }
- // }
- // }
+ for (itemId in this.items) {
+ if (this.items.hasOwnProperty(itemId)) {
+ item = this.items[itemId];
+ item.parent && item.parent.remove(item);
+ var groupId = this._getGroupId(item.data);
+ var group = this.groups[groupId];
+ group && group.add(item) || item.hide();
+ }
+ }
}
}
else {
@@ -16005,7 +16005,7 @@ return /******/ (function(modules) { // webpackBootstrap
ItemSet.prototype._getGroupId = function (itemData) {
var type = this._getType(itemData);
if (type == 'background') {
- return itemData.group != undefined ? itemData.group : BACKGROUND;
+ return this.groupsData && itemData.group != undefined ? itemData.group : BACKGROUND;
}
else {
return this.groupsData ? itemData.group : UNGROUPED;
@@ -16705,4382 +16705,4260 @@ return /******/ (function(modules) { // webpackBootstrap
/* 31 */
/***/ function(module, exports, __webpack_require__) {
+ var mousetrap = __webpack_require__(32);
+ var Emitter = __webpack_require__(10);
+ var Hammer = __webpack_require__(18);
var util = __webpack_require__(1);
- var stack = __webpack_require__(32);
- var RangeItem = __webpack_require__(33);
- var DateUtil = __webpack_require__(23);
/**
- * @constructor Group
- * @param {Number | String} groupId
- * @param {Object} data
- * @param {ItemSet} itemSet
+ * Turn an element into an clickToUse element.
+ * When not active, the element has a transparent overlay. When the overlay is
+ * clicked, the mode is changed to active.
+ * When active, the element is displayed with a blue border around it, and
+ * the interactive contents of the element can be used. When clicked outside
+ * the element, the elements mode is changed to inactive.
+ * @param {Element} container
+ * @constructor
*/
- function Group (groupId, data, itemSet) {
- this.groupId = groupId;
- this.subgroups = {};
- this.visibleSubgroups = 0;
- this.itemSet = itemSet;
+ function Activator(container) {
+ this.active = false;
- this.dom = {};
- this.props = {
- label: {
- width: 0,
- height: 0
- }
+ this.dom = {
+ container: container
};
- this.className = null;
- this.items = {}; // items filtered by groupId of this group
- this.visibleItems = []; // items currently visible in window
- this.orderedItems = { // items sorted by start and by end
- byStart: [],
- byEnd: []
- };
+ this.dom.overlay = document.createElement('div');
+ this.dom.overlay.className = 'overlay';
- this._create();
+ this.dom.container.appendChild(this.dom.overlay);
- this.setData(data);
- }
+ this.hammer = Hammer(this.dom.overlay, {prevent_default: false});
+ this.hammer.on('tap', this._onTapOverlay.bind(this));
- /**
- * Create DOM elements for the group
- * @private
- */
- Group.prototype._create = function() {
- var label = document.createElement('div');
- label.className = 'vlabel';
- this.dom.label = label;
+ // block all touch events (except tap)
+ var me = this;
+ var events = [
+ 'touch', 'pinch',
+ 'doubletap', 'hold',
+ 'dragstart', 'drag', 'dragend',
+ 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+ ];
+ events.forEach(function (event) {
+ me.hammer.on(event, function (event) {
+ event.stopPropagation();
+ });
+ });
- var inner = document.createElement('div');
- inner.className = 'inner';
- label.appendChild(inner);
- this.dom.inner = inner;
+ // attach a tap event to the window, in order to deactivate when clicking outside the timeline
+ this.windowHammer = Hammer(window, {prevent_default: false});
+ this.windowHammer.on('tap', function (event) {
+ // deactivate when clicked outside the container
+ if (!_hasParent(event.target, container)) {
+ me.deactivate();
+ }
+ });
- var foreground = document.createElement('div');
- foreground.className = 'group';
- foreground['timeline-group'] = this;
- this.dom.foreground = foreground;
+ // mousetrap listener only bounded when active)
+ this.escListener = this.deactivate.bind(this);
+ }
- this.dom.background = document.createElement('div');
- this.dom.background.className = 'group';
+ // turn into an event emitter
+ Emitter(Activator.prototype);
- this.dom.axis = document.createElement('div');
- this.dom.axis.className = 'group';
+ // The currently active activator
+ Activator.current = null;
- // create a hidden marker to detect when the Timelines container is attached
- // to the DOM, or the style of a parent of the Timeline is changed from
- // display:none is changed to visible.
- this.dom.marker = document.createElement('div');
- this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
- this.dom.marker.innerHTML = '?';
- this.dom.background.appendChild(this.dom.marker);
+ /**
+ * Destroy the activator. Cleans up all created DOM and event listeners
+ */
+ Activator.prototype.destroy = function () {
+ this.deactivate();
+
+ // remove dom
+ this.dom.overlay.parentNode.removeChild(this.dom.overlay);
+
+ // cleanup hammer instances
+ this.hammer = null;
+ this.windowHammer = null;
+ // FIXME: cleaning up hammer instances doesn't work (Timeline not removed from memory)
};
/**
- * Set the group data for this group
- * @param {Object} data Group data, can contain properties content and className
+ * Activate the element
+ * Overlay is hidden, element is decorated with a blue shadow border
*/
- Group.prototype.setData = function(data) {
- // update contents
- var content = data && data.content;
- if (content instanceof Element) {
- this.dom.inner.appendChild(content);
- }
- else if (content !== undefined && content !== null) {
- this.dom.inner.innerHTML = content;
- }
- else {
- this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
+ Activator.prototype.activate = function () {
+ // we allow only one active activator at a time
+ if (Activator.current) {
+ Activator.current.deactivate();
}
+ Activator.current = this;
- // update title
- this.dom.label.title = data && data.title || '';
-
- if (!this.dom.inner.firstChild) {
- util.addClassName(this.dom.inner, 'hidden');
- }
- else {
- util.removeClassName(this.dom.inner, 'hidden');
- }
+ this.active = true;
+ this.dom.overlay.style.display = 'none';
+ util.addClassName(this.dom.container, 'vis-active');
- // update className
- var className = data && data.className || null;
- if (className != this.className) {
- if (this.className) {
- util.removeClassName(this.dom.label, this.className);
- util.removeClassName(this.dom.foreground, this.className);
- util.removeClassName(this.dom.background, this.className);
- util.removeClassName(this.dom.axis, this.className);
- }
- util.addClassName(this.dom.label, className);
- util.addClassName(this.dom.foreground, className);
- util.addClassName(this.dom.background, className);
- util.addClassName(this.dom.axis, className);
- this.className = className;
- }
+ this.emit('change');
+ this.emit('activate');
- // update style
- if (this.style) {
- util.removeCssText(this.dom.label, this.style);
- this.style = null;
- }
- if (data && data.style) {
- util.addCssText(this.dom.label, data.style);
- this.style = data.style;
- }
+ // ugly hack: bind ESC after emitting the events, as the Network rebinds all
+ // keyboard events on a 'change' event
+ mousetrap.bind('esc', this.escListener);
};
/**
- * Get the width of the group label
- * @return {number} width
+ * Deactivate the element
+ * Overlay is displayed on top of the element
*/
- Group.prototype.getLabelWidth = function() {
- return this.props.label.width;
- };
+ Activator.prototype.deactivate = function () {
+ this.active = false;
+ this.dom.overlay.style.display = '';
+ util.removeClassName(this.dom.container, 'vis-active');
+ mousetrap.unbind('esc', this.escListener);
+ this.emit('change');
+ this.emit('deactivate');
+ };
/**
- * Repaint this group
- * @param {{start: number, end: number}} range
- * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
- * @param {boolean} [restack=false] Force restacking of all items
- * @return {boolean} Returns true if the group is resized
+ * Handle a tap event: activate the container
+ * @param event
+ * @private
*/
- Group.prototype.redraw = function(range, margin, restack) {
- var resized = false;
-
- this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
-
- // force recalculation of the height of the items when the marker height changed
- // (due to the Timeline being attached to the DOM or changed from display:none to visible)
- var markerHeight = this.dom.marker.clientHeight;
- if (markerHeight != this.lastMarkerHeight) {
- this.lastMarkerHeight = markerHeight;
-
- util.forEach(this.items, function (item) {
- item.dirty = true;
- if (item.displayed) item.redraw();
- });
+ Activator.prototype._onTapOverlay = function (event) {
+ // activate the container
+ this.activate();
+ event.stopPropagation();
+ };
- restack = true;
+ /**
+ * Test whether the element has the requested parent element somewhere in
+ * its chain of parent nodes.
+ * @param {HTMLElement} element
+ * @param {HTMLElement} parent
+ * @returns {boolean} Returns true when the parent is found somewhere in the
+ * chain of parent nodes.
+ * @private
+ */
+ function _hasParent(element, parent) {
+ while (element) {
+ if (element === parent) {
+ return true
+ }
+ element = element.parentNode;
}
+ return false;
+ }
- // reposition visible items vertically
- if (this.itemSet.options.stack) { // TODO: ugly way to access options...
- stack.stack(this.visibleItems, margin, restack);
- }
- else { // no stacking
- stack.nostack(this.visibleItems, margin, this.subgroups);
- }
+ module.exports = Activator;
- // recalculate the height of the group
- var height = this._calculateHeight(margin);
- // calculate actual size and position
- var foreground = this.dom.foreground;
- this.top = foreground.offsetTop;
- this.left = foreground.offsetLeft;
- this.width = foreground.offsetWidth;
- resized = util.updateProperty(this, 'height', height) || resized;
-
- // recalculate size of label
- resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
- resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
-
- // apply new height
- this.dom.background.style.height = height + 'px';
- this.dom.foreground.style.height = height + 'px';
- this.dom.label.style.height = height + 'px';
-
- // update vertical position of items after they are re-stacked and the height of the group is calculated
- for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
- var item = this.visibleItems[i];
- item.repositionY(margin);
- }
-
- return resized;
- };
+/***/ },
+/* 32 */
+/***/ function(module, exports, __webpack_require__) {
/**
- * recalculate the height of the group
- * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
- * @returns {number} Returns the heigh
- * @private
+ * Copyright 2012 Craig Campbell
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Mousetrap is a simple keyboard shortcut library for Javascript with
+ * no external dependencies
+ *
+ * @version 1.1.2
+ * @url craig.is/killing/mice
*/
- Group.prototype._calculateHeight = function (margin) {
- // recalculate the height of the group
- var height;
- var visibleItems = this.visibleItems;
- //var visibleSubgroups = [];
- //this.visibleSubgroups = 0;
- this.resetSubgroups();
- var me = this;
- if (visibleItems.length) {
- var min = visibleItems[0].top;
- var max = visibleItems[0].top + visibleItems[0].height;
- util.forEach(visibleItems, function (item) {
- min = Math.min(min, item.top);
- max = Math.max(max, (item.top + item.height));
- if (item.data.subgroup !== undefined) {
- me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height,item.height);
- me.subgroups[item.data.subgroup].visible = true;
- //if (visibleSubgroups.indexOf(item.data.subgroup) == -1){
- // visibleSubgroups.push(item.data.subgroup);
- // me.visibleSubgroups += 1;
- //}
- }
- });
- if (min > margin.axis) {
- // there is an empty gap between the lowest item and the axis
- var offset = min - margin.axis;
- max -= offset;
- util.forEach(visibleItems, function (item) {
- item.top -= offset;
- });
- }
- height = max + margin.item.vertical / 2;
- }
- else {
- height = margin.axis + margin.item.vertical;
- }
- height = Math.max(height, this.props.label.height);
- return height;
- };
+ /**
+ * mapping of special keycodes to their corresponding keys
+ *
+ * everything in this dictionary cannot use keypress events
+ * so it has to be here to map to the correct keycodes for
+ * keyup/keydown events
+ *
+ * @type {Object}
+ */
+ var _MAP = {
+ 8: 'backspace',
+ 9: 'tab',
+ 13: 'enter',
+ 16: 'shift',
+ 17: 'ctrl',
+ 18: 'alt',
+ 20: 'capslock',
+ 27: 'esc',
+ 32: 'space',
+ 33: 'pageup',
+ 34: 'pagedown',
+ 35: 'end',
+ 36: 'home',
+ 37: 'left',
+ 38: 'up',
+ 39: 'right',
+ 40: 'down',
+ 45: 'ins',
+ 46: 'del',
+ 91: 'meta',
+ 93: 'meta',
+ 224: 'meta'
+ },
- /**
- * Show this group: attach to the DOM
- */
- Group.prototype.show = function() {
- if (!this.dom.label.parentNode) {
- this.itemSet.dom.labelSet.appendChild(this.dom.label);
- }
+ /**
+ * mapping for special characters so they can support
+ *
+ * this dictionary is only used incase you want to bind a
+ * keyup or keydown event to one of these keys
+ *
+ * @type {Object}
+ */
+ _KEYCODE_MAP = {
+ 106: '*',
+ 107: '+',
+ 109: '-',
+ 110: '.',
+ 111 : '/',
+ 186: ';',
+ 187: '=',
+ 188: ',',
+ 189: '-',
+ 190: '.',
+ 191: '/',
+ 192: '`',
+ 219: '[',
+ 220: '\\',
+ 221: ']',
+ 222: '\''
+ },
- if (!this.dom.foreground.parentNode) {
- this.itemSet.dom.foreground.appendChild(this.dom.foreground);
- }
+ /**
+ * this is a mapping of keys that require shift on a US keypad
+ * back to the non shift equivelents
+ *
+ * this is so you can use keyup events with these keys
+ *
+ * note that this will only work reliably on US keyboards
+ *
+ * @type {Object}
+ */
+ _SHIFT_MAP = {
+ '~': '`',
+ '!': '1',
+ '@': '2',
+ '#': '3',
+ '$': '4',
+ '%': '5',
+ '^': '6',
+ '&': '7',
+ '*': '8',
+ '(': '9',
+ ')': '0',
+ '_': '-',
+ '+': '=',
+ ':': ';',
+ '\"': '\'',
+ '<': ',',
+ '>': '.',
+ '?': '/',
+ '|': '\\'
+ },
- if (!this.dom.background.parentNode) {
- this.itemSet.dom.background.appendChild(this.dom.background);
- }
+ /**
+ * this is a list of special strings you can use to map
+ * to modifier keys when you specify your keyboard shortcuts
+ *
+ * @type {Object}
+ */
+ _SPECIAL_ALIASES = {
+ 'option': 'alt',
+ 'command': 'meta',
+ 'return': 'enter',
+ 'escape': 'esc'
+ },
- if (!this.dom.axis.parentNode) {
- this.itemSet.dom.axis.appendChild(this.dom.axis);
- }
- };
+ /**
+ * variable to store the flipped version of _MAP from above
+ * needed to check if we should use keypress or not when no action
+ * is specified
+ *
+ * @type {Object|undefined}
+ */
+ _REVERSE_MAP,
- /**
- * Hide this group: remove from the DOM
- */
- Group.prototype.hide = function() {
- var label = this.dom.label;
- if (label.parentNode) {
- label.parentNode.removeChild(label);
- }
+ /**
+ * a list of all the callbacks setup via Mousetrap.bind()
+ *
+ * @type {Object}
+ */
+ _callbacks = {},
- var foreground = this.dom.foreground;
- if (foreground.parentNode) {
- foreground.parentNode.removeChild(foreground);
- }
+ /**
+ * direct map of string combinations to callbacks used for trigger()
+ *
+ * @type {Object}
+ */
+ _direct_map = {},
- var background = this.dom.background;
- if (background.parentNode) {
- background.parentNode.removeChild(background);
- }
+ /**
+ * keeps track of what level each sequence is at since multiple
+ * sequences can start out with the same sequence
+ *
+ * @type {Object}
+ */
+ _sequence_levels = {},
- var axis = this.dom.axis;
- if (axis.parentNode) {
- axis.parentNode.removeChild(axis);
- }
- };
+ /**
+ * variable to store the setTimeout call
+ *
+ * @type {null|number}
+ */
+ _reset_timer,
- /**
- * Add an item to the group
- * @param {Item} item
- */
- Group.prototype.add = function(item) {
- this.items[item.id] = item;
- item.setParent(this);
+ /**
+ * temporary state where we will ignore the next keyup
+ *
+ * @type {boolean|string}
+ */
+ _ignore_next_keyup = false,
- // add to
- var index = 0;
- if (item.data.subgroup !== undefined) {
- if (this.subgroups[item.data.subgroup] === undefined) {
- this.subgroups[item.data.subgroup] = {height:0, visible: false, index:index};
- index++;
- }
- }
+ /**
+ * are we currently inside of a sequence?
+ * type of action ("keyup" or "keydown" or "keypress") or false
+ *
+ * @type {boolean|string}
+ */
+ _inside_sequence = false;
- if (this.visibleItems.indexOf(item) == -1) {
- var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
- this._checkIfVisible(item, this.visibleItems, range);
+ /**
+ * loop through the f keys, f1 to f19 and add them to the map
+ * programatically
+ */
+ for (var i = 1; i < 20; ++i) {
+ _MAP[111 + i] = 'f' + i;
}
- };
- Group.prototype.resetSubgroups = function() {
- for (var subgroup in this.subgroups) {
- if (this.subgroups.hasOwnProperty(subgroup)) {
- this.subgroups[subgroup].visible = false;
- }
+ /**
+ * loop through to map numbers on the numeric keypad
+ */
+ for (i = 0; i <= 9; ++i) {
+ _MAP[i + 96] = i;
}
- };
-
- /**
- * Remove an item from the group
- * @param {Item} item
- */
- Group.prototype.remove = function(item) {
- delete this.items[item.id];
- item.setParent(this.itemSet);
- // remove from visible items
- var index = this.visibleItems.indexOf(item);
- if (index != -1) this.visibleItems.splice(index, 1);
+ /**
+ * cross browser add event method
+ *
+ * @param {Element|HTMLDocument} object
+ * @param {string} type
+ * @param {Function} callback
+ * @returns void
+ */
+ function _addEvent(object, type, callback) {
+ if (object.addEventListener) {
+ return object.addEventListener(type, callback, false);
+ }
- // TODO: also remove from ordered items?
- };
+ object.attachEvent('on' + type, callback);
+ }
- /**
- * Remove an item from the corresponding DataSet
- * @param {Item} item
- */
- Group.prototype.removeFromDataSet = function(item) {
- this.itemSet.removeItem(item.id);
- };
+ /**
+ * takes the event and returns the key character
+ *
+ * @param {Event} e
+ * @return {string}
+ */
+ function _characterFromEvent(e) {
- /**
- * Reorder the items
- */
- Group.prototype.order = function() {
- var array = util.toArray(this.items);
- this.orderedItems.byStart = array;
- this.orderedItems.byEnd = this._constructByEndArray(array);
+ // for keypress events we should return the character as is
+ if (e.type == 'keypress') {
+ return String.fromCharCode(e.which);
+ }
- stack.orderByStart(this.orderedItems.byStart);
- stack.orderByEnd(this.orderedItems.byEnd);
- };
+ // for non keypress events the special maps are needed
+ if (_MAP[e.which]) {
+ return _MAP[e.which];
+ }
- /**
- * Create an array containing all items being a range (having an end date)
- * @param {Item[]} array
- * @returns {RangeItem[]}
- * @private
- */
- Group.prototype._constructByEndArray = function(array) {
- var endArray = [];
+ if (_KEYCODE_MAP[e.which]) {
+ return _KEYCODE_MAP[e.which];
+ }
- for (var i = 0; i < array.length; i++) {
- if (array[i] instanceof RangeItem) {
- endArray.push(array[i]);
- }
+ // if it is not in the special map
+ return String.fromCharCode(e.which).toLowerCase();
}
- return endArray;
- };
- /**
- * Update the visible items
- * @param {{byStart: Item[], byEnd: Item[]}} orderedItems All items ordered by start date and by end date
- * @param {Item[]} visibleItems The previously visible items.
- * @param {{start: number, end: number}} range Visible range
- * @return {Item[]} visibleItems The new visible items.
- * @private
- */
- Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
- var initialPosByStart,
- newVisibleItems = [],
- i;
+ /**
+ * should we stop this event before firing off callbacks
+ *
+ * @param {Event} e
+ * @return {boolean}
+ */
+ function _stop(e) {
+ var element = e.target || e.srcElement,
+ tag_name = element.tagName;
- // first check if the items that were in view previously are still in view.
- // this handles the case for the RangeItem that is both before and after the current one.
- if (visibleItems.length > 0) {
- for (i = 0; i < visibleItems.length; i++) {
- this._checkIfVisible(visibleItems[i], newVisibleItems, range);
- }
- }
+ // if the element has the class "mousetrap" then no need to stop
+ if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
+ return false;
+ }
- // If there were no visible items previously, use binarySearch to find a visible PointItem or RangeItem (based on startTime)
- if (newVisibleItems.length == 0) {
- initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
+ // stop for input, select, and textarea
+ return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
}
- else {
- initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
+
+ /**
+ * checks if two arrays are equal
+ *
+ * @param {Array} modifiers1
+ * @param {Array} modifiers2
+ * @returns {boolean}
+ */
+ function _modifiersMatch(modifiers1, modifiers2) {
+ return modifiers1.sort().join(',') === modifiers2.sort().join(',');
}
- // use visible search to find a visible RangeItem (only based on endTime)
- var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
+ /**
+ * resets all sequence counters except for the ones passed in
+ *
+ * @param {Object} do_not_reset
+ * @returns void
+ */
+ function _resetSequences(do_not_reset) {
+ do_not_reset = do_not_reset || {};
- // if we found a initial ID to use, trace it up and down until we meet an invisible item.
- if (initialPosByStart != -1) {
- for (i = initialPosByStart; i >= 0; i--) {
- if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
- }
- for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
- if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
- }
- }
+ var active_sequences = false,
+ key;
- // if we found a initial ID to use, trace it up and down until we meet an invisible item.
- if (initialPosByEnd != -1) {
- for (i = initialPosByEnd; i >= 0; i--) {
- if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
- }
- for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
- if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
- }
+ for (key in _sequence_levels) {
+ if (do_not_reset[key]) {
+ active_sequences = true;
+ continue;
+ }
+ _sequence_levels[key] = 0;
+ }
+
+ if (!active_sequences) {
+ _inside_sequence = false;
+ }
}
- return newVisibleItems;
- };
+ /**
+ * finds all callbacks that match based on the keycode, modifiers,
+ * and action
+ *
+ * @param {string} character
+ * @param {Array} modifiers
+ * @param {string} action
+ * @param {boolean=} remove - should we remove any matches
+ * @param {string=} combination
+ * @returns {Array}
+ */
+ function _getMatches(character, modifiers, action, remove, combination) {
+ var i,
+ callback,
+ matches = [];
+ // if there are no events related to this keycode
+ if (!_callbacks[character]) {
+ return [];
+ }
+ // if a modifier key is coming up on its own we should allow it
+ if (action == 'keyup' && _isModifier(character)) {
+ modifiers = [character];
+ }
- /**
- * this function checks if an item is invisible. If it is NOT we make it visible
- * and add it to the global visible items. If it is, return true.
- *
- * @param {Item} item
- * @param {Item[]} visibleItems
- * @param {{start:number, end:number}} range
- * @returns {boolean}
- * @private
- */
- Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
- if (item.isVisible(range)) {
- if (!item.displayed) item.show();
- item.repositionX();
- if (visibleItems.indexOf(item) == -1) {
- visibleItems.push(item);
- }
- return false;
- }
- else {
- if (item.displayed) item.hide();
- return true;
- }
- };
+ // loop through all callbacks for the key that was pressed
+ // and see if any of them match
+ for (i = 0; i < _callbacks[character].length; ++i) {
+ callback = _callbacks[character][i];
- /**
- * this function is very similar to the _checkIfInvisible() but it does not
- * return booleans, hides the item if it should not be seen and always adds to
- * the visibleItems.
- * this one is for brute forcing and hiding.
- *
- * @param {Item} item
- * @param {Array} visibleItems
- * @param {{start:number, end:number}} range
- * @private
- */
- Group.prototype._checkIfVisible = function(item, visibleItems, range) {
- if (item.isVisible(range)) {
- if (!item.displayed) item.show();
- // reposition item horizontally
- item.repositionX();
- visibleItems.push(item);
- }
- else {
- if (item.displayed) item.hide();
- }
- };
+ // if this is a sequence but it is not at the right level
+ // then move onto the next match
+ if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
+ continue;
+ }
- module.exports = Group;
+ // if the action we are looking for doesn't match the action we got
+ // then we should keep going
+ if (action != callback.action) {
+ continue;
+ }
+ // if this is a keypress event that means that we need to only
+ // look at the character, otherwise check the modifiers as
+ // well
+ if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
-/***/ },
-/* 32 */
-/***/ function(module, exports, __webpack_require__) {
+ // remove is used so if you change your mind and call bind a
+ // second time with a new function the first one is overwritten
+ if (remove && callback.combo == combination) {
+ _callbacks[character].splice(i, 1);
+ }
- // Utility functions for ordering and stacking of items
- var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
+ matches.push(callback);
+ }
+ }
- /**
- * Order items by their start data
- * @param {Item[]} items
- */
- exports.orderByStart = function(items) {
- items.sort(function (a, b) {
- return a.data.start - b.data.start;
- });
- };
+ return matches;
+ }
- /**
- * Order items by their end date. If they have no end date, their start date
- * is used.
- * @param {Item[]} items
- */
- exports.orderByEnd = function(items) {
- items.sort(function (a, b) {
- var aTime = ('end' in a.data) ? a.data.end : a.data.start,
- bTime = ('end' in b.data) ? b.data.end : b.data.start;
+ /**
+ * takes a key event and figures out what the modifiers are
+ *
+ * @param {Event} e
+ * @returns {Array}
+ */
+ function _eventModifiers(e) {
+ var modifiers = [];
- return aTime - bTime;
- });
- };
+ if (e.shiftKey) {
+ modifiers.push('shift');
+ }
- /**
- * Adjust vertical positions of the items such that they don't overlap each
- * other.
- * @param {Item[]} items
- * All visible items
- * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
- * Margins between items and between items and the axis.
- * @param {boolean} [force=false]
- * If true, all items will be repositioned. If false (default), only
- * items having a top===null will be re-stacked
- */
- exports.stack = function(items, margin, force) {
- var i, iMax;
+ if (e.altKey) {
+ modifiers.push('alt');
+ }
- if (force) {
- // reset top position of all items
- for (i = 0, iMax = items.length; i < iMax; i++) {
- items[i].top = null;
- }
+ if (e.ctrlKey) {
+ modifiers.push('ctrl');
+ }
+
+ if (e.metaKey) {
+ modifiers.push('meta');
+ }
+
+ return modifiers;
}
- // calculate new, non-overlapping positions
- for (i = 0, iMax = items.length; i < iMax; i++) {
- var item = items[i];
- if (item.top === null) {
- // initialize top position
- item.top = margin.axis;
+ /**
+ * actually calls the callback function
+ *
+ * if your callback function returns false this will use the jquery
+ * convention - prevent default and stop propogation on the event
+ *
+ * @param {Function} callback
+ * @param {Event} e
+ * @returns void
+ */
+ function _fireCallback(callback, e) {
+ if (callback(e) === false) {
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
- do {
- // TODO: optimize checking for overlap. when there is a gap without items,
- // you only need to check for items from the next item on, not from zero
- var collidingItem = null;
- for (var j = 0, jj = items.length; j < jj; j++) {
- var other = items[j];
- if (other.top !== null && other !== item && other.ignoreStacking == false && exports.collision(item, other, margin.item)) {
- collidingItem = other;
- break;
+ if (e.stopPropagation) {
+ e.stopPropagation();
}
- }
- if (collidingItem != null) {
- // There is a collision. Reposition the items above the colliding element
- item.top = collidingItem.top + collidingItem.height + margin.item.vertical;
- }
- } while (collidingItem);
- }
+ e.returnValue = false;
+ e.cancelBubble = true;
+ }
}
- };
+ /**
+ * handles a character key event
+ *
+ * @param {string} character
+ * @param {Event} e
+ * @returns void
+ */
+ function _handleCharacter(character, e) {
- /**
- * Adjust vertical positions of the items without stacking them
- * @param {Item[]} items
- * All visible items
- * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
- * Margins between items and between items and the axis.
- */
- exports.nostack = function(items, margin, subgroups) {
- var i, iMax, newTop;
-
- // reset top position of all items
- for (i = 0, iMax = items.length; i < iMax; i++) {
- if (items[i].data.subgroup !== undefined) {
- newTop = margin.axis;
- for (var subgroup in subgroups) {
- if (subgroups.hasOwnProperty(subgroup)) {
- if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroups[items[i].data.subgroup].index) {
- newTop += subgroups[subgroup].height + margin.item.vertical;
- }
- }
+ // if this event should not happen stop here
+ if (_stop(e)) {
+ return;
}
- items[i].top = newTop;
- }
- else {
- items[i].top = margin.axis;
- }
- }
- };
- /**
- * Test if the two provided items collide
- * The items must have parameters left, width, top, and height.
- * @param {Item} a The first item
- * @param {Item} b The second item
- * @param {{horizontal: number, vertical: number}} margin
- * An object containing a horizontal and vertical
- * minimum required margin.
- * @return {boolean} true if a and b collide, else false
- */
- exports.collision = function(a, b, margin) {
- return ((a.left - margin.horizontal + EPSILON) < (b.left + b.width) &&
- (a.left + a.width + margin.horizontal - EPSILON) > b.left &&
- (a.top - margin.vertical + EPSILON) < (b.top + b.height) &&
- (a.top + a.height + margin.vertical - EPSILON) > b.top);
- };
+ var callbacks = _getMatches(character, _eventModifiers(e), e.type),
+ i,
+ do_not_reset = {},
+ processed_sequence_callback = false;
+ // loop through matching callbacks for this key event
+ for (i = 0; i < callbacks.length; ++i) {
-/***/ },
-/* 33 */
-/***/ function(module, exports, __webpack_require__) {
+ // fire for all sequence callbacks
+ // this is because if for example you have multiple sequences
+ // bound such as "g i" and "g t" they both need to fire the
+ // callback for matching g cause otherwise you can only ever
+ // match the first one
+ if (callbacks[i].seq) {
+ processed_sequence_callback = true;
- var Hammer = __webpack_require__(18);
- var Item = __webpack_require__(34);
+ // keep a list of which sequences were matches for later
+ do_not_reset[callbacks[i].seq] = 1;
+ _fireCallback(callbacks[i].callback, e);
+ continue;
+ }
- /**
- * @constructor RangeItem
- * @extends Item
- * @param {Object} data Object containing parameters start, end
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe options
- */
- function RangeItem (data, conversion, options) {
- this.props = {
- content: {
- width: 0
- }
- };
- this.overflow = false; // if contents can overflow (css styling), this flag is set to true
+ // if there were no sequence matches but we are still here
+ // that means this is a regular match so we should fire that
+ if (!processed_sequence_callback && !_inside_sequence) {
+ _fireCallback(callbacks[i].callback, e);
+ }
+ }
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data.id);
- }
- if (data.end == undefined) {
- throw new Error('Property "end" missing in item ' + data.id);
- }
+ // if you are inside of a sequence and the key you are pressing
+ // is not a modifier key then we should reset all sequences
+ // that were not matched by this key event
+ if (e.type == _inside_sequence && !_isModifier(character)) {
+ _resetSequences(do_not_reset);
+ }
}
- Item.call(this, data, conversion, options);
- }
-
- RangeItem.prototype = new Item (null, null, null);
-
- RangeItem.prototype.baseClassName = 'item range';
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- RangeItem.prototype.isVisible = function(range) {
- // determine visibility
- return (this.data.start < range.end) && (this.data.end > range.start);
- };
+ /**
+ * handles a keydown event
+ *
+ * @param {Event} e
+ * @returns void
+ */
+ function _handleKey(e) {
- /**
- * Repaint the item
- */
- RangeItem.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
+ // normalize e.which for key events
+ // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
+ e.which = typeof e.which == "number" ? e.which : e.keyCode;
- // background box
- dom.box = document.createElement('div');
- // className is updated in redraw()
+ var character = _characterFromEvent(e);
- // contents box
- dom.content = document.createElement('div');
- dom.content.className = 'content';
- dom.box.appendChild(dom.content);
+ // no character found then stop
+ if (!character) {
+ return;
+ }
- // attach this item as attribute
- dom.box['timeline-item'] = this;
+ if (e.type == 'keyup' && _ignore_next_keyup == character) {
+ _ignore_next_keyup = false;
+ return;
+ }
- this.dirty = true;
+ _handleCharacter(character, e);
}
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
+ /**
+ * determines if the keycode specified is a modifier key or not
+ *
+ * @param {string} key
+ * @returns {boolean}
+ */
+ function _isModifier(key) {
+ return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
}
- if (!dom.box.parentNode) {
- var foreground = this.parent.dom.foreground;
- if (!foreground) {
- throw new Error('Cannot redraw item: parent has no foreground container element');
- }
- foreground.appendChild(dom.box);
+
+ /**
+ * called to set a 1 second timeout on the specified sequence
+ *
+ * this is so after each key press in the sequence you have 1 second
+ * to press the next key before you have to start over
+ *
+ * @returns void
+ */
+ function _resetSequenceTimer() {
+ clearTimeout(_reset_timer);
+ _reset_timer = setTimeout(_resetSequences, 1000);
}
- this.displayed = true;
- // Update DOM when item is marked dirty. An item is marked dirty when:
- // - the item is not yet rendered
- // - the item's data is changed
- // - the item is selected/deselected
- if (this.dirty) {
- this._updateContents(this.dom.content);
- this._updateTitle(this.dom.box);
- this._updateDataAttributes(this.dom.box);
- this._updateStyle(this.dom.box);
+ /**
+ * reverses the map lookup so that we can look for specific keys
+ * to see what can and can't use keypress
+ *
+ * @return {Object}
+ */
+ function _getReverseMap() {
+ if (!_REVERSE_MAP) {
+ _REVERSE_MAP = {};
+ for (var key in _MAP) {
- // update class
- var className = (this.data.className ? (' ' + this.data.className) : '') +
- (this.selected ? ' selected' : '');
- dom.box.className = this.baseClassName + className;
+ // pull out the numeric keypad from here cause keypress should
+ // be able to detect the keys from the character
+ if (key > 95 && key < 112) {
+ continue;
+ }
- // determine from css whether this box has overflow
- this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+ if (_MAP.hasOwnProperty(key)) {
+ _REVERSE_MAP[_MAP[key]] = key;
+ }
+ }
+ }
+ return _REVERSE_MAP;
+ }
- // recalculate size
- this.props.content.width = this.dom.content.offsetWidth;
- this.height = this.dom.box.offsetHeight;
+ /**
+ * picks the best action based on the key combination
+ *
+ * @param {string} key - character for key
+ * @param {Array} modifiers
+ * @param {string=} action passed in
+ */
+ function _pickBestAction(key, modifiers, action) {
- this.dirty = false;
- }
+ // if no action was picked in we should try to pick the one
+ // that we think would work best for this key
+ if (!action) {
+ action = _getReverseMap()[key] ? 'keydown' : 'keypress';
+ }
- this._repaintDeleteButton(dom.box);
- this._repaintDragLeft();
- this._repaintDragRight();
- };
+ // modifier keys don't work as expected with keypress,
+ // switch to keydown
+ if (action == 'keypress' && modifiers.length) {
+ action = 'keydown';
+ }
- /**
- * Show the item in the DOM (when not already visible). The items DOM will
- * be created when needed.
- */
- RangeItem.prototype.show = function() {
- if (!this.displayed) {
- this.redraw();
+ return action;
}
- };
- /**
- * Hide the item from the DOM (when visible)
- * @return {Boolean} changed
- */
- RangeItem.prototype.hide = function() {
- if (this.displayed) {
- var box = this.dom.box;
+ /**
+ * binds a key sequence to an event
+ *
+ * @param {string} combo - combo specified in bind call
+ * @param {Array} keys
+ * @param {Function} callback
+ * @param {string=} action
+ * @returns void
+ */
+ function _bindSequence(combo, keys, callback, action) {
- if (box.parentNode) {
- box.parentNode.removeChild(box);
- }
+ // start off by adding a sequence level record for this combination
+ // and setting the level to 0
+ _sequence_levels[combo] = 0;
- this.top = null;
- this.left = null;
+ // if there is no action pick the best one for the first key
+ // in the sequence
+ if (!action) {
+ action = _pickBestAction(keys[0], []);
+ }
- this.displayed = false;
- }
- };
+ /**
+ * callback to increase the sequence level for this sequence and reset
+ * all other sequences that were active
+ *
+ * @param {Event} e
+ * @returns void
+ */
+ var _increaseSequence = function(e) {
+ _inside_sequence = action;
+ ++_sequence_levels[combo];
+ _resetSequenceTimer();
+ },
- /**
- * Reposition the item horizontally
- * @Override
- */
- RangeItem.prototype.repositionX = function() {
- var parentWidth = this.parent.width;
- var start = this.conversion.toScreen(this.data.start);
- var end = this.conversion.toScreen(this.data.end);
- var contentLeft;
- var contentWidth;
+ /**
+ * wraps the specified callback inside of another function in order
+ * to reset all sequence counters as soon as this sequence is done
+ *
+ * @param {Event} e
+ * @returns void
+ */
+ _callbackAndReset = function(e) {
+ _fireCallback(callback, e);
- // limit the width of the this, as browsers cannot draw very wide divs
- if (start < -parentWidth) {
- start = -parentWidth;
- }
- if (end > 2 * parentWidth) {
- end = 2 * parentWidth;
- }
- var boxWidth = Math.max(end - start, 1);
+ // we should ignore the next key up if the action is key down
+ // or keypress. this is so if you finish a sequence and
+ // release the key the final key will not trigger a keyup
+ if (action !== 'keyup') {
+ _ignore_next_keyup = _characterFromEvent(e);
+ }
- if (this.overflow) {
- this.left = start;
- this.width = boxWidth + this.props.content.width;
- contentWidth = this.props.content.width;
+ // weird race condition if a sequence ends with the key
+ // another sequence begins with
+ setTimeout(_resetSequences, 10);
+ },
+ i;
- // Note: The calculation of width is an optimistic calculation, giving
- // a width which will not change when moving the Timeline
- // So no re-stacking needed, which is nicer for the eye;
- }
- else {
- this.left = start;
- this.width = boxWidth;
- contentWidth = Math.min(end - start, this.props.content.width);
+ // loop through keys one at a time and bind the appropriate callback
+ // function. for any key leading up to the final one it should
+ // increase the sequence. after the final, it should reset all sequences
+ for (i = 0; i < keys.length; ++i) {
+ _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
+ }
}
- this.dom.box.style.left = this.left + 'px';
- this.dom.box.style.width = boxWidth + 'px';
-
- switch (this.options.align) {
- case 'left':
- this.dom.content.style.left = '0';
- break;
+ /**
+ * binds a single keyboard combination
+ *
+ * @param {string} combination
+ * @param {Function} callback
+ * @param {string=} action
+ * @param {string=} sequence_name - name of sequence if part of sequence
+ * @param {number=} level - what part of the sequence the command is
+ * @returns void
+ */
+ function _bindSingle(combination, callback, action, sequence_name, level) {
- case 'right':
- this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
- break;
+ // make sure multiple spaces in a row become a single space
+ combination = combination.replace(/\s+/g, ' ');
- case 'center':
- this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
- break;
+ var sequence = combination.split(' '),
+ i,
+ key,
+ keys,
+ modifiers = [];
- default: // 'auto'
- if (this.overflow) {
- // when range exceeds left of the window, position the contents at the left of the visible area
- contentLeft = Math.max(-start, 0);
- }
- else {
- // when range exceeds left of the window, position the contents at the left of the visible area
- if (start < 0) {
- contentLeft = Math.min(-start,
- (end - start - this.props.content.width - 2 * this.options.padding));
- // TODO: remove the need for options.padding. it's terrible.
- }
- else {
- contentLeft = 0;
- }
+ // if this pattern is a sequence of keys then run through this method
+ // to reprocess each pattern one key at a time
+ if (sequence.length > 1) {
+ return _bindSequence(combination, sequence, callback, action);
}
- this.dom.content.style.left = contentLeft + 'px';
- }
- };
- /**
- * Reposition the item vertically
- * @Override
- */
- RangeItem.prototype.repositionY = function() {
- var orientation = this.options.orientation,
- box = this.dom.box;
+ // take the keys from this pattern and figure out what the actual
+ // pattern is all about
+ keys = combination === '+' ? ['+'] : combination.split('+');
- if (orientation == 'top') {
- box.style.top = this.top + 'px';
- }
- else {
- box.style.top = (this.parent.height - this.top - this.height) + 'px';
- }
- };
+ for (i = 0; i < keys.length; ++i) {
+ key = keys[i];
- /**
- * Repaint a drag area on the left side of the range when the range is selected
- * @protected
- */
- RangeItem.prototype._repaintDragLeft = function () {
- if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
- // create and show drag area
- var dragLeft = document.createElement('div');
- dragLeft.className = 'drag-left';
- dragLeft.dragLeftItem = this;
+ // normalize key names
+ if (_SPECIAL_ALIASES[key]) {
+ key = _SPECIAL_ALIASES[key];
+ }
- // TODO: this should be redundant?
- Hammer(dragLeft, {
- preventDefault: true
- }).on('drag', function () {
- //console.log('drag left')
- });
+ // if this is not a keypress event then we should
+ // be smart about using shift keys
+ // this will only work for US keyboards however
+ if (action && action != 'keypress' && _SHIFT_MAP[key]) {
+ key = _SHIFT_MAP[key];
+ modifiers.push('shift');
+ }
- this.dom.box.appendChild(dragLeft);
- this.dom.dragLeft = dragLeft;
- }
- else if (!this.selected && this.dom.dragLeft) {
- // delete drag area
- if (this.dom.dragLeft.parentNode) {
- this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
- }
- this.dom.dragLeft = null;
- }
- };
+ // if this key is a modifier then add it to the list of modifiers
+ if (_isModifier(key)) {
+ modifiers.push(key);
+ }
+ }
- /**
- * Repaint a drag area on the right side of the range when the range is selected
- * @protected
- */
- RangeItem.prototype._repaintDragRight = function () {
- if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
- // create and show drag area
- var dragRight = document.createElement('div');
- dragRight.className = 'drag-right';
- dragRight.dragRightItem = this;
+ // depending on what the key combination is
+ // we will try to pick the best event for it
+ action = _pickBestAction(key, modifiers, action);
- // TODO: this should be redundant?
- Hammer(dragRight, {
- preventDefault: true
- }).on('drag', function () {
- //console.log('drag right')
- });
+ // make sure to initialize array if this is the first time
+ // a callback is added for this key
+ if (!_callbacks[key]) {
+ _callbacks[key] = [];
+ }
- this.dom.box.appendChild(dragRight);
- this.dom.dragRight = dragRight;
- }
- else if (!this.selected && this.dom.dragRight) {
- // delete drag area
- if (this.dom.dragRight.parentNode) {
- this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
- }
- this.dom.dragRight = null;
+ // remove an existing match if there is one
+ _getMatches(key, modifiers, action, !sequence_name, combination);
+
+ // add this call back to the array
+ // if it is a sequence put it at the beginning
+ // if not put it at the end
+ //
+ // this is important because the way these are processed expects
+ // the sequence ones to come first
+ _callbacks[key][sequence_name ? 'unshift' : 'push']({
+ callback: callback,
+ modifiers: modifiers,
+ action: action,
+ seq: sequence_name,
+ level: level,
+ combo: combination
+ });
}
- };
- module.exports = RangeItem;
+ /**
+ * binds multiple combinations to the same callback
+ *
+ * @param {Array} combinations
+ * @param {Function} callback
+ * @param {string|undefined} action
+ * @returns void
+ */
+ function _bindMultiple(combinations, callback, action) {
+ for (var i = 0; i < combinations.length; ++i) {
+ _bindSingle(combinations[i], callback, action);
+ }
+ }
+ // start!
+ _addEvent(document, 'keypress', _handleKey);
+ _addEvent(document, 'keydown', _handleKey);
+ _addEvent(document, 'keyup', _handleKey);
-/***/ },
-/* 34 */
-/***/ function(module, exports, __webpack_require__) {
+ var mousetrap = {
- var Hammer = __webpack_require__(18);
- var util = __webpack_require__(1);
+ /**
+ * binds an event to mousetrap
+ *
+ * can be a single key, a combination of keys separated with +,
+ * a comma separated list of keys, an array of keys, or
+ * a sequence of keys separated by spaces
+ *
+ * be sure to list the modifier keys first to make sure that the
+ * correct key ends up getting bound (the last key in the pattern)
+ *
+ * @param {string|Array} keys
+ * @param {Function} callback
+ * @param {string=} action - 'keypress', 'keydown', or 'keyup'
+ * @returns void
+ */
+ bind: function(keys, callback, action) {
+ _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
+ _direct_map[keys + ':' + action] = callback;
+ return this;
+ },
- /**
- * @constructor Item
- * @param {Object} data Object containing (optional) parameters type,
- * start, end, content, group, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} options Configuration options
- * // TODO: describe available options
- */
- function Item (data, conversion, options) {
- this.id = null;
- this.parent = null;
- this.data = data;
- this.dom = null;
- this.conversion = conversion || {};
- this.options = options || {};
+ /**
+ * unbinds an event to mousetrap
+ *
+ * the unbinding sets the callback function of the specified key combo
+ * to an empty function and deletes the corresponding key in the
+ * _direct_map dict.
+ *
+ * the keycombo+action has to be exactly the same as
+ * it was defined in the bind method
+ *
+ * TODO: actually remove this from the _callbacks dictionary instead
+ * of binding an empty function
+ *
+ * @param {string|Array} keys
+ * @param {string} action
+ * @returns void
+ */
+ unbind: function(keys, action) {
+ if (_direct_map[keys + ':' + action]) {
+ delete _direct_map[keys + ':' + action];
+ this.bind(keys, function() {}, action);
+ }
+ return this;
+ },
- this.selected = false;
- this.displayed = false;
- this.dirty = true;
+ /**
+ * triggers an event that has already been bound
+ *
+ * @param {string} keys
+ * @param {string=} action
+ * @returns void
+ */
+ trigger: function(keys, action) {
+ _direct_map[keys + ':' + action]();
+ return this;
+ },
- this.top = null;
- this.left = null;
- this.width = null;
- this.height = null;
+ /**
+ * resets the library back to its initial state. this is useful
+ * if you want to clear out the current keyboard shortcuts and bind
+ * new ones - for example if you switch to another page
+ *
+ * @returns void
+ */
+ reset: function() {
+ _callbacks = {};
+ _direct_map = {};
+ return this;
+ }
+ };
- this.ignoreStacking = false;
- }
+ module.exports = mousetrap;
- /**
- * Select current item
- */
- Item.prototype.select = function() {
- this.selected = true;
- this.dirty = true;
- if (this.displayed) this.redraw();
- };
- /**
- * Unselect current item
- */
- Item.prototype.unselect = function() {
- this.selected = false;
- this.dirty = true;
- if (this.displayed) this.redraw();
- };
- /**
- * Set data for the item. Existing data will be updated. The id should not
- * be changed. When the item is displayed, it will be redrawn immediately.
- * @param {Object} data
- */
- Item.prototype.setData = function(data) {
- this.data = data;
- this.dirty = true;
- if (this.displayed) this.redraw();
- };
+/***/ },
+/* 33 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var Emitter = __webpack_require__(10);
+ var Hammer = __webpack_require__(18);
+ var util = __webpack_require__(1);
+ var DataSet = __webpack_require__(7);
+ var DataView = __webpack_require__(8);
+ var Range = __webpack_require__(20);
+ var Core = __webpack_require__(24);
+ var TimeAxis = __webpack_require__(25);
+ var CurrentTime = __webpack_require__(27);
+ var CustomTime = __webpack_require__(29);
+ var LineGraph = __webpack_require__(34);
/**
- * Set a parent for the item
- * @param {ItemSet | Group} parent
+ * 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
+ * @extends Core
*/
- Item.prototype.setParent = function(parent) {
- if (this.displayed) {
- this.hide();
- this.parent = parent;
- if (this.parent) {
- this.show();
- }
- }
- else {
- this.parent = parent;
+ function Graph2d (container, items, groups, options) {
+ // if the third element is options, the forth is groups (optionally);
+ if (!(Array.isArray(groups) || groups instanceof DataSet) && groups instanceof Object) {
+ var forthArgument = options;
+ options = groups;
+ groups = forthArgument;
}
- };
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- Item.prototype.isVisible = function(range) {
- // Should be implemented by Item implementations
- return false;
- };
+ var me = this;
+ this.defaultOptions = {
+ start: null,
+ end: null,
- /**
- * Show the Item in the DOM (when not already visible)
- * @return {Boolean} changed
- */
- Item.prototype.show = function() {
- return false;
- };
+ autoResize: true,
- /**
- * Hide the Item from the DOM (when visible)
- * @return {Boolean} changed
- */
- Item.prototype.hide = function() {
- return false;
- };
+ orientation: 'bottom',
+ width: null,
+ height: null,
+ maxHeight: null,
+ minHeight: null
+ };
+ this.options = util.deepExtend({}, this.defaultOptions);
- /**
- * Repaint the item
- */
- Item.prototype.redraw = function() {
- // should be implemented by the item
- };
+ // Create the DOM, props, and emitter
+ this._create(container);
- /**
- * Reposition the Item horizontally
- */
- Item.prototype.repositionX = function() {
- // should be implemented by the item
- };
+ // all components listed here will be repainted automatically
+ this.components = [];
- /**
- * Reposition the Item vertically
- */
- Item.prototype.repositionY = function() {
- // should be implemented by the item
- };
+ 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),
+ toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+ toTime: me._toTime.bind(me),
+ toGlobalTime : me._toGlobalTime.bind(me)
+ }
+ };
- /**
- * Repaint a delete button on the top right of the item when the item is selected
- * @param {HTMLElement} anchor
- * @protected
- */
- Item.prototype._repaintDeleteButton = function (anchor) {
- if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
- // create and show button
- var me = this;
+ // range
+ this.range = new Range(this.body);
+ this.components.push(this.range);
+ this.body.range = this.range;
- var deleteButton = document.createElement('div');
- deleteButton.className = 'delete';
- deleteButton.title = 'Delete this item';
+ // time axis
+ this.timeAxis = new TimeAxis(this.body);
+ this.components.push(this.timeAxis);
+ this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
- Hammer(deleteButton, {
- preventDefault: true
- }).on('tap', function (event) {
- me.parent.removeFromDataSet(me);
- event.stopPropagation();
- });
+ // current time bar
+ this.currentTime = new CurrentTime(this.body);
+ this.components.push(this.currentTime);
- anchor.appendChild(deleteButton);
- this.dom.deleteButton = deleteButton;
+ // 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);
}
- else if (!this.selected && this.dom.deleteButton) {
- // remove button
- if (this.dom.deleteButton.parentNode) {
- this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
- }
- this.dom.deleteButton = null;
+
+ // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
+ if (groups) {
+ this.setGroups(groups);
}
- };
- /**
- * Set HTML contents for the item
- * @param {Element} element HTML element to fill with the contents
- * @private
- */
- Item.prototype._updateContents = function (element) {
- var content;
- if (this.options.template) {
- var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
- content = this.options.template(itemData);
+ // create itemset
+ if (items) {
+ this.setItems(items);
}
else {
- content = this.data.content;
+ this.redraw();
}
+ }
- if(content !== this.content) {
- // only replace the content when changed
- if (content instanceof Element) {
- element.innerHTML = '';
- element.appendChild(content);
- }
- else if (content != undefined) {
- element.innerHTML = content;
- }
- else {
- if (!(this.data.type == 'background' && this.data.content === undefined)) {
- throw new Error('Property "content" missing in item ' + this.id);
- }
- }
-
- this.content = content;
- }
- };
+ // Extend the functionality from Core
+ Graph2d.prototype = new Core();
/**
- * Set HTML contents for the item
- * @param {Element} element HTML element to fill with the contents
- * @private
+ * Set items
+ * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
*/
- Item.prototype._updateTitle = function (element) {
- if (this.data.title != null) {
- element.title = this.data.title || '';
+ 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 {
- element.removeAttribute('title');
+ // turn an array into a dataset
+ newDataSet = new DataSet(items, {
+ type: {
+ start: 'Date',
+ end: 'Date'
+ }
+ });
}
- };
- /**
- * Process dataAttributes timeline option and set as data- attributes on dom.content
- * @param {Element} element HTML element to which the attributes will be attached
- * @private
- */
- Item.prototype._updateDataAttributes = function(element) {
- if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
- var attributes = [];
+ // set items
+ this.itemsData = newDataSet;
+ this.linegraph && this.linegraph.setItems(newDataSet);
- if (Array.isArray(this.options.dataAttributes)) {
- attributes = this.options.dataAttributes;
- }
- else if (this.options.dataAttributes == 'all') {
- attributes = Object.keys(this.data);
+ if (initialLoad) {
+ if (this.options.start != undefined || this.options.end != undefined) {
+ var start = this.options.start != undefined ? this.options.start : null;
+ var end = this.options.end != undefined ? this.options.end : null;
+
+ this.setWindow(start, end, {animate: false});
}
else {
- return;
- }
-
- for (var i = 0; i < attributes.length; i++) {
- var name = attributes[i];
- var value = this.data[name];
-
- if (value != null) {
- element.setAttribute('data-' + name, value);
- }
- else {
- element.removeAttribute('data-' + name);
- }
+ this.fit({animate: false});
}
}
};
/**
- * Update custom styles of the element
- * @param element
- * @private
+ * Set groups
+ * @param {vis.DataSet | Array | google.visualization.DataTable} groups
*/
- Item.prototype._updateStyle = function(element) {
- // remove old styles
- if (this.style) {
- util.removeCssText(element, this.style);
- this.style = null;
+ Graph2d.prototype.setGroups = function(groups) {
+ // convert to type DataSet when needed
+ var newDataSet;
+ if (!groups) {
+ newDataSet = null;
}
-
- // append new styles
- if (this.data.style) {
- util.addCssText(element, this.data.style);
- this.style = this.data.style;
+ else if (groups instanceof DataSet || groups instanceof DataView) {
+ newDataSet = groups;
+ }
+ else {
+ // turn an array into a dataset
+ newDataSet = new DataSet(groups);
}
- };
-
- module.exports = Item;
-
-
-/***/ },
-/* 35 */
-/***/ function(module, exports, __webpack_require__) {
- var util = __webpack_require__(1);
- var Group = __webpack_require__(31);
+ this.groupsData = newDataSet;
+ this.linegraph.setGroups(newDataSet);
+ };
/**
- * @constructor BackgroundGroup
- * @param {Number | String} groupId
- * @param {Object} data
- * @param {ItemSet} itemSet
+ * Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
+ * @param groupId
+ * @param width
+ * @param height
*/
- function BackgroundGroup (groupId, data, itemSet) {
- Group.call(this, groupId, data, itemSet);
-
- this.width = 0;
- this.height = 0;
- this.top = 0;
- this.left = 0;
+ Graph2d.prototype.getLegend = function(groupId, width, height) {
+ if (width === undefined) {width = 15;}
+ if (height === undefined) {height = 15;}
+ if (this.linegraph.groups[groupId] !== undefined) {
+ return this.linegraph.groups[groupId].getLegend(width,height);
+ }
+ else {
+ return "cannot find group:" + groupId;
+ }
}
- BackgroundGroup.prototype = Object.create(Group.prototype);
-
/**
- * Repaint this group
- * @param {{start: number, end: number}} range
- * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
- * @param {boolean} [restack=false] Force restacking of all items
- * @return {boolean} Returns true if the group is resized
+ * This checks if the visible option of the supplied group (by ID) is true or false.
+ * @param groupId
+ * @returns {*}
*/
- BackgroundGroup.prototype.redraw = function(range, margin, restack) {
- var resized = false;
-
- this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
-
- // calculate actual size
- this.width = this.dom.background.offsetWidth;
-
- // apply new height (just always zero for BackgroundGroup
- this.dom.background.style.height = '0';
-
- // update vertical position of items after they are re-stacked and the height of the group is calculated
- for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
- var item = this.visibleItems[i];
- item.repositionY(margin);
+ Graph2d.prototype.isGroupVisible = function(groupId) {
+ if (this.linegraph.groups[groupId] !== undefined) {
+ return (this.linegraph.groups[groupId].visible && (this.linegraph.options.groups.visibility[groupId] === undefined || this.linegraph.options.groups.visibility[groupId] == true));
+ }
+ else {
+ return false;
}
+ }
- return resized;
- };
/**
- * Show this group: attach to the DOM
+ * 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
*/
- BackgroundGroup.prototype.show = function() {
- if (!this.dom.background.parentNode) {
- this.itemSet.dom.background.appendChild(this.dom.background);
+ Graph2d.prototype.getItemRange = function() {
+ var min = null;
+ var max = null;
+
+ // calculate min from start filed
+ for (var groupId in this.linegraph.groups) {
+ if (this.linegraph.groups.hasOwnProperty(groupId)) {
+ if (this.linegraph.groups[groupId].visible == true) {
+ for (var i = 0; i < this.linegraph.groups[groupId].itemsData.length; i++) {
+ var item = this.linegraph.groups[groupId].itemsData[i];
+ var value = util.convert(item.x, 'Date').valueOf();
+ min = min == null ? value : min > value ? value : min;
+ max = max == null ? value : max < value ? value : max;
+ }
+ }
+ }
}
+
+ return {
+ min: (min != null) ? new Date(min) : null,
+ max: (max != null) ? new Date(max) : null
+ };
};
- module.exports = BackgroundGroup;
+
+
+ module.exports = Graph2d;
/***/ },
-/* 36 */
+/* 34 */
/***/ function(module, exports, __webpack_require__) {
- var Item = __webpack_require__(34);
var util = __webpack_require__(1);
+ var DOMutil = __webpack_require__(6);
+ var DataSet = __webpack_require__(7);
+ var DataView = __webpack_require__(8);
+ var Component = __webpack_require__(22);
+ var DataAxis = __webpack_require__(35);
+ var GraphGroup = __webpack_require__(37);
+ var Legend = __webpack_require__(38);
+
+ var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
/**
- * @constructor BoxItem
- * @extends Item
- * @param {Object} data Object containing parameters start
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe available options
+ * This is the constructor of the LineGraph. It requires a Timeline body and options.
+ *
+ * @param body
+ * @param options
+ * @constructor
*/
- function BoxItem (data, conversion, options) {
- this.props = {
- dot: {
- width: 0,
- height: 0
- },
- line: {
- width: 0,
- height: 0
- }
- };
+ function LineGraph(body, options) {
+ this.id = util.randomUUID();
+ this.body = body;
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data);
+ this.defaultOptions = {
+ yAxisOrientation: 'left',
+ defaultGroup: 'default',
+ sort: true,
+ sampling: true,
+ graphHeight: '400px',
+ shaded: {
+ enabled: false,
+ orientation: 'bottom' // top, bottom
+ },
+ style: 'line', // line, bar
+ barChart: {
+ width: 50,
+ handleOverlap: 'overlap',
+ align: 'center' // left, center, right
+ },
+ catmullRom: {
+ enabled: true,
+ parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
+ alpha: 0.5
+ },
+ drawPoints: {
+ enabled: true,
+ size: 6,
+ style: 'square' // square, circle
+ },
+ dataAxis: {
+ showMinorLabels: true,
+ showMajorLabels: true,
+ icons: false,
+ width: '40px',
+ visible: true,
+ customRange: {
+ left: {min:undefined, max:undefined},
+ right: {min:undefined, max:undefined}
+ }
+ },
+ legend: {
+ enabled: false,
+ icons: true,
+ left: {
+ visible: true,
+ position: 'top-left' // top/bottom - left,right
+ },
+ right: {
+ visible: true,
+ position: 'top-right' // top/bottom - left,right
+ }
+ },
+ groups: {
+ visibility: {}
}
- }
-
- Item.call(this, data, conversion, options);
- }
-
- BoxItem.prototype = new Item (null, null, null);
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- BoxItem.prototype.isVisible = function(range) {
- // determine visibility
- // TODO: account for the real width of the item. Right now we just add 1/4 to the window
- var interval = (range.end - range.start) / 4;
- return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
- };
-
- /**
- * Repaint the item
- */
- BoxItem.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
-
- // create main box
- dom.box = document.createElement('DIV');
-
- // contents box (inside the background box). used for making margins
- dom.content = document.createElement('DIV');
- dom.content.className = 'content';
- dom.box.appendChild(dom.content);
-
- // line to axis
- dom.line = document.createElement('DIV');
- dom.line.className = 'line';
+ };
- // dot on axis
- dom.dot = document.createElement('DIV');
- dom.dot.className = 'dot';
+ // options is shared by this ItemSet and all its items
+ this.options = util.extend({}, this.defaultOptions);
+ this.dom = {};
+ this.props = {};
+ this.hammer = null;
+ this.groups = {};
+ this.abortedGraphUpdate = false;
- // attach this item as attribute
- dom.box['timeline-item'] = this;
+ var me = this;
+ this.itemsData = null; // DataSet
+ this.groupsData = null; // DataSet
- this.dirty = true;
- }
+ // listeners for the DataSet of the items
+ this.itemListeners = {
+ 'add': function (event, params, senderId) {
+ me._onAdd(params.items);
+ },
+ 'update': function (event, params, senderId) {
+ me._onUpdate(params.items);
+ },
+ 'remove': function (event, params, senderId) {
+ me._onRemove(params.items);
+ }
+ };
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
- }
- if (!dom.box.parentNode) {
- var foreground = this.parent.dom.foreground;
- if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
- foreground.appendChild(dom.box);
- }
- if (!dom.line.parentNode) {
- var background = this.parent.dom.background;
- if (!background) throw new Error('Cannot redraw item: parent has no background container element');
- background.appendChild(dom.line);
- }
- if (!dom.dot.parentNode) {
- var axis = this.parent.dom.axis;
- if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
- axis.appendChild(dom.dot);
- }
- this.displayed = true;
+ // listeners for the DataSet of the groups
+ this.groupListeners = {
+ 'add': function (event, params, senderId) {
+ me._onAddGroups(params.items);
+ },
+ 'update': function (event, params, senderId) {
+ me._onUpdateGroups(params.items);
+ },
+ 'remove': function (event, params, senderId) {
+ me._onRemoveGroups(params.items);
+ }
+ };
- // Update DOM when item is marked dirty. An item is marked dirty when:
- // - the item is not yet rendered
- // - the item's data is changed
- // - the item is selected/deselected
- if (this.dirty) {
- this._updateContents(this.dom.content);
- this._updateTitle(this.dom.box);
- this._updateDataAttributes(this.dom.box);
- this._updateStyle(this.dom.box);
+ this.items = {}; // object with an Item for every data item
+ this.selection = []; // list with the ids of all selected nodes
+ this.lastStart = this.body.range.start;
+ this.touchParams = {}; // stores properties while dragging
- // update class
- var className = (this.data.className? ' ' + this.data.className : '') +
- (this.selected ? ' selected' : '');
- dom.box.className = 'item box' + className;
- dom.line.className = 'item line' + className;
- dom.dot.className = 'item dot' + className;
+ this.svgElements = {};
+ this.setOptions(options);
+ this.groupsUsingDefaultStyles = [0];
- // recalculate size
- this.props.dot.height = dom.dot.offsetHeight;
- this.props.dot.width = dom.dot.offsetWidth;
- this.props.line.width = dom.line.offsetWidth;
- this.width = dom.box.offsetWidth;
- this.height = dom.box.offsetHeight;
+ this.body.emitter.on("rangechanged", function() {
+ me.lastStart = me.body.range.start;
+ me.svg.style.left = util.option.asSize(-me.width);
+ me._updateGraph.apply(me);
+ });
- this.dirty = false;
- }
+ // create the HTML DOM
+ this._create();
+ this.body.emitter.emit("change");
+ }
- this._repaintDeleteButton(dom.box);
- };
+ LineGraph.prototype = new Component();
/**
- * Show the item in the DOM (when not already displayed). The items DOM will
- * be created when needed.
+ * Create the HTML DOM for the ItemSet
*/
- BoxItem.prototype.show = function() {
- if (!this.displayed) {
- this.redraw();
- }
- };
+ LineGraph.prototype._create = function(){
+ var frame = document.createElement('div');
+ frame.className = 'LineGraph';
+ this.dom.frame = frame;
- /**
- * Hide the item from the DOM (when visible)
- */
- BoxItem.prototype.hide = function() {
- if (this.displayed) {
- var dom = this.dom;
+ // create svg element for graph drawing.
+ this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+ this.svg.style.position = "relative";
+ this.svg.style.height = ('' + this.options.graphHeight).replace("px",'') + 'px';
+ this.svg.style.display = "block";
+ frame.appendChild(this.svg);
- if (dom.box.parentNode) dom.box.parentNode.removeChild(dom.box);
- if (dom.line.parentNode) dom.line.parentNode.removeChild(dom.line);
- if (dom.dot.parentNode) dom.dot.parentNode.removeChild(dom.dot);
+ // data axis
+ this.options.dataAxis.orientation = 'left';
+ this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
- this.top = null;
- this.left = null;
+ this.options.dataAxis.orientation = 'right';
+ this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+ delete this.options.dataAxis.orientation;
- this.displayed = false;
- }
+ // legends
+ this.legendLeft = new Legend(this.body, this.options.legend, 'left', this.options.groups);
+ this.legendRight = new Legend(this.body, this.options.legend, 'right', this.options.groups);
+
+ this.show();
};
/**
- * Reposition the item horizontally
- * @Override
+ * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
+ * @param options
*/
- BoxItem.prototype.repositionX = function() {
- var start = this.conversion.toScreen(this.data.start);
- var align = this.options.align;
- var left;
- var box = this.dom.box;
- var line = this.dom.line;
- var dot = this.dom.dot;
+ LineGraph.prototype.setOptions = function(options) {
+ if (options) {
+ var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
+ util.selectiveDeepExtend(fields, this.options, options);
+ util.mergeOptions(this.options, options,'catmullRom');
+ util.mergeOptions(this.options, options,'drawPoints');
+ util.mergeOptions(this.options, options,'shaded');
+ util.mergeOptions(this.options, options,'legend');
- // calculate left position of the box
- if (align == 'right') {
- this.left = start - this.width;
- }
- else if (align == 'left') {
- this.left = start;
- }
- else {
- // default or 'center'
- this.left = start - this.width / 2;
- }
+ if (options.catmullRom) {
+ if (typeof options.catmullRom == 'object') {
+ if (options.catmullRom.parametrization) {
+ if (options.catmullRom.parametrization == 'uniform') {
+ this.options.catmullRom.alpha = 0;
+ }
+ else if (options.catmullRom.parametrization == 'chordal') {
+ this.options.catmullRom.alpha = 1.0;
+ }
+ else {
+ this.options.catmullRom.parametrization = 'centripetal';
+ this.options.catmullRom.alpha = 0.5;
+ }
+ }
+ }
+ }
- // reposition box
- box.style.left = this.left + 'px';
+ if (this.yAxisLeft) {
+ if (options.dataAxis !== undefined) {
+ this.yAxisLeft.setOptions(this.options.dataAxis);
+ this.yAxisRight.setOptions(this.options.dataAxis);
+ }
+ }
- // reposition line
- line.style.left = (start - this.props.line.width / 2) + 'px';
+ if (this.legendLeft) {
+ if (options.legend !== undefined) {
+ this.legendLeft.setOptions(this.options.legend);
+ this.legendRight.setOptions(this.options.legend);
+ }
+ }
- // reposition dot
- dot.style.left = (start - this.props.dot.width / 2) + 'px';
+ if (this.groups.hasOwnProperty(UNGROUPED)) {
+ this.groups[UNGROUPED].setOptions(options);
+ }
+ }
+ if (this.dom.frame) {
+ this._updateGraph();
+ }
};
/**
- * Reposition the item vertically
- * @Override
+ * Hide the component from the DOM
*/
- BoxItem.prototype.repositionY = function() {
- var orientation = this.options.orientation;
- var box = this.dom.box;
- var line = this.dom.line;
- var dot = this.dom.dot;
-
- if (orientation == 'top') {
- box.style.top = (this.top || 0) + 'px';
-
- line.style.top = '0';
- line.style.height = (this.parent.top + this.top + 1) + 'px';
- line.style.bottom = '';
+ LineGraph.prototype.hide = function() {
+ // remove the frame containing the items
+ if (this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
}
- else { // orientation 'bottom'
- var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
- var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
+ };
- box.style.top = (this.parent.height - this.top - this.height || 0) + 'px';
- line.style.top = (itemSetHeight - lineHeight) + 'px';
- line.style.bottom = '0';
+ /**
+ * Show the component in the DOM (when not already visible).
+ * @return {Boolean} changed
+ */
+ LineGraph.prototype.show = function() {
+ // show frame containing the items
+ if (!this.dom.frame.parentNode) {
+ this.body.dom.center.appendChild(this.dom.frame);
}
-
- dot.style.top = (-this.props.dot.height / 2) + 'px';
};
- module.exports = BoxItem;
-
-
-/***/ },
-/* 37 */
-/***/ function(module, exports, __webpack_require__) {
-
- var Item = __webpack_require__(34);
/**
- * @constructor PointItem
- * @extends Item
- * @param {Object} data Object containing parameters start
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe available options
+ * Set items
+ * @param {vis.DataSet | null} items
*/
- function PointItem (data, conversion, options) {
- this.props = {
- dot: {
- top: 0,
- width: 0,
- height: 0
- },
- content: {
- height: 0,
- marginLeft: 0
- }
- };
+ LineGraph.prototype.setItems = function(items) {
+ var me = this,
+ ids,
+ oldItemsData = this.itemsData;
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data);
- }
+ // replace the dataset
+ if (!items) {
+ this.itemsData = null;
+ }
+ else if (items instanceof DataSet || items instanceof DataView) {
+ this.itemsData = items;
+ }
+ else {
+ throw new TypeError('Data must be an instance of DataSet or DataView');
}
- Item.call(this, data, conversion, options);
- }
+ if (oldItemsData) {
+ // unsubscribe from old dataset
+ util.forEach(this.itemListeners, function (callback, event) {
+ oldItemsData.off(event, callback);
+ });
- PointItem.prototype = new Item (null, null, null);
+ // remove all drawn items
+ ids = oldItemsData.getIds();
+ this._onRemove(ids);
+ }
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- PointItem.prototype.isVisible = function(range) {
- // determine visibility
- // TODO: account for the real width of the item. Right now we just add 1/4 to the window
- var interval = (range.end - range.start) / 4;
- return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
+ if (this.itemsData) {
+ // subscribe to new dataset
+ var id = this.id;
+ util.forEach(this.itemListeners, function (callback, event) {
+ me.itemsData.on(event, callback, id);
+ });
+
+ // add all new items
+ ids = this.itemsData.getIds();
+ this._onAdd(ids);
+ }
+ this._updateUngrouped();
+ this._updateGraph();
+ this.redraw();
};
/**
- * Repaint the item
+ * Set groups
+ * @param {vis.DataSet} groups
*/
- PointItem.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
-
- // background box
- dom.point = document.createElement('div');
- // className is updated in redraw()
-
- // contents box, right from the dot
- dom.content = document.createElement('div');
- dom.content.className = 'content';
- dom.point.appendChild(dom.content);
-
- // dot at start
- dom.dot = document.createElement('div');
- dom.point.appendChild(dom.dot);
+ LineGraph.prototype.setGroups = function(groups) {
+ var me = this,
+ ids;
- // attach this item as attribute
- dom.point['timeline-item'] = this;
+ // unsubscribe from current dataset
+ if (this.groupsData) {
+ util.forEach(this.groupListeners, function (callback, event) {
+ me.groupsData.unsubscribe(event, callback);
+ });
- this.dirty = true;
+ // remove all drawn groups
+ ids = this.groupsData.getIds();
+ this.groupsData = null;
+ this._onRemoveGroups(ids); // note: this will cause a redraw
}
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
+ // replace the dataset
+ if (!groups) {
+ this.groupsData = null;
}
- if (!dom.point.parentNode) {
- var foreground = this.parent.dom.foreground;
- if (!foreground) {
- throw new Error('Cannot redraw item: parent has no foreground container element');
- }
- foreground.appendChild(dom.point);
+ else if (groups instanceof DataSet || groups instanceof DataView) {
+ this.groupsData = groups;
+ }
+ else {
+ throw new TypeError('Data must be an instance of DataSet or DataView');
}
- this.displayed = true;
-
- // Update DOM when item is marked dirty. An item is marked dirty when:
- // - the item is not yet rendered
- // - the item's data is changed
- // - the item is selected/deselected
- if (this.dirty) {
- this._updateContents(this.dom.content);
- this._updateTitle(this.dom.point);
- this._updateDataAttributes(this.dom.point);
- this._updateStyle(this.dom.point);
- // update class
- var className = (this.data.className? ' ' + this.data.className : '') +
- (this.selected ? ' selected' : '');
- dom.point.className = 'item point' + className;
- dom.dot.className = 'item dot' + className;
+ if (this.groupsData) {
+ // subscribe to new dataset
+ var id = this.id;
+ util.forEach(this.groupListeners, function (callback, event) {
+ me.groupsData.on(event, callback, id);
+ });
- // recalculate size
- this.width = dom.point.offsetWidth;
- this.height = dom.point.offsetHeight;
- this.props.dot.width = dom.dot.offsetWidth;
- this.props.dot.height = dom.dot.offsetHeight;
- this.props.content.height = dom.content.offsetHeight;
-
- // resize contents
- dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
- //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
-
- dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
- dom.dot.style.left = (this.props.dot.width / 2) + 'px';
-
- this.dirty = false;
+ // draw all ms
+ ids = this.groupsData.getIds();
+ this._onAddGroups(ids);
}
-
- this._repaintDeleteButton(dom.point);
+ this._onUpdate();
};
+
/**
- * Show the item in the DOM (when not already visible). The items DOM will
- * be created when needed.
+ * Update the datapoints
+ * @param [ids]
+ * @private
*/
- PointItem.prototype.show = function() {
- if (!this.displayed) {
- this.redraw();
+ LineGraph.prototype._onUpdate = function(ids) {
+ this._updateUngrouped();
+ this._updateAllGroupData();
+ this._updateGraph();
+ this.redraw();
+ };
+ LineGraph.prototype._onAdd = function (ids) {this._onUpdate(ids);};
+ LineGraph.prototype._onRemove = function (ids) {this._onUpdate(ids);};
+ LineGraph.prototype._onUpdateGroups = function (groupIds) {
+ for (var i = 0; i < groupIds.length; i++) {
+ var group = this.groupsData.get(groupIds[i]);
+ this._updateGroup(group, groupIds[i]);
}
+
+ this._updateGraph();
+ this.redraw();
};
+ LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
- /**
- * Hide the item from the DOM (when visible)
- */
- PointItem.prototype.hide = function() {
- if (this.displayed) {
- if (this.dom.point.parentNode) {
- this.dom.point.parentNode.removeChild(this.dom.point);
+ LineGraph.prototype._onRemoveGroups = function (groupIds) {
+ for (var i = 0; i < groupIds.length; i++) {
+ if (!this.groups.hasOwnProperty(groupIds[i])) {
+ if (this.groups[groupIds[i]].options.yAxisOrientation == 'right') {
+ this.yAxisRight.removeGroup(groupIds[i]);
+ this.legendRight.removeGroup(groupIds[i]);
+ this.legendRight.redraw();
+ }
+ else {
+ this.yAxisLeft.removeGroup(groupIds[i]);
+ this.legendLeft.removeGroup(groupIds[i]);
+ this.legendLeft.redraw();
+ }
+ delete this.groups[groupIds[i]];
}
-
- this.top = null;
- this.left = null;
-
- this.displayed = false;
}
+ this._updateUngrouped();
+ this._updateGraph();
+ this.redraw();
};
/**
- * Reposition the item horizontally
- * @Override
- */
- PointItem.prototype.repositionX = function() {
- var start = this.conversion.toScreen(this.data.start);
-
- this.left = start - this.props.dot.width;
-
- // reposition point
- this.dom.point.style.left = this.left + 'px';
- };
-
- /**
- * Reposition the item vertically
- * @Override
+ * update a group object
+ *
+ * @param group
+ * @param groupId
+ * @private
*/
- PointItem.prototype.repositionY = function() {
- var orientation = this.options.orientation,
- point = this.dom.point;
-
- if (orientation == 'top') {
- point.style.top = this.top + 'px';
+ LineGraph.prototype._updateGroup = function (group, groupId) {
+ if (!this.groups.hasOwnProperty(groupId)) {
+ this.groups[groupId] = new GraphGroup(group, groupId, this.options, this.groupsUsingDefaultStyles);
+ if (this.groups[groupId].options.yAxisOrientation == 'right') {
+ this.yAxisRight.addGroup(groupId, this.groups[groupId]);
+ this.legendRight.addGroup(groupId, this.groups[groupId]);
+ }
+ else {
+ this.yAxisLeft.addGroup(groupId, this.groups[groupId]);
+ this.legendLeft.addGroup(groupId, this.groups[groupId]);
+ }
}
else {
- point.style.top = (this.parent.height - this.top - this.height) + 'px';
+ this.groups[groupId].update(group);
+ if (this.groups[groupId].options.yAxisOrientation == 'right') {
+ this.yAxisRight.updateGroup(groupId, this.groups[groupId]);
+ this.legendRight.updateGroup(groupId, this.groups[groupId]);
+ }
+ else {
+ this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
+ this.legendLeft.updateGroup(groupId, this.groups[groupId]);
+ }
}
+ this.legendLeft.redraw();
+ this.legendRight.redraw();
};
- module.exports = PointItem;
-
-
-/***/ },
-/* 38 */
-/***/ function(module, exports, __webpack_require__) {
-
- var Hammer = __webpack_require__(18);
- var Item = __webpack_require__(34);
- var RangeItem = __webpack_require__(33);
-
- /**
- * @constructor BackgroundItem
- * @extends Item
- * @param {Object} data Object containing parameters start, end
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe options
- */
- // TODO: implement support for the BackgroundItem just having a start, then being displayed as a sort of an annotation
- function BackgroundItem (data, conversion, options) {
- this.props = {
- content: {
- width: 0
+ LineGraph.prototype._updateAllGroupData = function () {
+ if (this.itemsData != null) {
+ var groupsContent = {};
+ var groupId;
+ for (groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ groupsContent[groupId] = [];
+ }
}
- };
- this.overflow = false; // if contents can overflow (css styling), this flag is set to true
-
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data.id);
+ for (var itemId in this.itemsData._data) {
+ if (this.itemsData._data.hasOwnProperty(itemId)) {
+ var item = this.itemsData._data[itemId];
+ item.x = util.convert(item.x,"Date");
+ groupsContent[item.group].push(item);
+ }
}
- if (data.end == undefined) {
- throw new Error('Property "end" missing in item ' + data.id);
+ for (groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ this.groups[groupId].setItems(groupsContent[groupId]);
+ }
}
}
-
- Item.call(this, data, conversion, options);
-
- this.ignoreStacking = true; // this is not used when stacking
- this.emptyContent = false;
- }
-
- BackgroundItem.prototype = new Item (null, null, null);
-
- BackgroundItem.prototype.baseClassName = 'item background';
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- BackgroundItem.prototype.isVisible = function(range) {
- // determine visibility
- return (this.data.start < range.end) && (this.data.end > range.start);
};
/**
- * Repaint the item
+ * Create or delete the group holding all ungrouped items. This group is used when
+ * there are no groups specified. This anonymous group is called 'graph'.
+ * @protected
*/
- BackgroundItem.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
-
- // background box
- dom.box = document.createElement('div');
- // className is updated in redraw()
-
- // contents box
- dom.content = document.createElement('div');
- dom.content.className = 'content';
- dom.box.appendChild(dom.content);
-
- // attach this item as attribute
- dom.box['timeline-item'] = this;
-
- this.dirty = true;
- }
+ LineGraph.prototype._updateUngrouped = function() {
+ if (this.itemsData && this.itemsData != null) {
+ var ungroupedCounter = 0;
+ for (var itemId in this.itemsData._data) {
+ if (this.itemsData._data.hasOwnProperty(itemId)) {
+ var item = this.itemsData._data[itemId];
+ if (item != undefined) {
+ if (item.hasOwnProperty('group')) {
+ if (item.group === undefined) {
+ item.group = UNGROUPED;
+ }
+ }
+ else {
+ item.group = UNGROUPED;
+ }
+ ungroupedCounter = item.group == UNGROUPED ? ungroupedCounter + 1 : ungroupedCounter;
+ }
+ }
+ }
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
- }
- if (!dom.box.parentNode) {
- var background = this.parent.dom.background;
- if (!background) {
- throw new Error('Cannot redraw item: parent has no background container element');
+ if (ungroupedCounter == 0) {
+ delete this.groups[UNGROUPED];
+ this.legendLeft.removeGroup(UNGROUPED);
+ this.legendRight.removeGroup(UNGROUPED);
+ this.yAxisLeft.removeGroup(UNGROUPED);
+ this.yAxisRight.removeGroup(UNGROUPED);
+ }
+ else {
+ var group = {id: UNGROUPED, content: this.options.defaultGroup};
+ this._updateGroup(group, UNGROUPED);
}
- background.appendChild(dom.box);
}
- this.displayed = true;
-
- // Update DOM when item is marked dirty. An item is marked dirty when:
- // - the item is not yet rendered
- // - the item's data is changed
- // - the item is selected/deselected
- if (this.dirty) {
- this._updateContents(this.dom.content);
- this._updateTitle(this.dom.content);
- this._updateDataAttributes(this.dom.content);
- this._updateStyle(this.dom.box);
-
- // update class
- var className = (this.data.className ? (' ' + this.data.className) : '') +
- (this.selected ? ' selected' : '');
- dom.box.className = this.baseClassName + className;
-
- // determine from css whether this box has overflow
- this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
-
- // recalculate size
- this.props.content.width = this.dom.content.offsetWidth;
- this.height = 0; // set height zero, so this item will be ignored when stacking items
-
- this.dirty = false;
- }
- };
-
- /**
- * Show the item in the DOM (when not already visible). The items DOM will
- * be created when needed.
- */
- BackgroundItem.prototype.show = RangeItem.prototype.show;
-
- /**
- * Hide the item from the DOM (when visible)
- * @return {Boolean} changed
- */
- BackgroundItem.prototype.hide = RangeItem.prototype.hide;
-
- /**
- * Reposition the item horizontally
- * @Override
- */
- BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
-
- /**
- * Reposition the item vertically
- * @Override
- */
- BackgroundItem.prototype.repositionY = function(margin) {
- var onTop = this.options.orientation === 'top';
- this.dom.content.style.top = onTop ? '' : '0';
- this.dom.content.style.bottom = onTop ? '0' : '';
- var height;
-
- // special positioning for subgroups
- if (this.data.subgroup !== undefined) {
- var itemSubgroup = this.data.subgroup;
- var subgroups = this.parent.subgroups;
- var subgroupIndex = subgroups[itemSubgroup].index;
- // if the orientation is top, we need to take the difference in height into account.
- if (onTop == true) {
- // the first subgroup will have to account for the distance from the top to the first item.
- height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
- height += subgroupIndex == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
- var newTop = this.parent.top;
- for (var subgroup in subgroups) {
- if (subgroups.hasOwnProperty(subgroup)) {
- if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroupIndex) {
- newTop += subgroups[subgroup].height + margin.item.vertical;
- }
- }
- }
-
- // the others will have to be offset downwards with this same distance.
- newTop += subgroupIndex != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
- this.dom.box.style.top = newTop + 'px';
- this.dom.box.style.bottom = '';
- }
- // and when the orientation is bottom:
- else {
- var newTop = this.parent.top;
- for (var subgroup in subgroups) {
- if (subgroups.hasOwnProperty(subgroup)) {
- if (subgroups[subgroup].visible == true && subgroups[subgroup].index > subgroupIndex) {
- newTop += subgroups[subgroup].height + margin.item.vertical;
- }
- }
- }
- height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
- this.dom.box.style.top = newTop + 'px';
- this.dom.box.style.bottom = '';
- }
- }
- // and in the case of no subgroups:
else {
- // we want backgrounds with groups to only show in groups.
- if (this.data.group !== undefined) {
- height = this.parent.height;
- // same alignment for items when orientation is top or bottom
- this.dom.box.style.top = this.parent.top + 'px';
- this.dom.box.style.bottom = '';
- }
- else {
- // if the item is not in a group:
- height = Math.max(this.parent.height, this.parent.itemSet.body.domProps.centerContainer.height);
- this.dom.box.style.top = onTop ? '0' : '';
- this.dom.box.style.bottom = onTop ? '' : '0';
- }
- }
- this.dom.box.style.height = height + 'px';
- };
-
- module.exports = BackgroundItem;
-
-
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
-
- var mousetrap = __webpack_require__(40);
- var Emitter = __webpack_require__(10);
- var Hammer = __webpack_require__(18);
- var util = __webpack_require__(1);
-
- /**
- * Turn an element into an clickToUse element.
- * When not active, the element has a transparent overlay. When the overlay is
- * clicked, the mode is changed to active.
- * When active, the element is displayed with a blue border around it, and
- * the interactive contents of the element can be used. When clicked outside
- * the element, the elements mode is changed to inactive.
- * @param {Element} container
- * @constructor
- */
- function Activator(container) {
- this.active = false;
-
- this.dom = {
- container: container
- };
-
- this.dom.overlay = document.createElement('div');
- this.dom.overlay.className = 'overlay';
-
- this.dom.container.appendChild(this.dom.overlay);
-
- this.hammer = Hammer(this.dom.overlay, {prevent_default: false});
- this.hammer.on('tap', this._onTapOverlay.bind(this));
-
- // block all touch events (except tap)
- var me = this;
- var events = [
- 'touch', 'pinch',
- 'doubletap', 'hold',
- 'dragstart', 'drag', 'dragend',
- 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
- ];
- events.forEach(function (event) {
- me.hammer.on(event, function (event) {
- event.stopPropagation();
- });
- });
-
- // attach a tap event to the window, in order to deactivate when clicking outside the timeline
- this.windowHammer = Hammer(window, {prevent_default: false});
- this.windowHammer.on('tap', function (event) {
- // deactivate when clicked outside the container
- if (!_hasParent(event.target, container)) {
- me.deactivate();
- }
- });
-
- // mousetrap listener only bounded when active)
- this.escListener = this.deactivate.bind(this);
- }
-
- // turn into an event emitter
- Emitter(Activator.prototype);
-
- // The currently active activator
- Activator.current = null;
-
- /**
- * Destroy the activator. Cleans up all created DOM and event listeners
- */
- Activator.prototype.destroy = function () {
- this.deactivate();
-
- // remove dom
- this.dom.overlay.parentNode.removeChild(this.dom.overlay);
-
- // cleanup hammer instances
- this.hammer = null;
- this.windowHammer = null;
- // FIXME: cleaning up hammer instances doesn't work (Timeline not removed from memory)
- };
-
- /**
- * Activate the element
- * Overlay is hidden, element is decorated with a blue shadow border
- */
- Activator.prototype.activate = function () {
- // we allow only one active activator at a time
- if (Activator.current) {
- Activator.current.deactivate();
- }
- Activator.current = this;
-
- this.active = true;
- this.dom.overlay.style.display = 'none';
- util.addClassName(this.dom.container, 'vis-active');
-
- this.emit('change');
- this.emit('activate');
-
- // ugly hack: bind ESC after emitting the events, as the Network rebinds all
- // keyboard events on a 'change' event
- mousetrap.bind('esc', this.escListener);
- };
-
- /**
- * Deactivate the element
- * Overlay is displayed on top of the element
- */
- Activator.prototype.deactivate = function () {
- this.active = false;
- this.dom.overlay.style.display = '';
- util.removeClassName(this.dom.container, 'vis-active');
- mousetrap.unbind('esc', this.escListener);
-
- this.emit('change');
- this.emit('deactivate');
- };
-
- /**
- * Handle a tap event: activate the container
- * @param event
- * @private
- */
- Activator.prototype._onTapOverlay = function (event) {
- // activate the container
- this.activate();
- event.stopPropagation();
- };
-
- /**
- * Test whether the element has the requested parent element somewhere in
- * its chain of parent nodes.
- * @param {HTMLElement} element
- * @param {HTMLElement} parent
- * @returns {boolean} Returns true when the parent is found somewhere in the
- * chain of parent nodes.
- * @private
- */
- function _hasParent(element, parent) {
- while (element) {
- if (element === parent) {
- return true
- }
- element = element.parentNode;
- }
- return false;
- }
-
- module.exports = Activator;
-
-
-/***/ },
-/* 40 */
-/***/ function(module, exports, __webpack_require__) {
-
- /**
- * Copyright 2012 Craig Campbell
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Mousetrap is a simple keyboard shortcut library for Javascript with
- * no external dependencies
- *
- * @version 1.1.2
- * @url craig.is/killing/mice
- */
-
- /**
- * mapping of special keycodes to their corresponding keys
- *
- * everything in this dictionary cannot use keypress events
- * so it has to be here to map to the correct keycodes for
- * keyup/keydown events
- *
- * @type {Object}
- */
- var _MAP = {
- 8: 'backspace',
- 9: 'tab',
- 13: 'enter',
- 16: 'shift',
- 17: 'ctrl',
- 18: 'alt',
- 20: 'capslock',
- 27: 'esc',
- 32: 'space',
- 33: 'pageup',
- 34: 'pagedown',
- 35: 'end',
- 36: 'home',
- 37: 'left',
- 38: 'up',
- 39: 'right',
- 40: 'down',
- 45: 'ins',
- 46: 'del',
- 91: 'meta',
- 93: 'meta',
- 224: 'meta'
- },
-
- /**
- * mapping for special characters so they can support
- *
- * this dictionary is only used incase you want to bind a
- * keyup or keydown event to one of these keys
- *
- * @type {Object}
- */
- _KEYCODE_MAP = {
- 106: '*',
- 107: '+',
- 109: '-',
- 110: '.',
- 111 : '/',
- 186: ';',
- 187: '=',
- 188: ',',
- 189: '-',
- 190: '.',
- 191: '/',
- 192: '`',
- 219: '[',
- 220: '\\',
- 221: ']',
- 222: '\''
- },
-
- /**
- * this is a mapping of keys that require shift on a US keypad
- * back to the non shift equivelents
- *
- * this is so you can use keyup events with these keys
- *
- * note that this will only work reliably on US keyboards
- *
- * @type {Object}
- */
- _SHIFT_MAP = {
- '~': '`',
- '!': '1',
- '@': '2',
- '#': '3',
- '$': '4',
- '%': '5',
- '^': '6',
- '&': '7',
- '*': '8',
- '(': '9',
- ')': '0',
- '_': '-',
- '+': '=',
- ':': ';',
- '\"': '\'',
- '<': ',',
- '>': '.',
- '?': '/',
- '|': '\\'
- },
-
- /**
- * this is a list of special strings you can use to map
- * to modifier keys when you specify your keyboard shortcuts
- *
- * @type {Object}
- */
- _SPECIAL_ALIASES = {
- 'option': 'alt',
- 'command': 'meta',
- 'return': 'enter',
- 'escape': 'esc'
- },
-
- /**
- * variable to store the flipped version of _MAP from above
- * needed to check if we should use keypress or not when no action
- * is specified
- *
- * @type {Object|undefined}
- */
- _REVERSE_MAP,
-
- /**
- * a list of all the callbacks setup via Mousetrap.bind()
- *
- * @type {Object}
- */
- _callbacks = {},
-
- /**
- * direct map of string combinations to callbacks used for trigger()
- *
- * @type {Object}
- */
- _direct_map = {},
-
- /**
- * keeps track of what level each sequence is at since multiple
- * sequences can start out with the same sequence
- *
- * @type {Object}
- */
- _sequence_levels = {},
-
- /**
- * variable to store the setTimeout call
- *
- * @type {null|number}
- */
- _reset_timer,
+ delete this.groups[UNGROUPED];
+ this.legendLeft.removeGroup(UNGROUPED);
+ this.legendRight.removeGroup(UNGROUPED);
+ this.yAxisLeft.removeGroup(UNGROUPED);
+ this.yAxisRight.removeGroup(UNGROUPED);
+ }
- /**
- * temporary state where we will ignore the next keyup
- *
- * @type {boolean|string}
- */
- _ignore_next_keyup = false,
+ this.legendLeft.redraw();
+ this.legendRight.redraw();
+ };
- /**
- * are we currently inside of a sequence?
- * type of action ("keyup" or "keydown" or "keypress") or false
- *
- * @type {boolean|string}
- */
- _inside_sequence = false;
- /**
- * loop through the f keys, f1 to f19 and add them to the map
- * programatically
- */
- for (var i = 1; i < 20; ++i) {
- _MAP[111 + i] = 'f' + i;
+ /**
+ * Redraw the component, mandatory function
+ * @return {boolean} Returns true if the component is resized
+ */
+ LineGraph.prototype.redraw = function() {
+ var resized = false;
+
+ this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+ if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
+ resized = true;
}
+ // check if this component is resized
+ resized = this._isResized() || resized;
+ // check whether zoomed (in that case we need to re-stack everything)
+ var visibleInterval = this.body.range.end - this.body.range.start;
+ var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
+ this.lastVisibleInterval = visibleInterval;
+ this.lastWidth = this.width;
- /**
- * loop through to map numbers on the numeric keypad
- */
- for (i = 0; i <= 9; ++i) {
- _MAP[i + 96] = i;
+ // calculate actual size and position
+ this.width = this.dom.frame.offsetWidth;
+
+ // the svg element is three times as big as the width, this allows for fully dragging left and right
+ // without reloading the graph. the controls for this are bound to events in the constructor
+ if (resized == true) {
+ this.svg.style.width = util.option.asSize(3*this.width);
+ this.svg.style.left = util.option.asSize(-this.width);
}
- /**
- * cross browser add event method
- *
- * @param {Element|HTMLDocument} object
- * @param {string} type
- * @param {Function} callback
- * @returns void
- */
- function _addEvent(object, type, callback) {
- if (object.addEventListener) {
- return object.addEventListener(type, callback, false);
+ if (zoomed == true || this.abortedGraphUpdate == true) {
+ this._updateGraph();
+ }
+ else {
+ // move the whole svg while dragging
+ if (this.lastStart != 0) {
+ var offset = this.body.range.start - this.lastStart;
+ var range = this.body.range.end - this.body.range.start;
+ if (this.width != 0) {
+ var rangePerPixelInv = this.width/range;
+ var xOffset = offset * rangePerPixelInv;
+ this.svg.style.left = (-this.width - xOffset) + "px";
}
+ }
- object.attachEvent('on' + type, callback);
}
- /**
- * takes the event and returns the key character
- *
- * @param {Event} e
- * @return {string}
- */
- function _characterFromEvent(e) {
+ this.legendLeft.redraw();
+ this.legendRight.redraw();
- // for keypress events we should return the character as is
- if (e.type == 'keypress') {
- return String.fromCharCode(e.which);
+ return resized;
+ };
+
+ /**
+ * Update and redraw the graph.
+ *
+ */
+ LineGraph.prototype._updateGraph = function () {
+ // reset the svg elements
+ DOMutil.prepareElements(this.svgElements);
+ if (this.width != 0 && this.itemsData != null) {
+ var group, i;
+ var preprocessedGroupData = {};
+ var processedGroupData = {};
+ var groupRanges = {};
+ var changeCalled = false;
+
+ // getting group Ids
+ var groupIds = [];
+ for (var groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ group = this.groups[groupId];
+ if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
+ groupIds.push(groupId);
+ }
+ }
+ }
+ if (groupIds.length > 0) {
+ // this is the range of the SVG canvas
+ var minDate = this.body.util.toGlobalTime(- this.body.domProps.root.width);
+ var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
+ var groupsData = {};
+ // fill groups data
+ this._getRelevantData(groupIds, groupsData, minDate, maxDate);
+ // we transform the X coordinates to detect collisions
+ for (i = 0; i < groupIds.length; i++) {
+ preprocessedGroupData[groupIds[i]] = this._convertXcoordinates(groupsData[groupIds[i]]);
}
+ // now all needed data has been collected we start the processing.
+ this._getYRanges(groupIds, preprocessedGroupData, groupRanges);
- // for non keypress events the special maps are needed
- if (_MAP[e.which]) {
- return _MAP[e.which];
+ // update the Y axis first, we use this data to draw at the correct Y points
+ // changeCalled is required to clean the SVG on a change emit.
+ changeCalled = this._updateYAxis(groupIds, groupRanges);
+ if (changeCalled == true) {
+ DOMutil.cleanupElements(this.svgElements);
+ this.abortedGraphUpdate = true;
+ this.body.emitter.emit("change");
+ return;
}
+ this.abortedGraphUpdate = false;
- if (_KEYCODE_MAP[e.which]) {
- return _KEYCODE_MAP[e.which];
+ // With the yAxis scaled correctly, use this to get the Y values of the points.
+ for (i = 0; i < groupIds.length; i++) {
+ group = this.groups[groupIds[i]];
+ processedGroupData[groupIds[i]] = this._convertYcoordinates(groupsData[groupIds[i]], group);
}
- // if it is not in the special map
- return String.fromCharCode(e.which).toLowerCase();
+
+ // draw the groups
+ for (i = 0; i < groupIds.length; i++) {
+ group = this.groups[groupIds[i]];
+ if (group.options.style == 'line') {
+ this._drawLineGraph(processedGroupData[groupIds[i]], group);
+ }
+ }
+ this._drawBarGraphs(groupIds, processedGroupData);
+ }
}
- /**
- * should we stop this event before firing off callbacks
- *
- * @param {Event} e
- * @return {boolean}
- */
- function _stop(e) {
- var element = e.target || e.srcElement,
- tag_name = element.tagName;
+ // cleanup unused svg elements
+ DOMutil.cleanupElements(this.svgElements);
+ };
- // if the element has the class "mousetrap" then no need to stop
- if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
- return false;
- }
- // stop for input, select, and textarea
- return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
+ LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
+ // first select and preprocess the data from the datasets.
+ // the groups have their preselection of data, we now loop over this data to see
+ // what data we need to draw. Sorted data is much faster.
+ // more optimization is possible by doing the sampling before and using the binary search
+ // to find the end date to determine the increment.
+ var group, i, j, item;
+ if (groupIds.length > 0) {
+ for (i = 0; i < groupIds.length; i++) {
+ group = this.groups[groupIds[i]];
+ groupsData[groupIds[i]] = [];
+ var dataContainer = groupsData[groupIds[i]];
+ // optimization for sorted data
+ if (group.options.sort == true) {
+ var guess = Math.max(0, util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
+ for (j = guess; j < group.itemsData.length; j++) {
+ item = group.itemsData[j];
+ if (item !== undefined) {
+ if (item.x > maxDate) {
+ dataContainer.push(item);
+ break;
+ }
+ else {
+ dataContainer.push(item);
+ }
+ }
+ }
+ }
+ else {
+ for (j = 0; j < group.itemsData.length; j++) {
+ item = group.itemsData[j];
+ if (item !== undefined) {
+ if (item.x > minDate && item.x < maxDate) {
+ dataContainer.push(item);
+ }
+ }
+ }
+ }
+ }
}
- /**
- * checks if two arrays are equal
- *
- * @param {Array} modifiers1
- * @param {Array} modifiers2
- * @returns {boolean}
- */
- function _modifiersMatch(modifiers1, modifiers2) {
- return modifiers1.sort().join(',') === modifiers2.sort().join(',');
- }
+ this._applySampling(groupIds, groupsData);
+ };
- /**
- * resets all sequence counters except for the ones passed in
- *
- * @param {Object} do_not_reset
- * @returns void
- */
- function _resetSequences(do_not_reset) {
- do_not_reset = do_not_reset || {};
+ LineGraph.prototype._applySampling = function (groupIds, groupsData) {
+ var group;
+ if (groupIds.length > 0) {
+ for (var i = 0; i < groupIds.length; i++) {
+ group = this.groups[groupIds[i]];
+ if (group.options.sampling == true) {
+ var dataContainer = groupsData[groupIds[i]];
+ if (dataContainer.length > 0) {
+ var increment = 1;
+ var amountOfPoints = dataContainer.length;
- var active_sequences = false,
- key;
+ // the global screen is used because changing the width of the yAxis may affect the increment, resulting in an endless loop
+ // of width changing of the yAxis.
+ var xDistance = this.body.util.toGlobalScreen(dataContainer[dataContainer.length - 1].x) - this.body.util.toGlobalScreen(dataContainer[0].x);
+ var pointsPerPixel = amountOfPoints / xDistance;
+ increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1, Math.round(pointsPerPixel)));
+
+ var sampledData = [];
+ for (var j = 0; j < amountOfPoints; j += increment) {
+ sampledData.push(dataContainer[j]);
- for (key in _sequence_levels) {
- if (do_not_reset[key]) {
- active_sequences = true;
- continue;
}
- _sequence_levels[key] = 0;
- }
-
- if (!active_sequences) {
- _inside_sequence = false;
+ groupsData[groupIds[i]] = sampledData;
+ }
}
+ }
}
+ };
- /**
- * finds all callbacks that match based on the keycode, modifiers,
- * and action
- *
- * @param {string} character
- * @param {Array} modifiers
- * @param {string} action
- * @param {boolean=} remove - should we remove any matches
- * @param {string=} combination
- * @returns {Array}
- */
- function _getMatches(character, modifiers, action, remove, combination) {
- var i,
- callback,
- matches = [];
+ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
+ var groupData, group, i,j;
+ var barCombinedDataLeft = [];
+ var barCombinedDataRight = [];
+ var barCombinedData;
+ if (groupIds.length > 0) {
+ for (i = 0; i < groupIds.length; i++) {
+ groupData = groupsData[groupIds[i]];
+ if (groupData.length > 0) {
+ group = this.groups[groupIds[i]];
+ if (group.options.style == 'line' || group.options.barChart.handleOverlap != "stack") {
+ var yMin = groupData[0].y;
+ var yMax = groupData[0].y;
+ for (j = 0; j < groupData.length; j++) {
+ yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+ yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
+ }
+ groupRanges[groupIds[i]] = {min: yMin, max: yMax, yAxisOrientation: group.options.yAxisOrientation};
+ }
+ else if (group.options.style == 'bar') {
+ if (group.options.yAxisOrientation == 'left') {
+ barCombinedData = barCombinedDataLeft;
+ }
+ else {
+ barCombinedData = barCombinedDataRight;
+ }
- // if there are no events related to this keycode
- if (!_callbacks[character]) {
- return [];
- }
+ groupRanges[groupIds[i]] = {min: 0, max: 0, yAxisOrientation: group.options.yAxisOrientation, ignore: true};
- // if a modifier key is coming up on its own we should allow it
- if (action == 'keyup' && _isModifier(character)) {
- modifiers = [character];
+ // combine data
+ for (j = 0; j < groupData.length; j++) {
+ barCombinedData.push({
+ x: groupData[j].x,
+ y: groupData[j].y,
+ groupId: groupIds[i]
+ });
+ }
+ }
}
+ }
- // loop through all callbacks for the key that was pressed
- // and see if any of them match
- for (i = 0; i < _callbacks[character].length; ++i) {
- callback = _callbacks[character][i];
+ var intersections;
+ if (barCombinedDataLeft.length > 0) {
+ // sort by time and by group
+ barCombinedDataLeft.sort(function (a, b) {
+ if (a.x == b.x) {
+ return a.groupId - b.groupId;
+ } else {
+ return a.x - b.x;
+ }
+ });
+ intersections = {};
+ this._getDataIntersections(intersections, barCombinedDataLeft);
+ groupRanges["__barchartLeft"] = this._getStackedBarYRange(intersections, barCombinedDataLeft);
+ groupRanges["__barchartLeft"].yAxisOrientation = "left";
+ groupIds.push("__barchartLeft");
+ }
+ if (barCombinedDataRight.length > 0) {
+ // sort by time and by group
+ barCombinedDataRight.sort(function (a, b) {
+ if (a.x == b.x) {
+ return a.groupId - b.groupId;
+ } else {
+ return a.x - b.x;
+ }
+ });
+ intersections = {};
+ this._getDataIntersections(intersections, barCombinedDataRight);
+ groupRanges["__barchartRight"] = this._getStackedBarYRange(intersections, barCombinedDataRight);
+ groupRanges["__barchartRight"].yAxisOrientation = "right";
+ groupIds.push("__barchartRight");
+ }
+ }
+ };
- // if this is a sequence but it is not at the right level
- // then move onto the next match
- if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
- continue;
- }
+ LineGraph.prototype._getStackedBarYRange = function (intersections, combinedData) {
+ var key;
+ var yMin = combinedData[0].y;
+ var yMax = combinedData[0].y;
+ for (var i = 0; i < combinedData.length; i++) {
+ key = combinedData[i].x;
+ if (intersections[key] === undefined) {
+ yMin = yMin > combinedData[i].y ? combinedData[i].y : yMin;
+ yMax = yMax < combinedData[i].y ? combinedData[i].y : yMax;
+ }
+ else {
+ intersections[key].accumulated += combinedData[i].y;
+ }
+ }
+ for (var xpos in intersections) {
+ if (intersections.hasOwnProperty(xpos)) {
+ yMin = yMin > intersections[xpos].accumulated ? intersections[xpos].accumulated : yMin;
+ yMax = yMax < intersections[xpos].accumulated ? intersections[xpos].accumulated : yMax;
+ }
+ }
- // if the action we are looking for doesn't match the action we got
- // then we should keep going
- if (action != callback.action) {
- continue;
- }
+ return {min: yMin, max: yMax};
+ };
- // if this is a keypress event that means that we need to only
- // look at the character, otherwise check the modifiers as
- // well
- if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
- // remove is used so if you change your mind and call bind a
- // second time with a new function the first one is overwritten
- if (remove && callback.combo == combination) {
- _callbacks[character].splice(i, 1);
- }
+ /**
+ * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
+ * @param {Array} groupIds
+ * @param {Object} groupRanges
+ * @private
+ */
+ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
+ var changeCalled = false;
+ var yAxisLeftUsed = false;
+ var yAxisRightUsed = false;
+ var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
+ // if groups are present
+ if (groupIds.length > 0) {
+ for (var i = 0; i < groupIds.length; i++) {
+ if (groupRanges.hasOwnProperty(groupIds[i])) {
+ if (groupRanges[groupIds[i]].ignore !== true) {
+ minVal = groupRanges[groupIds[i]].min;
+ maxVal = groupRanges[groupIds[i]].max;
- matches.push(callback);
+ if (groupRanges[groupIds[i]].yAxisOrientation == 'left') {
+ yAxisLeftUsed = true;
+ minLeft = minLeft > minVal ? minVal : minLeft;
+ maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
+ }
+ else {
+ yAxisRightUsed = true;
+ minRight = minRight > minVal ? minVal : minRight;
+ maxRight = maxRight < maxVal ? maxVal : maxRight;
}
+ }
}
+ }
- return matches;
+ if (yAxisLeftUsed == true) {
+ this.yAxisLeft.setRange(minLeft, maxLeft);
+ }
+ if (yAxisRightUsed == true) {
+ this.yAxisRight.setRange(minRight, maxRight);
+ }
}
- /**
- * takes a key event and figures out what the modifiers are
- *
- * @param {Event} e
- * @returns {Array}
- */
- function _eventModifiers(e) {
- var modifiers = [];
+ changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled;
+ changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
- if (e.shiftKey) {
- modifiers.push('shift');
- }
+ if (yAxisRightUsed == true && yAxisLeftUsed == true) {
+ this.yAxisLeft.drawIcons = true;
+ this.yAxisRight.drawIcons = true;
+ }
+ else {
+ this.yAxisLeft.drawIcons = false;
+ this.yAxisRight.drawIcons = false;
+ }
- if (e.altKey) {
- modifiers.push('alt');
- }
+ this.yAxisRight.master = !yAxisLeftUsed;
- if (e.ctrlKey) {
- modifiers.push('ctrl');
- }
+ if (this.yAxisRight.master == false) {
+ if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
+ else {this.yAxisLeft.lineOffset = 0;}
- if (e.metaKey) {
- modifiers.push('meta');
- }
+ changeCalled = this.yAxisLeft.redraw() || changeCalled;
+ this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+ changeCalled = this.yAxisRight.redraw() || changeCalled;
+ }
+ else {
+ changeCalled = this.yAxisRight.redraw() || changeCalled;
+ }
- return modifiers;
+ // clean the accumulated lists
+ if (groupIds.indexOf("__barchartLeft") != -1) {
+ groupIds.splice(groupIds.indexOf("__barchartLeft"),1);
+ }
+ if (groupIds.indexOf("__barchartRight") != -1) {
+ groupIds.splice(groupIds.indexOf("__barchartRight"),1);
+ }
+
+ return changeCalled;
+ };
+
+ /**
+ * This shows or hides the Y axis if needed. If there is a change, the changed event is emitted by the updateYAxis function
+ *
+ * @param {boolean} axisUsed
+ * @returns {boolean}
+ * @private
+ * @param axis
+ */
+ LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
+ var changed = false;
+ if (axisUsed == false) {
+ if (axis.dom.frame.parentNode) {
+ axis.hide();
+ changed = true;
+ }
+ }
+ else {
+ if (!axis.dom.frame.parentNode) {
+ axis.show();
+ changed = true;
+ }
}
+ return changed;
+ };
- /**
- * actually calls the callback function
- *
- * if your callback function returns false this will use the jquery
- * convention - prevent default and stop propogation on the event
- *
- * @param {Function} callback
- * @param {Event} e
- * @returns void
- */
- function _fireCallback(callback, e) {
- if (callback(e) === false) {
- if (e.preventDefault) {
- e.preventDefault();
- }
- if (e.stopPropagation) {
- e.stopPropagation();
- }
+ /**
+ * draw a bar graph
+ *
+ * @param groupIds
+ * @param processedGroupData
+ */
+ LineGraph.prototype._drawBarGraphs = function (groupIds, processedGroupData) {
+ var combinedData = [];
+ var intersections = {};
+ var coreDistance;
+ var key, drawData;
+ var group;
+ var i,j;
+ var barPoints = 0;
- e.returnValue = false;
- e.cancelBubble = true;
+ // combine all barchart data
+ for (i = 0; i < groupIds.length; i++) {
+ group = this.groups[groupIds[i]];
+ if (group.options.style == 'bar') {
+ if (group.visible == true && (this.options.groups.visibility[groupIds[i]] === undefined || this.options.groups.visibility[groupIds[i]] == true)) {
+ for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
+ combinedData.push({
+ x: processedGroupData[groupIds[i]][j].x,
+ y: processedGroupData[groupIds[i]][j].y,
+ groupId: groupIds[i]
+ });
+ barPoints += 1;
+ }
}
+ }
}
- /**
- * handles a character key event
- *
- * @param {string} character
- * @param {Event} e
- * @returns void
- */
- function _handleCharacter(character, e) {
-
- // if this event should not happen stop here
- if (_stop(e)) {
- return;
- }
+ if (barPoints == 0) {return;}
- var callbacks = _getMatches(character, _eventModifiers(e), e.type),
- i,
- do_not_reset = {},
- processed_sequence_callback = false;
+ // sort by time and by group
+ combinedData.sort(function (a, b) {
+ if (a.x == b.x) {
+ return a.groupId - b.groupId;
+ } else {
+ return a.x - b.x;
+ }
+ });
- // loop through matching callbacks for this key event
- for (i = 0; i < callbacks.length; ++i) {
+ // get intersections
+ this._getDataIntersections(intersections, combinedData);
- // fire for all sequence callbacks
- // this is because if for example you have multiple sequences
- // bound such as "g i" and "g t" they both need to fire the
- // callback for matching g cause otherwise you can only ever
- // match the first one
- if (callbacks[i].seq) {
- processed_sequence_callback = true;
+ // plot barchart
+ for (i = 0; i < combinedData.length; i++) {
+ group = this.groups[combinedData[i].groupId];
+ var minWidth = 0.1 * group.options.barChart.width;
- // keep a list of which sequences were matches for later
- do_not_reset[callbacks[i].seq] = 1;
- _fireCallback(callbacks[i].callback, e);
- continue;
- }
+ key = combinedData[i].x;
+ var heightOffset = 0;
+ if (intersections[key] === undefined) {
+ if (i+1 < combinedData.length) {coreDistance = Math.abs(combinedData[i+1].x - key);}
+ if (i > 0) {coreDistance = Math.min(coreDistance,Math.abs(combinedData[i-1].x - key));}
+ drawData = this._getSafeDrawData(coreDistance, group, minWidth);
+ }
+ else {
+ var nextKey = i + (intersections[key].amount - intersections[key].resolved);
+ var prevKey = i - (intersections[key].resolved + 1);
+ if (nextKey < combinedData.length) {coreDistance = Math.abs(combinedData[nextKey].x - key);}
+ if (prevKey > 0) {coreDistance = Math.min(coreDistance,Math.abs(combinedData[prevKey].x - key));}
+ drawData = this._getSafeDrawData(coreDistance, group, minWidth);
+ intersections[key].resolved += 1;
- // if there were no sequence matches but we are still here
- // that means this is a regular match so we should fire that
- if (!processed_sequence_callback && !_inside_sequence) {
- _fireCallback(callbacks[i].callback, e);
- }
+ if (group.options.barChart.handleOverlap == 'stack') {
+ heightOffset = intersections[key].accumulated;
+ intersections[key].accumulated += group.zeroPosition - combinedData[i].y;
}
-
- // if you are inside of a sequence and the key you are pressing
- // is not a modifier key then we should reset all sequences
- // that were not matched by this key event
- if (e.type == _inside_sequence && !_isModifier(character)) {
- _resetSequences(do_not_reset);
+ else if (group.options.barChart.handleOverlap == 'sideBySide') {
+ drawData.width = drawData.width / intersections[key].amount;
+ drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1));
+ if (group.options.barChart.align == 'left') {drawData.offset -= 0.5*drawData.width;}
+ else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
}
+ }
+ DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', this.svgElements, this.svg);
+ // draw points
+ if (group.options.drawPoints.enabled == true) {
+ DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, group, this.svgElements, this.svg);
+ }
}
+ };
- /**
- * handles a keydown event
- *
- * @param {Event} e
- * @returns void
- */
- function _handleKey(e) {
-
- // normalize e.which for key events
- // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
- e.which = typeof e.which == "number" ? e.which : e.keyCode;
-
- var character = _characterFromEvent(e);
-
- // no character found then stop
- if (!character) {
- return;
- }
-
- if (e.type == 'keyup' && _ignore_next_keyup == character) {
- _ignore_next_keyup = false;
- return;
+ /**
+ * Fill the intersections object with counters of how many datapoints share the same x coordinates
+ * @param intersections
+ * @param combinedData
+ * @private
+ */
+ LineGraph.prototype._getDataIntersections = function (intersections, combinedData) {
+ // get intersections
+ var coreDistance;
+ for (var i = 0; i < combinedData.length; i++) {
+ if (i + 1 < combinedData.length) {
+ coreDistance = Math.abs(combinedData[i + 1].x - combinedData[i].x);
+ }
+ if (i > 0) {
+ coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x));
+ }
+ if (coreDistance == 0) {
+ if (intersections[combinedData[i].x] === undefined) {
+ intersections[combinedData[i].x] = {amount: 0, resolved: 0, accumulated: 0};
}
-
- _handleCharacter(character, e);
+ intersections[combinedData[i].x].amount += 1;
+ }
}
+ };
- /**
- * determines if the keycode specified is a modifier key or not
- *
- * @param {string} key
- * @returns {boolean}
- */
- function _isModifier(key) {
- return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
- }
+ /**
+ * Get the width and offset for bargraphs based on the coredistance between datapoints
+ *
+ * @param coreDistance
+ * @param group
+ * @param minWidth
+ * @returns {{width: Number, offset: Number}}
+ * @private
+ */
+ LineGraph.prototype._getSafeDrawData = function (coreDistance, group, minWidth) {
+ var width, offset;
+ if (coreDistance < group.options.barChart.width && coreDistance > 0) {
+ width = coreDistance < minWidth ? minWidth : coreDistance;
- /**
- * called to set a 1 second timeout on the specified sequence
- *
- * this is so after each key press in the sequence you have 1 second
- * to press the next key before you have to start over
- *
- * @returns void
- */
- function _resetSequenceTimer() {
- clearTimeout(_reset_timer);
- _reset_timer = setTimeout(_resetSequences, 1000);
+ offset = 0; // recalculate offset with the new width;
+ if (group.options.barChart.align == 'left') {
+ offset -= 0.5 * coreDistance;
+ }
+ else if (group.options.barChart.align == 'right') {
+ offset += 0.5 * coreDistance;
+ }
}
-
- /**
- * reverses the map lookup so that we can look for specific keys
- * to see what can and can't use keypress
- *
- * @return {Object}
- */
- function _getReverseMap() {
- if (!_REVERSE_MAP) {
- _REVERSE_MAP = {};
- for (var key in _MAP) {
-
- // pull out the numeric keypad from here cause keypress should
- // be able to detect the keys from the character
- if (key > 95 && key < 112) {
- continue;
- }
-
- if (_MAP.hasOwnProperty(key)) {
- _REVERSE_MAP[_MAP[key]] = key;
- }
- }
- }
- return _REVERSE_MAP;
+ else {
+ // default settings
+ width = group.options.barChart.width;
+ offset = 0;
+ if (group.options.barChart.align == 'left') {
+ offset -= 0.5 * group.options.barChart.width;
+ }
+ else if (group.options.barChart.align == 'right') {
+ offset += 0.5 * group.options.barChart.width;
+ }
}
- /**
- * picks the best action based on the key combination
- *
- * @param {string} key - character for key
- * @param {Array} modifiers
- * @param {string=} action passed in
- */
- function _pickBestAction(key, modifiers, action) {
-
- // if no action was picked in we should try to pick the one
- // that we think would work best for this key
- if (!action) {
- action = _getReverseMap()[key] ? 'keydown' : 'keypress';
- }
+ return {width: width, offset: offset};
+ };
- // modifier keys don't work as expected with keypress,
- // switch to keydown
- if (action == 'keypress' && modifiers.length) {
- action = 'keydown';
- }
- return action;
- }
+ /**
+ * draw a line graph
+ *
+ * @param dataset
+ * @param group
+ */
+ LineGraph.prototype._drawLineGraph = function (dataset, group) {
+ if (dataset != null) {
+ if (dataset.length > 0) {
+ var path, d;
+ var svgHeight = Number(this.svg.style.height.replace("px",""));
+ path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
+ path.setAttributeNS(null, "class", group.className);
- /**
- * binds a key sequence to an event
- *
- * @param {string} combo - combo specified in bind call
- * @param {Array} keys
- * @param {Function} callback
- * @param {string=} action
- * @returns void
- */
- function _bindSequence(combo, keys, callback, action) {
+ // construct path from dataset
+ if (group.options.catmullRom.enabled == true) {
+ d = this._catmullRom(dataset, group);
+ }
+ else {
+ d = this._linear(dataset);
+ }
- // start off by adding a sequence level record for this combination
- // and setting the level to 0
- _sequence_levels[combo] = 0;
+ // append with points for fill and finalize the path
+ if (group.options.shaded.enabled == true) {
+ var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.svg);
+ var dFill;
+ if (group.options.shaded.orientation == 'top') {
+ dFill = "M" + dataset[0].x + "," + 0 + " " + d + "L" + dataset[dataset.length - 1].x + "," + 0;
+ }
+ else {
+ dFill = "M" + dataset[0].x + "," + svgHeight + " " + d + "L" + dataset[dataset.length - 1].x + "," + svgHeight;
+ }
+ fillPath.setAttributeNS(null, "class", group.className + " fill");
+ fillPath.setAttributeNS(null, "d", dFill);
+ }
+ // copy properties to path for drawing.
+ path.setAttributeNS(null, "d", "M" + d);
- // if there is no action pick the best one for the first key
- // in the sequence
- if (!action) {
- action = _pickBestAction(keys[0], []);
+ // draw points
+ if (group.options.drawPoints.enabled == true) {
+ this._drawPoints(dataset, group, this.svgElements, this.svg);
}
+ }
+ }
+ };
- /**
- * callback to increase the sequence level for this sequence and reset
- * all other sequences that were active
- *
- * @param {Event} e
- * @returns void
- */
- var _increaseSequence = function(e) {
- _inside_sequence = action;
- ++_sequence_levels[combo];
- _resetSequenceTimer();
- },
+ /**
+ * draw the data points
+ *
+ * @param {Array} dataset
+ * @param {Object} JSONcontainer
+ * @param {Object} svg | SVG DOM element
+ * @param {GraphGroup} group
+ * @param {Number} [offset]
+ */
+ LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
+ if (offset === undefined) {offset = 0;}
+ for (var i = 0; i < dataset.length; i++) {
+ DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
+ }
+ };
- /**
- * wraps the specified callback inside of another function in order
- * to reset all sequence counters as soon as this sequence is done
- *
- * @param {Event} e
- * @returns void
- */
- _callbackAndReset = function(e) {
- _fireCallback(callback, e);
- // we should ignore the next key up if the action is key down
- // or keypress. this is so if you finish a sequence and
- // release the key the final key will not trigger a keyup
- if (action !== 'keyup') {
- _ignore_next_keyup = _characterFromEvent(e);
- }
- // weird race condition if a sequence ends with the key
- // another sequence begins with
- setTimeout(_resetSequences, 10);
- },
- i;
+ /**
+ * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
+ * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
+ * the yAxis.
+ *
+ * @param datapoints
+ * @returns {Array}
+ * @private
+ */
+ LineGraph.prototype._convertXcoordinates = function (datapoints) {
+ var extractedData = [];
+ var xValue, yValue;
+ var toScreen = this.body.util.toScreen;
- // loop through keys one at a time and bind the appropriate callback
- // function. for any key leading up to the final one it should
- // increase the sequence. after the final, it should reset all sequences
- for (i = 0; i < keys.length; ++i) {
- _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
- }
+ for (var i = 0; i < datapoints.length; i++) {
+ xValue = toScreen(datapoints[i].x) + this.width;
+ yValue = datapoints[i].y;
+ extractedData.push({x: xValue, y: yValue});
}
- /**
- * binds a single keyboard combination
- *
- * @param {string} combination
- * @param {Function} callback
- * @param {string=} action
- * @param {string=} sequence_name - name of sequence if part of sequence
- * @param {number=} level - what part of the sequence the command is
- * @returns void
- */
- function _bindSingle(combination, callback, action, sequence_name, level) {
+ return extractedData;
+ };
- // make sure multiple spaces in a row become a single space
- combination = combination.replace(/\s+/g, ' ');
- var sequence = combination.split(' '),
- i,
- key,
- keys,
- modifiers = [];
- // if this pattern is a sequence of keys then run through this method
- // to reprocess each pattern one key at a time
- if (sequence.length > 1) {
- return _bindSequence(combination, sequence, callback, action);
- }
+ /**
+ * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
+ * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
+ * the yAxis.
+ *
+ * @param datapoints
+ * @returns {Array}
+ * @private
+ */
+ LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
+ var extractedData = [];
+ var xValue, yValue;
+ var toScreen = this.body.util.toScreen;
+ var axis = this.yAxisLeft;
+ var svgHeight = Number(this.svg.style.height.replace("px",""));
+ if (group.options.yAxisOrientation == 'right') {
+ axis = this.yAxisRight;
+ }
- // take the keys from this pattern and figure out what the actual
- // pattern is all about
- keys = combination === '+' ? ['+'] : combination.split('+');
+ for (var i = 0; i < datapoints.length; i++) {
+ xValue = toScreen(datapoints[i].x) + this.width;
+ yValue = Math.round(axis.convertValue(datapoints[i].y));
+ extractedData.push({x: xValue, y: yValue});
+ }
- for (i = 0; i < keys.length; ++i) {
- key = keys[i];
+ group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
- // normalize key names
- if (_SPECIAL_ALIASES[key]) {
- key = _SPECIAL_ALIASES[key];
- }
+ return extractedData;
+ };
- // if this is not a keypress event then we should
- // be smart about using shift keys
- // this will only work for US keyboards however
- if (action && action != 'keypress' && _SHIFT_MAP[key]) {
- key = _SHIFT_MAP[key];
- modifiers.push('shift');
- }
+ /**
+ * This uses an uniform parametrization of the CatmullRom algorithm:
+ * "On the Parameterization of Catmull-Rom Curves" by Cem Yuksel et al.
+ * @param data
+ * @returns {string}
+ * @private
+ */
+ LineGraph.prototype._catmullRomUniform = function(data) {
+ // catmull rom
+ var p0, p1, p2, p3, bp1, bp2;
+ var d = Math.round(data[0].x) + "," + Math.round(data[0].y) + " ";
+ var normalization = 1/6;
+ var length = data.length;
+ for (var i = 0; i < length - 1; i++) {
- // if this key is a modifier then add it to the list of modifiers
- if (_isModifier(key)) {
- modifiers.push(key);
- }
- }
+ p0 = (i == 0) ? data[0] : data[i-1];
+ p1 = data[i];
+ p2 = data[i+1];
+ p3 = (i + 2 < length) ? data[i+2] : p2;
- // depending on what the key combination is
- // we will try to pick the best event for it
- action = _pickBestAction(key, modifiers, action);
- // make sure to initialize array if this is the first time
- // a callback is added for this key
- if (!_callbacks[key]) {
- _callbacks[key] = [];
- }
+ // Catmull-Rom to Cubic Bezier conversion matrix
+ // 0 1 0 0
+ // -1/6 1 1/6 0
+ // 0 1/6 1 -1/6
+ // 0 0 1 0
- // remove an existing match if there is one
- _getMatches(key, modifiers, action, !sequence_name, combination);
+ // bp0 = { x: p1.x, y: p1.y };
+ bp1 = { x: ((-p0.x + 6*p1.x + p2.x) *normalization), y: ((-p0.y + 6*p1.y + p2.y) *normalization)};
+ bp2 = { x: (( p1.x + 6*p2.x - p3.x) *normalization), y: (( p1.y + 6*p2.y - p3.y) *normalization)};
+ // bp0 = { x: p2.x, y: p2.y };
- // add this call back to the array
- // if it is a sequence put it at the beginning
- // if not put it at the end
- //
- // this is important because the way these are processed expects
- // the sequence ones to come first
- _callbacks[key][sequence_name ? 'unshift' : 'push']({
- callback: callback,
- modifiers: modifiers,
- action: action,
- seq: sequence_name,
- level: level,
- combo: combination
- });
+ d += "C" +
+ bp1.x + "," +
+ bp1.y + " " +
+ bp2.x + "," +
+ bp2.y + " " +
+ p2.x + "," +
+ p2.y + " ";
}
- /**
- * binds multiple combinations to the same callback
- *
- * @param {Array} combinations
- * @param {Function} callback
- * @param {string|undefined} action
- * @returns void
- */
- function _bindMultiple(combinations, callback, action) {
- for (var i = 0; i < combinations.length; ++i) {
- _bindSingle(combinations[i], callback, action);
- }
- }
+ return d;
+ };
- // start!
- _addEvent(document, 'keypress', _handleKey);
- _addEvent(document, 'keydown', _handleKey);
- _addEvent(document, 'keyup', _handleKey);
+ /**
+ * This uses either the chordal or centripetal parameterization of the catmull-rom algorithm.
+ * By default, the centripetal parameterization is used because this gives the nicest results.
+ * These parameterizations are relatively heavy because the distance between 4 points have to be calculated.
+ *
+ * One optimization can be used to reuse distances since this is a sliding window approach.
+ * @param data
+ * @returns {string}
+ * @private
+ */
+ LineGraph.prototype._catmullRom = function(data, group) {
+ var alpha = group.options.catmullRom.alpha;
+ if (alpha == 0 || alpha === undefined) {
+ return this._catmullRomUniform(data);
+ }
+ else {
+ var p0, p1, p2, p3, bp1, bp2, d1,d2,d3, A, B, N, M;
+ var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
+ var d = Math.round(data[0].x) + "," + Math.round(data[0].y) + " ";
+ var length = data.length;
+ for (var i = 0; i < length - 1; i++) {
- var mousetrap = {
+ p0 = (i == 0) ? data[0] : data[i-1];
+ p1 = data[i];
+ p2 = data[i+1];
+ p3 = (i + 2 < length) ? data[i+2] : p2;
- /**
- * binds an event to mousetrap
- *
- * can be a single key, a combination of keys separated with +,
- * a comma separated list of keys, an array of keys, or
- * a sequence of keys separated by spaces
- *
- * be sure to list the modifier keys first to make sure that the
- * correct key ends up getting bound (the last key in the pattern)
- *
- * @param {string|Array} keys
- * @param {Function} callback
- * @param {string=} action - 'keypress', 'keydown', or 'keyup'
- * @returns void
- */
- bind: function(keys, callback, action) {
- _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
- _direct_map[keys + ':' + action] = callback;
- return this;
- },
+ d1 = Math.sqrt(Math.pow(p0.x - p1.x,2) + Math.pow(p0.y - p1.y,2));
+ d2 = Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2));
+ d3 = Math.sqrt(Math.pow(p2.x - p3.x,2) + Math.pow(p2.y - p3.y,2));
- /**
- * unbinds an event to mousetrap
- *
- * the unbinding sets the callback function of the specified key combo
- * to an empty function and deletes the corresponding key in the
- * _direct_map dict.
- *
- * the keycombo+action has to be exactly the same as
- * it was defined in the bind method
- *
- * TODO: actually remove this from the _callbacks dictionary instead
- * of binding an empty function
- *
- * @param {string|Array} keys
- * @param {string} action
- * @returns void
- */
- unbind: function(keys, action) {
- if (_direct_map[keys + ':' + action]) {
- delete _direct_map[keys + ':' + action];
- this.bind(keys, function() {}, action);
- }
- return this;
- },
+ // Catmull-Rom to Cubic Bezier conversion matrix
+ //
+ // A = 2d1^2a + 3d1^a * d2^a + d3^2a
+ // B = 2d3^2a + 3d3^a * d2^a + d2^2a
+ //
+ // [ 0 1 0 0 ]
+ // [ -d2^2a/N A/N d1^2a/N 0 ]
+ // [ 0 d3^2a/M B/M -d2^2a/M ]
+ // [ 0 0 1 0 ]
- /**
- * triggers an event that has already been bound
- *
- * @param {string} keys
- * @param {string=} action
- * @returns void
- */
- trigger: function(keys, action) {
- _direct_map[keys + ':' + action]();
- return this;
- },
+ // [ 0 1 0 0 ]
+ // [ -d2pow2a/N A/N d1pow2a/N 0 ]
+ // [ 0 d3pow2a/M B/M -d2pow2a/M ]
+ // [ 0 0 1 0 ]
- /**
- * resets the library back to its initial state. this is useful
- * if you want to clear out the current keyboard shortcuts and bind
- * new ones - for example if you switch to another page
- *
- * @returns void
- */
- reset: function() {
- _callbacks = {};
- _direct_map = {};
- return this;
- }
- };
+ d3powA = Math.pow(d3, alpha);
+ d3pow2A = Math.pow(d3,2*alpha);
+ d2powA = Math.pow(d2, alpha);
+ d2pow2A = Math.pow(d2,2*alpha);
+ d1powA = Math.pow(d1, alpha);
+ d1pow2A = Math.pow(d1,2*alpha);
- module.exports = mousetrap;
+ A = 2*d1pow2A + 3*d1powA * d2powA + d2pow2A;
+ B = 2*d3pow2A + 3*d3powA * d2powA + d2pow2A;
+ N = 3*d1powA * (d1powA + d2powA);
+ if (N > 0) {N = 1 / N;}
+ M = 3*d3powA * (d3powA + d2powA);
+ if (M > 0) {M = 1 / M;}
+ bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
+ y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
+ bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
+ y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
-/***/ },
-/* 41 */
-/***/ function(module, exports, __webpack_require__) {
+ if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;}
+ if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;}
+ d += "C" +
+ bp1.x + "," +
+ bp1.y + " " +
+ bp2.x + "," +
+ bp2.y + " " +
+ p2.x + "," +
+ p2.y + " ";
+ }
- var Emitter = __webpack_require__(10);
- var Hammer = __webpack_require__(18);
- var util = __webpack_require__(1);
- var DataSet = __webpack_require__(7);
- var DataView = __webpack_require__(8);
- var Range = __webpack_require__(20);
- var Core = __webpack_require__(24);
- var TimeAxis = __webpack_require__(25);
- var CurrentTime = __webpack_require__(27);
- var CustomTime = __webpack_require__(29);
- var LineGraph = __webpack_require__(42);
+ return d;
+ }
+ };
/**
- * 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
- * @extends Core
+ * this generates the SVG path for a linear drawing between datapoints.
+ * @param data
+ * @returns {string}
+ * @private
*/
- function Graph2d (container, items, groups, options) {
- // if the third element is options, the forth is groups (optionally);
- if (!(Array.isArray(groups) || groups instanceof DataSet) && groups instanceof Object) {
- var forthArgument = options;
- options = groups;
- groups = forthArgument;
+ LineGraph.prototype._linear = function(data) {
+ // linear
+ var d = "";
+ for (var i = 0; i < data.length; i++) {
+ if (i == 0) {
+ d += data[i].x + "," + data[i].y;
+ }
+ else {
+ d += " " + data[i].x + "," + data[i].y;
+ }
}
+ return d;
+ };
- var me = this;
- this.defaultOptions = {
- start: null,
- end: null,
+ module.exports = LineGraph;
- autoResize: true,
- orientation: 'bottom',
- width: null,
- height: null,
- maxHeight: null,
- minHeight: null
- };
- this.options = util.deepExtend({}, this.defaultOptions);
+/***/ },
+/* 35 */
+/***/ function(module, exports, __webpack_require__) {
- // Create the DOM, props, and emitter
- this._create(container);
+ var util = __webpack_require__(1);
+ var DOMutil = __webpack_require__(6);
+ var Component = __webpack_require__(22);
+ var DataStep = __webpack_require__(36);
- // all components listed here will be repainted automatically
- this.components = [];
+ /**
+ * A horizontal time axis
+ * @param {Object} [options] See DataAxis.setOptions for the available
+ * options.
+ * @constructor DataAxis
+ * @extends Component
+ * @param body
+ */
+ function DataAxis (body, options, svg, linegraphOptions) {
+ this.id = util.randomUUID();
+ this.body = body;
- 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),
- toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
- toTime: me._toTime.bind(me),
- toGlobalTime : me._toGlobalTime.bind(me)
+ this.defaultOptions = {
+ orientation: 'left', // supported: 'left', 'right'
+ showMinorLabels: true,
+ showMajorLabels: true,
+ icons: true,
+ majorLinesOffset: 7,
+ minorLinesOffset: 4,
+ labelOffsetX: 10,
+ labelOffsetY: 2,
+ iconWidth: 20,
+ width: '40px',
+ visible: true,
+ customRange: {
+ left: {min:undefined, max:undefined},
+ right: {min:undefined, max:undefined}
}
};
- // range
- this.range = new Range(this.body);
- this.components.push(this.range);
- this.body.range = this.range;
+ this.linegraphOptions = linegraphOptions;
+ this.linegraphSVG = svg;
+ this.props = {};
+ this.DOMelements = { // dynamic elements
+ lines: {},
+ labels: {}
+ };
- // time axis
- this.timeAxis = new TimeAxis(this.body);
- this.components.push(this.timeAxis);
- this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+ this.dom = {};
- // current time bar
- this.currentTime = new CurrentTime(this.body);
- this.components.push(this.currentTime);
+ this.range = {start:0, end:0};
- // 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);
+ this.options = util.extend({}, this.defaultOptions);
+ this.conversionFactor = 1;
- // item set
- this.linegraph = new LineGraph(this.body);
- this.components.push(this.linegraph);
+ this.setOptions(options);
+ this.width = Number(('' + this.options.width).replace("px",""));
+ this.minWidth = this.width;
+ this.height = this.linegraphSVG.offsetHeight;
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
+ this.stepPixels = 25;
+ this.stepPixelsForced = 25;
+ this.lineOffset = 0;
+ this.master = true;
+ this.svgElements = {};
- // apply options
- if (options) {
- this.setOptions(options);
- }
- // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
- if (groups) {
- this.setGroups(groups);
- }
+ this.groups = {};
+ this.amountOfGroups = 0;
- // create itemset
- if (items) {
- this.setItems(items);
- }
- else {
- this.redraw();
- }
+ // create the HTML DOM
+ this._create();
}
- // Extend the functionality from Core
- Graph2d.prototype = new Core();
+ DataAxis.prototype = new Component();
- /**
- * 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, {
- type: {
- start: 'Date',
- end: 'Date'
- }
- });
+
+ DataAxis.prototype.addGroup = function(label, graphOptions) {
+ if (!this.groups.hasOwnProperty(label)) {
+ this.groups[label] = graphOptions;
}
+ this.amountOfGroups += 1;
+ };
- // set items
- this.itemsData = newDataSet;
- this.linegraph && this.linegraph.setItems(newDataSet);
+ DataAxis.prototype.updateGroup = function(label, graphOptions) {
+ this.groups[label] = graphOptions;
+ };
- if (initialLoad) {
- if (this.options.start != undefined || this.options.end != undefined) {
- var start = this.options.start != undefined ? this.options.start : null;
- var end = this.options.end != undefined ? this.options.end : null;
+ DataAxis.prototype.removeGroup = function(label) {
+ if (this.groups.hasOwnProperty(label)) {
+ delete this.groups[label];
+ this.amountOfGroups -= 1;
+ }
+ };
- this.setWindow(start, end, {animate: false});
+
+ DataAxis.prototype.setOptions = function (options) {
+ if (options) {
+ var redraw = false;
+ if (this.options.orientation != options.orientation && options.orientation !== undefined) {
+ redraw = true;
}
- else {
- this.fit({animate: false});
+ var fields = [
+ 'orientation',
+ 'showMinorLabels',
+ 'showMajorLabels',
+ 'icons',
+ 'majorLinesOffset',
+ 'minorLinesOffset',
+ 'labelOffsetX',
+ 'labelOffsetY',
+ 'iconWidth',
+ 'width',
+ 'visible',
+ 'customRange'
+ ];
+ util.selectiveExtend(fields, this.options, options);
+
+ this.minWidth = Number(('' + this.options.width).replace("px",""));
+
+ if (redraw == true && this.dom.frame) {
+ this.hide();
+ this.show();
}
}
};
+
/**
- * Set groups
- * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+ * Create the HTML DOM for the DataAxis
*/
- Graph2d.prototype.setGroups = function(groups) {
- // convert to type DataSet when needed
- var newDataSet;
- if (!groups) {
- newDataSet = null;
- }
- else if (groups instanceof DataSet || groups instanceof DataView) {
- newDataSet = groups;
+ DataAxis.prototype._create = function() {
+ this.dom.frame = document.createElement('div');
+ this.dom.frame.style.width = this.options.width;
+ this.dom.frame.style.height = this.height;
+
+ this.dom.lineContainer = document.createElement('div');
+ this.dom.lineContainer.style.width = '100%';
+ this.dom.lineContainer.style.height = this.height;
+
+ // create svg element for graph drawing.
+ this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+ this.svg.style.position = "absolute";
+ this.svg.style.top = '0px';
+ this.svg.style.height = '100%';
+ this.svg.style.width = '100%';
+ this.svg.style.display = "block";
+ this.dom.frame.appendChild(this.svg);
+ };
+
+ DataAxis.prototype._redrawGroupIcons = function () {
+ DOMutil.prepareElements(this.svgElements);
+
+ var x;
+ var iconWidth = this.options.iconWidth;
+ var iconHeight = 15;
+ var iconOffset = 4;
+ var y = iconOffset + 0.5 * iconHeight;
+
+ if (this.options.orientation == 'left') {
+ x = iconOffset;
}
else {
- // turn an array into a dataset
- newDataSet = new DataSet(groups);
+ x = this.width - iconWidth - iconOffset;
}
- this.groupsData = newDataSet;
- this.linegraph.setGroups(newDataSet);
+ for (var groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+ y += iconHeight + iconOffset;
+ }
+ }
+ }
+
+ DOMutil.cleanupElements(this.svgElements);
};
/**
- * Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
- * @param groupId
- * @param width
- * @param height
+ * Create the HTML DOM for the DataAxis
*/
- Graph2d.prototype.getLegend = function(groupId, width, height) {
- if (width === undefined) {width = 15;}
- if (height === undefined) {height = 15;}
- if (this.linegraph.groups[groupId] !== undefined) {
- return this.linegraph.groups[groupId].getLegend(width,height);
+ DataAxis.prototype.show = function() {
+ if (!this.dom.frame.parentNode) {
+ if (this.options.orientation == 'left') {
+ this.body.dom.left.appendChild(this.dom.frame);
+ }
+ else {
+ this.body.dom.right.appendChild(this.dom.frame);
+ }
}
- else {
- return "cannot find group:" + groupId;
+
+ if (!this.dom.lineContainer.parentNode) {
+ this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
}
- }
+ };
/**
- * This checks if the visible option of the supplied group (by ID) is true or false.
- * @param groupId
- * @returns {*}
+ * Create the HTML DOM for the DataAxis
*/
- Graph2d.prototype.isGroupVisible = function(groupId) {
- if (this.linegraph.groups[groupId] !== undefined) {
- return (this.linegraph.groups[groupId].visible && (this.linegraph.options.groups.visibility[groupId] === undefined || this.linegraph.options.groups.visibility[groupId] == true));
- }
- else {
- return false;
+ DataAxis.prototype.hide = function() {
+ if (this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
}
- }
+ if (this.dom.lineContainer.parentNode) {
+ this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
+ }
+ };
/**
- * 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
+ * Set a range (start and end)
+ * @param end
+ * @param start
+ * @param end
*/
- Graph2d.prototype.getItemRange = function() {
- var min = null;
- var max = null;
+ DataAxis.prototype.setRange = function (start, end) {
+ this.range.start = start;
+ this.range.end = end;
+ };
- // calculate min from start filed
- for (var groupId in this.linegraph.groups) {
- if (this.linegraph.groups.hasOwnProperty(groupId)) {
- if (this.linegraph.groups[groupId].visible == true) {
- for (var i = 0; i < this.linegraph.groups[groupId].itemsData.length; i++) {
- var item = this.linegraph.groups[groupId].itemsData[i];
- var value = util.convert(item.x, 'Date').valueOf();
- min = min == null ? value : min > value ? value : min;
- max = max == null ? value : max < value ? value : max;
- }
+ /**
+ * Repaint the component
+ * @return {boolean} Returns true if the component is resized
+ */
+ DataAxis.prototype.redraw = function () {
+ var changeCalled = false;
+ var activeGroups = 0;
+ for (var groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ activeGroups++;
}
}
}
+ if (this.amountOfGroups == 0 || activeGroups == 0) {
+ this.hide();
+ }
+ else {
+ this.show();
+ this.height = Number(this.linegraphSVG.style.height.replace("px",""));
+ // svg offsetheight did not work in firefox and explorer...
- return {
- min: (min != null) ? new Date(min) : null,
- max: (max != null) ? new Date(max) : null
- };
- };
+ this.dom.lineContainer.style.height = this.height + 'px';
+ this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
+ var props = this.props;
+ var frame = this.dom.frame;
+ // update classname
+ frame.className = 'dataaxis';
- module.exports = Graph2d;
+ // calculate character width and height
+ this._calculateCharSize();
+ var orientation = this.options.orientation;
+ var showMinorLabels = this.options.showMinorLabels;
+ var showMajorLabels = this.options.showMajorLabels;
-/***/ },
-/* 42 */
-/***/ function(module, exports, __webpack_require__) {
+ // determine the width and height of the elemens for the axis
+ props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+ props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
- var util = __webpack_require__(1);
- var DOMutil = __webpack_require__(6);
- var DataSet = __webpack_require__(7);
- var DataView = __webpack_require__(8);
- var Component = __webpack_require__(22);
- var DataAxis = __webpack_require__(43);
- var GraphGroup = __webpack_require__(45);
- var Legend = __webpack_require__(46);
+ props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
+ props.minorLineHeight = 1;
+ props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
+ props.majorLineHeight = 1;
- var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+ // take frame offline while updating (is almost twice as fast)
+ if (orientation == 'left') {
+ frame.style.top = '0';
+ frame.style.left = '0';
+ frame.style.bottom = '';
+ frame.style.width = this.width + 'px';
+ frame.style.height = this.height + "px";
+ }
+ else { // right
+ frame.style.top = '';
+ frame.style.bottom = '0';
+ frame.style.left = '0';
+ frame.style.width = this.width + 'px';
+ frame.style.height = this.height + "px";
+ }
+ changeCalled = this._redrawLabels();
+ if (this.options.icons == true) {
+ this._redrawGroupIcons();
+ }
+ }
+ return changeCalled;
+ };
/**
- * This is the constructor of the LineGraph. It requires a Timeline body and options.
- *
- * @param body
- * @param options
- * @constructor
+ * Repaint major and minor text labels and vertical grid lines
+ * @private
*/
- function LineGraph(body, options) {
- this.id = util.randomUUID();
- this.body = body;
+ DataAxis.prototype._redrawLabels = function () {
+ DOMutil.prepareElements(this.DOMelements.lines);
+ DOMutil.prepareElements(this.DOMelements.labels);
- this.defaultOptions = {
- yAxisOrientation: 'left',
- defaultGroup: 'default',
- sort: true,
- sampling: true,
- graphHeight: '400px',
- shaded: {
- enabled: false,
- orientation: 'bottom' // top, bottom
- },
- style: 'line', // line, bar
- barChart: {
- width: 50,
- handleOverlap: 'overlap',
- align: 'center' // left, center, right
- },
- catmullRom: {
- enabled: true,
- parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
- alpha: 0.5
- },
- drawPoints: {
- enabled: true,
- size: 6,
- style: 'square' // square, circle
- },
- dataAxis: {
- showMinorLabels: true,
- showMajorLabels: true,
- icons: false,
- width: '40px',
- visible: true,
- customRange: {
- left: {min:undefined, max:undefined},
- right: {min:undefined, max:undefined}
- }
- },
- legend: {
- enabled: false,
- icons: true,
- left: {
- visible: true,
- position: 'top-left' // top/bottom - left,right
- },
- right: {
- visible: true,
- position: 'top-right' // top/bottom - left,right
+ var orientation = this.options['orientation'];
+
+ // calculate range and step (step such that we have space for 7 characters per label)
+ var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
+
+ var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight, this.options.customRange[this.options.orientation]);
+ this.step = step;
+ // get the distance in pixels for a step
+ // dead space is space that is "left over" after a step
+ var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
+ this.stepPixels = stepPixels;
+
+ var amountOfSteps = this.height / stepPixels;
+ var stepDifference = 0;
+
+ if (this.master == false) {
+ stepPixels = this.stepPixelsForced;
+ stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
+ for (var i = 0; i < 0.5 * stepDifference; i++) {
+ step.previous();
+ }
+ amountOfSteps = this.height / stepPixels;
+ }
+ else {
+ amountOfSteps += 0.25;
+ }
+
+
+ this.valueAtZero = step.marginEnd;
+ var marginStartPos = 0;
+
+ // do not draw the first label
+ var max = 1;
+
+ this.maxLabelSize = 0;
+ var y = 0;
+ while (max < Math.round(amountOfSteps)) {
+ step.next();
+ y = Math.round(max * stepPixels);
+ marginStartPos = max * stepPixels;
+ var isMajor = step.isMajor();
+
+ if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
+ this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
+ }
+
+ if (isMajor && this.options['showMajorLabels'] && this.master == true ||
+ this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
+ if (y >= 0) {
+ this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
}
- },
- groups: {
- visibility: {}
+ this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
}
- };
+ else {
+ this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+ }
+
+ max++;
+ }
+
+ if (this.master == false) {
+ this.conversionFactor = y / (this.valueAtZero - step.current);
+ }
+ else {
+ this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
+ }
+
+ var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
+ // this will resize the yAxis to accomodate the labels.
+ if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
+ this.width = this.maxLabelSize + offset;
+ this.options.width = this.width + "px";
+ DOMutil.cleanupElements(this.DOMelements.lines);
+ DOMutil.cleanupElements(this.DOMelements.labels);
+ this.redraw();
+ return true;
+ }
+ // this will resize the yAxis if it is too big for the labels.
+ else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
+ this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
+ this.options.width = this.width + "px";
+ DOMutil.cleanupElements(this.DOMelements.lines);
+ DOMutil.cleanupElements(this.DOMelements.labels);
+ this.redraw();
+ return true;
+ }
+ else {
+ DOMutil.cleanupElements(this.DOMelements.lines);
+ DOMutil.cleanupElements(this.DOMelements.labels);
+ return false;
+ }
+ };
- // options is shared by this ItemSet and all its items
- this.options = util.extend({}, this.defaultOptions);
- this.dom = {};
- this.props = {};
- this.hammer = null;
- this.groups = {};
- this.abortedGraphUpdate = false;
+ DataAxis.prototype.convertValue = function (value) {
+ var invertedValue = this.valueAtZero - value;
+ var convertedValue = invertedValue * this.conversionFactor;
+ return convertedValue;
+ };
- var me = this;
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
+ /**
+ * Create a label for the axis at position x
+ * @private
+ * @param y
+ * @param text
+ * @param orientation
+ * @param className
+ * @param characterHeight
+ */
+ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
+ // reuse redundant label
+ var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
+ label.className = className;
+ label.innerHTML = text;
+ if (orientation == 'left') {
+ label.style.left = '-' + this.options.labelOffsetX + 'px';
+ label.style.textAlign = "right";
+ }
+ else {
+ label.style.right = '-' + this.options.labelOffsetX + 'px';
+ label.style.textAlign = "left";
+ }
- // listeners for the DataSet of the items
- this.itemListeners = {
- 'add': function (event, params, senderId) {
- me._onAdd(params.items);
- },
- 'update': function (event, params, senderId) {
- me._onUpdate(params.items);
- },
- 'remove': function (event, params, senderId) {
- me._onRemove(params.items);
- }
- };
+ label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
- // listeners for the DataSet of the groups
- this.groupListeners = {
- 'add': function (event, params, senderId) {
- me._onAddGroups(params.items);
- },
- 'update': function (event, params, senderId) {
- me._onUpdateGroups(params.items);
- },
- 'remove': function (event, params, senderId) {
- me._onRemoveGroups(params.items);
+ text += '';
+
+ var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
+ if (this.maxLabelSize < text.length * largestWidth) {
+ this.maxLabelSize = text.length * largestWidth;
+ }
+ };
+
+ /**
+ * Create a minor line for the axis at position y
+ * @param y
+ * @param orientation
+ * @param className
+ * @param offset
+ * @param width
+ */
+ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
+ if (this.master == true) {
+ var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
+ line.className = className;
+ line.innerHTML = '';
+
+ if (orientation == 'left') {
+ line.style.left = (this.width - offset) + 'px';
+ }
+ else {
+ line.style.right = (this.width - offset) + 'px';
}
- };
- this.items = {}; // object with an Item for every data item
- this.selection = []; // list with the ids of all selected nodes
- this.lastStart = this.body.range.start;
- this.touchParams = {}; // stores properties while dragging
+ line.style.width = width + 'px';
+ line.style.top = y + 'px';
+ }
+ };
- this.svgElements = {};
- this.setOptions(options);
- this.groupsUsingDefaultStyles = [0];
- this.body.emitter.on("rangechanged", function() {
- me.lastStart = me.body.range.start;
- me.svg.style.left = util.option.asSize(-me.width);
- me._updateGraph.apply(me);
- });
- // create the HTML DOM
- this._create();
- this.body.emitter.emit("change");
- }
- LineGraph.prototype = new Component();
/**
- * Create the HTML DOM for the ItemSet
+ * Determine the size of text on the axis (both major and minor axis).
+ * The size is calculated only once and then cached in this.props.
+ * @private
*/
- LineGraph.prototype._create = function(){
- var frame = document.createElement('div');
- frame.className = 'LineGraph';
- this.dom.frame = frame;
+ DataAxis.prototype._calculateCharSize = function () {
+ // determine the char width and height on the minor axis
+ if (!('minorCharHeight' in this.props)) {
+ var textMinor = document.createTextNode('0');
+ var measureCharMinor = document.createElement('DIV');
+ measureCharMinor.className = 'yAxis minor measure';
+ measureCharMinor.appendChild(textMinor);
+ this.dom.frame.appendChild(measureCharMinor);
- // create svg element for graph drawing.
- this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.svg.style.position = "relative";
- this.svg.style.height = ('' + this.options.graphHeight).replace("px",'') + 'px';
- this.svg.style.display = "block";
- frame.appendChild(this.svg);
+ this.props.minorCharHeight = measureCharMinor.clientHeight;
+ this.props.minorCharWidth = measureCharMinor.clientWidth;
- // data axis
- this.options.dataAxis.orientation = 'left';
- this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+ this.dom.frame.removeChild(measureCharMinor);
+ }
- this.options.dataAxis.orientation = 'right';
- this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
- delete this.options.dataAxis.orientation;
+ if (!('majorCharHeight' in this.props)) {
+ var textMajor = document.createTextNode('0');
+ var measureCharMajor = document.createElement('DIV');
+ measureCharMajor.className = 'yAxis major measure';
+ measureCharMajor.appendChild(textMajor);
+ this.dom.frame.appendChild(measureCharMajor);
- // legends
- this.legendLeft = new Legend(this.body, this.options.legend, 'left', this.options.groups);
- this.legendRight = new Legend(this.body, this.options.legend, 'right', this.options.groups);
+ this.props.majorCharHeight = measureCharMajor.clientHeight;
+ this.props.majorCharWidth = measureCharMajor.clientWidth;
- this.show();
+ this.dom.frame.removeChild(measureCharMajor);
+ }
};
/**
- * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
- * @param options
+ * Snap a date to a rounded value.
+ * The snap intervals are dependent on the current scale and step.
+ * @param {Date} date the date to be snapped.
+ * @return {Date} snappedDate
*/
- LineGraph.prototype.setOptions = function(options) {
- if (options) {
- var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
- util.selectiveDeepExtend(fields, this.options, options);
- util.mergeOptions(this.options, options,'catmullRom');
- util.mergeOptions(this.options, options,'drawPoints');
- util.mergeOptions(this.options, options,'shaded');
- util.mergeOptions(this.options, options,'legend');
+ DataAxis.prototype.snap = function(date) {
+ return this.step.snap(date);
+ };
- if (options.catmullRom) {
- if (typeof options.catmullRom == 'object') {
- if (options.catmullRom.parametrization) {
- if (options.catmullRom.parametrization == 'uniform') {
- this.options.catmullRom.alpha = 0;
- }
- else if (options.catmullRom.parametrization == 'chordal') {
- this.options.catmullRom.alpha = 1.0;
- }
- else {
- this.options.catmullRom.parametrization = 'centripetal';
- this.options.catmullRom.alpha = 0.5;
- }
- }
- }
- }
+ module.exports = DataAxis;
- if (this.yAxisLeft) {
- if (options.dataAxis !== undefined) {
- this.yAxisLeft.setOptions(this.options.dataAxis);
- this.yAxisRight.setOptions(this.options.dataAxis);
- }
- }
- if (this.legendLeft) {
- if (options.legend !== undefined) {
- this.legendLeft.setOptions(this.options.legend);
- this.legendRight.setOptions(this.options.legend);
- }
- }
+/***/ },
+/* 36 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * @constructor DataStep
+ * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
+ * end data point. The class itself determines the best scale (step size) based on the
+ * provided start Date, end Date, and minimumStep.
+ *
+ * If minimumStep is provided, the step size is chosen as close as possible
+ * to the minimumStep but larger than minimumStep. If minimumStep is not
+ * provided, the scale is set to 1 DAY.
+ * The minimumStep should correspond with the onscreen size of about 6 characters
+ *
+ * Alternatively, you can set a scale by hand.
+ * After creation, you can initialize the class by executing first(). Then you
+ * can iterate from the start date to the end date via next(). You can check if
+ * the end date is reached with the function hasNext(). After each step, you can
+ * retrieve the current date via getCurrent().
+ * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
+ * days, to years.
+ *
+ * Version: 1.2
+ *
+ * @param {Date} [start] The start date, for example new Date(2010, 9, 21)
+ * or new Date(2010, 9, 21, 23, 45, 00)
+ * @param {Date} [end] The end date
+ * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+ */
+ function DataStep(start, end, minimumStep, containerHeight, customRange) {
+ // variables
+ this.current = 0;
+
+ this.autoScale = true;
+ this.stepIndex = 0;
+ this.step = 1;
+ this.scale = 1;
+
+ this.marginStart;
+ this.marginEnd;
+ this.deadSpace = 0;
+
+ this.majorSteps = [1, 2, 5, 10];
+ this.minorSteps = [0.25, 0.5, 1, 2];
+
+ this.setRange(start, end, minimumStep, containerHeight, customRange);
+ }
+
- if (this.groups.hasOwnProperty(UNGROUPED)) {
- this.groups[UNGROUPED].setOptions(options);
- }
- }
- if (this.dom.frame) {
- this._updateGraph();
- }
- };
/**
- * Hide the component from the DOM
+ * Set a new range
+ * If minimumStep is provided, the step size is chosen as close as possible
+ * to the minimumStep but larger than minimumStep. If minimumStep is not
+ * provided, the scale is set to 1 DAY.
+ * The minimumStep should correspond with the onscreen size of about 6 characters
+ * @param {Number} [start] The start date and time.
+ * @param {Number} [end] The end date and time.
+ * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/
- LineGraph.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
+ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, customRange) {
+ this._start = customRange.min === undefined ? start : customRange.min;
+ this._end = customRange.max === undefined ? end : customRange.max;
+
+ if (this._start == this._end) {
+ this._start -= 0.75;
+ this._end += 1;
}
- };
- /**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
- */
- LineGraph.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
+ if (this.autoScale) {
+ this.setMinimumStep(minimumStep, containerHeight);
}
+ this.setFirst(customRange);
};
-
/**
- * Set items
- * @param {vis.DataSet | null} items
+ * Automatically determine the scale that bests fits the provided minimum step
+ * @param {Number} [minimumStep] The minimum step size in milliseconds
*/
- LineGraph.prototype.setItems = function(items) {
- var me = this,
- ids,
- oldItemsData = this.itemsData;
-
- // replace the dataset
- if (!items) {
- this.itemsData = null;
- }
- else if (items instanceof DataSet || items instanceof DataView) {
- this.itemsData = items;
- }
- else {
- throw new TypeError('Data must be an instance of DataSet or DataView');
- }
+ DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
+ // round to floor
+ var size = this._end - this._start;
+ var safeSize = size * 1.2;
+ var minimumStepValue = minimumStep * (safeSize / containerHeight);
+ var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
- if (oldItemsData) {
- // unsubscribe from old dataset
- util.forEach(this.itemListeners, function (callback, event) {
- oldItemsData.off(event, callback);
- });
+ var minorStepIdx = -1;
+ var magnitudefactor = Math.pow(10,orderOfMagnitude);
- // remove all drawn items
- ids = oldItemsData.getIds();
- this._onRemove(ids);
+ var start = 0;
+ if (orderOfMagnitude < 0) {
+ start = orderOfMagnitude;
}
- if (this.itemsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.itemListeners, function (callback, event) {
- me.itemsData.on(event, callback, id);
- });
-
- // add all new items
- ids = this.itemsData.getIds();
- this._onAdd(ids);
+ var solutionFound = false;
+ for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
+ magnitudefactor = Math.pow(10,i);
+ for (var j = 0; j < this.minorSteps.length; j++) {
+ var stepSize = magnitudefactor * this.minorSteps[j];
+ if (stepSize >= minimumStepValue) {
+ solutionFound = true;
+ minorStepIdx = j;
+ break;
+ }
+ }
+ if (solutionFound == true) {
+ break;
+ }
}
- this._updateUngrouped();
- this._updateGraph();
- this.redraw();
+ this.stepIndex = minorStepIdx;
+ this.scale = magnitudefactor;
+ this.step = magnitudefactor * this.minorSteps[minorStepIdx];
};
+
+
/**
- * Set groups
- * @param {vis.DataSet} groups
+ * Round the current date to the first minor date value
+ * This must be executed once when the current date is set to start Date
*/
- LineGraph.prototype.setGroups = function(groups) {
- var me = this,
- ids;
+ DataStep.prototype.setFirst = function(customRange) {
+ if (customRange === undefined) {
+ customRange = {};
+ }
+ var niceStart = customRange.min === undefined ? this._start - (this.scale * 2 * this.minorSteps[this.stepIndex]) : customRange.min;
+ var niceEnd = customRange.max === undefined ? this._end + (this.scale * this.minorSteps[this.stepIndex]) : customRange.max;
- // unsubscribe from current dataset
- if (this.groupsData) {
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.unsubscribe(event, callback);
- });
+ this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
+ this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
+ this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
+ this.marginRange = this.marginEnd - this.marginStart;
- // remove all drawn groups
- ids = this.groupsData.getIds();
- this.groupsData = null;
- this._onRemoveGroups(ids); // note: this will cause a redraw
- }
+ this.current = this.marginEnd;
- // replace the dataset
- if (!groups) {
- this.groupsData = null;
- }
- else if (groups instanceof DataSet || groups instanceof DataView) {
- this.groupsData = groups;
+ };
+
+ DataStep.prototype.roundToMinor = function(value) {
+ var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
+ if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
+ return rounded + (this.scale * this.minorSteps[this.stepIndex]);
}
else {
- throw new TypeError('Data must be an instance of DataSet or DataView');
+ return rounded;
}
+ }
- if (this.groupsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.on(event, callback, id);
- });
- // draw all ms
- ids = this.groupsData.getIds();
- this._onAddGroups(ids);
- }
- this._onUpdate();
+ /**
+ * Check if the there is a next step
+ * @return {boolean} true if the current date has not passed the end date
+ */
+ DataStep.prototype.hasNext = function () {
+ return (this.current >= this.marginStart);
};
-
/**
- * Update the datapoints
- * @param [ids]
- * @private
+ * Do the next step
*/
- LineGraph.prototype._onUpdate = function(ids) {
- this._updateUngrouped();
- this._updateAllGroupData();
- this._updateGraph();
- this.redraw();
- };
- LineGraph.prototype._onAdd = function (ids) {this._onUpdate(ids);};
- LineGraph.prototype._onRemove = function (ids) {this._onUpdate(ids);};
- LineGraph.prototype._onUpdateGroups = function (groupIds) {
- for (var i = 0; i < groupIds.length; i++) {
- var group = this.groupsData.get(groupIds[i]);
- this._updateGroup(group, groupIds[i]);
+ DataStep.prototype.next = function() {
+ var prev = this.current;
+ this.current -= this.step;
+
+ // safety mechanism: if current time is still unchanged, move to the end
+ if (this.current == prev) {
+ this.current = this._end;
}
+ };
- this._updateGraph();
- this.redraw();
+ /**
+ * Do the next step
+ */
+ DataStep.prototype.previous = function() {
+ this.current += this.step;
+ this.marginEnd += this.step;
+ this.marginRange = this.marginEnd - this.marginStart;
};
- LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
- LineGraph.prototype._onRemoveGroups = function (groupIds) {
- for (var i = 0; i < groupIds.length; i++) {
- if (!this.groups.hasOwnProperty(groupIds[i])) {
- if (this.groups[groupIds[i]].options.yAxisOrientation == 'right') {
- this.yAxisRight.removeGroup(groupIds[i]);
- this.legendRight.removeGroup(groupIds[i]);
- this.legendRight.redraw();
+
+
+ /**
+ * Get the current datetime
+ * @return {String} current The current date
+ */
+ DataStep.prototype.getCurrent = function() {
+ var toPrecision = '' + Number(this.current).toPrecision(5);
+ if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
+ for (var i = toPrecision.length-1; i > 0; i--) {
+ if (toPrecision[i] == "0") {
+ toPrecision = toPrecision.slice(0,i);
}
- else {
- this.yAxisLeft.removeGroup(groupIds[i]);
- this.legendLeft.removeGroup(groupIds[i]);
- this.legendLeft.redraw();
+ else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+ toPrecision = toPrecision.slice(0,i);
+ break;
+ }
+ else{
+ break;
}
- delete this.groups[groupIds[i]];
}
}
- this._updateUngrouped();
- this._updateGraph();
- this.redraw();
+
+ return toPrecision;
+ };
+
+
+
+ /**
+ * Snap a date to a rounded value.
+ * The snap intervals are dependent on the current scale and step.
+ * @param {Date} date the date to be snapped.
+ * @return {Date} snappedDate
+ */
+ DataStep.prototype.snap = function(date) {
+
};
/**
- * update a group object
- *
- * @param group
- * @param groupId
- * @private
+ * Check if the current value is a major value (for example when the step
+ * is DAY, a major value is each first day of the MONTH)
+ * @return {boolean} true if current date is major, else false.
*/
- LineGraph.prototype._updateGroup = function (group, groupId) {
- if (!this.groups.hasOwnProperty(groupId)) {
- this.groups[groupId] = new GraphGroup(group, groupId, this.options, this.groupsUsingDefaultStyles);
- if (this.groups[groupId].options.yAxisOrientation == 'right') {
- this.yAxisRight.addGroup(groupId, this.groups[groupId]);
- this.legendRight.addGroup(groupId, this.groups[groupId]);
- }
- else {
- this.yAxisLeft.addGroup(groupId, this.groups[groupId]);
- this.legendLeft.addGroup(groupId, this.groups[groupId]);
+ DataStep.prototype.isMajor = function() {
+ return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+ };
+
+ module.exports = DataStep;
+
+
+/***/ },
+/* 37 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var util = __webpack_require__(1);
+ var DOMutil = __webpack_require__(6);
+
+ /**
+ * @constructor Group
+ * @param {Number | String} groupId
+ * @param {Object} data
+ * @param {ItemSet} itemSet
+ */
+ function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
+ this.id = groupId;
+ var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
+ this.options = util.selectiveBridgeObject(fields,options);
+ this.usingDefaultStyle = group.className === undefined;
+ this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
+ this.zeroPosition = 0;
+ this.update(group);
+ if (this.usingDefaultStyle == true) {
+ this.groupsUsingDefaultStyles[0] += 1;
+ }
+ this.itemsData = [];
+ this.visible = group.visible === undefined ? true : group.visible;
+ }
+
+ GraphGroup.prototype.setItems = function(items) {
+ if (items != null) {
+ this.itemsData = items;
+ if (this.options.sort == true) {
+ this.itemsData.sort(function (a,b) {return a.x - b.x;})
}
}
else {
- this.groups[groupId].update(group);
- if (this.groups[groupId].options.yAxisOrientation == 'right') {
- this.yAxisRight.updateGroup(groupId, this.groups[groupId]);
- this.legendRight.updateGroup(groupId, this.groups[groupId]);
- }
- else {
- this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
- this.legendLeft.updateGroup(groupId, this.groups[groupId]);
- }
+ this.itemsData = [];
}
- this.legendLeft.redraw();
- this.legendRight.redraw();
};
- LineGraph.prototype._updateAllGroupData = function () {
- if (this.itemsData != null) {
- var groupsContent = {};
- var groupId;
- for (groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- groupsContent[groupId] = [];
- }
- }
- for (var itemId in this.itemsData._data) {
- if (this.itemsData._data.hasOwnProperty(itemId)) {
- var item = this.itemsData._data[itemId];
- item.x = util.convert(item.x,"Date");
- groupsContent[item.group].push(item);
- }
- }
- for (groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- this.groups[groupId].setItems(groupsContent[groupId]);
- }
- }
- }
+ GraphGroup.prototype.setZeroPosition = function(pos) {
+ this.zeroPosition = pos;
};
- /**
- * Create or delete the group holding all ungrouped items. This group is used when
- * there are no groups specified. This anonymous group is called 'graph'.
- * @protected
- */
- LineGraph.prototype._updateUngrouped = function() {
- if (this.itemsData && this.itemsData != null) {
- var ungroupedCounter = 0;
- for (var itemId in this.itemsData._data) {
- if (this.itemsData._data.hasOwnProperty(itemId)) {
- var item = this.itemsData._data[itemId];
- if (item != undefined) {
- if (item.hasOwnProperty('group')) {
- if (item.group === undefined) {
- item.group = UNGROUPED;
- }
+ GraphGroup.prototype.setOptions = function(options) {
+ if (options !== undefined) {
+ var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
+ util.selectiveDeepExtend(fields, this.options, options);
+
+ util.mergeOptions(this.options, options,'catmullRom');
+ util.mergeOptions(this.options, options,'drawPoints');
+ util.mergeOptions(this.options, options,'shaded');
+
+ if (options.catmullRom) {
+ if (typeof options.catmullRom == 'object') {
+ if (options.catmullRom.parametrization) {
+ if (options.catmullRom.parametrization == 'uniform') {
+ this.options.catmullRom.alpha = 0;
+ }
+ else if (options.catmullRom.parametrization == 'chordal') {
+ this.options.catmullRom.alpha = 1.0;
}
else {
- item.group = UNGROUPED;
+ this.options.catmullRom.parametrization = 'centripetal';
+ this.options.catmullRom.alpha = 0.5;
}
- ungroupedCounter = item.group == UNGROUPED ? ungroupedCounter + 1 : ungroupedCounter;
}
}
}
+ }
+ };
- if (ungroupedCounter == 0) {
- delete this.groups[UNGROUPED];
- this.legendLeft.removeGroup(UNGROUPED);
- this.legendRight.removeGroup(UNGROUPED);
- this.yAxisLeft.removeGroup(UNGROUPED);
- this.yAxisRight.removeGroup(UNGROUPED);
+ GraphGroup.prototype.update = function(group) {
+ this.group = group;
+ this.content = group.content || 'graph';
+ this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
+ this.visible = group.visible === undefined ? true : group.visible;
+ this.setOptions(group.options);
+ };
+
+ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
+ var fillHeight = iconHeight * 0.5;
+ var path, fillPath;
+
+ var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
+ outline.setAttributeNS(null, "x", x);
+ outline.setAttributeNS(null, "y", y - fillHeight);
+ outline.setAttributeNS(null, "width", iconWidth);
+ outline.setAttributeNS(null, "height", 2*fillHeight);
+ outline.setAttributeNS(null, "class", "outline");
+
+ if (this.options.style == 'line') {
+ path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+ path.setAttributeNS(null, "class", this.className);
+ path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
+ if (this.options.shaded.enabled == true) {
+ fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+ if (this.options.shaded.orientation == 'top') {
+ fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
+ "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
+ }
+ else {
+ fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
+ "L"+x+"," + (y + fillHeight) + " " +
+ "L"+ (x + iconWidth) + "," + (y + fillHeight) +
+ "L"+ (x + iconWidth) + ","+y);
+ }
+ fillPath.setAttributeNS(null, "class", this.className + " iconFill");
}
- else {
- var group = {id: UNGROUPED, content: this.options.defaultGroup};
- this._updateGroup(group, UNGROUPED);
+
+ if (this.options.drawPoints.enabled == true) {
+ DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
}
}
else {
- delete this.groups[UNGROUPED];
- this.legendLeft.removeGroup(UNGROUPED);
- this.legendRight.removeGroup(UNGROUPED);
- this.yAxisLeft.removeGroup(UNGROUPED);
- this.yAxisRight.removeGroup(UNGROUPED);
- }
+ var barWidth = Math.round(0.3 * iconWidth);
+ var bar1Height = Math.round(0.4 * iconHeight);
+ var bar2Height = Math.round(0.75 * iconHeight);
- this.legendLeft.redraw();
- this.legendRight.redraw();
- };
+ var offset = Math.round((iconWidth - (2 * barWidth))/3);
+ DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+ DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+ }
+ };
/**
- * Redraw the component, mandatory function
- * @return {boolean} Returns true if the component is resized
+ *
+ * @param iconWidth
+ * @param iconHeight
+ * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
*/
- LineGraph.prototype.redraw = function() {
- var resized = false;
+ GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
+ var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+ this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
+ return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
+ }
- this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
- if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
- resized = true;
- }
- // check if this component is resized
- resized = this._isResized() || resized;
- // check whether zoomed (in that case we need to re-stack everything)
- var visibleInterval = this.body.range.end - this.body.range.start;
- var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
- this.lastVisibleInterval = visibleInterval;
- this.lastWidth = this.width;
+ module.exports = GraphGroup;
+
+
+/***/ },
+/* 38 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var util = __webpack_require__(1);
+ var DOMutil = __webpack_require__(6);
+ var Component = __webpack_require__(22);
+
+ /**
+ * Legend for Graph2d
+ */
+ function Legend(body, options, side, linegraphOptions) {
+ this.body = body;
+ this.defaultOptions = {
+ enabled: true,
+ icons: true,
+ iconSize: 20,
+ iconSpacing: 6,
+ left: {
+ visible: true,
+ position: 'top-left' // top/bottom - left,center,right
+ },
+ right: {
+ visible: true,
+ position: 'top-left' // top/bottom - left,center,right
+ }
+ }
+ this.side = side;
+ this.options = util.extend({},this.defaultOptions);
+ this.linegraphOptions = linegraphOptions;
- // calculate actual size and position
- this.width = this.dom.frame.offsetWidth;
+ this.svgElements = {};
+ this.dom = {};
+ this.groups = {};
+ this.amountOfGroups = 0;
+ this._create();
- // the svg element is three times as big as the width, this allows for fully dragging left and right
- // without reloading the graph. the controls for this are bound to events in the constructor
- if (resized == true) {
- this.svg.style.width = util.option.asSize(3*this.width);
- this.svg.style.left = util.option.asSize(-this.width);
- }
+ this.setOptions(options);
+ }
- if (zoomed == true || this.abortedGraphUpdate == true) {
- this._updateGraph();
- }
- else {
- // move the whole svg while dragging
- if (this.lastStart != 0) {
- var offset = this.body.range.start - this.lastStart;
- var range = this.body.range.end - this.body.range.start;
- if (this.width != 0) {
- var rangePerPixelInv = this.width/range;
- var xOffset = offset * rangePerPixelInv;
- this.svg.style.left = (-this.width - xOffset) + "px";
- }
- }
+ Legend.prototype = new Component();
- }
- this.legendLeft.redraw();
- this.legendRight.redraw();
+ Legend.prototype.addGroup = function(label, graphOptions) {
+ if (!this.groups.hasOwnProperty(label)) {
+ this.groups[label] = graphOptions;
+ }
+ this.amountOfGroups += 1;
+ };
- return resized;
+ Legend.prototype.updateGroup = function(label, graphOptions) {
+ this.groups[label] = graphOptions;
};
- /**
- * Update and redraw the graph.
- *
- */
- LineGraph.prototype._updateGraph = function () {
- // reset the svg elements
- DOMutil.prepareElements(this.svgElements);
- if (this.width != 0 && this.itemsData != null) {
- var group, i;
- var preprocessedGroupData = {};
- var processedGroupData = {};
- var groupRanges = {};
- var changeCalled = false;
+ Legend.prototype.removeGroup = function(label) {
+ if (this.groups.hasOwnProperty(label)) {
+ delete this.groups[label];
+ this.amountOfGroups -= 1;
+ }
+ };
- // getting group Ids
- var groupIds = [];
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- group = this.groups[groupId];
- if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
- groupIds.push(groupId);
- }
- }
- }
- if (groupIds.length > 0) {
- // this is the range of the SVG canvas
- var minDate = this.body.util.toGlobalTime(- this.body.domProps.root.width);
- var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
- var groupsData = {};
- // fill groups data
- this._getRelevantData(groupIds, groupsData, minDate, maxDate);
- // we transform the X coordinates to detect collisions
- for (i = 0; i < groupIds.length; i++) {
- preprocessedGroupData[groupIds[i]] = this._convertXcoordinates(groupsData[groupIds[i]]);
- }
- // now all needed data has been collected we start the processing.
- this._getYRanges(groupIds, preprocessedGroupData, groupRanges);
+ Legend.prototype._create = function() {
+ this.dom.frame = document.createElement('div');
+ this.dom.frame.className = 'legend';
+ this.dom.frame.style.position = "absolute";
+ this.dom.frame.style.top = "10px";
+ this.dom.frame.style.display = "block";
- // update the Y axis first, we use this data to draw at the correct Y points
- // changeCalled is required to clean the SVG on a change emit.
- changeCalled = this._updateYAxis(groupIds, groupRanges);
- if (changeCalled == true) {
- DOMutil.cleanupElements(this.svgElements);
- this.abortedGraphUpdate = true;
- this.body.emitter.emit("change");
- return;
- }
- this.abortedGraphUpdate = false;
+ this.dom.textArea = document.createElement('div');
+ this.dom.textArea.className = 'legendText';
+ this.dom.textArea.style.position = "relative";
+ this.dom.textArea.style.top = "0px";
- // With the yAxis scaled correctly, use this to get the Y values of the points.
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- processedGroupData[groupIds[i]] = this._convertYcoordinates(groupsData[groupIds[i]], group);
- }
+ this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+ this.svg.style.position = 'absolute';
+ this.svg.style.top = 0 +'px';
+ this.svg.style.width = this.options.iconSize + 5 + 'px';
+ this.svg.style.height = '100%';
+ this.dom.frame.appendChild(this.svg);
+ this.dom.frame.appendChild(this.dom.textArea);
+ };
- // draw the groups
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- if (group.options.style == 'line') {
- this._drawLineGraph(processedGroupData[groupIds[i]], group);
- }
- }
- this._drawBarGraphs(groupIds, processedGroupData);
- }
+ /**
+ * Hide the component from the DOM
+ */
+ Legend.prototype.hide = function() {
+ // remove the frame containing the items
+ if (this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
}
+ };
- // cleanup unused svg elements
- DOMutil.cleanupElements(this.svgElements);
+ /**
+ * Show the component in the DOM (when not already visible).
+ * @return {Boolean} changed
+ */
+ Legend.prototype.show = function() {
+ // show frame containing the items
+ if (!this.dom.frame.parentNode) {
+ this.body.dom.center.appendChild(this.dom.frame);
+ }
};
+ Legend.prototype.setOptions = function(options) {
+ var fields = ['enabled','orientation','icons','left','right'];
+ util.selectiveDeepExtend(fields, this.options, options);
+ };
- LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
- // first select and preprocess the data from the datasets.
- // the groups have their preselection of data, we now loop over this data to see
- // what data we need to draw. Sorted data is much faster.
- // more optimization is possible by doing the sampling before and using the binary search
- // to find the end date to determine the increment.
- var group, i, j, item;
- if (groupIds.length > 0) {
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- groupsData[groupIds[i]] = [];
- var dataContainer = groupsData[groupIds[i]];
- // optimization for sorted data
- if (group.options.sort == true) {
- var guess = Math.max(0, util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
- for (j = guess; j < group.itemsData.length; j++) {
- item = group.itemsData[j];
- if (item !== undefined) {
- if (item.x > maxDate) {
- dataContainer.push(item);
- break;
- }
- else {
- dataContainer.push(item);
- }
- }
- }
- }
- else {
- for (j = 0; j < group.itemsData.length; j++) {
- item = group.itemsData[j];
- if (item !== undefined) {
- if (item.x > minDate && item.x < maxDate) {
- dataContainer.push(item);
- }
- }
- }
+ Legend.prototype.redraw = function() {
+ var activeGroups = 0;
+ for (var groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ activeGroups++;
}
}
}
- this._applySampling(groupIds, groupsData);
- };
-
- LineGraph.prototype._applySampling = function (groupIds, groupsData) {
- var group;
- if (groupIds.length > 0) {
- for (var i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- if (group.options.sampling == true) {
- var dataContainer = groupsData[groupIds[i]];
- if (dataContainer.length > 0) {
- var increment = 1;
- var amountOfPoints = dataContainer.length;
+ if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false || activeGroups == 0) {
+ this.hide();
+ }
+ else {
+ this.show();
+ if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
+ this.dom.frame.style.left = '4px';
+ this.dom.frame.style.textAlign = "left";
+ this.dom.textArea.style.textAlign = "left";
+ this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
+ this.dom.textArea.style.right = '';
+ this.svg.style.left = 0 +'px';
+ this.svg.style.right = '';
+ }
+ else {
+ this.dom.frame.style.right = '4px';
+ this.dom.frame.style.textAlign = "right";
+ this.dom.textArea.style.textAlign = "right";
+ this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
+ this.dom.textArea.style.left = '';
+ this.svg.style.right = 0 +'px';
+ this.svg.style.left = '';
+ }
- // the global screen is used because changing the width of the yAxis may affect the increment, resulting in an endless loop
- // of width changing of the yAxis.
- var xDistance = this.body.util.toGlobalScreen(dataContainer[dataContainer.length - 1].x) - this.body.util.toGlobalScreen(dataContainer[0].x);
- var pointsPerPixel = amountOfPoints / xDistance;
- increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1, Math.round(pointsPerPixel)));
+ if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
+ this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+ this.dom.frame.style.bottom = '';
+ }
+ else {
+ this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+ this.dom.frame.style.top = '';
+ }
- var sampledData = [];
- for (var j = 0; j < amountOfPoints; j += increment) {
- sampledData.push(dataContainer[j]);
+ if (this.options.icons == false) {
+ this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
+ this.dom.textArea.style.right = '';
+ this.dom.textArea.style.left = '';
+ this.svg.style.width = '0px';
+ }
+ else {
+ this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
+ this.drawLegendIcons();
+ }
- }
- groupsData[groupIds[i]] = sampledData;
+ var content = '';
+ for (var groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ content += this.groups[groupId].content + '
';
}
}
}
+ this.dom.textArea.innerHTML = content;
+ this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
}
};
- LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
- var groupData, group, i,j;
- var barCombinedDataLeft = [];
- var barCombinedDataRight = [];
- var barCombinedData;
- if (groupIds.length > 0) {
- for (i = 0; i < groupIds.length; i++) {
- groupData = groupsData[groupIds[i]];
- if (groupData.length > 0) {
- group = this.groups[groupIds[i]];
- if (group.options.style == 'line' || group.options.barChart.handleOverlap != "stack") {
- var yMin = groupData[0].y;
- var yMax = groupData[0].y;
- for (j = 0; j < groupData.length; j++) {
- yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
- yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
- }
- groupRanges[groupIds[i]] = {min: yMin, max: yMax, yAxisOrientation: group.options.yAxisOrientation};
- }
- else if (group.options.style == 'bar') {
- if (group.options.yAxisOrientation == 'left') {
- barCombinedData = barCombinedDataLeft;
- }
- else {
- barCombinedData = barCombinedDataRight;
- }
+ Legend.prototype.drawLegendIcons = function() {
+ if (this.dom.frame.parentNode) {
+ DOMutil.prepareElements(this.svgElements);
+ var padding = window.getComputedStyle(this.dom.frame).paddingTop;
+ var iconOffset = Number(padding.replace('px',''));
+ var x = iconOffset;
+ var iconWidth = this.options.iconSize;
+ var iconHeight = 0.75 * this.options.iconSize;
+ var y = iconOffset + 0.5 * iconHeight + 3;
- groupRanges[groupIds[i]] = {min: 0, max: 0, yAxisOrientation: group.options.yAxisOrientation, ignore: true};
+ this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
- // combine data
- for (j = 0; j < groupData.length; j++) {
- barCombinedData.push({
- x: groupData[j].x,
- y: groupData[j].y,
- groupId: groupIds[i]
- });
- }
+ for (var groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+ y += iconHeight + this.options.iconSpacing;
}
}
}
- var intersections;
- if (barCombinedDataLeft.length > 0) {
- // sort by time and by group
- barCombinedDataLeft.sort(function (a, b) {
- if (a.x == b.x) {
- return a.groupId - b.groupId;
- } else {
- return a.x - b.x;
- }
- });
- intersections = {};
- this._getDataIntersections(intersections, barCombinedDataLeft);
- groupRanges["__barchartLeft"] = this._getStackedBarYRange(intersections, barCombinedDataLeft);
- groupRanges["__barchartLeft"].yAxisOrientation = "left";
- groupIds.push("__barchartLeft");
- }
- if (barCombinedDataRight.length > 0) {
- // sort by time and by group
- barCombinedDataRight.sort(function (a, b) {
- if (a.x == b.x) {
- return a.groupId - b.groupId;
- } else {
- return a.x - b.x;
- }
- });
- intersections = {};
- this._getDataIntersections(intersections, barCombinedDataRight);
- groupRanges["__barchartRight"] = this._getStackedBarYRange(intersections, barCombinedDataRight);
- groupRanges["__barchartRight"].yAxisOrientation = "right";
- groupIds.push("__barchartRight");
- }
+ DOMutil.cleanupElements(this.svgElements);
}
};
- LineGraph.prototype._getStackedBarYRange = function (intersections, combinedData) {
- var key;
- var yMin = combinedData[0].y;
- var yMax = combinedData[0].y;
- for (var i = 0; i < combinedData.length; i++) {
- key = combinedData[i].x;
- if (intersections[key] === undefined) {
- yMin = yMin > combinedData[i].y ? combinedData[i].y : yMin;
- yMax = yMax < combinedData[i].y ? combinedData[i].y : yMax;
- }
- else {
- intersections[key].accumulated += combinedData[i].y;
+ module.exports = Legend;
+
+
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // Utility functions for ordering and stacking of items
+ var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
+
+ /**
+ * Order items by their start data
+ * @param {Item[]} items
+ */
+ exports.orderByStart = function(items) {
+ items.sort(function (a, b) {
+ return a.data.start - b.data.start;
+ });
+ };
+
+ /**
+ * Order items by their end date. If they have no end date, their start date
+ * is used.
+ * @param {Item[]} items
+ */
+ exports.orderByEnd = function(items) {
+ items.sort(function (a, b) {
+ var aTime = ('end' in a.data) ? a.data.end : a.data.start,
+ bTime = ('end' in b.data) ? b.data.end : b.data.start;
+
+ return aTime - bTime;
+ });
+ };
+
+ /**
+ * Adjust vertical positions of the items such that they don't overlap each
+ * other.
+ * @param {Item[]} items
+ * All visible items
+ * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+ * Margins between items and between items and the axis.
+ * @param {boolean} [force=false]
+ * If true, all items will be repositioned. If false (default), only
+ * items having a top===null will be re-stacked
+ */
+ exports.stack = function(items, margin, force) {
+ var i, iMax;
+
+ if (force) {
+ // reset top position of all items
+ for (i = 0, iMax = items.length; i < iMax; i++) {
+ items[i].top = null;
}
}
- for (var xpos in intersections) {
- if (intersections.hasOwnProperty(xpos)) {
- yMin = yMin > intersections[xpos].accumulated ? intersections[xpos].accumulated : yMin;
- yMax = yMax < intersections[xpos].accumulated ? intersections[xpos].accumulated : yMax;
+
+ // calculate new, non-overlapping positions
+ for (i = 0, iMax = items.length; i < iMax; i++) {
+ var item = items[i];
+ if (item.top === null) {
+ // initialize top position
+ item.top = margin.axis;
+
+ do {
+ // TODO: optimize checking for overlap. when there is a gap without items,
+ // you only need to check for items from the next item on, not from zero
+ var collidingItem = null;
+ for (var j = 0, jj = items.length; j < jj; j++) {
+ var other = items[j];
+ if (other.top !== null && other !== item && other.ignoreStacking == false && exports.collision(item, other, margin.item)) {
+ collidingItem = other;
+ break;
+ }
+ }
+
+ if (collidingItem != null) {
+ // There is a collision. Reposition the items above the colliding element
+ item.top = collidingItem.top + collidingItem.height + margin.item.vertical;
+ }
+ } while (collidingItem);
}
}
-
- return {min: yMin, max: yMax};
};
/**
- * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
- * @param {Array} groupIds
- * @param {Object} groupRanges
- * @private
+ * Adjust vertical positions of the items without stacking them
+ * @param {Item[]} items
+ * All visible items
+ * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+ * Margins between items and between items and the axis.
*/
- LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
- var changeCalled = false;
- var yAxisLeftUsed = false;
- var yAxisRightUsed = false;
- var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
- // if groups are present
- if (groupIds.length > 0) {
- for (var i = 0; i < groupIds.length; i++) {
- if (groupRanges.hasOwnProperty(groupIds[i])) {
- if (groupRanges[groupIds[i]].ignore !== true) {
- minVal = groupRanges[groupIds[i]].min;
- maxVal = groupRanges[groupIds[i]].max;
+ exports.nostack = function(items, margin, subgroups) {
+ var i, iMax, newTop;
- if (groupRanges[groupIds[i]].yAxisOrientation == 'left') {
- yAxisLeftUsed = true;
- minLeft = minLeft > minVal ? minVal : minLeft;
- maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
- }
- else {
- yAxisRightUsed = true;
- minRight = minRight > minVal ? minVal : minRight;
- maxRight = maxRight < maxVal ? maxVal : maxRight;
+ // reset top position of all items
+ for (i = 0, iMax = items.length; i < iMax; i++) {
+ if (items[i].data.subgroup !== undefined) {
+ newTop = margin.axis;
+ for (var subgroup in subgroups) {
+ if (subgroups.hasOwnProperty(subgroup)) {
+ if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroups[items[i].data.subgroup].index) {
+ newTop += subgroups[subgroup].height + margin.item.vertical;
}
}
}
+ items[i].top = newTop;
}
-
- if (yAxisLeftUsed == true) {
- this.yAxisLeft.setRange(minLeft, maxLeft);
- }
- if (yAxisRightUsed == true) {
- this.yAxisRight.setRange(minRight, maxRight);
+ else {
+ items[i].top = margin.axis;
}
}
+ };
+
+ /**
+ * Test if the two provided items collide
+ * The items must have parameters left, width, top, and height.
+ * @param {Item} a The first item
+ * @param {Item} b The second item
+ * @param {{horizontal: number, vertical: number}} margin
+ * An object containing a horizontal and vertical
+ * minimum required margin.
+ * @return {boolean} true if a and b collide, else false
+ */
+ exports.collision = function(a, b, margin) {
+ return ((a.left - margin.horizontal + EPSILON) < (b.left + b.width) &&
+ (a.left + a.width + margin.horizontal - EPSILON) > b.left &&
+ (a.top - margin.vertical + EPSILON) < (b.top + b.height) &&
+ (a.top + a.height + margin.vertical - EPSILON) > b.top);
+ };
- changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled;
- changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
- if (yAxisRightUsed == true && yAxisLeftUsed == true) {
- this.yAxisLeft.drawIcons = true;
- this.yAxisRight.drawIcons = true;
- }
- else {
- this.yAxisLeft.drawIcons = false;
- this.yAxisRight.drawIcons = false;
- }
+/***/ },
+/* 40 */
+/***/ function(module, exports, __webpack_require__) {
- this.yAxisRight.master = !yAxisLeftUsed;
+ var Hammer = __webpack_require__(18);
+ var util = __webpack_require__(1);
- if (this.yAxisRight.master == false) {
- if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
- else {this.yAxisLeft.lineOffset = 0;}
+ /**
+ * @constructor Item
+ * @param {Object} data Object containing (optional) parameters type,
+ * start, end, content, group, className.
+ * @param {{toScreen: function, toTime: function}} conversion
+ * Conversion functions from time to screen and vice versa
+ * @param {Object} options Configuration options
+ * // TODO: describe available options
+ */
+ function Item (data, conversion, options) {
+ this.id = null;
+ this.parent = null;
+ this.data = data;
+ this.dom = null;
+ this.conversion = conversion || {};
+ this.options = options || {};
- changeCalled = this.yAxisLeft.redraw() || changeCalled;
- this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
- changeCalled = this.yAxisRight.redraw() || changeCalled;
- }
- else {
- changeCalled = this.yAxisRight.redraw() || changeCalled;
- }
+ this.selected = false;
+ this.displayed = false;
+ this.dirty = true;
- // clean the accumulated lists
- if (groupIds.indexOf("__barchartLeft") != -1) {
- groupIds.splice(groupIds.indexOf("__barchartLeft"),1);
- }
- if (groupIds.indexOf("__barchartRight") != -1) {
- groupIds.splice(groupIds.indexOf("__barchartRight"),1);
- }
+ this.top = null;
+ this.left = null;
+ this.width = null;
+ this.height = null;
- return changeCalled;
+ this.ignoreStacking = false;
+ }
+
+ /**
+ * Select current item
+ */
+ Item.prototype.select = function() {
+ this.selected = true;
+ this.dirty = true;
+ if (this.displayed) this.redraw();
};
/**
- * This shows or hides the Y axis if needed. If there is a change, the changed event is emitted by the updateYAxis function
- *
- * @param {boolean} axisUsed
- * @returns {boolean}
- * @private
- * @param axis
+ * Unselect current item
*/
- LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
- var changed = false;
- if (axisUsed == false) {
- if (axis.dom.frame.parentNode) {
- axis.hide();
- changed = true;
+ Item.prototype.unselect = function() {
+ this.selected = false;
+ this.dirty = true;
+ if (this.displayed) this.redraw();
+ };
+
+ /**
+ * Set data for the item. Existing data will be updated. The id should not
+ * be changed. When the item is displayed, it will be redrawn immediately.
+ * @param {Object} data
+ */
+ Item.prototype.setData = function(data) {
+ this.data = data;
+ this.dirty = true;
+ if (this.displayed) this.redraw();
+ };
+
+ /**
+ * Set a parent for the item
+ * @param {ItemSet | Group} parent
+ */
+ Item.prototype.setParent = function(parent) {
+ if (this.displayed) {
+ this.hide();
+ this.parent = parent;
+ if (this.parent) {
+ this.show();
}
}
else {
- if (!axis.dom.frame.parentNode) {
- axis.show();
- changed = true;
- }
+ this.parent = parent;
}
- return changed;
};
+ /**
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
+ */
+ Item.prototype.isVisible = function(range) {
+ // Should be implemented by Item implementations
+ return false;
+ };
/**
- * draw a bar graph
- *
- * @param groupIds
- * @param processedGroupData
+ * Show the Item in the DOM (when not already visible)
+ * @return {Boolean} changed
*/
- LineGraph.prototype._drawBarGraphs = function (groupIds, processedGroupData) {
- var combinedData = [];
- var intersections = {};
- var coreDistance;
- var key, drawData;
- var group;
- var i,j;
- var barPoints = 0;
+ Item.prototype.show = function() {
+ return false;
+ };
- // combine all barchart data
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- if (group.options.style == 'bar') {
- if (group.visible == true && (this.options.groups.visibility[groupIds[i]] === undefined || this.options.groups.visibility[groupIds[i]] == true)) {
- for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
- combinedData.push({
- x: processedGroupData[groupIds[i]][j].x,
- y: processedGroupData[groupIds[i]][j].y,
- groupId: groupIds[i]
- });
- barPoints += 1;
- }
- }
- }
- }
+ /**
+ * Hide the Item from the DOM (when visible)
+ * @return {Boolean} changed
+ */
+ Item.prototype.hide = function() {
+ return false;
+ };
- if (barPoints == 0) {return;}
+ /**
+ * Repaint the item
+ */
+ Item.prototype.redraw = function() {
+ // should be implemented by the item
+ };
- // sort by time and by group
- combinedData.sort(function (a, b) {
- if (a.x == b.x) {
- return a.groupId - b.groupId;
- } else {
- return a.x - b.x;
- }
- });
+ /**
+ * Reposition the Item horizontally
+ */
+ Item.prototype.repositionX = function() {
+ // should be implemented by the item
+ };
- // get intersections
- this._getDataIntersections(intersections, combinedData);
+ /**
+ * Reposition the Item vertically
+ */
+ Item.prototype.repositionY = function() {
+ // should be implemented by the item
+ };
- // plot barchart
- for (i = 0; i < combinedData.length; i++) {
- group = this.groups[combinedData[i].groupId];
- var minWidth = 0.1 * group.options.barChart.width;
+ /**
+ * Repaint a delete button on the top right of the item when the item is selected
+ * @param {HTMLElement} anchor
+ * @protected
+ */
+ Item.prototype._repaintDeleteButton = function (anchor) {
+ if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
+ // create and show button
+ var me = this;
- key = combinedData[i].x;
- var heightOffset = 0;
- if (intersections[key] === undefined) {
- if (i+1 < combinedData.length) {coreDistance = Math.abs(combinedData[i+1].x - key);}
- if (i > 0) {coreDistance = Math.min(coreDistance,Math.abs(combinedData[i-1].x - key));}
- drawData = this._getSafeDrawData(coreDistance, group, minWidth);
- }
- else {
- var nextKey = i + (intersections[key].amount - intersections[key].resolved);
- var prevKey = i - (intersections[key].resolved + 1);
- if (nextKey < combinedData.length) {coreDistance = Math.abs(combinedData[nextKey].x - key);}
- if (prevKey > 0) {coreDistance = Math.min(coreDistance,Math.abs(combinedData[prevKey].x - key));}
- drawData = this._getSafeDrawData(coreDistance, group, minWidth);
- intersections[key].resolved += 1;
+ var deleteButton = document.createElement('div');
+ deleteButton.className = 'delete';
+ deleteButton.title = 'Delete this item';
- if (group.options.barChart.handleOverlap == 'stack') {
- heightOffset = intersections[key].accumulated;
- intersections[key].accumulated += group.zeroPosition - combinedData[i].y;
- }
- else if (group.options.barChart.handleOverlap == 'sideBySide') {
- drawData.width = drawData.width / intersections[key].amount;
- drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1));
- if (group.options.barChart.align == 'left') {drawData.offset -= 0.5*drawData.width;}
- else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
- }
- }
- DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', this.svgElements, this.svg);
- // draw points
- if (group.options.drawPoints.enabled == true) {
- DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, group, this.svgElements, this.svg);
+ Hammer(deleteButton, {
+ preventDefault: true
+ }).on('tap', function (event) {
+ me.parent.removeFromDataSet(me);
+ event.stopPropagation();
+ });
+
+ anchor.appendChild(deleteButton);
+ this.dom.deleteButton = deleteButton;
+ }
+ else if (!this.selected && this.dom.deleteButton) {
+ // remove button
+ if (this.dom.deleteButton.parentNode) {
+ this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
}
+ this.dom.deleteButton = null;
}
};
-
- /**
- * Fill the intersections object with counters of how many datapoints share the same x coordinates
- * @param intersections
- * @param combinedData
+
+ /**
+ * Set HTML contents for the item
+ * @param {Element} element HTML element to fill with the contents
* @private
*/
- LineGraph.prototype._getDataIntersections = function (intersections, combinedData) {
- // get intersections
- var coreDistance;
- for (var i = 0; i < combinedData.length; i++) {
- if (i + 1 < combinedData.length) {
- coreDistance = Math.abs(combinedData[i + 1].x - combinedData[i].x);
+ Item.prototype._updateContents = function (element) {
+ var content;
+ if (this.options.template) {
+ var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
+ content = this.options.template(itemData);
+ }
+ else {
+ content = this.data.content;
+ }
+
+ if(content !== this.content) {
+ // only replace the content when changed
+ if (content instanceof Element) {
+ element.innerHTML = '';
+ element.appendChild(content);
}
- if (i > 0) {
- coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x));
+ else if (content != undefined) {
+ element.innerHTML = content;
}
- if (coreDistance == 0) {
- if (intersections[combinedData[i].x] === undefined) {
- intersections[combinedData[i].x] = {amount: 0, resolved: 0, accumulated: 0};
+ else {
+ if (!(this.data.type == 'background' && this.data.content === undefined)) {
+ throw new Error('Property "content" missing in item ' + this.id);
}
- intersections[combinedData[i].x].amount += 1;
}
+
+ this.content = content;
}
};
/**
- * Get the width and offset for bargraphs based on the coredistance between datapoints
- *
- * @param coreDistance
- * @param group
- * @param minWidth
- * @returns {{width: Number, offset: Number}}
+ * Set HTML contents for the item
+ * @param {Element} element HTML element to fill with the contents
* @private
*/
- LineGraph.prototype._getSafeDrawData = function (coreDistance, group, minWidth) {
- var width, offset;
- if (coreDistance < group.options.barChart.width && coreDistance > 0) {
- width = coreDistance < minWidth ? minWidth : coreDistance;
-
- offset = 0; // recalculate offset with the new width;
- if (group.options.barChart.align == 'left') {
- offset -= 0.5 * coreDistance;
- }
- else if (group.options.barChart.align == 'right') {
- offset += 0.5 * coreDistance;
- }
+ Item.prototype._updateTitle = function (element) {
+ if (this.data.title != null) {
+ element.title = this.data.title || '';
}
else {
- // default settings
- width = group.options.barChart.width;
- offset = 0;
- if (group.options.barChart.align == 'left') {
- offset -= 0.5 * group.options.barChart.width;
- }
- else if (group.options.barChart.align == 'right') {
- offset += 0.5 * group.options.barChart.width;
- }
+ element.removeAttribute('title');
}
-
- return {width: width, offset: offset};
};
-
/**
- * draw a line graph
- *
- * @param dataset
- * @param group
+ * Process dataAttributes timeline option and set as data- attributes on dom.content
+ * @param {Element} element HTML element to which the attributes will be attached
+ * @private
*/
- LineGraph.prototype._drawLineGraph = function (dataset, group) {
- if (dataset != null) {
- if (dataset.length > 0) {
- var path, d;
- var svgHeight = Number(this.svg.style.height.replace("px",""));
- path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
- path.setAttributeNS(null, "class", group.className);
+ Item.prototype._updateDataAttributes = function(element) {
+ if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
+ var attributes = [];
- // construct path from dataset
- if (group.options.catmullRom.enabled == true) {
- d = this._catmullRom(dataset, group);
- }
- else {
- d = this._linear(dataset);
- }
+ if (Array.isArray(this.options.dataAttributes)) {
+ attributes = this.options.dataAttributes;
+ }
+ else if (this.options.dataAttributes == 'all') {
+ attributes = Object.keys(this.data);
+ }
+ else {
+ return;
+ }
- // append with points for fill and finalize the path
- if (group.options.shaded.enabled == true) {
- var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.svg);
- var dFill;
- if (group.options.shaded.orientation == 'top') {
- dFill = "M" + dataset[0].x + "," + 0 + " " + d + "L" + dataset[dataset.length - 1].x + "," + 0;
- }
- else {
- dFill = "M" + dataset[0].x + "," + svgHeight + " " + d + "L" + dataset[dataset.length - 1].x + "," + svgHeight;
- }
- fillPath.setAttributeNS(null, "class", group.className + " fill");
- fillPath.setAttributeNS(null, "d", dFill);
- }
- // copy properties to path for drawing.
- path.setAttributeNS(null, "d", "M" + d);
+ for (var i = 0; i < attributes.length; i++) {
+ var name = attributes[i];
+ var value = this.data[name];
- // draw points
- if (group.options.drawPoints.enabled == true) {
- this._drawPoints(dataset, group, this.svgElements, this.svg);
+ if (value != null) {
+ element.setAttribute('data-' + name, value);
+ }
+ else {
+ element.removeAttribute('data-' + name);
}
}
}
};
/**
- * draw the data points
- *
- * @param {Array} dataset
- * @param {Object} JSONcontainer
- * @param {Object} svg | SVG DOM element
- * @param {GraphGroup} group
- * @param {Number} [offset]
+ * Update custom styles of the element
+ * @param element
+ * @private
*/
- LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
- if (offset === undefined) {offset = 0;}
- for (var i = 0; i < dataset.length; i++) {
- DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
+ Item.prototype._updateStyle = function(element) {
+ // remove old styles
+ if (this.style) {
+ util.removeCssText(element, this.style);
+ this.style = null;
+ }
+
+ // append new styles
+ if (this.data.style) {
+ util.addCssText(element, this.data.style);
+ this.style = this.data.style;
}
};
+ module.exports = Item;
+
+/***/ },
+/* 41 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var Hammer = __webpack_require__(18);
+ var Item = __webpack_require__(40);
+ var BackgroundGroup = __webpack_require__(42);
+ var RangeItem = __webpack_require__(44);
/**
- * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
- * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
- * the yAxis.
- *
- * @param datapoints
- * @returns {Array}
- * @private
+ * @constructor BackgroundItem
+ * @extends Item
+ * @param {Object} data Object containing parameters start, end
+ * content, className.
+ * @param {{toScreen: function, toTime: function}} conversion
+ * Conversion functions from time to screen and vice versa
+ * @param {Object} [options] Configuration options
+ * // TODO: describe options
*/
- LineGraph.prototype._convertXcoordinates = function (datapoints) {
- var extractedData = [];
- var xValue, yValue;
- var toScreen = this.body.util.toScreen;
+ // TODO: implement support for the BackgroundItem just having a start, then being displayed as a sort of an annotation
+ function BackgroundItem (data, conversion, options) {
+ this.props = {
+ content: {
+ width: 0
+ }
+ };
+ this.overflow = false; // if contents can overflow (css styling), this flag is set to true
- for (var i = 0; i < datapoints.length; i++) {
- xValue = toScreen(datapoints[i].x) + this.width;
- yValue = datapoints[i].y;
- extractedData.push({x: xValue, y: yValue});
+ // validate data
+ if (data) {
+ if (data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + data.id);
+ }
+ if (data.end == undefined) {
+ throw new Error('Property "end" missing in item ' + data.id);
+ }
+ }
+
+ Item.call(this, data, conversion, options);
+
+ this.ignoreStacking = true; // this is not used when stacking
+ this.emptyContent = false;
+ }
+
+ BackgroundItem.prototype = new Item (null, null, null);
+
+ BackgroundItem.prototype.baseClassName = 'item background';
+
+ /**
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
+ */
+ BackgroundItem.prototype.isVisible = function(range) {
+ // determine visibility
+ return (this.data.start < range.end) && (this.data.end > range.start);
+ };
+
+ /**
+ * Repaint the item
+ */
+ BackgroundItem.prototype.redraw = function() {
+ var dom = this.dom;
+ if (!dom) {
+ // create DOM
+ this.dom = {};
+ dom = this.dom;
+
+ // background box
+ dom.box = document.createElement('div');
+ // className is updated in redraw()
+
+ // contents box
+ dom.content = document.createElement('div');
+ dom.content.className = 'content';
+ dom.box.appendChild(dom.content);
+
+ // attach this item as attribute
+ dom.box['timeline-item'] = this;
+
+ this.dirty = true;
+ }
+
+ // append DOM to parent DOM
+ if (!this.parent) {
+ throw new Error('Cannot redraw item: no parent attached');
+ }
+ if (!dom.box.parentNode) {
+ var background = this.parent.dom.background;
+ if (!background) {
+ throw new Error('Cannot redraw item: parent has no background container element');
+ }
+ background.appendChild(dom.box);
}
+ this.displayed = true;
- return extractedData;
- };
+ // Update DOM when item is marked dirty. An item is marked dirty when:
+ // - the item is not yet rendered
+ // - the item's data is changed
+ // - the item is selected/deselected
+ if (this.dirty) {
+ this._updateContents(this.dom.content);
+ this._updateTitle(this.dom.content);
+ this._updateDataAttributes(this.dom.content);
+ this._updateStyle(this.dom.box);
+ // update class
+ var className = (this.data.className ? (' ' + this.data.className) : '') +
+ (this.selected ? ' selected' : '');
+ dom.box.className = this.baseClassName + className;
+ // determine from css whether this box has overflow
+ this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
- /**
- * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
- * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
- * the yAxis.
- *
- * @param datapoints
- * @returns {Array}
- * @private
- */
- LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
- var extractedData = [];
- var xValue, yValue;
- var toScreen = this.body.util.toScreen;
- var axis = this.yAxisLeft;
- var svgHeight = Number(this.svg.style.height.replace("px",""));
- if (group.options.yAxisOrientation == 'right') {
- axis = this.yAxisRight;
- }
+ // recalculate size
+ this.props.content.width = this.dom.content.offsetWidth;
+ this.height = 0; // set height zero, so this item will be ignored when stacking items
- for (var i = 0; i < datapoints.length; i++) {
- xValue = toScreen(datapoints[i].x) + this.width;
- yValue = Math.round(axis.convertValue(datapoints[i].y));
- extractedData.push({x: xValue, y: yValue});
+ this.dirty = false;
}
-
- group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
-
- return extractedData;
};
/**
- * This uses an uniform parametrization of the CatmullRom algorithm:
- * "On the Parameterization of Catmull-Rom Curves" by Cem Yuksel et al.
- * @param data
- * @returns {string}
- * @private
+ * Show the item in the DOM (when not already visible). The items DOM will
+ * be created when needed.
*/
- LineGraph.prototype._catmullRomUniform = function(data) {
- // catmull rom
- var p0, p1, p2, p3, bp1, bp2;
- var d = Math.round(data[0].x) + "," + Math.round(data[0].y) + " ";
- var normalization = 1/6;
- var length = data.length;
- for (var i = 0; i < length - 1; i++) {
-
- p0 = (i == 0) ? data[0] : data[i-1];
- p1 = data[i];
- p2 = data[i+1];
- p3 = (i + 2 < length) ? data[i+2] : p2;
-
-
- // Catmull-Rom to Cubic Bezier conversion matrix
- // 0 1 0 0
- // -1/6 1 1/6 0
- // 0 1/6 1 -1/6
- // 0 0 1 0
-
- // bp0 = { x: p1.x, y: p1.y };
- bp1 = { x: ((-p0.x + 6*p1.x + p2.x) *normalization), y: ((-p0.y + 6*p1.y + p2.y) *normalization)};
- bp2 = { x: (( p1.x + 6*p2.x - p3.x) *normalization), y: (( p1.y + 6*p2.y - p3.y) *normalization)};
- // bp0 = { x: p2.x, y: p2.y };
+ BackgroundItem.prototype.show = RangeItem.prototype.show;
- d += "C" +
- bp1.x + "," +
- bp1.y + " " +
- bp2.x + "," +
- bp2.y + " " +
- p2.x + "," +
- p2.y + " ";
- }
+ /**
+ * Hide the item from the DOM (when visible)
+ * @return {Boolean} changed
+ */
+ BackgroundItem.prototype.hide = RangeItem.prototype.hide;
- return d;
- };
+ /**
+ * Reposition the item horizontally
+ * @Override
+ */
+ BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
/**
- * This uses either the chordal or centripetal parameterization of the catmull-rom algorithm.
- * By default, the centripetal parameterization is used because this gives the nicest results.
- * These parameterizations are relatively heavy because the distance between 4 points have to be calculated.
- *
- * One optimization can be used to reuse distances since this is a sliding window approach.
- * @param data
- * @returns {string}
- * @private
+ * Reposition the item vertically
+ * @Override
*/
- LineGraph.prototype._catmullRom = function(data, group) {
- var alpha = group.options.catmullRom.alpha;
- if (alpha == 0 || alpha === undefined) {
- return this._catmullRomUniform(data);
+ BackgroundItem.prototype.repositionY = function(margin) {
+ var onTop = this.options.orientation === 'top';
+ this.dom.content.style.top = onTop ? '' : '0';
+ this.dom.content.style.bottom = onTop ? '0' : '';
+ var height;
+
+ // special positioning for subgroups
+ if (this.data.subgroup !== undefined) {
+ var itemSubgroup = this.data.subgroup;
+ var subgroups = this.parent.subgroups;
+ var subgroupIndex = subgroups[itemSubgroup].index;
+ // if the orientation is top, we need to take the difference in height into account.
+ if (onTop == true) {
+ // the first subgroup will have to account for the distance from the top to the first item.
+ height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+ height += subgroupIndex == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
+ var newTop = this.parent.top;
+ for (var subgroup in subgroups) {
+ if (subgroups.hasOwnProperty(subgroup)) {
+ if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroupIndex) {
+ newTop += subgroups[subgroup].height + margin.item.vertical;
+ }
+ }
+ }
+
+ // the others will have to be offset downwards with this same distance.
+ newTop += subgroupIndex != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
+ this.dom.box.style.top = newTop + 'px';
+ this.dom.box.style.bottom = '';
+ }
+ // and when the orientation is bottom:
+ else {
+ var newTop = this.parent.top;
+ for (var subgroup in subgroups) {
+ if (subgroups.hasOwnProperty(subgroup)) {
+ if (subgroups[subgroup].visible == true && subgroups[subgroup].index > subgroupIndex) {
+ newTop += subgroups[subgroup].height + margin.item.vertical;
+ }
+ }
+ }
+ height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+ this.dom.box.style.top = newTop + 'px';
+ this.dom.box.style.bottom = '';
+ }
}
+ // and in the case of no subgroups:
else {
- var p0, p1, p2, p3, bp1, bp2, d1,d2,d3, A, B, N, M;
- var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
- var d = Math.round(data[0].x) + "," + Math.round(data[0].y) + " ";
- var length = data.length;
- for (var i = 0; i < length - 1; i++) {
-
- p0 = (i == 0) ? data[0] : data[i-1];
- p1 = data[i];
- p2 = data[i+1];
- p3 = (i + 2 < length) ? data[i+2] : p2;
+ // we want backgrounds with groups to only show in groups.
+ if (this.parent instanceof BackgroundGroup) {
+ // if the item is not in a group:
+ height = Math.max(this.parent.height, this.parent.itemSet.body.domProps.centerContainer.height);
+ this.dom.box.style.top = onTop ? '0' : '';
+ this.dom.box.style.bottom = onTop ? '' : '0';
+ }
+ else {
+ height = this.parent.height;
+ // same alignment for items when orientation is top or bottom
+ this.dom.box.style.top = this.parent.top + 'px';
+ this.dom.box.style.bottom = '';
+ }
+ }
+ this.dom.box.style.height = height + 'px';
+ };
- d1 = Math.sqrt(Math.pow(p0.x - p1.x,2) + Math.pow(p0.y - p1.y,2));
- d2 = Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2));
- d3 = Math.sqrt(Math.pow(p2.x - p3.x,2) + Math.pow(p2.y - p3.y,2));
+ module.exports = BackgroundItem;
- // Catmull-Rom to Cubic Bezier conversion matrix
- //
- // A = 2d1^2a + 3d1^a * d2^a + d3^2a
- // B = 2d3^2a + 3d3^a * d2^a + d2^2a
- //
- // [ 0 1 0 0 ]
- // [ -d2^2a/N A/N d1^2a/N 0 ]
- // [ 0 d3^2a/M B/M -d2^2a/M ]
- // [ 0 0 1 0 ]
- // [ 0 1 0 0 ]
- // [ -d2pow2a/N A/N d1pow2a/N 0 ]
- // [ 0 d3pow2a/M B/M -d2pow2a/M ]
- // [ 0 0 1 0 ]
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
- d3powA = Math.pow(d3, alpha);
- d3pow2A = Math.pow(d3,2*alpha);
- d2powA = Math.pow(d2, alpha);
- d2pow2A = Math.pow(d2,2*alpha);
- d1powA = Math.pow(d1, alpha);
- d1pow2A = Math.pow(d1,2*alpha);
+ var util = __webpack_require__(1);
+ var Group = __webpack_require__(43);
- A = 2*d1pow2A + 3*d1powA * d2powA + d2pow2A;
- B = 2*d3pow2A + 3*d3powA * d2powA + d2pow2A;
- N = 3*d1powA * (d1powA + d2powA);
- if (N > 0) {N = 1 / N;}
- M = 3*d3powA * (d3powA + d2powA);
- if (M > 0) {M = 1 / M;}
+ /**
+ * @constructor BackgroundGroup
+ * @param {Number | String} groupId
+ * @param {Object} data
+ * @param {ItemSet} itemSet
+ */
+ function BackgroundGroup (groupId, data, itemSet) {
+ Group.call(this, groupId, data, itemSet);
- bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
- y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
+ this.width = 0;
+ this.height = 0;
+ this.top = 0;
+ this.left = 0;
+ }
- bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
- y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
+ BackgroundGroup.prototype = Object.create(Group.prototype);
- if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;}
- if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;}
- d += "C" +
- bp1.x + "," +
- bp1.y + " " +
- bp2.x + "," +
- bp2.y + " " +
- p2.x + "," +
- p2.y + " ";
- }
+ /**
+ * Repaint this group
+ * @param {{start: number, end: number}} range
+ * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+ * @param {boolean} [restack=false] Force restacking of all items
+ * @return {boolean} Returns true if the group is resized
+ */
+ BackgroundGroup.prototype.redraw = function(range, margin, restack) {
+ var resized = false;
- return d;
+ this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+
+ // calculate actual size
+ this.width = this.dom.background.offsetWidth;
+
+ // apply new height (just always zero for BackgroundGroup
+ this.dom.background.style.height = '0';
+
+ // update vertical position of items after they are re-stacked and the height of the group is calculated
+ for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
+ var item = this.visibleItems[i];
+ item.repositionY(margin);
}
+
+ return resized;
};
/**
- * this generates the SVG path for a linear drawing between datapoints.
- * @param data
- * @returns {string}
- * @private
+ * Show this group: attach to the DOM
*/
- LineGraph.prototype._linear = function(data) {
- // linear
- var d = "";
- for (var i = 0; i < data.length; i++) {
- if (i == 0) {
- d += data[i].x + "," + data[i].y;
- }
- else {
- d += " " + data[i].x + "," + data[i].y;
- }
+ BackgroundGroup.prototype.show = function() {
+ if (!this.dom.background.parentNode) {
+ this.itemSet.dom.background.appendChild(this.dom.background);
}
- return d;
};
- module.exports = LineGraph;
+ module.exports = BackgroundGroup;
/***/ },
@@ -21088,1079 +20966,1201 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
- var DOMutil = __webpack_require__(6);
- var Component = __webpack_require__(22);
- var DataStep = __webpack_require__(44);
+ var stack = __webpack_require__(39);
+ var RangeItem = __webpack_require__(44);
/**
- * A horizontal time axis
- * @param {Object} [options] See DataAxis.setOptions for the available
- * options.
- * @constructor DataAxis
- * @extends Component
- * @param body
+ * @constructor Group
+ * @param {Number | String} groupId
+ * @param {Object} data
+ * @param {ItemSet} itemSet
*/
- function DataAxis (body, options, svg, linegraphOptions) {
- this.id = util.randomUUID();
- this.body = body;
+ function Group (groupId, data, itemSet) {
+ this.groupId = groupId;
+ this.subgroups = {};
+ this.visibleSubgroups = 0;
+ this.itemSet = itemSet;
- this.defaultOptions = {
- orientation: 'left', // supported: 'left', 'right'
- showMinorLabels: true,
- showMajorLabels: true,
- icons: true,
- majorLinesOffset: 7,
- minorLinesOffset: 4,
- labelOffsetX: 10,
- labelOffsetY: 2,
- iconWidth: 20,
- width: '40px',
- visible: true,
- customRange: {
- left: {min:undefined, max:undefined},
- right: {min:undefined, max:undefined}
+ this.dom = {};
+ this.props = {
+ label: {
+ width: 0,
+ height: 0
}
};
+ this.className = null;
- this.linegraphOptions = linegraphOptions;
- this.linegraphSVG = svg;
- this.props = {};
- this.DOMelements = { // dynamic elements
- lines: {},
- labels: {}
+ this.items = {}; // items filtered by groupId of this group
+ this.visibleItems = []; // items currently visible in window
+ this.orderedItems = { // items sorted by start and by end
+ byStart: [],
+ byEnd: []
};
- this.dom = {};
-
- this.range = {start:0, end:0};
-
- this.options = util.extend({}, this.defaultOptions);
- this.conversionFactor = 1;
-
- this.setOptions(options);
- this.width = Number(('' + this.options.width).replace("px",""));
- this.minWidth = this.width;
- this.height = this.linegraphSVG.offsetHeight;
+ this._create();
- this.stepPixels = 25;
- this.stepPixelsForced = 25;
- this.lineOffset = 0;
- this.master = true;
- this.svgElements = {};
+ this.setData(data);
+ }
+ /**
+ * Create DOM elements for the group
+ * @private
+ */
+ Group.prototype._create = function() {
+ var label = document.createElement('div');
+ label.className = 'vlabel';
+ this.dom.label = label;
- this.groups = {};
- this.amountOfGroups = 0;
+ var inner = document.createElement('div');
+ inner.className = 'inner';
+ label.appendChild(inner);
+ this.dom.inner = inner;
- // create the HTML DOM
- this._create();
- }
+ var foreground = document.createElement('div');
+ foreground.className = 'group';
+ foreground['timeline-group'] = this;
+ this.dom.foreground = foreground;
- DataAxis.prototype = new Component();
+ this.dom.background = document.createElement('div');
+ this.dom.background.className = 'group';
+ this.dom.axis = document.createElement('div');
+ this.dom.axis.className = 'group';
+ // create a hidden marker to detect when the Timelines container is attached
+ // to the DOM, or the style of a parent of the Timeline is changed from
+ // display:none is changed to visible.
+ this.dom.marker = document.createElement('div');
+ this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
+ this.dom.marker.innerHTML = '?';
+ this.dom.background.appendChild(this.dom.marker);
+ };
- DataAxis.prototype.addGroup = function(label, graphOptions) {
- if (!this.groups.hasOwnProperty(label)) {
- this.groups[label] = graphOptions;
+ /**
+ * Set the group data for this group
+ * @param {Object} data Group data, can contain properties content and className
+ */
+ Group.prototype.setData = function(data) {
+ // update contents
+ var content = data && data.content;
+ if (content instanceof Element) {
+ this.dom.inner.appendChild(content);
+ }
+ else if (content !== undefined && content !== null) {
+ this.dom.inner.innerHTML = content;
+ }
+ else {
+ this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
}
- this.amountOfGroups += 1;
- };
- DataAxis.prototype.updateGroup = function(label, graphOptions) {
- this.groups[label] = graphOptions;
- };
+ // update title
+ this.dom.label.title = data && data.title || '';
- DataAxis.prototype.removeGroup = function(label) {
- if (this.groups.hasOwnProperty(label)) {
- delete this.groups[label];
- this.amountOfGroups -= 1;
+ if (!this.dom.inner.firstChild) {
+ util.addClassName(this.dom.inner, 'hidden');
+ }
+ else {
+ util.removeClassName(this.dom.inner, 'hidden');
}
- };
-
- DataAxis.prototype.setOptions = function (options) {
- if (options) {
- var redraw = false;
- if (this.options.orientation != options.orientation && options.orientation !== undefined) {
- redraw = true;
+ // update className
+ var className = data && data.className || null;
+ if (className != this.className) {
+ if (this.className) {
+ util.removeClassName(this.dom.label, this.className);
+ util.removeClassName(this.dom.foreground, this.className);
+ util.removeClassName(this.dom.background, this.className);
+ util.removeClassName(this.dom.axis, this.className);
}
- var fields = [
- 'orientation',
- 'showMinorLabels',
- 'showMajorLabels',
- 'icons',
- 'majorLinesOffset',
- 'minorLinesOffset',
- 'labelOffsetX',
- 'labelOffsetY',
- 'iconWidth',
- 'width',
- 'visible',
- 'customRange'
- ];
- util.selectiveExtend(fields, this.options, options);
-
- this.minWidth = Number(('' + this.options.width).replace("px",""));
+ util.addClassName(this.dom.label, className);
+ util.addClassName(this.dom.foreground, className);
+ util.addClassName(this.dom.background, className);
+ util.addClassName(this.dom.axis, className);
+ this.className = className;
+ }
- if (redraw == true && this.dom.frame) {
- this.hide();
- this.show();
- }
+ // update style
+ if (this.style) {
+ util.removeCssText(this.dom.label, this.style);
+ this.style = null;
+ }
+ if (data && data.style) {
+ util.addCssText(this.dom.label, data.style);
+ this.style = data.style;
}
};
-
/**
- * Create the HTML DOM for the DataAxis
+ * Get the width of the group label
+ * @return {number} width
*/
- DataAxis.prototype._create = function() {
- this.dom.frame = document.createElement('div');
- this.dom.frame.style.width = this.options.width;
- this.dom.frame.style.height = this.height;
+ Group.prototype.getLabelWidth = function() {
+ return this.props.label.width;
+ };
- this.dom.lineContainer = document.createElement('div');
- this.dom.lineContainer.style.width = '100%';
- this.dom.lineContainer.style.height = this.height;
- // create svg element for graph drawing.
- this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.svg.style.position = "absolute";
- this.svg.style.top = '0px';
- this.svg.style.height = '100%';
- this.svg.style.width = '100%';
- this.svg.style.display = "block";
- this.dom.frame.appendChild(this.svg);
- };
+ /**
+ * Repaint this group
+ * @param {{start: number, end: number}} range
+ * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+ * @param {boolean} [restack=false] Force restacking of all items
+ * @return {boolean} Returns true if the group is resized
+ */
+ Group.prototype.redraw = function(range, margin, restack) {
+ var resized = false;
- DataAxis.prototype._redrawGroupIcons = function () {
- DOMutil.prepareElements(this.svgElements);
+ this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
- var x;
- var iconWidth = this.options.iconWidth;
- var iconHeight = 15;
- var iconOffset = 4;
- var y = iconOffset + 0.5 * iconHeight;
+ // force recalculation of the height of the items when the marker height changed
+ // (due to the Timeline being attached to the DOM or changed from display:none to visible)
+ var markerHeight = this.dom.marker.clientHeight;
+ if (markerHeight != this.lastMarkerHeight) {
+ this.lastMarkerHeight = markerHeight;
- if (this.options.orientation == 'left') {
- x = iconOffset;
+ util.forEach(this.items, function (item) {
+ item.dirty = true;
+ if (item.displayed) item.redraw();
+ });
+
+ restack = true;
}
- else {
- x = this.width - iconWidth - iconOffset;
+
+ // reposition visible items vertically
+ if (this.itemSet.options.stack) { // TODO: ugly way to access options...
+ stack.stack(this.visibleItems, margin, restack);
+ }
+ else { // no stacking
+ stack.nostack(this.visibleItems, margin, this.subgroups);
}
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
- y += iconHeight + iconOffset;
- }
- }
+ // recalculate the height of the group
+ var height = this._calculateHeight(margin);
+
+ // calculate actual size and position
+ var foreground = this.dom.foreground;
+ this.top = foreground.offsetTop;
+ this.left = foreground.offsetLeft;
+ this.width = foreground.offsetWidth;
+ resized = util.updateProperty(this, 'height', height) || resized;
+
+ // recalculate size of label
+ resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
+ resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
+
+ // apply new height
+ this.dom.background.style.height = height + 'px';
+ this.dom.foreground.style.height = height + 'px';
+ this.dom.label.style.height = height + 'px';
+
+ // update vertical position of items after they are re-stacked and the height of the group is calculated
+ for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
+ var item = this.visibleItems[i];
+ item.repositionY(margin);
}
- DOMutil.cleanupElements(this.svgElements);
+ return resized;
};
/**
- * Create the HTML DOM for the DataAxis
+ * recalculate the height of the group
+ * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+ * @returns {number} Returns the height
+ * @private
*/
- DataAxis.prototype.show = function() {
- if (!this.dom.frame.parentNode) {
- if (this.options.orientation == 'left') {
- this.body.dom.left.appendChild(this.dom.frame);
- }
- else {
- this.body.dom.right.appendChild(this.dom.frame);
+ Group.prototype._calculateHeight = function (margin) {
+ // recalculate the height of the group
+ var height;
+ var visibleItems = this.visibleItems;
+ //var visibleSubgroups = [];
+ //this.visibleSubgroups = 0;
+ this.resetSubgroups();
+ var me = this;
+ if (visibleItems.length) {
+ var min = visibleItems[0].top;
+ var max = visibleItems[0].top + visibleItems[0].height;
+ util.forEach(visibleItems, function (item) {
+ min = Math.min(min, item.top);
+ max = Math.max(max, (item.top + item.height));
+ if (item.data.subgroup !== undefined) {
+ me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height,item.height);
+ me.subgroups[item.data.subgroup].visible = true;
+ //if (visibleSubgroups.indexOf(item.data.subgroup) == -1){
+ // visibleSubgroups.push(item.data.subgroup);
+ // me.visibleSubgroups += 1;
+ //}
+ }
+ });
+ if (min > margin.axis) {
+ // there is an empty gap between the lowest item and the axis
+ var offset = min - margin.axis;
+ max -= offset;
+ util.forEach(visibleItems, function (item) {
+ item.top -= offset;
+ });
}
+ height = max + margin.item.vertical / 2;
}
-
- if (!this.dom.lineContainer.parentNode) {
- this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
+ else {
+ height = margin.axis + margin.item.vertical;
}
+ height = Math.max(height, this.props.label.height);
+
+ return height;
};
/**
- * Create the HTML DOM for the DataAxis
+ * Show this group: attach to the DOM
*/
- DataAxis.prototype.hide = function() {
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
+ Group.prototype.show = function() {
+ if (!this.dom.label.parentNode) {
+ this.itemSet.dom.labelSet.appendChild(this.dom.label);
}
- if (this.dom.lineContainer.parentNode) {
- this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
+ if (!this.dom.foreground.parentNode) {
+ this.itemSet.dom.foreground.appendChild(this.dom.foreground);
}
- };
- /**
- * Set a range (start and end)
- * @param end
- * @param start
- * @param end
- */
- DataAxis.prototype.setRange = function (start, end) {
- this.range.start = start;
- this.range.end = end;
+ if (!this.dom.background.parentNode) {
+ this.itemSet.dom.background.appendChild(this.dom.background);
+ }
+
+ if (!this.dom.axis.parentNode) {
+ this.itemSet.dom.axis.appendChild(this.dom.axis);
+ }
};
/**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
+ * Hide this group: remove from the DOM
*/
- DataAxis.prototype.redraw = function () {
- var changeCalled = false;
- var activeGroups = 0;
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- activeGroups++;
- }
- }
- }
- if (this.amountOfGroups == 0 || activeGroups == 0) {
- this.hide();
+ Group.prototype.hide = function() {
+ var label = this.dom.label;
+ if (label.parentNode) {
+ label.parentNode.removeChild(label);
}
- else {
- this.show();
- this.height = Number(this.linegraphSVG.style.height.replace("px",""));
- // svg offsetheight did not work in firefox and explorer...
- this.dom.lineContainer.style.height = this.height + 'px';
- this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
-
- var props = this.props;
- var frame = this.dom.frame;
+ var foreground = this.dom.foreground;
+ if (foreground.parentNode) {
+ foreground.parentNode.removeChild(foreground);
+ }
- // update classname
- frame.className = 'dataaxis';
+ var background = this.dom.background;
+ if (background.parentNode) {
+ background.parentNode.removeChild(background);
+ }
- // calculate character width and height
- this._calculateCharSize();
+ var axis = this.dom.axis;
+ if (axis.parentNode) {
+ axis.parentNode.removeChild(axis);
+ }
+ };
- var orientation = this.options.orientation;
- var showMinorLabels = this.options.showMinorLabels;
- var showMajorLabels = this.options.showMajorLabels;
+ /**
+ * Add an item to the group
+ * @param {Item} item
+ */
+ Group.prototype.add = function(item) {
+ this.items[item.id] = item;
+ item.setParent(this);
- // determine the width and height of the elemens for the axis
- props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
- props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+ // add to
+ var index = 0;
+ if (item.data.subgroup !== undefined) {
+ if (this.subgroups[item.data.subgroup] === undefined) {
+ this.subgroups[item.data.subgroup] = {height:0, visible: false, index:index};
+ index++;
+ }
+ }
- props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
- props.minorLineHeight = 1;
- props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
- props.majorLineHeight = 1;
+ if (this.visibleItems.indexOf(item) == -1) {
+ var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
+ this._checkIfVisible(item, this.visibleItems, range);
+ }
+ };
- // take frame offline while updating (is almost twice as fast)
- if (orientation == 'left') {
- frame.style.top = '0';
- frame.style.left = '0';
- frame.style.bottom = '';
- frame.style.width = this.width + 'px';
- frame.style.height = this.height + "px";
- }
- else { // right
- frame.style.top = '';
- frame.style.bottom = '0';
- frame.style.left = '0';
- frame.style.width = this.width + 'px';
- frame.style.height = this.height + "px";
- }
- changeCalled = this._redrawLabels();
- if (this.options.icons == true) {
- this._redrawGroupIcons();
+ Group.prototype.resetSubgroups = function() {
+ for (var subgroup in this.subgroups) {
+ if (this.subgroups.hasOwnProperty(subgroup)) {
+ this.subgroups[subgroup].visible = false;
}
}
- return changeCalled;
};
/**
- * Repaint major and minor text labels and vertical grid lines
- * @private
+ * Remove an item from the group
+ * @param {Item} item
+ */
+ Group.prototype.remove = function(item) {
+ delete this.items[item.id];
+ item.setParent(this.itemSet);
+
+ // remove from visible items
+ var index = this.visibleItems.indexOf(item);
+ if (index != -1) this.visibleItems.splice(index, 1);
+
+ // TODO: also remove from ordered items?
+ };
+
+ /**
+ * Remove an item from the corresponding DataSet
+ * @param {Item} item
*/
- DataAxis.prototype._redrawLabels = function () {
- DOMutil.prepareElements(this.DOMelements.lines);
- DOMutil.prepareElements(this.DOMelements.labels);
-
- var orientation = this.options['orientation'];
+ Group.prototype.removeFromDataSet = function(item) {
+ this.itemSet.removeItem(item.id);
+ };
- // calculate range and step (step such that we have space for 7 characters per label)
- var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
+ /**
+ * Reorder the items
+ */
+ Group.prototype.order = function() {
+ var array = util.toArray(this.items);
+ this.orderedItems.byStart = array;
+ this.orderedItems.byEnd = this._constructByEndArray(array);
- var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight, this.options.customRange[this.options.orientation]);
- this.step = step;
- // get the distance in pixels for a step
- // dead space is space that is "left over" after a step
- var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
- this.stepPixels = stepPixels;
+ stack.orderByStart(this.orderedItems.byStart);
+ stack.orderByEnd(this.orderedItems.byEnd);
+ };
- var amountOfSteps = this.height / stepPixels;
- var stepDifference = 0;
+ /**
+ * Create an array containing all items being a range (having an end date)
+ * @param {Item[]} array
+ * @returns {RangeItem[]}
+ * @private
+ */
+ Group.prototype._constructByEndArray = function(array) {
+ var endArray = [];
- if (this.master == false) {
- stepPixels = this.stepPixelsForced;
- stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
- for (var i = 0; i < 0.5 * stepDifference; i++) {
- step.previous();
+ for (var i = 0; i < array.length; i++) {
+ if (array[i] instanceof RangeItem) {
+ endArray.push(array[i]);
}
- amountOfSteps = this.height / stepPixels;
- }
- else {
- amountOfSteps += 0.25;
}
+ return endArray;
+ };
+ /**
+ * Update the visible items
+ * @param {{byStart: Item[], byEnd: Item[]}} orderedItems All items ordered by start date and by end date
+ * @param {Item[]} visibleItems The previously visible items.
+ * @param {{start: number, end: number}} range Visible range
+ * @return {Item[]} visibleItems The new visible items.
+ * @private
+ */
+ Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
+ var initialPosByStart,
+ newVisibleItems = [],
+ i;
- this.valueAtZero = step.marginEnd;
- var marginStartPos = 0;
-
- // do not draw the first label
- var max = 1;
-
- this.maxLabelSize = 0;
- var y = 0;
- while (max < Math.round(amountOfSteps)) {
- step.next();
- y = Math.round(max * stepPixels);
- marginStartPos = max * stepPixels;
- var isMajor = step.isMajor();
-
- if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
- this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
- }
-
- if (isMajor && this.options['showMajorLabels'] && this.master == true ||
- this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
- if (y >= 0) {
- this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
- }
- this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
- }
- else {
- this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+ // first check if the items that were in view previously are still in view.
+ // this handles the case for the RangeItem that is both before and after the current one.
+ if (visibleItems.length > 0) {
+ for (i = 0; i < visibleItems.length; i++) {
+ this._checkIfVisible(visibleItems[i], newVisibleItems, range);
}
-
- max++;
}
- if (this.master == false) {
- this.conversionFactor = y / (this.valueAtZero - step.current);
+ // If there were no visible items previously, use binarySearch to find a visible PointItem or RangeItem (based on startTime)
+ if (newVisibleItems.length == 0) {
+ initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
}
else {
- this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
+ initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
}
- var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
- // this will resize the yAxis to accomodate the labels.
- if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
- this.width = this.maxLabelSize + offset;
- this.options.width = this.width + "px";
- DOMutil.cleanupElements(this.DOMelements.lines);
- DOMutil.cleanupElements(this.DOMelements.labels);
- this.redraw();
- return true;
- }
- // this will resize the yAxis if it is too big for the labels.
- else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
- this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
- this.options.width = this.width + "px";
- DOMutil.cleanupElements(this.DOMelements.lines);
- DOMutil.cleanupElements(this.DOMelements.labels);
- this.redraw();
- return true;
+ // use visible search to find a visible RangeItem (only based on endTime)
+ var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
+
+ // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+ if (initialPosByStart != -1) {
+ for (i = initialPosByStart; i >= 0; i--) {
+ if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+ }
+ for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
+ if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+ }
}
- else {
- DOMutil.cleanupElements(this.DOMelements.lines);
- DOMutil.cleanupElements(this.DOMelements.labels);
- return false;
+
+ // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+ if (initialPosByEnd != -1) {
+ for (i = initialPosByEnd; i >= 0; i--) {
+ if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+ }
+ for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
+ if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+ }
}
+
+ return newVisibleItems;
};
- DataAxis.prototype.convertValue = function (value) {
- var invertedValue = this.valueAtZero - value;
- var convertedValue = invertedValue * this.conversionFactor;
- return convertedValue;
+
+
+ /**
+ * this function checks if an item is invisible. If it is NOT we make it visible
+ * and add it to the global visible items. If it is, return true.
+ *
+ * @param {Item} item
+ * @param {Item[]} visibleItems
+ * @param {{start:number, end:number}} range
+ * @returns {boolean}
+ * @private
+ */
+ Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
+ if (item.isVisible(range)) {
+ if (!item.displayed) item.show();
+ item.repositionX();
+ if (visibleItems.indexOf(item) == -1) {
+ visibleItems.push(item);
+ }
+ return false;
+ }
+ else {
+ if (item.displayed) item.hide();
+ return true;
+ }
};
/**
- * Create a label for the axis at position x
+ * this function is very similar to the _checkIfInvisible() but it does not
+ * return booleans, hides the item if it should not be seen and always adds to
+ * the visibleItems.
+ * this one is for brute forcing and hiding.
+ *
+ * @param {Item} item
+ * @param {Array} visibleItems
+ * @param {{start:number, end:number}} range
* @private
- * @param y
- * @param text
- * @param orientation
- * @param className
- * @param characterHeight
*/
- DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
- // reuse redundant label
- var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
- label.className = className;
- label.innerHTML = text;
- if (orientation == 'left') {
- label.style.left = '-' + this.options.labelOffsetX + 'px';
- label.style.textAlign = "right";
- }
- else {
- label.style.right = '-' + this.options.labelOffsetX + 'px';
- label.style.textAlign = "left";
- }
+ Group.prototype._checkIfVisible = function(item, visibleItems, range) {
+ if (item.isVisible(range)) {
+ if (!item.displayed) item.show();
+ // reposition item horizontally
+ item.repositionX();
+ visibleItems.push(item);
+ }
+ else {
+ if (item.displayed) item.hide();
+ }
+ };
- label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
+ module.exports = Group;
- text += '';
- var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
- if (this.maxLabelSize < text.length * largestWidth) {
- this.maxLabelSize = text.length * largestWidth;
- }
- };
+/***/ },
+/* 44 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var Hammer = __webpack_require__(18);
+ var Item = __webpack_require__(40);
/**
- * Create a minor line for the axis at position y
- * @param y
- * @param orientation
- * @param className
- * @param offset
- * @param width
+ * @constructor RangeItem
+ * @extends Item
+ * @param {Object} data Object containing parameters start, end
+ * content, className.
+ * @param {{toScreen: function, toTime: function}} conversion
+ * Conversion functions from time to screen and vice versa
+ * @param {Object} [options] Configuration options
+ * // TODO: describe options
*/
- DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
- if (this.master == true) {
- var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
- line.className = className;
- line.innerHTML = '';
+ function RangeItem (data, conversion, options) {
+ this.props = {
+ content: {
+ width: 0
+ }
+ };
+ this.overflow = false; // if contents can overflow (css styling), this flag is set to true
- if (orientation == 'left') {
- line.style.left = (this.width - offset) + 'px';
+ // validate data
+ if (data) {
+ if (data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + data.id);
}
- else {
- line.style.right = (this.width - offset) + 'px';
+ if (data.end == undefined) {
+ throw new Error('Property "end" missing in item ' + data.id);
}
-
- line.style.width = width + 'px';
- line.style.top = y + 'px';
}
- };
+ Item.call(this, data, conversion, options);
+ }
+ RangeItem.prototype = new Item (null, null, null);
+ RangeItem.prototype.baseClassName = 'item range';
+ /**
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
+ */
+ RangeItem.prototype.isVisible = function(range) {
+ // determine visibility
+ return (this.data.start < range.end) && (this.data.end > range.start);
+ };
/**
- * Determine the size of text on the axis (both major and minor axis).
- * The size is calculated only once and then cached in this.props.
- * @private
+ * Repaint the item
*/
- DataAxis.prototype._calculateCharSize = function () {
- // determine the char width and height on the minor axis
- if (!('minorCharHeight' in this.props)) {
- var textMinor = document.createTextNode('0');
- var measureCharMinor = document.createElement('DIV');
- measureCharMinor.className = 'yAxis minor measure';
- measureCharMinor.appendChild(textMinor);
- this.dom.frame.appendChild(measureCharMinor);
+ RangeItem.prototype.redraw = function() {
+ var dom = this.dom;
+ if (!dom) {
+ // create DOM
+ this.dom = {};
+ dom = this.dom;
- this.props.minorCharHeight = measureCharMinor.clientHeight;
- this.props.minorCharWidth = measureCharMinor.clientWidth;
+ // background box
+ dom.box = document.createElement('div');
+ // className is updated in redraw()
- this.dom.frame.removeChild(measureCharMinor);
+ // contents box
+ dom.content = document.createElement('div');
+ dom.content.className = 'content';
+ dom.box.appendChild(dom.content);
+
+ // attach this item as attribute
+ dom.box['timeline-item'] = this;
+
+ this.dirty = true;
}
- if (!('majorCharHeight' in this.props)) {
- var textMajor = document.createTextNode('0');
- var measureCharMajor = document.createElement('DIV');
- measureCharMajor.className = 'yAxis major measure';
- measureCharMajor.appendChild(textMajor);
- this.dom.frame.appendChild(measureCharMajor);
+ // append DOM to parent DOM
+ if (!this.parent) {
+ throw new Error('Cannot redraw item: no parent attached');
+ }
+ if (!dom.box.parentNode) {
+ var foreground = this.parent.dom.foreground;
+ if (!foreground) {
+ throw new Error('Cannot redraw item: parent has no foreground container element');
+ }
+ foreground.appendChild(dom.box);
+ }
+ this.displayed = true;
- this.props.majorCharHeight = measureCharMajor.clientHeight;
- this.props.majorCharWidth = measureCharMajor.clientWidth;
+ // Update DOM when item is marked dirty. An item is marked dirty when:
+ // - the item is not yet rendered
+ // - the item's data is changed
+ // - the item is selected/deselected
+ if (this.dirty) {
+ this._updateContents(this.dom.content);
+ this._updateTitle(this.dom.box);
+ this._updateDataAttributes(this.dom.box);
+ this._updateStyle(this.dom.box);
- this.dom.frame.removeChild(measureCharMajor);
+ // update class
+ var className = (this.data.className ? (' ' + this.data.className) : '') +
+ (this.selected ? ' selected' : '');
+ dom.box.className = this.baseClassName + className;
+
+ // determine from css whether this box has overflow
+ this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+
+ // recalculate size
+ this.props.content.width = this.dom.content.offsetWidth;
+ this.height = this.dom.box.offsetHeight;
+
+ this.dirty = false;
}
+
+ this._repaintDeleteButton(dom.box);
+ this._repaintDragLeft();
+ this._repaintDragRight();
};
/**
- * Snap a date to a rounded value.
- * The snap intervals are dependent on the current scale and step.
- * @param {Date} date the date to be snapped.
- * @return {Date} snappedDate
+ * Show the item in the DOM (when not already visible). The items DOM will
+ * be created when needed.
*/
- DataAxis.prototype.snap = function(date) {
- return this.step.snap(date);
+ RangeItem.prototype.show = function() {
+ if (!this.displayed) {
+ this.redraw();
+ }
};
- module.exports = DataAxis;
+ /**
+ * Hide the item from the DOM (when visible)
+ * @return {Boolean} changed
+ */
+ RangeItem.prototype.hide = function() {
+ if (this.displayed) {
+ var box = this.dom.box;
+ if (box.parentNode) {
+ box.parentNode.removeChild(box);
+ }
-/***/ },
-/* 44 */
-/***/ function(module, exports, __webpack_require__) {
+ this.top = null;
+ this.left = null;
+
+ this.displayed = false;
+ }
+ };
/**
- * @constructor DataStep
- * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
- * end data point. The class itself determines the best scale (step size) based on the
- * provided start Date, end Date, and minimumStep.
- *
- * If minimumStep is provided, the step size is chosen as close as possible
- * to the minimumStep but larger than minimumStep. If minimumStep is not
- * provided, the scale is set to 1 DAY.
- * The minimumStep should correspond with the onscreen size of about 6 characters
- *
- * Alternatively, you can set a scale by hand.
- * After creation, you can initialize the class by executing first(). Then you
- * can iterate from the start date to the end date via next(). You can check if
- * the end date is reached with the function hasNext(). After each step, you can
- * retrieve the current date via getCurrent().
- * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
- * days, to years.
- *
- * Version: 1.2
- *
- * @param {Date} [start] The start date, for example new Date(2010, 9, 21)
- * or new Date(2010, 9, 21, 23, 45, 00)
- * @param {Date} [end] The end date
- * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+ * Reposition the item horizontally
+ * @Override
*/
- function DataStep(start, end, minimumStep, containerHeight, customRange) {
- // variables
- this.current = 0;
+ RangeItem.prototype.repositionX = function() {
+ var parentWidth = this.parent.width;
+ var start = this.conversion.toScreen(this.data.start);
+ var end = this.conversion.toScreen(this.data.end);
+ var contentLeft;
+ var contentWidth;
- this.autoScale = true;
- this.stepIndex = 0;
- this.step = 1;
- this.scale = 1;
+ // limit the width of the this, as browsers cannot draw very wide divs
+ if (start < -parentWidth) {
+ start = -parentWidth;
+ }
+ if (end > 2 * parentWidth) {
+ end = 2 * parentWidth;
+ }
+ var boxWidth = Math.max(end - start, 1);
- this.marginStart;
- this.marginEnd;
- this.deadSpace = 0;
+ if (this.overflow) {
+ this.left = start;
+ this.width = boxWidth + this.props.content.width;
+ contentWidth = this.props.content.width;
- this.majorSteps = [1, 2, 5, 10];
- this.minorSteps = [0.25, 0.5, 1, 2];
+ // Note: The calculation of width is an optimistic calculation, giving
+ // a width which will not change when moving the Timeline
+ // So no re-stacking needed, which is nicer for the eye;
+ }
+ else {
+ this.left = start;
+ this.width = boxWidth;
+ contentWidth = Math.min(end - start, this.props.content.width);
+ }
- this.setRange(start, end, minimumStep, containerHeight, customRange);
- }
+ this.dom.box.style.left = this.left + 'px';
+ this.dom.box.style.width = boxWidth + 'px';
+
+ switch (this.options.align) {
+ case 'left':
+ this.dom.content.style.left = '0';
+ break;
+ case 'right':
+ this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
+ break;
+
+ case 'center':
+ this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
+ break;
+ default: // 'auto'
+ if (this.overflow) {
+ // when range exceeds left of the window, position the contents at the left of the visible area
+ contentLeft = Math.max(-start, 0);
+ }
+ else {
+ // when range exceeds left of the window, position the contents at the left of the visible area
+ if (start < 0) {
+ contentLeft = Math.min(-start,
+ (end - start - this.props.content.width - 2 * this.options.padding));
+ // TODO: remove the need for options.padding. it's terrible.
+ }
+ else {
+ contentLeft = 0;
+ }
+ }
+ this.dom.content.style.left = contentLeft + 'px';
+ }
+ };
/**
- * Set a new range
- * If minimumStep is provided, the step size is chosen as close as possible
- * to the minimumStep but larger than minimumStep. If minimumStep is not
- * provided, the scale is set to 1 DAY.
- * The minimumStep should correspond with the onscreen size of about 6 characters
- * @param {Number} [start] The start date and time.
- * @param {Number} [end] The end date and time.
- * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+ * Reposition the item vertically
+ * @Override
*/
- DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, customRange) {
- this._start = customRange.min === undefined ? start : customRange.min;
- this._end = customRange.max === undefined ? end : customRange.max;
+ RangeItem.prototype.repositionY = function() {
+ var orientation = this.options.orientation,
+ box = this.dom.box;
- if (this._start == this._end) {
- this._start -= 0.75;
- this._end += 1;
+ if (orientation == 'top') {
+ box.style.top = this.top + 'px';
}
-
- if (this.autoScale) {
- this.setMinimumStep(minimumStep, containerHeight);
+ else {
+ box.style.top = (this.parent.height - this.top - this.height) + 'px';
}
- this.setFirst(customRange);
};
/**
- * Automatically determine the scale that bests fits the provided minimum step
- * @param {Number} [minimumStep] The minimum step size in milliseconds
+ * Repaint a drag area on the left side of the range when the range is selected
+ * @protected
*/
- DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
- // round to floor
- var size = this._end - this._start;
- var safeSize = size * 1.2;
- var minimumStepValue = minimumStep * (safeSize / containerHeight);
- var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
+ RangeItem.prototype._repaintDragLeft = function () {
+ if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
+ // create and show drag area
+ var dragLeft = document.createElement('div');
+ dragLeft.className = 'drag-left';
+ dragLeft.dragLeftItem = this;
- var minorStepIdx = -1;
- var magnitudefactor = Math.pow(10,orderOfMagnitude);
+ // TODO: this should be redundant?
+ Hammer(dragLeft, {
+ preventDefault: true
+ }).on('drag', function () {
+ //console.log('drag left')
+ });
- var start = 0;
- if (orderOfMagnitude < 0) {
- start = orderOfMagnitude;
+ this.dom.box.appendChild(dragLeft);
+ this.dom.dragLeft = dragLeft;
}
-
- var solutionFound = false;
- for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
- magnitudefactor = Math.pow(10,i);
- for (var j = 0; j < this.minorSteps.length; j++) {
- var stepSize = magnitudefactor * this.minorSteps[j];
- if (stepSize >= minimumStepValue) {
- solutionFound = true;
- minorStepIdx = j;
- break;
- }
- }
- if (solutionFound == true) {
- break;
+ else if (!this.selected && this.dom.dragLeft) {
+ // delete drag area
+ if (this.dom.dragLeft.parentNode) {
+ this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
}
+ this.dom.dragLeft = null;
}
- this.stepIndex = minorStepIdx;
- this.scale = magnitudefactor;
- this.step = magnitudefactor * this.minorSteps[minorStepIdx];
};
-
-
/**
- * Round the current date to the first minor date value
- * This must be executed once when the current date is set to start Date
+ * Repaint a drag area on the right side of the range when the range is selected
+ * @protected
*/
- DataStep.prototype.setFirst = function(customRange) {
- if (customRange === undefined) {
- customRange = {};
+ RangeItem.prototype._repaintDragRight = function () {
+ if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
+ // create and show drag area
+ var dragRight = document.createElement('div');
+ dragRight.className = 'drag-right';
+ dragRight.dragRightItem = this;
+
+ // TODO: this should be redundant?
+ Hammer(dragRight, {
+ preventDefault: true
+ }).on('drag', function () {
+ //console.log('drag right')
+ });
+
+ this.dom.box.appendChild(dragRight);
+ this.dom.dragRight = dragRight;
}
- var niceStart = customRange.min === undefined ? this._start - (this.scale * 2 * this.minorSteps[this.stepIndex]) : customRange.min;
- var niceEnd = customRange.max === undefined ? this._end + (this.scale * this.minorSteps[this.stepIndex]) : customRange.max;
+ else if (!this.selected && this.dom.dragRight) {
+ // delete drag area
+ if (this.dom.dragRight.parentNode) {
+ this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
+ }
+ this.dom.dragRight = null;
+ }
+ };
- this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
- this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
- this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
- this.marginRange = this.marginEnd - this.marginStart;
+ module.exports = RangeItem;
- this.current = this.marginEnd;
- };
+/***/ },
+/* 45 */
+/***/ function(module, exports, __webpack_require__) {
- DataStep.prototype.roundToMinor = function(value) {
- var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
- if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
- return rounded + (this.scale * this.minorSteps[this.stepIndex]);
- }
- else {
- return rounded;
+ var Item = __webpack_require__(40);
+ var util = __webpack_require__(1);
+
+ /**
+ * @constructor BoxItem
+ * @extends Item
+ * @param {Object} data Object containing parameters start
+ * content, className.
+ * @param {{toScreen: function, toTime: function}} conversion
+ * Conversion functions from time to screen and vice versa
+ * @param {Object} [options] Configuration options
+ * // TODO: describe available options
+ */
+ function BoxItem (data, conversion, options) {
+ this.props = {
+ dot: {
+ width: 0,
+ height: 0
+ },
+ line: {
+ width: 0,
+ height: 0
+ }
+ };
+
+ // validate data
+ if (data) {
+ if (data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + data);
+ }
}
+
+ Item.call(this, data, conversion, options);
}
+ BoxItem.prototype = new Item (null, null, null);
/**
- * Check if the there is a next step
- * @return {boolean} true if the current date has not passed the end date
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
*/
- DataStep.prototype.hasNext = function () {
- return (this.current >= this.marginStart);
+ BoxItem.prototype.isVisible = function(range) {
+ // determine visibility
+ // TODO: account for the real width of the item. Right now we just add 1/4 to the window
+ var interval = (range.end - range.start) / 4;
+ return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
};
/**
- * Do the next step
+ * Repaint the item
*/
- DataStep.prototype.next = function() {
- var prev = this.current;
- this.current -= this.step;
+ BoxItem.prototype.redraw = function() {
+ var dom = this.dom;
+ if (!dom) {
+ // create DOM
+ this.dom = {};
+ dom = this.dom;
- // safety mechanism: if current time is still unchanged, move to the end
- if (this.current == prev) {
- this.current = this._end;
- }
- };
+ // create main box
+ dom.box = document.createElement('DIV');
- /**
- * Do the next step
- */
- DataStep.prototype.previous = function() {
- this.current += this.step;
- this.marginEnd += this.step;
- this.marginRange = this.marginEnd - this.marginStart;
- };
+ // contents box (inside the background box). used for making margins
+ dom.content = document.createElement('DIV');
+ dom.content.className = 'content';
+ dom.box.appendChild(dom.content);
+
+ // line to axis
+ dom.line = document.createElement('DIV');
+ dom.line.className = 'line';
+ // dot on axis
+ dom.dot = document.createElement('DIV');
+ dom.dot.className = 'dot';
+ // attach this item as attribute
+ dom.box['timeline-item'] = this;
- /**
- * Get the current datetime
- * @return {String} current The current date
- */
- DataStep.prototype.getCurrent = function() {
- var toPrecision = '' + Number(this.current).toPrecision(5);
- if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
- for (var i = toPrecision.length-1; i > 0; i--) {
- if (toPrecision[i] == "0") {
- toPrecision = toPrecision.slice(0,i);
- }
- else if (toPrecision[i] == "." || toPrecision[i] == ",") {
- toPrecision = toPrecision.slice(0,i);
- break;
- }
- else{
- break;
- }
- }
+ this.dirty = true;
+ }
+
+ // append DOM to parent DOM
+ if (!this.parent) {
+ throw new Error('Cannot redraw item: no parent attached');
}
+ if (!dom.box.parentNode) {
+ var foreground = this.parent.dom.foreground;
+ if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
+ foreground.appendChild(dom.box);
+ }
+ if (!dom.line.parentNode) {
+ var background = this.parent.dom.background;
+ if (!background) throw new Error('Cannot redraw item: parent has no background container element');
+ background.appendChild(dom.line);
+ }
+ if (!dom.dot.parentNode) {
+ var axis = this.parent.dom.axis;
+ if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
+ axis.appendChild(dom.dot);
+ }
+ this.displayed = true;
+
+ // Update DOM when item is marked dirty. An item is marked dirty when:
+ // - the item is not yet rendered
+ // - the item's data is changed
+ // - the item is selected/deselected
+ if (this.dirty) {
+ this._updateContents(this.dom.content);
+ this._updateTitle(this.dom.box);
+ this._updateDataAttributes(this.dom.box);
+ this._updateStyle(this.dom.box);
+
+ // update class
+ var className = (this.data.className? ' ' + this.data.className : '') +
+ (this.selected ? ' selected' : '');
+ dom.box.className = 'item box' + className;
+ dom.line.className = 'item line' + className;
+ dom.dot.className = 'item dot' + className;
- return toPrecision;
- };
+ // recalculate size
+ this.props.dot.height = dom.dot.offsetHeight;
+ this.props.dot.width = dom.dot.offsetWidth;
+ this.props.line.width = dom.line.offsetWidth;
+ this.width = dom.box.offsetWidth;
+ this.height = dom.box.offsetHeight;
+ this.dirty = false;
+ }
+ this._repaintDeleteButton(dom.box);
+ };
/**
- * Snap a date to a rounded value.
- * The snap intervals are dependent on the current scale and step.
- * @param {Date} date the date to be snapped.
- * @return {Date} snappedDate
+ * Show the item in the DOM (when not already displayed). The items DOM will
+ * be created when needed.
*/
- DataStep.prototype.snap = function(date) {
-
+ BoxItem.prototype.show = function() {
+ if (!this.displayed) {
+ this.redraw();
+ }
};
/**
- * Check if the current value is a major value (for example when the step
- * is DAY, a major value is each first day of the MONTH)
- * @return {boolean} true if current date is major, else false.
+ * Hide the item from the DOM (when visible)
*/
- DataStep.prototype.isMajor = function() {
- return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
- };
-
- module.exports = DataStep;
+ BoxItem.prototype.hide = function() {
+ if (this.displayed) {
+ var dom = this.dom;
+ if (dom.box.parentNode) dom.box.parentNode.removeChild(dom.box);
+ if (dom.line.parentNode) dom.line.parentNode.removeChild(dom.line);
+ if (dom.dot.parentNode) dom.dot.parentNode.removeChild(dom.dot);
-/***/ },
-/* 45 */
-/***/ function(module, exports, __webpack_require__) {
+ this.top = null;
+ this.left = null;
- var util = __webpack_require__(1);
- var DOMutil = __webpack_require__(6);
+ this.displayed = false;
+ }
+ };
/**
- * @constructor Group
- * @param {Number | String} groupId
- * @param {Object} data
- * @param {ItemSet} itemSet
+ * Reposition the item horizontally
+ * @Override
*/
- function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
- this.id = groupId;
- var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
- this.options = util.selectiveBridgeObject(fields,options);
- this.usingDefaultStyle = group.className === undefined;
- this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
- this.zeroPosition = 0;
- this.update(group);
- if (this.usingDefaultStyle == true) {
- this.groupsUsingDefaultStyles[0] += 1;
- }
- this.itemsData = [];
- this.visible = group.visible === undefined ? true : group.visible;
- }
+ BoxItem.prototype.repositionX = function() {
+ var start = this.conversion.toScreen(this.data.start);
+ var align = this.options.align;
+ var left;
+ var box = this.dom.box;
+ var line = this.dom.line;
+ var dot = this.dom.dot;
- GraphGroup.prototype.setItems = function(items) {
- if (items != null) {
- this.itemsData = items;
- if (this.options.sort == true) {
- this.itemsData.sort(function (a,b) {return a.x - b.x;})
- }
+ // calculate left position of the box
+ if (align == 'right') {
+ this.left = start - this.width;
+ }
+ else if (align == 'left') {
+ this.left = start;
}
else {
- this.itemsData = [];
+ // default or 'center'
+ this.left = start - this.width / 2;
}
- };
- GraphGroup.prototype.setZeroPosition = function(pos) {
- this.zeroPosition = pos;
+ // reposition box
+ box.style.left = this.left + 'px';
+
+ // reposition line
+ line.style.left = (start - this.props.line.width / 2) + 'px';
+
+ // reposition dot
+ dot.style.left = (start - this.props.dot.width / 2) + 'px';
};
- GraphGroup.prototype.setOptions = function(options) {
- if (options !== undefined) {
- var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
- util.selectiveDeepExtend(fields, this.options, options);
+ /**
+ * Reposition the item vertically
+ * @Override
+ */
+ BoxItem.prototype.repositionY = function() {
+ var orientation = this.options.orientation;
+ var box = this.dom.box;
+ var line = this.dom.line;
+ var dot = this.dom.dot;
- util.mergeOptions(this.options, options,'catmullRom');
- util.mergeOptions(this.options, options,'drawPoints');
- util.mergeOptions(this.options, options,'shaded');
+ if (orientation == 'top') {
+ box.style.top = (this.top || 0) + 'px';
- if (options.catmullRom) {
- if (typeof options.catmullRom == 'object') {
- if (options.catmullRom.parametrization) {
- if (options.catmullRom.parametrization == 'uniform') {
- this.options.catmullRom.alpha = 0;
- }
- else if (options.catmullRom.parametrization == 'chordal') {
- this.options.catmullRom.alpha = 1.0;
- }
- else {
- this.options.catmullRom.parametrization = 'centripetal';
- this.options.catmullRom.alpha = 0.5;
- }
- }
- }
- }
+ line.style.top = '0';
+ line.style.height = (this.parent.top + this.top + 1) + 'px';
+ line.style.bottom = '';
}
- };
+ else { // orientation 'bottom'
+ var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
+ var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
- GraphGroup.prototype.update = function(group) {
- this.group = group;
- this.content = group.content || 'graph';
- this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
- this.visible = group.visible === undefined ? true : group.visible;
- this.setOptions(group.options);
+ box.style.top = (this.parent.height - this.top - this.height || 0) + 'px';
+ line.style.top = (itemSetHeight - lineHeight) + 'px';
+ line.style.bottom = '0';
+ }
+
+ dot.style.top = (-this.props.dot.height / 2) + 'px';
};
- GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
- var fillHeight = iconHeight * 0.5;
- var path, fillPath;
+ module.exports = BoxItem;
- var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
- outline.setAttributeNS(null, "x", x);
- outline.setAttributeNS(null, "y", y - fillHeight);
- outline.setAttributeNS(null, "width", iconWidth);
- outline.setAttributeNS(null, "height", 2*fillHeight);
- outline.setAttributeNS(null, "class", "outline");
- if (this.options.style == 'line') {
- path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
- path.setAttributeNS(null, "class", this.className);
- path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
- if (this.options.shaded.enabled == true) {
- fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
- if (this.options.shaded.orientation == 'top') {
- fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
- "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
- }
- else {
- fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
- "L"+x+"," + (y + fillHeight) + " " +
- "L"+ (x + iconWidth) + "," + (y + fillHeight) +
- "L"+ (x + iconWidth) + ","+y);
- }
- fillPath.setAttributeNS(null, "class", this.className + " iconFill");
+/***/ },
+/* 46 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var Item = __webpack_require__(40);
+
+ /**
+ * @constructor PointItem
+ * @extends Item
+ * @param {Object} data Object containing parameters start
+ * content, className.
+ * @param {{toScreen: function, toTime: function}} conversion
+ * Conversion functions from time to screen and vice versa
+ * @param {Object} [options] Configuration options
+ * // TODO: describe available options
+ */
+ function PointItem (data, conversion, options) {
+ this.props = {
+ dot: {
+ top: 0,
+ width: 0,
+ height: 0
+ },
+ content: {
+ height: 0,
+ marginLeft: 0
}
+ };
- if (this.options.drawPoints.enabled == true) {
- DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
+ // validate data
+ if (data) {
+ if (data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + data);
}
}
- else {
- var barWidth = Math.round(0.3 * iconWidth);
- var bar1Height = Math.round(0.4 * iconHeight);
- var bar2Height = Math.round(0.75 * iconHeight);
- var offset = Math.round((iconWidth - (2 * barWidth))/3);
+ Item.call(this, data, conversion, options);
+ }
- DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
- DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
- }
+ PointItem.prototype = new Item (null, null, null);
+
+ /**
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
+ */
+ PointItem.prototype.isVisible = function(range) {
+ // determine visibility
+ // TODO: account for the real width of the item. Right now we just add 1/4 to the window
+ var interval = (range.end - range.start) / 4;
+ return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
};
/**
- *
- * @param iconWidth
- * @param iconHeight
- * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
+ * Repaint the item
*/
- GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
- var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
- return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
- }
+ PointItem.prototype.redraw = function() {
+ var dom = this.dom;
+ if (!dom) {
+ // create DOM
+ this.dom = {};
+ dom = this.dom;
+
+ // background box
+ dom.point = document.createElement('div');
+ // className is updated in redraw()
- module.exports = GraphGroup;
+ // contents box, right from the dot
+ dom.content = document.createElement('div');
+ dom.content.className = 'content';
+ dom.point.appendChild(dom.content);
+ // dot at start
+ dom.dot = document.createElement('div');
+ dom.point.appendChild(dom.dot);
-/***/ },
-/* 46 */
-/***/ function(module, exports, __webpack_require__) {
+ // attach this item as attribute
+ dom.point['timeline-item'] = this;
- var util = __webpack_require__(1);
- var DOMutil = __webpack_require__(6);
- var Component = __webpack_require__(22);
+ this.dirty = true;
+ }
- /**
- * Legend for Graph2d
- */
- function Legend(body, options, side, linegraphOptions) {
- this.body = body;
- this.defaultOptions = {
- enabled: true,
- icons: true,
- iconSize: 20,
- iconSpacing: 6,
- left: {
- visible: true,
- position: 'top-left' // top/bottom - left,center,right
- },
- right: {
- visible: true,
- position: 'top-left' // top/bottom - left,center,right
+ // append DOM to parent DOM
+ if (!this.parent) {
+ throw new Error('Cannot redraw item: no parent attached');
+ }
+ if (!dom.point.parentNode) {
+ var foreground = this.parent.dom.foreground;
+ if (!foreground) {
+ throw new Error('Cannot redraw item: parent has no foreground container element');
}
+ foreground.appendChild(dom.point);
}
- this.side = side;
- this.options = util.extend({},this.defaultOptions);
- this.linegraphOptions = linegraphOptions;
-
- this.svgElements = {};
- this.dom = {};
- this.groups = {};
- this.amountOfGroups = 0;
- this._create();
+ this.displayed = true;
- this.setOptions(options);
- }
+ // Update DOM when item is marked dirty. An item is marked dirty when:
+ // - the item is not yet rendered
+ // - the item's data is changed
+ // - the item is selected/deselected
+ if (this.dirty) {
+ this._updateContents(this.dom.content);
+ this._updateTitle(this.dom.point);
+ this._updateDataAttributes(this.dom.point);
+ this._updateStyle(this.dom.point);
- Legend.prototype = new Component();
+ // update class
+ var className = (this.data.className? ' ' + this.data.className : '') +
+ (this.selected ? ' selected' : '');
+ dom.point.className = 'item point' + className;
+ dom.dot.className = 'item dot' + className;
+ // recalculate size
+ this.width = dom.point.offsetWidth;
+ this.height = dom.point.offsetHeight;
+ this.props.dot.width = dom.dot.offsetWidth;
+ this.props.dot.height = dom.dot.offsetHeight;
+ this.props.content.height = dom.content.offsetHeight;
- Legend.prototype.addGroup = function(label, graphOptions) {
- if (!this.groups.hasOwnProperty(label)) {
- this.groups[label] = graphOptions;
- }
- this.amountOfGroups += 1;
- };
+ // resize contents
+ dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
+ //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
- Legend.prototype.updateGroup = function(label, graphOptions) {
- this.groups[label] = graphOptions;
- };
+ dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
+ dom.dot.style.left = (this.props.dot.width / 2) + 'px';
- Legend.prototype.removeGroup = function(label) {
- if (this.groups.hasOwnProperty(label)) {
- delete this.groups[label];
- this.amountOfGroups -= 1;
+ this.dirty = false;
}
- };
-
- Legend.prototype._create = function() {
- this.dom.frame = document.createElement('div');
- this.dom.frame.className = 'legend';
- this.dom.frame.style.position = "absolute";
- this.dom.frame.style.top = "10px";
- this.dom.frame.style.display = "block";
-
- this.dom.textArea = document.createElement('div');
- this.dom.textArea.className = 'legendText';
- this.dom.textArea.style.position = "relative";
- this.dom.textArea.style.top = "0px";
-
- this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.svg.style.position = 'absolute';
- this.svg.style.top = 0 +'px';
- this.svg.style.width = this.options.iconSize + 5 + 'px';
- this.svg.style.height = '100%';
- this.dom.frame.appendChild(this.svg);
- this.dom.frame.appendChild(this.dom.textArea);
+ this._repaintDeleteButton(dom.point);
};
/**
- * Hide the component from the DOM
+ * Show the item in the DOM (when not already visible). The items DOM will
+ * be created when needed.
*/
- Legend.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
+ PointItem.prototype.show = function() {
+ if (!this.displayed) {
+ this.redraw();
}
};
/**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
+ * Hide the item from the DOM (when visible)
*/
- Legend.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
- }
- };
-
- Legend.prototype.setOptions = function(options) {
- var fields = ['enabled','orientation','icons','left','right'];
- util.selectiveDeepExtend(fields, this.options, options);
- };
-
- Legend.prototype.redraw = function() {
- var activeGroups = 0;
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- activeGroups++;
- }
- }
- }
-
- if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false || activeGroups == 0) {
- this.hide();
- }
- else {
- this.show();
- if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
- this.dom.frame.style.left = '4px';
- this.dom.frame.style.textAlign = "left";
- this.dom.textArea.style.textAlign = "left";
- this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
- this.dom.textArea.style.right = '';
- this.svg.style.left = 0 +'px';
- this.svg.style.right = '';
- }
- else {
- this.dom.frame.style.right = '4px';
- this.dom.frame.style.textAlign = "right";
- this.dom.textArea.style.textAlign = "right";
- this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
- this.dom.textArea.style.left = '';
- this.svg.style.right = 0 +'px';
- this.svg.style.left = '';
- }
-
- if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
- this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
- this.dom.frame.style.bottom = '';
- }
- else {
- this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
- this.dom.frame.style.top = '';
+ PointItem.prototype.hide = function() {
+ if (this.displayed) {
+ if (this.dom.point.parentNode) {
+ this.dom.point.parentNode.removeChild(this.dom.point);
}
- if (this.options.icons == false) {
- this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
- this.dom.textArea.style.right = '';
- this.dom.textArea.style.left = '';
- this.svg.style.width = '0px';
- }
- else {
- this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
- this.drawLegendIcons();
- }
+ this.top = null;
+ this.left = null;
- var content = '';
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- content += this.groups[groupId].content + '
';
- }
- }
- }
- this.dom.textArea.innerHTML = content;
- this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
+ this.displayed = false;
}
};
- Legend.prototype.drawLegendIcons = function() {
- if (this.dom.frame.parentNode) {
- DOMutil.prepareElements(this.svgElements);
- var padding = window.getComputedStyle(this.dom.frame).paddingTop;
- var iconOffset = Number(padding.replace('px',''));
- var x = iconOffset;
- var iconWidth = this.options.iconSize;
- var iconHeight = 0.75 * this.options.iconSize;
- var y = iconOffset + 0.5 * iconHeight + 3;
+ /**
+ * Reposition the item horizontally
+ * @Override
+ */
+ PointItem.prototype.repositionX = function() {
+ var start = this.conversion.toScreen(this.data.start);
- this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
+ this.left = start - this.props.dot.width;
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
- y += iconHeight + this.options.iconSpacing;
- }
- }
- }
+ // reposition point
+ this.dom.point.style.left = this.left + 'px';
+ };
- DOMutil.cleanupElements(this.svgElements);
+ /**
+ * Reposition the item vertically
+ * @Override
+ */
+ PointItem.prototype.repositionY = function() {
+ var orientation = this.options.orientation,
+ point = this.dom.point;
+
+ if (orientation == 'top') {
+ point.style.top = this.top + 'px';
+ }
+ else {
+ point.style.top = (this.parent.height - this.top - this.height) + 'px';
}
};
- module.exports = Legend;
+ module.exports = PointItem;
/***/ },
@@ -22169,7 +22169,7 @@ return /******/ (function(modules) { // webpackBootstrap
var Emitter = __webpack_require__(10);
var Hammer = __webpack_require__(18);
- var mousetrap = __webpack_require__(40);
+ var mousetrap = __webpack_require__(32);
var util = __webpack_require__(1);
var hammerUtil = __webpack_require__(21);
var DataSet = __webpack_require__(7);
@@ -22182,7 +22182,7 @@ return /******/ (function(modules) { // webpackBootstrap
var Edge = __webpack_require__(53);
var Popup = __webpack_require__(54);
var MixinLoader = __webpack_require__(55);
- var Activator = __webpack_require__(39);
+ var Activator = __webpack_require__(31);
var locales = __webpack_require__(66);
// Load custom shapes into CanvasRenderingContext2D
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index d25987f7..bb986a25 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -1,7 +1,6 @@
var util = require('../../util');
var stack = require('../Stack');
var RangeItem = require('./item/RangeItem');
-var DateUtil = require('../DateUtil');
/**
* @constructor Group
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 9ebba84e..5b94fede 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -578,15 +578,15 @@ ItemSet.prototype._updateUngrouped = function() {
ungrouped.hide();
delete this.groups[UNGROUPED];
-// var background = this.groups[BACKGROUND];
-// for (itemId in this.items) {
-// if (this.items.hasOwnProperty(itemId)) {
-// item = this.items[itemId];
-// if ((item instanceof BackgroundItem)) {
-// background.add(item);
-// }
-// }
-// }
+ for (itemId in this.items) {
+ if (this.items.hasOwnProperty(itemId)) {
+ item = this.items[itemId];
+ item.parent && item.parent.remove(item);
+ var groupId = this._getGroupId(item.data);
+ var group = this.groups[groupId];
+ group && group.add(item) || item.hide();
+ }
+ }
}
}
else {
@@ -777,7 +777,7 @@ ItemSet.prototype._getType = function (itemData) {
ItemSet.prototype._getGroupId = function (itemData) {
var type = this._getType(itemData);
if (type == 'background') {
- return itemData.group != undefined ? itemData.group : BACKGROUND;
+ return this.groupsData && itemData.group != undefined ? itemData.group : BACKGROUND;
}
else {
return this.groupsData ? itemData.group : UNGROUPED;
diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js
index c2f32552..d77bad44 100644
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/lib/timeline/component/item/BackgroundItem.js
@@ -1,5 +1,6 @@
var Hammer = require('../../../module/hammer');
var Item = require('./Item');
+var BackgroundGroup = require('../BackgroundGroup');
var RangeItem = require('./RangeItem');
/**
@@ -185,18 +186,18 @@ BackgroundItem.prototype.repositionY = function(margin) {
// and in the case of no subgroups:
else {
// we want backgrounds with groups to only show in groups.
- if (this.data.group !== undefined) {
- height = this.parent.height;
- // same alignment for items when orientation is top or bottom
- this.dom.box.style.top = this.parent.top + 'px';
- this.dom.box.style.bottom = '';
- }
- else {
+ if (this.parent instanceof BackgroundGroup) {
// if the item is not in a group:
height = Math.max(this.parent.height, this.parent.itemSet.body.domProps.centerContainer.height);
this.dom.box.style.top = onTop ? '0' : '';
this.dom.box.style.bottom = onTop ? '' : '0';
}
+ else {
+ height = this.parent.height;
+ // same alignment for items when orientation is top or bottom
+ this.dom.box.style.top = this.parent.top + 'px';
+ this.dom.box.style.bottom = '';
+ }
}
this.dom.box.style.height = height + 'px';
};